:root{font-family:Helvetica Neue,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;line-height:1.5;font-weight:400;color:#1f2933;background-color:#f5f6f8;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}a{color:#2563eb;text-decoration:none}a:hover{text-decoration:underline}body{margin:0;min-height:100vh;background-color:inherit}button{font-family:inherit}textarea{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace}:root{--hand-area-max-width: 1000px}.app{min-height:100vh}main{width:min(960px,calc(100% - 32px));margin:40px auto;display:flex;flex-direction:column;gap:24px}.lobby__header,.room__header{display:flex;flex-direction:column;gap:12px}.lobby__title,.room__title,.card__title{margin:0;color:#111827}.lobby__description{margin:0;color:#4b5563;font-size:.95rem}.room__status{font-weight:600;color:#2563eb}.room__back-link{font-size:.9rem}.card{background-color:#fff;border-radius:12px;padding:24px;box-shadow:0 12px 24px #0f172a14;display:flex;flex-direction:column;gap:16px}.card__title{font-size:1.1rem}.room-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:16px}.room-grid__heading{margin:0 0 8px;font-size:.85rem;letter-spacing:.08em;color:#6b7280}.room-grid__list{list-style:none;padding:0;margin:0;display:grid;gap:6px}.room-grid__link{display:inline-block;width:100%;padding:8px 12px;background-color:#eef2ff;border-radius:8px;color:#1d4ed8;font-weight:600;text-align:center;transition:background-color .2s ease,transform .2s ease}.room-grid__link:hover{background-color:#dbeafe;transform:translateY(-1px)}.button{display:inline-flex;align-items:center;justify-content:center;padding:10px 18px;border-radius:8px;border:none;cursor:pointer;font-weight:600;transition:transform .2s ease,box-shadow .2s ease;text-decoration:none}.button--primary{background-color:#2563eb;color:#fff;box-shadow:0 8px 20px #2563eb59}.button--primary:hover{transform:translateY(-1px);box-shadow:0 12px 24px #2563eb73}.button--secondary{background-color:#111827;color:#fff}.button--secondary:hover{transform:translateY(-1px)}.hand-row{display:flex;flex-wrap:wrap;gap:0;justify-content:flex-start;width:100%}.section-label{font-size:.85rem;color:#6b7280;margin-bottom:6px}.section-label--inline{margin-top:8px}.mahjong-table .section-label{color:#c7d2ff}.tile-button{display:inline-flex;align-items:center;justify-content:center;border:none;background:none;padding:0;cursor:pointer;border-radius:10px;transition:transform .2s ease,box-shadow .2s ease}.tile-button:hover{transform:translateY(-2px);box-shadow:0 6px 12px #6366f133}.tile-button--riichi{transform:rotate(-90deg)}.tile-button--riichi:hover{transform:rotate(-90deg);box-shadow:0 6px 12px #6366f133}.tile-button:focus-visible{outline:3px solid rgba(59,130,246,.35);outline-offset:2px}.tile-button--tsumo,.tile-button--opponent-tsumo{margin-left:10px}.tile-gap{display:inline-block;width:52px;aspect-ratio:2.4 / 3.6;border:2px dashed rgba(148,163,184,.5);border-radius:10px;box-sizing:border-box;pointer-events:none}.tile-gap--opponent{border-color:#60a5fa73}.table-status{align-self:center;display:flex;flex-direction:column;align-items:center;gap:12px;padding:clamp(12px,2vw,20px);border-radius:16px;background:#0f172aa6;box-shadow:inset 0 0 0 1px #94a3b833;min-width:min(100%,320px);margin:auto 0}.table-status__points{display:flex;align-items:center;justify-content:center;gap:18px}.table-status__points--stacked{flex-direction:column;gap:8px}.table-status__value{display:flex;align-items:center;justify-content:center;gap:10px;font-size:1.4rem;font-weight:700;color:#f8fafc}.table-status__number{font:inherit;color:inherit;text-align:center}.table-status__mark{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;font-size:.7rem;font-weight:700;letter-spacing:.08em;padding:0;border:1px solid rgba(250,204,21,.65);border-radius:50%;color:#facc15}.table-status__mark--hidden,.table-status__mark--spacer{visibility:hidden;border-color:transparent}.table-status__remaining{font-size:.95rem;font-weight:600;color:#e2e8f0e6}.action-countdown{display:inline-flex;align-items:center;justify-content:center;color:#fde68a;min-width:180px;text-align:center}.action-countdown--expired{border-color:#94a3b866;background:#94a3b833;color:#cbd5e1e6;box-shadow:none}.action-countdown__segments{display:inline-flex;align-items:baseline;justify-content:center;gap:10px;font-weight:800}.action-countdown__value{font-size:2.8rem;line-height:1}.action-countdown__value--secondary{font-size:2rem;opacity:.8}.action-countdown__separator{font-size:2rem;opacity:.7}.player-area__content{position:relative;width:100%;max-width:var(--hand-area-max-width);margin:0 auto;display:flex;flex-direction:column;gap:clamp(12px,2vw,24px);justify-content:space-between;height:100%}.player-area__overlay{position:absolute;right:0;bottom:92px;display:flex;align-items:center;justify-content:flex-end;pointer-events:none;height:68px}.player-area__overlay>*{pointer-events:auto}.action-controls{display:flex;flex-direction:row;align-items:center;justify-content:center;gap:16px;height:100%}.action-controls__button{min-width:160px;padding:10px 18px;border-radius:9999px;border:none;background:linear-gradient(135deg,#f97316,#facc15);color:#0f172a;font-size:1.1rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;cursor:pointer;transition:transform .12s ease,box-shadow .12s ease}.action-controls__button--secondary{background:linear-gradient(135deg,#94a3b8,#cbd5f5);color:#0f172a}.action-controls__button:hover{transform:translateY(-1px);box-shadow:0 10px 18px #f9731659}.action-controls__button:active{transform:translateY(1px);box-shadow:0 6px 12px #f9731640}.room-fullscreen{position:fixed;inset:0;width:100vw;height:100vh;display:flex;align-items:stretch;justify-content:stretch;background:#0b1120;box-sizing:border-box}.tile-button--small{border-radius:8px}.tile-figure{position:relative;display:inline-block;width:51px;height:68px;max-width:100%}.tile-figure__base{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:block;pointer-events:none;-webkit-user-select:none;user-select:none}.tile-figure__overlay{position:absolute;top:8%;left:8%;width:84%;height:84%;object-fit:contain;display:block;pointer-events:none;-webkit-user-select:none;user-select:none}.tile-figure__label{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-weight:600;color:#111827;background:#ffffffd9;border-radius:8px}.mahjong-table{display:flex;flex-direction:column;align-items:stretch;justify-content:space-between;width:100%;height:100%;padding:0;border-radius:0;background:linear-gradient(135deg,#0f1f33,#132b4d);color:#e3efff;box-shadow:inset 0 1px #ffffff0a;box-sizing:border-box}.room-fullscreen .mahjong-table{width:100%;height:100%}.opponent-area,.player-area{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:clamp(12px,2vw,24px);width:100%;max-width:var(--hand-area-max-width);margin:0 auto;flex:1}.opponent-area{justify-content:space-between}.player-area{align-self:stretch}.declaration-display{pointer-events:none;display:flex;align-items:center;justify-content:center}.opponent-area>.declaration-display,.player-area>.declaration-display{position:absolute;left:50%;transform:translate(-50%);z-index:10;width:auto}.opponent-area>.declaration-display{top:0}.player-area>.declaration-display{top:0}.hand-row{display:flex;flex-wrap:nowrap;gap:0;justify-content:space-between;width:100%;max-width:var(--hand-area-max-width)}.hand-row--opponent{justify-content:flex-start;flex-wrap:wrap}.hand-row__main{display:flex;flex-wrap:wrap;gap:0;flex:0 1 auto}.hand-row__ankans{display:flex;gap:0;flex:0 0 auto;margin-left:auto}.ankan-set{display:flex;gap:0;margin-left:10px}.river{display:flex;flex-direction:column;gap:8px;align-items:flex-start;width:30%;max-width:var(--hand-area-max-width);height:68px}.river__tiles{display:flex;flex-wrap:wrap;justify-content:flex-start;gap:0;width:100%;max-width:var(--hand-area-max-width)}.declaration-display__text{display:inline-block;padding:16px 32px;font-size:3rem;font-weight:900;color:#fbbf24;text-shadow:0 0 20px rgba(251,191,36,.8),0 0 40px rgba(251,191,36,.6),2px 2px 4px rgba(0,0,0,.8);letter-spacing:.1em;animation:declaration-fade-in .3s ease-out;white-space:nowrap}@keyframes declaration-fade-in{0%{opacity:0;transform:scale(.8)}to{opacity:1;transform:scale(1)}}.round-result-overlay{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;padding:clamp(16px,4vw,48px);background:linear-gradient(180deg,#0f172af5,#080b16f5);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);animation:overlay-fade-in .3s ease-out}@keyframes overlay-fade-in{0%{opacity:0}to{opacity:1}}.round-result-overlay__card{min-height:600px;width:min(780px,100%);border-radius:24px;padding:10px;background:#0a1020d9;border:1px solid rgba(148,163,184,.3);box-shadow:0 24px 48px #0f172a73,0 12px 24px #0f172a59;display:flex;flex-direction:column;gap:clamp(16px,3vh,32px);color:#f8fafc}.round-result-overlay__header{display:flex;flex-direction:column;gap:12px;text-align:center}.round-result-overlay__label{display:inline-block;align-self:center;font-size:clamp(2rem,4vw,3rem);font-weight:900;letter-spacing:.2em;color:#fbbf24;text-shadow:0 0 24px rgba(251,191,36,.75),0 4px 12px rgba(15,23,42,.9)}.round-result-overlay__tiles{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:center;gap:6px}.round-result-overlay__tile-group{display:flex}.round-result-overlay__tile-gap{height:1px}.round-result-overlay__hand{flex-wrap:nowrap}.round-result-overlay__ankans{display:flex;flex-wrap:wrap}.round-result-overlay__ankan-set{display:flex}.round-result-overlay__tile{zoom:.8;pointer-events:none}.round-result-overlay__tile.tile-button:disabled{opacity:1}.round-result-overlay__points{display:flex;align-items:baseline;justify-content:flex-start;gap:12px;font-weight:800;color:#fef3c7}.round-result-overlay__points--animated{animation:points-explode .6s cubic-bezier(.34,1.56,.64,1) forwards,points-glow 1.5s ease-in-out .6s infinite;opacity:0;transform:scale(.3)}@keyframes points-explode{0%{opacity:0;transform:scale(.3);text-shadow:0 0 0 rgba(254,243,199,0)}50%{transform:scale(1.2);text-shadow:0 0 30px rgba(254,243,199,.9),0 0 60px rgba(251,191,36,.7),0 0 90px rgba(245,158,11,.5)}to{opacity:1;transform:scale(1);text-shadow:0 0 20px rgba(254,243,199,.6),0 0 40px rgba(251,191,36,.4),0 4px 12px rgba(15,23,42,.5)}}@keyframes points-glow{0%,to{text-shadow:0 0 20px rgba(254,243,199,.6),0 0 40px rgba(251,191,36,.4),0 4px 12px rgba(15,23,42,.5)}50%{text-shadow:0 0 30px rgba(254,243,199,.8),0 0 60px rgba(251,191,36,.6),0 0 90px rgba(245,158,11,.4),0 4px 12px rgba(15,23,42,.5)}}.round-result-overlay__points-value{font-size:clamp(3rem,6vw,4.5rem)}.round-result-overlay__points-unit{font-size:clamp(1.5rem,3vw,2rem)}.round-result-overlay__han{padding:6px 18px;border-radius:999px;background:#3b82f633;border:1px solid rgba(56,189,248,.4);font-size:clamp(1rem,2vw,1.3rem);color:#bae6fd}.round-result-overlay__han--yakuman{background:linear-gradient(135deg,#fbbf2440,#f59e0b33);border:2px solid rgba(251,191,36,.6);color:#fbbf24;text-shadow:0 0 10px rgba(251,191,36,.5),0 2px 4px rgba(0,0,0,.5);box-shadow:0 4px 12px #fbbf2433}.round-result-overlay__han--animated{animation:han-pop-in .5s cubic-bezier(.175,.885,.32,1.275) forwards;opacity:0;transform:scale(.5)}@keyframes han-pop-in{0%{opacity:0;transform:scale(.5) rotate(-10deg)}60%{transform:scale(1.1) rotate(5deg)}to{opacity:1;transform:scale(1) rotate(0)}}.round-result-overlay__yaku{display:flex;flex-wrap:wrap;justify-content:center;gap:12px}.round-result-overlay__yaku-badge{padding:8px 20px;border-radius:999px;background:linear-gradient(135deg,#22c55e40,#16a34a33);border:2px solid rgba(34,197,94,.6);color:#4ade80;font-size:clamp(1rem,2vw,1.3rem);font-weight:700;letter-spacing:.05em;text-shadow:0 0 10px rgba(34,197,94,.5),0 2px 4px rgba(0,0,0,.5);box-shadow:0 4px 12px #22c55e33;animation:yaku-slide-in .4s cubic-bezier(.34,1.56,.64,1) forwards;opacity:0;transform:translate(-20px)}.round-result-overlay__yaku-badge--yakuman{background:linear-gradient(135deg,#fbbf2440,#f59e0b33);border:2px solid rgba(251,191,36,.6);color:#fbbf24;text-shadow:0 0 10px rgba(251,191,36,.5),0 2px 4px rgba(0,0,0,.5);box-shadow:0 4px 12px #fbbf2433}@keyframes yaku-slide-in{0%{opacity:0;transform:translate(-20px) scale(.9)}60%{transform:translate(5px) scale(1.05)}to{opacity:1;transform:translate(0) scale(1)}}.round-result-overlay__points-left{display:flex;flex-direction:column;align-items:flex-start}.score-transfer-display{position:relative;display:flex;flex-direction:column;align-items:center}.score-transfer-display__arrow{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);pointer-events:none;z-index:0;opacity:.5;width:80px;height:80px}.score-transfer-display__arrow svg{width:100%;height:100%}.score-transfer-display__arrow--right svg{transform:scaleX(-1)}.score-transfer-display__arrow--left svg{transform:scaleX(1)}.score-transfer-display__grid{position:relative;z-index:1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:160px;font-size:clamp(1rem,2vw,1.25rem)}.score-transfer-display__item{display:flex;flex-direction:column;gap:4px}.score-transfer-display__delta{font-weight:400;font-size:.85em;text-align:center;min-height:1.5em}.score-transfer-display__delta--positive{color:#4ade80}.score-transfer-display__delta--negative{color:#f87171}.score-transfer-display__delta--neutral{color:#94a3b8}.score-transfer-display__row{display:flex;gap:8px;align-items:baseline;justify-content:flex-start}.score-transfer-display__label{font-size:.9em;color:#cbd5f5;min-width:60px;text-align:left}.score-transfer-display__points{font-weight:700;color:#f8fafc;min-width:100px;text-align:right}.round-result-overlay__scores{position:relative;display:flex;flex-direction:column;align-items:center}.round-result-overlay__scores-arrow{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);pointer-events:none;z-index:0;opacity:.5;width:80px;height:80px}.round-result-overlay__scores-arrow svg{width:100%;height:100%}.round-result-overlay__scores-arrow--right svg{transform:scaleX(-1)}.round-result-overlay__scores-arrow--left svg{transform:scaleX(1)}.round-result-overlay__scores-grid{position:relative;z-index:1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:160px;font-size:clamp(1rem,2vw,1.25rem)}.round-result-overlay__score-item{display:flex;flex-direction:column;gap:4px}.round-result-overlay__score-delta{font-weight:400;font-size:.85em;text-align:center;min-height:1.5em}.round-result-overlay__score-delta--positive{color:#4ade80}.round-result-overlay__score-delta--negative{color:#f87171}.round-result-overlay__score-row{display:flex;gap:8px;align-items:baseline;justify-content:flex-start}.round-result-overlay__score-label{font-size:.9em;color:#cbd5f5;min-width:60px;text-align:left}.round-result-overlay__score-points{font-weight:700;color:#f8fafc;min-width:100px;text-align:right}.round-result-overlay__points-section{display:flex;flex-direction:row;align-items:center;justify-content:space-between;max-width:600px;margin:0 auto;gap:24px;width:100%}.round-result-overlay__limit-name{align-self:center;padding:clamp(12px,2vw,18px) clamp(24px,4vw,36px);font-size:clamp(1.5rem,4vw,2.5rem);font-weight:900;letter-spacing:.15em;color:#fbbf24;text-shadow:0 0 30px rgba(251,191,36,.9),0 0 60px rgba(251,191,36,.6),0 0 90px rgba(245,158,11,.4),2px 2px 8px rgba(0,0,0,.8);background:linear-gradient(135deg,#dc26264d,#ef444433);border:2px solid rgba(251,191,36,.5);border-radius:16px;animation:limit-name-shine .8s cubic-bezier(.34,1.56,.64,1) forwards;opacity:0;transform:scale(.5) rotateY(-90deg);position:relative;overflow:hidden}.round-result-overlay__limit-name:before{content:"";position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:linear-gradient(45deg,transparent,rgba(255,255,255,.1),transparent);animation:shine-sweep 2s infinite}@keyframes limit-name-shine{0%{opacity:0;transform:scale(.5) rotateY(-90deg)}60%{transform:scale(1.15) rotateY(10deg)}to{opacity:1;transform:scale(1) rotateY(0)}}@keyframes shine-sweep{0%{transform:translate(-100%) translateY(-100%) rotate(45deg)}to{transform:translate(100%) translateY(100%) rotate(45deg)}}.round-result-overlay__next-button{align-self:center;padding:6px 14px;border-radius:16px;border:1px solid rgba(148,163,184,.35);background:#1e293b66;color:#cbd5f5;font-size:clamp(.8rem,1.4vw,1rem);font-weight:500;letter-spacing:.04em;cursor:pointer;transition:opacity .2s ease;margin-top:auto;margin-bottom:8px}.round-result-overlay__next-button:hover{opacity:.9}.round-result-overlay__next-button:active{opacity:.75}.round-result-overlay__next-button:disabled{cursor:default;opacity:.5}.room,.room--invalid,.not-found{min-height:calc(100vh - 80px)}@media (max-width: 640px){main{margin:24px auto;width:calc(100% - 24px)}.table-status{width:100%;padding:16px 20px}.table-status__points{flex-direction:column;gap:12px}.room-fullscreen .mahjong-table{width:100%;height:100%}}.hand-display{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:center;gap:6px}.hand-display__tile-group{display:flex}.hand-display__tile-gap{height:1px}.hand-display__hand{flex-wrap:nowrap}.hand-display__ankans{display:flex;flex-wrap:wrap}.hand-display__ankan-set{display:flex}.hand-display__tile{zoom:.8;pointer-events:none}.hand-display__tile.tile-button:disabled{opacity:1}.waiting-tiles-display{display:flex;flex-direction:column;align-items:flex-start;gap:4px;margin-left:8px}.waiting-tiles-display__label{font-size:clamp(.7rem,1.2vw,.85rem);color:#cbd5f5;font-weight:600}.waiting-tiles-display__tiles{display:flex;flex-wrap:wrap;justify-content:flex-start;gap:2px;max-width:180px}.waiting-tiles-display__tile{zoom:.55;pointer-events:none}.waiting-tiles-display__tile.tile-button:disabled{opacity:1}.round-draw-overlay{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;padding:clamp(16px,4vw,48px);background:linear-gradient(180deg,#0f172af5,#080b16f5);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);animation:overlay-fade-in .3s ease-out}.round-draw-overlay__card{min-height:600px;width:min(780px,100%);border-radius:24px;padding:10px;background:#0a1020d9;border:1px solid rgba(148,163,184,.3);box-shadow:0 24px 48px #0f172a73,0 12px 24px #0f172a59;display:flex;flex-direction:column;gap:clamp(8px,2vh,16px);color:#f8fafc}.round-draw-overlay__header{display:flex;flex-direction:column;gap:8px;text-align:center}.round-draw-overlay__label{display:inline-block;align-self:center;font-size:clamp(2rem,4vw,3rem);font-weight:900;letter-spacing:.2em;color:#94a3b8;text-shadow:0 0 24px rgba(148,163,184,.5),0 4px 12px rgba(15,23,42,.9)}.round-draw-overlay__player-section{display:flex;flex-direction:column;gap:8px;padding:12px;border-radius:12px;background:#0f172a66;border:1px solid rgba(148,163,184,.2)}.round-draw-overlay__player-header{display:flex;align-items:center;justify-content:space-between;gap:8px}.round-draw-overlay__player-name{font-size:clamp(.95rem,1.8vw,1.15rem);font-weight:600;color:#cbd5f5}.round-draw-overlay__tenpai-badge{padding:3px 10px;border-radius:999px;background:linear-gradient(135deg,#22c55e40,#16a34a33);border:2px solid rgba(34,197,94,.6);color:#4ade80;font-size:clamp(.75rem,1.4vw,.95rem);font-weight:700;text-shadow:0 0 10px rgba(34,197,94,.5),0 2px 4px rgba(0,0,0,.5)}.round-draw-overlay__noten-badge{padding:3px 10px;border-radius:999px;background:#94a3b833;border:2px solid rgba(148,163,184,.4);color:#94a3b8;font-size:clamp(.75rem,1.4vw,.95rem);font-weight:700}.round-draw-overlay__hand-container{display:flex;align-items:flex-start;gap:0;margin-top:4px}.round-draw-overlay__hand{flex-shrink:0}.round-draw-overlay__waiting{flex-shrink:1;min-width:0}.round-draw-overlay__next-button{align-self:center;padding:6px 14px;border-radius:16px;border:1px solid rgba(148,163,184,.35);background:#1e293b66;color:#cbd5f5;font-size:clamp(.8rem,1.4vw,1rem);font-weight:500;letter-spacing:.04em;cursor:pointer;transition:opacity .2s ease;margin-top:auto;margin-bottom:8px}.round-draw-overlay__next-button:hover{opacity:.9}.round-draw-overlay__next-button:active{opacity:.75}.round-draw-overlay__next-button:disabled{cursor:default;opacity:.5}@media (orientation: landscape) and (max-height: 450px){.mahjong-table,.round-result-overlay{zoom:.8}.round-result-overlay__card{min-height:115vh}.round-draw-overlay{zoom:.8}.round-draw-overlay__card{min-height:115vh}}