/* Gauntlet of Gods - stylesheet.
Split out of index.html: a single 365KB page with everything inline is both awkward to edit
and the exact shape heuristic virus scanners flag (no external references, long embedded
base64). External files also cache between loads. */
@font-face{ font-family:'BluuNext'; src:url('fonts/BluuNext-Bold.otf') format('opentype'); font-weight:700; font-display:swap; }
@font-face{ font-family:'ThestralNeue'; src:url('fonts/ThestralNeue-Bold.otf') format('opentype'); font-weight:700; font-display:swap; }
@font-face{ font-family:'MoltenDisplay'; src:url('fonts/Molten_Display.otf') format('opentype'); font-weight:400; font-display:swap; }
@font-face{ font-family:'Sunday Masthead'; src:url('fonts/SundayMasthead-Regular.otf') format('opentype'); font-weight:400; font-display:swap; }
@font-face{ font-family:'DM Sans'; src:url('fonts/DMSans-Bold.ttf') format('truetype'); font-weight:700; font-display:swap; }
/* THEME — edit these vars */
:root{
--bg:#0b0806; --felt:#1b1510; --felt2:#130d09;
--ink:#f0e7d6; --muted:#9d9079; --line:#3c3020;
--gold:#caa148; --accent:#6fa6b2; --danger:#bd3e27;
--p1:#7fb0bc; --p2:#d8a23a;
--ember:#d4622a; --bronze:#8a6a3a;
--card-r:10px;
--display:'BluuNext',serif;
--font:'ThestralNeue',system-ui,sans-serif;
--mono:'JetBrains Mono',ui-monospace,monospace;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{height:100%;margin:0;overflow:hidden;overscroll-behavior:none;}
body{
font-family:var(--font); color:var(--ink);
background:
radial-gradient(75% 45% at 50% -6%, rgba(190,72,30,.20), transparent 62%),
radial-gradient(120% 85% at 50% 2%, #251a11 0%, var(--bg) 58%),
var(--bg);
user-select:none; -webkit-user-select:none; touch-action:manipulation;
}
.app{display:flex; height:100%; }
/* main board column */
.main{flex:1; display:flex; flex-direction:column; padding:8px 12px; gap:4px; min-width:0;}
/* Gameboard art. */
.main{ position:relative; }
.main.has-board::before{ content:''; position:absolute; inset:0; z-index:0; pointer-events:none;
background-image:var(--boardimg); background-size:cover; background-position:center;
background-repeat:no-repeat; }
/* (banner: no longer rotated or repositioned — see SEAT MIRRORING below. */
.main > *{ position:relative; z-index:1; } /* keep gameplay above the board art */
.pinfo{display:flex; align-items:center; gap:12px; padding:2px 4px; font-size:13px;}
.pinfo .name{font-weight:900; letter-spacing:.5px; text-transform:uppercase; font-size:13px;}
.pinfo.p1 .name{color:var(--p1);} .pinfo.p2 .name{color:var(--p2);}
.life{font-family:var(--mono); font-weight:700; font-size:20px; display:flex; align-items:center; gap:6px;}
.life .heart{color:var(--danger);}
.pname{font-family:'Cinzel',serif; font-weight:700; font-size:19px; color:#e9d9b3; letter-spacing:.04em;
max-width:240px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
display:inline-flex; align-items:center; justify-content:center; min-height:34px; box-sizing:border-box;
padding:0 16px; border-radius:12px; line-height:1;
background:radial-gradient(120% 130% at 50% 50%, rgba(202,161,72,.08), transparent 70%), rgba(8,11,16,.62);
-webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px);
border:1px solid var(--line); box-shadow:0 6px 16px rgba(0,0,0,.5); text-shadow:0 1px 3px rgba(0,0,0,.8);}
.pill{font-family:var(--mono); font-size:11px; color:var(--muted); background:#0e1620; border:1px solid var(--line); padding:2px 8px; border-radius:999px;}
.turnflag{margin-left:auto; font-weight:700; font-size:12px; color:var(--gold);}
/* hand (OUTSIDE the play area) */
.handzone{border-radius:12px; padding:2px 6px; transition:background .15s, box-shadow .15s;}
/* TURN GLOW Whose turn it is has */
/* The glow lives on the whole DOCK — the full-width row holding your life, your hand and your */
.dock{position:relative;}
.dock.turn::before,
.dock.turn::after{ content:''; position:absolute; left:0; right:0; top:-14px; bottom:-14px;
pointer-events:none; z-index:0;
/* Feather both horizontal ends to nothing, so the glow dissolves well before it reaches */
/* Feather ALL edges to nothing (not just left/right): the radial ellipse fades the top, bottom */
-webkit-mask-image:radial-gradient(78% 78% at 50% 55%, #000 0%, transparent 62%);
mask-image:radial-gradient(78% 78% at 50% 55%, #000 0%, transparent 62%); }
/* Layer 1: the dancing light — two offset radial pools drifting on their own cycles */
.dock.turn::before{
background:
radial-gradient(46% 140% at 22% 50%, var(--tg-a) 0%, transparent 72%),
radial-gradient(44% 130% at 50% 50%, var(--tg-b) 0%, transparent 70%),
radial-gradient(46% 140% at 78% 50%, var(--tg-a) 0%, transparent 72%);
animation:turnDrift 6.5s ease-in-out infinite;
filter:blur(20px);}
/* Layer 2: the faint particle field — a few soft specks on a slow vertical drift. */
.dock.turn::after{
background-image:
radial-gradient(2px 2px at 6% 72%, var(--tg-p) 50%, transparent 51%),
radial-gradient(1.5px 1.5px at 14% 34%, var(--tg-p) 50%, transparent 51%),
radial-gradient(1px 1px at 23% 82%, var(--tg-p) 50%, transparent 51%),
radial-gradient(2.5px 2.5px at 33% 46%, var(--tg-p) 50%, transparent 51%),
radial-gradient(1px 1px at 41% 24%, var(--tg-p) 50%, transparent 51%),
radial-gradient(1.5px 1.5px at 52% 76%, var(--tg-p) 50%, transparent 51%),
radial-gradient(2px 2px at 63% 38%, var(--tg-p) 50%, transparent 51%),
radial-gradient(1px 1px at 71% 68%, var(--tg-p) 50%, transparent 51%),
radial-gradient(1.5px 1.5px at 82% 28%, var(--tg-p) 50%, transparent 51%),
radial-gradient(2px 2px at 90% 60%, var(--tg-p) 50%, transparent 51%),
radial-gradient(1px 1px at 96% 40%, var(--tg-p) 50%, transparent 51%);
animation:turnMotes 7s linear infinite;
opacity:.6;}
/* STRANDS: flowing vertical energy tendrils. */
/* SHALLOW ARC STRANDS: an SVG of a few wide, shallow arcs (a low dome across the dock) */
.dock .turnstrands{ position:absolute; left:0; right:0; top:-14px; bottom:-14px; z-index:0;
pointer-events:none; overflow:hidden; opacity:0; display:block; }
.dock.turn .turnstrands{ opacity:.9; } /* only visible on the active turn; always absolute so it never shifts layout */
/* Mask = two corner pools on whichever side is AWAY from the board (the outer edge). */
.app.seat0 .dock-bot.turn .turnstrands,
.app.seat1 .dock-top.turn .turnstrands{ /* visually BOTTOM dock -> pool low */
-webkit-mask-image:radial-gradient(44% 100% at 20% 116%, #000 20%, transparent 66%),
radial-gradient(44% 100% at 80% 116%, #000 20%, transparent 66%);
mask-image:radial-gradient(44% 100% at 20% 116%, #000 20%, transparent 66%),
radial-gradient(44% 100% at 80% 116%, #000 20%, transparent 66%); }
.app.seat0 .dock-top.turn .turnstrands,
.app.seat1 .dock-bot.turn .turnstrands{ /* visually TOP dock -> pool high */
-webkit-mask-image:radial-gradient(44% 100% at 20% -16%, #000 20%, transparent 66%),
radial-gradient(44% 100% at 80% -16%, #000 20%, transparent 66%);
mask-image:radial-gradient(44% 100% at 20% -16%, #000 20%, transparent 66%),
radial-gradient(44% 100% at 80% -16%, #000 20%, transparent 66%); }
.dock.turn .turnstrands svg{ position:absolute; inset:0; width:100%; height:100%; }
/* Top dock is at the TOP of the board, so its energy should mirror vertically — arc toward */
/* Vertical flip = bow toward the board. */
.app.seat0 .dock-top.turn .turnstrands svg,
.app.seat1 .dock-bot.turn .turnstrands svg{ transform:scaleY(-1); }
/* Horizontal flip = flow direction. */
.app.seat0 .dock-top.turn .turnstrands svg{ transform:scale(-1,-1); }
.app.seat1 .dock-bot.turn .turnstrands svg{ transform:scale(-1,-1); }
.app.seat1 .dock-top.turn .turnstrands svg{ transform:scaleX(-1); }
.app.seat0 .dock-bot.turn .turnstrands svg{ transform:none; }
/* (top-dock mask now handled by the seat-aware rules above) */
.dock.turn .turnstrands path{ fill:none; stroke:var(--tg-strand, rgba(255,214,120,.5));
stroke-linecap:round; filter:blur(2.1px); }
.dock.turn .turnstrands .a1{ stroke-width:2.4; opacity:.9; }
.dock.turn .turnstrands .a2{ stroke-width:1.8; opacity:.6; }
.dock.turn .turnstrands .a3{ stroke-width:2; opacity:.45; }
.dock.turn .turnstrands .a4{ stroke-width:1.6; opacity:.42; }
.dock.turn .turnstrands .a5{ stroke-width:1.4; opacity:.3; }
.dock > *:not(.turnstrands){ position:relative; z-index:1; } /* life, hand, buttons all above the glow (strands stay behind at z0) */
/* YOUR turn: gold, and a touch stronger — it's the one you must not miss. */
.dock.turn.self{ --tg-a:rgba(232,198,107,.34); --tg-b:rgba(202,161,72,.24); --tg-p:rgba(255,238,180,.65); --tg-strand:rgba(255,214,120,.5); }
/* THEIR turn: orange, dimmer — informative, not competing for attention. */
.dock.turn:not(.self){ --tg-a:rgba(138,110,235,.28); --tg-b:rgba(120,90,225,.2); --tg-p:rgba(200,180,255,.56); --tg-strand:rgba(170,130,245,.5); }
/* Drift mostly VERTICALLY and via scale — horizontal travel is what dragged the glow's edge */
@keyframes turnDrift{
0%,100%{ transform:translate3d(-1%,1%,0) scale(1); opacity:.82; }
33% { transform:translate3d(1%,-2%,0) scale(1.05); opacity:1; }
66% { transform:translate3d(0,2%,0) scale(.98); opacity:.8; }
}
@keyframes turnMotes{
0% { background-position:0 0,0 0,0 0,0 0,0 0,0 0; opacity:0; }
12% { opacity:.75; }
88% { opacity:.75; }
100%{ background-position:0 -26px,0 -34px,0 -22px,0 -40px,0 -28px,0 -36px; opacity:0; }
}
/* The life box gets the same treatment, so the cue reads even if you're looking at the score */
.life.big{ position:relative; }
.life.big.turnlit::before{ content:''; position:absolute; inset:-6px; border-radius:18px; z-index:0;
pointer-events:none; filter:blur(8px);
background:radial-gradient(70% 120% at 30% 55%, var(--tg-a) 0%, transparent 65%),
radial-gradient(60% 110% at 72% 45%, var(--tg-b) 0%, transparent 62%);
animation:turnDrift 5.5s ease-in-out infinite; }
.life.big.turnlit > *{ position:relative; z-index:1; }
.life.big.turnlit.self{ --tg-a:rgba(232,198,107,.37); --tg-b:rgba(202,161,72,.26); }
.life.big.turnlit:not(.self){ --tg-a:rgba(96,170,235,.29); --tg-b:rgba(120,190,245,.19); }
/* Volley target: the enemy life box takes the SAME .tgtmark treatment the enemy card gets (dark */
/* Volley target on the life box: mirror the ENEMY CARD exactly — same dark scrim, same glyph */
/* Volley target on the life box. */
.life.big.lifetarget{ cursor:pointer; }
.life.big.lifetarget > .lifenum,
.life.big.lifetarget > .lifenum{ opacity:.28; transition:opacity .15s; } /* dim number under the volley mark */
.life.big .volleylife{ position:absolute; inset:0; z-index:40; border-radius:16px;
display:flex; align-items:center; justify-content:center;
background:rgba(6,12,20,.6); pointer-events:none;
box-shadow:0 0 0 2px rgba(92,200,255,.95) inset, 0 0 22px rgba(92,200,255,.55);
animation:volleyLifePulse 1.1s ease-in-out infinite; }
.life.big .volleylife img{ width:50px; height:50px; object-fit:contain; filter:none;
filter:drop-shadow(0 0 8px rgba(92,200,255,.9)); }
.life.big .volleylife .g{ font-size:40px; line-height:1; color:#cdecff; text-shadow:0 0 10px rgba(92,200,255,.9); }
@keyframes volleyLifePulse{ 0%,100%{ box-shadow:0 0 0 2px rgba(92,200,255,.7) inset, 0 0 16px rgba(92,200,255,.4); }
50%{ box-shadow:0 0 0 2px rgba(92,200,255,1) inset, 0 0 30px rgba(92,200,255,.75); } }
/* Respect a reduced-motion preference: keep the colour cue, drop the dancing. */
@media (prefers-reduced-motion: reduce){
.dock.turn::before,.dock.turn::after,.life.big.turnlit::before{ animation:none; }
}
.hand{display:flex; gap:8px; padding:4px 2px; min-height:187px; align-items:center; overflow:visible;}
/* Arched hand: --rest carries each card's fan transform. */
.hand .card.inhand{ transform:var(--rest, none); transform-origin:50% 90%;
transition:transform .22s ease-out; will-change:transform; }
.hand .card.inhand.lifts{
--lift:0px; --liftScale:1;
transform:translateY(calc(var(--rest-rise, 0px) - var(--lift))) rotate(var(--rest-rot, 0deg)) scale(var(--liftScale));
transition:transform .12s ease-out; }
/* Crowded hand (6+ cards): overlap so the row never grows wider than its dock slot. */
.hand.crowded{gap:0; overflow:visible;}
.hand.crowded .card{margin-left:calc(-1 * var(--ov, 0px));}
.hand.crowded .card:first-child{margin-left:0;}
.hand.dim{opacity:1; filter:grayscale(.8) brightness(.55);}
.hand .empty{color:var(--muted); font-size:12px; font-family:var(--mono);}
/* PLAY AREA: deck | 2x4 grid | discard */
.playarea{flex:1; position:relative; display:flex; align-items:stretch; gap:12px; min-height:0;
border:1px solid var(--line); border-radius:16px; padding:12px;
background:
radial-gradient(120% 130% at 50% 50%, rgba(70,194,168,.05), transparent 70%),
repeating-linear-gradient(45deg, rgba(255,255,255,.012) 0 12px, transparent 12px 24px),
var(--felt2);
}
.grid{flex:1; position:relative; display:grid; grid-template-columns:repeat(4,1fr); grid-template-rows:1fr 1fr; gap:10px; min-height:0;}
/* Board tilt — always on (body.tilt is added at boot). A shallow tabletop. */
body.tilt .playarea{ transform:perspective(1500px) rotateX(var(--tilt, 18deg)) translateY(var(--tilt-shift, -34px)); transform-origin:50% 100%; transition:transform .3s ease; }
.grid .midline{position:absolute; left:-4px; right:-4px; top:50%; height:0;
border-top:1.5px dashed rgba(232,198,107,.4); transform:translateY(-0.5px); pointer-events:none;}
/* AFK rope A glowing line along */
/* "Opponent is deciding" banner: fades in over the opponent's board row whenever the game */
#oppthinking{ position:absolute; top:22%; left:50%; transform:translate(-50%,-6px);
z-index:60; pointer-events:none; display:flex; align-items:center; gap:10px;
padding:8px 16px; border-radius:12px;
background:rgba(12,17,24,.82); border:1px solid rgba(150,190,240,.35);
box-shadow:0 6px 22px rgba(0,0,0,.5), 0 0 22px rgba(96,160,230,.16);
backdrop-filter:blur(3px);
opacity:0; transition:opacity .35s ease, transform .35s ease; }
#oppthinking.show{ opacity:1; transform:translate(-50%,0); }
#oppthinking .ot-label{ font-family:var(--mono); font-size:12px; letter-spacing:.06em;
text-transform:uppercase; color:#cfe0f2; }
#oppthinking .ot-dots{ display:flex; gap:4px; }
#oppthinking .ot-dots span{ width:6px; height:6px; border-radius:50%;
background:#7fb2ec; animation:otDot 1.2s ease-in-out infinite; }
#oppthinking .ot-dots span:nth-child(2){ animation-delay:.18s; }
#oppthinking .ot-dots span:nth-child(3){ animation-delay:.36s; }
@keyframes otDot{ 0%,100%{ opacity:.3; transform:scale(.8); }
50%{ opacity:1; transform:scale(1.15); } }
@media (prefers-reduced-motion: reduce){ #oppthinking .ot-dots span{ animation:none; opacity:.8; } }
/* Countdown chip beside the discard pile: fades in during the final stretch, same window */
.pile.discard{ position:relative; }
/* Countdown chip: sits at the RIGHT END OF THE MIDLINE — the empty space between the board */
/* Countdown chip: OUTSIDE the lanes, just past the grid's right edge on the midline — the mirror */
.clockchip{ position:absolute; top:50%; left:100%; margin-left:14px;
transform:translateY(-50%) scale(.9); transform-origin:left center; z-index:40;
font-family:var(--mono); font-size:17px; font-weight:800; letter-spacing:.04em; white-space:nowrap;
padding:6px 13px; border-radius:11px; color:#fce9c0;
background:rgba(10,14,20,.92); border:1px solid rgba(232,198,107,.55);
box-shadow:0 2px 12px rgba(0,0,0,.55);
opacity:0; pointer-events:none;
transition:opacity .3s ease, transform .3s ease; }
.clockchip.show{ opacity:1; transform:translateY(-50%) scale(1); }
.clockchip.mine{ color:#bfe0ff; border-color:rgba(106,174,235,.6); } /* your own clock: cooler */
.clockchip.warn{ color:#ffd9a0; border-color:rgba(232,150,70,.7); }
.clockchip.crit{ color:#ffc2c2; border-color:rgba(230,90,90,.85);
animation:clockCritPulse .7s ease-in-out infinite; }
@keyframes clockCritPulse{ 0%,100%{ box-shadow:0 0 6px rgba(230,80,80,.4); }
50%{ box-shadow:0 0 16px rgba(230,80,80,.9); } }
#rope{position:absolute; left:-4px; right:-4px; top:50%; height:3px; margin-top:-1.5px;
pointer-events:none; opacity:0; transition:opacity .4s ease; z-index:6; overflow:visible;}
#rope.show{opacity:1;}
#rope .rope-fill{position:absolute; inset:0; transform-origin:50% 50%;
transform:scaleX(1); border-radius:2px;
background:linear-gradient(90deg, transparent, var(--rope-c,#e8c66b) 12%, var(--rope-c,#e8c66b) 88%, transparent);
box-shadow:0 0 10px var(--rope-c,#e8c66b), 0 0 22px color-mix(in srgb, var(--rope-c,#e8c66b) 55%, transparent);}
/* Drains from both ends toward the middle — reads as "time closing in" and stays symmetric */
#rope.warn{--rope-c:#e0a03c;}
#rope.crit{--rope-c:#e0798c;}
#rope.crit .rope-fill{animation:ropePulse .7s ease-in-out infinite;}
@keyframes ropePulse{0%,100%{filter:brightness(1);}50%{filter:brightness(1.6);}}
/* Yours vs theirs: a subtle cue that it's YOUR clock running out. */
#rope.mine .rope-fill{box-shadow:0 0 12px var(--rope-c,#e8c66b), 0 0 28px var(--rope-c,#e8c66b);}
.lane{
border:1.5px solid var(--line); border-radius:12px;
display:flex; align-items:center; justify-content:center;
position:relative; min-height:0; transition:border-color .15s,background .15s;
background:rgba(255,255,255,.015);
}
.lane.p2{background:rgba(232,161,58,.05);}
.lane.p1{background:rgba(70,194,168,.05);}
.lane.empty.mine{border-style:dashed; border-color:#37506a;}
.lane .lanenum{position:absolute; top:4px; left:6px; font-family:var(--mono); font-size:10px; color:#3a4d60;}
.lane.drop{border-color:var(--gold)!important; border-style:solid!important; background:rgba(232,198,107,.14);}
.lane.resolving{border-color:var(--gold)!important; border-style:solid!important; box-shadow:0 0 16px rgba(232,198,107,.55); animation:pulse .7s ease-in-out infinite;}
.lane.flytarget{border-color:#5cc8ff!important; border-style:solid!important; background:rgba(92,200,255,.16); box-shadow:0 0 16px rgba(92,200,255,.55); cursor:pointer; animation:pulse .8s ease-in-out infinite;}
/* The flyer's own lane is the DECLINE option, so it gets the same solid glow and pulse as the
lanes it could move to — dashed and dim read as 'not selectable'. */
.lane.flycurrent{border-color:#5cc8ff!important; border-style:solid!important; background:rgba(92,200,255,.16); box-shadow:0 0 16px rgba(92,200,255,.55); cursor:pointer; animation:pulse .8s ease-in-out infinite;}
.lane .flylabel{position:absolute; bottom:5px; left:0; right:0; text-align:center; font-family:var(--mono); font-size:10px; font-weight:700; color:#bfe9ff; text-shadow:0 1px 2px rgba(0,0,0,.8); pointer-events:none;}
@keyframes pulse{0%,100%{box-shadow:0 0 8px rgba(232,198,107,.35);}50%{box-shadow:0 0 22px rgba(232,198,107,.8);}}
/* card */
.card{
width:110px; height:151px; border-radius:var(--card-r);
background:linear-gradient(160deg,#1b2735,#101a26);
border:1px solid #2a3a4b; position:relative;
box-shadow:0 4px 10px rgba(0,0,0,.45); cursor:grab;
transition:transform .12s ease, box-shadow .12s;
flex:none;
}
.card.board{cursor:pointer; position:relative; z-index:1;}
/* Guard stack: the covered card peeks out behind the Guard, offset back-and-up, so it's clear */
.lane .card.under-card{ position:absolute; z-index:0; inset:0; margin:auto;
transform:translate(14px,-16px) scale(.92); filter:brightness(.7);
transition:transform .16s ease, filter .16s ease; }
.lane .card.guard-top{ z-index:2; transition:transform .16s ease; }
/* Hover a Guard stack: nudge the two apart a bit more so you can eyeball each separately; dim */
.lane:hover .card.under-card{ transform:translate(26px,-26px) scale(.96); filter:brightness(.95); }
.lane .card.under-card:hover{ z-index:3; filter:brightness(1); transform:translate(30px,-30px) scale(1.02); }
.card .swatch{position:absolute; inset:0; border-radius:var(--card-r); opacity:.9;
background:linear-gradient(160deg, var(--cc) 0%, color-mix(in srgb, var(--cc) 40%, #0a121b) 100%);}
.card .frame{position:absolute; inset:3px; border-radius:7px; border:1px solid rgba(255,255,255,.18);
background:linear-gradient(180deg, rgba(8,12,18,.15), rgba(8,12,18,.6)); display:flex; flex-direction:column; overflow:hidden;}
.card .top{display:flex; justify-content:space-between; align-items:flex-start; padding:5px 6px 0;}
.card .pw{font-family:'Momo Trust Display','BluuNext',serif; font-weight:400; font-size:34px; line-height:1; color:#fff;
display:block; margin-top:1px; text-shadow:0 2px 4px rgba(0,0,0,.7);}
.card .meta{display:flex; flex-direction:column; align-items:flex-end; gap:4px;}
.card .col{width:13px; height:13px; border-radius:50%; border:1px solid rgba(255,255,255,.6);}
.card .hp{font-family:var(--mono); font-size:11px; font-weight:700; color:#ffe9b0;
background:rgba(6,10,15,.5); padding:0 4px; border-radius:5px;}
.card .mid{flex:1; position:relative;}
.card .dmg{position:absolute; left:4px; top:4px; display:flex; gap:2px; flex-wrap:wrap; justify-content:flex-start; max-width:54px; background:rgba(6,10,15,.5); padding:2px 3px; border-radius:6px;}
.card .dmg i{width:8px; height:8px; border-radius:50%; background:var(--danger); box-shadow:0 0 4px rgba(228,87,46,.85);}
.card .buff i{width:8px; height:8px; border-radius:50%; background:var(--accent); box-shadow:0 0 4px rgba(70,194,168,.85); margin:0 1px;}
.card .kw{margin-top:auto; min-height:28px; padding:3px 4px; font-size:10.5px; font-weight:900;
text-transform:uppercase; letter-spacing:.2px; line-height:1.05; text-align:center; color:#fff;
text-shadow:0 1px 2px rgba(0,0,0,.85); background:rgba(6,10,15,.5); border-top:1px solid rgba(255,255,255,.14);
display:flex; align-items:center; justify-content:center; word-break:break-word;}
.card.rot{transform:rotate(90deg);}
.card.flip{transform:rotate(180deg);}
/* Freeze thaw: a just-thawed card mounts at 180 (.unflip-start) then drops that class */
.lane .card.unflipping{ transition:transform .5s cubic-bezier(.2,.8,.25,1); }
.lane .card.unflip-start{ transform:rotate(180deg); }
.card.frozen{outline:2px solid #6cc6ff; box-shadow:0 0 14px rgba(108,198,255,.6);}
.card.frozen.thawing{ animation:thawglow .6s ease-out forwards; }
.card.frozen.thawing::after, .card.frozen.thawing .frostmark{ animation:thawfade .6s ease-out forwards; }
@keyframes thawglow{ from{ outline-color:#6cc6ff; box-shadow:0 0 14px rgba(108,198,255,.6); } to{ outline-color:rgba(108,198,255,0); box-shadow:0 0 14px rgba(108,198,255,0); } }
@keyframes thawfade{ from{ opacity:1; } to{ opacity:0; } }
.card.frozen::after{content:''; position:absolute; inset:0; border-radius:inherit; pointer-events:none; z-index:5;
/* per-card randomized JAGGED ice cracks (an inline SVG pane via --frost-cracks) */
background:var(--frost-cracks, rgba(120,200,255,.22));
background-size:cover;
background-blend-mode:screen;
/* the pane is real frosted glass: it blurs and cools the ART behind it */
backdrop-filter:blur(1.6px) saturate(.72) brightness(1.05);
-webkit-backdrop-filter:blur(1.6px) saturate(.72) brightness(1.05);
}
/* A sheen sliding across the frost — same family as Armored's, but distinctly SLOWER
(6.5s vs 2.6s) and BLURRIER (soft wide band + 4px blur), so it reads as light moving
over ice rather than polished metal. */
.card.frozen::before{content:''; position:absolute; inset:0; border-radius:inherit; pointer-events:none; z-index:6;
background:linear-gradient(115deg, transparent 26%, rgba(255,255,255,.35) 42%, rgba(255,255,255,.6) 50%, rgba(255,255,255,.35) 58%, transparent 74%);
background-size:260% 100%; background-repeat:no-repeat;
mix-blend-mode:screen; filter:blur(4px); opacity:.8;
animation:frostsheen 6.5s ease-in-out infinite;
}
@keyframes frostsheen{ 0%{ background-position:170% 0; } 62%{ background-position:-70% 0; } 100%{ background-position:-70% 0; } }
.card.frozen.thawing::before{ animation:none; opacity:0; }
.card .frostmark{position:absolute; inset:0; z-index:8; display:flex; align-items:center; justify-content:center; color:#e3f4ff; font-size:46px; line-height:1; filter:drop-shadow(0 0 7px rgba(108,198,255,.95)); pointer-events:none; overflow:hidden; border-radius:inherit;}
/* Cold mist: three soft blurred wisps rising off the ice, staggered so it never loops visibly. */
.card .frostmark .mist{position:absolute; left:20%; bottom:-14%; width:52%; height:34%;
border-radius:50%; background:radial-gradient(ellipse at 50% 60%, rgba(230,246,255,.5) 0%, rgba(200,235,255,.18) 45%, transparent 72%);
filter:blur(6px); opacity:0; mix-blend-mode:screen;}
.card .frostmark .m1{animation:mistrise 5.2s ease-in-out infinite;}
.card .frostmark .m2{left:2%; width:60%; animation:mistrise 6.8s ease-in-out 1.9s infinite;}
.card .frostmark .m3{left:42%; width:46%; animation:mistrise 6s ease-in-out 3.4s infinite;}
@keyframes mistrise{
0%{transform:translateY(0) translateX(0) scale(.8); opacity:0;}
18%{opacity:.5;}
60%{opacity:.28;}
100%{transform:translateY(-260%) translateX(12%) scale(1.25); opacity:0;}
}
@media (prefers-reduced-motion:reduce){ .card .frostmark .mist{animation:none; opacity:.2; transform:translateY(-80%);} }
.card .frostmark img{width:58%; height:58%; object-fit:contain; filter:drop-shadow(0 0 6px rgba(108,198,255,.9));}
.card.flip .frostmark{ transform:rotate(180deg) !important; } /* card flipped 180 -> spin the frost icon back upright */
/* The Support card itself: a thin same-color (purplish-pink) border that pulsates. */
.card.supporting{ animation:suppulse 1.4s ease-in-out infinite; }
@keyframes suppulse{
0%,100%{ box-shadow:0 0 0 1.5px rgba(255,107,214,.55), 0 0 8px rgba(200,107,255,.35); }
50%{ box-shadow:0 0 0 1.5px rgba(255,107,214,1), 0 0 16px rgba(255,107,214,.7); }
}
.card.supported{box-shadow:0 0 0 2px rgba(255,107,214,.8), 0 0 16px rgba(200,107,255,.55);}
/* Buff to power from Support — a glowing purplish-pink "+N" centered on the card. */
.card .supbadge{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); z-index:9; color:#fff;
font-family:'DM Sans',var(--mono); font-weight:900; font-size:30px; line-height:1;
text-shadow:0 0 12px rgba(255,90,210,1), 0 0 5px rgba(120,30,120,.95), 0 2px 3px rgba(0,0,0,.85);
pointer-events:none; animation:supwaver 1.5s ease-in-out infinite;}
.card .supbadge::before{content:'+';}
@keyframes supwaver{
0%,100%{ transform:translate(-50%,-50%) scale(1); opacity:.9; }
50%{ transform:translate(-50%,-54%) scale(1.12); opacity:1; }
}
/* the boosted card also gets a soft pink energy aura */
.card.supported .cv-pow{ color:#ffd0f4; text-shadow:0 0 10px rgba(255,90,210,.95); }
/* Support beam: animated via requestAnimationFrame in drawSupportBeams (undulating). */
#supportbeams{ pointer-events:none; }
/* Quick: a hand card eligible for the free bonus play jitters to draw the eye. */
.card.inhand.quick-ready{ animation:quickjitter .5s ease-in-out infinite; box-shadow:0 0 0 2px rgba(150,240,255,.8), 0 0 12px 2px rgba(120,220,255,.6); }
@keyframes quickjitter{
0%,100%{ transform:translateY(0) rotate(0deg); }
25%{ transform:translateY(-2px) rotate(-1.4deg); }
75%{ transform:translateY(-2px) rotate(1.4deg); }
}
/* Playable ambush cards JITTER (same tell as a Quick bonus card — motion reads much faster */
.card.inhand.ambush-ready{ box-shadow:0 0 0 2px #ffdf5e, 0 0 14px 3px rgba(255,210,70,.75); border-radius:8px;
animation:quickjitter .5s ease-in-out infinite; }
.card.ambush-ready:not(.inhand){ box-shadow:0 0 0 2px #ffdf5e, 0 0 14px 3px rgba(255,210,70,.75); border-radius:8px; animation:ambushpulse 1.15s ease-in-out infinite; }
@keyframes ambushpulse{ 0%,100%{ box-shadow:0 0 0 2px #ffdf5e, 0 0 10px 2px rgba(255,210,70,.55);} 50%{ box-shadow:0 0 0 2px #ffe985, 0 0 20px 6px rgba(255,215,80,.95);} }
/* Trapper: hand cards over the power cap can't be played this turn. */
.card.trapped{ filter:grayscale(.7) brightness(.62); cursor:not-allowed; }
.card .trapbadge{ position:absolute; inset:0; z-index:9; display:flex; align-items:center; justify-content:center; pointer-events:none; }
.card .trapbadge img{ width:56%; height:56%; object-fit:contain; filter:drop-shadow(0 2px 6px rgba(0,0,0,.8)); }
.card .ambushbadge{position:absolute; top:4px; left:4px; width:26%; height:26%; z-index:9; pointer-events:none; filter:drop-shadow(0 0 4px rgba(255,215,80,.95));}
.card .ambushbadge img{width:100%; height:100%; object-fit:contain;}
.card .ambushbadge{display:flex; align-items:center; justify-content:center; color:#ffdf5e; font-size:16px;}
.card.dragging{opacity:.3;}
.card.dead{filter:grayscale(1) brightness(.5);}
/* Any card gliding INTO the discard reads as spent, no matter which path sent it there (combat */
.flycard.dying, .flycard.dying .card{ filter:grayscale(1) brightness(.5); }
.card .facedown{position:absolute; inset:0; border-radius:var(--card-r);
background:var(--cardback, url(CardBack.png)) center/cover no-repeat, #16202c;
display:flex; align-items:center; justify-content:center; font-size:0; color:transparent;}
.card .guardstack{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; pointer-events:none; z-index:6; font-size:0; color:transparent;}
.card .guardstack::before{content:''; width:54%; height:54%; opacity:.5; background:var(--accent);
-webkit-mask:var(--guard-icon, url("data:image/svg+xml,")) center/contain no-repeat;
mask:var(--guard-icon, url("data:image/svg+xml,")) center/contain no-repeat;}
.card.guarded{box-shadow:0 0 0 2px rgba(70,194,168,.55), 0 0 17px rgba(70,194,168,.5), 0 4px 10px rgba(0,0,0,.5) !important;}
.card.used{box-shadow:0 0 0 2px rgba(228,87,46,.6), 0 0 17px rgba(228,87,46,.55), 0 4px 10px rgba(0,0,0,.5) !important;}
/* floating drag clone */
#ghost{position:fixed; pointer-events:none; z-index:9999; opacity:.92; transform:rotate(-4deg) scale(1.05); display:none;}
.volleypick{position:absolute; inset:0; display:flex; flex-direction:column; gap:4px; align-items:center; justify-content:center; background:rgba(6,10,15,.6); border-radius:var(--card-r); z-index:6;}
.volleypick button{font-size:11px; font-weight:800; padding:4px 9px; border-radius:8px; border:1px solid #3a5170; background:#16243a; color:#eaf2ff; cursor:pointer; white-space:nowrap;}
.volleypick button:hover{background:#21385a;}
.handzone.drophere{ box-shadow:0 0 0 2px rgba(70,194,168,.9) inset; background:rgba(70,194,168,.16); }
/* center control strip */
.center{display:flex; align-items:stretch; gap:10px; padding:4px 0;}
.pile{width:78px; display:flex; flex-direction:column; align-items:center; gap:3px;}
.pileface{width:60px; height:84px; border-radius:8px; border:1px solid var(--line);
display:flex; align-items:center; justify-content:center; font-family:var(--mono); font-weight:700; font-size:20px;}
.deck .pileface{background:repeating-linear-gradient(45deg,#16202c,#16202c 6px,#1d2a38 6px,#1d2a38 12px); color:var(--gold);}
.discard .pileface{background:#10171f; color:var(--muted);}
.pile .lbl{font-size:9px; color:var(--muted); font-family:var(--mono); text-transform:uppercase; letter-spacing:.5px;}
.controls{flex:1; display:flex; flex-direction:column; gap:6px; justify-content:center;}
/* IN-GAME BUTTONS. Same language as the lobby: an outlined rectangle over a blurred, low-alpha
fill, Cinzel small-caps, colour carried by the border and the text rather than a solid slab.
Each variant keeps its own hue — danger stays red, pass stays teal — just at a fraction of the
old strength, so the board reads first and the controls sit behind it. */
button{font-family:'Cinzel',serif; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
border-radius:2px; padding:11px 12px; font-size:12.5px; cursor:pointer;
color:#f0e2c4; background:rgba(202,161,72,.08);
-webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
border:1px solid rgba(202,161,72,.5);
transition:background .15s ease, border-color .15s ease, color .15s ease, transform .08s;}
/* AVAILABLE = LIT. Every action button carries the same weight when you can use it, whatever
its hue, so Declare Battle doesn't read as less available than Top Deck. Hover DARKENS for
tactile feedback (pressing something bright should push it down, not brighten it further), and
anything you can't use right now drops right back so the live options stand out at a glance. */
button:hover:not(:disabled){background:rgba(202,161,72,.30); border-color:rgba(232,198,107,1); color:#fff8e8;
filter:brightness(.88);}
button:active{transform:translateY(1px); filter:brightness(.8);}
button:disabled{opacity:.22; background:rgba(255,255,255,.015);
border-color:rgba(255,255,255,.10); color:var(--muted); cursor:default;
-webkit-backdrop-filter:none; backdrop-filter:none;}
button.alt{background:rgba(255,255,255,.03); border-color:rgba(255,255,255,.16); color:var(--muted);}
button.alt:hover:not(:disabled){background:rgba(255,255,255,.10); border-color:rgba(202,161,72,.8);
color:var(--ink); filter:none;}
/* Each variant keeps its hue, but at the SAME strength as the default, so nothing looks half-off
when it's actually available. */
button.go{background:rgba(224,80,110,.16); border-color:rgba(224,80,110,.75); color:#ffd2da;}
button.go:hover:not(:disabled){background:rgba(224,80,110,.30); border-color:rgba(255,140,165,1);
color:#fff; filter:brightness(.9);}
button.pass{background:rgba(70,194,168,.16); border-color:rgba(70,194,168,.7); color:#c6f4e9;}
button.pass:hover:not(:disabled){background:rgba(70,194,168,.30); border-color:rgba(130,235,210,1);
color:#f0fffb; filter:brightness(.9);}
.card.discardable{cursor:grab; outline:2px dashed #ff5c7a; box-shadow:0 0 14px rgba(255,92,122,.55);}
.card.discardable:hover{outline-color:#ff90a6; filter:brightness(1.06);}
.card.discardable:active{cursor:grabbing;}
/* Rage: a static red aura on the enraged card. */
.card.enraged{ box-shadow:inset 0 0 0 3px rgba(255,60,28,1), inset 0 0 26px 5px rgba(255,60,28,.7) !important; }
.card.cv.enraged{ box-shadow:none !important; }
.card.cv.enraged::after{ content:''; position:absolute; inset:0; z-index:9; pointer-events:none; border-radius:inherit; box-shadow:inset 0 0 0 3px rgba(255,60,28,1), inset 0 0 26px 5px rgba(255,60,28,.7); }
/* one-shot keyword impact flash (Blast/Burn/Explode/Charm…) */
.card .kwfx{position:absolute; inset:0; z-index:7; display:flex; align-items:center; justify-content:center; border-radius:inherit; pointer-events:none; opacity:0; animation:kwfxpop .6s ease-out forwards; animation-delay:var(--fxdelay,0s);}
.card .kwfx::before{content:''; position:absolute; inset:0; border-radius:inherit; background:var(--fxc,#ff4326); mix-blend-mode:screen; opacity:.55;}
.card .kwfx img{position:relative; width:54%; filter:drop-shadow(0 0 7px rgba(0,0,0,.7));}
.kwfx-red{--fxc:#ff4326;} .kwfx-orange{--fxc:#ff9020;} .kwfx-pink{--fxc:#ff5cc8;} .kwfx-gold{--fxc:#ffd24a;} .kwfx-green{--fxc:#3fdc72;}
.kwfx-blue{--fxc:#3a86e0;} .kwfx-teal{--fxc:#2affc0;} .kwfx-white{--fxc:#ffffff;} .kwfx-steel{--fxc:#9fb4c8;}
/* Reanimate: the card dissolves/rises IN as the ghostly green glow plays — starts low, faded */
.card.reanimate-in{ animation:reanimatein 1s ease-out both; }
@keyframes reanimatein{
0%{ opacity:0; transform:translateY(14px) scale(.97); filter:blur(4px) brightness(1.5) saturate(1.3) hue-rotate(-10deg); }
30%{ opacity:.5; filter:blur(2.5px) brightness(1.4) saturate(1.2); }
70%{ opacity:.9; transform:translateY(2px) scale(1); filter:blur(.6px) brightness(1.15); }
100%{ opacity:1; transform:translateY(0) scale(1); filter:none; }
}
/* Teleport: the card reforms out of scattered light — quick violet dissolve-in. */
.card.teleport-in{ animation:teleportin .6s cubic-bezier(.2,.8,.3,1) both; }
@keyframes teleportin{
0%{ opacity:0; transform:scale(1.12); filter:blur(6px) brightness(1.8) saturate(1.4) hue-rotate(18deg); }
40%{ opacity:.7; filter:blur(2px) brightness(1.4); }
100%{ opacity:1; transform:scale(1); filter:none; }
}
/* Summon: an angel landing — the card fades in and settles down from above. */
.card.summon-in{ animation:summonin .74s cubic-bezier(.2,.7,.25,1) both; }
@keyframes summonin{
0%{ opacity:0; transform:translateY(-40px) scale(1.02); filter:brightness(2) saturate(.7) drop-shadow(0 0 12px rgba(255,246,210,.9)); }
45%{ opacity:.85; filter:brightness(1.5) drop-shadow(0 0 10px rgba(255,246,210,.7)); }
100%{ opacity:1; transform:translateY(0) scale(1); filter:none; }
}
/* Armored: a brushed-chrome emboss while the card is upright (unspent). */
.card.armored{
box-shadow:
inset 0 2px 1px rgba(255,255,255,.55), /* top bevel highlight */
inset 0 -2px 2px rgba(20,28,38,.6), /* bottom bevel shadow */
inset 2px 0 1px rgba(230,238,246,.28),
inset -2px 0 2px rgba(30,40,52,.45),
0 0 0 1px rgba(150,165,182,.7), /* crisp metal rim */
0 0 10px 1px rgba(150,170,190,.35);
}
.card.armored::after{content:''; position:absolute; inset:0; border-radius:inherit; pointer-events:none; z-index:6;
/* curved chrome plate: bright band up top, mid-grey middle, dark toward the base */
background:linear-gradient(180deg,
rgba(238,244,250,.42) 0%,
rgba(198,210,224,.22) 22%,
rgba(150,164,182,.10) 46%,
rgba(120,134,152,.16) 66%,
rgba(52,64,80,.34) 100%);
mix-blend-mode:screen;
}
.card.armored::before{content:''; position:absolute; inset:0; border-radius:inherit; pointer-events:none; z-index:7; overflow:hidden;
background:linear-gradient(100deg, transparent 36%, rgba(226,236,248,.35) 46%, rgba(255,255,255,.92) 50%, rgba(226,236,248,.35) 54%, transparent 64%);
background-size:250% 100%; background-repeat:no-repeat;
mix-blend-mode:screen; animation:metalsheen 3.6s ease-in-out infinite;
}
@keyframes metalsheen{ 0%{ background-position:165% 0; } 62%{ background-position:-65% 0; } 100%{ background-position:-65% 0; } }
/* Armored posture: a ready Armored card sits rotated 90deg (braced behind its plate). */
.card.armored.armorbraced{ transform:rotate(90deg); transition:transform .5s cubic-bezier(.2,.8,.25,1); }
.card.armored.armorbraced.armor-break{ transform:rotate(0deg); }
/* Armor crack stage: thin bright fracture lines spider across the chrome, fading in fast. */
.card.armored.armor-crack::after{
background-image:
linear-gradient(58deg, transparent 47.4%, rgba(255,255,255,.9) 48%, transparent 48.6%),
linear-gradient(120deg, transparent 61.4%, rgba(230,242,255,.8) 62%, transparent 62.6%),
linear-gradient(20deg, transparent 33.4%, rgba(255,255,255,.75) 34%, transparent 34.6%),
linear-gradient(96deg, transparent 71.4%, rgba(230,242,255,.8) 72%, transparent 72.6%),
linear-gradient(150deg, transparent 41.4%, rgba(255,255,255,.7) 42%, transparent 42.6%),
linear-gradient(180deg, rgba(238,244,250,.42) 0%, rgba(150,164,182,.10) 46%, rgba(52,64,80,.34) 100%);
animation:armorcrackin .18s ease-out both;
}
@keyframes armorcrackin{ from{ opacity:.2; } to{ opacity:1; } }
/* Armor spent: the chrome shatters off — fade the plate, sheen, and metal rim out quickly */
.card.armored.armor-break{ animation:armorrimfade .5s ease-out forwards; }
.card.armored.armor-break::after{ animation:armorfade .45s ease-out forwards; }
.card.armored.armor-break::before{ animation:armorfade .4s ease-out forwards; }
@keyframes armorfade{ from{ opacity:1; } to{ opacity:0; } }
@keyframes armorrimfade{
0%{ box-shadow:0 0 0 1px rgba(150,165,182,.7), 0 0 10px 1px rgba(150,170,190,.35), inset 0 2px 1px rgba(255,255,255,.55), inset 0 -2px 2px rgba(20,28,38,.6); }
100%{ box-shadow:0 0 0 1px rgba(150,165,182,0), 0 0 10px 1px rgba(150,170,190,0), inset 0 2px 1px rgba(255,255,255,0), inset 0 -2px 2px rgba(20,28,38,0); }
}
/* Guard rip: a Taunt tears this Guard off the card it was shielding — a brief silvery jolt + */
.card.guard-rip{ animation:guardrip .4s ease-out; }
@keyframes guardrip{
0%{ box-shadow:0 0 0 2px rgba(200,220,240,.9), 0 0 18px 3px rgba(180,205,230,.7); filter:brightness(1.35); }
40%{ box-shadow:0 0 0 1px rgba(200,220,240,.5), 0 0 10px 2px rgba(180,205,230,.35); filter:brightness(1.12); }
100%{ box-shadow:0 0 0 0 rgba(200,220,240,0), 0 0 0 0 rgba(180,205,230,0); filter:none; }
}
.card.assassin-out{ animation:assassinout .16s ease-in both; }
@keyframes assassinout{
0%{ opacity:1; filter:none; }
100%{ opacity:0; filter:brightness(0) contrast(1.4); transform:scale(.96); }
}
.card.assassin-in{ animation:assassinin 1.1s ease-out both; }
@keyframes assassinin{
0%{ opacity:0; filter:brightness(0); transform:scale(.97); }
40%{ opacity:.35; filter:brightness(.35); }
100%{ opacity:1; filter:none; transform:scale(1); }
}
.card .kwfx.kwfx-slowfade{ animation:kwfxslow 1.6s ease-in-out forwards; }
@keyframes kwfxslow{0%{opacity:0; transform:scale(.9);} 30%{opacity:1; transform:scale(1);} 70%{opacity:1; transform:scale(1);} 100%{opacity:0; transform:scale(1.02);}}
/* Swarm death wash: each projectile that lands paints the doomed card in its own color */
.swarm-wash{ position:absolute; inset:0; z-index:22; border-radius:inherit; pointer-events:none;
background:var(--washc,#fff); mix-blend-mode:screen; opacity:0; animation:swarmwash .34s ease-out forwards; }
@keyframes swarmwash{ 0%{opacity:0;} 22%{opacity:.72;} 100%{opacity:0;} }
@keyframes kwfxpop{0%{opacity:0; transform:scale(.55);} 16%{opacity:1; transform:scale(1.1);} 55%{opacity:.9; transform:scale(1);} 100%{opacity:0; transform:scale(1.02);}}
/* Rage: an enraged card that survives a hit swells red, then SETTLES into a held edge glow */
.card .kwfx.kwfx-fire{--fxc:#ff3a1e; animation:rageswell 1s ease-out forwards;}
.card .kwfx.kwfx-fire::before{background:transparent;}
.card .kwfx.kwfx-fire img{animation:rageiconfade 1s ease-out forwards; transform:scale(1.1);}
@keyframes rageiconfade{0%{opacity:0;}20%{opacity:1;}70%{opacity:1;}100%{opacity:0;}}
@keyframes rageswell{
0%{opacity:0; transform:scale(.85);}
28%{opacity:1; transform:scale(1.16);}
60%{opacity:1; transform:scale(1.02);}
100%{opacity:.72; transform:scale(1);}}
/* Rage: a fast angry shudder that decays as the card "gets angry", then settles. */
.card.ragevibe{ animation:ragevibe .7s ease-out; }
@keyframes ragevibe{
0%{transform:translate(0,0) scale(var(--appscale,1));}
8%{transform:translate(-2.4px,1.2px) scale(var(--appscale,1));}
18%{transform:translate(2.4px,-1px) scale(var(--appscale,1));}
28%{transform:translate(-2px,-1.4px) scale(var(--appscale,1));}
40%{transform:translate(1.8px,1.2px) scale(var(--appscale,1));}
52%{transform:translate(-1.4px,0.8px) scale(var(--appscale,1));}
66%{transform:translate(1px,-0.6px) scale(var(--appscale,1));}
80%{transform:translate(-0.5px,0.3px) scale(var(--appscale,1));}
100%{transform:translate(0,0) scale(var(--appscale,1));}}
.card.attacking{z-index:5;}
.card.atk-up{ animation:atklungeup .44s cubic-bezier(.3,.85,.3,1); }
.card.atk-down{ animation:atklungedown .44s cubic-bezier(.3,.85,.3,1); }
@keyframes atklungeup{0%{translate:0 0;}30%{translate:0 -7px;}48%{translate:0 -24px;}100%{translate:0 0;}}
@keyframes atklungedown{0%{translate:0 0;}30%{translate:0 7px;}48%{translate:0 24px;}100%{translate:0 0;}}
.ambbadge{position:absolute; top:4px; left:4px; z-index:9; width:26px; height:26px; display:flex; align-items:center; justify-content:center; border-radius:50%; background:linear-gradient(#ffd97a,#e6a636); border:2px solid #7a571a; box-shadow:0 2px 7px rgba(0,0,0,.5); color:#1a0f04; font-size:14px; font-weight:900; pointer-events:none; animation:pulse 1.1s ease-in-out infinite;}
.ambbadge img{width:74%; height:74%; object-fit:contain; filter:brightness(0) drop-shadow(0 1px 1px rgba(255,255,255,.3));}
/* The Ambush button is only usable during the ambush window, but it must not appear */
/* Confirm buttons still need to shout, but within the same idiom — a brighter fill and a lit
border rather than a gold slab. */
button.full.amb{ background:rgba(232,198,107,.24) !important; color:#fff6e2 !important;
border:1px solid rgba(232,198,107,.95) !important; text-shadow:none !important;
animation:pulse 1.2s ease-in-out infinite; }
button.full.amb.swapped{ animation:none; }
.drawghost{box-shadow:0 10px 26px rgba(0,0,0,.5); border:1px solid #2c3e50;}
/* Available drag target while a card is being placed: a soft pulse that says "you may drag
here". Distinct from .drophere, which is the strong cue when the card is actually over it.
Clicking still only opens the viewer — discarding requires a drag. */
.pile.discard.droptarget .pileface{ box-shadow:0 0 0 2px rgba(255,92,122,.55) inset, 0 0 12px rgba(255,92,122,.3);
animation:discTargetPulse 1.6s ease-in-out infinite; }
.pile.discard.droptarget .lbl{ color:#ffb3c1; }
@keyframes discTargetPulse{
0%,100%{ box-shadow:0 0 0 2px rgba(255,92,122,.42) inset, 0 0 10px rgba(255,92,122,.22); }
50% { box-shadow:0 0 0 2px rgba(255,92,122,.85) inset, 0 0 20px rgba(255,92,122,.52); } }
/* Hovering it mid-drag overrides the pulse with the solid drop cue. */
.pile.discard.droptarget.drophere .pileface{ animation:none; }
.pile.discard.drophere .pileface{box-shadow:0 0 0 3px rgba(255,92,122,.95) inset, 0 0 18px rgba(255,92,122,.6); outline:2px solid rgba(255,92,122,.85);}
.pile.discard.drophere .lbl{color:#ff90a6;}
button.disc{background:#7c5cff; color:#fff;}
button.full{flex:1;}
button:disabled{opacity:1; cursor:not-allowed; filter:grayscale(.85) brightness(.5) contrast(.95);}
/* The banner lives between .playarea and .dock-bot in .main's flex column, so its height */
.banner{font-size:12px; font-family:var(--mono); color:var(--gold); min-height:16px; text-align:center;
position:absolute; left:0; right:0; bottom:2px; z-index:3; pointer-events:none;}
.banner.warn{color:var(--danger);}
/* side panel: log + reference */
.side{width:300px; background:transparent; border-left:none; display:flex; flex-direction:column;}
.side .head{padding:12px 14px 6px; }
.side .title{font-weight:900; letter-spacing:1px; font-size:16px;}
.side .title span{color:var(--gold);}
.tabs{display:flex; gap:6px; padding:14px 14px 8px;}
.tab{flex:1; text-align:center; padding:7px; font-size:12px; font-weight:700; border-radius:8px; background:#111a24; color:var(--muted); cursor:pointer;}
.tab.on{background:var(--gold); color:#0a121b;}
.panel{flex:1; overflow-y:auto; padding:6px 14px 14px; font-size:12px; line-height:1.45;}
/* Themed scrollbars for the scrolling panels — replaces the default block-white bar. */
.panel, .side, #deckstats .dscard, #discview .dvgrid, #modal .opts{ scrollbar-width:thin;
scrollbar-color:rgba(202,161,72,.5) transparent; }
.panel::-webkit-scrollbar, .side::-webkit-scrollbar, #deckstats .dscard::-webkit-scrollbar,
#discview .dvgrid::-webkit-scrollbar, #modal .opts::-webkit-scrollbar{ width:8px; height:8px; }
.panel::-webkit-scrollbar-track, .side::-webkit-scrollbar-track,
#deckstats .dscard::-webkit-scrollbar-track, #discview .dvgrid::-webkit-scrollbar-track,
#modal .opts::-webkit-scrollbar-track{ background:transparent; }
.panel::-webkit-scrollbar-thumb, .side::-webkit-scrollbar-thumb,
#deckstats .dscard::-webkit-scrollbar-thumb, #discview .dvgrid::-webkit-scrollbar-thumb,
#modal .opts::-webkit-scrollbar-thumb{ background:linear-gradient(rgba(202,161,72,.55), rgba(160,120,50,.45));
border-radius:6px; border:2px solid transparent; background-clip:padding-box; }
.panel::-webkit-scrollbar-thumb:hover, .side::-webkit-scrollbar-thumb:hover,
#deckstats .dscard::-webkit-scrollbar-thumb:hover, #discview .dvgrid::-webkit-scrollbar-thumb:hover,
#modal .opts::-webkit-scrollbar-thumb:hover{ background:linear-gradient(rgba(232,198,107,.75), rgba(190,150,70,.6));
background-clip:padding-box; }
.panel::-webkit-scrollbar-corner, .side::-webkit-scrollbar-corner{ background:transparent; }
#log .e{padding:4px 0; border-bottom:1px solid #131d27; color:#c5d3df; font-family:var(--mono); font-size:11px;}
#log .e.turn{color:var(--gold); font-weight:700;}
#log .e.battle{color:var(--accent);}
#log .e.death{color:var(--danger);}
#ref .k{margin-bottom:7px;}
#ref .k b{color:var(--gold);}
#ref .k span{color:var(--muted);}
#ref .kw-toggle{cursor:pointer; border-radius:4px; padding:2px 4px; margin:0 -4px 7px;}
#ref .kw-toggle:hover{background:rgba(255,255,255,.07);}
#ref .kw-toggle.static{cursor:default;}
#ref .kw-toggle.static:hover{background:transparent;}
#ref .kw-toggle.off{opacity:.42;}
#ref .kw-toggle.off b{text-decoration:line-through; color:var(--muted);}
#ref .setrow{display:flex; align-items:center; gap:8px; margin-bottom:6px; flex-wrap:wrap;}
#ref .setrow>b{color:var(--gold); min-width:72px; font-size:12px;}
#ref .seg{display:flex; gap:4px; flex-wrap:wrap;}
#ref .segbtn,#ref .powbtn,#ref .tdbtn{cursor:pointer; border:1px solid rgba(255,255,255,.18); background:rgba(255,255,255,.05); color:var(--muted); border-radius:5px; padding:3px 7px; font-size:11px; line-height:1;}
#ref .lifebtn{cursor:pointer; border:1px solid rgba(255,255,255,.18); background:rgba(255,255,255,.05); color:var(--muted); border-radius:5px; padding:3px 9px; font-size:13px; line-height:1; font-weight:700;}
#ref .lifebtn:active{background:var(--gold); color:#1a1205;}
#ref .lifeseg{align-items:center;}
#ref .lifeval{min-width:26px; text-align:center; font-weight:800; color:var(--gold); font-size:13px;}
#ref .powbtn,#ref .tdbtn{min-width:22px; text-align:center;}
#ref .segbtn.on,#ref .powbtn.on,#ref .tdbtn.on{background:var(--gold); color:#1a1205; border-color:var(--gold); font-weight:700;}
#ref .setnote{color:#8aa0b3; font-size:11px; margin-top:5px; line-height:1.35;}
#ref .kwallbtn{display:inline-block; margin-top:6px; padding:3px 9px; font-size:11px; font-weight:700; cursor:pointer;
color:#e8dcc0; background:linear-gradient(180deg,#2a2114,#1a140c); border:1px solid #5a4526; border-radius:6px;}
#ref .kwallbtn:hover{ border-color:#caa148; color:#fff; }
#deckstats{position:fixed; inset:0; display:none; align-items:center; justify-content:center; background:rgba(2,5,9,.62); z-index:200;}
#deckstats.show{display:flex;}
#deckstats .dscard{background:#0d1622; border:1px solid rgba(255,255,255,.14); border-radius:12px; padding:16px 18px; width:min(460px,92vw); max-height:86vh; overflow:auto; box-shadow:0 18px 50px rgba(0,0,0,.6); color:#dce6f2;}
#deckstats .dshead{display:flex; align-items:center; gap:8px; font-weight:800; font-size:16px; color:var(--gold); margin-bottom:10px;}
#deckstats .dshead span{color:#8aa0b3; font-weight:600; font-size:12px;}
#deckstats .dsx{margin-left:auto; background:none; border:none; color:#8aa0b3; font-size:16px; cursor:pointer;}
#deckstats .dssec{margin-bottom:12px;}
#deckstats .dssec h4{margin:0 0 5px; font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:#9fb2c6;}
#deckstats .dsrow{display:flex; align-items:center; gap:8px; margin:2px 0; font-size:12px;}
#deckstats .dslbl{min-width:80px; color:#c7d4e2;}
#deckstats .dsbar{flex:1; height:9px; background:rgba(255,255,255,.07); border-radius:5px; overflow:hidden;}
#deckstats .dsbar i{display:block; height:100%; background:var(--gold);}
#deckstats .dsn{min-width:22px; text-align:right; color:#9fb2c6;}
#discview{position:fixed; inset:0; display:none; align-items:center; justify-content:center; background:rgba(2,5,9,.66); z-index:200;}
#discview.show{display:flex;}
#discview .dvcard{background:#0d1622; border:1px solid rgba(255,255,255,.14); border-radius:12px; padding:16px 18px; width:min(820px,95vw); max-height:90vh; display:flex; flex-direction:column; box-shadow:0 18px 50px rgba(0,0,0,.6); color:#dce6f2;}
#discview .dvhead{display:flex; align-items:center; gap:8px; font-weight:800; font-size:16px; color:var(--gold); margin-bottom:10px;}
#discview .dvhead span{color:#8aa0b3; font-weight:600; font-size:12px;}
#discview .dvx{margin-left:auto; background:none; border:none; color:#8aa0b3; font-size:18px; cursor:pointer; line-height:1;}
#discview .dvgrid{display:flex; flex-wrap:wrap; gap:12px; overflow:auto; padding:8px 2px; justify-content:center; align-content:flex-start;}
#discview .dvgrid .card{margin:0;}
#discview .dvempty{color:#8aa0b3; font-size:13px; padding:40px 10px;}
#placepreview{position:fixed; left:50%; top:50%; transform:translate(-50%,-50%); z-index:250; display:none; flex-direction:column; align-items:center; gap:10px; padding:16px 16px 18px; background:rgba(9,13,19,.95); border:2px solid var(--gold); border-radius:14px; box-shadow:0 16px 44px rgba(0,0,0,.6); pointer-events:none;}
#placepreview .card{pointer-events:auto;} /* allow hover-zoom + keyword tooltip on the preview card */
#placepreview .pplabel{font-family:var(--font); font-weight:800; color:var(--gold); font-size:13.5px; letter-spacing:.5px; text-align:center; max-width:150px; line-height:1.3;}
/* The preview card is DRAGGED to the discard pile to throw it away (a click never discards */
/* The container stays click-through so the discard pile underneath (Reanimate anchors */
/* The OPPONENT'S view of a pending choice: same panel, drained of colour and inert, so it reads
as "they are deciding" rather than as something you can act on. */
#placepreview.theirs{border-color:#4a4a4a; box-shadow:0 16px 44px rgba(0,0,0,.6);
background:rgba(9,11,14,.95); filter:grayscale(1) brightness(.72);}
#placepreview.theirs .pplabel{color:#8d8d8d;}
#placepreview .ppback{width:110px; height:151px; opacity:.85;}
#placepreview .ppwait{font-family:var(--mono); font-size:10px; letter-spacing:.12em;
text-transform:uppercase; color:#8d8d8d;}
/* EMOTES. Image-only by design — no labels, nothing to read or moderate. */
/* Raw artwork, no chrome: no ring, no plate, no shadow box — just the image, lifted off the
board with a drop-shadow so it stays legible on a light playmat. */
.emobtn{position:absolute; width:62px; height:62px; transform:translate(-50%,-50%);
border:none; border-radius:0; cursor:pointer; padding:0;
background:transparent center/contain no-repeat;
filter:drop-shadow(0 3px 8px rgba(0,0,0,.8));
transition:transform .1s, filter .12s;}
.emobtn:hover{transform:translate(-50%,-50%) scale(1.16);
filter:drop-shadow(0 0 10px rgba(232,198,107,.85)) drop-shadow(0 3px 8px rgba(0,0,0,.8));}
.emobubble{position:fixed; width:74px; height:74px; z-index:9350; pointer-events:none;
background:center/contain no-repeat; filter:drop-shadow(0 5px 14px rgba(0,0,0,.75));}
.mutebtn{font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase;
padding:7px 14px; border-radius:8px; transform:translateX(-50%); cursor:pointer;
background:rgba(10,13,18,.96); color:var(--ink); border:1px solid var(--line);
box-shadow:0 8px 22px rgba(0,0,0,.6);}
.mutebtn:hover{border-color:var(--gold); color:var(--gold);}
body.overseer .emobtn, body.overseer .mutebtn{ display:none; }
/* EXPLODE FUSE. --fuse is 0..1 = hits taken / hits it can survive, so a 2-power on 1 damage and
a 5-power on 4 look identical: both are one hit from detonating. The keyword symbol brightens,
grows and rattles FASTER as it climbs — duration shrinks from 300ms to 70ms. calc() on
animation-duration is what lets one class cover the whole range. */
/* The warning is an OVERLAY on the card, like Freeze's frostmark — not the corner symbol. */
.card .fusemark{position:absolute; inset:0; z-index:8; display:flex; align-items:center; justify-content:center;
pointer-events:none; border-radius:inherit; overflow:hidden;}
.card .fusemark img, .card .fusemark .g{
width:46%; height:46%; object-fit:contain; font-size:42px; line-height:1; color:#ffd7a8;
animation: fuseshake calc(300ms - var(--fuse,0) * 230ms) linear infinite;
opacity: calc(.28 + var(--fuse,0) * .72);
scale: calc(.84 + var(--fuse,0) * 0.38);
filter: drop-shadow(0 0 calc(2px + var(--fuse,0) * 14px) rgba(255,110,40, calc(.35 + var(--fuse,0) * .65)))
drop-shadow(0 1px 3px rgba(0,0,0,.85))
brightness(calc(1 + var(--fuse,0) * .9));}
/* The whole card rattles too, a fraction of the icon's throw so it reads as strain not noise. */
.card.fuse{ animation: fusecard calc(340ms - var(--fuse,0) * 250ms) linear infinite; }
@keyframes fusecard{
0% { translate: calc(var(--fuse,0) * -0.9px) calc(var(--fuse,0) * 0.6px); }
30% { translate: calc(var(--fuse,0) * 0.8px) calc(var(--fuse,0) * -0.7px); }
60% { translate: calc(var(--fuse,0) * -0.6px) calc(var(--fuse,0) * -0.9px); }
100%{ translate: calc(var(--fuse,0) * -0.9px) calc(var(--fuse,0) * 0.6px); }
}
.card.flip .fusemark{ transform:rotate(180deg); } /* frozen card is upside down; keep it readable */
@keyframes fuseshake{
0% { translate: calc(var(--fuse,0) * -1.6px) calc(var(--fuse,0) * 1.1px); }
25% { translate: calc(var(--fuse,0) * 1.7px) calc(var(--fuse,0) * -1.3px); }
50% { translate: calc(var(--fuse,0) * -1.2px) calc(var(--fuse,0) * -1.7px); }
75% { translate: calc(var(--fuse,0) * 1.4px) calc(var(--fuse,0) * 1.5px); }
100%{ translate: calc(var(--fuse,0) * -1.6px) calc(var(--fuse,0) * 1.1px); }
}
/* Near-certain death: a slow red pulse behind the whole card so it reads at a glance. */
.card.fuse::after{
content:''; position:absolute; inset:-2px; border-radius:inherit; pointer-events:none;
box-shadow: inset 0 0 calc(var(--fuse,0) * 22px) rgba(255,80,40, calc(var(--fuse,0) * .55));
opacity: calc(var(--fuse,0) * var(--fuse,0)); /* squared: stays out of the way until it's close */
}
/* PATCH NOTES. Lobby-only: a small tab by the How To Play button, and a scrolling modal. */
#pnBtn{position:fixed; right:22px; bottom:120px; z-index:120; cursor:pointer;
font-family:var(--font); font-weight:700; font-synthesis-weight:none;
font-size:20px; letter-spacing:.1em; padding:17px 32px;
color:#0a121b; background:linear-gradient(180deg,#d2aa4c,#9c7a2e); border:2px solid #5a4528;
border-radius:12px; box-shadow:0 6px 22px rgba(0,0,0,.65), inset 0 1px 0 rgba(255,255,255,.18);
display:inline-flex; align-items:center; gap:13px;}
#pnBtn:hover{filter:brightness(1.08);}
#pnBtn:active{transform:translateY(1px);}
/* Count of notes that are NEW or have been EDITED since this browser last opened the panel. */
/* [hidden] is a UA-stylesheet rule, and ANY author `display` beats it — so setting .hidden in JS
did nothing here and the bubble showed '0' with nothing new. Both of these need it back. */
#pnBtn[hidden], .pnBadge[hidden]{display:none !important;}
.pnBadge{min-width:28px; height:28px; padding:0 8px; border-radius:999px;
background:#c0392b; color:#fff; border:2px solid rgba(255,255,255,.35);
font-family:var(--mono); font-size:14px; font-weight:700; letter-spacing:0;
display:inline-flex; align-items:center; justify-content:center;
box-shadow:0 0 0 2px rgba(0,0,0,.35), 0 0 10px rgba(192,57,43,.7);}
#pnModal{display:none; position:fixed; inset:0; z-index:9600; background:rgba(6,8,11,.72);
backdrop-filter:blur(3px); align-items:center; justify-content:center; padding:24px;}
#pnModal.show{display:flex;}
.pnCard{position:relative; width:min(620px,94vw); max-height:80vh; overflow:auto;
background:rgba(12,15,20,.97); border:1.5px solid var(--gold); border-radius:14px; padding:22px 24px;
box-shadow:0 22px 60px rgba(0,0,0,.7);}
.pnCard h3{font-family:var(--display); color:var(--gold); letter-spacing:.12em; text-transform:uppercase;
margin:0 0 14px; font-size:20px;}
.pnX{position:absolute; top:10px; right:12px; background:none; border:none; color:var(--muted);
font-size:18px; cursor:pointer; padding:4px 8px;}
.pnX:hover{color:var(--ink);}
.pnEntry{border-top:1px solid var(--line); padding:14px 0;}
.pnEntry:first-child{border-top:none; padding-top:0;}
.pnEntry h4{margin:0 0 2px; font-family:var(--font); font-weight:700; font-synthesis-weight:none;
font-size:15.5px; color:var(--ink); letter-spacing:.3px;}
.pnMeta{font-family:var(--mono); font-size:10px; letter-spacing:.12em; color:var(--muted);
text-transform:uppercase; margin-bottom:8px;}
.pnBody{font-family:var(--font); font-weight:700; font-synthesis-weight:none; font-size:14px;
line-height:1.5; letter-spacing:.4px; color:#e6dccb; white-space:pre-wrap;}
/* TOURNAMENT ROOM. The organiser owns the match: no new game, no room link to share, no seed
and no deck shuffle. Forfeit stays — conceding early is a real tournament move, and it already
awards the win to the opponent. */
body.tournament #btnNew,
body.tournament .shareRow,
body.tournament #seedCtl,
body.tournament #btnShufDeck,
body.tournament #btnShufDisc{ display:none !important; }
/* Pause veil: everything behind it blurs and desaturates, nothing is clickable. */
body.paused .app{ filter:blur(7px) grayscale(.85) brightness(.5); pointer-events:none; }
#pauseveil{position:fixed; inset:0; z-index:9500; display:flex; align-items:center; justify-content:center;
background:rgba(6,8,11,.55); backdrop-filter:blur(2px);}
#pauseveil .pv-box{text-align:center; padding:26px 44px; border-radius:14px;
background:rgba(10,13,18,.92); border:1.5px solid var(--gold);
box-shadow:0 20px 60px rgba(0,0,0,.7), inset 0 0 0 1px rgba(232,198,107,.18);}
#pauseveil .pv-t{font-family:var(--display); font-size:40px; letter-spacing:.12em; color:var(--gold);
text-transform:uppercase; text-shadow:0 4px 18px rgba(0,0,0,.8);}
#pauseveil .pv-s{font-family:var(--mono); font-size:11px; letter-spacing:.16em; color:var(--muted);
text-transform:uppercase; margin-top:8px;}
/* OVERSEER (tournament stream view): both hands open, nothing clickable. Hide every player
affordance so the capture is just the board. */
body.overseer .dock-bot .btns, body.overseer #btnNew, body.overseer #btnForfeit,
body.overseer .shareRow, body.overseer .foot{ display:none !important; }
body.overseer .hand .card{ cursor:default !important; }
/* The side panel stays USABLE for an overseer — the abilities tab is a caster's reference. */
body.overseer .side .foot, body.overseer .side .sidecontrols{ pointer-events:none; }
body.overseer .hand.dim{ opacity:.82; } /* both hands stay legible on camera */
/* Volley aimed at YOUR life while the opponent decides: marked, greyed, not clickable. */
.life.big.lifetarget.theirs{ filter:grayscale(1) brightness(.78); cursor:default; }
.volleylife.theirs{ filter:grayscale(1) brightness(.8); opacity:.85; animation:none; }
/* A pick belonging to the OTHER seat: same marks, drained to grey and inert, so the waiting
player can follow a Ranged/Taunt/Flying/Teleport choice instead of staring at a pause. */
.lane.flytarget.theirs{filter:grayscale(1) brightness(.66); opacity:.75;}
.card.flyactive.theirs{filter:grayscale(1) brightness(.7);}
.tgtmark.theirs{filter:grayscale(1) brightness(.8); opacity:.85; animation:none;}
.flylabel.theirs{color:#8d8d8d; text-shadow:none; animation:none;}
#placepreview .ppdraggable{cursor:grab; position:relative; touch-action:none; pointer-events:auto;}
#placepreview .ppdraggable:active{cursor:grabbing;}
#placepreview .ppdraggable.dragging{filter:grayscale(.4) brightness(.85); opacity:.9;}
#placepreview{transition:left .38s cubic-bezier(.3,.8,.3,1), top .38s cubic-bezier(.3,.8,.3,1);}
/* Two rows: [Room # | Auto-Pass] and [board picker | seed | 🎲]. */
.foot{padding:8px 14px; border-top:1px solid var(--line); font-size:10px; color:var(--muted); font-family:var(--mono); display:flex; gap:8px; align-items:center; flex-wrap:nowrap;}
.autoPassWrap.footpass{font-size:10px; color:var(--muted);}
.foot input{width:54px; background:#0e1620; border:1px solid var(--line); color:var(--ink); border-radius:6px; padding:3px 6px; font-family:var(--mono); font-size:11px;}
/* --- side-panel bottom stack ---------------------------------------------------------- */
/* [New Game | Forfeit] / [Share Room #] / [Auto-Pass . Rules . i] / [board | seed | dice] */
/* Ruled off from New Game / Forfeit above it. */
.shareRow{padding:9px 14px; display:flex; border-top:1px solid var(--line);}
/* Full width, but short — the height came down, not the reach. Theme font, at its real 700
face (ThestralNeue ships Bold only, so synthesis is off to keep the strokes clean). */
.roomchip.shareBig{width:100%; flex:1 1 auto; font-family:var(--font); font-weight:700;
font-synthesis-weight:none; font-size:13px; letter-spacing:1.1px; padding:6px 10px;
border-width:1.5px; border-radius:8px;
background:linear-gradient(180deg,rgba(210,170,76,.26),rgba(156,122,46,.14));
box-shadow:inset 0 0 0 1px rgba(232,198,107,.18), 0 2px 10px rgba(0,0,0,.35);}
.roomchip.shareBig:hover:not(:disabled){background:linear-gradient(180deg,rgba(210,170,76,.42),rgba(156,122,46,.24)); box-shadow:0 0 16px rgba(210,170,76,.45);}
.roomchip.shareBig:disabled{opacity:.38; cursor:default; box-shadow:none;}
/* Auto-Pass left, credits "i" right, Rules stretched across everything between them. */
.footmain{display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:8px;}
.footmain .autoPassWrap{justify-self:start;}
.footmain .footright{display:flex; align-items:center; justify-content:flex-end; gap:8px; justify-self:end; min-width:0;}
.footmain .footright #assetstatus{overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.rulesbtn{justify-self:stretch; width:100%; font-family:var(--font); font-weight:700; font-synthesis-weight:none; font-size:12.5px; letter-spacing:1.2px;
color:var(--gold); background:linear-gradient(180deg,rgba(210,170,76,.14),rgba(156,122,46,.08));
border:1px solid rgba(210,170,76,.5); border-radius:6px; padding:4px 15px; cursor:pointer;
transition:background .12s, box-shadow .12s, transform .06s; text-transform:uppercase;}
.rulesbtn:hover{background:linear-gradient(180deg,rgba(210,170,76,.3),rgba(156,122,46,.16)); box-shadow:0 0 12px rgba(210,170,76,.35);}
.rulesbtn:active{transform:translateY(1px);}
/* --- themed board picker (replaces the native