:root{--bg: #0c0e10;--panel: #15181c;--ink: #f2efe8;--mute: rgba(242, 239, 232, .68);--line: rgba(242, 239, 232, .12);--ember: #d4723a;--ember-deep: #934820;--storm: #5a7d96;--drizzle: #6a8d78;--mist: #969eac;--font: "Syne", "Avenir Next", sans-serif;--display: "Fraunces", Georgia, serif;--ease: cubic-bezier(.22, 1, .36, 1);--safe-b: env(safe-area-inset-bottom, 0px);color-scheme:dark}*,*:before,*:after{box-sizing:border-box}html,body{margin:0;min-height:100%;background:radial-gradient(ellipse 80% 45% at 50% -5%,rgba(90,125,150,.22),transparent 55%),radial-gradient(ellipse 45% 35% at 85% 100%,rgba(212,114,58,.1),transparent 50%),var(--bg);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:50;opacity:.07;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.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E")}#app{min-height:100svh}.shell{width:min(430px,100%);margin:0 auto;min-height:100svh;padding:1rem 1rem calc(4.75rem + var(--safe-b));display:grid;gap:1rem;align-content:start;animation:in .45s var(--ease) both}@keyframes in{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}.top{display:flex;justify-content:space-between;align-items:center;gap:1rem}.mark{display:flex;align-items:center;gap:.65rem}.mark i{width:2rem;height:2rem;border-radius:50%;background:radial-gradient(circle at 32% 28%,#f0c29a,var(--ember) 48%,var(--ember-deep))}.mark b{display:block;font-family:var(--display);font-size:1.15rem;letter-spacing:-.02em}.mark span{display:block;font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--mute)}.bal{text-align:right}.bal strong{display:block;font-family:var(--display);font-size:1.35rem}.bal em{font-style:normal;font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:var(--mute)}.panel{display:grid;gap:1rem;padding:1.15rem;border-radius:1.25rem;border:1px solid var(--line);background:linear-gradient(165deg,rgba(255,255,255,.04),transparent 42%),var(--panel)}.panel h1{margin:0;font-family:var(--display);font-size:1.8rem;letter-spacing:-.02em}.pitch{margin:0;color:var(--mute);line-height:1.45;font-size:.98rem}.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:.55rem}.stats.big{grid-template-columns:1fr 1fr}.stats div{padding:.75rem;border-radius:.85rem;background:#00000047;border:1px solid var(--line);display:grid;gap:.2rem}.stats span{font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:var(--mute)}.stats b{font-family:var(--display);font-size:1.25rem}.rules{margin:0;padding-left:1.15rem;color:var(--mute);display:grid;gap:.35rem;line-height:1.4;font-size:.92rem}.rules b{color:var(--ink)}.cta{justify-self:stretch;min-height:3.1rem;border-radius:999px;background:linear-gradient(135deg,var(--ember),var(--ember-deep));color:#1a100c;font-weight:700}.note{margin:0;font-size:.82rem;color:var(--mute)}.scoreline{display:grid;grid-template-columns:1fr auto 1fr;align-items:end;gap:.5rem}.scoreline span{display:block;font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:var(--mute)}.scoreline b{font-family:var(--display);font-size:1.8rem;line-height:1}.scoreline .mid{color:var(--mute);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;padding-bottom:.3rem}.arena{display:grid;gap:.75rem}.side{display:grid;gap:.4rem;justify-items:center}.side em{font-style:normal;font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:var(--mute)}.hand{width:100%;display:grid;grid-template-columns:repeat(3,1fr);gap:.45rem}.hand.single{grid-template-columns:1fr;max-width:10rem;margin:0 auto}.card{position:relative;min-height:6.5rem;border-radius:.95rem;border:1px solid rgba(255,255,255,.14);padding:.75rem;display:grid;align-content:end;text-align:left;overflow:hidden;color:var(--ink)}.card:before{content:"";position:absolute;inset:0;background:var(--wash)}.card>*{position:relative;z-index:1}.card span{font-size:.62rem;letter-spacing:.06em;text-transform:uppercase;color:#f2efe8bf}.card strong{font-family:var(--display);font-size:1.2rem}.card.storm{--wash: linear-gradient(160deg, #6d90ab, #223541 72%)}.card.drizzle{--wash: linear-gradient(160deg, #7ca38a, #22352c 72%)}.card.mist{--wash: linear-gradient(160deg, #aeb4c2, #3a3e48 72%)}.card.back{--wash: linear-gradient(160deg, #3a2a20, #17110e 72%);place-items:center;align-content:center;letter-spacing:.16em;font-size:.68rem;color:#f2efe880}.banner{margin:0;text-align:center;font-family:var(--display);font-size:1.05rem}.banner.win{color:#b9d6aa}.banner.lose{color:#e2a4a4}.banner.draw{color:var(--mist)}.tabs{position:fixed;left:50%;bottom:0;transform:translate(-50%);width:min(430px,100%);display:grid;grid-template-columns:repeat(3,1fr);gap:.25rem;padding:.55rem .75rem calc(.55rem + var(--safe-b));background:#0c0e10eb;border-top:1px solid var(--line);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);z-index:20}.tabs button{min-height:2.75rem;border-radius:.75rem;color:var(--mute);font-weight:600;letter-spacing:.04em}.tabs button.on{color:var(--ink);background:#d4723a29}@media(max-width:380px){.stats,.hand{grid-template-columns:1fr}}