:root{--sumi: #14161c;--ai: #1c2a3e;--ai-raised: #24364e;--ai-line: #324867;--hone: #f2e9d6;--hone-edge: #d8cbb0;--shu: #e04a2f;--shu-soft: #f06a52;--koke: #5e9a6b;--hanada: #3e78b0;--kin: #d2a94e;--kasumi: #8a93a3;--ink: #1a1d24;--text: #ece7da;--text-dim: #8a93a3;--font-display: "Noto Serif KR", serif;--font-body: "Pretendard", system-ui, -apple-system, sans-serif;--font-mono: "SF Mono", "JetBrains Mono", ui-monospace, monospace;--r-tile: 8px;--r-panel: 16px;--r-pill: 999px;--shadow-tile: 0 2px 0 var(--hone-edge), 0 6px 14px rgba(0, 0, 0, .45);--shadow-panel: 0 18px 50px rgba(0, 0, 0, .5)}*{box-sizing:border-box;margin:0;padding:0}html,body{height:100%}body{background:radial-gradient(120% 80% at 50% -10%,#1d2c42 0%,var(--sumi) 60%) fixed,var(--sumi);color:var(--text);font-family:var(--font-body);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}#app{min-height:100dvh;display:flex;flex-direction:column}button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}button:focus-visible{outline:2px solid var(--shu-soft);outline-offset:2px}@media (prefers-reduced-motion: reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important}}.tile{--w: 38px;--h: 52px;--depth: 4px;--face-top: #fffefa;--face-mid: #f6eeda;--face-bot: #efe4cb;--wall: #d8c399;position:relative;width:var(--w);height:var(--h);flex:0 0 auto;margin:0 var(--depth) var(--depth) 0;border-radius:4px;background:linear-gradient(150deg,var(--face-top) 0%,var(--face-mid) 58%,var(--face-bot) 100%);box-shadow:inset 0 1.5px #fffc,1px 1px 0 var(--wall),2px 2px 0 var(--wall),3px 3px 0 var(--wall),4px 4px 0 var(--wall),3px 6px 5px -1px #00000052;display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1;-webkit-user-select:none;user-select:none;transition:transform .12s ease}.tile[data-size=sm]{--w: 26px;--h: 36px;--depth: 3px;box-shadow:inset 0 1px #ffffffbf,1px 1px 0 var(--wall),2px 2px 0 var(--wall),3px 3px 0 var(--wall),2px 4px 4px -1px #0000004d}.tile[data-size=lg]{--w: 50px;--h: 70px;--depth: 6px;box-shadow:inset 0 2px #ffffffd1,1px 1px 0 var(--wall),2px 2px 0 var(--wall),3px 3px 0 var(--wall),4px 4px 0 var(--wall),5px 5px 0 var(--wall),6px 6px 0 var(--wall),4px 8px 6px -1px #00000057}button.tile:hover{transform:translateY(-6px)}.tile--selected{--wall: #c43a26;transform:translateY(-10px)}.tile--correct{--wall: #4d7d5a;transform:translateY(-8px)}.tile__num{font-family:var(--font-body);font-weight:800;font-size:calc(var(--h) * .42);letter-spacing:-.04em}.tile__mark{font-family:var(--font-display);font-weight:700;font-size:calc(var(--h) * .2);margin-top:1px;opacity:.78}.tile__honor{font-family:var(--font-display);font-weight:900;font-size:calc(var(--h) * .46)}.suit-man{color:#1f2733}.suit-man .tile__mark{color:var(--shu);opacity:.92}.suit-pin{color:var(--hanada)}.suit-sou{color:var(--koke)}.suit-wind{color:#20283a}.suit-haku{color:#6b7b93;-webkit-text-stroke:1.2px #6b7b93}.suit-haku .tile__honor{color:transparent}.suit-hatsu{color:var(--koke)}.suit-chun{color:var(--shu)}.tile--back{--face-top: #32486a;--face-mid: #233452;--face-bot: #1a2740;--wall: #141f33}.tile--back:after{content:"";position:absolute;top:5px;right:5px;bottom:5px;left:5px;border-radius:4px;border:1.5px solid rgba(120,150,200,.3)}.tile--dora{--wall: #c79a3e;outline:2px solid var(--kin);outline-offset:-2px}.tile--dim{opacity:.5}.tile--riichi{--wall: #c43a26;transform:rotate(-90deg);margin:6px 9px}.tile-row{display:flex;gap:1px;flex-wrap:wrap}.screen{flex:1;width:100%;max-width:1040px;margin:0 auto;padding:20px clamp(12px,4vw,32px) 40px;display:flex;flex-direction:column}.topbar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px clamp(12px,4vw,32px);max-width:1040px;width:100%;margin:0 auto}.wordmark{font-family:var(--font-display);font-weight:900;font-size:26px;letter-spacing:-.02em}.wordmark .dot{color:var(--shu)}.wallet-chip{display:inline-flex;align-items:center;gap:8px;background:var(--ai);border:1px solid var(--ai-line);border-radius:var(--r-pill);padding:8px 16px;font-family:var(--font-mono);font-weight:600;color:var(--kin)}.wallet-chip .label{color:var(--text-dim);font-family:var(--font-body);font-size:12px}.sound-toggle{padding:8px 12px;font-size:16px;line-height:1}.sort-btn{padding:8px 16px;font-size:13px}.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:var(--r-pill);padding:12px 22px;font-weight:700;font-size:15px;background:var(--ai-raised);color:var(--text);border:1px solid var(--ai-line);transition:transform .1s ease,filter .1s ease}.btn:hover{filter:brightness(1.12)}.btn:active{transform:scale(.97)}.btn--primary{background:var(--shu);border-color:var(--shu);color:#fff}.btn--gold{background:var(--kin);border-color:var(--kin);color:#2a2208}.btn--ghost{background:transparent}.btn:disabled{opacity:.4;cursor:not-allowed}.panel{background:var(--ai);border:1px solid var(--ai-line);border-radius:var(--r-panel);box-shadow:var(--shadow-panel)}.eyebrow{font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--text-dim);font-weight:700}.hero{text-align:center;padding:clamp(24px,7vw,60px) 0 28px}.hero__brand{font-family:var(--font-display);font-weight:900;font-size:clamp(56px,16vw,130px);line-height:.92;letter-spacing:-.03em}.hero__brand .dot{color:var(--shu)}.hero__sub{margin-top:14px;color:var(--text-dim);font-size:clamp(14px,3.6vw,18px)}.hero__tiles{display:flex;justify-content:center;gap:4px;margin:26px 0 6px}.tables{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px;margin-top:8px}.table-card{text-align:left;padding:20px;border-radius:var(--r-panel);background:var(--ai);border:1px solid var(--ai-line);transition:transform .12s ease,border-color .12s ease}.table-card:hover:not(:disabled){transform:translateY(-4px);border-color:var(--shu)}.table-card:disabled{opacity:.45}.table-card__name{font-family:var(--font-display);font-weight:700;font-size:24px}.table-card__rate{color:var(--kin);font-family:var(--font-mono);font-weight:600;margin-top:2px}.table-card__req{margin-top:14px;font-size:13px;color:var(--text-dim)}.table-card__locked{margin-top:14px;font-size:13px;color:var(--shu-soft);font-weight:600}.lobby-actions{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin:30px 0 10px}.board{flex:1;display:grid;grid-template-rows:auto 1fr auto;gap:12px;min-height:0}.board__center{position:relative;background:radial-gradient(120% 120% at 50% 50%,#20405a,#16293d 70%);border:1px solid var(--ai-line);border-radius:20px;display:grid;grid-template-columns:1fr auto 1fr;grid-template-rows:auto 1fr auto;align-items:center;justify-items:center;padding:14px;min-height:300px;gap:8px}.seat{display:flex;flex-direction:column;align-items:center;gap:6px}.seat--top{grid-column:2;grid-row:1}.seat--left{grid-column:1;grid-row:2}.seat--right{grid-column:3;grid-row:2}.seat--self{grid-column:2;grid-row:3}.seat__name{font-size:12px;color:var(--text-dim)}.seat__name .wind{color:var(--kin);font-family:var(--font-display);font-weight:700;margin-right:4px}.seat__name.turn{color:var(--shu-soft)}.seat__pts{font-family:var(--font-mono);font-weight:700;font-size:14px}.seat__riichi{color:var(--shu);font-family:var(--font-display);font-weight:700;font-size:12px}.seat--winner{background:#e04a2f1a;border-radius:12px;padding:6px;box-shadow:0 0 0 1.5px var(--shu)}.winner-badge{margin-left:6px;background:var(--shu);color:#fff;font-family:var(--font-display);font-weight:700;font-size:11px;padding:1px 7px;border-radius:999px}.tile-row.revealed{padding:3px;background:#f2e9d612;border-radius:8px}.peek-bar{position:fixed;left:50%;bottom:22px;transform:translate(-50%);display:flex;align-items:center;gap:14px;background:var(--ai-raised);border:1px solid var(--ai-line);border-radius:var(--r-pill);padding:8px 8px 8px 18px;box-shadow:var(--shadow-panel);z-index:55}.peek-hint{font-size:13px;color:var(--text-dim)}.result-inline{display:flex;align-items:center;gap:16px;flex-wrap:wrap;justify-content:center;margin-top:4px;padding:12px 18px;background:var(--ai-raised);border:1px solid var(--ai-line);border-radius:var(--r-panel);box-shadow:var(--shadow-panel)}.result-inline__left{display:flex;align-items:center;gap:12px}.result-inline .rv{font-family:var(--font-display);font-weight:900;font-size:26px}.result-inline .rv.win{color:var(--shu)}.result-inline .rv.lose{color:var(--shu-soft)}.result-inline .rv.draw{color:var(--kasumi)}.result-inline .wtile{display:flex;flex-direction:column;align-items:center;gap:2px}.result-inline .wtile span{font-size:10px;color:var(--text-dim)}.result-inline__info{display:flex;flex-direction:column;gap:3px;align-items:center;flex:1;min-width:140px}.result-inline__yaku{font-size:12.5px;color:var(--text-dim);text-align:center}.result-inline__money{font-family:var(--font-mono);font-weight:700;font-size:22px}.result-inline__money.plus{color:var(--koke)}.result-inline__money.minus{color:var(--shu-soft)}.result-inline__btns{display:flex;gap:10px}.result-inline--full{flex-direction:column;align-items:stretch;gap:12px;max-width:720px;width:100%;margin:4px auto 0}.result-head{display:flex;align-items:center;justify-content:center;gap:18px;flex-wrap:wrap}.result-expl{font-size:14px;line-height:1.55;text-align:center;color:var(--text);background:#0000002e;border-radius:10px;padding:10px 14px}.result-yaku{display:flex;flex-wrap:wrap;gap:6px;justify-content:center}.yaku-chip{font-size:12px;background:var(--ai);border:1px solid var(--ai-line);border-radius:var(--r-pill);padding:4px 11px;color:var(--text)}.yaku-chip.total{background:transparent;border-color:var(--kin);color:var(--kin);font-family:var(--font-mono);font-weight:700}.ranking{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.rank-item{display:flex;flex-direction:column;align-items:center;gap:2px;padding:8px 4px;border-radius:10px;background:var(--ai);border:1px solid var(--ai-line)}.rank-item.me{border-color:var(--kin);background:#d2a94e1a}.rank-item.last{border-color:var(--shu)}.rank-no{font-family:var(--font-display);font-weight:900;font-size:18px;color:var(--kin)}.rank-item.last .rank-no{color:var(--shu-soft)}.rank-name{font-size:12px;color:var(--text-dim)}.rank-pts{font-family:var(--font-mono);font-weight:700;font-size:13px}.last-badge{font-size:10px;background:var(--shu);color:#fff;border-radius:999px;padding:0 7px;margin-top:2px}.result-inline--full .result-inline__btns{justify-content:center}.center-info{grid-column:2;grid-row:2;text-align:center;display:flex;flex-direction:column;align-items:center;gap:6px}.center-info .wall-count{font-family:var(--font-mono);font-size:13px;color:var(--text-dim)}.center-info .round{font-family:var(--font-display);font-weight:700;font-size:18px;color:var(--kin)}.dora-mini{display:flex;gap:4px;align-items:center}.dora-mini .label{font-size:11px;color:var(--text-dim)}.river{display:flex;flex-wrap:wrap;gap:2px;max-width:220px;justify-content:center}.hand-zone{display:flex;flex-direction:column;gap:10px}.my-hand{display:flex;gap:24px 2px;justify-content:center;flex-wrap:wrap;padding:6px 6px 26px}.my-hand .drawn{margin-left:14px}.hand-tile{cursor:grab;touch-action:none}.hand-tile--drag{cursor:grabbing;transition:none;box-shadow:inset 0 2px #ffffffd9,1px 1px 0 var(--wall),2px 2px 0 var(--wall),3px 3px 0 var(--wall),4px 4px 0 var(--wall),5px 5px 0 var(--wall),6px 6px 0 var(--wall),14px 20px 26px #00000080}.tile--grp .grp-underline{position:absolute;left:-2px;right:-2px;bottom:-7px;height:3px;border-radius:2px;background:var(--grp);pointer-events:none}.tile--grp .grp-label{position:absolute;left:50%;bottom:-22px;transform:translate(-50%);font-size:11px;font-weight:700;line-height:1;color:var(--grp);-webkit-text-stroke:0;white-space:nowrap;pointer-events:auto;cursor:help;padding:2px 6px}.tile--grp .grp-tip{position:absolute;left:50%;bottom:calc(100% + 6px);transform:translate(-50%);display:none;width:max-content;max-width:220px;padding:7px 10px;border-radius:8px;background:#141821f7;color:#f3f4f6;-webkit-text-stroke:0;font-size:12px;font-weight:600;line-height:1.35;white-space:normal;text-align:center;box-shadow:0 6px 18px #00000073;z-index:50;pointer-events:none}.tile--grp .grp-tip:after{content:"";position:absolute;top:100%;left:50%;transform:translate(-50%);border:5px solid transparent;border-top-color:#141821f7}.tile--grp:hover .grp-tip,.tile--grp .grp-label.open~.grp-tip{display:block}.tile--recommend{outline:2px solid var(--shu);outline-offset:1px}.tile--recommend.suit-haku .tile__honor{color:var(--shu);-webkit-text-stroke:0}.rec-badge{position:absolute;top:-15px;left:50%;transform:translate(-50%);padding:2px 8px;border-radius:7px;background:var(--shu);color:#fff;-webkit-text-stroke:0;font-size:11px;font-weight:800;line-height:1.4;letter-spacing:.5px;white-space:nowrap;box-shadow:0 2px 6px #00000073;pointer-events:none;z-index:6}.controls{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;min-height:48px}.hint-line{text-align:center;font-size:13px;color:var(--text-dim);min-height:18px}.hint-line strong{color:var(--shu-soft)}.tutor{background:var(--ai);border:1px solid var(--ai-line);border-left:3px solid var(--kin);border-radius:12px;padding:12px 16px;font-size:13.5px;line-height:1.5}.tutor__title{font-weight:700;color:var(--kin);margin-bottom:4px;display:flex;align-items:center;gap:6px}.tutor__title:before{content:"師";font-family:var(--font-display);background:var(--kin);color:#2a2208;width:20px;height:20px;border-radius:6px;display:inline-flex;align-items:center;justify-content:center;font-size:13px}.tutor .accept{color:var(--koke);font-weight:600}.overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#0a0c12bd;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;padding:20px;z-index:50;animation:fade .25s ease}@keyframes fade{0%{opacity:0}}.result-card{background:var(--ai);border:1px solid var(--ai-line);border-radius:20px;box-shadow:var(--shadow-panel);padding:28px;max-width:440px;width:100%;text-align:center}.result-card__verdict{font-family:var(--font-display);font-weight:900;font-size:48px;letter-spacing:-.02em}.result-card__verdict.win{color:var(--shu)}.result-card__verdict.draw{color:var(--kasumi)}.yaku-list{list-style:none;margin:16px 0;border-top:1px solid var(--ai-line)}.yaku-list li{display:flex;justify-content:space-between;padding:7px 4px;border-bottom:1px solid var(--ai-line);font-size:14px}.yaku-list li .han{font-family:var(--font-mono);color:var(--kin)}.result-total{font-family:var(--font-mono);font-weight:700;font-size:28px;margin:6px 0 18px}.result-total.plus{color:var(--koke)}.result-total.minus{color:var(--shu-soft)}.riichi-flash{position:fixed;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;pointer-events:none;z-index:60}.riichi-flash span{font-family:var(--font-display);font-weight:900;font-size:clamp(60px,18vw,160px);color:var(--shu);text-shadow:0 0 40px rgba(224,74,47,.7);animation:riichi-pop 1s ease forwards}@keyframes riichi-pop{0%{transform:scale(.4) rotate(-8deg);opacity:0}30%{transform:scale(1.1) rotate(-4deg);opacity:1}70%{opacity:1}to{transform:scale(1) rotate(-4deg);opacity:0}}.steps{display:grid;gap:10px;margin:16px 0}.step{display:flex;gap:14px;align-items:flex-start;padding:14px 16px;border-radius:12px;background:var(--ai);border:1px solid var(--ai-line)}.step__no{font-family:var(--font-display);font-weight:900;font-size:20px;color:var(--kin);min-width:26px}.step__body h4{font-size:15px}.step__body p{font-size:13px;color:var(--text-dim);margin-top:2px}.progress-bar{height:8px;border-radius:999px;background:var(--ai-raised);overflow:hidden}.progress-bar>i{display:block;height:100%;background:var(--kin);transition:width .3s ease}.section-title{font-family:var(--font-display);font-weight:700;font-size:22px;margin:24px 0 12px}.lesson__head{display:flex;align-items:center;gap:14px;margin-bottom:8px}.lesson__prog{font-family:var(--font-display);font-weight:700;font-size:18px;color:var(--kin)}.lesson__stage{flex:1;display:flex;flex-direction:column;align-items:center;gap:20px;padding-top:18px;text-align:center}.lesson__show{display:flex;flex-wrap:wrap;gap:3px;justify-content:center;padding:14px;background:radial-gradient(120% 120% at 50% 0%,#20405a,#16293d 75%);border:1px solid var(--ai-line);border-radius:16px;max-width:520px}.lesson__tutor{max-width:560px;font-size:15px;line-height:1.6;text-align:left}.lesson__pool{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;padding:8px}.lesson__counter{font-family:var(--font-mono);color:var(--text-dim);font-size:14px}.lesson__note{max-width:520px;background:#5e9a6b1f;border:1px solid var(--koke);border-radius:12px;padding:12px 16px;color:#bfe0c6;font-size:14px;line-height:1.5}@media (max-width: 900px){.screen{padding:16px 14px 32px}.tile[data-size=lg]{--w: 44px;--h: 62px;--depth: 6px}}@media (max-width: 560px){.btn{white-space:nowrap}.topbar{padding:10px 12px;gap:8px}.wordmark{font-size:20px}.topbar .btn{padding:8px 11px;font-size:13px}.wallet-chip{padding:6px 11px;font-size:12px}.sound-toggle{padding:7px 9px;font-size:15px}.screen{padding:12px 10px 28px}.tile{--w: 30px;--h: 42px}.tile[data-size=sm]{--w: 20px;--h: 28px;--depth: 2px}.tile[data-size=lg]{--w: 36px;--h: 52px;--depth: 5px}.board__center{min-height:168px;padding:8px;gap:4px;border-radius:16px}.seat--top .tile-row:not(.revealed),.seat--left .tile-row:not(.revealed),.seat--right .tile-row:not(.revealed){display:none}.seat .tile-row.revealed{max-width:116px}.seat__name{font-size:11px}.seat__pts{font-size:12px}.center-info .round{font-size:16px}.river{max-width:108px}.my-hand{column-gap:1px;row-gap:24px;padding:4px 2px 24px}.hand-zone{gap:8px}.tutor{font-size:12.5px;padding:10px 12px}.result-inline--full{padding:12px;gap:10px}.result-inline .rv{font-size:22px}.result-expl{font-size:12.5px}.ranking{gap:5px}.rank-no{font-size:15px}.rank-pts{font-size:12px}.hero__brand{font-size:clamp(52px,22vw,96px)}.tables{grid-template-columns:1fr 1fr}}