/* Escape Tilt City · Vs Bots: "Play the villains". Uses the shell's tokens only (steel + gold on the twin, dark mode follows).
   One screen: the panel never scrolls; only the villain grid (phone) and the move list scroll inside it. */
.vsb{position:relative;flex:1;min-height:0;display:flex;flex-direction:column}
.vsb button{font:inherit;color:inherit;cursor:pointer}
.vsb svg.i{width:17px;height:17px}

/* ---------- select ---------- */
.vb-sel{flex:1;min-height:0;display:flex;flex-direction:column;gap:12px}
.vb-head{flex:none;display:flex;align-items:flex-end;justify-content:space-between;gap:16px}
.vb-head small{display:block;font:600 10.5px var(--disp);letter-spacing:.2em;color:var(--gold);text-transform:uppercase}
.vb-head h2{font:600 22px/1.15 var(--disp);color:var(--ink);margin-top:3px}
.vb-head p{font-size:13.5px;color:var(--muted);margin-top:2px}
.vb-prog{flex:none;display:grid;gap:5px;justify-items:end;font:600 12px var(--disp);letter-spacing:.06em;color:var(--muted)}
.vb-prog b{font-size:17px;color:var(--ink)}
.vb-prog .bar{width:140px;height:6px;border-radius:3px;background:var(--tint);overflow:hidden}
.vb-prog .bar i{display:block;height:100%;width:0;background:var(--brandgold,var(--gold));border-radius:3px;transition:width .5s}
.vb-grid{flex:1;min-height:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-rows:minmax(0,1fr);gap:10px;overflow:auto;padding:2px;scrollbar-width:thin}
.vb-card{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);gap:14px;align-items:center;container-type:size;text-align:left;padding:10px 12px 10px 10px;border-radius:16px;background:var(--paper);border:1px solid var(--line);box-shadow:0 4px 14px rgba(var(--shade),.06);min-height:0;transition:transform .15s,box-shadow .15s,border-color .15s}
.vb-card:hover{transform:translateY(-2px);box-shadow:0 10px 22px rgba(var(--shade),.1);border-color:color-mix(in srgb,var(--vc) 45%,var(--line))}
.vb-card.boss{border:2px solid var(--brandgold,var(--gold));padding:9px 11px 9px 9px;background:linear-gradient(135deg,var(--gold-tint),var(--paper) 55%)}
.vb-art{position:relative;display:block;width:clamp(60px,min(100cqh - 22px,40cqw),190px);aspect-ratio:1;border-radius:14px;overflow:hidden;background:var(--vc);flex:none}
.vb-art img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 18%}
.vb-art:has(img.cut),.vb-av:has(img.cut){background:linear-gradient(165deg,color-mix(in srgb,var(--vc) 22%,var(--paper)),color-mix(in srgb,var(--vc) 55%,var(--paper)))}
.vb-art img.cut,.vb-av img.cut{object-fit:cover;object-position:50% 4%}
/* etcBotFocus: the villain the Training Plan sent you to */
.vb-card.focus{border-color:var(--brandgold,var(--gold));box-shadow:0 0 0 3px color-mix(in srgb,var(--brandgold,var(--gold)) 55%,transparent),0 10px 24px rgba(var(--shade),.12)}
@media (prefers-reduced-motion:no-preference){.vb-card.focus{animation:vbfocus 1.1s ease-in-out 3}}
@keyframes vbfocus{50%{transform:translateY(-3px) scale(1.015)}}
.vb-ph{display:grid;place-items:center;width:100%;height:100%;font:700 34px/1 var(--disp);color:#fff;background:radial-gradient(circle at 30% 25%,color-mix(in srgb,var(--vc) 70%,#fff),var(--vc) 70%);letter-spacing:-.02em}
.vb-txt{display:grid;gap:2px;min-width:0}
.vb-txt b{font:600 16.5px/1.15 var(--disp);color:var(--ink)}
.vb-habit{font:600 11px var(--disp);letter-spacing:.12em;text-transform:uppercase;color:var(--gold)}
.vb-txt q,.vb-sh q{font:italic 400 13.5px/1.3 var(--ui);color:var(--muted);quotes:"“" "”";display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.vb-txt b{font-size:18px}
.vb-pills{display:flex;gap:5px;flex-wrap:wrap;margin-top:4px}
.vb-pills i{font-style:normal;display:inline-flex;align-items:center;border-radius:999px;padding:2px 8px;font:700 11px/1.35 var(--disp);letter-spacing:.06em}
.vb-pills .rt{background:var(--accent);color:var(--on-accent)}
.vb-pills .tg{background:var(--gold-tint);color:var(--gold);text-transform:uppercase;letter-spacing:.12em;font-size:10px}
.vb-pills .rec,.vb-pills .ck{background:var(--tint);color:var(--muted)}
.vb-pills .rec[hidden]{display:none}
.vb-badge{position:absolute;right:8px;top:8px;font:700 10.5px/1 var(--disp);letter-spacing:.06em;color:#fff;background:var(--good);border-radius:999px;padding:4px 8px;box-shadow:0 2px 6px rgba(var(--shade),.2)}

/* ---------- modals (setup, end): one floating card over the panel ---------- */
.vb-modal{position:absolute;inset:-6px;z-index:20;display:grid;grid-template-columns:minmax(0,1fr);place-items:center;padding:12px;background:color-mix(in srgb,var(--paper) 55%,transparent);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.vb-sheet{position:relative;width:min(520px,100%);max-height:100%;overflow:auto;display:grid;gap:14px;padding:20px 22px 20px;border-radius:22px;background:var(--paper);border:1px solid var(--line);box-shadow:0 22px 50px rgba(var(--shade),.22);border-top:5px solid var(--vc,var(--accent))}
@media (prefers-reduced-motion:no-preference){.vb-modal:not([hidden]) .vb-sheet{animation:vbup .28s cubic-bezier(.22,.8,.25,1)}}
@keyframes vbup{from{transform:translateY(14px);opacity:.3}to{transform:none;opacity:1}}
.vb-x{position:absolute;right:10px;top:8px;width:34px;height:34px;border-radius:50%;font-size:22px;line-height:1;color:var(--muted)}
.vb-sh{display:grid;grid-template-columns:auto minmax(0,1fr);gap:16px;align-items:center}
.vb-art.lg{width:104px;border-radius:18px}
.vb-sh small{display:block;padding-right:28px;font:600 10.5px var(--disp);letter-spacing:.16em;text-transform:uppercase;color:var(--gold)}
.vb-sh h3{font:600 25px/1.1 var(--disp);color:var(--ink);margin:3px 0 4px;padding-right:26px}
.vb-sh q{display:block;white-space:normal}
.vb-goal,.vb-lesson{font-size:14.5px;line-height:1.4;color:var(--ink);background:var(--tint2);border:1px solid var(--line);border-radius:14px;padding:10px 13px}
.vb-goal b{color:var(--accent-ink)}
.vb-mini{font-size:13px;color:var(--muted);margin-top:-6px}
.vb-rib{font:600 22px/1.15 Caveat,"Segoe Script",cursive;color:var(--vc);text-align:center;margin:-4px 0 -4px}
.vb-new{display:inline-block;font:700 11.5px var(--disp);letter-spacing:.06em;color:#fff;background:var(--good);border-radius:999px;padding:4px 10px}
.vb-seg{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;padding:4px;border-radius:14px;background:var(--tint)}
.vb-seg button{display:flex;align-items:center;justify-content:center;gap:7px;min-height:40px;border-radius:10px;font:600 14px var(--disp);color:var(--muted)}
.vb-seg button[aria-checked="true"]{background:var(--paper);color:var(--ink);box-shadow:0 2px 8px rgba(var(--shade),.12)}
.vb-seg .pc{width:14px;height:14px;border-radius:50%;border:1.5px solid var(--ink)}
.vb-seg .pc.w{background:#fff}.vb-seg .pc.b{background:#1b2733}.vb-seg .pc.r{background:linear-gradient(90deg,#fff 50%,#1b2733 50%)}
.vb-btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:42px;padding:0 16px;border-radius:13px;border:1px solid var(--line);background:var(--paper);font:600 14.5px var(--disp);color:var(--ink);white-space:nowrap}
.vb-btn.p{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.vb-btn.lg{min-height:50px;font-size:16.5px}
.vb-btn.warn.sure{background:#b9473b;border-color:#b9473b;color:#fff}
.vb-btn.ghost{border-color:transparent;color:var(--muted)}
.vb-btn.hot{background:var(--vc);border-color:var(--vc)}
.vb-endbtns{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.vb-endbtns .vb-btn{white-space:normal;text-align:center;line-height:1.15;padding:6px 10px}
.vb-endbtns .vb-btn:first-child{grid-column:1/-1;min-height:48px;font-size:16px}
.vb-sheet.end.r-w{border-top-color:var(--good)}
.vb-sheet.end.r-w h3{color:var(--good)}

/* ---------- play ---------- */
.vb-play{flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,1fr);grid-template-areas:"opp" "board" "hint" "me" "act" "tip";grid-template-rows:auto auto auto auto auto auto;align-content:start;gap:8px;--bs:320px}
.vb-play[hidden]{display:none}
.vb-opp{grid-area:opp}.vb-boardwrap{grid-area:board}.vb-moves{grid-area:moves;display:none}.vb-hint{grid-area:hint}.vb-me{grid-area:me}.vb-actions{grid-area:act}
.vb-tip{grid-area:tip;display:none;font-size:13.5px;line-height:1.4;color:var(--ink);padding:10px 12px;border-radius:14px;background:var(--gold-tint);border:1px solid color-mix(in srgb,var(--gold) 30%,var(--line))}
.vb-tip b{display:block;font:600 10.5px var(--disp);letter-spacing:.16em;text-transform:uppercase;color:var(--gold);margin-bottom:2px}
.vb-play.wide .vb-tip,.vb-play.tipfit .vb-tip{display:block}
.vb-play.wide{grid-template-columns:var(--bs) minmax(260px,1fr);grid-template-areas:"board opp" "board moves" "board tip" "board hint" "board me" "board act";grid-template-rows:auto minmax(0,1fr) auto auto auto auto;align-content:stretch;column-gap:18px;row-gap:10px}
.vb-play.wide .vb-moves{display:grid}
.vb-play.wide .vb-boardwrap{align-self:center}
.vb-opp,.vb-me{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:10px;padding:6px 8px 6px 6px;border-radius:14px;background:var(--tint2);border:1px solid var(--line)}
.vb-av{display:block;width:42px;height:42px;border-radius:11px;overflow:hidden;background:var(--vc)}
.vb-av img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 18%}
.vb-av .vb-ph{font-size:19px}
.vb-av.me{display:grid;place-items:center;background:var(--accent);color:var(--on-accent);font:700 12px var(--disp);letter-spacing:.04em}
.vb-who{display:grid;min-width:0}
.vb-who b{font:600 15.5px/1.15 var(--disp);color:var(--ink)}
.vb-who small{font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vb-clock{font:600 20px/1 var(--disp);font-variant-numeric:tabular-nums;padding:8px 11px;border-radius:10px;background:var(--paper);border:1px solid var(--line);color:var(--muted);min-width:76px;text-align:center}
.vb-clock.on{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.vb-clock.low.on{background:#b9473b;border-color:#b9473b;color:#fff}
.vb-play.thinking .vb-opp .vb-av{animation:vbthink 1s ease-in-out infinite}
@keyframes vbthink{50%{box-shadow:0 0 0 4px color-mix(in srgb,var(--vc) 35%,transparent)}}
.vb-bubble{position:absolute;left:58px;top:calc(100% + 6px);z-index:6;max-width:min(300px,calc(100% - 70px));padding:8px 12px;border-radius:14px;border-top-left-radius:4px;background:var(--paper);border:1px solid var(--line);box-shadow:0 8px 20px rgba(var(--shade),.16);font:600 14px/1.25 var(--disp);color:var(--ink);opacity:0;transform:translateY(-4px);transition:opacity .2s,transform .2s;pointer-events:none}
.vb-bubble.on{opacity:1;transform:none}
.vb-play.wide .vb-bubble{left:auto;right:0;max-width:100%}

/* board: the site's blue-gray flat squares (embed.css skin=blue), cburnett pieces */
.vb-boardwrap{display:flex;justify-content:center}
.vb-board{width:var(--bs);height:var(--bs);display:grid;grid-template-columns:repeat(8,1fr);grid-template-rows:repeat(8,1fr);border-radius:8px;overflow:hidden;box-shadow:0 8px 22px rgba(var(--shade),.14);user-select:none;-webkit-user-select:none;touch-action:manipulation}
.sq{position:relative;cursor:pointer}
.sq.l{background:#EDEBD9}.sq.d{background:#6E9468}
.sq .pc{position:absolute;inset:0;background:center/88% no-repeat;filter:drop-shadow(0 1px 1px rgba(0,0,0,.22));z-index:2;pointer-events:none}
.sq.last::before,.sq.sel::before,.sq.ghost::before,.sq.hint::before,.sq.chk::before{content:"";position:absolute;inset:0;z-index:1}
.sq.last::before{background:rgba(155,199,0,.41)}
.sq.sel::before{background:rgba(20,85,30,.5)}
.sq.ghost::before{background:rgba(91,127,168,.55)}
.sq.hint::before{background:rgba(227,174,58,.65)}
.sq.chk::before{background:radial-gradient(circle,rgba(220,40,30,.9) 0,rgba(220,40,30,.5) 40%,transparent 72%)}
.sq.dot::after{content:"";position:absolute;left:50%;top:50%;width:28%;height:28%;translate:-50% -50%;border-radius:50%;background:rgba(20,85,30,.45);z-index:3;pointer-events:none}
.sq.cap::after{content:"";position:absolute;inset:3%;border-radius:50%;border:4px solid rgba(20,85,30,.45);z-index:3;pointer-events:none}
.sq i{position:absolute;font:700 10px/1 var(--disp);font-style:normal;z-index:3;pointer-events:none}
.sq .rk{left:3px;top:3px}.sq .fl{right:3px;bottom:2px}
.sq.l i{color:#6f8794}.sq.d i{color:#eef2f4}

.vb-moves{list-style:none;min-height:0;overflow:auto;align-content:start;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px 10px;padding:8px 10px;border-radius:14px;background:var(--paper);border:1px solid var(--line);scrollbar-width:thin}
.vb-moves li{display:grid;grid-template-columns:28px 1fr 1fr;gap:4px;font:500 13.5px/1.6 var(--ui);color:var(--ink)}
.vb-moves li span{color:var(--soft);font-variant-numeric:tabular-nums}
.vb-moves li b{font-weight:600}
.vb-moves li.none{display:block;grid-column:1/-1;color:var(--soft);font-style:italic}
.vb-hint{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:8px 10px;border-radius:14px;background:var(--gold-tint);border:1px dashed var(--gold)}
.vb-hint[hidden]{display:none}
.vb-hint span{flex:1 1 160px;font-size:13.5px;color:var(--ink)}
.vb-hint .vb-btn{min-height:34px;padding:0 12px;font-size:13.5px}
.vb-actions{display:grid;grid-template-columns:1fr auto auto 1fr;gap:8px}
.vb-actions .vb-btn{min-height:40px}

/* ---------- phone ---------- */
@media (max-width:899px) and (min-height:501px){
  .vb-sel{gap:8px}
  .vb-head{align-items:center}
  .vb-head h2{font-size:18px}
  .vb-head p{display:none}
  .vb-prog .bar{width:96px}
  .vb-grid{grid-template-columns:minmax(0,1fr);grid-auto-rows:max-content;gap:8px;overscroll-behavior:contain}
  .vb-card{padding:8px 10px 8px 8px;gap:10px;border-radius:14px;container-type:normal}
  .vb-art{width:62px;border-radius:12px}
  .vb-txt b{font-size:15.5px}
  .vb-txt q{font-size:12.5px;-webkit-line-clamp:1}
  .vb-pills{margin-top:2px}
  .vb-badge{top:auto;bottom:8px}
  .vb-sheet{padding:16px 16px 16px;gap:12px;border-radius:20px}
  .vb-art.lg{width:78px}
  .vb-sh{gap:12px}.vb-sh h3{font-size:21px}
  .vb-play{gap:6px}
  .vb-opp,.vb-me{padding:4px 6px 4px 4px;border-radius:12px;gap:8px}
  .vb-av{width:36px;height:36px;border-radius:9px}
  .vb-clock{font-size:18px;padding:7px 9px;min-width:68px}
  .vb-bubble{font-size:13px}
  .vb-actions .vb-btn{min-height:38px;font-size:13.5px;padding:0 10px}
}
/* v15: board sounds: speaker toggles (header + game actions); mute is Slurp's shared 'sos-sound' */
.vb-snd{flex:none;margin-left:auto;align-self:center;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--line);background:var(--paper);color:var(--ink);padding:0}
.vsb [data-act=sound] svg.i{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.vsb [data-act=sound] .no{display:none}.vsb [data-act=sound].off .no{display:inline}.vsb [data-act=sound].off .on{display:none}
.vsb [data-act=sound].off{color:var(--muted)}
.vb-btn.snd{padding:0 12px}
.vsb [data-act=sound]:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
@media (max-width:640px){.vb-snd{width:36px;height:36px}}
.vb-play.wide .vb-actions{gap:6px}.vb-play.wide .vb-actions .vb-btn{padding:0 10px;gap:5px}.vb-play.wide .vb-actions .vb-btn.snd{padding:0 9px}
/* v16: 11 villains on the laptop's 3-column grid: the boss card spans the last two columns (no empty slot, the finale reads as one) */
@media (min-width:900px), (orientation:landscape) and (max-height:500px){.vb-card.boss:nth-child(3n+2):last-child{grid-column:span 2}}

/* ===================== v17 animation (Oct 30): Pixar-feel life on the villains =====================
   Idle (only while on screen: .live from an IntersectionObserver): breathing on `scale`, a slow sway on `rotate`
   (two periods that never line up, so it never looks looped). Signature moves use `transform` (+ the .vfx overlay <i>s),
   so they stack on top of the idle. Everything is compositor-only (transform/opacity) except Plug's short glow filter.
   Reduced motion: nothing below runs. */
.vb-art,.vb-av{position:relative;container-type:inline-size}
.vfx{position:absolute;inset:0;z-index:2;pointer-events:none;overflow:hidden;border-radius:inherit}
.vfx i{position:absolute;display:block;opacity:0;font-style:normal;line-height:1}
@media (prefers-reduced-motion:no-preference){
  .vb-art img,.vb-av img{transform-origin:50% 100%;will-change:transform}
  /* square full-bleed art (no transparent edges): a 7% overscan from the center so no move ever shows the tile's edge */
  .vb-art img:not(.cut),.vb-av img:not(.cut){--bs0:1.07;scale:1.07;transform-origin:50% 50%}
  .vb-art.live img,.vb-av.live img{animation:vbBreathe 4.6s ease-in-out var(--ad,0s) infinite,vbSway 7.3s ease-in-out var(--ad,0s) infinite}
  .vb-card{transition:transform .22s cubic-bezier(.3,1.4,.5,1),box-shadow .2s,border-color .2s}
  .vb-card:hover{transform:translateY(-4px)}
  .vb-card:active{transform:translateY(-1px) scale(.985)}
  /* each villain's signature move: the image part (transform) */
  .sig[data-v] img,.vb-av.low[data-v] img{animation-delay:var(--ad,0s),var(--ad,0s),0s;animation-duration:4.6s,7.3s,1.1s;animation-timing-function:ease-in-out,ease-in-out,cubic-bezier(.3,.7,.3,1);animation-iteration-count:infinite,infinite,1}
  .sig[data-v=premo] img{animation-name:vbBreathe,vbSway,sgSlam;animation-duration:4.6s,7.3s,.8s}
  .sig[data-v=juicebox-kid] img{animation-name:vbBreathe,vbSway,sgSip}
  .sig[data-v=wishbone] img{animation-name:vbBreathe,vbSway,sgTug}
  .sig[data-v=inquisitive-minion] img{animation-name:vbBreathe,vbSway,sgTilt;animation-duration:4.6s,7.3s,1.2s}
  .sig[data-v=flag-fall] img,.vb-av.low[data-v=flag-fall] img{animation-name:vbBreathe,vbSway,sgJitter;animation-duration:4.6s,7.3s,.7s}
  .vb-av.low[data-v=flag-fall] img{animation-iteration-count:infinite,infinite,infinite;animation-duration:4.6s,7.3s,.45s}
  .sig[data-v=midnight] img{animation-name:vbBreathe,vbSway,sgYawn;animation-duration:4.6s,7.3s,1.2s}
  .sig[data-v=run-it-back] img{animation-name:vbBreathe,vbSway,sgHop;animation-duration:4.6s,7.3s,.9s}
  .sig[data-v=elo-owl] img{animation-name:vbBreathe,vbSway,sgRuffle;animation-duration:4.6s,7.3s,.8s;transform-origin:50% 60%}
  .sig[data-v=overthinker] img{animation-name:vbBreathe,vbSway,sgTap}
  .sig[data-v=plug] img{animation-name:vbBreathe,vbSway,sgGlow}
  .sig[data-v=tuxedo-aviary] img{animation-name:vbBreathe,vbSway,sgNod;animation-duration:4.6s,7.3s,1.2s}
  /* the overlay props (positions are % of the art box; sizes in cqw so they scale from the 36px avatar to the big tile) */
  .sig .vfx i{animation:1s cubic-bezier(.3,.7,.3,1) both}
  /* Premo: speed streaks flash across */
  [data-v=premo] .vfx i{left:-45%;width:45%;height:2.2cqw;min-height:1px;border-radius:9px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.95))}
  [data-v=premo] .vfx i:nth-child(1){top:34%}[data-v=premo] .vfx i:nth-child(2){top:50%;width:35%}[data-v=premo] .vfx i:nth-child(3){top:64%}
  .sig[data-v=premo] .vfx i{animation:sgStreak .45s .12s ease-out both}.sig[data-v=premo] .vfx i:nth-child(2){animation-delay:.18s}.sig[data-v=premo] .vfx i:nth-child(3){animation-delay:.24s}
  /* Juicebox Kid: slurp bubbles up the straw */
  [data-v=juicebox-kid] .vfx i{left:49%;top:50%;width:5cqw;height:5cqw;border-radius:50%;background:radial-gradient(circle at 35% 35%,#fff7d6,#f3a531 70%);box-shadow:0 0 2px rgba(0,0,0,.25)}
  .sig[data-v=juicebox-kid] .vfx i{animation:sgBubble .8s ease-out both}.sig[data-v=juicebox-kid] .vfx i:nth-child(2){animation-delay:.22s;left:53%}.sig[data-v=juicebox-kid] .vfx i:nth-child(3){animation-delay:.44s;left:46%}
  /* Wishbone: sparkles near the attack */
  [data-v=wishbone] .vfx i{width:13cqw;height:13cqw;background:#ffd66b;clip-path:polygon(50% 0,61% 39%,100% 50%,61% 61%,50% 100%,39% 61%,0 50%,39% 39%);filter:drop-shadow(0 0 2px #fff)}
  [data-v=wishbone] .vfx i:nth-child(1){left:70%;top:6%}[data-v=wishbone] .vfx i:nth-child(2){left:82%;top:26%;width:9cqw;height:9cqw}[data-v=wishbone] .vfx i:nth-child(3){left:60%;top:20%;width:7cqw;height:7cqw}
  .sig[data-v=wishbone] .vfx i{animation:sgSpark .7s .2s both}.sig[data-v=wishbone] .vfx i:nth-child(2){animation-delay:.38s}.sig[data-v=wishbone] .vfx i:nth-child(3){animation-delay:.52s}
  /* Inquisitive Minion: a ghost knight shimmers in (the other move) */
  [data-v=inquisitive-minion] .vfx i:nth-child(1){left:4%;top:14%;font-size:30cqw;color:rgba(150,190,255,.85);text-shadow:0 0 6px rgba(150,200,255,.9)}
  [data-v=inquisitive-minion] .vfx i:nth-child(1)::before{content:"\265E"}
  .sig[data-v=inquisitive-minion] .vfx i:nth-child(1){animation:sgGhost 1.2s ease-in-out both}
  /* Flag Fall: no props, it's all in the jitter */
  /* Midnight: her pieces drift up, slow */
  [data-v=midnight] .vfx i{font-size:17cqw;color:#2b2140;text-shadow:0 0 4px rgba(255,214,120,.8)}
  [data-v=midnight] .vfx i:nth-child(1){left:4%;top:50%}[data-v=midnight] .vfx i:nth-child(1)::before{content:"\265C"}
  [data-v=midnight] .vfx i:nth-child(2){left:78%;top:58%;color:#d9a43a;text-shadow:none}[data-v=midnight] .vfx i:nth-child(2)::before{content:"\265E"}
  [data-v=midnight] .vfx i:nth-child(3){left:70%;top:14%;font-size:12cqw}[data-v=midnight] .vfx i:nth-child(3)::before{content:"\265F"}
  .sig[data-v=midnight] .vfx i{animation:sgDrift 1.2s ease-in-out both}.sig[data-v=midnight] .vfx i:nth-child(2){animation-delay:.15s}.sig[data-v=midnight] .vfx i:nth-child(3){animation-delay:.3s}
  /* Run-It-Back: a gold token flips + steam from his head */
  [data-v=run-it-back] .vfx i:nth-child(1){left:68%;top:52%;width:17cqw;height:17cqw;border-radius:50%;background:radial-gradient(circle at 40% 35%,#fff3b0,#e2a51f 55%,#a86f0a);box-shadow:inset 0 0 0 1.5cqw #f7d36a}
  [data-v=run-it-back] .vfx i:nth-child(2),[data-v=run-it-back] .vfx i:nth-child(3){top:6%;left:24%;width:24cqw;height:18cqw;border-radius:50%;background:radial-gradient(circle,#fff 0 30%,rgba(235,240,245,.85) 45%,rgba(255,255,255,0) 70%);filter:drop-shadow(0 0 1px rgba(0,0,0,.35))}
  [data-v=run-it-back] .vfx i:nth-child(3){left:56%}
  .sig[data-v=run-it-back] .vfx i:nth-child(1){animation:sgCoin .9s ease-out both}
  .sig[data-v=run-it-back] .vfx i:nth-child(2){animation:sgSteam .9s .1s ease-out both}.sig[data-v=run-it-back] .vfx i:nth-child(3){animation:sgSteam .9s .3s ease-out both}
  /* Elo Owl: two feathers shake loose */
  [data-v=elo-owl] .vfx i{width:9cqw;height:17cqw;border-radius:50% 0 50% 0;background:linear-gradient(160deg,#f2c46a,#9a6a2a)}
  [data-v=elo-owl] .vfx i:nth-child(1){left:22%;top:38%}[data-v=elo-owl] .vfx i:nth-child(2){left:70%;top:34%;background:linear-gradient(160deg,#a99a8a,#5b5047)}
  .sig[data-v=elo-owl] .vfx i{animation:sgFeather 1.1s .15s ease-in both}.sig[data-v=elo-owl] .vfx i:nth-child(2){animation-delay:.3s}
  /* The Overthinker: analysis sheets drift off */
  [data-v=overthinker] .vfx i{width:15cqw;height:19cqw;border-radius:1.5cqw;background:repeating-linear-gradient(180deg,#fff 0 2.2cqw,#c9c4bb 2.2cqw 2.8cqw);box-shadow:0 1px 3px rgba(0,0,0,.25)}
  [data-v=overthinker] .vfx i:nth-child(1){left:8%;top:22%}[data-v=overthinker] .vfx i:nth-child(2){left:76%;top:16%}[data-v=overthinker] .vfx i:nth-child(3){left:70%;top:46%;width:11cqw;height:14cqw}
  .sig[data-v=overthinker] .vfx i{animation:sgSheet 1.1s ease-in-out both}.sig[data-v=overthinker] .vfx i:nth-child(2){animation-delay:.12s;animation-name:sgSheet2}.sig[data-v=overthinker] .vfx i:nth-child(3){animation-delay:.24s}
  /* Plug: the tablet glows */
  [data-v=plug] .vfx i:nth-child(1){left:63%;top:36%;width:70cqw;height:70cqw;translate:-50% -50%;border-radius:50%;background:radial-gradient(circle,rgba(110,190,255,.75),rgba(110,190,255,0) 62%);mix-blend-mode:screen}
  .sig[data-v=plug] .vfx i:nth-child(1){animation:sgPulse 1.1s ease-in-out both}
  /* Tuxedo Aviary: the cane taps (a ring at his feet), the owl nods along with him */
  [data-v=tuxedo-aviary] .vfx i:nth-child(1){left:50%;bottom:3%;width:60cqw;height:12cqw;translate:-50% 0;border-radius:50%;border:1cqw solid rgba(227,174,58,.9)}
  .sig[data-v=tuxedo-aviary] .vfx i:nth-child(1){animation:sgTapRing .6s .45s ease-out both}
}
@keyframes vbBreathe{0%,100%{scale:var(--bs0,1)}50%{scale:calc(var(--bs0,1) * 1.015) calc(var(--bs0,1) * 1.018)}}
@keyframes vbSway{0%,100%{rotate:0deg}30%{rotate:.7deg}70%{rotate:-.6deg}}
@keyframes sgSlam{0%{transform:none}22%{transform:translateY(5%) scale(1.04,.95)}42%{transform:translateY(-2.5%) scale(.98,1.03)}62%,100%{transform:none}}
@keyframes sgSip{0%,100%{transform:none}18%,30%{transform:translateY(-1.8%) scale(1.01)}42%{transform:none}58%,70%{transform:translateY(-1.8%) scale(1.01)}84%{transform:none}}
@keyframes sgTug{0%,100%{transform:none}20%{transform:rotate(-4deg)}45%{transform:rotate(3.5deg)}68%{transform:rotate(-1.5deg)}85%{transform:rotate(.6deg)}}
@keyframes sgTilt{0%,100%{transform:none}22%,62%{transform:rotate(-6deg) translateX(-1%)}78%{transform:rotate(1deg)}}
@keyframes sgJitter{0%,100%{transform:none}10%{transform:translateX(-2%) rotate(-1.5deg)}25%{transform:translateX(2%) rotate(1.2deg)}40%{transform:translateX(-1.6%) rotate(-1deg)}55%{transform:translateX(1.4%) rotate(1deg)}72%{transform:translateX(-.8%)}86%{transform:translateX(.6%)}}
@keyframes sgYawn{0%,100%{transform:none}35%{transform:rotate(2.6deg) translateY(-1%) scale(1,1.025)}60%{transform:rotate(2deg) scale(1,1.015)}}
@keyframes sgHop{0%,100%{transform:none}25%{transform:translateY(-3%)}45%{transform:translateY(0) scale(1.03,.97)}60%{transform:none}}
@keyframes sgRuffle{0%,100%{transform:none}12%{transform:rotate(-2.2deg) scale(1.03,.98)}26%{transform:rotate(2deg) scale(.98,1.02)}40%{transform:rotate(-1.6deg) scale(1.02,.99)}54%{transform:rotate(1.2deg)}70%{transform:rotate(-.5deg)}}
@keyframes sgTap{0%,100%{transform:none}14%,40%,66%{transform:translateY(-1.6%)}27%,53%,79%{transform:none}}
@keyframes sgGlow{0%,100%{transform:none;filter:none}30%{transform:scale(1.015);filter:brightness(1.12) saturate(1.1)}55%{filter:brightness(1.02)}75%{filter:brightness(1.1)}}
@keyframes sgNod{0%,100%{transform:none}20%{transform:translateY(1.4%) rotate(1deg)}40%{transform:none}60%{transform:translateY(1.2%) rotate(.8deg)}80%{transform:none}}
@keyframes sgStreak{0%{opacity:0;transform:none}30%{opacity:1}100%{opacity:0;transform:translateX(330%)}}
@keyframes sgBubble{0%{opacity:0;transform:scale(.4)}25%{opacity:1}100%{opacity:0;transform:translate(3cqw,-30cqw) scale(1.1)}}
@keyframes sgSpark{0%{opacity:0;transform:scale(0) rotate(0)}45%{opacity:1;transform:scale(1.1) rotate(40deg)}100%{opacity:0;transform:scale(.3) rotate(90deg)}}
@keyframes sgGhost{0%{opacity:0;transform:translateY(4cqw)}30%{opacity:.75}45%{opacity:.4}60%{opacity:.8}100%{opacity:0;transform:translateY(-4cqw)}}
@keyframes sgDrift{0%{opacity:0;transform:translateY(6cqw) rotate(-8deg)}35%{opacity:.95}100%{opacity:0;transform:translate(4cqw,-14cqw) rotate(10deg)}}
@keyframes sgCoin{0%{opacity:0;transform:translateY(0) rotateY(0) scale(.6)}15%{opacity:1}55%{transform:translateY(-34cqw) rotateY(540deg) scale(1)}85%{opacity:1;transform:translateY(-4cqw) rotateY(900deg)}100%{opacity:0;transform:translateY(0) rotateY(1080deg)}}
@keyframes sgSteam{0%{opacity:0;transform:translateY(4cqw) scale(.5)}35%{opacity:.85}100%{opacity:0;transform:translateY(-14cqw) scale(1.5)}}
@keyframes sgFeather{0%{opacity:0;transform:none}20%{opacity:1}100%{opacity:0;transform:translate(6cqw,40cqw) rotate(160deg)}}
@keyframes sgSheet{0%{opacity:0;transform:translate(0,4cqw) rotate(-10deg)}30%{opacity:1}100%{opacity:0;transform:translate(-10cqw,-18cqw) rotate(-30deg)}}
@keyframes sgSheet2{0%{opacity:0;transform:translate(0,4cqw) rotate(8deg)}30%{opacity:1}100%{opacity:0;transform:translate(10cqw,-16cqw) rotate(28deg)}}
@keyframes sgPulse{0%,100%{opacity:0;scale:.7}30%{opacity:1;scale:1}55%{opacity:.35;scale:.9}75%{opacity:.9;scale:1.05}}
@keyframes sgTapRing{0%{opacity:0;transform:scale(.25)}25%{opacity:1}100%{opacity:0;transform:scale(1.3)}}

/* v17: phone header fits one line: the title already says The Chess Villains, so the count reads "0/11 beaten" there */
.vb-cv{font-style:normal}
@media (max-width:640px){.vb-cv{display:none}.vb-head h2{white-space:nowrap}}
/* v22.2.1: a villain's longer description (The Guru) under the quote on the match sheet */
.vb-desc{font-size:12.5px;line-height:1.4;color:var(--muted);margin-top:4px;max-width:46ch}
/* v22.2.1: SoulTak3r, locked above the ladder: art dimmed a touch, a lock on it, the card itself a quiet "not yet" */
.vb-card.legend{--vc:#3a1d2b}
.vb-card.legend.locked{cursor:not-allowed}
.vb-card.legend.locked .vb-art img{filter:saturate(.75) brightness(.72)}
.vb-card.legend.locked:hover{transform:none}
.vb-lock{position:absolute;inset:auto 8px 8px auto;z-index:3;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:rgba(10,12,16,.72);color:#f3d27a;box-shadow:0 0 0 1.5px rgba(243,210,122,.6)}
.vb-lock .i{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.vb-card.legend.locked .vb-pills .tg{background:color-mix(in srgb,#f3d27a 18%,transparent);color:#f3d27a}

/* v23.4: the gate (Tuxedo Aviary waits behind Black Lion): locked card = dimmed art, a lock, one short line instead of the taunt */
.vb-lock[hidden],.vb-gate[hidden]{display:none!important}
.vb-card.locked{cursor:not-allowed}
.vb-card.locked .vb-art img{filter:saturate(.7) brightness(.62)!important}
.vb-card.locked:hover{transform:none}
.vb-grid .vb-card.locked q{display:none!important}
.vb-gate{display:flex;align-items:center;gap:5px;margin:4px 0 2px;font:700 12px/1.2 var(--disp);letter-spacing:.02em;color:#f3d27a}
.vb-gate .i{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}

/* v23.4.3: tall full-body art (Black Lion at his door) on the setup sheet and the Tuxedo lock sheet; kept whole, no crop */
.vb-sh.tall{align-items:center}
.vb-art.lg.tall{width:112px;aspect-ratio:384/800;border-radius:16px 16px 10px 10px;background:none;overflow:visible}
.vb-art.tall img{object-fit:contain;object-position:50% 100%;filter:drop-shadow(0 10px 18px rgba(var(--shade),.32))}
.vb-art.tall img{animation:none!important;scale:1!important}  /* a still painting: no breathe/sway/signature scale, so he never spills past the sheet */
.vb-sh .vb-art.tall img{position:static;inset:auto;width:100%;height:100%;max-width:100%}  /* not the frost.css 112% overscan meant for square art */
.vb-sh.gate h3{color:var(--vc)}
@media (max-width:899px){.vb-art.lg.tall{width:92px}}