/* ==========================================================================
   Kvali.Dev — tile previews.
   Every card runs a tiny hand-built animation of the thing it links to.
   Cost control: animations are paused unless the tile is on screen (.live),
   and "lite" mode freezes them all at a legible pose instead of running.
   ========================================================================== */

.pv{
  position:relative;aspect-ratio:16/10;overflow:hidden;
  background:#080b12;border-bottom:1px solid var(--line);
  font-family:var(--sans);
}
.pv::after{                       /* CRT scanlines + vignette, unifies everything */
  content:"";position:absolute;inset:0;pointer-events:none;z-index:9;
  background:repeating-linear-gradient(0deg,rgba(0,0,0,.22) 0 1px,transparent 1px 3px),
             radial-gradient(120% 90% at 50% 40%,transparent 55%,rgba(0,0,0,.55));
}
.pvbar{
  position:absolute;top:0;left:0;right:0;height:22px;z-index:8;
  display:flex;align-items:center;gap:5px;padding:0 9px;background:rgba(0,0,0,.34);
}
.pvbar i{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.22)}
.pvbar span{margin-left:7px;font-family:var(--mono);font-size:8.5px;letter-spacing:.05em;color:rgba(255,255,255,.6)}

/* only animate what the viewer can actually see */
.pv *{animation-play-state:paused}
.tile.live .pv *{animation-play-state:running}

/* lite mode: hold every preview at a readable frame, burn no frames */
:root[data-fx="lite"] .pv *{
  animation-play-state:paused!important;
  animation-delay:-2.4s!important;
}
:root[data-fx="lite"] .pv .bub,:root[data-fx="lite"] .pv .f-n,:root[data-fx="lite"] .pv .c-card,
:root[data-fx="lite"] .pv .x-m,:root[data-fx="lite"] .pv .a-box,:root[data-fx="lite"] .pv .u-e,
:root[data-fx="lite"] .pv .mem-c,:root[data-fx="lite"] .pv .wd-c,:root[data-fx="lite"] .pv .c4-d,
:root[data-fx="lite"] .pv .sud-n,:root[data-fx="lite"] .pv .jsn-l,:root[data-fx="lite"] .pv .enc-o,
:root[data-fx="lite"] .pv .hsh-o,:root[data-fx="lite"] .pv .qr-m,:root[data-fx="lite"] .pv .tg-2048{opacity:1}
:root[data-fx="lite"] .pv .q-row s{clip-path:none}
:root[data-fx="lite"] .pv .f-l{transform:none!important}

/* ==========================================================================
   1 · QALAQOBANA
   ========================================================================== */
