/* BingoX — streamer game-screen SKINS (Phase 3, v0.16.0).
 *
 * A skin is ONE class on <body> (.skin-<id>, set by overlay.js from the
 * channel's worn_skin) that retints the whole STAGE: the backdrop, the glass
 * panels, the glow and the standby scene. It is the STREAMER'S cosmetic; a
 * VIEWER'S flair (colour/stamp/frame/cell) still paints on the cells ON TOP,
 * untouched, because a skin only themes the stage furniture and never a cell's
 * own class. That split is the whole design.
 *
 * Each skin is a set of --sk-* CSS variables (defined on .skin-<id> so the SAME
 * block themes both the overlay body AND the dashboard store preview .skinprev).
 * The generic rules below read those vars and apply them to the real elements.
 * Everything here is STATIC paint (no animation, no per-frame JS) so a skin can
 * never cost a streamer frames on stream, the same rule viewer flair follows.
 *
 * ⚠️ An id is PERMANENT: it is the class here, the wire value and the hub action
 * (skin_<id>). Add a skin, never rename one, or you orphan every channel wearing
 * it. A body with no skin class (or a retired id, filtered server-side) simply
 * keeps the default BingoX look these rules never touch.
 */

/* ── the palettes: REAL painted scenes (v0.22.0, Joey Aug 28) ───────────────
   Each skin's backdrop is a real background painting, generated on ForgeX
   (Qwen-Image on the 3090, Apache 2.0 so the outputs are safe to sell), shipped
   as /skins/<id>.webp at 1920x1080 (~100KB each). Three layers per --sk-bg:
   a dark scrim so the glass panels and cards stay readable on top (synthwave's
   is strongest, its art is the brightest), the image, and the old base sky
   gradient underneath as the paint while the image loads (or if it ever 404s).
   Still STATIC paint only: a fixed image costs no frames, same rule as always.
   Regenerate or re-roll any scene with forgex/tools/bingox-skins-pack.js. */
