/* ValoFlex. Colours and sizes are the variables in :root; one dark theme. A card's size is --cw (its width): every
   part of a card is in em of a font-size taken from --cw, so a card looks the same at any size. Phones (≤760px)
   have their own block at the end. */
:root{
  --bg:#0b1020;--bg2:#121a2e;--panel:#151d33;--panel2:#1b2541;--line:#28345a;--ink:#eef2ff;--muted:#8a96b8;
  --accent:#ff4655;--accent2:#19c3b1;--gold:#f5b83d;
  --t-rule:#19c3b1;--t-wincon:#f5b83d;--t-buddy:#a77bff;--t-ban:#ff4655;--t-action:#3ea6ff;
  --cw-hand:7.8rem;--cw-big:7.4rem;--cw-mid:6.4rem;--cw-mini:3.4rem;--cw-pile:7.34rem;--cw-field:7.2rem;--cw-zone:5.3rem;--cw-win:6.2rem;
  --seat0:#2ec4b6;--seat1:#ff9f43;--seat2:#a77bff;--seat3:#4cc9f0;--seat4:#ff6fb5;--seat5:#a3e635;   /* each seat's colour (not red or gold: those mark the turn and the winner) */
  --radius:.9rem;--head:"Chakra Petch","Segoe UI",sans-serif;--body:"Inter","Segoe UI",system-ui,sans-serif;
  color-scheme:dark;
}
*{box-sizing:border-box}
/* scrollbars, everywhere: a red thumb floating on no track, no arrow buttons (Firefox gets the thin red bar from the
   standard properties; overlay scrollbars on phones and macOS keep their own look) */
