:root{--felt:#0f3d2e;--felt-dark:#0a2b20;--felt-light:#165a43;--panel:#00000047;--line:#ffffff1f;--text:#eef4ef;--muted:#9fb8aa;--accent:#f5c542;--danger:#e2574c;--attack:#ff7a45;--good:#63d48a;--card:#fbfaf6;--card-red:#c62828;--card-black:#1d1d1f;--radius:10px;color:var(--text);background:var(--felt-dark);-webkit-font-smoothing:antialiased;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif}*{box-sizing:border-box}body{background:radial-gradient(ellipse at center, var(--felt-light) 0%, var(--felt) 45%, var(--felt-dark) 100%) fixed;min-height:100dvh;margin:0}h1,h2,h3{margin:0 0 12px}h2{font-size:1.15rem}h3{color:var(--muted);margin-top:16px;font-size:.95rem}.muted{color:var(--muted)}.small{font-size:.8rem}.error-text{color:var(--danger)}.btn{border:1px solid var(--line);color:var(--text);font:inherit;cursor:pointer;background:#ffffff14;border-radius:8px;justify-content:center;align-items:center;gap:6px;padding:9px 16px;font-weight:600;text-decoration:none;transition:background .15s,transform .1s;display:inline-flex}.btn:hover:not(:disabled){background:#ffffff29}.btn:active:not(:disabled){transform:translateY(1px)}.btn:disabled{opacity:.45;cursor:not-allowed}.btn.primary{background:var(--accent);border-color:var(--accent);color:#2a2000}.btn.primary:hover:not(:disabled){background:#ffd45c}.btn.danger{background:var(--danger);border-color:var(--danger)}.btn.attack{background:var(--attack);border-color:var(--attack);color:#2b0c00}.btn.ghost{background:0 0}.btn.small{padding:5px 10px;font-size:.85rem}.btn.big{padding:12px 22px;font-size:1.05rem}.btn.floating{z-index:20;position:fixed;bottom:16px;right:16px}.input{border:1px solid var(--line);color:var(--text);font:inherit;background:#0000004d;border-radius:8px;min-width:0;padding:8px 10px}.code-input{text-transform:uppercase;letter-spacing:.15em;width:100%;font-weight:700}.row{align-items:center;gap:10px;margin-top:12px;display:flex}.row.wrap{flex-wrap:wrap}.badge{vertical-align:middle;background:#ffffff24;border-radius:999px;margin-left:6px;padding:1px 7px;font-size:.7rem;font-weight:600;display:inline-block}.badge.cpu{background:#63b4ff40}.dot{border-radius:50%;flex:none;width:8px;height:8px;display:inline-block}.dot.on{background:var(--good)}.dot.off{background:var(--danger)}.table{border-collapse:collapse;width:100%;font-size:.9rem}.table th,.table td{text-align:left;border-bottom:1px solid var(--line);padding:6px 8px}.table th{color:var(--muted);font-weight:600}.table tr.me td{color:var(--accent)}.app{flex-direction:column;min-height:100dvh;display:flex}.topbar{border-bottom:1px solid var(--line);background:#0000004d;align-items:center;gap:12px;padding:8px 16px;display:flex}.brand{font-weight:800}.spacer{flex:1}.conn{color:var(--accent);font-size:.85rem}.user{font-weight:600}main{flex-direction:column;flex:1;display:flex}.page{grid-template-columns:repeat(auto-fit,minmax(min(340px,100%),1fr));align-items:start;gap:16px;width:100%;max-width:1100px;margin:0 auto;padding:16px;display:grid}.panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:18px}.login{place-items:center;min-height:100dvh;padding:16px;display:grid}.login-box{text-align:center;max-width:360px}.logo{font-size:4rem}.room-list,.seat-list{margin:0;padding:0;list-style:none}.room-list li,.seat-list li{border-bottom:1px solid var(--line);align-items:center;gap:10px;padding:8px 0;display:flex}.room-list li>span:nth-child(2),.seat-name{flex:1}.code{letter-spacing:.12em;color:var(--accent);font-weight:800}.room-head{justify-content:space-between;align-items:start;display:flex}.room-code{letter-spacing:.2em;color:var(--accent);-webkit-user-select:all;user-select:all;font-size:2.2rem;font-weight:800}.settings{border:0;gap:10px;margin:0;padding:0;display:grid}.settings label{justify-content:space-between;align-items:center;gap:12px;display:flex}.settings label .input{width:9rem}.settings label.check{justify-content:flex-start}.rules{color:var(--muted);margin-top:16px;font-size:.9rem}.rules summary{cursor:pointer;color:var(--text)}.rules li{margin:4px 0}.toast{background:var(--danger);color:#fff;z-index:50;border-radius:8px;padding:10px 18px;font-weight:600;position:fixed;bottom:24px;left:50%;transform:translate(-50%);box-shadow:0 6px 20px #0006}.card{--w:64px;--h:92px;width:var(--w);height:var(--h);border-radius:calc(var(--w) * .1);background:var(--card);color:var(--card-black);font:inherit;-webkit-user-select:none;user-select:none;border:1px solid #00000040;flex:none;padding:0;font-weight:700;transition:transform .12s,box-shadow .12s,opacity .12s;position:relative;box-shadow:0 2px 4px #00000059}.card-sm{--w:30px;--h:43px}.card-md{--w:48px;--h:69px}.card-red{color:var(--card-red)}.card-joker{color:#6a1b9a}.card .corner{font-size:calc(var(--w) * .24);text-align:center;line-height:.95;position:absolute;top:3px;left:4px}.card .center{font-size:calc(var(--w) * .48);padding-top:calc(var(--h) * .12);place-items:center;display:grid;position:absolute;inset:0}.card-sm .corner{display:none}.card-sm .center{line-height:1;font-size:calc(var(--w) * .42);flex-direction:column;justify-content:center;align-items:center;padding-top:0;display:flex}.card-sm .center small{font-size:.85em}.card-back{background:repeating-linear-gradient(45deg,#ffffff1f 0 4px,#0000 4px 8px),linear-gradient(135deg,#8e2430,#5c1520);border:2px solid #f4efe4}.card.clickable{cursor:pointer}.card.playable{box-shadow:0 0 0 2px var(--accent), 0 4px 10px #0006}.card.clickable:hover{transform:translateY(-4px)}.card.selected{box-shadow:0 0 0 3px var(--good), 0 8px 16px #00000080;transform:translateY(-14px)}.card.disabled{opacity:.55}.game{flex-direction:column;flex:1;gap:12px;width:100%;max-width:1300px;margin:0 auto;padding:12px 16px 16px;display:flex}.opponents{flex-wrap:wrap;justify-content:center;gap:10px;display:flex}.opponent{background:var(--panel);border-radius:var(--radius);border:2px solid #0000;flex-direction:column;align-items:center;gap:6px;min-width:130px;padding:8px 10px;display:flex}.opponent.active{border-color:var(--accent);box-shadow:0 0 16px #f5c54259}.opponent.in-attack{border-color:var(--attack)}.opponent.done{opacity:.6}.opp-head{align-items:center;gap:6px;max-width:180px;font-weight:700;display:flex}.opp-name{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.opp-hand{align-items:center;gap:6px;display:flex}.count{font-weight:700}.table-cards{justify-content:center;gap:6px;display:flex}.table-cards .slot{position:relative}.table-cards .slot>.card+.card{position:absolute;top:-6px;left:0}.table-cards.md .slot>.card+.card{top:-10px}.middle{flex:1;grid-template-columns:1fr minmax(200px,300px);align-items:center;gap:16px;min-height:160px;display:grid}.pile-area{flex-direction:column;align-items:center;gap:10px;display:flex}.pile{width:120px;height:100px;position:relative}.pile .card{position:absolute;top:0;left:0}.pile-empty{border:2px dashed var(--line);width:64px;height:92px;color:var(--muted);border-radius:6px;place-items:center;font-size:.85rem;display:grid}.pile-info{text-align:center}.rule-hint{font-weight:700}.rule-hint.attack{color:var(--attack)}.log{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);height:180px;padding:8px 10px;font-size:.82rem;overflow-y:auto}.log-entry{padding:2px 0}.log-entry.attack{color:var(--attack)}.log-entry.burn{color:var(--accent)}.log-entry.good{color:var(--good)}.log-entry.bad{color:#ff9a90}.status{text-align:center;background:var(--panel);border-radius:8px;padding:8px;font-size:1.05rem;font-weight:700}.status.mine{color:var(--accent);background:#f5c54233}.status.attack{color:var(--attack);background:#ff7a4533}.me{flex-direction:column;align-items:center;gap:14px;display:flex}.targets{flex-wrap:wrap;justify-content:center;gap:8px;display:flex}.hand{justify-content:safe center;gap:6px;max-width:100%;min-height:118px;padding:16px 8px 6px;display:flex;overflow-x:auto}.actions{flex-wrap:wrap;justify-content:center;gap:10px;min-height:48px;display:flex}.overlay{z-index:30;background:#0009;place-items:center;padding:16px;display:grid;position:fixed;inset:0}.modal{background:var(--felt);border:1px solid var(--line);border-radius:var(--radius);width:min(520px,100%);max-height:90dvh;padding:22px;overflow-y:auto}.shithead-banner{color:var(--accent);margin-bottom:10px;font-size:1.3rem;font-weight:800}.ranking{margin:0 0 16px;padding-left:22px}@media (width<=720px){.topbar{gap:8px;padding:6px 10px;font-size:.85rem}.topbar .user{display:none}.game{gap:8px;padding:8px}.opponent{flex:30%;min-width:0;max-width:33%;padding:6px}.opp-head .badge,.log:empty{display:none}.middle{grid-template-columns:1fr;min-height:0}.log{height:72px}.card{--w:50px;--h:72px}.card-sm{--w:22px;--h:32px}.card-md{--w:40px;--h:58px}.pile{width:106px;height:80px}.hand{justify-content:flex-start;min-height:96px}}:root{--series-1:#3987e5;--mc-best:#63d48a;--mc-excellent:#4fc3a1;--mc-good:#9fb8aa;--mc-inaccuracy:#f5c542;--mc-mistake:#ff9a45;--mc-blunder:#ff5b5b}.nav{gap:4px;display:flex}.nav a{color:var(--muted);border-radius:6px;padding:4px 10px;font-weight:600;text-decoration:none}.nav a.on{color:var(--text);background:#ffffff1a}a{color:var(--accent)}.games-page{grid-template-columns:1fr}.section-head{justify-content:space-between;align-items:center;gap:12px;display:flex}.section-head h2,.section-head h3{margin-bottom:8px}.segmented{border:1px solid var(--line);border-radius:8px;display:inline-flex;overflow:hidden}.segmented button{color:var(--muted);font:inherit;cursor:pointer;background:0 0;border:0;padding:5px 12px;font-weight:600}.segmented button.on{color:var(--text);background:#ffffff24}.tiles{grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:10px;display:grid}.tile{border:1px solid var(--line);background:#0003;border-radius:8px;padding:10px 12px}.tile-value{font-size:1.35rem;font-weight:800}.tile-label{color:var(--muted);font-size:.8rem}.table-scroll{overflow-x:auto}.nowrap{white-space:nowrap}.clickable-row{cursor:pointer}.clickable-row:hover td{background:#ffffff0d}.chip{white-space:nowrap;background:#ffffff14;border-radius:999px;margin:2px 6px 2px 0;padding:2px 8px;font-size:.85rem;display:inline-block}.chip.me{outline:1px solid var(--accent)}.chart{position:relative}.chart svg{touch-action:pan-y;width:100%;height:auto;display:block}.chart .grid{stroke:#ffffff14}.chart .axis{fill:var(--muted);font-size:11px}.chart .marker{stroke:var(--accent);stroke-width:1.5px}.chart .crosshair{stroke:#ffffff59;stroke-dasharray:3 3}.chart .dot-ring{stroke:var(--felt-dark);stroke-width:2px}.chart-tip{pointer-events:none;border:1px solid var(--line);z-index:5;background:#05140ff0;border-radius:6px;min-width:120px;padding:6px 8px;font-size:.78rem;position:absolute;top:0;transform:translate(-50%)}.tip-head{color:var(--muted);margin-bottom:2px}.tip-row{align-items:center;gap:6px;display:flex}.tip-row b{margin-left:auto}.legend{color:var(--muted);flex-wrap:wrap;gap:4px 14px;margin-top:4px;font-size:.8rem;display:flex}.swatch{vertical-align:-1px;border-radius:3px;flex:none;width:10px;height:10px;margin-right:5px;display:inline-block}.review{width:100%;max-width:1400px;margin:0 auto;padding:12px 16px 24px}.review-head{flex-wrap:wrap;align-items:center;gap:12px;margin-bottom:12px;display:flex}.review-head h2{margin:0}.review-grid{grid-template-columns:minmax(0,1.3fr) minmax(320px,1fr);align-items:start;gap:16px;display:grid}.board{flex-direction:column;gap:12px;display:flex}.rv-center{align-items:center;gap:18px;display:flex}.small-pile{width:96px;height:74px}.pile-empty.md{width:48px;height:69px}.rv-players{gap:8px;display:grid}.rv-player{background:#0000002e;border:2px solid #0000;border-radius:8px;padding:6px 8px}.rv-player.active{border-color:var(--accent)}.rv-player.in-attack{border-color:var(--attack)}.rv-player.moved{background:#ffffff12}.rv-head{align-items:center;gap:4px;margin-bottom:4px;display:flex}.rv-cards{flex-wrap:wrap;gap:16px;display:flex}.rv-group{flex-direction:column;gap:2px;display:flex}.rv-row{flex-wrap:wrap;gap:3px;display:flex}.controls{justify-content:center;align-items:center;gap:6px;display:flex}.step-count{text-align:center;font-variant-numeric:tabular-nums;min-width:70px}.scrubber{width:100%;accent-color:var(--accent)}.move-detail{background:#0003;border-radius:8px;gap:6px;padding:10px 12px;display:grid}.move-detail-head{flex-wrap:wrap;align-items:baseline;gap:8px;display:flex}.table.compact td,.table.compact th{padding:3px 6px}.num{text-align:right;font-variant-numeric:tabular-nums}.side{position:sticky;top:12px}.move-list{max-height:360px;margin:0;padding:0;font-size:.85rem;list-style:none;overflow-y:auto}.move-list li{cursor:pointer;border-radius:4px;align-items:center;gap:6px;padding:3px 6px;display:flex}.move-list li:hover{background:#ffffff0f}.move-list li.current{background:#f5c5422e}.mv-n{color:var(--muted);text-align:right;font-variant-numeric:tabular-nums;width:2.5em}.mv-text{text-overflow:ellipsis;white-space:nowrap;flex:1;overflow:hidden}.mc{white-space:nowrap;font-weight:700}.mc-book,.mc-forced{color:var(--muted)}.mc-best{color:var(--mc-best)}.mc-excellent{color:var(--mc-excellent)}.mc-good{color:var(--mc-good)}.mc-inaccuracy{color:var(--mc-inaccuracy)}.mc-mistake{color:var(--mc-mistake)}.mc-blunder{color:var(--mc-blunder)}.check{align-items:center;gap:6px;display:inline-flex}@media (width<=900px){.review-grid{grid-template-columns:1fr}.side{position:static}}@media (width<=720px){.room-info{display:none}.review{padding:8px}}.hint-toggle{opacity:.6}.hint-toggle.on{opacity:1;color:var(--accent)}.small-modal{width:min(380px,100%)}.input.full{flex:1;width:100%}.hint-choice{cursor:pointer;align-items:flex-start;margin:16px 0 4px}.hint-choice input{margin-top:4px}.onboarding-rules{margin-top:12px}.rules-list li{margin:4px 0}.invites{z-index:40;gap:8px;max-width:min(360px,100vw - 32px);display:grid;position:fixed;bottom:16px;right:16px}.invite{background:var(--felt);border:1px solid var(--accent);border-radius:var(--radius);padding:12px 14px;box-shadow:0 8px 24px #00000073}.invite .row{margin-top:8px}.coach{border-radius:var(--radius);background:#63b4ff24;border:1px solid #63b4ff73;width:100%;max-width:720px;margin:0 auto;padding:12px 14px}.coach p{margin:6px 0 0;line-height:1.45}.coach .row{margin-top:10px}.coach-head{justify-content:space-between;font-weight:700;display:flex}.coach.collapsed{width:auto;font:inherit;color:var(--text);cursor:pointer;padding:6px 12px}@media (width<=720px){.hint-label{display:none}}.input:focus-visible,.btn:focus-visible{border-color:var(--accent);outline:none;box-shadow:0 0 0 2px #f5c5424d}select.input{appearance:none;cursor:pointer;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239fb8aa' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-position:right 10px center;background-repeat:no-repeat;background-size:16px;padding-right:34px}select.input:hover:not(:disabled){border-color:#ffffff4d}select.input option{background:var(--felt-dark);color:var(--text)}.input:disabled{opacity:.6;cursor:not-allowed}input[type=checkbox]{appearance:none;cursor:pointer;background:#0000004d;border:1px solid #ffffff4d;border-radius:6px;flex:none;place-content:center;width:20px;height:20px;margin:0;transition:background .15s,border-color .15s;display:inline-grid}input[type=checkbox]:before{content:"";clip-path:polygon(14% 44%,0 65%,50% 100%,100% 16%,80% 0%,43% 62%);background:#2a2000;width:11px;height:11px;transition:transform .12s;transform:scale(0)}input[type=checkbox]:checked{background:var(--accent);border-color:var(--accent)}input[type=checkbox]:checked:before{transform:scale(1)}input[type=checkbox]:hover:not(:disabled){border-color:var(--accent)}input[type=checkbox]:focus-visible{outline:2px solid var(--accent);outline-offset:2px}input[type=checkbox]:disabled{opacity:.5;cursor:not-allowed}.check{cursor:pointer}.play-panel{container-type:inline-size}.page.lobby{grid-template-columns:repeat(auto-fit,minmax(min(400px,100%),1fr))}.play-grid{grid-template-columns:minmax(max-content,1fr) max-content;gap:10px;margin-top:12px;display:grid}.play-grid .btn{white-space:nowrap}@container (width<=330px){.play-grid{grid-template-columns:1fr}}.icon-text{align-items:center;gap:6px;display:inline-flex}.inline-icon{vertical-align:-2px}.log-entry{align-items:center;gap:6px;display:flex}.log-icon{flex:none}.badge.cpu{align-items:center;gap:3px;display:inline-flex}.logo{color:var(--accent)}.brand{color:var(--text)}.brand svg{color:var(--accent)}.tutorial{flex-direction:column;flex:1;display:flex}.tutorial-bar{width:100%;max-width:1300px;color:var(--muted);justify-content:space-between;align-items:center;margin:8px auto 0;padding:0 16px;font-weight:600;display:flex}.coach.blocking{border-color:var(--accent);background:#f5c5421f;box-shadow:0 0 0 4px #f5c54214}.coach.task{border-color:#63b4ff99}@keyframes enter-top{0%{opacity:0;translate:0 -140px;scale:.75}}@keyframes enter-bottom{0%{opacity:0;translate:0 180px;scale:.8}}@keyframes enter-flip{0%{opacity:.3;translate:0 40px;rotate:y 90deg}60%{rotate:y 0deg;scale:1.12}}@keyframes deal-in{0%{opacity:0;translate:0 -90px;scale:.7}}@keyframes burn-out{0%{opacity:1;filter:none}35%{filter:sepia()saturate(5)hue-rotate(-25deg)brightness(1.3)drop-shadow(0 0 14px #ff7a2f)}to{opacity:0;filter:sepia()saturate(6)hue-rotate(-35deg)blur(4px);translate:0 -40px;scale:1.25}}@keyframes fly-down{to{opacity:0;translate:0 260px;scale:.55}}@keyframes fly-up{to{opacity:0;translate:0 -260px;scale:.45}}@keyframes pop{0%{opacity:0;scale:.3}25%{opacity:1;scale:1.2}70%{opacity:1;scale:1}to{opacity:0;scale:1.15}}@keyframes shake{0%,to{translate:0}20%{translate:-7px}40%{translate:7px}60%{translate:-4px}80%{translate:4px}}@keyframes flash{0%{box-shadow:0 0 0 0 var(--flash)}30%{box-shadow:0 0 0 6px var(--flash)}to{box-shadow:0 0 #0000}}@keyframes glow{50%{box-shadow:0 0 22px #f5c5428c}}.anim .enter-top{animation:.42s cubic-bezier(.2,.8,.25,1) both enter-top}.anim .enter-bottom{animation:.42s cubic-bezier(.2,.8,.25,1) both enter-bottom}.anim .enter-flip{animation:.6s ease-out both enter-flip}.anim .deal-in{animation:.4s cubic-bezier(.2,.8,.25,1) both deal-in}.pile .ghost{pointer-events:none;position:absolute;top:0;left:0}.anim .burn-out{animation:.85s ease-in both burn-out}.anim .fly-down{animation:.6s ease-in both fly-down}.anim .fly-up{animation:.6s ease-in both fly-up}.fx-icon{pointer-events:none;filter:drop-shadow(0 4px 10px #00000080);z-index:3;margin:-28px 0 0 -28px;animation:.95s ease-out both pop;position:absolute;top:50%;left:50%}.fx-icon-burn{color:#ff8a3d}.fx-icon-attack{color:var(--attack)}.fx-icon-peace{color:var(--good)}.fx-badge{background:#00000073;border-radius:999px;align-items:center;gap:4px;padding:2px 8px;font-size:.78rem;font-weight:700;animation:1s ease-out both pop;display:inline-flex}.anim .fx-attack{animation:.45s ease-in-out shake}.anim .fx-pickup{--flash:#e2574c99;animation:.9s ease-out flash}.anim .fx-finish{--flash:#63d48a99;animation:.9s ease-out flash}.anim .fx-shithead{--flash:#f5c542b3;animation:.9s ease-out 2 flash}.anim .fx-skip{opacity:.6;transition:opacity .3s}.anim .opponent.active{animation:1.8s ease-in-out infinite glow}.me{border-radius:var(--radius);position:relative}.no-anim *,.no-anim :before,.no-anim :after{transition:none!important;animation:none!important}@media (prefers-reduced-motion:reduce){.anim *,.anim :before,.anim :after{transition:none!important;animation:none!important}}.profile-page{grid-template-columns:repeat(auto-fit,minmax(min(380px,100%),1fr))}.profile-head{color:var(--accent);align-items:center;gap:14px;display:flex}.profile-head h2{color:var(--text);margin:0}.settings-list{gap:4px;display:grid}.setting{border-bottom:1px solid var(--line);cursor:pointer;align-items:center;gap:14px;padding:12px 4px;display:flex}.setting-icon{color:var(--accent);flex:none}.setting-text{flex:1;gap:2px;display:grid}.user-link{text-decoration:none}.user-link.on{background:#ffffff1a}