/* VAMPIR3 D3F3NSE 1.1.0 — every rule scoped under .tlt-vd. The art is his: the surround behind the court on a computer,
   the ledger glass behind the results, the pad buttons on a phone, the title. */
.tlt-vd{--bt:#11171E;--indigo:#283E63;--teal:#52E0DC;--red:#C73358;--cream:#EFE5CE;--violet:#8C6BDD;--glass:rgba(10,14,24,.86);--edge:rgba(239,229,206,.16);
  display:block;position:relative;margin:0;background:#070a12;color:var(--cream);font-family:Barlow,"Helvetica Neue",Arial,sans-serif;
  -webkit-font-smoothing:antialiased;overscroll-behavior:none;touch-action:manipulation}
.tlt-vd *{box-sizing:border-box}
.tlt-vd img{-webkit-user-drag:none;user-select:none}
.tlt-vd #vd-wrap{position:relative;min-height:100dvh;display:flex;align-items:center;justify-content:center;padding:10px 10px 28px;
  background:#070a12 radial-gradient(ellipse at 50% 0%,#1a2440 0%,#0a0e1c 55%,#060811 100%)}
@media (min-width:900px){.tlt-vd #vd-wrap{background-image:var(--vd-surround);background-size:cover;background-position:center}}
.tlt-vd #vd-cab{position:relative;display:flex;flex-direction:column;align-items:center;background:linear-gradient(180deg,rgba(17,23,30,.92),rgba(7,10,18,.96));
  border:1px solid rgba(82,224,220,.22);border-radius:16px;padding:10px;box-shadow:0 0 0 1px #05070c,0 24px 60px rgba(0,0,0,.7),0 0 40px rgba(199,51,88,.12)}
.tlt-vd #vd-cab.full{position:fixed;inset:0;z-index:99;border-radius:0;border:none;justify-content:center;padding:6px;
  background:#070a12 var(--vd-surround) center/cover no-repeat}
.tlt-vd .vd-stage{position:relative;display:flex;align-items:center;justify-content:center}
.tlt-vd canvas{display:block;background:#0b1018;border-radius:12px;box-shadow:0 0 0 1px rgba(82,224,220,.14),0 18px 50px rgba(0,0,0,.6);touch-action:none}
.tlt-vd #vd-cab.full canvas{border-radius:8px}
.tlt-vd .vd-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:12px;border-radius:12px;overflow:hidden}
.tlt-vd .vd-overlay[hidden]{display:none}
.tlt-vd .vd-panel{width:min(100%,420px);max-height:100%;overflow:auto;background:var(--glass);border:1px solid var(--edge);border-radius:16px;padding:18px 20px;text-align:center;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);scrollbar-width:thin}
.tlt-vd .vd-panel--title{background:rgba(7,10,18,.78)}
.tlt-vd .vd-panel--over{background:#0a0e18 var(--vd-ledger) center/cover no-repeat;padding:16px 18px}
.tlt-vd .vd-logo{display:block;width:min(100%,300px);height:auto;margin:0 auto 6px;filter:drop-shadow(0 8px 22px rgba(199,51,88,.45))}
.tlt-vd .vd-eyebrow{margin:0 0 6px;font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--teal);font-weight:800}
.tlt-vd .vd-h2{margin:0;font:900 30px/1 "Barlow Condensed",Impact,"Arial Narrow",sans-serif;letter-spacing:.02em;color:var(--cream);text-shadow:0 0 18px rgba(199,51,88,.55)}
.tlt-vd .vd-sub{margin:6px 0 12px;color:rgba(239,229,206,.74);font-size:14px;line-height:1.4}
.tlt-vd .vd-tiers{display:flex;gap:7px;justify-content:center;margin:0 0 12px}
.tlt-vd .vd-tiers button{font-family:"Barlow Condensed",Impact,sans-serif;font-size:15px;letter-spacing:.12em;padding:8px 13px;border-radius:8px;cursor:pointer;
  background:#0b1018;border:1px solid rgba(82,224,220,.28);color:#8fa3a8}
.tlt-vd .vd-tiers button.sel{border-color:var(--red);color:var(--cream);background:#1a0f16;box-shadow:inset 0 0 12px rgba(199,51,88,.35),0 0 14px rgba(199,51,88,.25)}
.tlt-vd .vd-hlabel{display:block;color:rgba(239,229,206,.5);font-size:11px;letter-spacing:.22em;margin:0 0 5px}
.tlt-vd .vd-handle{width:100%;max-width:260px;margin:0 auto 10px;display:block;padding:10px 12px;border-radius:10px;border:1px solid rgba(82,224,220,.3);background:#0b1018;color:var(--cream);
  font:600 17px/1 Barlow,sans-serif;text-align:center;letter-spacing:.06em;outline:none}
.tlt-vd .vd-handle:focus{border-color:var(--teal);box-shadow:0 0 0 2px rgba(82,224,220,.18)}
.tlt-vd .vd-handle::placeholder{color:#3e5056;letter-spacing:.04em}
.tlt-vd .vd-row{display:flex;gap:6px;justify-content:center;flex-wrap:wrap}
.tlt-vd .vd-btn{appearance:none;border:0;border-radius:12px;padding:13px 22px;font:800 18px/1 "Barlow Condensed",Impact,sans-serif;letter-spacing:.12em;color:#0b0f14;
  background:linear-gradient(180deg,#f2d9a4,#e1b457);cursor:pointer;margin:4px 2px;box-shadow:0 0 22px rgba(225,180,87,.25)}
.tlt-vd .vd-btn:active{transform:translateY(1px)}
.tlt-vd .vd-btn[disabled]{background:#1b2528;color:#4e6167;box-shadow:none;cursor:default}
.tlt-vd .vd-btn.is-ghost{background:transparent;color:var(--cream);border:1px solid var(--edge);box-shadow:none}
.tlt-vd .vd-howto{max-width:340px;margin:10px auto 0;color:#a9bbc0;font-size:14px;line-height:1.45;text-align:left;border-top:1px solid rgba(82,224,220,.18);padding-top:10px}
.tlt-vd .vd-howto[hidden]{display:none}
.tlt-vd .vd-howto b{color:var(--cream)}
.tlt-vd .vd-best{margin:10px 0 0;color:var(--teal);font-size:12px;letter-spacing:.14em;text-transform:uppercase;min-height:14px}
.tlt-vd .vd-overhead{display:flex;gap:12px;align-items:center;text-align:left;margin:0 0 8px}
.tlt-vd .vd-portrait{width:72px;height:72px;flex:0 0 72px;border-radius:50%;border:2px solid rgba(199,51,88,.6);box-shadow:0 0 18px rgba(199,51,88,.4)}
.tlt-vd .vd-stats{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:8px 0;text-align:left}
.tlt-vd .vd-stat{background:rgba(17,23,30,.82);border:1px solid var(--edge);border-radius:10px;padding:8px 10px}
.tlt-vd .vd-stat small{display:block;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:rgba(239,229,206,.55)}
.tlt-vd .vd-stat b{font:700 22px/1.1 "Barlow Condensed",Impact,sans-serif;color:var(--cream);font-variant-numeric:tabular-nums}
.tlt-vd .vd-stat b.neg{color:#E35F5F}
.tlt-vd .vd-ledger{font-family:ui-monospace,Menlo,monospace;font-size:11.5px;color:rgba(239,229,206,.7);text-align:left;margin:0 0 10px;white-space:pre-line;line-height:1.5}
.tlt-vd .vd-board{position:relative;border:1px solid rgba(82,224,220,.25);border-radius:9px;background:rgba(11,16,24,.9);overflow:hidden;text-align:left;margin:0 0 10px}
.tlt-vd .vd-bhead{display:flex;justify-content:space-between;align-items:center;padding:6px 10px;background:rgba(16,22,34,.95);border-bottom:1px solid rgba(82,224,220,.2);color:#7d9298;font-size:10.5px;letter-spacing:.2em}
.tlt-vd .vd-blist{position:relative;height:196px;overflow-y:auto;scrollbar-width:thin}
.tlt-vd .vd-brow{display:grid;grid-template-columns:40px 1fr auto;gap:8px;padding:4px 10px;font-size:13px;color:#8fa3a8;letter-spacing:.04em;border-bottom:1px solid rgba(36,51,58,.5);font-family:"Barlow Condensed",Impact,sans-serif;font-variant-numeric:tabular-nums}
.tlt-vd .vd-brow .rk{color:#4e6167}
.tlt-vd .vd-brow .hd{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tlt-vd .vd-brow .sc{color:#a9bbc0}
.tlt-vd .vd-brow.top3{background:rgba(225,180,87,.06)}
.tlt-vd .vd-brow.top3 .rk,.tlt-vd .vd-brow.top3 .sc{color:#e1b457}
.tlt-vd .vd-brow.member .hd{color:#9bbf82}
.tlt-vd .vd-brow.me{background:rgba(199,51,88,.22);color:var(--cream)}
.tlt-vd .vd-brow.me .rk,.tlt-vd .vd-brow.me .sc{color:var(--teal)}
.tlt-vd .vd-brow.off{opacity:.45}
.tlt-vd .vd-bland{padding:6px 10px;color:#7e9298;font-size:12px;letter-spacing:.08em;background:rgba(14,20,30,.95);border-top:1px solid rgba(82,224,220,.2)}
.tlt-vd .vd-bland b{color:var(--teal)}
.tlt-vd .vd-bland.bad b{color:#E35F5F}
.tlt-vd .vd-board.thud{animation:vd-thud .34s ease-out}
.tlt-vd .vd-board.crash{animation:vd-crash .5s ease-out}
@keyframes vd-thud{30%{transform:translateY(4px)}60%{transform:translateY(-2px)}}
@keyframes vd-crash{15%{transform:translate(3px,7px)}35%{transform:translate(-4px,-3px)}55%{transform:translate(3px,3px)}75%{transform:translate(-2px,0)}}
/* the four pad buttons: his renders, idle and pressed */
.tlt-vd .vd-pads{display:none;width:100%;max-width:420px;margin-top:8px;padding:0 0 calc(2px + env(safe-area-inset-bottom))}
.tlt-vd .vd-pads.on{display:block}
.tlt-vd .vd-pads .tl3pad{--tl3pad-face:rgba(199,51,88,.14);--tl3pad-edge:rgba(199,51,88,.55);--tl3pad-ink:#F4EFE6;--tl3pad-on:rgba(199,51,88,.6);--tl3pad-on-ink:#FFE1E8;--tl3pad-art-up:var(--vd-pads-u);--tl3pad-art-down:var(--vd-pads-d);--tl3pad-art-left:var(--vd-pads-l);--tl3pad-art-right:var(--vd-pads-r);--tl3pad-art-up-on:var(--vd-pads-u2);--tl3pad-art-down-on:var(--vd-pads-d2);--tl3pad-art-left-on:var(--vd-pads-l2);--tl3pad-art-right-on:var(--vd-pads-r2)}
.tlt-vd .vd-touchonly{display:none}.tlt-vd.vd-touch .vd-touchonly{display:inline-block}
.tlt-vd .vd-pad{appearance:none;border:0;background:transparent center/contain no-repeat;border-radius:14px;cursor:pointer;user-select:none;-webkit-user-select:none;touch-action:none;-webkit-tap-highlight-color:transparent;height:64px}
.tlt-vd .vd-pad[data-d="up"]{grid-column:2;grid-row:1;background-image:var(--vd-pads-u)}
.tlt-vd .vd-pad[data-d="left"]{grid-column:1;grid-row:2;background-image:var(--vd-pads-l)}
.tlt-vd .vd-pad[data-d="down"]{grid-column:2;grid-row:2;background-image:var(--vd-pads-d)}
.tlt-vd .vd-pad[data-d="right"]{grid-column:3;grid-row:2;background-image:var(--vd-pads-r)}
.tlt-vd .vd-pad.is-down[data-d="up"]{background-image:var(--vd-pads-u2)}
.tlt-vd .vd-pad.is-down[data-d="left"]{background-image:var(--vd-pads-l2)}
.tlt-vd .vd-pad.is-down[data-d="down"]{background-image:var(--vd-pads-d2)}
.tlt-vd .vd-pad.is-down[data-d="right"]{background-image:var(--vd-pads-r2)}
.tlt-vd .vd-chrome{position:relative;z-index:5;display:flex;gap:6px;justify-content:flex-end;width:100%;margin-top:8px}
.tlt-vd .vd-chrome button{font-family:"Barlow Condensed",Impact,sans-serif;font-size:11px;letter-spacing:.16em;padding:5px 9px;border-radius:6px;background:rgba(12,18,24,.85);border:1px solid rgba(82,224,220,.25);color:#6e868c;cursor:pointer}
.tlt-vd .vd-chrome button.is-off{color:#4a5c61}
.tlt-vd .vd-note{position:absolute;left:0;right:0;bottom:6px;text-align:center;color:rgba(239,229,206,.3);font-size:10.5px;letter-spacing:.16em;pointer-events:none}
.tlt-vd #vd-cab.full ~ .vd-note{display:none}
@media (max-width:480px){.tlt-vd .vd-panel{padding:14px 14px}.tlt-vd .vd-h2{font-size:26px}.tlt-vd .vd-stat b{font-size:19px}.tlt-vd .vd-blist{height:150px}.tlt-vd .vd-ledger{font-size:10.5px;margin-bottom:8px}.tlt-vd .vd-stats{gap:6px;margin:6px 0}}
/* 1.1.0: on the TL3RDS STAGE (full screen) nothing in the cabinet reads the viewport; on a computer (tl3-desk) it is laid out at 640 design px, so the phone shrinks above come back to their desk values there (a phone keeps them) */
.tlt-vd #vd-wrap.tl3-full{min-height:0}
.tlt-vd #vd-wrap.tl3-full.tl3-desk .vd-panel{padding:18px 20px}
.tlt-vd #vd-wrap.tl3-full.tl3-desk .vd-panel--over{padding:16px 18px}
.tlt-vd #vd-wrap.tl3-full.tl3-desk .vd-h2{font-size:30px}
.tlt-vd #vd-wrap.tl3-full.tl3-desk .vd-stat b{font-size:22px}
.tlt-vd #vd-wrap.tl3-full.tl3-desk .vd-blist{height:196px}
.tlt-vd #vd-wrap.tl3-full.tl3-desk .vd-ledger{font-size:11.5px;margin-bottom:10px}
.tlt-vd #vd-wrap.tl3-full.tl3-desk .vd-stats{gap:8px;margin:8px 0}
/* 1.1.0: in the stage's full screen the night surround stays behind the cabinet */
.tlt-vd #vd-wrap.tl3-full{--tl3s-backdrop:var(--vd-surround,none)}
/* 1.2.4 (Tony, Oct 9: "vampir3 defense is organized weird … that shit is just floating in space"): on a computer the field
   stands in his machine — the bezel (bezel.webp, whole, never cropped) drawn around it, the screen in the bezel's window, his
   neon sign (title-wide.webp) in the bezel's marquee. Measured from the picture: window 89..422 × 200..672, marquee 62..450 × 52..150
   of 512 × 768. Phones keep the field edge to edge (the bezel would halve it there). */
.tlt-vd .vd-marq{display:none}
.tlt-vd #vd-wrap.tl3-desk #vd-cab{display:block;aspect-ratio:512/768;height:auto;padding:0;border:0;border-radius:0;
  background:transparent var(--vd-bezel) center/100% 100% no-repeat;box-shadow:none;isolation:isolate}
/* 1.2.5 (Oct 10): the cabinet's glow was a filter (two big drop-shadows) on the whole cabinet, so the browser re-drew it
   around the moving field every frame — about 10 frames a second on a computer while the other games ran near 60. The glow
   is now an ordinary shadow on a layer behind the cabinet, drawn once. */
.tlt-vd #vd-wrap.tl3-desk #vd-cab::before{content:"";position:absolute;left:4%;right:4%;top:2%;bottom:1%;z-index:-1;pointer-events:none;
  border-radius:9% / 6%;box-shadow:0 26px 60px rgba(0,0,0,.75),0 0 30px rgba(199,51,88,.18)}
.tlt-vd #vd-wrap.tl3-desk:not(.tl3-full) #vd-cab{width:min(640px,calc((100dvh - 48px) * 512 / 768))}
.tlt-vd #vd-wrap.tl3-desk #vd-cab > .vd-marq{display:flex;position:absolute;left:12.1%;top:6.8%;width:75.8%;height:12.8%;align-items:center;justify-content:center;pointer-events:none}
.tlt-vd #vd-wrap.tl3-desk #vd-cab > .vd-marq img{display:block;max-width:94%;max-height:86%;width:auto;height:auto;object-fit:contain;filter:drop-shadow(0 0 14px rgba(199,51,88,.45))}
.tlt-vd #vd-wrap.tl3-desk #vd-cab > .vd-stage{position:absolute;left:17.38%;top:26.04%;width:65.04%;height:61.46%;background:#05060a}
.tlt-vd #vd-wrap.tl3-desk #vd-cab > .vd-stage canvas{border-radius:2px;box-shadow:none}
.tlt-vd #vd-wrap.tl3-desk #vd-cab > .vd-chrome{position:absolute;left:0;right:0;bottom:2%;margin:0;justify-content:center}
.tlt-vd #vd-wrap.tl3-desk #vd-cab .vd-overlay{padding:8px}
.tlt-vd #vd-wrap.tl3-desk #vd-cab .vd-panel{padding:14px 14px}
.tlt-vd #vd-wrap.tl3-desk #vd-cab .vd-panel--title .vd-logo{display:none}   /* his sign on the machine already names it; the window keeps its room for the run */