*{scrollbar-width:thin;scrollbar-color:var(--accent) transparent}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:linear-gradient(180deg,#ff4655,#b8222f);border-radius:10px;border:3px solid transparent;background-clip:padding-box}
::-webkit-scrollbar-thumb:horizontal{background:linear-gradient(90deg,#ff4655,#b8222f);border:3px solid transparent;background-clip:padding-box}
::-webkit-scrollbar-thumb:hover{background:linear-gradient(180deg,#ff5c69,#d02a3a);border:3px solid transparent;background-clip:padding-box}
::-webkit-scrollbar-thumb:horizontal:hover{background:linear-gradient(90deg,#ff5c69,#d02a3a);border:3px solid transparent;background-clip:padding-box}
::-webkit-scrollbar-button{display:none}
::-webkit-scrollbar-corner{background:transparent}
html{font-size:clamp(13px,.5vw + 9px,18px);-webkit-text-size-adjust:100%}
body{margin:0;min-height:100dvh;font-family:var(--body);color:var(--ink);background:var(--bg);
  background-image:radial-gradient(60rem 40rem at 10% -10%,rgba(255,70,85,.14),transparent 60%),radial-gradient(50rem 40rem at 110% 110%,rgba(25,195,177,.12),transparent 60%);
  background-attachment:fixed;overflow-x:hidden}
button,input,select{font:inherit;color:inherit}
h1,h2,h3,h4{font-family:var(--head);margin:0 0 .5rem;letter-spacing:.02em}
.muted{color:var(--muted)}
small{font-size:.8em}

/* ---------- buttons, fields, tags ---------- */
.btn{font:600 .92rem var(--body);padding:.62rem 1.05rem;border-radius:.6rem;border:1px solid var(--line);background:var(--panel2);color:var(--ink);cursor:pointer;transition:background .15s,border-color .15s,transform .1s;white-space:nowrap}
.btn:hover:not(:disabled){border-color:#3b4a78;background:#223056}
.btn:active:not(:disabled){transform:translateY(1px)}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn.primary{background:var(--accent);border-color:var(--accent);color:#fff}
.btn.primary:hover:not(:disabled){background:#ff5c69;border-color:#ff5c69}
.btn.ghost{background:transparent}
.btn.small{padding:.34rem .62rem;font-size:.8rem;border-radius:.45rem}
.btn.danger{background:#3a1218;border-color:var(--accent)}
.btn.link{background:none;border:none;color:var(--muted);text-decoration:underline;padding:.3rem}
.btn:focus-visible,input:focus-visible,select:focus-visible,.card-pick:focus-visible,.skin-pick:focus-visible{outline:2px solid var(--accent2);outline-offset:2px}
.field{display:flex;flex-direction:column;gap:.3rem;font-size:.85rem;color:var(--muted)}
.field.inline{flex-direction:row;align-items:center;gap:.6rem}
input,select{background:#0e1527;border:1px solid var(--line);border-radius:.55rem;padding:.6rem .75rem;color:var(--ink);font-size:1rem;min-width:0}
.tag{font:600 .64rem var(--body);padding:.12rem .42rem;border-radius:.3rem;background:#26314d;text-transform:uppercase;letter-spacing:.06em;white-space:nowrap}
.tag.host{background:var(--gold);color:#1b1300}.tag.bot{background:#2d3f6b}.tag.away{background:#5a2330}.tag.turn{background:var(--accent)}.tag.you{background:var(--accent2);color:#002420}
.logo{font:700 4.4rem/1 var(--head);letter-spacing:.06em}
.logo span{color:var(--accent)}
.logo.s{font-size:1.25rem}
.panel{background:rgba(21,29,51,.88);border:1px solid var(--line);border-radius:1.2rem;padding:1.3rem 1.5rem;box-shadow:0 1.5rem 3rem rgba(0,0,0,.35);backdrop-filter:blur(6px)}

/* ---------- the card ---------- */
.card{--cw:var(--cw-hand);position:relative;flex-shrink:0;width:var(--cw);height:calc(var(--cw)*1.4);font-size:calc(var(--cw)/10);
  border-radius:.75em;display:flex;overflow:hidden;background:var(--c-bg);color:var(--c-ink);border:.12em solid var(--c-edge);
  box-shadow:0 .4em 1em rgba(0,0,0,.35);user-select:none;-webkit-user-select:none}
.t-rule{--tc:var(--t-rule)}.t-wincon{--tc:var(--t-wincon)}.t-buddy{--tc:var(--t-buddy)}.t-ban{--tc:var(--t-ban)}.t-action{--tc:var(--t-action)}
/* the face: tag and icon, picture, title, text, footer. Everything is in em of the card's size */
.card:not(.back){flex-direction:column;gap:.35em;padding:.6em .65em .5em}
.chead{display:flex;align-items:center;justify-content:space-between;gap:.4em;flex-shrink:0}
.ctag{font:700 .56em var(--body);letter-spacing:.14em;text-transform:uppercase;padding:.35em .6em;border-radius:.4em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  background:color-mix(in srgb,var(--tc) 22%,transparent);color:color-mix(in srgb,var(--tc) 65%,var(--c-ink))}
.cicon{display:flex;color:var(--tc);flex-shrink:0}
.cicon svg{width:1.05em;height:1.05em}
.cart{flex:1 1 auto;min-height:3.2em;border-radius:.55em;overflow:hidden;display:flex;align-items:center;justify-content:center;background:#0d1220}
.cart img{width:100%;height:100%;display:block;object-fit:cover;pointer-events:none}
.cart.photo{background:transparent}   /* a real picture (on white): shown whole, never cropped */
.cart.photo img{object-fit:contain}
.cart.icon{background:transparent;padding:.1em}   /* a drawn icon (rules, bans, actions): on nothing, shown whole */
.cart.icon img{object-fit:contain}
/* a Winning Con's picture: the gold trophy behind, the charms it needs fanned in front (--n of them, each --i) */
.cart.needs{position:relative;background:radial-gradient(circle at 50% 70%,rgba(245,184,61,.3),transparent 62%);overflow:visible}
.cart.needs .trophy{position:absolute;left:50%;top:0;height:78%;width:auto;transform:translateX(-50%);opacity:.95}
.cart.needs .nd{position:absolute;bottom:-2%;left:calc(50% + (var(--i) - (var(--n) - 1)/2)*min(26%,calc(78%/var(--n))));width:calc(min(50%,calc(118%/var(--n))));height:auto;
  transform:translateX(-50%) rotate(calc((var(--i) - (var(--n) - 1)/2)*7deg));object-fit:contain;filter:drop-shadow(0 .25em .4em rgba(0,0,0,.35))}
.card.mini .cart.needs .nd{display:none}
.cart.needs .nd.any-ban{aspect-ratio:1;border-radius:50%;background:#fff3f4;border:.12em solid var(--t-ban);color:var(--t-ban);display:grid;place-items:center;width:calc(min(34%,calc(100%/var(--n))))}   /* "any n Bans": a no-sign per Ban */
.cart.needs .nd.any-ban svg{width:62%;height:62%}   /* on a tiny card the trophy alone reads better */
.ctitle{flex-shrink:0;font:700 1.02em/1.15 var(--head);text-align:center;overflow-wrap:anywhere}
.ctext{flex-shrink:0;font-size:.6em;line-height:1.35;text-align:center;color:color-mix(in srgb,var(--c-ink) 78%,transparent);
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:5;overflow:hidden}
.card.huge .ctext{-webkit-line-clamp:unset}
.ctext{white-space:pre-line}   /* a line break in a card's text starts a new row */
.t-ban .ctext{-webkit-line-clamp:6}   /* a Ban's flavour plus its rule line */
.cfoot{flex-shrink:0;display:flex;justify-content:space-between;gap:.5em;font:600 .46em var(--body);letter-spacing:.1em;text-transform:uppercase;
  color:color-mix(in srgb,var(--c-ink) 50%,transparent);white-space:nowrap}
.cnote{color:color-mix(in srgb,var(--tc) 80%,var(--c-ink));font-weight:700}
/* small cards: picture and title only */
.card.mid .ctext,.card.mini .ctext,.card.mid .cfoot,.card.mini .cfoot,.card.mini .chead{display:none}
.card.mid .chead .ctag{font-size:.7em}
.card.mini{padding:.4em;gap:.25em}
.card.mini .ctitle{font-size:1.25em}
/* the fronts (SKINS.fronts in src/ui/skins.js) */
.f-classic{--c-bg:#fff;--c-ink:#1b2033;--c-edge:#d9dde8;--c-textbg:#f1f3f8}   /* the default: a white face, so pictures on white blend in */
.f-neon{--c-bg:#07070e;--c-ink:#fff;--c-edge:var(--tc);--c-textbg:rgba(255,255,255,.05);box-shadow:0 0 .9em color-mix(in srgb,var(--tc) 55%,transparent),0 .4em 1em rgba(0,0,0,.4)}
.f-neon .ctitle{color:var(--tc);text-shadow:0 0 .5em color-mix(in srgb,var(--tc) 60%,transparent)}
.f-paper{--c-bg:linear-gradient(160deg,#fcf8ef,#ece2cc);--c-ink:#211e18;--c-edge:#d4c7aa;--c-textbg:rgba(60,40,0,.06)}
.f-tactical{--c-bg:linear-gradient(160deg,#323a2c,#20261d);--c-ink:#e8ecd9;--c-edge:#5b6650;--c-textbg:rgba(0,0,0,.22)}
.f-tactical .ctag,.f-tactical .cicon{filter:saturate(.55) brightness(.95)}
/* a back */
.card.back{background:#0e1424;border-color:rgba(255,255,255,.28)}
.cback{position:absolute;inset:0;background-size:cover;background-position:center}
/* sizes */
.card.big{--cw:var(--cw-big)}.card.mid{--cw:var(--cw-mid)}.card.mini{--cw:var(--cw-mini)}.card.huge{--cw:min(20rem,78vw,calc((100dvh - 9rem)/1.4))}
.card.enter{animation:cardIn .45s cubic-bezier(.2,.9,.3,1.2)}
@keyframes cardIn{from{transform:translateY(-.8rem) scale(.88);opacity:0}}
[data-act="zoom"]{cursor:zoom-in}

/* ---------- home ---------- */
/* the main menu: the choices are cards fanned like a hand; a drawer opens under the one you pick */
.home{position:relative;min-height:100dvh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.3rem;padding:2rem 1rem;overflow:hidden}
.home::before{content:"";position:absolute;inset:0;pointer-events:none;background-image:radial-gradient(rgba(255,255,255,.07) 1px,transparent 1.5px);background-size:1.6rem 1.6rem;
  mask-image:radial-gradient(60% 60% at 50% 45%,#000,transparent)}
.home>*{position:relative}
.brand{text-align:center;animation:sheetIn .5s ease-out both}
/* the menu's title glitches for a split second every few seconds: horizontal slices jump sideways with a red and a teal
   ghost behind them, then it snaps back. The ghosts are the <i> copies; still with reduced motion (opacity 0) */
.brand .logo{position:relative;display:inline-block;animation:gShake 6s infinite}
.logo i{position:absolute;left:0;top:0;width:100%;font-style:normal;color:#fff;opacity:0;pointer-events:none;animation:gSlice 6s infinite}
.logo i.r{color:var(--accent);animation-delay:.06s}
.logo i.b{color:var(--accent2)}
@keyframes gSlice{0%,9%,19%,100%{opacity:0;clip-path:inset(0 0 100% 0);transform:none}11%{opacity:.9;clip-path:inset(8% 0 62% 0);transform:translateX(-.16em)}14%{opacity:.9;clip-path:inset(48% 0 22% 0);transform:translateX(.16em)}17%{opacity:.9;clip-path:inset(72% 0 4% 0);transform:translateX(-.1em)}}
@keyframes gShake{0%,10%,19%,100%{transform:none}12%{transform:translateX(.05em)}15%{transform:translateX(-.05em)}}
.home.settled .brand .logo,.home.settled .logo i{animation-delay:-2s}   /* a redraw lands mid-quiet, not on a glitch */
.home.settled .logo i.r{animation-delay:-1.94s}
.brand .tag{all:unset;display:block;color:var(--muted);margin-top:.5rem;font-size:1.05rem}
.brand.small .logo{font-size:2.2rem}
.home-name{width:auto;min-width:17rem;align-items:center;animation:sheetIn .5s .1s ease-out both}
.home-name>span{font:700 .72rem var(--body);letter-spacing:.12em;text-transform:uppercase;color:var(--accent2);white-space:nowrap}
.name-wrap{position:relative;width:100%}
.home-name input{width:100%;text-align:center;font:600 1.1rem var(--body);padding:.7rem 2.4rem .7rem 1rem;background:#141c33;border:1px solid #3b4a78;transition:border-color .15s,box-shadow .15s}
.home-name input::placeholder{color:#6f7ba0;font-weight:500}
.home-name input:hover{border-color:var(--accent2)}
.home-name input:focus,.home-name input:focus-visible{outline:none;border-color:var(--accent2);box-shadow:0 0 0 .22rem rgba(25,195,177,.25),0 0 1.2rem rgba(25,195,177,.2)}
.name-pen{position:absolute;right:.8rem;top:50%;transform:translateY(-50%);color:var(--muted);pointer-events:none;transition:color .15s}
.name-wrap:hover .name-pen,.home-name input:focus~.name-pen{color:var(--accent2)}
.menu-fan{display:flex;align-items:flex-end;justify-content:center;gap:1.1rem;padding:1.4rem .5rem .6rem;perspective:60rem}
/* each card sits in a slot that carries the fan rotation and the deal-in, and is what the pointer hovers: it never
   moves, so the card inside can lift and tilt freely without the hover flickering off and on at its edges */
.menu-slot{--r:calc((var(--i) - 1)*9deg);transform-origin:50% 115%;transform:rotate(var(--r)) translateY(calc(abs(var(--i) - 1)*.9rem));
  animation:dealIn .55s calc(.15s + var(--i)*.08s) cubic-bezier(.2,.9,.3,1.1) both}
.menu-slot:hover,.menu-slot.picked,.menu-slot:focus-within{z-index:2}
@keyframes dealIn{from{transform:translateY(3rem) rotate(var(--r)) scale(.9);opacity:0}}
.home.settled .brand,.home.settled .home-name,.home.settled .menu-slot{animation:none}
.menu-card{--cw:11rem;cursor:pointer;transform-origin:50% 50%;transition:transform .22s cubic-bezier(.2,.9,.3,1.15),box-shadow .25s}
/* on hover the card lifts, straightens, tilts toward the pointer (--rx/--ry from ui.js, on the slot) and a sheen follows it;
   its picture floats up */
.menu-card::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .25s;
  background:radial-gradient(circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.45),rgba(255,255,255,.08) 38%,transparent 60%)}
.menu-slot:hover .menu-card::after{opacity:1}
.menu-card .cart img{transition:transform .3s cubic-bezier(.2,.9,.3,1.3)}
.menu-slot:hover .cart img{transform:translateY(-.3em) scale(1.1)}
.menu-slot:hover .menu-card,.menu-slot.picked .menu-card,.menu-card:focus-visible{transform:rotate(calc(var(--r)*-1)) translateY(-1.1rem) scale(1.06) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));
  box-shadow:0 1.4rem 2.4rem rgba(0,0,0,.55),0 0 1.6rem color-mix(in srgb,var(--tc) 55%,transparent)}
.menu-slot.picked .menu-card,.menu-card:focus-visible{box-shadow:0 1.4rem 2.4rem rgba(0,0,0,.55),0 0 0 .2em var(--tc),0 0 1.6rem color-mix(in srgb,var(--tc) 55%,transparent);outline:none}
.menu-card .ctext{min-height:3.6em}
/* the guide card's picture: three Gun Buddies fanned like a small hand, the middle one raised in front, on a gold glow */
.cart.buddies{position:relative;background:radial-gradient(circle at 50% 60%,rgba(245,184,61,.28),transparent 62%);overflow:visible}
.cart.buddies img{position:absolute;width:58%;height:auto;left:50%;bottom:4%;object-fit:contain;transform:var(--t);transition:transform .3s cubic-bezier(.2,.9,.3,1.3);filter:drop-shadow(0 .3em .5em rgba(0,0,0,.35))}
.cart.buddies .b0{--t:translateX(-104%) translateY(6%) rotate(-14deg) scale(.86);z-index:1}
.cart.buddies .b1{--t:translateX(-50%) translateY(-8%) scale(1.1);z-index:3}
.cart.buddies .b2{--t:translateX(4%) translateY(6%) rotate(14deg) scale(.86);z-index:2}
.menu-slot:hover .cart.buddies .b0{transform:var(--t) translateY(-.25em) rotate(-4deg)}
.menu-slot:hover .cart.buddies .b1{transform:var(--t) translateY(-.4em) scale(1.06)}
.menu-slot:hover .cart.buddies .b2{transform:var(--t) translateY(-.25em) rotate(4deg)}
.menu-drawer{width:min(34rem,100%);padding:1rem 1.2rem;border:1px solid color-mix(in srgb,var(--tc) 45%,transparent);border-radius:1rem;background:rgba(21,29,51,.9);
  display:flex;flex-direction:column;gap:.8rem;align-items:center;text-align:center;box-shadow:0 .6rem 1.6rem rgba(0,0,0,.35);animation:sheetIn .25s ease-out}
.menu-drawer h3{font-size:1.05rem;margin:0;color:var(--tc)}
.drawer-row{display:flex;align-items:center;gap:.8rem;flex-wrap:wrap;justify-content:center}
.join{display:flex;gap:.5rem}
.join input{text-transform:uppercase;letter-spacing:.3em;font:700 1.05rem var(--head);text-align:center;width:6.5rem}
.pills{display:flex;gap:.3rem}
.pill-btn{width:2.3rem;height:2.3rem;border-radius:.6rem;border:1px solid var(--line);background:#0e1527;color:var(--ink);font:700 1rem var(--head);cursor:pointer}
.pill-btn.on{background:var(--accent2);border-color:var(--accent2);color:#002420}
.menu-resume{display:flex;gap:.6rem;flex-wrap:wrap;justify-content:center}

/* ---------- lobby ---------- */
.lobby{min-height:100dvh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.2rem;padding:2rem 1rem}
.lobby .panel{width:min(34rem,100%);display:flex;flex-direction:column;gap:1rem}
.room-code{display:flex;align-items:center;gap:.8rem;flex-wrap:wrap}
.room-code span{color:var(--muted)}
.room-code b{font:700 2.2rem var(--head);letter-spacing:.3em;color:var(--gold)}
.seats{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.45rem}
.seats li{display:flex;align-items:center;gap:.6rem;padding:.45rem .6rem;border:1px solid var(--line);border-radius:.7rem;background:rgba(0,0,0,.15)}
.seats li .card{--cw:1.9rem;border-radius:.25rem}
.seats li .nm{font-weight:600;flex:1}
.seats li.me{border-color:var(--accent2)}
.seats li.empty{color:var(--muted);border-style:dashed;justify-content:center;min-height:3.2rem}
.lobby-actions,.lobby-foot{display:flex;gap:.6rem;flex-wrap:wrap;align-items:center}
.lobby-foot{justify-content:flex-end;border-top:1px solid var(--line);padding-top:.8rem}

/* ---------- the table ---------- */
.game{height:100dvh;display:grid;grid-template-columns:minmax(0,1fr) 17rem;grid-template-rows:auto auto minmax(0,1fr) auto;
  grid-template-areas:"top top" "opps log" "table log" "me me"}
.top{grid-area:top;display:flex;align-items:center;gap:1rem;padding:max(.55rem,env(safe-area-inset-top)) max(1rem,env(safe-area-inset-right)) .55rem max(1rem,env(safe-area-inset-left));border-bottom:1px solid var(--line);background:rgba(11,16,32,.8);flex-wrap:wrap}
.turninfo{font-size:.95rem}
.tools{display:flex;gap:.35rem;align-items:center;margin-left:auto}
.room-tag{font:700 .8rem var(--head);letter-spacing:.2em;color:var(--gold);padding:0 .3rem}
.timer{font:700 .85rem var(--head);padding:.12rem .45rem;border-radius:.35rem;background:#26314d;margin-left:.3rem}
.timer.low{background:var(--accent);animation:pulse 1s infinite}
@keyframes pulse{50%{opacity:.6}}

/* the other players: a panel with a header, two players to a row. Each: their initials in their
   seat colour, #seat and name, what they're doing, their hand as one card back with the count on it, then their field */
.opps{grid-area:opps;margin:.55rem 1rem .2rem;padding:.7rem .8rem .8rem;border:1px solid var(--line);border-radius:1.1rem;background:linear-gradient(180deg,rgba(21,29,51,.92),rgba(13,19,36,.96))}
.opps-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:.6rem;font:700 1rem var(--head);letter-spacing:.04em;text-transform:uppercase}
.opps-turn{font:600 .7rem var(--body);letter-spacing:.14em;color:var(--muted)}
.opps-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.6rem .7rem}
.opp{--pc:var(--line);min-width:0;background:rgba(8,12,24,.55);border:1px solid var(--pc);border-radius:.9rem;padding:.6rem .7rem .65rem;display:flex;flex-direction:column;gap:.4rem;transition:border-color .2s,box-shadow .2s}
.seat-0{--pc:var(--seat0)}.seat-1{--pc:var(--seat1)}.seat-2{--pc:var(--seat2)}.seat-3{--pc:var(--seat3)}.seat-4{--pc:var(--seat4)}.seat-5{--pc:var(--seat5)}
/* whose turn it is: their name turns red. The winner gets a gold ring outside their own colour, which stays */
.opp.turn .opp-h .nm{color:var(--accent)}
.opp.won{box-shadow:0 0 0 2px var(--bg),0 0 0 3px var(--gold),0 0 1.6rem rgba(245,184,61,.4)}
/* the name bar across the top: initials circle, #seat and name, tags, the status as a pill on the right */
.opp-bar{display:flex;align-items:center;gap:.6rem;padding-bottom:.5rem;border-bottom:1px solid var(--line)}
.opp-av{flex-shrink:0;width:2.3rem;height:2.3rem;border-radius:50%;display:flex;align-items:center;justify-content:center;font:700 .8rem var(--head);
  background:color-mix(in srgb,var(--pc) 28%,#151d33);color:color-mix(in srgb,var(--pc) 70%,#fff);border:1px solid color-mix(in srgb,var(--pc) 60%,transparent)}
.opp-h{display:flex;align-items:center;gap:.35rem;min-width:0;flex:1}
.opp-seat{font:700 .72rem var(--head);color:var(--muted)}
.opp-h .nm{font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.opp.acting .opp-h::after{content:"";width:.5rem;height:.5rem;border-radius:50%;background:var(--accent2);animation:pulse 1s infinite}
.opp-status{flex-shrink:0;font:700 .62rem var(--body);text-transform:uppercase;letter-spacing:.12em;padding:.28rem .6rem;border-radius:2rem;background:#26314d;color:#c6cee6}
.opp-status.on{background:#4ade80;color:#052e16}
.opp-status.away{background:#5a2330;color:#ffb3ba}
.opp-status.won{background:var(--gold);color:#2a1a00}
/* whose turn it is: their avatar blinks for the whole turn */
.opp.turn .opp-av{animation:avBlink 1.1s ease-in-out infinite}
@keyframes avBlink{50%{opacity:.35;box-shadow:0 0 0 .2rem color-mix(in srgb,var(--pc) 45%,transparent)}}
/* under the bar: the hand as a card back with the count on it, then the field as spaced cards */
.opp-body{display:flex;gap:.8rem;align-items:flex-start}
.opp-hand{position:relative;flex-shrink:0;display:flex;flex-direction:column;align-items:center;gap:.25rem;align-self:center}
.opp-hand .card{--cw:4rem;border-radius:.45rem}
.opp-hand-n{position:absolute;left:0;right:0;top:0;height:calc(4rem*1.4);display:flex;align-items:center;justify-content:center;font:800 1.6rem var(--head);color:#fff;
  text-shadow:0 0 .4rem rgba(0,0,0,.95),0 0 .15rem #000;pointer-events:none}
.opp-hand small{font:600 .58rem var(--body);text-transform:uppercase;letter-spacing:.14em;color:var(--muted)}
.opp-field{flex:1;min-width:0;display:flex;flex-direction:column;gap:.3rem}
.opp-field-h{font:600 .64rem var(--body);text-transform:uppercase;letter-spacing:.14em;color:var(--muted)}
.opp .field-row{flex-wrap:nowrap;gap:.5rem;overflow-x:auto;padding:.15rem .1rem .3rem;min-height:0}   /* one line, side by side with a gap; more scroll */
.opp .field-row .card{--cw:var(--cw-field)}
.card.banned{box-shadow:0 0 0 .1em rgba(255,70,85,.55),0 .4em 1em rgba(0,0,0,.35);background:#fff3f4}   /* a Ban on a field */
/* an empty field: two dashed card-shaped slots where their cards will go, so the tile is as tall as one with cards */
.opp-empty{display:flex;gap:.5rem;align-items:flex-start}
.opp-empty .ghost{--cw:var(--cw-field);width:var(--cw);height:calc(var(--cw)*1.4);flex-shrink:0;border-radius:.6rem;border:.12rem dashed rgba(255,255,255,.18);background:rgba(255,255,255,.025);display:grid;place-items:center}
.opp-empty .ghost span{font:600 .62rem var(--body);text-transform:uppercase;letter-spacing:.14em;color:rgba(255,255,255,.25)}
.opp-empty .ghost.second{opacity:.55}
.card.wanted{box-shadow:0 0 0 .14em var(--gold),0 .4em 1em rgba(0,0,0,.35)}   /* a card a Winning Con on the table asks for */
.count{font:700 .78rem var(--head);background:#0b1020;border:1px solid var(--line);border-radius:1rem;padding:.08rem .45rem;margin-left:.45rem}
.field-row{display:flex;flex-wrap:wrap;gap:.4rem;align-items:flex-start;min-height:2rem}
.field-row.small .card{--cw:var(--cw-mini)}
.field-row .muted{font-size:.8rem;align-self:center}

/* one centered column: Winning Con and Rules, then the Draw and Discard piles halfway between Rules and your field, then
   your field at the bottom, just above your hand. The three spare rows (above Winning Con, above and below the piles)
   share the spare height equally */
.table{grid-area:table;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr) auto minmax(0,1fr) auto;gap:.6rem 1rem;padding:.5rem 1rem .4rem;overflow:auto;align-items:start}
/* the Draw & discard panel; inside, the gap leaves room for the deck's layers and the discard's tilt, so the piles never touch */
/* a pile and its button under it, clear of the deck's layers and the discard's tilted corners */
/* a physical stack: cards laid on top of each other in one card-sized spot */
.stack{position:relative;width:var(--cw-pile);height:calc(var(--cw-pile)*1.4)}
.stack>.card,.stack>.slot{--cw:var(--cw-pile);position:absolute;left:0;top:0}
.stack>.card{box-shadow:0 .35rem .9rem rgba(0,0,0,.45)}
.deck .under{transform:translate(calc(var(--i)*var(--cw-pile)*.04),calc(var(--i)*var(--cw-pile)*.04));filter:brightness(calc(1 - var(--i)*.1));box-shadow:0 0 0 .1rem rgba(255,255,255,.25)}
/* the discard is drawn a little bigger, so it matches the deck's footprint (the deck's layers make it look larger) */
.stack.discard{--cw-pile-d:calc(var(--cw-pile)*1.12);width:var(--cw-pile-d);height:calc(var(--cw-pile-d)*1.4)}
.discard>.card,.discard>.slot{--cw:var(--cw-pile-d)}
.discard>.card{transform:rotate(var(--r,0deg))}
.discard[data-act]{cursor:pointer}
.discard[data-act]:hover>.card:last-of-type{transform:rotate(var(--r,0deg)) translateY(-.3rem)}
/* the discard, empty: a washed-out card where the top discard will sit, with the note over it */
.disc-empty{position:absolute;inset:0}
.disc-empty .card{--cw:var(--cw-pile-d);opacity:.18;filter:grayscale(1);box-shadow:none}
.disc-empty span{position:absolute;inset:0;display:grid;place-items:center;padding:.5rem;text-align:center;font:600 .62rem var(--body);text-transform:uppercase;letter-spacing:.14em;color:rgba(255,255,255,.55)}
/* the deck's corner tag and each pile's count plate, laid over the top card */
.slot{width:var(--cw,6rem);height:calc(var(--cw,6rem)*1.4);border:2px dashed var(--line);border-radius:.8rem;display:flex;align-items:center;justify-content:center;text-align:center;color:var(--muted);font-size:.78rem;padding:.4rem}
.slot.big{--cw:var(--cw-big)}
.zone{background:rgba(255,255,255,.025);border:1px solid var(--line);border-radius:1rem;padding:.45rem .75rem .55rem;min-width:0}
.zone h4{text-align:center;margin-bottom:.35rem;font-size:.78rem;text-transform:uppercase;letter-spacing:.12em;color:var(--muted)}
/* the Winning Con box: no banner and no frame of its own; each row is its own panel with a subtle gold edge */
/* the Winning Con box's title is a gold banner across its top edge. The boxes clip with overflow:clip, not hidden: hidden would
   let the board's grid shrink them below their content on short screens, so they overlapped */
/* the Rules box: the same look in blue */
/* the Rules box: a panel with a subtle blue edge; the rules as a list on the left, the cards on the right */
.zone-rules{display:grid;grid-template-columns:minmax(14rem,17rem) minmax(0,1fr);gap:.9rem;align-items:stretch;padding:.8rem;border:1px solid rgba(62,166,255,.4);border-radius:1.1rem;
  background:linear-gradient(180deg,rgba(21,29,51,.92),rgba(13,19,36,.96));box-shadow:0 .4rem 1.4rem rgba(0,0,0,.3)}
.rb-head{display:flex;justify-content:space-between;align-items:center;gap:.6rem;margin-bottom:.55rem;font:700 .74rem var(--body);text-transform:uppercase;letter-spacing:.12em;color:var(--muted)}
/* the left column: the Winning Cons */
.rules-side{min-width:0;display:flex;flex-direction:column;background:rgba(8,12,24,.6);border:1px solid rgba(245,184,61,.4);border-radius:.9rem;padding:.7rem}
.rules-side .wc-rows{flex:1}
.rules-side .rb-head span{color:var(--gold)}
/* the right panel: the rule cards, or the rules as text; both are laid out in the same spot and the hidden one keeps its
   height, so the panel is as tall as the taller view and nothing jumps on the toggle */
.rules-main{min-width:0;background:rgba(8,12,24,.45);border:1px solid var(--line);border-radius:.9rem;padding:.7rem;display:flex;flex-direction:column}
.rb-toggle{display:flex;gap:.15rem;padding:.15rem;border-radius:2rem;background:#0b1020;border:1px solid var(--line)}
.rb-toggle button{font:700 .62rem var(--body);text-transform:uppercase;letter-spacing:.1em;padding:.3rem .7rem;border-radius:2rem;border:none;background:transparent;color:var(--muted);cursor:pointer}
.rb-toggle button.on{background:var(--t-action);color:#04203d}
.rb-toggle button:not(.on):hover{color:var(--ink)}
.rules-views{display:grid;flex:1}
.rules-views>*{grid-area:1/1;min-width:0}
.rules-views.show-cards .laws,.rules-views.show-text .rules-row{visibility:hidden;pointer-events:none}
.laws{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.4rem;align-self:start}
.law{--lc:#3ea6ff;display:flex;gap:.6rem;align-items:flex-start;padding:.5rem .6rem;border-radius:.6rem;background:rgba(255,255,255,.035);cursor:zoom-in}
.law:hover{background:rgba(255,255,255,.06)}
.law.tone-amber{--lc:#f5b83d}.law.tone-red{--lc:#ff6f61}.law.tone-cyan{--lc:#4cc9f0}.law.tone-base{--lc:#8a96b8}
.law-n{flex-shrink:0;width:1.7rem;height:1.7rem;border-radius:.4rem;display:flex;align-items:center;justify-content:center;font:700 .68rem var(--head);
  background:color-mix(in srgb,var(--lc) 85%,#000);color:#101423}
.law-body{flex:1;min-width:0}
.law-head{display:flex;justify-content:space-between;align-items:center;gap:.5rem}
.law-head b{font:700 .82rem var(--head);text-transform:uppercase;letter-spacing:.06em}
.law-tag{flex-shrink:0;font:700 .6rem var(--body);text-transform:uppercase;letter-spacing:.1em;padding:.15rem .4rem;border-radius:.3rem;
  background:color-mix(in srgb,var(--lc) 22%,transparent);color:var(--lc)}
.law p{margin:.2rem 0 0;font-size:.78rem;line-height:1.35;color:#c6cee6}
/* three cards to a row, each as wide as its column (at most --cw-rulecard-max); phones: one sideways-scrolling row */
.rules-row{container-type:inline-size;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.7rem;justify-items:center;align-self:start;align-content:start}
.rules-row .card.rulecard{--cw:min(calc((100cqw - 1.4rem)/3),var(--cw-rulecard-max,13rem))}
/* your field box: the same look in purple */
.zone-cards{display:flex;gap:.6rem;flex-wrap:wrap;align-items:flex-start;justify-content:safe center}

.log{grid-area:log;display:flex;flex-direction:column;min-height:0;border-left:1px solid var(--line);background:rgba(11,16,32,.55);padding:.7rem .8rem}
.log h4{font-size:.78rem;text-transform:uppercase;letter-spacing:.12em;color:var(--muted);display:flex;justify-content:space-between;align-items:center}
.log-btn{display:none}
/* wide screens: the log sidebar collapses; the Log button in the top bar brings it back */
.game.log-hidden{grid-template-columns:minmax(0,1fr);grid-template-areas:"top" "opps" "table" "me"}
.game.log-hidden .log{display:none}
.game.log-hidden .log-btn{display:inline-block}
.log-lines{flex:1;overflow-y:auto;font-size:.82rem;line-height:1.35;display:flex;flex-direction:column;gap:.3rem}
.log-lines p{margin:0;color:#c6cee6}
.log-lines p.turn{margin-top:.45rem;color:var(--ink);font-weight:700;font-family:var(--head);border-top:1px solid var(--line);padding-top:.4rem}
.log-lines p.ban{color:#ff8e98}.log-lines p.win{color:var(--gold);font-weight:700}.log-lines p.steal{color:#9fd4ff}

.me{grid-area:me;padding:.4rem max(1rem,env(safe-area-inset-right)) max(.7rem,env(safe-area-inset-bottom)) max(1rem,env(safe-area-inset-left))}
.hand-afk{font:600 .74rem var(--body);color:#ffcf8a;background:rgba(245,184,61,.12);border:1px solid rgba(245,184,61,.4);border-radius:.5rem;padding:.3rem .6rem}
/* your hand box: a header (title, count, hint), the cards in a row, and the action bar along the bottom */
.hand-box{background:linear-gradient(180deg,rgba(21,29,51,.92),rgba(13,19,36,.96));border:1px solid var(--line);border-radius:1.1rem;padding:.7rem 1rem .8rem;
  box-shadow:0 -.6rem 2rem rgba(0,0,0,.35);transition:border-color .2s,box-shadow .2s}
.me.turn .hand-box{border-color:rgba(255,70,85,.55);box-shadow:0 -.6rem 2rem rgba(0,0,0,.35),0 0 1.4rem rgba(255,70,85,.15)}
.me.won .hand-box{border-color:var(--gold)}
/* the Free moves button in the box's bottom-right corner (freeMovesHtml) and the menu that opens above it */
.hand-box{position:relative}
.free-moves{position:absolute;right:.8rem;bottom:.7rem;display:flex;flex-direction:column;align-items:flex-end;gap:.45rem;z-index:6}
.free-btn{display:flex;align-items:center;gap:.45rem;padding:.45rem .8rem .45rem .65rem;border-radius:2rem;border:none;background:var(--accent2);color:#002420;cursor:pointer;
  font:800 .74rem var(--body);text-transform:uppercase;letter-spacing:.08em;box-shadow:0 .4rem 1rem rgba(0,0,0,.45),0 0 0 .25rem rgba(25,195,177,.22);transition:background .15s,transform .1s,box-shadow .15s}
.free-btn:hover{background:#2fdac7;box-shadow:0 .4rem 1rem rgba(0,0,0,.45),0 0 0 .35rem rgba(25,195,177,.32)}
.free-btn:active{transform:translateY(1px)}
.free-btn svg{width:1.15rem;height:1.15rem}
.free-btn b{min-width:1.3rem;height:1.3rem;padding:0 .3rem;border-radius:1rem;background:var(--accent);color:#fff;box-shadow:0 0 0 .12rem rgba(0,36,32,.5);font:800 .72rem var(--head);display:grid;place-items:center}
.free-btn .caret{width:0;height:0;border-left:.3rem solid transparent;border-right:.3rem solid transparent;border-bottom:.38rem solid #002420;transition:transform .15s}
.free-moves.open .free-btn .caret{transform:rotate(180deg)}
.free-btn.spent{background:#26314d;color:#c6cee6;box-shadow:0 .3rem .8rem rgba(0,0,0,.4)}
.free-btn.spent b{background:#5a2330;color:#ffb3ba;box-shadow:none}.free-btn.spent .caret{border-bottom-color:#c6cee6}
.free-menu{display:flex;flex-direction:column;gap:.15rem;min-width:15rem;padding:.4rem;border-radius:.7rem;background:rgba(21,29,51,.98);border:1px solid var(--line);box-shadow:0 .6rem 1.4rem rgba(0,0,0,.5);animation:menuIn .15s ease-out}
@keyframes menuIn{from{opacity:0;transform:translateY(.3rem)}}
.free-menu-h{padding:.2rem .5rem .35rem;font:700 .6rem var(--body);text-transform:uppercase;letter-spacing:.14em;color:var(--muted)}
.free-item{display:flex;align-items:center;gap:.5rem;padding:.45rem .6rem;border-radius:.45rem;border:none;background:none;color:var(--ink);cursor:pointer;text-align:left;font:600 .8rem var(--body)}
.free-item:hover:not(:disabled){background:rgba(25,195,177,.15)}
.free-item svg{width:1.05rem;height:1.05rem;color:var(--accent2);flex-shrink:0}
.free-item small{margin-left:auto;padding-left:.8rem;font:600 .62rem var(--body);text-transform:uppercase;letter-spacing:.08em;color:var(--accent2);white-space:nowrap}
.free-item.used{opacity:.45;cursor:default}
.free-item.used svg,.free-item.used small{color:var(--muted)}
.hand-box.named .hand{padding-right:11rem}   /* keep the cards clear of the corner */
.hand-head{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.hand-head b{font:700 .9rem var(--head);text-transform:uppercase;letter-spacing:.12em}
.hand-sub{font:500 .74rem var(--body);color:var(--muted);text-transform:uppercase;letter-spacing:.08em}
.hand-hint{font:600 .72rem var(--body);color:var(--accent2);text-transform:uppercase;letter-spacing:.1em}
/* a card a Winning Con on the table asks for */
.goal-badge{position:absolute;bottom:calc(100% - .55rem);left:50%;transform:translateX(-50%);width:max-content;max-width:calc(100% - .4rem);text-align:center;line-height:1.2;z-index:3;font:700 .62rem var(--body);text-transform:uppercase;letter-spacing:.06em;
  padding:.25rem .55rem;border-radius:.5rem;background:var(--gold);color:#2a1a00;box-shadow:0 .25rem .7rem rgba(0,0,0,.4);pointer-events:none}
/* the tools on the right of the hand header: the hint, the moves the rules allow, End your turn; off your turn, whose turn */
.hand-tools{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;justify-content:flex-end}
.hand-wait{font:600 .78rem var(--body);color:var(--muted)}
.hand-wait b{color:var(--ink)}
.hb-btn{font:700 .72rem var(--body);text-transform:uppercase;letter-spacing:.06em;padding:.4rem .7rem;background:#16213a}
.hb-end{font:800 .8rem var(--head);text-transform:uppercase;letter-spacing:.08em;padding:.45rem .9rem;border-radius:.6rem;background:var(--accent);border-color:var(--accent);color:#fff}
.hb-end:hover:not(:disabled){background:#ff5c69;border-color:#ff5c69}
.zone-rules{grid-row:2}
/* your field block: a header, then the draw pile, your field (a drop zone for any card) and the discard pile */
.field-block{grid-row:4;border:1px solid var(--line);border-radius:1.1rem;padding:.7rem .8rem .8rem;background:linear-gradient(180deg,rgba(21,29,51,.92),rgba(13,19,36,.96));box-shadow:0 .4rem 1.4rem rgba(0,0,0,.3)}
.fb-head{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;padding:.5rem .8rem;margin-bottom:.7rem;border-radius:.7rem;background:rgba(255,255,255,.04)}
.fb-title{display:flex;align-items:center;gap:.7rem;flex-wrap:wrap}
.fb-title b{font:700 1rem var(--head);text-transform:uppercase;letter-spacing:.06em}
/* the dot before your name: grey off your turn, green and blinking on it */
.fb-dot{width:.62rem;height:.62rem;border-radius:50%;background:#3b4a78;flex-shrink:0;box-shadow:0 0 0 .15rem rgba(255,255,255,.06)}
.fb-dot.on{background:#4ade80;box-shadow:0 0 .5rem rgba(74,222,128,.7);animation:dotBlink 1.1s ease-in-out infinite}
@keyframes dotBlink{50%{opacity:.25;box-shadow:none}}
/* the turn's badges: Draw and Play, each what's left of its total; green once done */
.fb-badges{display:inline-flex;gap:.4rem;flex-wrap:wrap}
.fb-badge{display:inline-flex;align-items:baseline;gap:.3rem;font:700 .8rem var(--head);letter-spacing:.02em;padding:.18rem .55rem;border-radius:.4rem;background:rgba(167,123,255,.22);color:#e8ddff}
.fb-badge b{font:700 .62rem var(--body);text-transform:uppercase;letter-spacing:.12em;color:#d9c8ff}
.fb-badge small{font:600 .6rem var(--body);color:rgba(233,221,255,.6)}
.fb-badge.draw{background:rgba(25,195,177,.18);color:#d6fbf6}.fb-badge.draw b{color:#9eeee4}.fb-badge.draw small{color:rgba(214,251,246,.6)}
.fb-badge.done{background:rgba(74,222,128,.16);color:#c9f7d7}.fb-badge.done b{color:#8ee9a9}.fb-badge.done small{color:rgba(201,247,215,.55)}
.fb-next{font:600 .7rem var(--body);text-transform:uppercase;letter-spacing:.12em;color:var(--muted)}
.fb-next b{color:var(--pc,var(--gold));letter-spacing:.04em;text-transform:none;font-size:.85rem}
.fb-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:.8rem;align-items:stretch}
.fb-pile{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.3rem;padding:.7rem .9rem;border-radius:.9rem;background:rgba(8,12,24,.55);border:1px solid var(--line)}
/* room for the deck's layers (they step down and right) and the discard's tilt, so the stacks stay inside their boxes */
.fb-pile .stack.deck{margin:0 calc(var(--cw-pile)*.18) calc(var(--cw-pile)*.22) 0}
.fb-pile .stack.discard{margin:calc(var(--cw-pile)*.06) calc(var(--cw-pile)*.06) calc(var(--cw-pile)*.16)}
.fb-pile[data-act]{cursor:pointer}
.fb-pile[data-act]:hover{border-color:#3b4a78}
.fb-pile.can-press{border-color:rgba(25,195,177,.6)}
.fb-count{font:800 1.05rem var(--head);text-transform:uppercase;letter-spacing:.04em}
.fb-sub{font:600 .72rem var(--body);color:var(--accent2)}
.fb-zone{display:flex;align-items:center;justify-content:center;min-height:calc(var(--cw-pile)*1.4 + 3rem);padding:.8rem;border-radius:.9rem;background:rgba(8,12,24,.45);border:1px dashed rgba(167,123,255,.35)}
.fb-zone .field-row{justify-content:safe center;flex-wrap:wrap}
/* your field, empty: a lane per card type that lands here, in the type's colour, saying what it does */
.fb-empty{display:flex;gap:.8rem;align-items:stretch;justify-content:center;flex-wrap:wrap}
.fb-lane{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.35rem;width:11rem;padding:.9rem .6rem;border-radius:.7rem;text-align:center;
  border:.12rem dashed color-mix(in srgb,var(--tc) 45%,transparent);background:color-mix(in srgb,var(--tc) 6%,transparent)}
.fb-lane svg{width:1.6rem;height:1.6rem;color:var(--tc)}
.fb-lane b{font:700 .78rem var(--head);text-transform:uppercase;letter-spacing:.08em;color:var(--tc)}
.fb-lane span{font-size:.66rem;line-height:1.3;color:var(--muted)}
.zone-field .card,.fb-zone .card.mid{--cw:var(--cw-field)}   /* your field cards, big enough to read */
/* the Winning Con rows: the card, the condition, the victory threat; more than one stack */
/* the Winning Con entries: a compact row (card, title, the condition on one line) with the victory threat as its own
   slim box under it; three fit the column */
.wc-rows{display:flex;flex-direction:column;gap:.7rem}
.wc-ent{display:flex;flex-direction:column;gap:.3rem}
.wc-row{display:flex;align-items:center;gap:.6rem;padding:.5rem .6rem;border-radius:.7rem;background:rgba(21,29,51,.9);border:1px solid rgba(245,184,61,.4)}
.wc-row .card{--cw:3.4rem;flex-shrink:0}
.wc-row .card .ctext,.wc-row .card .cfoot{display:none}
.wc-main{min-width:0;display:flex;flex-direction:column;gap:.15rem}
/* a lone Winning Con: the card big enough to read, the title and condition on the row under it */
.wc-ent.solo .wc-row{flex-direction:column;align-items:center;text-align:center;gap:.6rem;padding:.7rem .6rem .6rem}
.wc-ent.solo .wc-row .card{--cw:10.5rem}   /* fits the column at its narrowest (14rem less the paddings) */
.wc-ent.solo .wc-row .card .ctext{display:block}
.wc-ent.solo .wc-row .card .cfoot{display:flex}
.wc-ent.solo .wc-main{width:100%;align-items:center;gap:.25rem}
.wc-ent.solo .wc-title{white-space:normal;font-size:1.1rem}
.wc-ent.solo .wc-text{white-space:normal;font-size:.8rem;line-height:1.35}
.wc-title{font:700 1rem/1.1 var(--head);letter-spacing:.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wc-text{font-size:.74rem;line-height:1.3;color:#c6cee6;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wc-need{color:var(--gold);font-weight:700}
.wc-threat{display:flex;flex-wrap:wrap;align-items:baseline;gap:.1rem .5rem;padding:.35rem .6rem .4rem;border-radius:.6rem;background:rgba(8,12,24,.8);border:1px solid var(--line);white-space:nowrap;overflow:hidden}
.wct-label{flex-basis:100%;font:600 .58rem var(--body);text-transform:uppercase;letter-spacing:.14em;color:var(--muted)}   /* its own line; the details below it */
.wct-who{font:700 .9rem var(--head);color:var(--pc,var(--ink))}
.wc-threat.you .wct-who{color:var(--gold)}
.wct-pct{font:600 .7rem var(--body);color:#e8ecff}
.wct-need{margin-left:auto;font:600 .66rem var(--body);color:var(--accent2);overflow:hidden;text-overflow:ellipsis}
.wc-threat.blocked .wct-need{color:#ff8e98}
/* no Winning Con in play: a dashed, card-shaped slot fills the column (the drop target) */
.wc-empty{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;padding:1rem .8rem;text-align:center;border:2px dashed rgba(245,184,61,.45);border-radius:.9rem;
  background:repeating-linear-gradient(135deg,rgba(245,184,61,.04) 0 .6rem,transparent .6rem 1.2rem)}
.wc-ghost{--cw:5.6rem;width:var(--cw);height:calc(var(--cw)*1.4);border-radius:.6rem;border:.12rem dashed rgba(245,184,61,.5);display:grid;place-items:center;background:rgba(245,184,61,.05)}
.wc-ghost img{width:62%;opacity:.5;pointer-events:none}
.wc-empty b{font:700 1rem var(--head);color:var(--gold)}
.wc-empty p{margin:0;font-size:.74rem;line-height:1.35;color:var(--muted)}
.zone-field .field-row{justify-content:safe center}
.hand{display:flex;gap:.9rem;justify-content:safe center;overflow-x:auto;overflow-y:visible;padding:1.9rem .4rem .5rem;scroll-snap-type:x proximity}
.hand-slot{position:relative;flex-shrink:0;scroll-snap-align:start}
.hand .card{transition:transform .16s,box-shadow .16s,opacity .16s;cursor:pointer}
.hand .card.playable{touch-action:pan-x}   /* on a card you can play, a sideways swipe scrolls the hand and any other drag picks it up; elsewhere the page scrolls */
.hand .card.playable{cursor:grab}
/* dragging a card: a copy follows the pointer, the card fades in the hand, the box that takes it lights up */
.drag-ghost{position:fixed;left:0;top:0;z-index:90;pointer-events:none;transform:translate(-50%,-50%) rotate(-4deg) scale(1.06);filter:drop-shadow(0 1rem 1.6rem rgba(0,0,0,.55))}
.drag-ghost .card{--cw:var(--cw-hand)}
body.dragging,body.dragging *{cursor:grabbing!important;user-select:none}
.hand .card.drag-src{opacity:.3;transform:none!important}
[data-drop].drop-ok{outline:2px dashed rgba(25,195,177,.8);outline-offset:4px;transition:outline-color .15s,background .15s}
[data-drop].drop-over{outline:3px solid var(--accent2);background-color:rgba(25,195,177,.12)}
.hand .card.playable:hover{transform:translateY(-.7rem);box-shadow:0 .8rem 1.6rem rgba(0,0,0,.5),0 0 0 .15em var(--accent2)}
.hand .card.playable{box-shadow:0 .4em 1em rgba(0,0,0,.35),0 0 0 .1em rgba(25,195,177,.55)}
.dots::after{content:"…";display:inline-block;animation:pulse 1.2s infinite}
.net-banner{position:fixed;left:50%;top:.8rem;transform:translateX(-50%);background:#5a2330;border:1px solid var(--accent);padding:.5rem 1rem;border-radius:.6rem;z-index:60;font-weight:600}

/* ---------- the modal ---------- */
.modal{position:fixed;inset:0;z-index:50;display:grid;grid-template-columns:minmax(0,1fr);place-items:center;padding:max(1rem,env(safe-area-inset-top)) max(1rem,env(safe-area-inset-right)) max(1rem,env(safe-area-inset-bottom)) max(1rem,env(safe-area-inset-left))}   /* the column never grows past the screen, so a wide choice wraps instead of sliding off */
.modal[hidden]{display:none}
.scrim{position:absolute;inset:0;background:rgba(5,8,16,.74);backdrop-filter:blur(3px)}
.sheet{position:relative;background:var(--panel);border:1px solid var(--line);border-radius:1.2rem;padding:1.2rem 1.4rem;width:max-content;max-width:min(54rem,100%);max-height:calc(100dvh - 2rem);overflow:auto;box-shadow:0 2rem 4rem rgba(0,0,0,.5);animation:sheetIn .2s ease-out}
@keyframes sheetIn{from{transform:translateY(.6rem);opacity:0}}
.sheet h2{font-size:1.35rem}
.sheet h3{font-size:.95rem;margin-top:1rem}
.sheet-foot{display:flex;gap:.6rem;justify-content:flex-end;align-items:center;margin-top:1.1rem;flex-wrap:wrap}
.question{font-size:1.02rem;color:#d5dcf2;max-width:36rem}
.prompt-card{display:flex;justify-content:center;margin:.4rem 0}
.choice-row{display:flex;gap:.6rem;overflow-x:auto;padding:.4rem .2rem .6rem}
.choice-row.wrap{flex-wrap:wrap;overflow:visible}
.choice-group h4{font-size:.85rem;color:var(--muted);margin:.6rem 0 .1rem}
.card-pick,.skin-pick,.hand-pick{all:unset;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:.35rem;border-radius:.9rem;padding:.3rem;transition:transform .12s,background .12s}
.card-pick:hover,.skin-pick:hover,.hand-pick:hover{transform:translateY(-.2rem);background:rgba(255,255,255,.04)}
.card-pick.picked .card,.skin-pick.picked .card{box-shadow:0 0 0 .2rem var(--accent2),0 .6rem 1.2rem rgba(0,0,0,.4)}
.card-pick.picked{transform:translateY(-.3rem)}
.skin-pick span{font-size:.8rem;color:var(--muted)}
.skin-pick.picked span{color:var(--ink);font-weight:600}
.hand-pick{flex-direction:row;padding:.6rem .8rem;border:1px dashed var(--line);font-size:.85rem}
.hand-pick .card{--cw:2.4rem}
.player-pick{display:flex;flex-direction:column;align-items:flex-start;gap:.15rem;min-width:9rem}
.player-pick small{color:var(--muted);font-weight:500}
.upload-face{display:flex!important;flex-direction:column;align-items:center;justify-content:center;font:700 2.2em var(--head);color:var(--muted);border:.15em dashed var(--line);border-radius:.6em;background:#0e1527!important}
.upload-face small{font:500 .38em var(--body);text-align:center;padding:0 .4em}
.zoom{display:flex;flex-direction:column;align-items:center;background:transparent;border:none;box-shadow:none;padding:0}
.zoom .sheet-foot{justify-content:center}
.name-form{display:flex;gap:.5rem}
.name-form input{flex:1}
.help{max-width:40rem;line-height:1.5}
.help p,.help li{color:#d5dcf2}
.over{text-align:center}
.over h2{font-size:2rem;color:var(--gold)}
.over-cards{display:flex;gap:1rem;align-items:center;justify-content:center;flex-wrap:wrap}
.over-cards .field-row{max-width:22rem;justify-content:center}

/* ---------- toasts ---------- */
#toasts{position:fixed;top:3.6rem;left:50%;transform:translateX(-50%);z-index:70;display:flex;flex-direction:column;align-items:center;gap:.4rem;pointer-events:none;width:min(30rem,calc(100% - 2rem))}
.toast{background:rgba(27,37,65,.96);border:1px solid var(--line);padding:.55rem 1rem;border-radius:.7rem;font-size:.9rem;box-shadow:0 .6rem 1.4rem rgba(0,0,0,.4);animation:sheetIn .2s ease-out;transition:opacity .4s,transform .4s;text-align:center}
.toast.out{opacity:0;transform:translateY(-.4rem)}
.toast.err{border-color:var(--accent);background:rgba(70,20,30,.96)}
.toast.ban{border-color:var(--accent)}
.toast.win{border-color:var(--gold);color:var(--gold);font-weight:700}
.toast.steal{border-color:var(--t-action)}

/* ---------- mid-size screens: the log becomes a drawer ---------- */
@media (max-width:1100px){
  .game{grid-template-columns:minmax(0,1fr);grid-template-areas:"top" "opps" "table" "me"}
  .log{display:none}
  .log-btn{display:inline-block}
  .game.log-open .log{display:flex;position:fixed;right:0;top:0;bottom:0;width:min(20rem,85vw);z-index:40;box-shadow:-1rem 0 2rem rgba(0,0,0,.5);background:var(--bg2)}
  .game.log-open .close-log{display:inline-block}
}
/* ---------- phones ---------- */
@media (max-width:760px){
  :root{--cw-hand:7.4rem;--cw-big:7.6rem;--cw-mid:5.2rem;--cw-mini:2.9rem;--cw-pile:5.47rem;--cw-field:5.6rem}
  html{font-size:15px}
  input,select,textarea{font-size:16px}   /* iOS zooms into any field under 16px */
  .opp-empty .ghost{--cw:3.4rem}.opp-empty .ghost span{display:none}.opp-empty .ghost.second{display:none}   /* a shorter tile for an empty field */
  .logo{font-size:3.2rem}
  .menu-fan{gap:0;padding-top:1rem}
  .menu-slot{margin:0 -.35rem;--r:calc((var(--i) - 1)*7deg)}
  .menu-card{--cw:6.9rem}
  .menu-card .ctext{display:none}
  .drawer-row{flex-direction:column}
  .game{height:auto;min-height:100dvh}
  .top{gap:.5rem;padding:.5rem .7rem;position:sticky;top:0;z-index:20;background:rgba(11,16,32,.97);backdrop-filter:blur(6px)}
  .top   .tools{margin-left:auto}
  .opps{margin:.5rem .7rem .2rem;padding:.6rem}
  .opps-grid{grid-template-columns:minmax(0,1fr);gap:.45rem}
  .opp-hand .card{--cw:3.2rem}
  .opp-hand-n{height:calc(3.2rem*1.4);font-size:1.3rem}
  .table{padding:.5rem .7rem .9rem;overflow:visible}
  .me{padding:.5rem .7rem 1rem}
  .hand-box{padding:.6rem .6rem .7rem}
  .zone-rules{grid-template-columns:minmax(0,1fr)}
  .fb-row{grid-template-columns:1fr 1fr}
  .fb-zone{grid-column:1/-1;order:-1}
  .fb-empty{flex-direction:column;gap:.5rem}
  .fb-lane{width:auto;flex-direction:row;text-align:left;padding:.55rem .7rem;gap:.6rem}
  .fb-lane svg{flex-shrink:0}
  .rules-row{display:flex;gap:.6rem;overflow-x:auto;padding-bottom:.3rem}
  .rules-row .card.rulecard{--cw:var(--cw-hand)}
  .hand-tools{width:100%;justify-content:center}
  .free-moves{position:static;align-items:center;margin-top:.3rem}
  .free-menu{min-width:0;width:100%}
  .hand-box.named .hand{padding-right:.4rem}
  .sheet{padding:1rem}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}