.pv-q{background:linear-gradient(165deg,#0f2b1f,#0a1a14)}
.q-tile{
  position:absolute;top:32px;left:11px;width:38px;height:38px;border-radius:8px;
  background:linear-gradient(150deg,#2fae6b,#1a6b43);color:#fff;
  display:grid;place-items:center;font-family:var(--disp);font-weight:700;font-size:21px;
  box-shadow:0 6px 18px -6px rgba(47,174,107,.8);animation:flip 8s ease-in-out infinite;
}
.q-ring{position:absolute;top:30px;right:11px;width:40px;height:40px;transform:rotate(-90deg)}
.q-ring circle{fill:none;stroke-width:4}
.q-ring .t{stroke:rgba(255,255,255,.12)}
.q-ring .v{stroke:#5fd39a;stroke-linecap:round;stroke-dasharray:107;animation:drain 8s linear infinite}
.q-rows{position:absolute;left:11px;right:11px;top:80px;display:grid;gap:5px}
.q-row{display:flex;align-items:baseline;gap:6px}
.q-row b{font-family:var(--mono);font-size:7.5px;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.4);min-width:48px}
.q-row s{text-decoration:none;font-size:10px;font-weight:600;color:#e6fff2;white-space:nowrap;
  overflow:hidden;clip-path:inset(0 100% 0 0);animation:typein 8s ease infinite}
.q-row:nth-child(1) s{animation-delay:.3s}
.q-row:nth-child(2) s{animation-delay:1.1s}
.q-row:nth-child(3) s{animation-delay:1.9s}
.q-row:nth-child(4) s{animation-delay:2.7s}
.q-score{position:absolute;left:11px;bottom:9px;font-family:var(--mono);font-size:8.5px;color:#bfe9d2;background:rgba(255,255,255,.09);padding:3px 8px;border-radius:20px}
.q-score b{color:#6fe3a6}
.q-bar{position:absolute;right:11px;bottom:11px;width:84px;height:5px;border-radius:4px;background:rgba(255,255,255,.11);overflow:hidden}
.q-bar i{display:block;height:100%;width:8%;background:linear-gradient(90deg,#2fae6b,#6fe3a6);animation:fillbar 8s ease infinite}

/* ==========================================================================
   2 · MESSENGER
   ========================================================================== */
.pv-m{background:linear-gradient(180deg,#152036,#0d1422)}
.m-on{position:absolute;top:7px;right:10px;width:7px;height:7px;border-radius:50%;background:#37d67a;z-index:9;animation:ping 2.4s ease-out infinite}
.m-feed{position:absolute;left:11px;right:11px;top:32px;display:flex;flex-direction:column;gap:6px}
.bub{max-width:76%;padding:6px 9px;border-radius:11px;font-size:9.5px;line-height:1.35;opacity:0;animation:msg 9s ease infinite}
.bub.l{align-self:flex-start;background:#243350;color:#dde7f6;border-bottom-left-radius:3px}
.bub.r{align-self:flex-end;background:linear-gradient(150deg,#4180ff,#2f6fed);color:#fff;border-bottom-right-radius:3px}
.bub:nth-child(1){animation-delay:.3s}
.bub:nth-child(2){animation-delay:1.5s}
.bub:nth-child(3){animation-delay:2.7s}
.bub.typ{align-self:flex-start;background:#243350;display:flex;gap:4px;padding:8px 10px;animation-delay:3.9s}
.bub.typ i{width:4px;height:4px;border-radius:50%;background:#93aacf;animation:bounce 1.2s ease-in-out infinite}
.bub.typ i:nth-child(2){animation-delay:.15s}
.bub.typ i:nth-child(3){animation-delay:.3s}
.m-in{position:absolute;left:11px;right:11px;bottom:9px;height:20px;border-radius:20px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.11);display:flex;align-items:center;padding:0 9px;font-family:var(--mono);font-size:8px;color:rgba(255,255,255,.35)}
.m-in i{margin-left:auto;width:14px;height:14px;border-radius:50%;background:#2f6fed}

/* ==========================================================================
   3 · FAMILY TREE
   ========================================================================== */
.pv-f{background:linear-gradient(165deg,#1a1430,#0d0b1a)}
.f-n{position:absolute;width:19px;height:19px;border-radius:50%;background:#2a2350;border:2px solid #a888ff;
  opacity:0;transform:scale(.4);animation:popin 9s ease infinite}
.f-n.p{background:#3b2f6b}
.f-n.a{top:38px;left:50%;margin-left:-30px;animation-delay:.3s}
.f-n.b{top:38px;left:50%;margin-left:11px;animation-delay:.6s}
.f-n.c{top:88px;left:50%;margin-left:-58px;animation-delay:1.8s}
.f-n.d{top:88px;left:50%;margin-left:-9px;animation-delay:2.2s}
.f-n.e{top:88px;left:50%;margin-left:40px;animation-delay:2.6s}
.f-l{position:absolute;background:#5b47a0;transform-origin:0 50%;opacity:.85}
.f-l.h1{top:47px;left:50%;margin-left:-11px;width:22px;height:2px;transform:scaleX(0);animation:drawx 9s ease infinite 1s}
.f-l.v1{top:47px;left:50%;width:2px;height:22px;transform:scaleY(0);transform-origin:50% 0;animation:drawy 9s ease infinite 1.2s}
.f-l.h2{top:69px;left:50%;margin-left:-49px;width:98px;height:2px;transform:scaleX(0);animation:drawx 9s ease infinite 1.4s}
.f-l.v2{top:69px;left:50%;margin-left:-49px;width:2px;height:20px;transform:scaleY(0);transform-origin:50% 0;animation:drawy 9s ease infinite 1.7s}
.f-l.v3{top:69px;left:50%;width:2px;height:20px;transform:scaleY(0);transform-origin:50% 0;animation:drawy 9s ease infinite 2.1s}
.f-l.v4{top:69px;left:50%;margin-left:49px;width:2px;height:20px;transform:scaleY(0);transform-origin:50% 0;animation:drawy 9s ease infinite 2.5s}
.f-cap{position:absolute;left:11px;bottom:9px;font-family:var(--mono);font-size:8px;letter-spacing:.06em;color:#b9a6ee}
.f-gen{position:absolute;right:11px;bottom:9px;font-family:var(--mono);font-size:8px;color:rgba(255,255,255,.3)}

/* ==========================================================================
   4 · UNDERRUN
   ========================================================================== */
.pv-u{background:radial-gradient(80% 70% at 50% 55%,#1b1405,#080600)}
.u-grid{position:absolute;inset:22px 0 0;background-image:linear-gradient(rgba(253,190,0,.13) 1px,transparent 1px),linear-gradient(90deg,rgba(253,190,0,.13) 1px,transparent 1px);background-size:22px 22px;animation:crawl 6s linear infinite}
.u-p{position:absolute;left:50%;top:56%;width:9px;height:9px;margin:-4px 0 0 -4px;background:#fdbe00;box-shadow:0 0 14px #fdbe00;animation:strafe 3s ease-in-out infinite}
.u-e{position:absolute;width:7px;height:7px;background:#ff4d5e;box-shadow:0 0 10px #ff4d5e;opacity:0;animation:rush 3s ease-in infinite}
.u-e.e1{left:14%;top:32%;animation-delay:.2s}
.u-e.e2{right:16%;top:36%;animation-delay:.9s}
.u-e.e3{left:26%;bottom:16%;animation-delay:1.6s}
.u-shot{position:absolute;left:50%;top:52%;width:2px;height:26px;background:linear-gradient(#fff,rgba(253,190,0,0));animation:shoot 3s ease-out infinite .35s;opacity:0}
.u-hud{position:absolute;left:11px;bottom:9px;font-family:var(--mono);font-size:8px;color:#fdbe00;letter-spacing:.1em}
.u-hp{position:absolute;right:11px;bottom:10px;display:flex;gap:3px}
.u-hp i{width:12px;height:4px;background:#fdbe00;opacity:.85}
.u-hp i:nth-child(3){animation:blinkout 3s steps(1) infinite}

/* ==========================================================================
   5 · COUP
   ========================================================================== */
.pv-c{background:linear-gradient(165deg,#2a2320,#141010)}
.c-card{position:absolute;bottom:16px;left:50%;width:34px;height:50px;border-radius:5px;margin-left:-17px;
  border:1px solid rgba(255,255,255,.22);background:linear-gradient(160deg,#3d3129,#241c17);
  transform-origin:50% 130%;opacity:0;animation:deal 7s ease infinite}
.c-card::after{content:"";position:absolute;inset:5px;border:1px solid rgba(255,255,255,.13);border-radius:3px}
.c-card.k1{animation-delay:.2s;--rot:-26deg}
.c-card.k2{animation-delay:.45s;--rot:-13deg}
.c-card.k3{animation-delay:.7s;--rot:0deg}
.c-card.k4{animation-delay:.95s;--rot:13deg}
.c-card.k5{animation-delay:1.2s;--rot:26deg}
.c-card.up{background:linear-gradient(160deg,#c9483f,#8e2a24);animation:dealflip 7s ease infinite 1.9s}
.c-coins{position:absolute;top:32px;left:11px;display:flex;gap:3px}
.c-coins i{width:11px;height:11px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#ffd884,#c78f1e);opacity:0;animation:popin 7s ease infinite}
.c-coins i:nth-child(2){animation-delay:.3s}
.c-coins i:nth-child(3){animation-delay:.6s}
.c-lbl{position:absolute;top:31px;right:11px;font-family:var(--mono);font-size:8px;color:#d9a05b;letter-spacing:.08em}

/* ==========================================================================
   6 · MENJA
   ========================================================================== */
.pv-b{background:linear-gradient(180deg,#2b4157,#16222e)}
.b-cube{position:absolute;width:20px;height:20px;border-radius:3px;bottom:-24px;
  background:linear-gradient(145deg,#7fd3ff,#3c8ec4);box-shadow:inset 0 -4px 0 rgba(0,0,0,.22);
  animation:toss 4s ease-in-out infinite}
.b-cube.x1{left:20%;animation-delay:0s;background:linear-gradient(145deg,#ffd166,#e09b1e)}
.b-cube.x2{left:44%;animation-delay:.6s}
.b-cube.x3{left:68%;animation-delay:1.2s;background:linear-gradient(145deg,#ff8fa3,#d64d68)}
.b-slash{position:absolute;top:0;left:-40%;width:36%;height:200%;z-index:7;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.9),transparent);
  transform:rotate(18deg);animation:slash 4s ease-in infinite 1.5s;opacity:0}
.b-score{position:absolute;left:11px;bottom:9px;font-family:var(--disp);font-weight:700;font-size:15px;color:#fff;text-shadow:0 2px 8px rgba(0,0,0,.6)}

/* ==========================================================================
   7 · TETRIS
   ========================================================================== */
.pv-t{background:linear-gradient(180deg,#141826,#0a0d16)}
.t-well{position:absolute;top:26px;bottom:6px;left:50%;width:84px;margin-left:-42px;border:1px solid rgba(255,255,255,.13);border-top:0;background:rgba(255,255,255,.02)}
.t-well::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);background-size:14px 14px}
.t-p{position:absolute;width:14px;height:14px;border-radius:2px;top:-16px;animation:drop 3.2s cubic-bezier(.4,0,.9,.4) infinite}
.t-p.a{left:0;background:#4cc9f0;box-shadow:14px 0 0 #4cc9f0,28px 0 0 #4cc9f0,42px 0 0 #4cc9f0;animation-delay:0s}
.t-p.b{left:14px;background:#ffa62b;box-shadow:0 14px 0 #ffa62b,14px 14px 0 #ffa62b,28px 14px 0 #ffa62b;animation-delay:1.1s}
.t-p.c{left:42px;background:#a888ff;box-shadow:14px 0 0 #a888ff,0 14px 0 #a888ff,14px 14px 0 #a888ff;animation-delay:2.2s}
.t-clear{position:absolute;left:0;right:0;bottom:0;height:14px;background:#fff;opacity:0;animation:flashrow 3.2s ease infinite 2.9s}
.t-sc{position:absolute;left:11px;top:32px;font-family:var(--mono);font-size:8px;color:var(--ink-3);line-height:1.9}
.t-sc b{color:#4cc9f0;display:block;font-size:11px;font-variant-numeric:tabular-nums}

/* ==========================================================================
   8 · MINESWEEPER
   ========================================================================== */
.pv-s{background:#1a1d24}
.s-grid{position:absolute;inset:28px 12px 10px;display:grid;grid-template-columns:repeat(8,1fr);grid-auto-rows:1fr;gap:2px}
.s-c{background:linear-gradient(150deg,#39404f,#2b313d);border-radius:2px;display:grid;place-items:center;font-family:var(--mono);font-size:8px;font-weight:600;color:transparent;animation:reveal 6s ease infinite}
.s-c:nth-child(3n){animation-delay:.3s}
.s-c:nth-child(3n+1){animation-delay:.7s}
.s-c:nth-child(5n){animation-delay:1.1s}
.s-c:nth-child(7n){animation-delay:1.5s}
.s-c.n1{--num:#4cc9f0}
.s-c.n2{--num:#6fe3a6}
.s-c.n3{--num:#ff8fa3}
.s-flag{background:linear-gradient(150deg,#39404f,#2b313d)!important;animation:none!important;color:#ff4d5e!important;font-size:9px}
.s-hud{position:absolute;top:29px;left:12px;right:12px;display:flex;justify-content:space-between;font-family:var(--mono);font-size:8px;color:#ff4d5e}

/* ==========================================================================
   9 · TIC TAC TOE
   ========================================================================== */
.pv-x{background:linear-gradient(165deg,#20242e,#12151b)}
.x-b{position:absolute;top:32px;left:50%;width:82px;height:82px;margin-left:-41px}
.x-b i{position:absolute;background:rgba(255,255,255,.18)}
.x-b i:nth-child(1){left:27px;top:0;width:1.5px;height:100%}
.x-b i:nth-child(2){left:54px;top:0;width:1.5px;height:100%}
.x-b i:nth-child(3){top:27px;left:0;height:1.5px;width:100%}
.x-b i:nth-child(4){top:54px;left:0;height:1.5px;width:100%}
.x-m{position:absolute;width:27px;height:27px;display:grid;place-items:center;font-family:var(--disp);font-weight:700;font-size:17px;opacity:0;animation:popin 7s ease infinite}
.x-m.x{color:#ffa62b}
.x-m.o{color:#4cc9f0}
.x-win{position:absolute;top:12px;left:1px;width:80px;height:2.5px;background:#ff4d5e;box-shadow:0 0 8px #ff4d5e;transform:scaleX(0);transform-origin:0 50%;animation:strike 7s ease infinite 3.6s}
.x-t{position:absolute;left:11px;bottom:9px;font-family:var(--mono);font-size:8px;color:var(--ink-3)}

/* ==========================================================================
   10 · DYNO
   ========================================================================== */
.pv-d{background:linear-gradient(180deg,#e8eaee 0%,#d5d8de 100%)}
:root[data-theme="light"] .pv-d{background:linear-gradient(180deg,#f6f7f9,#e3e5ea)}
.d-ground{position:absolute;left:0;right:0;bottom:26px;height:2px;background:#535353}
.d-ground::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(90deg,#535353 0 8px,transparent 8px 22px);top:5px;height:1px;animation:crawlx 1.2s linear infinite}
.d-dino{position:absolute;left:22px;bottom:28px;width:16px;height:18px;background:#535353;border-radius:3px 5px 2px 2px;animation:hop 2.4s cubic-bezier(.3,0,.5,1) infinite}
.d-dino::before{content:"";position:absolute;left:-6px;top:9px;width:7px;height:4px;background:#535353;border-radius:2px}
.d-dino::after{content:"";position:absolute;right:3px;top:3px;width:2.5px;height:2.5px;background:#e8eaee;border-radius:50%}
.d-cac{position:absolute;bottom:28px;right:-14px;width:8px;height:16px;background:#535353;border-radius:2px;animation:scroll 2.4s linear infinite}
.d-cac::before{content:"";position:absolute;left:-4px;top:4px;width:4px;height:7px;background:#535353;border-radius:2px}
.d-cac.c2{animation-delay:1.2s;height:12px}
.d-cloud{position:absolute;top:38px;right:-14px;width:22px;height:6px;background:#b9bcc4;border-radius:6px;animation:scroll 5s linear infinite}
.d-cloud.f2{top:56px;animation-delay:2.5s;width:16px}
.d-hi{position:absolute;top:30px;right:12px;font-family:var(--mono);font-size:9px;color:#8a8d94;letter-spacing:.1em;font-variant-numeric:tabular-nums}

/* ==========================================================================
   11 · COLORON
   ========================================================================== */
.pv-o{background:#0d0f16}
.o-bars{position:absolute;inset:28px 12px 30px;display:flex;gap:4px}
.o-bars i{flex:1;border-radius:4px;animation:hue 7s linear infinite}
.o-bars i:nth-child(1){background:#ff5d73;animation-delay:0s}
.o-bars i:nth-child(2){background:#ffa62b;animation-delay:-1.4s}
.o-bars i:nth-child(3){background:#6fe3a6;animation-delay:-2.8s}
.o-bars i:nth-child(4){background:#4cc9f0;animation-delay:-4.2s}
.o-bars i:nth-child(5){background:#a888ff;animation-delay:-5.6s}
.o-hex{position:absolute;left:12px;bottom:9px;font-family:var(--mono);font-size:8.5px;color:var(--ink-3);letter-spacing:.1em}
.o-sweep{position:absolute;inset:28px 12px 30px;border-radius:4px;background:linear-gradient(100deg,transparent,rgba(255,255,255,.5),transparent);background-size:50% 100%;background-repeat:no-repeat;background-position:-60% 0;animation:sweep 7s ease-in-out infinite;z-index:7}

/* ==========================================================================
   12 · KVALI GAME (WIP)
   ========================================================================== */
.pv-k{background:#12141f}
.k-grid{position:absolute;inset:22px 0 0;background-image:linear-gradient(rgba(152,160,226,.16) 1px,transparent 1px),linear-gradient(90deg,rgba(152,160,226,.16) 1px,transparent 1px);background-size:16px 16px}
.k-box{position:absolute;top:46px;left:50%;width:88px;height:44px;margin-left:-44px;border:2px dashed #98a0e2;border-radius:6px;animation:pulseBox 3s ease-in-out infinite}
.k-t{position:absolute;top:46px;left:50%;width:88px;height:44px;margin-left:-44px;display:grid;place-items:center;font-family:var(--disp);font-weight:700;font-size:13px;color:#98a0e2;letter-spacing:.1em}
.k-c{position:absolute;width:5px;height:5px;background:#98a0e2;border-radius:50%;animation:pulse 3s ease-in-out infinite}
.k-c.a{top:44px;left:50%;margin-left:-46px}
.k-c.b{top:44px;left:50%;margin-left:41px}
.k-c.c{top:88px;left:50%;margin-left:-46px}
.k-c.d{top:88px;left:50%;margin-left:41px}

/* ==========================================================================
   13 · CAM AI
   ========================================================================== */
.pv-a{background:linear-gradient(150deg,#22303c,#131c25)}
.a-scan{position:absolute;left:0;right:0;top:22px;height:2px;background:linear-gradient(90deg,transparent,#4cc9f0,transparent);box-shadow:0 0 10px #4cc9f0;animation:scanline 4s ease-in-out infinite}
.a-box{position:absolute;border:1.5px solid #6fe3a6;border-radius:2px;opacity:0;animation:detect 4s ease infinite}
.a-box::before{content:attr(data-l);position:absolute;top:-13px;left:-1.5px;background:#6fe3a6;color:#0b1a12;font-family:var(--mono);font-size:7.5px;font-weight:600;padding:1px 4px;border-radius:2px;white-space:nowrap}
.a-box.b1{left:14%;top:40%;width:34%;height:44%;animation-delay:.8s}
.a-box.b2{right:13%;top:32%;width:26%;height:32%;border-color:#ffa62b;animation-delay:1.8s}
.a-box.b2::before{background:#ffa62b;color:#231604}
.a-blob{position:absolute;border-radius:50%;filter:blur(7px);opacity:.5}
.a-blob.g1{left:18%;top:44%;width:52px;height:52px;background:#3d5f6e}
.a-blob.g2{right:16%;top:36%;width:38px;height:38px;background:#4a5a44}
.a-fps{position:absolute;right:11px;bottom:9px;font-family:var(--mono);font-size:8px;color:#4cc9f0}

/* ==========================================================================
   14 · FREE ROBUX (PRANK)
   ========================================================================== */
.pv-r{background:linear-gradient(160deg,#1d2430,#0e1219)}
.r-btn{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);padding:9px 20px;border-radius:8px;
  background:linear-gradient(160deg,#3ec46b,#1f8f47);color:#fff;font-family:var(--disp);font-weight:700;font-size:12px;
  letter-spacing:.06em;box-shadow:0 8px 22px -8px rgba(62,196,107,.9);animation:tempt 3s ease-in-out infinite}
.r-cur{position:absolute;top:64%;left:56%;width:0;height:0;border-left:8px solid #fff;border-bottom:6px solid transparent;border-top:6px solid transparent;transform:rotate(-38deg);filter:drop-shadow(0 1px 2px rgba(0,0,0,.7));animation:chase 3s ease-in-out infinite}
.r-spark{position:absolute;width:4px;height:4px;background:#ffe066;border-radius:50%;opacity:0;animation:spark 3s ease-out infinite}
.r-spark.s1{top:38%;left:34%;animation-delay:.2s}
.r-spark.s2{top:32%;right:32%;animation-delay:.7s}
.r-spark.s3{bottom:28%;left:42%;animation-delay:1.2s}
.r-t{position:absolute;left:11px;bottom:9px;font-family:var(--mono);font-size:8px;color:#6b7488;letter-spacing:.06em}

/* ==========================================================================
   15 · SNAKE
   ========================================================================== */
.pv-sn{background:linear-gradient(165deg,#0d1f16,#070f0b)}
.sn-grid{position:absolute;inset:22px 0 0;background-image:linear-gradient(rgba(111,227,166,.09) 1px,transparent 1px),linear-gradient(90deg,rgba(111,227,166,.09) 1px,transparent 1px);background-size:15px 15px}
.sn{position:absolute;left:30px;top:52px;width:12px;height:12px;border-radius:3px;background:#2fae6b;animation:snPath 6s linear infinite}
.sn.h{background:#8dffc4;box-shadow:0 0 10px rgba(141,255,196,.65);z-index:3}
.sn.s2{animation-delay:-.22s;opacity:.9}
.sn.s3{animation-delay:-.44s;opacity:.78}
.sn.s4{animation-delay:-.66s;opacity:.64}
.sn.s5{animation-delay:-.88s;opacity:.5}
.sn-f{position:absolute;left:118px;top:82px;width:9px;height:9px;border-radius:50%;background:#ff4d5e;
  box-shadow:0 0 12px #ff4d5e;animation:pulseDot 1.6s ease-in-out infinite}
.sn-sc{position:absolute;left:11px;bottom:9px;font-family:var(--mono);font-size:8.5px;color:#6fe3a6;letter-spacing:.08em}

/* ==========================================================================
   16 · PONG
   ========================================================================== */
.pv-pg{background:#080d14}
.pg-net{position:absolute;left:50%;top:28px;bottom:8px;width:2px;margin-left:-1px;
  background:repeating-linear-gradient(180deg,rgba(150,175,215,.3) 0 6px,transparent 6px 13px)}
.pg-pad{position:absolute;width:6px;height:32px;border-radius:3px;background:#4cc9f0;box-shadow:0 0 12px rgba(76,201,240,.6)}
.pg-pad.l{left:12px;top:44px;animation:pgL 2.6s ease-in-out infinite}
.pg-pad.r{right:12px;top:60px;background:#ffa62b;box-shadow:0 0 12px rgba(255,166,43,.6);animation:pgR 2.6s ease-in-out infinite}
.pg-ball{position:absolute;left:24px;top:60px;width:8px;height:8px;border-radius:50%;background:#fff;
  box-shadow:0 0 10px rgba(255,255,255,.8);animation:pgX 2.6s cubic-bezier(.4,0,.6,1) infinite,pgY 1.3s ease-in-out infinite alternate}
.pg-sc{position:absolute;top:30px;left:0;right:0;display:flex;justify-content:center;gap:34px;
  font-family:var(--disp);font-weight:700;font-size:19px;color:rgba(160,185,225,.22)}

/* ==========================================================================
   17 · FLAPPY
   ========================================================================== */
.pv-fl{background:linear-gradient(180deg,#1b2a45,#3a5a72)}
.fl-pipe{position:absolute;width:22px;background:linear-gradient(90deg,#4e9a3c,#79c95f 40%,#3d7a2f);
  border:1px solid rgba(0,0,0,.3);animation:flScroll 3.4s linear infinite}
.fl-pipe.p1t{right:-24px;top:22px;height:36px}
.fl-pipe.p1b{right:-24px;bottom:14px;height:38px}
.fl-pipe.p2t{right:-24px;top:22px;height:58px;animation-delay:1.7s}
.fl-pipe.p2b{right:-24px;bottom:14px;height:16px;animation-delay:1.7s}
.fl-bird{position:absolute;left:34px;top:64px;width:15px;height:12px;border-radius:50%;
  background:radial-gradient(circle at 34% 32%,#ffe6a0,#e09b1e);animation:flHop 1.1s ease-in-out infinite}
.fl-bird::after{content:"";position:absolute;right:-4px;top:4px;border-left:6px solid #ff8c42;
  border-top:3px solid transparent;border-bottom:3px solid transparent}
.fl-gnd{position:absolute;left:0;right:0;bottom:0;height:14px;background:#3d3222;border-top:3px solid #5c9b4a}
.fl-sc{position:absolute;top:30px;left:0;right:0;text-align:center;font-family:var(--disp);font-weight:700;
  font-size:20px;color:#fff;text-shadow:0 2px 6px rgba(0,0,0,.5)}

/* ==========================================================================
   18 · 2048
   ========================================================================== */
.pv-2k{background:#141826}
/* 4x4 board: 20px cells on a 24px step, so tiles land exactly on the grid */
.tg-bg{position:absolute;top:30px;left:50%;margin-left:-46px;width:92px;height:92px;
  display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(4,1fr);gap:4px}
.tg-bg i{background:rgba(140,160,200,.07);border-radius:4px}
.tg-2048,.tg-mg{position:absolute;width:20px;height:20px;border-radius:4px;display:grid;place-items:center;
  font-family:var(--disp);font-weight:700;font-size:10px;color:#fff}
.tg-2048{animation:tgSlide 4.5s ease infinite}
.tg-2048.a{left:calc(50% + 2px); top:30px;background:#354063;--tx:-48px}
.tg-2048.b{left:calc(50% + 26px);top:30px;background:#354063;--tx:-72px}
.tg-2048.c{left:calc(50% + 2px); top:54px;background:#3c6ea8;--tx:-48px;animation-delay:.2s}
.tg-2048.d{left:calc(50% + 26px);top:78px;background:#3fb0a4;--tx:-72px;animation-delay:.4s;color:#08150f}
.tg-mg{left:calc(50% - 46px);top:30px;background:#3c6ea8;opacity:0;animation:tgMerge 4.5s ease infinite}
.tg-sc{position:absolute;right:11px;bottom:9px;font-family:var(--mono);font-size:8.5px;color:#ffa62b}

/* ==========================================================================
   19 · BREAKOUT
   ========================================================================== */
.pv-bk{background:#0a0e16}
.bk-w{position:absolute;left:14px;right:14px;top:30px;display:grid;grid-template-columns:repeat(7,1fr);gap:3px}
.bk-w i{height:9px;border-radius:2px}
/* only a handful pop out at a time, so the wall is never empty */
.bk-w i:nth-child(4),.bk-w i:nth-child(9),.bk-w i:nth-child(13),
.bk-w i:nth-child(17),.bk-w i:nth-child(20){animation:bkGone 5s ease infinite}
.bk-w i:nth-child(7n+1){background:#ff4d5e}
.bk-w i:nth-child(7n+2){background:#ff8c42}
.bk-w i:nth-child(7n+3){background:#ffd166}
.bk-w i:nth-child(7n+4){background:#6fe3a6}
.bk-w i:nth-child(7n+5){background:#4cc9f0}
.bk-w i:nth-child(7n+6){background:#a888ff}
.bk-w i:nth-child(7n+7){background:#ff8fa3}
.bk-w i:nth-child(9){animation-delay:.6s}
.bk-w i:nth-child(13){animation-delay:1.4s}
.bk-w i:nth-child(4){animation-delay:2.2s}
.bk-w i:nth-child(17){animation-delay:3s}
.bk-w i:nth-child(20){animation-delay:3.8s}
.bk-pad{position:absolute;bottom:12px;left:50%;width:38px;height:6px;margin-left:-19px;border-radius:4px;
  background:linear-gradient(90deg,#7e5fd6,#c3aaff,#7e5fd6);animation:bkPad 2.5s ease-in-out infinite}
.bk-ball{position:absolute;left:50%;bottom:20px;width:7px;height:7px;border-radius:50%;background:#fff;
  box-shadow:0 0 9px rgba(195,170,255,.9);animation:bkX 2.5s ease-in-out infinite,bkY 1.25s ease-in-out infinite alternate}

/* ==========================================================================
   20 · MEMORY
   ========================================================================== */
.pv-mm{background:linear-gradient(165deg,#10202c,#0a141c)}
.mem-g{position:absolute;inset:30px 16px 12px;display:grid;grid-template-columns:repeat(4,1fr);
  grid-template-rows:repeat(2,1fr);gap:5px}
.mem-c{border-radius:5px;background:#1b2b3a;border:1px solid rgba(76,201,240,.24);
  display:grid;place-items:center;font-size:11px;color:transparent;animation:memFlip 6s ease infinite}
.mem-c.m1{animation-delay:.3s}
.mem-c.m2{animation-delay:2.4s}
.mem-c.hit{animation:memHit 6s ease infinite;animation-delay:1.2s}
.mem-c.hit2{animation:memHit 6s ease infinite;animation-delay:1.45s}
.mem-lbl{position:absolute;left:11px;bottom:2px;font-family:var(--mono);font-size:8px;color:#4cc9f0}

/* ==========================================================================
   21 · SIMON
   ========================================================================== */
.pv-si{background:#0b1016}
.si-w{position:absolute;top:30px;left:50%;width:86px;height:86px;margin-left:-43px;
  display:grid;grid-template-columns:1fr 1fr;gap:5px}
.si-p{opacity:.3;animation:siLit 4s ease-in-out infinite}
.si-p:nth-child(1){background:#6fe3a6;border-radius:100% 5px 5px 5px;animation-delay:0s}
.si-p:nth-child(2){background:#ff4d5e;border-radius:5px 100% 5px 5px;animation-delay:.55s}
.si-p:nth-child(3){background:#ffd166;border-radius:5px 5px 5px 100%;animation-delay:1.65s}
.si-p:nth-child(4){background:#4cc9f0;border-radius:5px 5px 100% 5px;animation-delay:1.1s}
.si-hub{position:absolute;top:30px;left:50%;width:86px;height:86px;margin-left:-43px;display:grid;place-items:center;pointer-events:none}
.si-hub b{width:32px;height:32px;border-radius:50%;background:#0b1016;border:1px solid rgba(255,255,255,.12);
  display:grid;place-items:center;font-family:var(--disp);font-weight:700;font-size:13px;color:#e8ecf5}

/* ==========================================================================
   22 · CONNECT FOUR
   ========================================================================== */
.pv-c4{background:#0c111c}
.c4-b{position:absolute;inset:30px 22px 10px;border-radius:6px;background:linear-gradient(160deg,#243356,#1a2440);
  display:grid;grid-template-columns:repeat(7,1fr);grid-template-rows:repeat(5,1fr);gap:3px;padding:4px}
.c4-b i{border-radius:50%;background:#080d16}
.c4-d{position:absolute;top:34px;width:11px;height:11px;border-radius:50%;opacity:0;animation:c4Drop 5s ease infinite}
.c4-d.y{background:radial-gradient(circle at 33% 30%,#ffd07a,#e07f12)}
.c4-d.c{background:radial-gradient(circle at 33% 30%,#8fe0ff,#1f8fc4)}
.c4-d.d1{left:64px;--dy:52px;animation-delay:.2s}
.c4-d.d2{left:78px;--dy:52px;animation-delay:.9s}
.c4-d.d3{left:50px;--dy:52px;animation-delay:1.6s}
.c4-d.d4{left:92px;--dy:52px;animation-delay:2.3s}
.c4-lbl{position:absolute;right:11px;bottom:2px;font-family:var(--mono);font-size:8px;color:#7f92c4}

/* ==========================================================================
   23 · INVADERS
   ========================================================================== */
.pv-iv{background:radial-gradient(90% 80% at 50% 30%,#0d1524,#04060b)}
.iv-f{position:absolute;top:34px;left:50%;margin-left:-70px;width:140px;
  display:grid;grid-template-columns:repeat(6,1fr);gap:9px 10px;animation:ivMarch 3.2s steps(4) infinite}
.iv-f i{height:10px;border-radius:2px}
.iv-f i:nth-child(-n+6){background:#ffd166}
.iv-f i:nth-child(n+7):nth-child(-n+12){background:#4cc9f0}
.iv-f i:nth-child(n+13){background:#6fe3a6}
.iv-ship{position:absolute;bottom:12px;left:50%;margin-left:-8px;width:16px;height:9px;
  background:#ffa62b;clip-path:polygon(50% 0,100% 100%,0 100%);animation:ivMove 3.6s ease-in-out infinite}
.iv-sh{position:absolute;bottom:22px;left:50%;width:2px;height:11px;background:#fff;
  opacity:0;animation:ivShot 1.4s linear infinite}
.iv-st{position:absolute;width:1.5px;height:1.5px;background:#9fb4d8;border-radius:50%}
.iv-st.a{top:34px;left:18%}.iv-st.b{top:52px;right:22%}.iv-st.c{top:70px;left:32%}
.iv-st.d{top:44px;right:14%}.iv-st.e{top:82px;right:38%}
.iv-hud{position:absolute;left:11px;bottom:2px;font-family:var(--mono);font-size:8px;color:#6fe3a6}

/* ==========================================================================
   24 · სიტყვა (WORDLE)
   ========================================================================== */
.pv-wd{background:#0d1219}
.wd-r{position:absolute;top:34px;left:50%;margin-left:-63px;display:flex;gap:5px}
.wd-c{width:22px;height:22px;border-radius:3px;border:2px solid #2f3950;display:grid;place-items:center;
  font-family:var(--disp);font-weight:700;font-size:11px;color:#e8ecf5;animation:wdFlip 5.5s ease infinite}
.wd-c.g{--fill:#6fe3a6;--fg:#08170f}
.wd-c.y{--fill:#c9a227;--fg:#1a1403}
.wd-c.b{--fill:#232a38;--fg:#6b7488}
.wd-c:nth-child(1){animation-delay:.2s}
.wd-c:nth-child(2){animation-delay:.45s}
.wd-c:nth-child(3){animation-delay:.7s}
.wd-c:nth-child(4){animation-delay:.95s}
.wd-c:nth-child(5){animation-delay:1.2s}
.wd-r2{position:absolute;top:62px;left:50%;margin-left:-63px;display:flex;gap:5px}
.wd-r2 .wd-c{border-color:#2f3950;animation:wdType 5.5s ease infinite}
.wd-r2 .wd-c:nth-child(1){animation-delay:2.4s}
.wd-r2 .wd-c:nth-child(2){animation-delay:2.7s}
.wd-r2 .wd-c:nth-child(3){animation-delay:3s}
.wd-r2 .wd-c:nth-child(4){animation-delay:3.3s}
.wd-r2 .wd-c:nth-child(5){animation-delay:3.6s}
.wd-k{position:absolute;left:0;right:0;bottom:8px;display:flex;justify-content:center;gap:3px}
.wd-k i{width:9px;height:12px;border-radius:2px;background:#232a38}
.wd-k i:nth-child(3){background:#6fe3a6}
.wd-k i:nth-child(6){background:#c9a227}

/* ==========================================================================
   25 · REACTION
   ========================================================================== */
.pv-rx{background:#0d1219}
.rx-pane{position:absolute;inset:22px 0 0;
  background:linear-gradient(160deg,#5a1620,#3a0d16);animation:rxFlash 4s ease infinite}
.rx-t,.rx-go{position:absolute;left:0;right:0;top:54px;text-align:center;
  font-family:var(--disp);font-weight:700;font-size:17px;color:#fff}
.rx-t{animation:rxSwap 4s ease infinite}
.rx-go{opacity:0;animation:rxGo 4s ease infinite}
.rx-ms{position:absolute;left:0;right:0;bottom:26px;text-align:center;font-family:var(--mono);
  font-size:15px;color:#fff;opacity:0;animation:rxNum 4s ease infinite}
.rx-dots{position:absolute;left:0;right:0;bottom:9px;display:flex;justify-content:center;gap:4px}
.rx-dots i{width:14px;height:4px;border-radius:3px;background:rgba(255,255,255,.2)}
.rx-dots i:nth-child(-n+3){background:#6fe3a6}

/* ==========================================================================
   26 · LIGHTS OUT
   ========================================================================== */
.pv-lo{background:linear-gradient(165deg,#16112b,#0b0916)}
.lo-g{position:absolute;top:30px;left:50%;margin-left:-43px;width:86px;
  display:grid;grid-template-columns:repeat(5,1fr);gap:4px}
.lo-g i{aspect-ratio:1;border-radius:3px;background:#1e1a35;border:1px solid #2c2650;position:relative}
.lo-g i::after{content:"";position:absolute;inset:26%;border-radius:50%;background:rgba(150,170,215,.14)}
.lo-g i.on::after{background:#c3aaff;box-shadow:0 0 9px 1px rgba(195,170,255,.75)}
.lo-g i.t1::after,.lo-g i.t2::after,.lo-g i.t3::after,.lo-g i.t4::after{animation:loDot 4.4s steps(1) infinite}
.lo-g i.t2::after{animation-delay:1.1s}
.lo-g i.t3::after{animation-delay:2.2s}
.lo-g i.t4::after{animation-delay:3.3s}
.lo-lbl{position:absolute;left:11px;bottom:9px;font-family:var(--mono);font-size:8px;color:#a888ff}

/* ==========================================================================
   27 · SUDOKU
   ========================================================================== */
.pv-sd{background:#0e1219}
/* grid drawn with backgrounds, digits placed on top — 81 <i> would be wasteful */
.sd-g{position:absolute;top:28px;left:50%;margin-left:-54px;width:108px;height:108px;
  background:#141a26;border:1.5px solid #46527a;
  background-image:linear-gradient(#2b3347 1px,transparent 1px),linear-gradient(90deg,#2b3347 1px,transparent 1px);
  background-size:12px 12px}
.sd-g::after{content:"";position:absolute;inset:0;
  background-image:linear-gradient(#46527a 1.5px,transparent 1.5px),linear-gradient(90deg,#46527a 1.5px,transparent 1.5px);
  background-size:36px 36px}
.sd-n{position:absolute;width:12px;height:12px;display:grid;place-items:center;
  font-family:var(--disp);font-weight:700;font-size:8.5px;color:#4cc9f0;z-index:2;
  opacity:0;animation:sdFill 5s ease infinite}
.sd-n.fx{color:#9aa4bb;opacity:1;animation:none}
.sd-n.f1{animation-delay:.3s}.sd-n.f2{animation-delay:.8s}.sd-n.f3{animation-delay:1.3s}
.sd-n.f4{animation-delay:1.8s}.sd-n.f5{animation-delay:2.3s}.sd-n.f6{animation-delay:2.8s}
.sd-lbl{position:absolute;right:11px;bottom:9px;font-family:var(--mono);font-size:8px;color:#4cc9f0}

/* ==========================================================================
   28 · TYPING
   ========================================================================== */
.pv-ty{background:#10141d}
.ty-l{position:absolute;left:14px;right:14px;top:36px;font-family:var(--mono);font-size:10px;
  line-height:1.9;color:#3d4557}
.ty-l b{color:#e8ecf5;font-weight:400;opacity:0;animation:tyOn 5s steps(1) infinite}
.ty-l b:nth-of-type(1){animation-delay:.2s}
.ty-l b:nth-of-type(2){animation-delay:.7s}
.ty-l b:nth-of-type(3){animation-delay:1.2s}
.ty-l b:nth-of-type(4){animation-delay:1.7s}
.ty-l b:nth-of-type(5){animation-delay:2.2s}
.ty-car{position:absolute;top:36px;left:14px;width:2px;height:13px;background:#ffa62b;
  animation:tyCaret 5s steps(1) infinite,tyBlink 1s steps(1) infinite}
.ty-w{position:absolute;left:14px;bottom:9px;font-family:var(--disp);font-weight:700;font-size:16px;color:#ffa62b}
.ty-w span{font-family:var(--mono);font-size:8px;font-weight:400;color:#6b7488;margin-left:5px}

/* ==========================================================================
   29 · PALETTE
   ========================================================================== */
.pv-pl{background:#0d0f16}
.pl-b{position:absolute;inset:30px 12px 28px;display:flex;gap:4px}
.pl-b i{flex:1;border-radius:5px;animation:hue 9s linear infinite}
.pl-b i:nth-child(1){background:#a888ff;animation-delay:0s}
.pl-b i:nth-child(2){background:#8f7ce8;animation-delay:-1.8s}
.pl-b i:nth-child(3){background:#7a6fd4;animation-delay:-3.6s}
.pl-b i:nth-child(4){background:#6461c0;animation-delay:-5.4s}
.pl-b i:nth-child(5){background:#4f53ac;animation-delay:-7.2s}
.pl-hex{position:absolute;left:12px;bottom:8px;font-family:var(--mono);font-size:8.5px;color:#a888ff;letter-spacing:.09em}
.pl-ratio{position:absolute;right:12px;bottom:8px;font-family:var(--mono);font-size:8px;color:#6fe3a6}
.pl-pick{position:absolute;top:30px;left:12px;width:26px;height:26px;border-radius:50%;
  border:2px solid #fff;box-shadow:0 3px 10px rgba(0,0,0,.6);z-index:7;animation:plMove 9s ease-in-out infinite}

/* ==========================================================================
   30 · PASSWORD
   ========================================================================== */
.pv-pw{background:linear-gradient(165deg,#0f1c17,#0a120e)}
.pw-box{position:absolute;left:12px;right:12px;top:36px;padding:10px;border-radius:7px;
  background:rgba(255,255,255,.04);border:1px solid rgba(111,227,166,.2);
  font-family:var(--mono);font-size:11px;color:#6fe3a6;text-align:center;letter-spacing:.06em;overflow:hidden}
.pw-box span{display:inline-block;animation:pwRoll 3s steps(1) infinite}
.pw-box span:nth-child(2){animation-delay:.1s}
.pw-box span:nth-child(3){animation-delay:.2s;color:#ffd166}
.pw-box span:nth-child(4){animation-delay:.3s}
.pw-box span:nth-child(5){animation-delay:.4s;color:#4cc9f0}
.pw-box span:nth-child(6){animation-delay:.5s}
.pw-box span:nth-child(7){animation-delay:.6s;color:#ffd166}
.pw-box span:nth-child(8){animation-delay:.7s}
.pw-m{position:absolute;left:12px;right:12px;bottom:26px;display:flex;gap:3px}
.pw-m i{flex:1;height:5px;border-radius:3px;background:rgba(255,255,255,.1)}
.pw-m i:nth-child(1){animation:pwFill 3s ease infinite;animation-delay:.2s}
.pw-m i:nth-child(2){animation:pwFill 3s ease infinite;animation-delay:.4s}
.pw-m i:nth-child(3){animation:pwFill 3s ease infinite;animation-delay:.6s}
.pw-m i:nth-child(4){animation:pwFill 3s ease infinite;animation-delay:.8s}
.pw-m i:nth-child(5){animation:pwFill 3s ease infinite;animation-delay:1s}
.pw-lbl{position:absolute;left:12px;bottom:8px;font-family:var(--mono);font-size:8px;color:#6fe3a6}
.pw-lbl2{position:absolute;right:12px;bottom:8px;font-family:var(--mono);font-size:8px;color:#6b7488}

/* ==========================================================================
   31 · UNITS
   ========================================================================== */
.pv-un{background:linear-gradient(165deg,#0d1a24,#080f16)}
.un-row{position:absolute;left:12px;right:12px;top:40px;display:flex;align-items:center;gap:8px}
.un-cell{flex:1;padding:9px 8px;border-radius:7px;background:rgba(255,255,255,.045);
  border:1px solid rgba(76,201,240,.2);text-align:center}
.un-cell b{display:block;font-family:var(--disp);font-weight:700;font-size:15px;color:#4cc9f0;line-height:1.1}
.un-cell b span{display:inline-block;animation:unRoll 4s steps(1) infinite}
.un-cell i{font-style:normal;font-family:var(--mono);font-size:7.5px;letter-spacing:.1em;color:#6b7488}
.un-ar{flex:none;color:#4cc9f0;font-size:13px;animation:unPush 4s ease-in-out infinite}
.un-list{position:absolute;left:12px;right:12px;bottom:9px;display:flex;gap:4px}
.un-list i{flex:1;height:4px;border-radius:3px;background:rgba(76,201,240,.18)}
.un-list i:nth-child(2){background:rgba(76,201,240,.42)}
.un-list i:nth-child(4){background:rgba(76,201,240,.3)}

/* ==========================================================================
   32 · TEXT
   ========================================================================== */
.pv-tx{background:#12141d}
.tx-l{position:absolute;left:14px;right:14px;height:9px;border-radius:3px;background:#2b3245;
  animation:txSort 5s cubic-bezier(.4,0,.2,1) infinite}
.tx-l.a{top:34px;--to:36px}
.tx-l.b{top:50px;--to:-16px;background:#ffa62b;opacity:.75}
.tx-l.c{top:66px;--to:18px}
.tx-l.d{top:82px;--to:-38px;background:#4cc9f0;opacity:.65}
.tx-l.a{width:72%}.tx-l.b{width:54%}.tx-l.c{width:86%}.tx-l.d{width:44%}
.tx-n{position:absolute;left:12px;bottom:8px;font-family:var(--mono);font-size:8px;color:#ffa62b}
.tx-n2{position:absolute;right:12px;bottom:8px;font-family:var(--mono);font-size:8px;color:#6b7488}

/* ==========================================================================
   33 · ENCODE
   ========================================================================== */
.pv-en{background:linear-gradient(165deg,#161029,#0b0816)}
.en-in{position:absolute;left:12px;right:12px;top:34px;padding:7px 9px;border-radius:6px;
  background:rgba(255,255,255,.045);border:1px solid rgba(168,136,255,.22);
  font-size:10px;color:#e8ecf5}
.en-ar{position:absolute;left:50%;top:64px;margin-left:-6px;color:#a888ff;font-size:12px;
  animation:enPulse 3.4s ease-in-out infinite}
.en-o{position:absolute;left:12px;right:12px;bottom:22px;padding:7px 9px;border-radius:6px;
  background:rgba(168,136,255,.1);border:1px solid rgba(168,136,255,.3);
  font-family:var(--mono);font-size:8.5px;color:#c3aaff;white-space:nowrap;overflow:hidden;
  clip-path:inset(0 100% 0 0);animation:typein 3.4s ease infinite}
.en-t{position:absolute;left:12px;bottom:6px;font-family:var(--mono);font-size:7.5px;color:#6b7488}

/* ==========================================================================
   34 · HASH
   ========================================================================== */
.pv-hs{background:#0a1219}
.hs-in{position:absolute;left:12px;top:32px;font-family:var(--mono);font-size:9px;color:#9aa4bb}
.hs-o{position:absolute;left:12px;right:12px;top:52px;font-family:var(--mono);font-size:8px;
  line-height:1.75;color:#4cc9f0;word-break:break-all;opacity:0;animation:hsIn 3.6s ease infinite}
.hs-o.l2{top:70px;animation-delay:.18s;color:#3aa6c9}
.hs-o.l3{top:88px;animation-delay:.36s;color:#2e8aa8}
.hs-tag{position:absolute;right:11px;top:30px;font-family:var(--mono);font-size:7.5px;
  padding:2px 6px;border-radius:10px;background:rgba(76,201,240,.14);color:#4cc9f0}
.hs-sc{position:absolute;left:0;right:0;top:52px;height:2px;background:linear-gradient(90deg,transparent,#4cc9f0,transparent);
  animation:hsScan 3.6s ease-in-out infinite;z-index:7}

/* ==========================================================================
   35 · JSON
   ========================================================================== */
.pv-js{background:#0e1119}
.js-w{position:absolute;left:14px;right:14px;top:32px;font-family:var(--mono);font-size:8.5px;line-height:1.85}
.jsn-l{opacity:0;animation:jsIn 4.4s ease infinite;white-space:nowrap}
.jsn-l:nth-child(1){animation-delay:.15s}
.jsn-l:nth-child(2){animation-delay:.4s}
.jsn-l:nth-child(3){animation-delay:.65s}
.jsn-l:nth-child(4){animation-delay:.9s}
.jsn-l:nth-child(5){animation-delay:1.15s}
.jsn-l:nth-child(6){animation-delay:1.4s}
.js-p{color:#6b7488}
.js-k{color:#4cc9f0}
.js-s{color:#6fe3a6}
.js-n{color:#ffa62b}
.js-b{color:#a888ff}
.js-ok{position:absolute;right:11px;bottom:8px;font-family:var(--mono);font-size:8px;color:#6fe3a6;
  animation:pulse 2.4s ease-in-out infinite}

/* ==========================================================================
   36 · TRANSLIT
   ========================================================================== */
.pv-tl{background:linear-gradient(165deg,#0f1f18,#080f0c)}
.tl-row{position:absolute;left:0;right:0;text-align:center;font-family:var(--disp);font-weight:700}
.tl-lat{top:42px;font-size:17px;color:#6b7488;animation:tlOut 4s ease-in-out infinite}
.tl-ka{top:42px;font-size:17px;color:#6fe3a6;opacity:0;animation:tlIn 4s ease-in-out infinite}
.tl-ar{top:72px;font-size:12px;color:#2f6f52}
.tl-keys{position:absolute;left:0;right:0;bottom:9px;display:flex;justify-content:center;gap:3px}
.tl-keys i{width:13px;height:13px;border-radius:3px;background:rgba(111,227,166,.13);
  display:grid;place-items:center;font-family:var(--mono);font-size:7px;color:#6fe3a6}
.tl-keys i:nth-child(2){background:rgba(111,227,166,.34)}
.tl-keys i:nth-child(4){background:rgba(111,227,166,.26)}

/* ==========================================================================
   37 · RANDOM
   ========================================================================== */
.pv-rn{background:linear-gradient(165deg,#231a0d,#120d07)}
.rn-die{position:absolute;top:38px;left:32px;width:40px;height:40px;border-radius:8px;
  background:#1b2130;border:1px solid #3a4258;display:grid;
  grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);padding:6px;gap:2px;
  animation:rnRoll 3s cubic-bezier(.3,.9,.3,1) infinite}
.rn-die i{border-radius:50%;background:#ffa62b;opacity:0}
.rn-die i.p{animation:rnPip 3s steps(1) infinite}
.rn-die i.q{animation:rnPip2 3s steps(1) infinite}
.rn-coin{position:absolute;top:42px;right:34px;width:32px;height:32px;border-radius:50%;
  background:radial-gradient(circle at 34% 30%,#ffd884,#c78f1e);
  box-shadow:inset 0 -3px 7px rgba(0,0,0,.3);animation:rnFlip 3s ease-in-out infinite}
.rn-n{position:absolute;left:0;right:0;bottom:22px;text-align:center;font-family:var(--disp);
  font-weight:700;font-size:17px;color:#ffa62b}
.rn-n span{display:inline-block;animation:unRoll 3s steps(1) infinite}
.rn-t{position:absolute;left:0;right:0;bottom:8px;text-align:center;font-family:var(--mono);font-size:7.5px;color:#6b7488}

/* ==========================================================================
   38 · TIMER
   ========================================================================== */
.pv-tm{background:#150d11}
.tm-r{position:absolute;top:28px;left:50%;width:76px;height:76px;margin-left:-38px;transform:rotate(-90deg)}
.tm-r circle{fill:none;stroke-width:7}
.tm-r .t{stroke:rgba(255,255,255,.09)}
.tm-r .v{stroke:#ff4d5e;stroke-linecap:round;stroke-dasharray:207;animation:drain 5s linear infinite}
.tm-d{position:absolute;top:28px;left:50%;width:76px;height:76px;margin-left:-38px;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--disp);font-weight:700;font-size:16px;color:#fff;
  font-variant-numeric:tabular-nums}
.tm-d span{display:inline-block;animation:tmTick 5s steps(1) infinite}
.tm-p{position:absolute;left:0;right:0;bottom:20px;display:flex;justify-content:center;gap:5px}
.tm-p i{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.14)}
.tm-p i:nth-child(1),.tm-p i:nth-child(2){background:#ff4d5e}
.tm-t{position:absolute;left:0;right:0;bottom:6px;text-align:center;font-family:var(--mono);font-size:7.5px;color:#6b7488}

/* ==========================================================================
   39 · QR
   ========================================================================== */
.pv-qr{background:#0a1219}
.qr-w{position:absolute;top:28px;left:50%;width:84px;height:84px;margin-left:-42px;
  background:#fff;border-radius:4px}
.qr-f{position:absolute;width:22px;height:22px;border:4px solid #0c0f16;border-radius:2px}
.qr-f::after{content:"";position:absolute;inset:3px;background:#0c0f16;border-radius:1px}
.qr-f.f1{top:7px;left:7px}
.qr-f.f2{top:7px;right:7px}
.qr-f.f3{bottom:7px;left:7px}
.qr-m{position:absolute;width:5px;height:5px;background:#0c0f16;opacity:0;animation:qrIn 3.6s ease infinite}
.qr-m.d1{animation-delay:.1s}.qr-m.d2{animation-delay:.25s}.qr-m.d3{animation-delay:.4s}
.qr-m.d4{animation-delay:.55s}.qr-m.d5{animation-delay:.7s}.qr-m.d6{animation-delay:.85s}
.qr-lbl{position:absolute;left:0;right:0;bottom:9px;text-align:center;font-family:var(--mono);
  font-size:8px;color:#4cc9f0;letter-spacing:.08em}

/* ==========================================================================
   40 · IMAGE
   ========================================================================== */
.pv-im{background:linear-gradient(165deg,#1a1029,#0c0716)}
.im-f{position:absolute;top:34px;left:50%;margin-left:-38px;width:76px;height:52px;border-radius:5px;
  background:linear-gradient(150deg,#a888ff,#4cc9f0 60%,#6fe3a6);
  transform-origin:50% 50%;animation:imShrink 4s ease-in-out infinite}
.im-f::after{content:"";position:absolute;left:9px;bottom:8px;width:20px;height:20px;border-radius:50%;
  background:rgba(255,255,255,.45)}
.im-a{position:absolute;left:12px;bottom:24px;font-family:var(--mono);font-size:8px;color:#6b7488}
.im-b{position:absolute;right:12px;bottom:24px;font-family:var(--mono);font-size:8px;color:#6fe3a6;
  opacity:0;animation:imSize 4s ease-in-out infinite}
.im-bar{position:absolute;left:12px;right:12px;bottom:11px;height:5px;border-radius:3px;
  background:rgba(255,255,255,.09);overflow:hidden}
.im-bar i{display:block;height:100%;width:100%;background:linear-gradient(90deg,#a888ff,#6fe3a6);
  animation:imBar 4s ease-in-out infinite}

/* ==========================================================================
   KEYFRAMES
   ========================================================================== */
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}
@keyframes pulseDot{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.28);opacity:.75}}
@keyframes ping{0%{box-shadow:0 0 0 0 rgba(55,214,122,.6)}70%,100%{box-shadow:0 0 0 8px transparent}}
@keyframes popin{0%,4%{opacity:0;transform:scale(.4)}12%,86%{opacity:1;transform:scale(1)}96%,100%{opacity:0;transform:scale(.9)}}
@keyframes bounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
@keyframes flip{0%,20%{transform:rotateY(0)}28%{transform:rotateY(90deg)}36%,100%{transform:rotateY(0)}}
@keyframes drain{0%{stroke-dashoffset:0}88%,100%{stroke-dashoffset:207}}
@keyframes typein{0%,6%{clip-path:inset(0 100% 0 0)}16%,82%{clip-path:inset(0 0 0 0)}92%,100%{clip-path:inset(0 100% 0 0)}}
@keyframes fillbar{0%{width:8%}80%{width:88%}100%{width:8%}}
@keyframes msg{0%,4%{opacity:0;transform:translateY(7px) scale(.96)}10%,88%{opacity:1;transform:none}96%,100%{opacity:0;transform:translateY(-4px)}}
@keyframes drawx{0%,8%{transform:scaleX(0)}18%,88%{transform:scaleX(1)}97%,100%{transform:scaleX(0)}}
@keyframes drawy{0%,8%{transform:scaleY(0)}18%,88%{transform:scaleY(1)}97%,100%{transform:scaleY(0)}}
@keyframes crawl{to{background-position:22px 22px}}
@keyframes crawlx{to{background-position:-22px 0}}
@keyframes strafe{0%,100%{transform:translateX(-9px)}50%{transform:translateX(9px)}}
@keyframes rush{0%{opacity:0;transform:translate(0,0) scale(.6)}18%{opacity:1}75%{opacity:1}88%{opacity:0;transform:translate(var(--dx,20px),var(--dy,10px)) scale(.3)}100%{opacity:0}}
@keyframes shoot{0%,10%{opacity:0;transform:translateY(0) scaleY(.2)}20%{opacity:1;transform:translateY(-16px) scaleY(1)}45%{opacity:0;transform:translateY(-40px) scaleY(1)}100%{opacity:0}}
@keyframes blinkout{0%,60%{opacity:.85}61%,100%{opacity:.15}}
@keyframes deal{0%,3%{opacity:0;transform:translateY(26px) rotate(0)}14%,84%{opacity:1;transform:translateY(0) rotate(var(--rot))}95%,100%{opacity:0;transform:translateY(12px) rotate(0)}}
@keyframes dealflip{0%,3%{opacity:0;transform:translateY(26px) rotateY(90deg)}16%,80%{opacity:1;transform:translateY(-9px) rotateY(0) scale(1.06)}92%,100%{opacity:0;transform:translateY(10px) rotateY(90deg)}}
@keyframes toss{0%{transform:translateY(0) rotate(0)}45%{transform:translateY(-92px) rotate(160deg)}100%{transform:translateY(0) rotate(340deg)}}
@keyframes slash{0%,30%{opacity:0;left:-40%}42%{opacity:1}62%{opacity:0;left:110%}100%{opacity:0;left:110%}}
@keyframes drop{0%{top:-16px;opacity:0}8%{opacity:1}70%,100%{top:calc(100% - 16px);opacity:1}}
@keyframes flashrow{0%,90%{opacity:0}94%{opacity:.85}100%{opacity:0}}
@keyframes reveal{0%,20%{background:linear-gradient(150deg,#39404f,#2b313d);color:transparent}34%,88%{background:#1f232c;color:var(--num,#8b94a8)}97%,100%{background:linear-gradient(150deg,#39404f,#2b313d);color:transparent}}
@keyframes strike{0%,40%{transform:scaleX(0)}55%,88%{transform:scaleX(1)}97%,100%{transform:scaleX(0)}}
@keyframes hop{0%,58%,100%{transform:translateY(0)}72%{transform:translateY(-26px)}85%{transform:translateY(-4px)}}
@keyframes scroll{0%{right:-14px}100%{right:104%}}
@keyframes hue{to{filter:hue-rotate(360deg)}}
@keyframes sweep{0%,20%{background-position:-60% 0}55%,100%{background-position:170% 0}}
@keyframes pulseBox{0%,100%{opacity:.45;transform:scale(1)}50%{opacity:1;transform:scale(1.04)}}
@keyframes scanline{0%,100%{transform:translateY(0)}50%{transform:translateY(118px)}}
@keyframes detect{0%,14%{opacity:0;transform:scale(1.14)}26%,84%{opacity:1;transform:scale(1)}94%,100%{opacity:0}}
@keyframes tempt{0%,100%{transform:translate(-50%,-50%) scale(1)}50%{transform:translate(-50%,-50%) scale(1.07)}}
@keyframes chase{0%,100%{transform:rotate(-38deg) translate(0,0)}45%{transform:rotate(-38deg) translate(-16px,-12px)}55%{transform:rotate(-38deg) translate(-14px,-10px)}}
@keyframes spark{0%,30%{opacity:0;transform:translateY(0) scale(.5)}45%{opacity:1;transform:translateY(-8px) scale(1)}70%,100%{opacity:0;transform:translateY(-18px) scale(.3)}}

/* --- new previews --- */
@keyframes snPath{
  0%   {transform:translate(0,0)}
  22%  {transform:translate(75px,0)}
  40%  {transform:translate(75px,30px)}
  62%  {transform:translate(15px,30px)}
  80%  {transform:translate(15px,-15px)}
  100% {transform:translate(0,0)}
}
@keyframes pgL{0%,100%{transform:translateY(-14px)}50%{transform:translateY(16px)}}
@keyframes pgR{0%,100%{transform:translateY(12px)}50%{transform:translateY(-16px)}}
@keyframes pgX{0%,100%{transform:translateX(0)}50%{transform:translateX(118px)}}
@keyframes pgY{from{margin-top:-16px}to{margin-top:22px}}
@keyframes flScroll{from{transform:translateX(0)}to{transform:translateX(-190px)}}
@keyframes flHop{0%,100%{transform:translateY(0) rotate(-8deg)}50%{transform:translateY(-11px) rotate(9deg)}}
@keyframes tgSlide{0%,12%{transform:translateX(0)}34%,100%{transform:translateX(var(--tx))}}
@keyframes tgMerge{0%,34%{opacity:0;transform:scale(.5)}42%{opacity:1;transform:scale(1.2)}50%,100%{opacity:1;transform:scale(1)}}
@keyframes bkGone{0%,12%{opacity:1;transform:scale(1)}22%,60%{opacity:0;transform:scale(.35)}72%,100%{opacity:1;transform:scale(1)}}
@keyframes bkPad{0%,100%{transform:translateX(-26px)}50%{transform:translateX(26px)}}
@keyframes bkX{0%,100%{transform:translateX(-30px)}50%{transform:translateX(28px)}}
@keyframes bkY{from{bottom:20px}to{bottom:56px}}
@keyframes memFlip{0%,10%{transform:rotateY(0);background:#1b2b3a;color:transparent}
  20%,44%{transform:rotateY(180deg);background:#22384a;color:#8fe0ff}
  54%,100%{transform:rotateY(0);background:#1b2b3a;color:transparent}}
@keyframes memHit{0%,14%{transform:rotateY(0);background:#1b2b3a;color:transparent}
  24%,100%{transform:rotateY(180deg);background:rgba(111,227,166,.2);color:#6fe3a6;border-color:#6fe3a6}}
@keyframes siLit{0%,6%{opacity:.3}12%,20%{opacity:1}26%,100%{opacity:.3}}
@keyframes c4Drop{0%,6%{opacity:0;transform:translateY(-30px)}
  14%{opacity:1;transform:translateY(var(--dy))}
  17%{transform:translateY(calc(var(--dy) - 4px))}
  20%,100%{opacity:1;transform:translateY(var(--dy))}}
@keyframes ivMarch{0%,100%{transform:translateX(-10px)}50%{transform:translateX(10px)}}
@keyframes ivMove{0%,100%{transform:translateX(-22px)}50%{transform:translateX(22px)}}
@keyframes ivShot{0%{opacity:0;transform:translateY(0)}10%{opacity:1}70%{opacity:1;transform:translateY(-46px)}100%{opacity:0;transform:translateY(-56px)}}
@keyframes wdFlip{0%,8%{transform:rotateX(0);background:transparent;border-color:#2f3950;color:#e8ecf5}
  14%{transform:rotateX(90deg)}
  20%,86%{transform:rotateX(0);background:var(--fill);border-color:var(--fill);color:var(--fg)}
  94%,100%{transform:rotateX(0);background:transparent;border-color:#2f3950;color:#e8ecf5}}
@keyframes wdType{0%,38%{border-color:#2f3950;color:transparent;transform:scale(1)}
  44%{transform:scale(1.09)}
  50%,90%{border-color:#46527a;color:#e8ecf5;transform:scale(1)}
  96%,100%{border-color:#2f3950;color:transparent}}
@keyframes rxFlash{0%,44%{background:linear-gradient(160deg,#5a1620,#3a0d16)}
  50%,88%{background:linear-gradient(160deg,#12a05c,#0a6b3d)}
  94%,100%{background:linear-gradient(160deg,#5a1620,#3a0d16)}}
@keyframes rxSwap{0%,44%{opacity:1}46%,100%{opacity:0}}
@keyframes rxGo{0%,46%{opacity:0}52%,88%{opacity:1}94%,100%{opacity:0}}
@keyframes rxNum{0%,54%{opacity:0;transform:translateY(6px)}62%,92%{opacity:1;transform:none}98%,100%{opacity:0}}
@keyframes loDot{0%,49%{background:rgba(150,170,215,.14);box-shadow:none}
  50%,100%{background:#c3aaff;box-shadow:0 0 9px 1px rgba(195,170,255,.75)}}
@keyframes sdFill{0%,6%{opacity:0;transform:scale(.5)}14%,88%{opacity:1;transform:scale(1)}96%,100%{opacity:0}}
@keyframes tyOn{0%{opacity:0}100%{opacity:1}}
@keyframes tyCaret{0%{transform:translateX(0)}20%{transform:translateX(26px)}40%{transform:translateX(58px)}
  60%{transform:translateX(86px)}80%,100%{transform:translateX(118px)}}
@keyframes tyBlink{0%,50%{opacity:1}51%,100%{opacity:.15}}
@keyframes plMove{0%,100%{transform:translate(0,0)}
  25%{transform:translate(24px,14px)}
  50%{transform:translate(52px,4px)}
  75%{transform:translate(78px,20px)}}
@keyframes pwRoll{0%{opacity:.25}12%{opacity:1}100%{opacity:1}}
@keyframes pwFill{0%,10%{background:rgba(255,255,255,.1)}22%,100%{background:#6fe3a6}}
@keyframes unRoll{0%,24%{opacity:.3}30%,100%{opacity:1}}
@keyframes unPush{0%,100%{transform:translateX(0)}50%{transform:translateX(4px)}}
@keyframes txSort{0%,18%{transform:translateY(0)}38%,82%{transform:translateY(var(--to))}96%,100%{transform:translateY(0)}}
@keyframes enPulse{0%,100%{transform:translateY(0);opacity:.6}50%{transform:translateY(3px);opacity:1}}
@keyframes hsIn{0%,12%{opacity:0;transform:translateX(-5px)}26%,88%{opacity:1;transform:none}96%,100%{opacity:0}}
@keyframes hsScan{0%,8%{transform:translateY(0);opacity:0}12%{opacity:1}56%{transform:translateY(38px);opacity:1}68%,100%{opacity:0;transform:translateY(38px)}}
@keyframes jsIn{0%,5%{opacity:0;transform:translateX(-6px)}14%,88%{opacity:1;transform:none}96%,100%{opacity:0}}
@keyframes tlOut{0%,32%{opacity:1;transform:translateY(0)}44%,88%{opacity:0;transform:translateY(-8px)}96%,100%{opacity:1;transform:translateY(0)}}
@keyframes tlIn{0%,36%{opacity:0;transform:translateY(8px)}48%,88%{opacity:1;transform:none}96%,100%{opacity:0}}
@keyframes rnRoll{0%{transform:rotate(0) scale(1)}30%{transform:rotate(200deg) scale(1.1)}55%,100%{transform:rotate(360deg) scale(1)}}
@keyframes rnPip{0%,54%{opacity:0}56%,100%{opacity:1}}
@keyframes rnPip2{0%,54%{opacity:1}56%,100%{opacity:0}}
@keyframes rnFlip{0%{transform:rotateY(0)}55%{transform:rotateY(900deg)}100%{transform:rotateY(1080deg)}}
@keyframes tmTick{0%,20%{opacity:1}21%,40%{opacity:.55}41%,60%{opacity:1}61%,80%{opacity:.55}81%,100%{opacity:1}}
@keyframes qrIn{0%,4%{opacity:0;transform:scale(.3)}14%,90%{opacity:1;transform:scale(1)}97%,100%{opacity:0}}
@keyframes imShrink{0%,14%{transform:scale(1)}46%,86%{transform:scale(.56)}98%,100%{transform:scale(1)}}
@keyframes imSize{0%,30%{opacity:0}46%,88%{opacity:1}97%,100%{opacity:0}}
@keyframes imBar{0%,14%{width:100%}46%,86%{width:34%}98%,100%{width:100%}}