.tile{--w: clamp(40px, min(4.4vw, 6.2vh), 76px);--h: calc(var(--w) * 1.34);position:relative;width:var(--w);height:var(--h);border:none;border-radius:8px;background:linear-gradient(160deg,#fffdf6,#f3ecda 70%,#e7ddc4);box-shadow:inset 0 -3px #8c7d5f59,inset 0 1px #ffffffe6,0 2px 4px #3a302a47;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:2px;color:var(--ink);font-weight:800;cursor:default;flex:0 0 auto;transition:transform .1s ease,box-shadow .1s ease}.tile-sm{--w: clamp(22px, min(2.5vw, 3.4vh), 46px);--h: calc(var(--w) * 1.34);border-radius:6px}.tile.tile--art{background:none;box-shadow:none;padding:0;overflow:visible}.tile-art{width:100%;height:100%;object-fit:cover;display:block;pointer-events:none;-webkit-user-select:none;user-select:none}.tile.tile--art.selected{outline:none;filter:drop-shadow(0 6px 10px rgba(181,80,60,.55))}.tile.clickable{cursor:pointer}.tile.clickable:hover{transform:translateY(-4px);box-shadow:0 8px 14px #3a302a57}.tile.selected{transform:translateY(-10px);box-shadow:0 10px 18px #b5503c73;outline:2px solid var(--terracotta)}.tile.dimmed{opacity:.45}.tile:disabled{cursor:default}.tile-top{font-size:11px;line-height:1;font-weight:800;opacity:.85}.tile-sm .tile-top{font-size:8px}.tile-glyph{font-size:22px;line-height:1.05}.tile-sm .tile-glyph{font-size:15px}.tile-glyph-sm{font-size:11px;letter-spacing:-1px;max-width:var(--w);overflow:hidden;word-break:break-all;text-align:center}.tile-sm .tile-glyph-sm{font-size:7px}.tile-bam{display:flex;align-items:center;justify-content:center;line-height:0}.bam-svg{display:block;height:38px;width:auto;max-width:38px}.bam-svg.bam-bird{height:32px}.tile-sm .bam-svg{height:26px;max-width:26px}.tile-sm .bam-svg.bam-bird{height:22px}.t-dots{color:var(--slate)}.t-craks{color:var(--terracotta)}.t-bams{color:var(--olive-deep)}.t-wind{color:var(--ink)}.t-soap{color:var(--slate-deep)}.t-flower{color:var(--mustard-deep)}.t-joker{color:var(--rust)}.t-joker .tile-top{letter-spacing:-.5px}.tile-back{background:linear-gradient(160deg,#2f6f6c,#245957);box-shadow:inset 0 -3px #00000040,inset 0 1px #ffffff26,0 2px 4px #3a302a47}.tile-back:after{content:"";position:absolute;top:6px;right:6px;bottom:6px;left:6px;border-radius:5px;border:1.5px solid rgba(255,255,255,.22)}.table{display:grid;grid-template-columns:1fr clamp(280px,23vw,360px);gap:clamp(10px,1.4vw,18px);align-items:start}@media(max-width:820px){.table{grid-template-columns:1fr}}.felt{background:radial-gradient(120% 120% at 50% 30%,#2f6f6c,#245957 60%,#1d4a48);border-radius:18px;padding:clamp(12px,1.5vw,22px);box-shadow:inset 0 0 60px #0000004d;color:var(--cream);min-height:clamp(400px,58vh,720px);display:flex;flex-direction:column;gap:clamp(8px,1.2vh,14px)}.seat{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.seat.opponent{opacity:.96}.seat-info{min-width:92px;display:flex;flex-direction:column;gap:2px}.seat-name{font-weight:800;font-size:14px}.seat-sub{font-size:11px;color:#ffffffb3}.seat.active .seat-name{color:var(--mustard)}.seat-tiles{display:flex;gap:3px;flex-wrap:wrap}.exposure-set{display:inline-flex;gap:2px;padding:3px;background:#0000002e;border-radius:8px;margin-right:4px}.center-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 4px;border-top:1px solid rgba(255,255,255,.12);border-bottom:1px solid rgba(255,255,255,.12)}.wall-info{font-size:13px;color:#ffffffd9}.last-discard{display:flex;align-items:center;gap:8px}.last-discard .lbl{font-size:12px;color:#ffffffb3}.my-rack-wrap{margin-top:auto}.my-rack{display:flex;gap:4px;flex-wrap:wrap;background:#00000029;padding:10px;border-radius:12px}.rack-label{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}.rack-label .who{font-weight:800}.rack-label .hint{font-size:12px;color:#ffffffbf}.controls{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}.controls .btn{box-shadow:0 2px 6px #00000040}.btn.draw{background:var(--mustard);color:var(--ink)}.btn.mahjong{background:var(--olive);color:var(--cream)}.btn.call{background:var(--slate);color:var(--cream)}.side-panel{background:var(--surface);border:1px solid var(--surface-edge);border-radius:14px;padding:14px;box-shadow:0 1px 3px var(--tile-shadow)}.side-panel h3{font-size:15px;margin-bottom:4px}.side-panel .sub{font-size:12px;color:var(--ink-dim);margin:0 0 10px}.discard-grid{display:flex;flex-direction:column;gap:10px}.discard-suit-row{display:flex;align-items:center;gap:6px;flex-wrap:wrap}.discard-suit-label{font-size:11px;font-weight:800;color:var(--ink-dim);width:46px;text-transform:uppercase}.discard-chip{display:inline-flex;align-items:center;gap:3px;background:var(--cream-2);border:1px solid var(--surface-edge);border-radius:7px;padding:3px 7px;font-size:13px;font-weight:800}.discard-chip .ct{font-size:10px;color:var(--ink-dim)}.discard-empty{color:var(--ink-dim);font-size:13px}.game-log{margin-top:12px;font-size:12px;color:var(--ink-2);max-height:92px;overflow-y:auto;background:var(--cream-2);border-radius:10px;padding:8px 10px}.game-log div{padding:1px 0}.banner{text-align:center;padding:18px;border-radius:14px;margin-bottom:14px;font-weight:800}.banner.win{background:var(--olive);color:var(--cream)}.banner.lose{background:var(--terracotta);color:var(--cream)}.banner.wall{background:var(--cream-3);color:var(--ink)}.banner .pattern{font-weight:800;font-size:18px;margin-top:4px;letter-spacing:.04em}.setup-bar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:14px}.setup-bar .diff{display:flex;gap:4px}.setup-bar .diff button{border:1px solid var(--surface-edge);background:var(--surface);color:var(--ink-2);border-radius:999px;padding:6px 14px;font-weight:700;font-size:13px}.setup-bar .diff button.active{background:var(--terracotta);color:var(--cream);border-color:var(--terracotta)}.hint-panel{margin-top:16px}.hint-toggles{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px}.hint-toggle{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--surface-edge);background:var(--cream-2);color:var(--ink-2);border-radius:999px;padding:6px 11px;font-size:12.5px;font-weight:700}.hint-toggle .dot{width:9px;height:9px;border-radius:50%;background:var(--ink-dim);opacity:.4}.hint-toggle.on{background:var(--olive);color:var(--cream);border-color:var(--olive)}.hint-toggle.on .dot{background:var(--cream);opacity:1}.hint-empty{color:var(--ink-dim);font-size:13px;margin:6px 0 0}.hint-body{display:flex;flex-direction:column;gap:10px;margin-top:4px}.pivot-note{background:var(--mustard);color:var(--ink);border-radius:10px;padding:8px 10px;font-size:13px}.discard-tip{font-size:12.5px;color:var(--ink-2)}.charleston-tip-note{background:var(--mustard);color:var(--ink);border-radius:10px;padding:8px 10px;font-size:12.5px;line-height:1.45;margin-top:4px}.closest-list{display:flex;flex-direction:column;gap:8px}.closest-row{border:1px solid var(--surface-edge);border-radius:10px;padding:8px 10px;background:var(--cream-2)}.closest-top{display:flex;justify-content:space-between;align-items:center;gap:8px}.closest-top .hand-pattern{font-size:14px}.closest-top .away{font-size:11px;font-weight:800;color:var(--rust);white-space:nowrap}.closest-sub{display:flex;justify-content:space-between;gap:8px;margin-top:4px}.closest-sub .sec{font-size:11px;color:var(--ink-dim)}.odds{font-size:11px;font-weight:800}.odds.good{color:var(--olive-deep)}.odds.fair{color:var(--mustard-deep)}.odds.poor{color:var(--terracotta)}.needs{font-size:11px;color:var(--ink-dim);margin-top:4px}.suggested-wrap{display:inline-flex}.suggested-wrap>.tile{outline:2px dashed var(--olive-deep);outline-offset:2px}.charleston-bar{background:var(--mustard);color:var(--ink);border-radius:12px;padding:10px 14px;display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px;font-weight:700}:root{--cream: #efe7d6;--cream-2: #e8dcc4;--cream-3: #e0d2b6;--surface: #fbf7ec;--surface-edge: #d9ccae;--terracotta: #b5503c;--rust: #9c4630;--mustard: #d49b3e;--mustard-deep: #b9842c;--teal: #2f6f6c;--teal-deep: #245957;--olive: #7f8a4c;--olive-deep: #65713a;--slate: #4f6f8f;--slate-deep: #3e5a76;--role-1: var(--slate);--role-2: var(--terracotta);--role-3: var(--olive-deep);--ink: #3a302a;--ink-2: #5a4d42;--ink-dim: #8c7d6b;--tile-shadow: rgba(58, 48, 42, .18);--radius: 12px;--tile-w: 44px;--tile-h: 60px;color-scheme:light}*{box-sizing:border-box}html,body,#root{margin:0;height:100%}body{font-family:Avenir Next,Segoe UI,system-ui,-apple-system,sans-serif;color:var(--ink);background:radial-gradient(130% 130% at 50% 0%,var(--cream) 0%,var(--cream-2) 55%,var(--cream-3) 100%);background-attachment:fixed;-webkit-font-smoothing:antialiased}button{font-family:inherit;cursor:pointer}h1,h2,h3{margin:0;font-weight:700;color:var(--ink)}.app{min-height:100%;display:flex;flex-direction:column}.topbar{display:flex;align-items:center;gap:16px;padding:14px 20px;border-bottom:1px solid var(--surface-edge);background:#fbf7ec99;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}.brand{display:flex;align-items:baseline}.brand .mark{font-size:23px;font-weight:800;letter-spacing:-.01em}.brand .name{color:var(--terracotta)}.brand .dot{color:var(--mustard);font-weight:800}.brand .tld{color:var(--ink-dim);font-weight:700}.nav{display:flex;gap:4px;margin-left:auto}.nav button{background:transparent;border:1px solid transparent;color:var(--ink-2);padding:8px 14px;border-radius:999px;font-size:14px;font-weight:700}.nav button.active{color:var(--cream);background:var(--terracotta)}.nav button:hover:not(.active){background:#b5503c1a}.content{flex:1;padding:20px;max-width:1100px;width:100%;margin:0 auto}.content--play{max-width:min(1800px,100%);padding-left:clamp(12px,2vw,40px);padding-right:clamp(12px,2vw,40px)}.browser-head{margin-bottom:16px}.browser-head h2{font-size:24px}.browser-head p{color:var(--ink-2);margin:6px 0 0;font-size:14px}.browser-controls{display:flex;gap:12px;flex-wrap:wrap;margin:16px 0}.search{flex:1;min-width:200px;background:var(--surface);border:1px solid var(--surface-edge);border-radius:999px;padding:10px 16px;color:var(--ink);font-size:14px}.search::placeholder{color:var(--ink-dim)}.search:focus{outline:2px solid var(--teal);outline-offset:1px}.toggle-verify{display:flex;align-items:center;gap:8px;color:var(--ink-2);font-size:13px;font-weight:600;-webkit-user-select:none;user-select:none}.toggle-verify input{accent-color:var(--terracotta)}.section-block{margin-bottom:28px}.section-title{font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--rust);font-weight:800;border-bottom:2px solid rgba(181,80,60,.22);padding-bottom:6px;margin-bottom:12px}.hand-row{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:center;padding:12px 14px;border-radius:var(--radius);background:var(--surface);border:1px solid var(--surface-edge);box-shadow:0 1px 2px var(--tile-shadow);margin-bottom:8px}.hand-row.flagged{border-color:var(--mustard);box-shadow:0 1px 3px #d49b3e4d}.hand-pattern{font-variant-numeric:tabular-nums;font-weight:800;font-size:17px;letter-spacing:.04em;display:flex;flex-wrap:wrap;gap:2px 8px}.hand-note{color:var(--ink-dim);font-size:12.5px;margin-top:4px}.hand-meta{display:flex;align-items:center;gap:8px}.badge{font-size:12px;font-weight:700;padding:4px 9px;border-radius:999px}.badge.value{background:var(--teal);color:var(--cream)}.badge.concealed{background:var(--cream-3);color:var(--ink-2)}.badge.verify{background:var(--mustard);color:var(--ink);cursor:help}.g-green{color:#1f7a3d}.g-red{color:#c4271d}.g-black{color:#1a1a1a}.play-placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;text-align:center;padding:60px 20px;color:var(--ink-2)}.play-placeholder h2{color:var(--ink);font-size:26px}.card-drawer-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background:#3a302a66;z-index:70;opacity:0;pointer-events:none;transition:opacity .2s ease}.card-drawer-backdrop.open{opacity:1;pointer-events:auto}.card-drawer{position:fixed;top:0;right:0;height:100dvh;width:min(680px,94vw);background:var(--cream);border-left:1px solid var(--surface-edge);box-shadow:-14px 0 44px #3a302a47;z-index:71;transform:translate(100%);transition:transform .26s ease;display:flex;flex-direction:column}.card-drawer.open{transform:translate(0)}.card-drawer-head{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;border-bottom:1px solid var(--surface-edge);background:#fbf7ecd9;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}.card-drawer-title{font-weight:800;font-size:18px;color:var(--ink)}.card-drawer-close{border:1px solid var(--surface-edge);background:var(--surface);color:var(--ink-2);border-radius:999px;width:34px;height:34px;font-size:15px;font-weight:700;line-height:1}.card-drawer-close:hover{background:var(--cream-3)}.card-drawer-body{flex:1;overflow-y:auto;padding:16px 18px 28px}.card-drawer-body .browser-head h2{display:none}.feedback-fab{position:fixed;right:20px;bottom:20px;z-index:50;display:flex;align-items:center;gap:8px;background:var(--terracotta);color:var(--cream);border:none;border-radius:999px;padding:12px 18px;font-size:14px;font-weight:700;box-shadow:0 8px 22px #3a302a47;transition:transform .12s ease,box-shadow .12s ease,background .12s ease}.feedback-fab:hover{transform:translateY(-2px);background:var(--rust);box-shadow:0 12px 26px #3a302a57}.modal-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background:#3a302a66;display:flex;align-items:center;justify-content:center;z-index:60;padding:20px}.modal{width:100%;max-width:460px;background:var(--surface);border:1px solid var(--surface-edge);border-radius:16px;padding:22px;box-shadow:0 24px 60px #3a302a4d}.modal h3{font-size:19px;margin-bottom:4px}.modal p.sub{color:var(--ink-dim);font-size:13px;margin:0 0 16px}.modal label{display:block;font-size:13px;font-weight:700;margin:12px 0 6px;color:var(--ink-2)}.modal select,.modal textarea{width:100%;background:#fff;border:1px solid var(--surface-edge);border-radius:10px;padding:10px 12px;color:var(--ink);font-size:14px;font-family:inherit}.modal textarea{min-height:110px;resize:vertical}.modal-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:18px}.btn{border:none;border-radius:999px;padding:10px 18px;font-weight:700;font-size:14px}.btn.primary{background:var(--terracotta);color:var(--cream)}.btn.primary:hover:not(:disabled){background:var(--rust)}.btn.ghost{background:transparent;color:var(--ink-2);border:1px solid var(--surface-edge)}.btn:disabled{opacity:.5;cursor:not-allowed}.modal .sent{text-align:center;padding:24px 0;color:var(--teal);font-weight:700}@media(max-width:600px){.content{padding:14px}.hand-pattern{font-size:15px}.nav button{padding:7px 11px;font-size:13px}.brand .tld{display:none}}