@font-face{font-family:'Metal Mania';src:url(fonts/metalmania.ttf) format('truetype');font-display:swap}
@font-face{font-family:'Cinzel';src:url(fonts/cinzel.ttf) format('truetype');font-weight:400 900;font-display:swap}
:root{--bg:#0b0a0d;--ink:#e8e2d6;--dim:#9a9389;--blood:#b3121b;--gold:#d9a521;
 --infernal:#d23a22;--grave:#5fb83a;--iron:#d9a521;--coven:#9b52d6;--neutral:#8e96a3;--hand-h:132px}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;background:var(--bg);color:var(--ink);font:14px/1.35 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Noto Sans",sans-serif;overflow:hidden;overscroll-behavior:none}
body{background:radial-gradient(ellipse at 50% -10%,#2a1416 0%,transparent 55%),radial-gradient(ellipse at 50% 120%,#13221a 0%,transparent 60%),var(--bg)}
body::before{content:"";position:fixed;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,rgba(255,255,255,.012) 0 2px,transparent 2px 4px);z-index:0}
button{font:inherit;color:inherit;cursor:pointer;border:0}
.hidden{display:none!important}
#app{position:relative;z-index:1;height:100%;max-width:960px;margin:0 auto;display:flex;flex-direction:column}
h1,h2,h3,.title{font-family:'Metal Mania','Cinzel',serif;font-weight:400;letter-spacing:.5px;margin:0}
.btn{background:linear-gradient(#3a1114,#1c0809);border:1px solid #6b1d22;border-radius:10px;padding:11px 16px;font-weight:700;text-transform:uppercase;letter-spacing:.8px;font-size:13px;box-shadow:0 2px 10px rgba(179,18,27,.25),inset 0 1px 0 rgba(255,255,255,.08);touch-action:manipulation}
.btn:active{transform:translateY(1px)}
.btn.gold{background:linear-gradient(#5c4310,#2a1d05);border-color:#a37a17;color:#ffe6a6}
.btn.ghost{background:rgba(255,255,255,.04);border-color:#3b3640;box-shadow:none}
.btn[disabled]{opacity:.38;cursor:not-allowed}
.btn.big{padding:15px 20px;font-size:16px;width:100%}

/* ---------- menu / deck pick ---------- */
.screen{flex:1;overflow-y:auto;padding:max(18px,env(safe-area-inset-top)) 16px 24px;-webkit-overflow-scrolling:touch}
.logo{text-align:center;margin:26px 0 8px}
.logo h1{font-size:44px;line-height:.95;color:#e7dcc5;text-shadow:0 0 18px rgba(179,18,27,.7),0 3px 0 #300}
.logo .sub{font-family:'Cinzel',serif;font-weight:800;letter-spacing:4px;color:var(--blood);font-size:14px;margin-top:6px}
.hero{display:flex;justify-content:center;gap:6px;margin:18px 0}
.hero .card{--w:92px;transform:rotate(var(--r,0deg))}
.menu-btns{display:flex;flex-direction:column;gap:12px;max-width:340px;margin:18px auto}
.small{font-size:12px;color:var(--dim)}
.center{text-align:center}
.decks{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:12px 0}
.deck{position:relative;border-radius:12px;overflow:hidden;border:2px solid #2b2730;background:#141217;text-align:left;padding:0;min-height:170px}
.deck .dimg{height:96px;background-size:cover;background-position:center 25%;filter:saturate(.9)}
.deck .dbody{padding:7px 9px 9px}
.deck b{font-family:'Cinzel',serif;font-size:14px;display:block}
.deck .fac{font-size:11px;font-weight:800;letter-spacing:1px;text-transform:uppercase}
.deck p{margin:3px 0 0;font-size:11px;color:var(--dim);line-height:1.3}
.deck.sel{border-color:var(--c);box-shadow:0 0 0 1px var(--c),0 0 22px color-mix(in srgb,var(--c) 45%,transparent)}
.deck .list{position:absolute;top:6px;right:6px;background:rgba(0,0,0,.65);border-radius:8px;padding:3px 7px;font-size:11px}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0 14px}
.chip{padding:8px 11px;border-radius:999px;background:#18151b;border:1px solid #333;font-size:12px;font-weight:700}
.chip.sel{border-color:var(--c,#d9a521);color:#fff;background:color-mix(in srgb,var(--c,#d9a521) 25%,#18151b)}
.sect{font-family:'Cinzel',serif;font-weight:800;letter-spacing:2px;font-size:12px;color:var(--gold);text-transform:uppercase;margin-top:16px}

/* ---------- card frame ---------- */
.card{--w:84px;--c:var(--neutral);position:relative;width:var(--w);height:calc(var(--w)*1.4);font-size:calc(var(--w)/10);border-radius:.7em;flex:none;
 background:linear-gradient(160deg,color-mix(in srgb,var(--c) 55%,#000) 0%,#121014 45%,color-mix(in srgb,var(--c) 30%,#000) 100%);
 border:.22em solid color-mix(in srgb,var(--c) 75%,#000);box-shadow:0 .3em .9em rgba(0,0,0,.6),inset 0 0 0 .08em rgba(255,255,255,.12);overflow:hidden;user-select:none;-webkit-user-select:none}
.card.fac-Infernal{--c:var(--infernal)}.card.fac-Grave{--c:var(--grave)}.card.fac-Iron{--c:var(--iron)}.card.fac-Coven{--c:var(--coven)}.card.fac-Neutral{--c:var(--neutral)}
.card .art{position:absolute;left:.35em;right:.35em;top:.35em;height:62%;border-radius:.45em;background:#000 center 30%/cover no-repeat;box-shadow:inset 0 0 1.2em rgba(0,0,0,.85)}
.card .art.glyph{display:flex;align-items:center;justify-content:center;font-size:3.6em;background:radial-gradient(circle at 50% 45%,color-mix(in srgb,var(--c) 40%,#000),#060506 75%)}
.card.t-Technique .art.glyph{border-radius:.45em .45em 1.8em 1.8em/.45em .45em .8em .8em}
.card.t-Gear .art.glyph{outline:.18em dashed color-mix(in srgb,var(--c) 70%,#999);outline-offset:-.5em}
.card.t-Location .art.glyph{background:linear-gradient(#0b1210,#1d1a12 60%,#050505),radial-gradient(circle at 50% 30%,#333,transparent)}
.card .cost{position:absolute;top:.1em;left:.1em;width:2.3em;height:2.3em;border-radius:50%;display:flex;align-items:center;justify-content:center;
 font-weight:900;font-size:1.25em;background:radial-gradient(circle at 35% 30%,#6b7380,#232830 70%);border:.12em solid #c9ced6;color:#fff;text-shadow:0 1px 2px #000;z-index:3}
.card .cost.bp{background:radial-gradient(circle at 35% 30%,#d33,#4a0508 70%);border-color:#ff9a9a}
.card .name{position:absolute;left:.3em;right:.3em;top:63.5%;text-align:center;font-family:'Cinzel',serif;font-weight:800;font-size:1.02em;line-height:1.05;
 text-shadow:0 1px 2px #000;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;z-index:2}
.card .typeline{display:none}
.card .kws{position:absolute;top:74%;left:0;right:0;text-align:center;font-size:1.05em;letter-spacing:.05em;z-index:2;white-space:nowrap}
.card .text{display:none}
.card .atk,.card .hp,.u .atk,.u .hp{position:absolute;bottom:.15em;width:2.25em;height:2.25em;display:flex;align-items:center;justify-content:center;font-weight:900;font-size:1.3em;color:#fff;text-shadow:0 1px 2px #000;z-index:3}
.card .atk,.u .atk{left:.1em;background:radial-gradient(circle at 40% 35%,#e6a83a,#6d3e06 75%);clip-path:polygon(50% 0,100% 30%,85% 100%,15% 100%,0 30%);}
.card .hp,.u .hp{right:.1em;background:radial-gradient(circle at 40% 35%,#d43b3b,#4c0607 75%);border-radius:50% 50% 50% 50%/60% 60% 40% 40%}
.card .tag{position:absolute;bottom:.55em;left:2.5em;right:2.5em;text-align:center;font-size:.62em;font-weight:900;letter-spacing:.12em;color:#ffe9a8;text-shadow:0 0 .4em #000;z-index:2;white-space:nowrap;overflow:hidden}
.card .rar{display:none}
/* large card */
.card.lg{--w:min(280px,72vw,40vh)}
.card.lg .art{height:47%}
.card.lg .cost{font-size:.9em}
.card.lg .name{top:48.5%;font-size:1em}
.card.lg .typeline{display:block;position:absolute;top:55.5%;left:0;right:0;text-align:center;font-size:.5em;letter-spacing:.14em;text-transform:uppercase;color:color-mix(in srgb,var(--c) 60%,#fff);font-weight:800}
.card.lg .kws{display:none}
.card.lg .text{display:flex;position:absolute;top:60%;left:.7em;right:.7em;bottom:17%;font-size:.56em;line-height:1.3;text-align:center;overflow:hidden;
 background:rgba(0,0,0,.4);border-radius:.6em;padding:.4em .6em;align-items:center;justify-content:center}
.card.lg .atk,.card.lg .hp{font-size:.85em;bottom:.25em}
.card.lg .tag{font-size:.42em;bottom:1.3em}
.card.lg .rar{display:block;position:absolute;top:.75em;right:.7em;font-size:.42em;font-weight:900;letter-spacing:.12em;text-transform:uppercase;background:rgba(0,0,0,.6);padding:.2em .6em;border-radius:1em;z-index:3}
.kwi{display:inline-block;filter:drop-shadow(0 0 .15em #000)}
.text b{color:#fff}
.text .ki{white-space:nowrap;color:color-mix(in srgb,var(--c) 45%,#fff);font-weight:800}
/* Genesis foil */
.foil::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:4;mix-blend-mode:color-dodge;opacity:.5;
 background:linear-gradient(115deg,transparent 20%,rgba(255,0,140,.35) 32%,rgba(255,230,0,.35) 40%,rgba(0,255,170,.35) 48%,rgba(0,160,255,.35) 56%,transparent 68%);background-size:250% 250%;animation:foil 4.5s linear infinite}
.foil{border-color:#e9c562!important;box-shadow:0 0 0 .08em #6d5414,0 .3em 1em rgba(0,0,0,.6),0 0 .9em rgba(233,197,98,.35)}
@keyframes foil{0%{background-position:120% 0}100%{background-position:-120% 0}}
@media (prefers-reduced-motion:reduce){.foil::after{animation:none;background-position:50% 50%}}

/* ---------- game board ---------- */
.game{flex:1;display:flex;flex-direction:column;min-height:0;padding-top:env(safe-area-inset-top)}
.pbar{display:flex;align-items:center;gap:6px;padding:5px 8px;background:linear-gradient(rgba(20,15,18,.95),rgba(12,10,12,.95));border-bottom:1px solid #2a2228;min-height:52px}
.pbar.me{border-top:1px solid #2a2228;border-bottom:0}
.who{display:flex;align-items:center;gap:7px;padding:3px 8px 3px 3px;border-radius:999px;background:#18131a;border:2px solid #322a30;position:relative}
.who .av{width:38px;height:38px;border-radius:50%;background:#000 center 25%/cover;border:2px solid var(--c);flex:none}
.who .lf{font-weight:900;font-size:20px;min-width:26px;text-align:center}
.who .lf small{display:block;font-size:9px;letter-spacing:1px;color:var(--dim);font-weight:700;margin-top:-3px}
.stat{display:flex;flex-direction:column;align-items:center;font-size:15px;font-weight:800;min-width:30px;line-height:1.05;background:none;padding:2px}
.stat small{font-size:9px;letter-spacing:.5px;color:var(--dim);font-weight:700}
.iron{display:flex;flex-direction:column;align-items:flex-start;gap:2px}
.iron .pips{display:flex;gap:2px}
.iron .pip{width:9px;height:9px;border-radius:2px;background:#2b2b2f;border:1px solid #444}
.iron .pip.on{background:linear-gradient(#ffe08a,#b77f0e);border-color:#ffd16b;box-shadow:0 0 5px #d9a521}
.iron .pip.x{background:linear-gradient(#ff9a7a,#c0391a);border-color:#ffb199}
.iron b{font-size:13px}
.loc{font-size:10px;max-width:84px;line-height:1.1;padding:3px 6px;border-radius:6px;background:#1d1a14;border:1px solid #4b3e1d;color:#e9d39c}
.spacer{flex:1}
.iconbtn{width:38px;height:38px;border-radius:10px;background:#1a1619;border:1px solid #3a3036;font-size:18px;display:flex;align-items:center;justify-content:center}
.board{flex:1;min-height:0;display:flex;flex-wrap:wrap;align-content:center;align-items:center;justify-content:center;gap:6px;padding:6px 6px;position:relative}
.board.enemy{background:linear-gradient(rgba(60,10,12,.18),transparent)}
.board.me{background:linear-gradient(transparent,rgba(10,40,20,.15))}
.board .empty{color:#4b4450;font-size:12px;font-style:italic}
.u{--c:var(--neutral);position:relative;width:var(--uw,60px);aspect-ratio:3/4;font-size:calc(var(--uw,60px)/8);border-radius:.8em;
 background:#000 center 28%/cover;border:.22em solid color-mix(in srgb,var(--c) 75%,#000);box-shadow:0 .3em .8em rgba(0,0,0,.7);transition:transform .15s,box-shadow .15s;flex:none}
.u.fac-Infernal{--c:var(--infernal)}.u.fac-Grave{--c:var(--grave)}.u.fac-Iron{--c:var(--iron)}.u.fac-Coven{--c:var(--coven)}
.u .glyph{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:3.2em;background:radial-gradient(circle,color-mix(in srgb,var(--c) 40%,#000),#050505 75%);border-radius:.6em}
.u .ukw{position:absolute;top:.15em;left:0;right:0;text-align:center;font-size:max(1.3em,13px);white-space:nowrap;filter:drop-shadow(0 0 .2em #000);z-index:2}
.u .atk,.u .hp{font-size:1.25em;width:2.1em;height:2.1em;bottom:-.25em}
.u .atk{left:-.3em}.u .hp{right:-.3em}
.u .hp.hurt{color:#ff8f8f}.u .atk.up,.u .hp.up{color:#9dff8a}
.u .st{position:absolute;top:38%;left:0;right:0;text-align:center;font-size:1.5em;z-index:2;filter:drop-shadow(0 0 .2em #000)}
.u.hexed{filter:saturate(.4) hue-rotate(220deg) brightness(.85)}
.u.ready{box-shadow:0 0 0 .14em #6dff7a,0 0 1em rgba(109,255,122,.55)}
.u.guard{border-style:double;border-width:.4em}
.u.token{border-style:dashed}
.u.foil{border-color:#e9c562}
.u .gear{position:absolute;bottom:1.9em;left:50%;transform:translateX(-50%);font-size:.9em;background:rgba(0,0,0,.7);border-radius:.6em;padding:0 .3em;z-index:2;white-space:nowrap}
.tgt{animation:tgt 0.9s ease-in-out infinite;cursor:crosshair}
@keyframes tgt{0%,100%{box-shadow:0 0 0 .16em #ff3b3b,0 0 .8em #ff3b3b}50%{box-shadow:0 0 0 .3em #ff7b3b,0 0 1.6em #ff3b3b}}
.who.tgt{animation:tgt .9s infinite}
.hl{animation:hl 1.1s ease-in-out infinite!important;z-index:5}
@keyframes hl{0%,100%{box-shadow:0 0 0 3px #ffd34d,0 0 14px #ffd34d}50%{box-shadow:0 0 0 5px #fff1b0,0 0 28px #ffd34d}}
.lunge{animation:lunge .35s ease}
@keyframes lunge{40%{transform:translateY(var(--ly,-14px)) scale(1.08)}}
.shake{animation:shake .35s}
@keyframes shake{25%{transform:translateX(-4px)}50%{transform:translateX(4px)}75%{transform:translateX(-2px)}}

.midbar{display:flex;align-items:center;gap:8px;padding:4px 8px;background:rgba(0,0,0,.4);border-top:1px solid #221b20;border-bottom:1px solid #221b20;min-height:46px}
.midbar .msg{flex:1;font-size:12px;color:#cfc6b8;line-height:1.25;max-height:46px;overflow:hidden}
.midbar .msg b{color:#fff}
#endBtn{min-width:96px;padding:10px 12px}
#endBtn.glow{background:linear-gradient(#6a5011,#2a1d05);border-color:#d9a521;color:#ffe9a8;animation:hl 1.4s infinite}
.hand{height:calc(var(--hand-h) + env(safe-area-inset-bottom));padding:8px 8px calc(8px + env(safe-area-inset-bottom));display:flex;gap:6px;overflow-x:auto;overflow-y:hidden;align-items:flex-end;background:linear-gradient(#0e0b0e,#060506);-webkit-overflow-scrolling:touch;scrollbar-width:none}
.hand::-webkit-scrollbar{display:none}
.hand .card{--w:80px;transition:transform .15s}
.hand .card.ok{box-shadow:0 0 0 .15em #6dff7a,0 0 .9em rgba(109,255,122,.5)}
.hand .card.no{filter:brightness(.62) saturate(.7)}
.hand .card:active{transform:translateY(-6px)}
.hand .handempty{color:#5b5360;font-size:12px;margin:auto}

/* banner (targeting) */
.banner{position:fixed;left:50%;transform:translateX(-50%);top:calc(50% - 30px);z-index:30;max-width:92vw;width:380px;background:rgba(25,6,8,.95);border:1px solid #b3121b;border-radius:12px;padding:9px 10px;display:flex;align-items:center;gap:8px;box-shadow:0 6px 30px rgba(0,0,0,.7)}
.banner span{flex:1;font-size:13px;font-weight:700}
/* coach (tutorial) */
.coach{position:relative;z-index:25;margin:4px 6px;background:linear-gradient(#251c0a,#140f06);border:2px solid #d9a521;border-radius:14px;padding:10px 12px 10px 12px;box-shadow:0 8px 30px rgba(0,0,0,.8);font-size:13px;line-height:1.38}
.coach h3{font-size:19px;color:#ffd77a;margin-bottom:3px}
.coach .step{float:right;font-size:11px;color:#b99a50;font-weight:800}
.coach .row{display:flex;justify-content:flex-end;gap:8px;margin-top:8px}
.coach .row .btn{padding:8px 12px}
.coach{font-size:12.5px;line-height:1.33;padding:8px 10px}
.coach h3{font-size:17px}
.coach .row{margin-top:5px}.coach .row .btn{padding:6px 10px;font-size:11px}
.midbar.targeting{background:linear-gradient(90deg,rgba(90,8,12,.85),rgba(40,4,6,.85));border-color:#b3121b}
.midbar.targeting .msg{font-size:13px;color:#fff}
@media (min-width:700px){.coach{max-width:640px;margin:4px auto;width:100%}}

/* modal */
#modal{position:fixed;inset:0;z-index:50;background:rgba(0,0,0,.78);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);display:flex;align-items:flex-start;justify-content:center;overflow-y:auto;padding:max(14px,env(safe-area-inset-top)) 12px 20px}
.sheet{width:min(460px,100%);margin:auto;background:#141015;border:1px solid #3a2c33;border-radius:16px;padding:14px;box-shadow:0 10px 40px #000;position:relative}
.sheet.zoom{background:transparent;border:0;box-shadow:none;display:flex;flex-direction:column;align-items:center;gap:10px;padding:4px}
.sheet h2{font-size:26px;color:#e9dcc2;margin-bottom:6px}
.sheet .x{position:absolute;top:8px;right:8px}
.acts{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;width:100%}
.acts .btn{flex:1 1 40%;min-width:120px}
.state{font-size:12px;color:#d9d0c2;background:#141015;border:1px solid #2e252b;border-radius:10px;padding:8px 10px;width:min(300px,92vw)}
.kwlist{width:min(320px,92vw);display:flex;flex-direction:column;gap:5px}
.kwrow{display:flex;gap:8px;align-items:flex-start;background:#141015;border:1px solid #2e252b;border-radius:10px;padding:6px 9px;font-size:12px}
.kwrow .i{font-size:18px;min-width:28px;text-align:center}
.kwrow b{color:#fff}
.gloss .kwrow{margin-bottom:5px}
.gloss h3{font-family:'Cinzel',serif;font-weight:800;font-size:13px;letter-spacing:2px;color:var(--gold);margin:14px 0 6px;text-transform:uppercase}
.gloss ol,.gloss ul{padding-left:18px;margin:0;font-size:12.5px}
.gloss li{margin-bottom:5px}
.faq dt{font-weight:800;font-size:12.5px;margin-top:7px}.faq dd{margin:2px 0 0;font-size:12px;color:#c9c0b3}
.grid{display:flex;flex-wrap:wrap;gap:6px;justify-content:center}
.grid .card{--w:76px}
.grid .card.pick{outline:3px solid #6dff7a;outline-offset:1px}
.grid .card.off{opacity:.35}
.mull .card{--w:min(84px,21vw)}
.mull .card.out{filter:grayscale(1) brightness(.5)}
.mull .card.out::before{content:"↺";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:4em;z-index:6;color:#ffd34d}
.log{max-height:60vh;overflow-y:auto;font-size:12px;display:flex;flex-direction:column-reverse;gap:3px}
.log div{padding:3px 6px;border-radius:6px;background:#1a161b}
.log div.t{background:#2a1d0a;color:#ffd77a;font-weight:800}
.endscr{text-align:center}
.endscr h1{font-size:54px;margin:6px 0}
.endscr .win{color:#ffd34d;text-shadow:0 0 22px #b37b00}
.endscr .lose{color:#ff4d4d;text-shadow:0 0 22px #900}

/* toasts / floats / cast */
#toast{position:fixed;left:50%;top:44%;transform:translate(-50%,-50%);z-index:60;pointer-events:none;display:flex;flex-direction:column;gap:6px;align-items:center}
#toast div{background:rgba(10,8,10,.92);border:1px solid #6b1d22;border-radius:10px;padding:8px 14px;font-weight:700;font-size:13px;animation:toast 1.9s forwards;max-width:86vw;text-align:center}
@keyframes toast{0%{opacity:0;transform:translateY(8px)}10%,80%{opacity:1;transform:none}100%{opacity:0}}
#fx{position:fixed;inset:0;pointer-events:none;z-index:40}
.float{position:absolute;font-weight:900;font-size:26px;text-shadow:0 2px 0 #000,0 0 10px #000;animation:float 1.1s forwards;transform:translate(-50%,-50%)}
.float.dmg{color:#ff4040}.float.heal{color:#66ff7a}
@keyframes float{0%{opacity:0;margin-top:10px}15%{opacity:1}100%{opacity:0;margin-top:-40px}}
.cast{position:fixed;left:50%;top:40%;transform:translate(-50%,-50%);z-index:45;pointer-events:none;animation:cast 1.1s forwards;display:flex;flex-direction:column;align-items:center;gap:6px}
.cast .card{--w:150px}
.cast .lbl{font-weight:800;font-size:12px;background:rgba(0,0,0,.8);padding:3px 10px;border-radius:8px}
@keyframes cast{0%{opacity:0;transform:translate(-50%,-50%) scale(.7)}15%,80%{opacity:1;transform:translate(-50%,-50%) scale(1)}100%{opacity:0;transform:translate(-50%,-60%) scale(.95)}}
.turnflash{position:fixed;left:0;right:0;top:40%;text-align:center;z-index:44;pointer-events:none;font-family:'Metal Mania',serif;font-size:42px;color:#ffd34d;text-shadow:0 0 18px #b3121b,0 3px 0 #000;animation:tflash 1.1s forwards}
@keyframes tflash{0%{opacity:0;transform:scale(.8)}15%,75%{opacity:1;transform:none}100%{opacity:0}}
/* desktop peek */
#peek{position:fixed;right:16px;top:50%;transform:translateY(-50%);z-index:20;pointer-events:none;display:none}
#peek .card{--w:250px}
@media (hover:hover) and (pointer:fine) and (min-width:1100px){#peek.on{display:block}}
@media (min-width:700px){.hand .card{--w:96px}:root{--hand-h:150px}}
@media (max-height:700px){:root{--hand-h:118px}.hand .card{--w:72px}.who .av{width:32px;height:32px}}

/* ---------- Genesis card back ---------- */
.stat.cb{position:relative;min-width:34px}
.cbt{display:block;width:20px;height:29px;border-radius:3px;background:#000 url(cardback.jpg) center/cover;box-shadow:0 0 0 1px #6b5524,0 1px 3px #000}
.cbt.stack{box-shadow:0 0 0 1px #6b5524,2px -2px 0 -1px #2a2318,2px -2px 0 0 #6b5524,4px -4px 0 -1px #2a2318,4px -4px 0 0 #6b5524}
.stat.cb b{position:absolute;top:6px;left:50%;transform:translateX(-50%);font-size:13px;color:#fff;text-shadow:0 0 3px #000,0 0 3px #000,0 0 5px #000}
.ehand{display:flex;justify-content:center;height:30px;padding-top:2px;overflow:hidden;background:rgba(12,10,12,.9)}
.fcb{width:26px;height:38px;margin:0 -6px;border-radius:3px;background:#000 url(cardback.jpg) center/cover;box-shadow:0 0 0 1px #6b5524,0 2px 4px #000;transform:rotate(var(--r));transform-origin:50% 140%}

/* ---------- pass & play handoff ---------- */
.handoff{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;min-height:100%}
.hocard{width:min(56vw,240px);aspect-ratio:240/344;border-radius:12px;background:#000 url(cardback.jpg) center/cover;box-shadow:0 0 0 2px #8a6d2c,0 0 40px rgba(212,170,80,.35),0 10px 30px #000}