:root{--bg: #0b0d10;--wood: #1a1410;--ink: #f3efe6;--mute: rgba(243, 239, 230, .7);--line: rgba(243, 239, 230, .14);--ember: #d4723a;--ember-deep: #8f421c;--storm: #5b7f9a;--drizzle: #6f8f7a;--mist: #9aa0ad;--danger: #c45b5b;--font: "Syne", "Avenir Next", sans-serif;--display: "Fraunces", Georgia, serif;--ease: cubic-bezier(.22, 1, .36, 1);color-scheme:dark}*,*:before,*:after{box-sizing:border-box}html,body{margin:0;min-height:100%;background:radial-gradient(ellipse 90% 60% at 50% -10%,rgba(91,127,154,.28),transparent 55%),radial-gradient(ellipse 50% 40% at 80% 100%,rgba(212,114,58,.12),transparent 50%),linear-gradient(180deg,#10141a 0%,var(--bg) 45%,#120e0c 100%);color:var(--ink);font-family:var(--font);-webkit-font-smoothing:antialiased}button{font:inherit;color:inherit;border:0;background:none;cursor:pointer}button:disabled{opacity:.4;cursor:not-allowed}#grain{pointer-events:none;position:fixed;inset:0;z-index:40;opacity:.08;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E")}#app{min-height:100svh}.table{width:min(860px,calc(100% - 1.5rem));margin:0 auto;padding:1.1rem 0 2.5rem;display:grid;gap:1rem;animation:rise .6s var(--ease) both}@keyframes rise{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}.hud{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding-bottom:.85rem;border-bottom:1px solid var(--line)}.brand{display:flex;align-items:center;gap:.7rem}.brand i{width:2rem;height:2rem;border-radius:50%;background:radial-gradient(circle at 30% 30%,#f0c39a,var(--ember) 48%,var(--ember-deep));box-shadow:0 0 0 4px #d4723a1f}.brand b{display:block;font-family:var(--display);font-size:1.15rem;letter-spacing:-.02em}.brand span{display:block;font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--mute)}.purse{text-align:right}.purse strong{display:block;font-family:var(--display);font-size:1.45rem;letter-spacing:-.02em}.purse em{font-style:normal;font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}.lobby,.duel{display:grid;gap:1rem;padding:1.2rem;border-radius:1.4rem;border:1px solid var(--line);background:linear-gradient(160deg,rgba(255,255,255,.04),transparent 40%),#14100eb8;box-shadow:inset 0 1px #ffffff0a}.rival{display:flex;gap:.9rem;align-items:center}.avatar{width:3.4rem;height:3.4rem;border-radius:1rem;background:radial-gradient(circle at 35% 30%,rgba(243,239,230,.35),transparent 40%),linear-gradient(145deg,#4d6d82,#1c2730);border:1px solid rgba(255,255,255,.12)}.rival h1{margin:0 0 .25rem;font-family:var(--display);font-size:2rem;letter-spacing:-.03em}.rival p{margin:0;color:var(--mute);line-height:1.4}.speech{margin:0;padding:.85rem 1rem;border-left:2px solid var(--ember);background:#00000040;color:var(--mute);font-family:var(--display);font-size:1.05rem}.howto{margin:0;padding-left:1.2rem;color:var(--mute);display:grid;gap:.35rem;line-height:1.4}.howto b{color:var(--ink)}.cta{justify-self:start;min-height:3.1rem;padding:.8rem 1.3rem;border-radius:999px;background:linear-gradient(135deg,var(--ember),var(--ember-deep));color:#1a100c;font-weight:700;letter-spacing:.01em}.cta:hover:not(:disabled){filter:brightness(1.05)}.score{display:grid;grid-template-columns:1fr auto 1fr;align-items:end;gap:.75rem}.score div{display:grid;gap:.15rem}.score span{font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--mute)}.score b{font-family:var(--display);font-size:2rem;line-height:1}.score .mid{color:var(--mute);font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;padding-bottom:.35rem}.seat{display:grid;gap:.55rem;justify-items:center}.who{font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}.hand{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.65rem;width:100%}.card{position:relative;min-height:8.5rem;border-radius:1rem;border:1px solid rgba(255,255,255,.14);padding:.9rem;display:grid;align-content:end;text-align:left;overflow:hidden;box-shadow:0 10px 30px #00000047}.card:before{content:"";position:absolute;inset:0;background:var(--wash);opacity:.9}.card>*{position:relative;z-index:1}.card .tag{font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;color:#f3efe6bf}.card strong{font-family:var(--display);font-size:1.55rem;letter-spacing:-.02em}.card.storm{--wash: linear-gradient(160deg, #6f92ad, #243846 70%)}.card.drizzle{--wash: linear-gradient(160deg, #7fa58c, #24352c 70%)}.card.mist{--wash: linear-gradient(160deg, #b0b6c4, #3a3e48 70%)}.card.back{--wash: linear-gradient(160deg, #3a2a20, #1a120e 70%);place-items:center;align-content:center;letter-spacing:.18em;font-size:.72rem;color:#f3efe68c}.card.playable{transition:transform .25s var(--ease),border-color .25s var(--ease)}.card.playable:hover:not(:disabled){transform:translateY(-6px);border-color:#f3efe673}.played{width:min(100%,11rem)}.banner{margin:0;text-align:center;font-family:var(--display);font-size:1.2rem}.banner.win{color:#b7d6a8}.banner.lose{color:#e0a0a0}.banner.draw{color:var(--mist)}.fine{margin:0;text-align:center;font-size:.72rem;letter-spacing:.04em;color:#9aa3b0b3}@media(max-width:640px){.hand{grid-template-columns:1fr}.card{min-height:5.5rem}}