/* The Null Mage Is Secretly a Vibe Coder — series layer over the shared engine.
   One continuous canvas: borderless feathered art over a scene "field" (#vc-field, drawn behind a transparent strip),
   cross-join SFX, slanted action slices, living glitch panels, an amber System and a reader HUD. */
:root{--vc-amber:#ffb23f;--vc-amber-dim:#8a5a14;--vc-mag:#ff2bd6;--vc-cy:#22e6ff;--vc-gr:#3dff8a;--vc-gold:#ffd36b}
body[data-series=vibe-coder]{--vc-field:#e7dfd0;--vc-ink:#1a1512}
body[data-series=vibe-coder][data-tone=vc-hall]{--vc-field:#e7dfd0;--vc-ink:#1a1512}
body[data-series=vibe-coder][data-tone=vc-dungeon]{--vc-field:#060a12;--vc-ink:#e9f6ff}
body[data-series=vibe-coder][data-tone=vc-void]{--vc-field:#000;--vc-ink:#f4f4f4}
body[data-series=vibe-coder][data-tone=vc-sys]{--vc-field:#0b0700;--vc-ink:#ffe2b0}
body[data-series=vibe-coder] .strip{background:transparent!important;box-shadow:none}
#vc-field{position:fixed;top:0;left:50%;width:var(--col);height:100vh;height:100lvh;transform:translateX(-50%);z-index:0;pointer-events:none;
  background:var(--vc-field);transition:background-color 1.4s ease}
body[data-series=vibe-coder] .cover{z-index:2}

/* borderless art that melts into the field */
.panel.vc .art{box-shadow:none}
.panel.vc-feather .art>img.media,.panel.vc-feather .art>video.media{
  -webkit-mask-image:linear-gradient(#0000 0,#000 7%,#000 93%,#0000 100%);mask-image:linear-gradient(#0000 0,#000 7%,#000 93%,#0000 100%)}
.panel.vc-tall .art>img.media{-webkit-mask-image:linear-gradient(#0000 0,#000 4%,#000 97%,#0000 100%);mask-image:linear-gradient(#0000 0,#000 4%,#000 97%,#0000 100%)}

/* slanted action slices that interlock */
.panel.vc-slant-a,.panel.vc-slant-b{margin-top:calc(-3 * var(--u));margin-bottom:calc(-3 * var(--u));z-index:1}
.panel.vc-slant-a .art{clip-path:polygon(0 9%,100% 0,100% 91%,0 100%)}
.panel.vc-slant-b .art{clip-path:polygon(0 0,100% 9%,100% 100%,0 91%)}

/* gutters sit above their neighbours so lettering can cross a join */
body[data-series=vibe-coder] .gutter{position:relative;z-index:4}

/* lettering */
.tag.vc-chip{font:700 11px/1 'JetBrains Mono',ui-monospace,monospace;letter-spacing:.16em;color:#6b4a12;padding:7px 10px;border:1px solid currentColor;background:#fff8;width:auto!important;display:inline-block}
.tag.vc-chip.vc-cyan{color:var(--vc-cy);background:#02121a99;box-shadow:0 0 14px #22e6ff55}
.tag.vc-big{text-align:center;font:800 clamp(19px,5.4cqw,30px)/1.18 'Shantell Sans',system-ui,sans-serif;color:var(--vc-ink);text-transform:uppercase;letter-spacing:.01em;transform:translateY(10px);transition:opacity .45s,transform .6s cubic-bezier(.2,.8,.2,1)!important}
.tag.vc-big.on{transform:none}
body[data-tone=vc-void] .tag.vc-big,body[data-tone=vc-dungeon] .tag.vc-big{text-shadow:0 0 18px #ffffff22}
.tag.vc-count{font:700 clamp(46px,15cqw,84px)/1 'JetBrains Mono',ui-monospace,monospace;color:var(--vc-gold);text-shadow:0 0 20px var(--vc-gold),3px 3px 0 #000}
.tag.vc-count small{display:block;font-size:12px;letter-spacing:.34em;margin-top:6px;color:#fff;text-shadow:2px 2px 0 #000}
.tag.vc-count.vc-dead{color:#9a9a9a;text-shadow:3px 3px 0 #000}
.tag.vc-count.vc-pop{animation:vcPop .5s cubic-bezier(.2,1.6,.4,1)}
.tag.vc-count.vc-dead.vc-pop{animation:vcThud .45s}
@keyframes vcPop{0%{transform:scale(1.6)}100%{transform:none}}
@keyframes vcThud{0%{transform:translateY(-10px)}40%{transform:translateY(3px)}100%{transform:none}}
.tag.vc-jag{background:#fff;color:#111;font:800 19px/1.1 'Shantell Sans',sans-serif;padding:16px 18px;text-align:center;
  clip-path:polygon(0 18%,9% 10%,6% 0,22% 8%,36% 0,46% 9%,62% 0,72% 10%,90% 2%,92% 16%,100% 22%,94% 40%,100% 58%,92% 70%,98% 92%,80% 88%,70% 100%,56% 90%,42% 100%,30% 90%,12% 98%,10% 84%,0 76%,6% 56%,0 40%,6% 30%)}
.js .tag.vc-jag{transform:scale(.6);transition:opacity .15s,transform .3s cubic-bezier(.2,1.6,.4,1)!important}.js .tag.vc-jag.on{transform:rotate(-3deg)}

/* vertical SFX that run down across a panel join */
.tag.vc-vsfx{width:auto!important;display:flex;flex-direction:column;align-items:center;font:400 clamp(54px,17cqw,92px)/.86 Bangers,Impact,sans-serif;letter-spacing:0;z-index:9;opacity:1!important}
.tag.vc-vsfx span{display:block;-webkit-text-stroke:2.5px #000;paint-order:stroke fill;opacity:0;transform:scale(.3) rotate(-10deg)}
.tag.vc-vsfx.on span{opacity:1;transform:rotate(calc(var(--r,0) * 1deg));transition:opacity .08s calc(var(--i) * 70ms),transform .32s cubic-bezier(.2,1.8,.4,1) calc(var(--i) * 70ms)}
.vc-vsfx.vc-red span{color:#ff5a5a;text-shadow:0 0 16px #ff2a2a,0 0 2px #fff}
.vc-vsfx.vc-gold span{color:var(--vc-gold);text-shadow:0 0 18px #ffb000,0 0 2px #fff}
.vc-vsfx.vc-neon span{color:var(--vc-mag);text-shadow:0 0 16px var(--vc-mag),3px 0 0 var(--vc-cy)}
.vc-vsfx.vc-white span{color:#f5f5f5;text-shadow:0 0 22px #ffffff88}

/* code written over the runes */
.tag.vc-code{font:500 clamp(10px,2.9cqw,14px)/1.5 'JetBrains Mono',ui-monospace,monospace;color:var(--vc-gr);text-shadow:0 0 8px var(--vc-gr);white-space:pre;background:#00140888;padding:6px 8px;border-left:2px solid var(--vc-gr)}

/* the System */
.tag.vc-sys,.tag.vc-menu{font:700 clamp(12px,3.6cqw,16px)/1.45 'JetBrains Mono',ui-monospace,monospace;color:var(--vc-amber);background:#120a00ec;border:1.5px solid var(--vc-amber);
  box-shadow:0 0 0 1px #000,0 0 24px #ffb23f66,inset 0 0 18px #ffb23f22;padding:9px 12px 11px;z-index:8}
.js .tag.vc-sys,.js .tag.vc-menu{transform:scaleY(.04);transition:transform .22s cubic-bezier(.2,1.4,.4,1),opacity .1s!important}
.js .tag.vc-sys.on,.js .tag.vc-menu.on{transform:none}
.vc-hd{display:flex;justify-content:space-between;font-size:9.5px;letter-spacing:.2em;color:var(--vc-amber-dim);border-bottom:1px solid #8a5a1488;padding-bottom:5px;margin-bottom:6px}
.vc-ln{min-height:1.45em;white-space:pre-wrap}
.vc-cur{display:inline-block;width:.6em;height:1em;background:var(--vc-amber);vertical-align:-2px;animation:vcBlink .8s steps(1) infinite}
@keyframes vcBlink{50%{opacity:0}}
.tag.vc-menu{pointer-events:auto}
.vc-btns{display:flex;flex-direction:column;gap:10px;margin-top:9px}
.vc-btns button{font:700 clamp(14px,4cqw,17px) 'JetBrains Mono',monospace;letter-spacing:.06em;padding:13px 12px;border-radius:2px;text-align:left;display:flex;justify-content:space-between;align-items:center;min-height:48px}
.vc-btns .vc-edit{background:var(--vc-amber);color:#1a0f00;box-shadow:0 0 18px #ffb23f99}
.vc-btns .vc-vibe{background:#1d1d22;color:#7d7d86;border:1.5px dashed #55555c}
.vc-btns .vc-vibe.vc-denied{animation:vcDeny .4s}
@keyframes vcDeny{20%{transform:translateX(-8px)}40%{transform:translateX(7px)}60%{transform:translateX(-5px)}80%{transform:translateX(3px)}}
.vc-lock{font-size:18px;display:inline-block}.vc-lock.vc-shudder{animation:vcShud .25s 3}
@keyframes vcShud{50%{transform:rotate(-14deg) scale(1.25)}}
.vc-resp{min-height:1.4em;font-size:.86em;margin-top:8px}

/* living glitch panels: RGB split + slice stutter while on screen */
.panel.vc-glitch .vc-ghost{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;mix-blend-mode:screen;opacity:0;pointer-events:none}
.panel.vc-glitch.vc-live .vc-ghost.r{animation:vcGr 1.7s steps(1) infinite;filter:url(#vcR)}
.panel.vc-glitch.vc-live .vc-ghost.c{animation:vcGc 1.3s steps(1) infinite;filter:url(#vcC)}
@keyframes vcGr{0%,62%,100%{opacity:0;transform:none}64%{opacity:.9;transform:translate(-7px,0);clip-path:inset(18% 0 55% 0)}68%{opacity:.9;transform:translate(6px,2px);clip-path:inset(40% 0 30% 0)}72%{opacity:0}88%{opacity:.8;transform:translate(-4px,0);clip-path:inset(5% 0 80% 0)}90%{opacity:0}}
@keyframes vcGc{0%,48%,100%{opacity:0;transform:none}50%{opacity:.85;transform:translate(8px,0);clip-path:inset(30% 0 45% 0)}54%{opacity:.85;transform:translate(-5px,-2px);clip-path:inset(62% 0 12% 0)}58%{opacity:0}}
.panel.vc-glitch.vc-live .art>img.media.poster{animation:vcStutter 2.3s steps(1) infinite}
@keyframes vcStutter{0%,70%,100%{translate:0 0}71%{translate:5px -3px}73%{translate:-4px 1px}75%{translate:0 0}91%{translate:-6px 0}92%{translate:0 0}}
.vc-scan{position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,#0000 0 3px,#0002 3px 4px);z-index:2}
canvas.vc-rain{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:2;mix-blend-mode:screen}

/* a glitch tear across a join: the two panels on either side slice and split for a moment */
.panel.vc-tearing .art{animation:vcTear .42s steps(1)}
@keyframes vcTear{0%{clip-path:inset(0 0 62% 0);translate:-14px 0;filter:hue-rotate(80deg) saturate(2)}20%{clip-path:inset(38% 0 20% 0);translate:12px 0}
  40%{clip-path:inset(70% 0 0 0);translate:-8px 0;filter:invert(1)}60%{clip-path:inset(0 0 30% 0);translate:6px 0;filter:none}80%{clip-path:none;translate:-3px 0}100%{clip-path:none;translate:0 0;filter:none}}

/* the beam that passes through */
.panel.vc-beam .art::after{content:"";position:absolute;left:-20%;right:-20%;top:40%;height:12%;background:linear-gradient(90deg,#0000,var(--vc-gold),#fff,var(--vc-gold),#0000);filter:blur(5px);opacity:0;z-index:3;transform:rotate(-22deg);pointer-events:none}
.panel.vc-beam.vc-fire .art::after{animation:vcBeam .9s ease-out}
@keyframes vcBeam{0%{opacity:0;transform:rotate(-22deg) scaleX(.15)}18%{opacity:1;transform:rotate(-22deg) scaleX(1)}100%{opacity:0;transform:rotate(-22deg) scaleX(1)}}
.vc-flash{position:absolute;inset:0;background:#fff;z-index:7;pointer-events:none;animation:vcFlash .3s ease-out forwards}
@keyframes vcFlash{from{opacity:.95}to{opacity:0}}

/* the door closes */
.vc-leaf{position:absolute;top:0;bottom:0;width:51%;background:linear-gradient(90deg,#08080c,#16161d);z-index:3;transition:transform 1s cubic-bezier(.7,0,.2,1);pointer-events:none}
.vc-leaf.l{left:0;transform:translateX(-100%);box-shadow:inset -3px 0 0 #22e6ff55}.vc-leaf.r{right:0;transform:translateX(100%);box-shadow:inset 3px 0 0 #22e6ff55}
.panel.vc-shut .vc-leaf{transform:none}

/* debug lens: hover (mouse) or press-and-hold (touch) to see the code layer; it also flickers on its own */
.panel.vc-lens .art{-webkit-touch-callout:none;user-select:none}
.vc-lensview{position:absolute;inset:0;z-index:4;pointer-events:none;opacity:0;
  -webkit-mask-image:radial-gradient(circle calc(var(--lr,0) * 1px) at var(--lx,50%) var(--ly,50%),#000 62%,#0000 100%);
  mask-image:radial-gradient(circle calc(var(--lr,0) * 1px) at var(--lx,50%) var(--ly,50%),#000 62%,#0000 100%)}
.vc-lensview.on{opacity:1}
.vc-lensview.band{opacity:1;-webkit-mask-image:linear-gradient(#0000 var(--b0),#000 var(--b0),#000 var(--b1),#0000 var(--b1));mask-image:linear-gradient(#0000 var(--b0),#000 var(--b0),#000 var(--b1),#0000 var(--b1))}
.vc-lensview img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.8) brightness(.55) sepia(1) hue-rotate(70deg) saturate(4)}
.vc-lensview .grid{position:absolute;inset:0;background:linear-gradient(#3dff8a33 1px,#0000 1px) 0 0/16px 16px,linear-gradient(90deg,#3dff8a33 1px,#0000 1px) 0 0/16px 16px}
.vc-lensview pre{position:absolute;left:6%;right:6%;top:10%;margin:0;font:500 11px/1.5 'JetBrains Mono',monospace;color:#b6ffd2;text-shadow:0 0 6px #3dff8a;white-space:pre-wrap;word-break:break-all}
.vc-debug{position:absolute;right:3%;top:3%;z-index:5;font:700 9.5px/1 'JetBrains Mono',monospace;letter-spacing:.18em;color:var(--vc-gr);background:#000a;border:1px solid #3dff8a88;padding:5px 7px;pointer-events:none;animation:vcPulse 2.4s ease-in-out infinite}
@keyframes vcPulse{50%{opacity:.45}}

/* the reader HUD */
.vc-hudchip{position:fixed;top:calc(var(--bar) + 8px);left:50%;transform:translateX(calc(var(--col) / 2 - 100% - 10px));z-index:39;pointer-events:none;
  font:700 10.5px/1 'JetBrains Mono',monospace;letter-spacing:.14em;color:var(--vc-amber);background:#0d0800d9;border:1px solid #ffb23f99;padding:6px 9px;border-radius:2px;
  box-shadow:0 0 14px #ffb23f33;opacity:0;transition:opacity .4s,top .3s}
body.vc-started .vc-hudchip{opacity:1}
.mw-bar.hide~.vc-hudchip,.vc-hudchip.vc-barhidden{top:8px}
.vc-hudchip.vc-up{animation:vcUp .9s ease-out}
@keyframes vcUp{0%{background:var(--vc-amber);color:#1a0f00;transform:translateX(calc(var(--col) / 2 - 100% - 10px)) scale(1.25)}100%{}}

/* results screen */
.vc-results{margin:22px auto 0;max-width:340px;text-align:left;font:700 13px/1.6 'JetBrains Mono',monospace;color:var(--vc-amber);background:#120a00;border:1.5px solid var(--vc-amber);box-shadow:0 0 24px #ffb23f44;padding:14px 16px}
.vc-results h3{margin:0 0 8px;font:400 26px/1 Bangers,sans-serif;letter-spacing:.06em;color:#fff;text-shadow:0 0 12px var(--vc-amber)}
.vc-results dl{display:grid;grid-template-columns:1fr auto;gap:2px 12px;margin:0}
.vc-results dt{color:#c9a46a}.vc-results dd{margin:0;color:#fff}

.cover .logo.vc-logo em{font-style:normal;color:var(--vc-cy);text-shadow:0 0 14px var(--vc-cy)}

@media (prefers-reduced-motion:reduce){
  .panel.vc-glitch .vc-ghost,.vc-scan,canvas.vc-rain{display:none}
  .panel.vc-glitch.vc-live .art>img.media.poster,.panel.vc-tearing .art,.vc-debug{animation:none}
  .tag.vc-vsfx.on span{transition:none}
}

/* fixes after the first tap-through */
.vc-hudchip{white-space:nowrap}
.tag.vc-hud{display:none}
body[data-series=vibe-coder] .cover .logo.vc-logo{font:400 clamp(30px,10cqw,52px)/.95 Bangers,Impact,sans-serif;letter-spacing:.02em;color:#fff;-webkit-text-stroke:1.5px #000;paint-order:stroke fill;text-shadow:3px 3px 0 #000}
body[data-series=vibe-coder] .cover .logo.vc-logo span:first-child{font-size:.62em;color:#e8e2d6}
body[data-series=vibe-coder] .cover-title{top:auto;bottom:calc(46svh)}

/* the System pauses the world */
.tag.vc-paused{left:0!important;width:100%;text-align:center;z-index:7}
.vc-pz{display:inline-block;font:700 clamp(30px,11cqw,58px)/1 'JetBrains Mono',monospace;letter-spacing:.18em;color:var(--vc-amber);background:#0d0800cc;border-top:2px solid var(--vc-amber);border-bottom:2px solid var(--vc-amber);padding:10px 0;width:100%;text-shadow:0 0 18px #ffb23f}
.tag.vc-paused.vc-pz-in .vc-pz{animation:vcPz .5s steps(4)}
@keyframes vcPz{0%{clip-path:inset(0 100% 0 0)}100%{clip-path:inset(0)}}
.panel.vc-frozen .art>img.media,.panel.vc-frozen .art>video.media{filter:saturate(.45) brightness(.75) contrast(1.1);transition:filter .3s steps(3)}
.panel.vc-frozen .vc-ghost,.panel.vc-frozen .vc-scan{display:none}
.panel.vc-frozen.vc-live .art>img.media.poster{animation:none}

/* quest and reward cards */
.tag.vc-sys.vc-quest{color:var(--vc-gold);border-color:var(--vc-gold);box-shadow:0 0 0 1px #000,0 0 24px #ffd36b66,inset 0 0 18px #ffd36b22}
.tag.vc-sys.vc-quest .vc-hd{color:#9a7a2a;border-color:#9a7a2a88}
.tag.vc-sys.vc-loot{color:#7dffb0;border-color:#3dff8a;background:#001a0cec;box-shadow:0 0 0 1px #000,0 0 24px #3dff8a55,inset 0 0 18px #3dff8a22}
.tag.vc-sys.vc-loot .vc-hd{color:#2f9a5a;border-color:#2f9a5a88}
.tag.vc-sys.vc-quest .vc-cur{background:var(--vc-gold)}.tag.vc-sys.vc-loot .vc-cur{background:#3dff8a}

/* character entrance card */
.tag.vc-intro{z-index:8}
.vc-card{background:linear-gradient(100deg,#000e 0%,#000c 70%,#0000 100%);border-left:4px solid var(--vc-gold);padding:10px 14px 12px;color:#fff;
  font:700 12px/1.3 'JetBrains Mono',monospace;max-width:92%;box-shadow:0 0 30px #0008}
.vc-card-kicker{font-size:9.5px;letter-spacing:.3em;color:var(--vc-gold)}
.vc-card-name{font:400 clamp(34px,11cqw,58px)/.95 Bangers,Impact,sans-serif;letter-spacing:.04em;margin:4px 0 2px;text-shadow:3px 3px 0 #000}
.vc-card-title{font-size:12px;color:#d8d0c0;letter-spacing:.08em;margin-bottom:8px}
.vc-card-row{display:flex;gap:10px;align-items:baseline;margin-top:3px}
.vc-card-k{font-size:9.5px;letter-spacing:.22em;color:#9a8f7a;min-width:70px}
.vc-card-v{color:#ffd36b}.vc-card-aff{color:#ff6b9a;letter-spacing:.12em;font-size:14px}
.vc-card.vc-card-in{animation:vcCard .55s cubic-bezier(.2,1.4,.4,1)}
.vc-card.vc-card-in .vc-card-name{animation:vcCardName .5s .12s both cubic-bezier(.2,1.6,.4,1)}
@keyframes vcCard{0%{transform:translateX(-110%) skewX(-12deg);opacity:0}100%{transform:none;opacity:1}}
@keyframes vcCardName{0%{transform:scale(1.8);opacity:0}100%{transform:none;opacity:1}}

/* suspicion meter */
.tag.vc-sus{z-index:8}
.vc-susbox{font:700 clamp(11px,3.3cqw,14px)/1.4 'JetBrains Mono',monospace;color:#ff8a8a;background:#1a0505ec;border:1.5px solid #ff4d4d;box-shadow:0 0 0 1px #000,0 0 22px #ff4d4d55;padding:9px 12px 11px}
.vc-susbox .vc-hd{color:#9a3a3a;border-color:#9a3a3a88}
.vc-susrow{display:grid;grid-template-columns:5.5em 1fr 3.4em;gap:8px;align-items:center;margin-top:5px}
.vc-suswho{color:#fff}.vc-suspct{text-align:right;color:#ff8a8a}
.vc-susbar{height:8px;background:#3a1010;border:1px solid #6a2020;position:relative;overflow:hidden}
.vc-susbar i{position:absolute;inset:0 auto 0 0;background:linear-gradient(90deg,#ff4d4d,#ffb23f);transition:width 1.1s cubic-bezier(.2,.8,.2,1)}
.vc-susbar.vc-unknown i{background:repeating-linear-gradient(90deg,#ff4d4d 0 6px,#0000 6px 12px);animation:vcPulse 1.4s ease-in-out infinite}
.vc-susnote{grid-column:1 / -1;font-size:.82em;color:#c98a8a;font-weight:500}
/* rumours: whispers in the gutter */
.tag.vc-rumour{font:italic 600 clamp(13px,3.9cqw,17px)/1.3 'Shantell Sans',sans-serif;color:var(--vc-ink);opacity:.0}
.tag.vc-rumour.on{opacity:.82}
.tag.vc-rumour::before{content:'psst… ';font-size:.72em;letter-spacing:.1em;opacity:.6}

/* blocks get raised by z-index when their lettering shows (vibe-coder.js); panels must be positioned */
body[data-series=vibe-coder] .panel{position:relative}

/* VFX pass (Ep 2-11 parity with Ep 1) */
.panel.vc-wrain .art::before{content:"";position:absolute;inset:-20% 0 0;z-index:3;pointer-events:none;opacity:.55;
  background:repeating-linear-gradient(103deg,#0000 0 9px,#cfe8ff55 9px 10px,#0000 10px 23px);background-size:120px 120px;animation:vcRain .45s linear infinite}
@keyframes vcRain{to{background-position:-30px 120px}}
.panel.vc-motes .art::after{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;mix-blend-mode:screen;
  background:radial-gradient(circle,#ffd99a 0 1.5px,#0000 2.5px) 0 0/46px 52px,radial-gradient(circle,#ffe7c2 0 1px,#0000 2px) 21px 17px/63px 71px;
  opacity:.7;animation:vcMotes 14s linear infinite}
@keyframes vcMotes{to{background-position:0 -520px,21px -726px}}
.panel.vc-shine .art::after{content:"";position:absolute;inset:-30%;z-index:3;pointer-events:none;mix-blend-mode:screen;
  background:conic-gradient(from 0deg at 50% 45%,#0000 0 10%,#ffe9b022 12%,#0000 15% 35%,#ffe9b01c 38%,#0000 41% 60%,#ffe9b022 63%,#0000 66% 85%,#ffe9b01a 88%,#0000 91%);
  animation:vcSpin 18s linear infinite}
@keyframes vcSpin{to{transform:rotate(360deg)}}
.panel.vc-motes.vc-shine .art::after{animation:vcMotes 14s linear infinite}
@media (prefers-reduced-motion:reduce){.panel.vc-wrain .art::before,.panel.vc-motes .art::after,.panel.vc-shine .art::after{animation:none}}

/* Lettering never rides the camera (user caught cards cropped by push/zoom): the engine's camera animates `transform`
   on every art child, so all vc lettering pins transform to none and animates with the independent scale/translate/rotate properties. */
.tag[class*="vc-"]{transform:none!important}
.js .tag.vc-sys,.js .tag.vc-menu{scale:1 .04;transition:scale .22s cubic-bezier(.2,1.4,.4,1),opacity .1s!important}
.js .tag.vc-sys.on,.js .tag.vc-menu.on{scale:none}
.tag.vc-big{translate:0 10px;transition:opacity .45s,translate .6s cubic-bezier(.2,.8,.2,1)!important}
.tag.vc-big.on{translate:none}
.js .tag.vc-jag{scale:.6;transition:opacity .15s,scale .3s cubic-bezier(.2,1.6,.4,1)!important}
.js .tag.vc-jag.on{scale:none;rotate:-3deg}
.tag.vc-count.vc-pop{animation:vcPop2 .5s cubic-bezier(.2,1.6,.4,1)}
.tag.vc-count.vc-dead.vc-pop{animation:vcThud2 .45s}
@keyframes vcPop2{0%{scale:1.6}100%{scale:1}}
@keyframes vcThud2{0%{translate:0 -10px}40%{translate:0 3px}100%{translate:0 0}}

/* RPG layer: Status window, LEVEL UP, +XP, random quest offer */
.tag.vc-status,.tag.vc-offer,.tag.vc-levelup{z-index:8;pointer-events:auto}
.vc-stat,.vc-offerbox{font:700 clamp(11px,3.3cqw,14px)/1.45 'JetBrains Mono',monospace;color:#bfe9ff;background:#020d16ee;border:1.5px solid #22e6ff;
  box-shadow:0 0 0 1px #000,0 0 26px #22e6ff55,inset 0 0 20px #22e6ff1a;padding:10px 12px 12px}
.vc-stat .vc-hd,.vc-offerbox .vc-hd{color:#2a8aa8;border-color:#2a8aa888}
.vc-stat-top{display:flex;gap:10px;align-items:baseline}.vc-stat-top b{font:400 26px/1 Bangers,sans-serif;letter-spacing:.06em;color:#fff}
.vc-stat-lv{margin-left:auto;color:#ffd36b;font-size:1.2em}
.vc-stat-xp{position:relative;height:16px;background:#06222e;border:1px solid #1a6a85;margin:6px 0 8px;overflow:hidden}
.vc-stat-xp i{position:absolute;inset:0 auto 0 0;background:linear-gradient(90deg,#22e6ff,#3dff8a);transition:width 1.2s cubic-bezier(.2,.8,.2,1)}
.vc-stat-xp span{position:relative;font-size:10px;padding-left:6px;color:#02141c;mix-blend-mode:normal;text-shadow:0 0 2px #bfffff}
.vc-stat-row{display:flex;flex-wrap:wrap;gap:4px 12px;margin-top:3px}.vc-stat-k{color:#2a8aa8;min-width:4.6em;letter-spacing:.12em;font-size:.82em}.vc-stat-v{color:#e8fbff}
.vc-lvup{text-align:center;padding:10px 0;background:radial-gradient(ellipse at center,#ffd36b55 0,#0000 70%)}
.vc-lvup-t{font:400 clamp(46px,15cqw,80px)/.9 Bangers,Impact,sans-serif;letter-spacing:.05em;color:#ffe9a8;-webkit-text-stroke:2px #3a2600;paint-order:stroke fill;text-shadow:0 0 24px #ffb000,4px 4px 0 #000}
.vc-lvup-n{font:700 15px 'JetBrains Mono',monospace;color:#fff;letter-spacing:.2em;text-shadow:2px 2px 0 #000}
.vc-lvup.vc-lvup-in .vc-lvup-t{animation:vcLv .7s cubic-bezier(.2,1.7,.4,1)}
@keyframes vcLv{0%{scale:2.2;opacity:0;filter:brightness(3)}60%{opacity:1}100%{scale:1;filter:none}}
.tag.vc-xp{z-index:9;width:auto!important}.vc-xp-t{font:400 clamp(26px,8cqw,40px)/1 Bangers,sans-serif;color:#3dff8a;-webkit-text-stroke:1.5px #00220e;paint-order:stroke fill;text-shadow:0 0 14px #3dff8a,2px 2px 0 #000;display:inline-block}
.tag.vc-xp.vc-xp-in .vc-xp-t{animation:vcXp 1.4s ease-out forwards}
@keyframes vcXp{0%{translate:0 20px;opacity:0;scale:.6}20%{opacity:1;scale:1.15}100%{translate:0 -40px;opacity:0;scale:1}}
.tag.vc-xp.beat-committed .vc-xp-t{animation:none;opacity:1}
.vc-dim{color:#7fb7c9}
@media (prefers-reduced-motion:reduce){.vc-lvup-t,.vc-xp-t{animation:none!important;opacity:1}}
/* lettering is always the top layer of a block: above SFX, VFX, system cards, flashes and swap layers (user, 21 Oct 2026) */
body[data-series=vibe-coder] .bubble{z-index:20}

/* Earth phone cards (Ep 1 cold open): iOS-ish lock-screen notification, white glass, never amber System UI */
.tag.vc-phone{z-index:8}
.vc-phonebox{display:grid;grid-template-columns:auto 1fr;gap:2px 10px;align-items:center;padding:11px 13px 12px;border-radius:16px;background:rgba(245,247,250,.94);color:#16181c;
  box-shadow:0 10px 30px #0008,0 0 0 1px #fff3;font:500 clamp(13px,3.9cqw,17px)/1.3 system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;animation:vcPhoneIn .45s cubic-bezier(.2,1.3,.4,1) both}
.vc-ph-icon{grid-row:span 2;width:30px;height:30px;border-radius:8px;display:grid;place-items:center;background:#3dbb5f;color:#fff;font-weight:700}
.vc-ph-meta{display:flex;justify-content:space-between;font-size:.8em;color:#5d6470;text-transform:uppercase;letter-spacing:.04em}
.vc-ph-meta b{color:#16181c}
.vc-ph-body{grid-column:2}
@keyframes vcPhoneIn{from{opacity:0;transform:translateY(-12px) scale(.96)}}
@media (prefers-reduced-motion:reduce){.vc-phonebox{animation:none}}

/* game menu (vc-gm): amber System glass, a tab strip, a cursor that walks the rows */
.tag.vc-gm{z-index:8;font:700 clamp(11px,3.3cqw,15px)/1.45 'JetBrains Mono',ui-monospace,monospace;color:var(--vc-amber);background:#120a00f0;border:1.5px solid var(--vc-amber);
  box-shadow:0 0 0 1px #000,0 0 24px #ffb23f66,inset 0 0 18px #ffb23f22;padding:9px 10px 11px}
.vc-gm-tabs{display:flex;gap:4px;margin:0 0 7px;font-size:.72em;letter-spacing:.06em;color:var(--vc-amber-dim);flex-wrap:wrap}
.vc-gm-tabs span{padding:2px 5px;border:1px solid #8a5a1455}
.vc-gm-tabs span.on{color:#120a00;background:var(--vc-amber);border-color:var(--vc-amber)}
.vc-gm-row{padding:2px 6px;border-left:2px solid transparent;white-space:pre-wrap;transition:background .15s,border-color .15s}
.vc-gm-row.seen{color:#ffe3b0}
.vc-gm-row.cur{background:#ffb23f2e;border-left-color:var(--vc-amber)}
.vc-gm-row.cur::before{content:'▸ ';}
.vc-gm-sub{padding:0 6px 3px 18px;font-weight:500;font-size:.88em;color:#d29a4a;white-space:pre-wrap}
.vc-gm-warn{color:#ff7a5c}

/* ---- murim-study lessons (21 Oct 2026) ---- */
/* light follows emotion: the same face, washed by the beat, not the scene */
.panel.vc-wash-green .art img,.panel.vc-wash-green .art video{filter:sepia(.45) hue-rotate(55deg) saturate(1.25) brightness(.88)}
.panel.vc-wash-gold .art img,.panel.vc-wash-gold .art video{filter:sepia(.55) saturate(1.5) brightness(1.06)}
.panel.vc-wash-blue .art img,.panel.vc-wash-blue .art video{filter:sepia(.35) hue-rotate(175deg) saturate(1.15) brightness(.82)}
.panel.vc-wash-violet .art img,.panel.vc-wash-violet .art video{filter:sepia(.35) hue-rotate(225deg) saturate(1.2) brightness(.85)}
/* shorthand tier: a reaction face on flat colour, small, offset, hard-edged */
.panel.vc-short .art{border:2px solid #0d0b0a;box-shadow:4px 5px 0 #0008}
/* bare coloured narration on the field (no box): red death, violet grief, blue resolve */
.tag.vc-narr{font:italic 600 clamp(20px,6.4cqw,32px)/1.18 'Cormorant Garamond',Georgia,serif;text-align:center;letter-spacing:.01em;z-index:9;
  text-shadow:0 0 18px #000c,0 2px 2px #000a}
.tag.vc-narr-red{color:#ff4a5a}.tag.vc-narr-violet{color:#c6a6ff}.tag.vc-narr-blue{color:#8cc4ff}
.js .tag.vc-narr{opacity:0;filter:blur(4px);transition:opacity .9s ease,filter .9s ease}
.js .tag.vc-narr.on{opacity:1;filter:none}
/* stage directions lettered as art: GLARE, STARE, FLICK */
.tag.vc-stage{width:auto!important;font:400 clamp(20px,6cqw,30px)/1 Bangers,Impact,sans-serif;letter-spacing:.08em;color:#d9c8ff;-webkit-text-stroke:1.2px #1a1030;paint-order:stroke fill;
  text-shadow:2px 2px 0 #0008;rotate:-6deg;z-index:9}
.js .tag.vc-stage{opacity:0;translate:0 6px;transition:opacity .25s,translate .3s cubic-bezier(.2,1.5,.4,1)}
.js .tag.vc-stage.on{opacity:1;translate:0 0}

/* the free-trial stamp (user, 22 Oct 2026: "really highlight Free Trial"); planted in Read-Only, stamped ENDED in the Witch */
.tag.vc-trial{z-index:9;display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center;rotate:-6deg;
  font:400 clamp(40px,13cqw,72px)/.9 Bangers,Impact,sans-serif;letter-spacing:.06em;color:#ffb23f;
  border:4px solid #ffb23f;border-radius:6px;padding:10px 16px 12px;background:#120a00cc;box-shadow:0 0 0 2px #000,0 0 28px #ffb23f55;text-shadow:2px 2px 0 #000}
.tag.vc-trial small{font:700 clamp(12px,3.4cqw,16px)/1.2 'JetBrains Mono',ui-monospace,monospace;letter-spacing:.08em;color:#ffe3b0;text-shadow:none}
.tag.vc-trial.vc-ended{color:#ff4a5a;border-color:#ff4a5a;box-shadow:0 0 0 2px #000,0 0 28px #ff4a5a55}
.js .tag.vc-trial{opacity:0;scale:1.8;transition:opacity .15s,scale .35s cubic-bezier(.2,1.6,.4,1)}
.js .tag.vc-trial.on{opacity:1;scale:1}