html,body,#root{min-height:100vh;margin:0;padding:0}:root{--felt:#1f6b4a;--felt-dark:#17583d;--ink:#1a1a2e;--gold:#e8c86a;--tile-face:#fbfaf5;--tile-edge:#d8d4c4;--bam:#1f8a3b;--crak:#c0392b;--dot:#2565c7;--shadow:#00000059}*{box-sizing:border-box}body{color:#f4f4f4;background:radial-gradient(circle at 50% 20%, var(--felt), var(--felt-dark) 75%);min-height:100vh;margin:0;font-family:Segoe UI,system-ui,-apple-system,sans-serif}.app{max-width:1100px;margin:0 auto;padding:12px 16px 28px}.topbar{background:#00000040;border:1px solid #ffffff14;border-radius:12px;justify-content:space-between;align-items:center;gap:12px;padding:10px 14px;display:flex}.brand{letter-spacing:.3px;color:inherit;white-space:nowrap;font-size:20px;font-weight:700;text-decoration:none}.brand:hover,.brand:focus-visible{color:var(--gold)}.status{flex-wrap:wrap;flex:1;justify-content:center;gap:8px;display:flex}.pill{background:#0000004d;border:1px solid #ffffff1f;border-radius:999px;padding:4px 10px;font-size:13px}.pill-turn{background:var(--gold);color:var(--ink);font-weight:700}.btn{color:#fff;cursor:pointer;background:#ffffff24;border:1px solid #fff3;border-radius:10px;padding:8px 14px;font-size:14px;font-weight:600;transition:transform 80ms,background .15s}.btn:hover{background:#ffffff3d}.btn:active{transform:translateY(1px)}.btn-primary{background:var(--gold);color:var(--ink);border-color:#0000}.btn-primary:hover{background:#f0d585}.btn-ghost{background:0 0;border-color:#ffffff4d}.table{flex-direction:column;gap:16px;margin-top:14px;display:flex}.opponents{grid-template-columns:repeat(3,1fr);gap:12px;display:grid}.opponent{background:#00000038;border:1px solid #ffffff14;border-radius:12px;padding:10px}.opponent-active{border-color:var(--gold);animation:1.8s ease-in-out infinite turn-glow}.opponent-head{justify-content:space-between;align-items:center;margin-bottom:8px;display:flex}.opponent-name{font-weight:700}.opponent-wind{background:#ffffff24;border-radius:999px;padding:2px 8px;font-size:12px}.opponent-tiles{flex-wrap:wrap;gap:2px;display:flex}.opponent-count{opacity:.75;margin-top:6px;font-size:12px}.center{justify-content:center;display:flex}.discard-area{text-align:center;background:#0003;border-radius:14px;min-width:220px;padding:14px 26px}.discard-label{opacity:.8;margin-bottom:8px;font-size:13px}.last-discard{flex-direction:column;align-items:center;gap:6px;display:flex}.last-discard-by{opacity:.8;font-size:12px}.discard-empty{opacity:.6;padding:16px 0;font-style:italic}.call-prompt{border-top:1px dashed #ffffff40;margin-top:14px;padding-top:14px}.call-prompt-title{color:var(--gold);margin-bottom:8px;font-weight:700}.call-prompt-actions{flex-wrap:wrap;justify-content:center;gap:8px;display:flex}.exposures{flex-wrap:wrap;gap:10px;margin-bottom:8px;display:flex}.meld{background:#0000002e;border-radius:6px;gap:2px;padding:4px;display:flex}.you{background:#00000038;border:1px solid #ffffff14;border-radius:12px;padding:12px}.you-active{border-color:var(--gold);animation:1.8s ease-in-out infinite turn-glow}@keyframes turn-glow{0%,to{box-shadow:0 0 0 2px #e8c86a59,0 0 10px 1px #e8c86a26}50%{box-shadow:0 0 0 3px #e8c86abf,0 0 18px 4px #e8c86a73}}.you-header{flex-wrap:wrap;align-items:center;gap:12px;margin-bottom:10px;display:flex}.you-name{font-weight:700}.you-hint{opacity:.85;flex:1;font-size:13px}.rack{flex-wrap:wrap;gap:6px;display:flex}.tile{background:linear-gradient(180deg, #fff, var(--tile-face));border:1px solid var(--tile-edge);width:46px;height:62px;box-shadow:0 2px 4px var(--shadow), inset 0 -3px 0 #00000014;color:var(--ink);cursor:default;-webkit-user-select:none;user-select:none;border-radius:8px;flex-direction:column;justify-content:center;align-items:center;padding:0;font-family:inherit;transition:transform .1s,box-shadow .1s;display:flex}.tile-sm{border-radius:5px;width:32px;height:44px}.tile-sm .tile-main{font-size:15px}.tile-sm .tile-sub{display:none}.tile-clickable{cursor:pointer}.tile-clickable:hover{box-shadow:0 8px 14px var(--shadow);transform:translateY(-6px)}.tile-selected{box-shadow:0 8px 14px var(--shadow);outline:2px solid var(--gold);transform:translateY(-8px)}.tile-dimmed{filter:saturate(.85)brightness(.98)}.tile-main{font-size:24px;font-weight:800;line-height:1}.tile-sub{opacity:.7;letter-spacing:.2px;margin-top:3px;font-size:9px}.tile-suit-B .tile-main{color:var(--bam)}.tile-suit-C .tile-main{color:var(--crak)}.tile-suit-D .tile-main{color:var(--dot)}.tile-wind .tile-main{color:#333}.tile-dragon-r .tile-main{color:var(--crak)}.tile-dragon-g .tile-main{color:var(--bam)}.tile-dragon-w .tile-main{color:var(--dot)}.tile-flower .tile-main{color:#d81b8c}.tile-joker{background:linear-gradient(#fff5d6,#ffe9a8)}.tile-joker .tile-main{color:#b8860b}.tile-back{background:repeating-linear-gradient(45deg,#2a5c8a,#2a5c8a 4px,#24507a 4px 8px);border-color:#1c3d5c}.log{background:#0003;border-radius:10px;margin-top:16px;padding:10px 14px;font-size:13px}.log-line{opacity:.6;padding:2px 0}.log-latest{opacity:1;font-weight:600}.overlay{z-index:10;background:#0009;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.overlay-card{color:var(--ink);text-align:center;background:#fff;border-radius:16px;max-width:460px;padding:32px 40px;box-shadow:0 20px 60px #00000080}.overlay-card h1{margin:0 0 12px}.overlay-hand{margin:0 0 20px;font-size:15px;line-height:1.5}.overlay-panel{background:var(--felt-dark);color:#f4f4f4;text-align:left;border:1px solid #ffffff1f;border-radius:16px;width:90vw;max-width:640px;max-height:82vh;padding:20px 24px;overflow-y:auto;box-shadow:0 20px 60px #00000080}.overlay-panel .card-panel{max-height:none}.closeness-helper{background:#00000038;border:1px solid #ffffff14;border-radius:12px;padding:12px 14px}.closeness-title{color:var(--gold);margin-bottom:8px;font-size:14px;font-weight:700}.closeness-empty{opacity:.7;font-size:13px;font-style:italic}.closeness-list{flex-direction:column;gap:10px;display:flex}.closeness-row{background:#0000002e;border:1px solid #ffffff14;border-radius:10px;padding:8px 10px}.closeness-row-head{flex-wrap:wrap;align-items:baseline;gap:8px;display:flex}.closeness-section{font-size:13px;font-weight:700}.closeness-points{opacity:.75;font-size:12px}.closeness-distance{background:#ffffff1f;border-radius:999px;margin-left:auto;padding:2px 8px;font-size:12px}.closeness-distance-ready{background:var(--gold);color:var(--ink);font-weight:700}.closeness-desc{opacity:.85;margin-top:4px;font-size:12px}.closeness-need{flex-wrap:wrap;gap:8px;margin-top:8px;display:flex}.closeness-need-item{align-items:center;gap:3px;display:flex}.closeness-need-tile-wrap{position:relative}.closeness-joker-badge{background:var(--gold);width:15px;height:15px;color:var(--ink);text-align:center;box-shadow:0 1px 2px var(--shadow);border-radius:50%;font-size:9px;font-weight:800;line-height:15px;position:absolute;bottom:-4px;right:-4px}.closeness-need-count{opacity:.8;font-size:12px}.card-panel{background:#00000038;border:1px solid #ffffff14;border-radius:12px;max-height:480px;padding:12px 14px;overflow-y:auto}.card-panel-title{color:var(--gold);margin-bottom:8px;font-size:14px;font-weight:700}.card-panel-sections{flex-direction:column;gap:6px;display:flex}.card-section{background:#00000026;border:1px solid #ffffff14;border-radius:8px;padding:4px 8px}.card-section-summary{cursor:pointer;align-items:center;gap:8px;padding:6px 2px;font-size:13px;font-weight:700;list-style:none;display:flex}.card-section-summary::-webkit-details-marker{display:none}.card-section-badge{text-transform:uppercase;letter-spacing:.4px;background:var(--gold);color:var(--ink);border-radius:999px;padding:1px 6px;font-size:10px;font-weight:700}.card-hand-list{flex-direction:column;gap:6px;margin:4px 0 6px;padding:0;list-style:none;display:flex}.card-hand{background:#ffffff0a;border-radius:8px;padding:6px 8px}.card-hand-close{background:#e8c86a24;border:1px solid #e8c86a66}.card-hand-head{align-items:center;gap:8px;font-size:12px;display:flex}.card-hand-points{opacity:.85;font-weight:700}.card-hand-badge{text-transform:uppercase;letter-spacing:.4px;background:var(--gold);color:var(--ink);border-radius:999px;padding:1px 6px;font-size:10px;font-weight:700}.card-hand-concealed{opacity:.7;font-size:10px;font-style:italic}.card-hand-desc{opacity:.85;margin-top:3px;font-size:12px}.win-screen{max-width:560px;position:relative;overflow:hidden}.win-reveal-label{text-transform:uppercase;letter-spacing:.4px;color:var(--felt-dark);opacity:.7;text-align:left;margin:4px 0 8px;font-size:13px;font-weight:700}.win-reveal-exposures{justify-content:flex-start}.win-reveal-rack{justify-content:center;margin-bottom:22px}.confetti{pointer-events:none;z-index:1;position:absolute;inset:0;overflow:hidden}.confetti-piece{opacity:.95;border-radius:2px;animation-name:confetti-fall;animation-timing-function:cubic-bezier(.4,.1,.6,1);animation-fill-mode:forwards;position:absolute;top:-14px}@keyframes confetti-fall{0%{opacity:1;transform:translate(0)rotate(0)}to{transform:translate(var(--drift), 480px) rotate(var(--rot));opacity:0}}@media (width<=720px){.opponents{grid-template-columns:1fr}}@media (width<=600px){.app{padding:8px 10px 20px}.topbar{flex-wrap:wrap;row-gap:8px}.brand{flex:100%;font-size:17px}.status{flex:100%;order:3;justify-content:flex-start}.tile{width:38px;height:52px}.tile-main{font-size:20px}}@media (width<=420px){.tile{width:32px;height:44px}.tile-main{font-size:17px}.tile-sub{font-size:8px}.overlay-card{padding:24px 18px}}.mahjong-card{background:#00000038;border:1px solid #ffffff14;border-radius:12px;padding:12px 14px}.mahjong-card-title{color:var(--gold);margin-bottom:8px;font-size:14px;font-weight:700}.mahjong-card-sections{columns:3 260px;column-gap:10px}.mahjong-card-section{break-inside:avoid;margin-bottom:8px}.mahjong-card-section-title{text-transform:uppercase;letter-spacing:.5px;color:var(--gold);opacity:.9;border-bottom:1px solid #e8c86a4d;margin-bottom:3px;padding:3px 2px;font-size:12px;font-weight:700}.mahjong-card-hand-list{flex-direction:column;gap:1px;margin:0;padding:0;list-style:none;display:flex}.mahjong-card-hand{border:1px solid #0000;border-radius:5px;padding:3px 5px;transition:background .15s,opacity .15s,filter .15s}.mahjong-card-hand-winnable{background:#e8c86a2e;border-color:#e8c86a8c}.mahjong-card-hand-top3{background:#b388ff2e;border-color:#b388ff99}.mahjong-card-hand-close{background:#6fd3ff1f;border-color:#6fd3ff73}.mahjong-card-hand-viable:hover,.mahjong-card-hand-close:hover,.mahjong-card-hand-top3:hover{background:#ffffff17}.mahjong-card-hand-dead{opacity:.35;filter:grayscale(.8)}.mahjong-card-hand-line{white-space:nowrap;align-items:baseline;gap:5px;font-family:Courier New,ui-monospace,monospace;font-size:12px;font-weight:700;display:flex}.mahjong-card-pattern{text-overflow:ellipsis;gap:5px;min-width:0;display:flex;overflow:hidden}.mahjong-card-ink-green{color:var(--bam)}.mahjong-card-ink-red{color:var(--crak)}.mahjong-card-ink-black{color:#d8d6ce}.mahjong-card-fill{border-bottom:1px dotted #ffffff4d;flex:1;align-self:center;min-width:6px;margin-bottom:2px}.mahjong-card-prefix{opacity:.6;font-size:10px}.mahjong-card-points{opacity:.9}.mahjong-card-meta{opacity:.7;white-space:normal;align-items:center;gap:6px;margin-top:1px;font-size:10px;font-style:italic;font-weight:400;display:flex}.mahjong-card-winnable-badge{text-transform:uppercase;letter-spacing:.4px;background:var(--gold);color:var(--ink);opacity:1;border-radius:999px;padding:1px 6px;font-size:10px;font-style:normal;font-weight:700}.mahjong-card-distance{opacity:1;background:#6fd3ff33;border-radius:999px;padding:1px 6px;font-size:10px;font-style:normal;font-weight:700}@media (width<=900px){.mahjong-card-sections{columns:2 220px}}@media (width<=600px){.mahjong-card-sections{columns:1}.mahjong-card-hand-line{font-size:11px}}.rack-toolbar{gap:8px;margin-bottom:8px;display:flex}.btn-sm{padding:4px 10px;font-size:12px}.rack-item{touch-action:none;cursor:grab;display:flex}.rack-item:active{cursor:grabbing}.discard-pile{flex-direction:column;align-items:center;gap:6px;display:flex}.discard-pile-scroll{flex-wrap:wrap;justify-content:center;gap:4px;max-height:220px;padding:4px;display:flex;overflow-y:auto}.discard-pile-item{display:flex}.discard-pile-item-latest .tile{outline:2px solid var(--gold);box-shadow:0 0 0 2px #e8c86a59, 0 8px 14px var(--shadow)}.tile-highlighted{box-shadow:0 0 0 3px #6fd3ff59, 0 8px 14px var(--shadow);outline:3px solid #6fd3ff;transform:translateY(-4px)}