.skin-hallows{
  --sk-bg:
    linear-gradient(180deg,rgba(8,6,18,.26),rgba(8,6,18,.44)),
    url('/skins/hallows.webp'),
    linear-gradient(180deg,#1c1030,#120a22 55%,#0c0618);
  --sk-glass:linear-gradient(160deg,rgba(46,26,64,.80),rgba(20,10,30,.84));
  --sk-glow:rgba(255,140,50,.55);
  --sk-accent:#ff9a48;
  --sk-edge:rgba(255,160,90,.22);
}
.skin-synthwave{
  --sk-bg:
    linear-gradient(180deg,rgba(8,6,20,.38),rgba(8,6,20,.55)),
    url('/skins/synthwave.webp'),
    linear-gradient(180deg,#2a1257,#3a1466 46%,#160a30 74%,#0d0620);
  --sk-glass:linear-gradient(160deg,rgba(52,20,74,.78),rgba(24,12,44,.84));
  --sk-glow:rgba(255,60,190,.55);
  --sk-accent:#ff6ad2;
  --sk-edge:rgba(90,220,255,.24);
}
.skin-frostbite{
  --sk-bg:
    linear-gradient(180deg,rgba(6,10,20,.28),rgba(6,10,20,.46)),
    url('/skins/frostbite.webp'),
    linear-gradient(165deg,#123a56,#0d2a42 55%,#0a1f32);
  --sk-glass:linear-gradient(160deg,rgba(30,60,86,.76),rgba(16,34,52,.84));
  --sk-glow:rgba(160,225,255,.55);
  --sk-accent:#b8ecff;
  --sk-edge:rgba(190,235,255,.26);
}
.skin-bloom{
  --sk-bg:
    linear-gradient(180deg,rgba(10,6,18,.30),rgba(10,6,18,.48)),
    url('/skins/bloom.webp'),
    linear-gradient(160deg,#3a1a30,#2a1224 55%,#1c0d18);
  --sk-glass:linear-gradient(160deg,rgba(70,32,54,.76),rgba(34,16,28,.84));
  --sk-glow:rgba(255,168,212,.55);
  --sk-accent:#ffa7d4;
  --sk-edge:rgba(255,185,215,.24);
}
.skin-royale{
  --sk-bg:
    linear-gradient(180deg,rgba(6,4,12,.18),rgba(6,4,12,.36)),
    url('/skins/royale.webp'),
    linear-gradient(160deg,#2e1746,#1e0f32 58%,#140a24);
  --sk-glass:linear-gradient(160deg,rgba(58,34,74,.80),rgba(28,16,40,.86));
  --sk-glow:rgba(255,205,110,.5);
  --sk-accent:#ffd77a;
  --sk-edge:rgba(255,214,130,.26);
}
.skin-cosmos{
  --sk-bg:
    linear-gradient(180deg,rgba(4,4,14,.22),rgba(4,4,14,.40)),
    url('/skins/cosmos.webp'),
    linear-gradient(160deg,#0e1236,#0a0c26 58%,#06060f);
  --sk-glass:linear-gradient(160deg,rgba(30,32,74,.78),rgba(14,16,40,.86));
  --sk-glow:rgba(150,120,255,.55);
  --sk-accent:#a99cff;
  --sk-edge:rgba(150,170,255,.24);
}
/* ── wave 2 (v0.23.0, Aug 28): six more painted scenes, same three layers ──── */
.skin-reef{
  --sk-bg:
    linear-gradient(180deg,rgba(2,10,16,.26),rgba(2,10,16,.44)),
    url('/skins/reef.webp'),
    linear-gradient(170deg,#062a38,#04202c 55%,#031622);
  --sk-glass:linear-gradient(160deg,rgba(14,48,60,.78),rgba(6,22,32,.86));
  --sk-glow:rgba(46,224,200,.55);
  --sk-accent:#4fe8d2;
  --sk-edge:rgba(120,230,215,.24);
}
.skin-inferno{
  --sk-bg:
    linear-gradient(180deg,rgba(10,3,2,.26),rgba(10,3,2,.46)),
    url('/skins/inferno.webp'),
    linear-gradient(180deg,#220a06,#180705 55%,#0e0403);
  --sk-glass:linear-gradient(160deg,rgba(52,20,12,.78),rgba(26,10,6,.86));
  --sk-glow:rgba(255,90,30,.55);
  --sk-accent:#ff7a3c;
  --sk-edge:rgba(255,140,80,.24);
}
.skin-grove{
  --sk-bg:
    linear-gradient(180deg,rgba(3,10,6,.28),rgba(3,10,6,.46)),
    url('/skins/grove.webp'),
    linear-gradient(175deg,#0a2012,#07180d 55%,#04100a);
  --sk-glass:linear-gradient(160deg,rgba(18,44,26,.78),rgba(8,22,14,.86));
  --sk-glow:rgba(170,220,100,.5);
  --sk-accent:#ffd75c;
  --sk-edge:rgba(190,230,140,.22);
}
.skin-tides{
  --sk-bg:
    linear-gradient(180deg,rgba(8,5,16,.26),rgba(8,5,16,.44)),
    url('/skins/tides.webp'),
    linear-gradient(180deg,#2a1440,#1a0f30 55%,#100a20);
  --sk-glass:linear-gradient(160deg,rgba(40,24,50,.76),rgba(18,12,30,.85));
  --sk-glow:rgba(255,150,80,.5);
  --sk-accent:#ffb066;
  --sk-edge:rgba(255,180,120,.22);
}
.skin-neonrain{
  --sk-bg:
    linear-gradient(180deg,rgba(4,8,18,.32),rgba(4,8,18,.50)),
    url('/skins/neonrain.webp'),
    linear-gradient(180deg,#0c1430,#0a1026 55%,#060a18);
  --sk-glass:linear-gradient(160deg,rgba(20,26,52,.78),rgba(10,14,30,.86));
  --sk-glow:rgba(255,92,200,.5);
  --sk-accent:#6ee0ff;
  --sk-edge:rgba(120,200,255,.24);
}
.skin-candy{
  --sk-bg:
    linear-gradient(180deg,rgba(12,6,16,.34),rgba(12,6,16,.52)),
    url('/skins/candy.webp'),
    linear-gradient(180deg,#2c1836,#221230 55%,#160a20);
  --sk-glass:linear-gradient(160deg,rgba(58,28,54,.78),rgba(30,14,32,.86));
  --sk-glow:rgba(255,150,210,.5);
  --sk-accent:#ff9ad2;
  --sk-edge:rgba(255,180,220,.24);
}

/* ── apply the palette to the real overlay (any .skin-* on <body>) ─────────── */

/* The full backdrop rides #bglayer, which the streamer's opacity slider already
   governs (overlay.js). So a transparent OBS source (opacity 0) shows NO themed
   background over gameplay — the skin respects the streamer's transparency — and
   a solid source (or the browser-tab / pop-out view, forced to full opacity)
   wears the theme edge to edge. The panels below carry the skin either way. */
body[class*="skin-"] #bglayer{ background:var(--sk-bg); background-attachment:fixed;
  background-size:cover; background-position:center; }
/* The normal browser tab / pop-out paints the backdrop on <body> too. */
body[class*="skin-"].intab{ background:var(--sk-bg) fixed;
  background-size:cover; background-position:center; }

/* Glass panels are the overlay's own furniture: never transparentized by OBS, so
   they carry the skin on stream whatever the backdrop opacity. Themed tint + a
   soft themed glow, keeping the original depth shadow + top sheen. */
body[class*="skin-"] .glass{
  background:var(--sk-glass);
  box-shadow:0 20px 60px -22px #000,0 0 46px -14px var(--sk-glow),
             inset 0 0 0 1.5px var(--sk-edge),inset 0 1px 0 rgba(255,255,255,.09);
}

/* The standby / "Lobby opens soon" scene picks up the skin's accent: the big
   wordmark gains a themed halo and the countdown wears the accent colour, so the
   between-games attract screen is themed too (roadmap ties skins into standby). */
body[class*="skin-"] .scv-word{ text-shadow:0 8px 40px rgba(0,0,0,.6),0 0 46px var(--sk-glow); }
body[class*="skin-"] .scv-join{ text-shadow:0 0 60px var(--sk-glow); }
body[class*="skin-"] .scv-cdtime{ color:var(--sk-accent); text-shadow:0 0 34px var(--sk-glow); }
body[class*="skin-"] .scv-miniword{ text-shadow:0 0 26px var(--sk-glow); }

/* ── the WHOLE lobby/standby/join scene wears the skin (Joey, 2026-08-24) ───────
   A paid re-skin must retheme the between-games + open-lobby screens too, not just
   the live overlay. The standby scene draws its OWN background (.scv-bg) on top of
   #bglayer, so the skin has to reach it directly: the backdrop, the drifting glows,
   the grid, the ball ring, the accent teal (--b) everywhere it shows, and the join
   screen's eyebrow all switch to the skin's palette. StrmrX's orange byline is left
   alone on purpose (brand credit). Static paint, same "never cost a frame" rule. */
body[class*="skin-"] .scv-bg{ background:var(--sk-bg); background-size:cover; background-position:center; }
body[class*="skin-"] .scv-grid{
  background-image:linear-gradient(var(--sk-edge) 1px,transparent 1px),
                   linear-gradient(90deg,var(--sk-edge) 1px,transparent 1px);
}
body[class*="skin-"] .scv-glow.g1{ background:radial-gradient(circle,var(--sk-glow) 0%,transparent 66%); opacity:.5; }
body[class*="skin-"] .scv-glow.g2{ background:radial-gradient(circle,var(--sk-glow) 0%,transparent 72%); opacity:.42; }
body[class*="skin-"] .scv-ring{ border-color:var(--sk-glow); }
body[class*="skin-"] .scv-inner{ box-shadow:inset 0 0 0 6px var(--sk-accent),0 3px 8px rgba(0,0,0,.18); }
body[class*="skin-"] .scv-num,
body[class*="skin-"] .scv-let{ color:#0a0b14; }
body[class*="skin-"] .scv-miniball b{ color:var(--sk-accent); }
body[class*="skin-"] .scv-av{ border-color:var(--sk-accent); box-shadow:0 0 0 3px var(--sk-glow),0 6px 18px rgba(0,0,0,.5); }
body[class*="skin-"] .scv-oeyebrow{ color:var(--sk-accent); }
body[class*="skin-"] .scv-word .x{ text-shadow:0 0 32px var(--sk-glow),0 0 8px var(--sk-glow); }

/* ── store preview: the SAME vars, rendered as a tiny stage (real, not a mock) ─
   The dashboard store loads this stylesheet so a skin card shows the actual look
   it sells, per the decisions.md rule that a preview must render from real CSS. */
.skinprev{
  position:relative;height:104px;border-radius:14px;overflow:hidden;
  background:var(--sk-bg,linear-gradient(160deg,#151226,#0f0d1a));
  background-size:cover;background-position:center;
  display:flex;align-items:center;justify-content:center;gap:8px;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.06);
}
.skinprev .spword{
  font-family:'Lilita One',var(--font,sans-serif);font-size:26px;letter-spacing:1px;color:#fff;
  text-shadow:0 4px 20px rgba(0,0,0,.6),0 0 30px var(--sk-glow,transparent);z-index:2;
}
.skinprev .spx{ color:var(--sk-accent,#ff7828); }
/* two mock glass chips so the panel tint + themed glow read at a glance */
.skinprev .spchip{
  position:absolute;width:44px;height:30px;border-radius:9px;background:var(--sk-glass,rgba(20,18,40,.8));
  box-shadow:0 10px 30px -12px #000,0 0 26px -10px var(--sk-glow,transparent),
             inset 0 0 0 1px var(--sk-edge,rgba(255,255,255,.08));
}
.skinprev .spchip.a{ left:14px;bottom:14px; }
.skinprev .spchip.b{ right:14px;top:14px;width:34px;height:24px; }
/* the store card's preview is a doorway, not the whole picture */
.skinprev{cursor:zoom-in}
.skinprev .spmag{position:absolute;right:8px;bottom:7px;z-index:3;font:800 10px/1 ui-monospace,monospace;
  letter-spacing:.08em;text-transform:uppercase;color:#fff;opacity:.82;
  padding:4px 8px;border-radius:999px;background:rgba(0,0,0,.34);box-shadow:inset 0 0 0 1px rgba(255,255,255,.18)}

/* ── the BIG preview: a mock overlay so a streamer sees what a skin actually does
   before spending, opened from a store card (Joey's ask). Same --sk-* vars as the
   real overlay, so it is honest — the bg wash, the glass tint + themed glow, and the
   accent all render exactly as they will on stream. Shown inside .skmodal. */
.skmodal-back{position:fixed;inset:0;z-index:9000;display:flex;align-items:center;justify-content:center;
  padding:24px;background:rgba(6,9,16,.66);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
  opacity:0;transition:opacity .22s ease-out}
.skmodal-back.in{opacity:1}
.skmodal-card{width:min(560px,100%);border-radius:20px;overflow:hidden;color:#eaf1f6;
  background:linear-gradient(150deg,rgba(24,30,50,.96),rgba(12,15,28,.98));
  box-shadow:0 40px 90px -30px #000,inset 0 0 0 1.5px rgba(255,255,255,.1);
  transform:translateY(10px) scale(.95);opacity:0;
  transition:transform .26s cubic-bezier(.34,1.56,.64,1),opacity .2s ease-out}
.skmodal-back.in .skmodal-card{transform:none;opacity:1}
.skmodal-head{display:flex;align-items:baseline;gap:10px;padding:18px 20px 0}
.skmodal-head b{font:800 19px/1.1 system-ui}
.skmodal-head .mood{font:700 11px/1 ui-monospace,monospace;letter-spacing:.1em;text-transform:uppercase;color:#8b93a5}
.skmodal-blurb{margin:6px 20px 0;color:#aab3c5;font-size:13.5px}
.skmodal-foot{display:flex;gap:10px;padding:16px 20px 18px}
.skmodal-foot button{flex:1;padding:12px 16px;border:0;border-radius:12px;cursor:pointer;font:800 14px/1 system-ui}
.skmodal-foot .close{color:#c5cdda;background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1)}
.skmodal-foot .buy{color:#04201b;background:linear-gradient(135deg,#7bf5df,#22e0c8)}
@media(prefers-reduced-motion:reduce){.skmodal-card{transform:none}.skmodal-back.in .skmodal-card{transform:none}}

.skinprev-lg{position:relative;height:300px;margin:16px 20px 0;border-radius:16px;overflow:hidden;
  background:var(--sk-bg,linear-gradient(160deg,#151226,#0f0d1a));background-size:cover;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
/* the called ball, top centre */
.skinprev-lg .spl-ball{position:absolute;top:26px;left:50%;transform:translateX(-50%);
  width:82px;height:82px;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:radial-gradient(circle at 38% 30%,rgba(255,255,255,.16),rgba(0,0,0,.28)),var(--sk-glass,rgba(20,18,40,.85));
  box-shadow:0 20px 50px -18px #000,0 0 44px -8px var(--sk-glow,transparent),inset 0 0 0 2px var(--sk-edge,rgba(255,255,255,.14))}
.skinprev-lg .spl-ball .let{font:800 12px/1 ui-monospace,monospace;letter-spacing:.12em;color:var(--sk-accent,#ff8a3d)}
.skinprev-lg .spl-ball .num{font:800 34px/1 'Lilita One',system-ui;color:#fff;text-shadow:0 2px 10px rgba(0,0,0,.5)}
/* mock spotlight panels */
.skinprev-lg .spl-panel{position:absolute;border-radius:12px;background:var(--sk-glass,rgba(20,18,40,.85));
  box-shadow:0 18px 40px -18px #000,0 0 34px -12px var(--sk-glow,transparent),inset 0 0 0 1px var(--sk-edge,rgba(255,255,255,.1))}
.skinprev-lg .spl-panel.l{left:22px;top:130px;width:150px;height:120px}
.skinprev-lg .spl-panel.r{right:22px;top:130px;width:150px;height:120px}
.skinprev-lg .spl-row{height:12px;border-radius:6px;margin:14px 14px 0;background:rgba(255,255,255,.14)}
.skinprev-lg .spl-row.s{width:60%}
.skinprev-lg .spl-row.accent{background:var(--sk-accent,#ff8a3d);opacity:.85}
.skinprev-lg .spl-word{position:absolute;bottom:16px;left:50%;transform:translateX(-50%);
  font:400 30px/1 'Lilita One',system-ui;letter-spacing:1px;color:#fff;
  text-shadow:0 6px 26px rgba(0,0,0,.6),0 0 34px var(--sk-glow,transparent)}
.skinprev-lg .spl-word .spx{color:var(--sk-accent,#ff7828)}
.skinprev-lg .spl-tag{position:absolute;top:120px;left:50%;transform:translateX(-50%);white-space:nowrap;
  font:800 11px/1 ui-monospace,monospace;letter-spacing:.14em;text-transform:uppercase;color:#fff;
  padding:6px 12px;border-radius:999px;background:rgba(0,0,0,.32);
  box-shadow:inset 0 0 0 1px var(--sk-edge,rgba(255,255,255,.18)),0 0 26px -8px var(--sk-glow,transparent)}

/* ── the FULL preview: all three screens a skin dresses (Joey, 2026-08-27) ─────
   skin-preview.js (the ONE shared preview module — flair.js + gift.js both call
   it) renders the join screen, the between-games lobby scene and the live game
   screen as three honest mock stages. Every colour reads the same --sk-* vars
   the real overlay wears, via the .skin-<id> class on .skp-scenes. The BingoX
   wordmark X stays StrmrX orange with a themed halo, exactly like the real
   standby scene (brand rule: the one orange X). */
.skmodal-card.wide{width:min(860px,100%);max-height:calc(100vh - 48px);overflow:auto}
.skp-scenes{display:flex;flex-direction:column;gap:16px;margin:14px 20px 4px}
.skp-cap{font:800 11px/1 ui-monospace,monospace;letter-spacing:.16em;text-transform:uppercase;
  color:#8b93a5;margin:0 0 7px}
.skp-scene{position:relative;aspect-ratio:2/1;border-radius:14px;overflow:hidden;
  background:var(--sk-bg,linear-gradient(160deg,#151226,#0f0d1a));background-size:cover;
  background-position:center;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
/* stage furniture every scene shares: the faint grid + two drifting glows */
.skp-grid{position:absolute;inset:0;opacity:.5;
  background-image:linear-gradient(var(--sk-edge,rgba(255,255,255,.06)) 1px,transparent 1px),
                   linear-gradient(90deg,var(--sk-edge,rgba(255,255,255,.06)) 1px,transparent 1px);
  background-size:44px 44px;
  -webkit-mask-image:radial-gradient(80% 80% at 50% 45%,#000 30%,transparent 100%);
          mask-image:radial-gradient(80% 80% at 50% 45%,#000 30%,transparent 100%)}
.skp-glow{position:absolute;width:46%;aspect-ratio:1;border-radius:50%;filter:blur(6px);opacity:.5;
  background:radial-gradient(circle,var(--sk-glow,rgba(120,120,200,.4)) 0%,transparent 70%)}
.skp-glow.g1{left:-10%;top:-20%}
.skp-glow.g2{right:-12%;bottom:-26%;opacity:.4}
/* the join screen */
.skp-eyebrow{position:absolute;top:14px;left:50%;transform:translateX(-50%);white-space:nowrap;
  font:800 10px/1 ui-monospace,monospace;letter-spacing:.22em;text-transform:uppercase;
  color:var(--sk-accent,#ffb46a);text-shadow:0 0 22px var(--sk-glow,transparent)}
.skp-ball{position:absolute;left:50%;top:36px;transform:translateX(-50%);
  width:92px;height:92px;border-radius:50%;display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  background:radial-gradient(circle at 36% 30%,#fff,#dfe6ee 72%);
  box-shadow:inset 0 0 0 6px var(--sk-accent,#22e0c8),0 18px 44px -14px #000,
             0 0 44px -6px var(--sk-glow,transparent)}
.skp-ball .let{font:800 11px/1 ui-monospace,monospace;letter-spacing:.12em;color:#5a6474}
.skp-ball .num{font:400 36px/1 'Lilita One',system-ui;color:#0d1220}
.skp-ball.join .num{font-size:24px}
.skp-banner{position:absolute;left:50%;bottom:26px;transform:translateX(-50%);text-align:center;
  white-space:nowrap;padding:13px 26px;border-radius:14px;
  background:var(--sk-glass,rgba(20,18,40,.85));
  box-shadow:0 18px 40px -18px #000,0 0 34px -10px var(--sk-glow,transparent),
             inset 0 0 0 1px var(--sk-edge,rgba(255,255,255,.1))}
.skp-banner b{display:block;font:800 16px/1.2 system-ui;color:#fff}
.skp-banner span{display:block;margin-top:4px;font:500 11.5px/1.2 system-ui;color:rgba(255,255,255,.66)}
/* the between-games lobby scene */
.skp-bigword{position:absolute;left:50%;top:36%;transform:translate(-50%,-50%);
  font:400 46px/1 'Lilita One',system-ui;letter-spacing:1px;color:#fff;
  text-shadow:0 8px 40px rgba(0,0,0,.6),0 0 46px var(--sk-glow,transparent)}
.skp-bigword .x,.skp-word .x{color:#ff7828;text-shadow:0 0 30px var(--sk-glow,transparent)}
.skp-ring{position:absolute;left:50%;top:56%;transform:translateX(-50%);display:flex;gap:10px}
.skp-mini{width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font:400 14px/1 'Lilita One',system-ui;color:#0d1220;
  background:radial-gradient(circle at 36% 30%,#fff,#dde5ee 72%);
  box-shadow:inset 0 0 0 3px var(--sk-accent,#22e0c8),0 8px 20px -8px #000}
.skp-count{position:absolute;left:50%;bottom:16px;transform:translateX(-50%);white-space:nowrap;
  font:800 11px/1 ui-monospace,monospace;letter-spacing:.2em;text-transform:uppercase;
  color:var(--sk-accent,#ffb46a);text-shadow:0 0 24px var(--sk-glow,transparent)}
/* the live game scene */
.skp-chips{position:absolute;left:50%;top:140px;transform:translateX(-50%);display:flex;gap:6px}
.skp-chips i{font:800 10px/1 ui-monospace,monospace;font-style:normal;color:#fff;opacity:.85;
  padding:4px 8px;border-radius:999px;background:rgba(0,0,0,.3);
  box-shadow:inset 0 0 0 1px var(--sk-edge,rgba(255,255,255,.14))}
.skp-panel{position:absolute;top:30px;width:29%;border-radius:12px;padding:10px 10px 12px;
  background:var(--sk-glass,rgba(20,18,40,.85));
  box-shadow:0 18px 40px -18px #000,0 0 34px -12px var(--sk-glow,transparent),
             inset 0 0 0 1px var(--sk-edge,rgba(255,255,255,.1))}
.skp-panel.l{left:18px}
.skp-panel.r{right:18px}
.skp-name{height:9px;width:60%;border-radius:5px;background:rgba(255,255,255,.25);margin:0 0 8px}
.skp-5x5{display:grid;grid-template-columns:repeat(5,1fr);gap:3px}
.skp-5x5 i{aspect-ratio:1;border-radius:3px;background:rgba(255,255,255,.10)}
.skp-5x5 i.m{background:var(--sk-accent,#22e0c8);opacity:.9}
.skp-word{position:absolute;left:50%;bottom:12px;transform:translateX(-50%);
  font:400 22px/1 'Lilita One',system-ui;letter-spacing:1px;color:#fff;
  text-shadow:0 6px 26px rgba(0,0,0,.6),0 0 30px var(--sk-glow,transparent)}
@media(max-width:560px){
  .skp-scene{aspect-ratio:16/10}
  .skp-bigword{font-size:34px}
  .skp-panel{display:none}
  .skp-banner{white-space:normal;width:76%}
}