/* Rare Theme Colours */

/*  Mono */
body[data-theme="mono"] .vpod-container {
  background: linear-gradient(160deg, #f7f7f7 0%, #dcdcdc 60%, #bfbfbf 100%);
}
body[data-theme="mono"] .vpod-screen {
  background: linear-gradient(180deg, #f8f8f8 0%, #e3e3e3 100%);
}

/* High Contrast */
body[data-theme="contrast"] .vpod-container {
  background: #0e1726;
  border-color: #1f2a44;
  box-shadow: 0 8px 32px rgba(0,0,0,0.4);
}
body[data-theme="contrast"] .vpod-screen {
  background: #0b1020;
  border-color: #1f2a44;
}
body[data-theme="contrast"] {
  --vpod-highlight-bg: #173a7a;
  --vpod-highlight-fg: #f0f8ff;
}

/* U2 Red/Black */
body[data-theme="u2"] .vpod-container {
  background: linear-gradient(160deg, #070707 0%, #0d0d0d 55%, #151515 100%);
  border-color: #1e1e1e;
  box-shadow: 0 10px 32px rgba(0,0,0,0.4), 0 1px 4px rgba(0,0,0,0.25);
}

body[data-theme="u2"] .vpod-screen {
  background: linear-gradient(180deg, #1a1a1a 0%, #0f0f0f 100%);
  border-color: #2a0a0a;
}

body[data-theme="u2"] {
  --vpod-highlight-bg: rgba(214, 16, 32, 0.22);
  --vpod-highlight-fg: #f7f0e9;
}

/* Scroll wheel */
body[data-theme="u2"] .vpod-disk {
  background: radial-gradient(circle at 60% 40%, #d4142f 55%, #9b0f24 100%);
  border-color: #7a0c1d;
  box-shadow: 0 0 14px rgba(0,0,0,0.25), 0 1px 4px rgba(0,0,0,0.18);
}

body[data-theme="u2"] .vpod-disk:before {
  background: linear-gradient(130deg, rgba(255,255,255,0.24) 0%, rgba(255,255,255,0.05) 100%);
}

body[data-theme="u2"] .vpod-disk-btn {
  color: #fbe4e4;
  text-shadow: 0 1px 2px #5a0b17, 0 -1px 2px #b2182c;
}

body[data-theme="u2"] .vpod-disk-center {
  background: linear-gradient(160deg, #b01026 0%, #8f0d1f 60%, #6d0b18 100%);
  border-color: #5a0b17;
  box-shadow: 0 1px 4px #fff2 inset, 0 0 8px rgba(0,0,0,0.25);
}

body[data-theme="u2"] .vpod-disk:active {
  box-shadow: 0 0 10px 2px #7a0c1d99, 0 0 6px rgba(0, 0, 0, 0.2);
}

/* Midnight Neon */
body[data-theme="midnight"] .vpod-container {
  background: linear-gradient(160deg, #0c1020 0%, #12264a 55%, #00b4ff 100%);
  border-color: #12264a;
}
body[data-theme="midnight"] .vpod-screen {
  background: linear-gradient(180deg, #0c1426 0%, #0a0f1d 100%);
}
body[data-theme="midnight"] {
  --vpod-highlight-bg: rgba(0,180,255,0.18);
  --vpod-highlight-fg: #f0f8ff;
}

/* Neon Wave */
body[data-theme="neonwave"] .vpod-container {
  background: linear-gradient(160deg, #1a0f2e 0%, #5327ff 50%, #ff7ee2 100%);
  border-color: #2c1c5c;
}
body[data-theme="neonwave"] .vpod-screen {
  background: linear-gradient(180deg, #120a24 0%, #1f0f3a 100%);
}
body[data-theme="neonwave"] {
  --vpod-highlight-bg: rgba(255,126,226,0.18);
  --vpod-highlight-fg: #fff4fc;
}

/* Carbon */
body[data-theme="carbon"] .vpod-container {
  background: linear-gradient(160deg, #0f0f0f 0%, #1f1f1f 55%, #3a3a3a 100%);
  border-color: #2a2a2a;
}
body[data-theme="carbon"] .vpod-screen {
  background: linear-gradient(180deg, #111 0%, #1b1b1b 100%);
}
body[data-theme="carbon"] {
  --vpod-highlight-bg: rgba(70, 70, 70, 0.28);
  --vpod-highlight-fg: #f4f4f4;
}

/* Deep Forest */
body[data-theme="forest"] .vpod-container {
  background: linear-gradient(160deg, #0b2e1c 0%, #1f6a3b 55%, #7bd27f 100%);
  border-color: #145534;
}
body[data-theme="forest"] .vpod-screen {
  background: linear-gradient(180deg, #0c2417 0%, #12452b 100%);
}
body[data-theme="forest"] {
  --vpod-highlight-bg: rgba(31,106,59,0.2);
  --vpod-highlight-fg: #e9fff0;
}

/* Aqua Glass */
body[data-theme="aqua"] .vpod-container {
  background: linear-gradient(160deg, #022c43 0%, #1b9aaa 55%, #72efdd 100%);
  border-color: #0f5f74;
}
body[data-theme="aqua"] .vpod-screen {
  background: linear-gradient(180deg, #05314a 0%, #0c4962 100%);
}
body[data-theme="aqua"] {
  --vpod-highlight-bg: rgba(114,239,221,0.2);
  --vpod-highlight-fg: #083744;
}

/* Sunset Fade */
body[data-theme="sunset"] .vpod-container {
  background: linear-gradient(160deg, #2d0b3a 0%, #ff5f6d 55%, #ffc371 100%);
  border-color: #7a2444;
}
body[data-theme="sunset"] .vpod-screen {
  background: linear-gradient(180deg, #2c0f24 0%, #4a1a30 100%);
}
body[data-theme="sunset"] {
  --vpod-highlight-bg: rgba(255,99,122,0.18);
  --vpod-highlight-fg: #fff3ec;
}

/* Plasma Pulse */
body[data-theme="plasma"] .vpod-container {
  background: linear-gradient(160deg, #1b0036 0%, #4a148c 40%, #ff3cac 100%);
  border-color: #2d0b52;
}
body[data-theme="plasma"] .vpod-screen {
  background: linear-gradient(180deg, #18002f 0%, #2b0c4e 100%);
}
body[data-theme="plasma"] {
  --vpod-highlight-bg: rgba(255,60,172,0.18);
  --vpod-highlight-fg: #fff3fb;
}

/* Aurora Drift */
body[data-theme="aurora"] .vpod-container {
  background: linear-gradient(160deg, #041427 0%, #0b3a52 55%, #35ffc5 100%);
  border-color: #0f2d3f;
  box-shadow: 0 10px 32px rgba(0,0,0,0.45);
}
body[data-theme="aurora"] .vpod-screen {
  background: linear-gradient(180deg, #071626 0%, #0c2238 100%);
  border-color: #124a62;
}
body[data-theme="aurora"] {
  --vpod-highlight-bg: rgba(53,255,197,0.20);
  --vpod-highlight-fg: #ecfff8;
}

/* Lava Core */
body[data-theme="lava"] .vpod-container {
  background: linear-gradient(160deg, #1a0300 0%, #6d1000 50%, #ff5a00 100%);
  border-color: #4a0b00;
}
body[data-theme="lava"] .vpod-screen {
  background: linear-gradient(180deg, #1c0c0a 0%, #2e0f0c 100%);
  border-color: #6d1000;
}
body[data-theme="lava"] {
  --vpod-highlight-bg: rgba(255,90,0,0.20);
  --vpod-highlight-fg: #fff2e6;
}

/* Crystal Ice */
body[data-theme="crystal"] .vpod-container {
  background: linear-gradient(160deg, #021019 0%, #0f2e4f 45%, #7be2ff 100%);
  border-color: #0f2e4f;
}
body[data-theme="crystal"] .vpod-screen {
  background: linear-gradient(180deg, #0b1c2b 0%, #0f2a40 100%);
  border-color: #1d5a7a;
}
body[data-theme="crystal"] {
  --vpod-highlight-bg: rgba(123,226,255,0.20);
  --vpod-highlight-fg: #08324a;
}

/* Starlight */
body[data-theme="starlight"] .vpod-container {
  background: linear-gradient(160deg, #060612 0%, #14143a 55%, #c7a4ff 100%);
  border-color: #1f1f4a;
}
body[data-theme="starlight"] .vpod-screen {
  background: linear-gradient(180deg, #0a0a1d 0%, #151533 100%);
  border-color: #2e2e60;
}
body[data-theme="starlight"] {
  --vpod-highlight-bg: rgba(199,164,255,0.20);
  --vpod-highlight-fg: #faf5ff;
}

/* Onyx Gold */
body[data-theme="onyx"] .vpod-container {
  background: linear-gradient(160deg, #060606 0%, #151515 55%, #b38b00 100%);
  border-color: #262626;
}
body[data-theme="onyx"] .vpod-screen {
  background: linear-gradient(180deg, #0b0b0b 0%, #161616 100%);
  border-color: #5a4300;
}
body[data-theme="onyx"] {
  --vpod-highlight-bg: rgba(179,139,0,0.20);
  --vpod-highlight-fg: #fff6d8;
}

/* Game Unlockable Themes */

/* Brick Master */
body[data-theme="brickmaster"] .vpod-container {
  background: linear-gradient(145deg,#161616 0%,#2a2a2a 55%,#ffb347 100%);
  border: 3px solid #3a3a3a;
  box-shadow: 0 12px 30px rgba(0,0,0,0.38), inset 0 2px 6px #0d0d0d;
}
body[data-theme="brickmaster"] .vpod-screen {
  background: linear-gradient(180deg,#111 0%,#1d1d1d 100%);
  border-color:#ffb347;
  box-shadow: inset 0 2px 8px rgba(0,0,0,0.25);
}
body[data-theme="brickmaster"] .vpod-disk {
  background: radial-gradient(circle at 55% 40%,#f6f6f6 58%,#dcdcdc 100%);
  border-color:#a66b1b;
  box-shadow: 0 0 12px rgba(0,0,0,0.22);
}
body[data-theme="brickmaster"] .vpod-disk-center { background: linear-gradient(150deg,#c87c1f 0%,#8d5716 85%); color:#2b1a00; }
body[data-theme="brickmaster"] {
  --vpod-highlight-bg: rgba(255,179,71,0.22);
  --vpod-highlight-fg: #fff3e0;
}

/* Snake Byte (dark jungle, lime cues, silver wheel) */
body[data-theme="snakebyte"] .vpod-container {
  background: linear-gradient(150deg,#0a150c 0%,#12311b 55%,#1e6a32 100%);
  border: 3px solid #1f3f24;
  box-shadow: 0 12px 28px rgba(0,0,0,0.34);
}
body[data-theme="snakebyte"] .vpod-screen {
  background: linear-gradient(180deg,#0c120d 0%,#0f1f14 100%);
  border-color:#2e8f2e;
}
body[data-theme="snakebyte"] .vpod-disk {
  background: radial-gradient(circle at 58% 38%,#f2f2f2 60%,#d8d8d8 100%);
  border-color:#1d5f1d;
}
body[data-theme="snakebyte"] .vpod-disk-center { background: linear-gradient(145deg,#2e8f2e 0%,#1c5f1c 85%); color:#e9ffe9; }
body[data-theme="snakebyte"] {
  --vpod-highlight-bg: rgba(46,143,46,0.22);
  --vpod-highlight-fg: #e9ffe9;
}

/* Flappy Sky (sky faceplate, white wheel, cyan center) */
body[data-theme="flappysky"] .vpod-container {
  background:
    /* lip with full outline, smaller radius */
    url("data:image/svg+xml;utf8,<svg width='54' height='18' xmlns='http://www.w3.org/2000/svg'><defs><linearGradient id='g' x1='0' y1='0' x2='0' y2='1'><stop offset='0%' stop-color='%2349c972'/><stop offset='100%' stop-color='%232f9a54'/></linearGradient></defs><rect x='1' y='1' width='52' height='16' rx='2' ry='2' fill='url(%23g)' stroke='%23000' stroke-width='2'/></svg>") right 16px bottom calc(180px - 6px) / 54px 18px no-repeat,
    /* body highlight stripe */
    linear-gradient(180deg, rgba(255,255,255,0.22) 0%, rgba(255,255,255,0.05) 100%) right 26px bottom 6px / 6px 168px no-repeat,
    /* body side outlines (left/right only) */
    linear-gradient(90deg, #000 0 3px, transparent 3px 39px, #000 39px 42px, transparent 42px) right 22px bottom 0px / 42px 180px no-repeat,
    /* body fill */
    linear-gradient(90deg, #3a6f3a 0%, #4c8c4c 25%, #357235 65%, #2a5a2a 100%) right 22px bottom 0px / 42px 180px no-repeat,
    /* bird */
    url("/src/img/flailing_bird.png") left 18px bottom 86px / 72px 56px no-repeat,
    /* sky gradient */
    linear-gradient(150deg,#071a30 0%,#0f4a82 55%,#6fe0ff 100%);
  border: 3px solid #1c4a1c;
  box-shadow: 0 12px 30px rgba(0,0,0,0.32);
}

body[data-theme="flappysky"] .vpod-screen {
  background: linear-gradient(180deg,#0a1c2e 0%,#103350 100%);
  border-color:#2c79ab;
}
body[data-theme="flappysky"] .vpod-disk {
  background: radial-gradient(circle at 60% 40%,#ffffff 60%,#e8e8e8 100%);
  border-color:#1b6e96;
  box-shadow: 0 0 14px rgba(0,0,0,0.23),0 1px 6px rgba(0,0,0,0.18);
}
body[data-theme="flappysky"] .vpod-disk-center { background: linear-gradient(150deg,#2a93c4 0%,#1b6e96 85%); color:#e9f9ff; }
body[data-theme="flappysky"] {
  --vpod-highlight-bg: rgba(91,213,255,0.22);
  --vpod-highlight-fg: #e9f9ff;
}

/* Pipes & Flight (green pipes, dark body, light wheel) */
body[data-theme="pipeflight"] .vpod-container {
  background: linear-gradient(150deg,#0b0b0b 0%,#123212 55%,#3dcf74 100%);
  border: 3px solid #1c4a1c;
  box-shadow: 0 12px 28px rgba(0,0,0,0.33);
}
body[data-theme="pipeflight"] .vpod-screen {
  background: linear-gradient(180deg,#0e0e0e 0%,#182918 100%);
  border-color:#2f9a54;
}
body[data-theme="pipeflight"] .vpod-disk {
  background: radial-gradient(circle at 58% 38%,#f5f5f5 60%,#dfdfdf 100%);
  border-color:#1f7038;
}
body[data-theme="pipeflight"] .vpod-disk-center { background: linear-gradient(150deg,#1f7f3e 0%,#15572b 85%); color:#e9fff1; }
body[data-theme="pipeflight"] {
  --vpod-highlight-bg: rgba(57,196,99,0.22);
  --vpod-highlight-fg: #e9fff1;
}

/* 2048 Tiles (amber faceplate, charcoal screen, silver wheel) */
body[data-theme="twentyforty"] .vpod-container {
  background: linear-gradient(150deg,#1d1d1d 0%,#2f2f2f 50%,#f0a73b 100%);
  border: 3px solid #3c3c3c;
  box-shadow: 0 12px 28px rgba(0,0,0,0.34);
}
body[data-theme="twentyforty"] .vpod-screen {
  background: linear-gradient(180deg,#141414 0%,#1f1f1f 100%);
  border-color:#f0a73b;
}
body[data-theme="twentyforty"] .vpod-disk {
  background: radial-gradient(circle at 60% 40%,#f7f7f7 60%,#e2e2e2 100%);
  border-color:#a05f18;
}
body[data-theme="twentyforty"] .vpod-disk-center { background: linear-gradient(150deg,#c0781f 0%,#8c5514 85%); color:#fff7ea; }
body[data-theme="twentyforty"] {
  --vpod-highlight-bg: rgba(240,167,59,0.22);
  --vpod-highlight-fg: #fff7ea;
}

/* Solitaire Green (felt body, pale wheel) */
body[data-theme="solitaireclub"] .vpod-container {
  background: linear-gradient(150deg,#0a190f 0%,#114024 55%,#2fa35a 100%);
  border: 3px solid #1d5a36;
  box-shadow: 0 12px 26px rgba(0,0,0,0.32);
}
body[data-theme="solitaireclub"] .vpod-screen {
  background: linear-gradient(180deg,#0d170f 0%,#123020 100%);
  border-color:#2e8f2e;
}
body[data-theme="solitaireclub"] .vpod-disk {
  background: radial-gradient(circle at 58% 38%,#f4f4f4 60%,#d8d8d8 100%);
  border-color:#1c5f1c;
}
body[data-theme="solitaireclub"] .vpod-disk-center { background: linear-gradient(150deg,#1c5f1c 0%,#144414 85%); color:#e9ffe9; }
body[data-theme="solitaireclub"] {
  --vpod-highlight-bg: rgba(46,143,46,0.22);
  --vpod-highlight-fg: #e9ffe9;
}

/* Number Whiz (navy body, electric blue center, light wheel) */
body[data-theme="numberwhiz"] .vpod-container {
  background: linear-gradient(150deg,#0e111c 0%,#1f2d52 55%,#6e8dff 100%);
  border: 3px solid #2a2a4d;
  box-shadow: 0 12px 28px rgba(0,0,0,0.33);
}
body[data-theme="numberwhiz"] .vpod-screen {
  background: linear-gradient(180deg,#0f111d 0%,#171a30 100%);
  border-color:#3e4bb3;
}
body[data-theme="numberwhiz"] .vpod-disk {
  background: radial-gradient(circle at 58% 38%,#f6f6f6 60%,#e2e2e2 100%);
  border-color:#2b3f9a;
}
body[data-theme="numberwhiz"] .vpod-disk-center { background: linear-gradient(150deg,#3a52c4 0%,#273684 85%); color:#eef1ff; }
body[data-theme="numberwhiz"] {
  --vpod-highlight-bg: rgba(95,124,255,0.20);
  --vpod-highlight-fg: #eef1ff;
}

/* Arcade Gold (amber body, graphite wheel) */
body[data-theme="arcadegold"] .vpod-container {
  background: linear-gradient(150deg,#160d00 0%,#2f1d00 55%,#e2b23b 100%);
  border: 3px solid #3f2a00;
  box-shadow: 0 12px 30px rgba(0,0,0,0.36);
}
body[data-theme="arcadegold"] .vpod-screen {
  background: linear-gradient(180deg,#191107 0%,#241a0c 100%);
  border-color:#d4a017;
}
body[data-theme="arcadegold"] .vpod-disk {
  background: radial-gradient(circle at 58% 38%,#eeeeee 60%,#d9d9d9 100%);
  border-color:#7a520c;
}
body[data-theme="arcadegold"] .vpod-disk-center { background: linear-gradient(150deg,#a4730f 0%,#704c0b 85%); color:#fff6dd; }
body[data-theme="arcadegold"] {
  --vpod-highlight-bg: rgba(212,160,23,0.22);
  --vpod-highlight-fg: #fff6dd;
}

/* Zen Runner (cool teal body, light wheel, deep teal center) */
body[data-theme="zenrunner"] .vpod-container {
  background: linear-gradient(150deg,#0b0f1a 0%,#132a44 55%,#5ef1d2 100%);
  border: 3px solid #1c3650;
  box-shadow: 0 12px 28px rgba(0,0,0,0.32);
}
body[data-theme="zenrunner"] .vpod-screen {
  background: linear-gradient(180deg,#0f1423 0%,#122433 100%);
  border-color:#2a5670;
}
body[data-theme="zenrunner"] .vpod-disk {
  background: radial-gradient(circle at 58% 38%,#f5f5f5 60%,#e0e0e0 100%);
  border-color:#1c7f63;
}
body[data-theme="zenrunner"] .vpod-disk-center { background: linear-gradient(150deg,#1fae86 0%,#15785f 85%); color:#e8fff8; }
body[data-theme="zenrunner"] {
  --vpod-highlight-bg: rgba(79,241,196,0.20);
  --vpod-highlight-fg: #e8fff8;
}

/* Porcelain Signal (warm porcelain shell, charcoal screen, signal-red center) */
body[data-theme="gridglow"] .vpod-container {
  background: linear-gradient(150deg,#f6f0e6 0%,#ddd4c5 58%,#ff6b4a 100%);
  border: 3px solid #b8aa95;
  box-shadow: 0 12px 30px rgba(64,38,24,0.22), inset 0 1px 0 rgba(255,255,255,0.55);
}
body[data-theme="gridglow"] .vpod-screen {
  background:
    linear-gradient(rgba(255,107,74,0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,107,74,0.06) 1px, transparent 1px),
    linear-gradient(180deg,#221d1a 0%,#151210 100%);
  background-size: 12px 12px, 12px 12px, auto;
  border-color:#ff6b4a;
  color:#f6efe7;
}
body[data-theme="gridglow"] .vpod-disk {
  background: radial-gradient(circle at 58% 38%,#fffdf8 60%,#e8dfd0 100%);
  border-color:#b49a79;
  box-shadow: 0 0 12px rgba(64,38,24,0.16);
}
body[data-theme="gridglow"] .vpod-disk-btn {
  color:#6a5648;
}
body[data-theme="gridglow"] .vpod-disk-center {
  background: linear-gradient(150deg,#f56c4a 0%,#ca4d30 85%);
  color:#fff7f1;
}
body[data-theme="gridglow"] {
  --vpod-highlight-bg: rgba(255,107,74,0.20);
  --vpod-highlight-fg: #fff5ef;
}

/* Hazard Run (industrial black/yellow shell, steel screen, warning accents) */
body[data-theme="hyperlane"] .vpod-container {
  background:
    repeating-linear-gradient(135deg,#171717 0 18px,#171717 18px,#f7d447 18px 36px);
  border: 3px solid #2e2e2e;
  box-shadow: 0 14px 34px rgba(0,0,0,0.42), inset 0 0 0 2px rgba(255,255,255,0.05);
}
body[data-theme="hyperlane"] .vpod-screen {
  background: linear-gradient(180deg,#1f2428 0%,#15191d 100%);
  border-color:#f7d447;
  color:#f8f3d4;
}
body[data-theme="hyperlane"] .vpod-disk {
  background: radial-gradient(circle at 58% 38%,#585d63 0%,#2f3438 70%,#202427 100%);
  border-color:#111;
  box-shadow: 0 0 12px rgba(0,0,0,0.28);
}
body[data-theme="hyperlane"] .vpod-disk-btn {
  color:#ffe481;
  text-shadow: 0 1px 1px rgba(0,0,0,0.35);
}
body[data-theme="hyperlane"] .vpod-disk-center {
  background: linear-gradient(150deg,#f7d447 0%,#bb991f 85%);
  color:#221a00;
}
body[data-theme="hyperlane"] {
  --vpod-highlight-bg: rgba(247,212,71,0.22);
  --vpod-highlight-fg: #fff8d6;
}

/* Catacomb Brass (torchlit bronze shell, sepia screen, dark center) */
body[data-theme="catacomb"] .vpod-container {
  background:
    radial-gradient(circle at 18% 20%, rgba(255,205,120,0.16) 0%, rgba(255,205,120,0) 24%),
    linear-gradient(160deg, #110c0a 0%, #2a1b14 45%, #7d5728 100%);
  border: 3px solid #4b3219;
  box-shadow: 0 12px 30px rgba(0,0,0,0.42), 0 0 0 3px rgba(114,78,36,0.22) inset;
}
body[data-theme="catacomb"] .vpod-screen {
  background: linear-gradient(180deg, #1a1411 0%, #241a15 100%);
  border-color: #7f5a27;
  box-shadow: 0 2px 8px 2px rgba(0,0,0,0.18) inset;
}
body[data-theme="catacomb"] #hotBar {
  background: rgba(42,27,20,0.92);
  border-bottom-color: #6f4c22;
  color: #f2dfbc;
}
body[data-theme="catacomb"] .vpod-disk {
  background: radial-gradient(circle at 56% 36%, #cfb07b 0%, #9c733d 62%, #6c491f 100%);
  border-color: #553515;
  box-shadow: 0 0 14px rgba(0,0,0,0.25), 0 1px 5px rgba(0,0,0,0.16);
}
body[data-theme="catacomb"] .vpod-disk-center {
  background: linear-gradient(150deg, #2b201b 0%, #130e0c 85%);
  border-color: #6f4c22;
  color: #f4e3c2;
}
body[data-theme="catacomb"] .vpod-disk-btn {
  color: #f0ddb6;
  text-shadow: 0 1px 2px rgba(52,32,12,0.65);
}
body[data-theme="catacomb"] {
  --vpod-highlight-bg: rgba(174,123,49,0.24);
  --vpod-highlight-fg: #fff0d1;
}

/* Pocket Grove (handheld moss shell, cream screen, berry-red center) */
body[data-theme="pocketgrove"] .vpod-container {
  background:
    linear-gradient(135deg, rgba(255,255,255,0.18) 0 12px, rgba(255,255,255,0) 12px 24px),
    linear-gradient(160deg, #d4d7b6 0%, #91b06e 52%, #456e52 100%);
  border: 3px solid #6b7f55;
  box-shadow: 0 10px 28px rgba(42,63,36,0.28), 0 0 0 3px rgba(245,238,204,0.35) inset;
}
body[data-theme="pocketgrove"] .vpod-screen {
  background: linear-gradient(180deg, #eef0db 0%, #dce7c2 100%);
  border-color: #739163;
}
body[data-theme="pocketgrove"] #hotBar {
  background: rgba(236,240,214,0.96);
  border-bottom-color: #a9b88d;
  color: #314834;
}
body[data-theme="pocketgrove"] .vpod-disk {
  background: radial-gradient(circle at 58% 38%, #f3edd2 0%, #d5d7b5 60%, #acbb84 100%);
  border-color: #6d8758;
}
body[data-theme="pocketgrove"] .vpod-disk-center {
  background: linear-gradient(150deg, #cc5a58 0%, #8b3f4c 85%);
  border-color: #6b3140;
  color: #fff8ec;
}
body[data-theme="pocketgrove"] .vpod-disk-btn {
  color: #41583f;
  text-shadow: none;
}
body[data-theme="pocketgrove"] {
  --vpod-highlight-bg: rgba(115,145,99,0.20);
  --vpod-highlight-fg: #2d4736;
}

/* Moon Crypt (cold slate shell, moonlit silver screen, icy center) */
body[data-theme="mooncrypt"] .vpod-container {
  background:
    radial-gradient(circle at 78% 18%, rgba(235,244,255,0.22) 0%, rgba(235,244,255,0) 18%),
    linear-gradient(160deg, #0d1218 0%, #2f4358 48%, #bac9d8 100%);
  border: 3px solid #405668;
  box-shadow: 0 12px 30px rgba(7,12,19,0.42), 0 0 0 3px rgba(198,214,229,0.16) inset;
}
body[data-theme="mooncrypt"] .vpod-screen {
  background: linear-gradient(180deg, #131b24 0%, #1d2632 100%);
  border-color: #71879c;
}
body[data-theme="mooncrypt"] #hotBar {
  background: rgba(25,34,44,0.94);
  border-bottom-color: #61778b;
  color: #e6eef7;
}
body[data-theme="mooncrypt"] .vpod-disk {
  background: radial-gradient(circle at 58% 38%, #ecf3fa 0%, #cfd8e3 62%, #92a0b0 100%);
  border-color: #607487;
}
body[data-theme="mooncrypt"] .vpod-disk-center {
  background: linear-gradient(150deg, #8ec2e8 0%, #4e7da7 85%);
  border-color: #426789;
  color: #f8fcff;
}
body[data-theme="mooncrypt"] .vpod-disk-btn {
  color: #dce7f2;
  text-shadow: 0 1px 2px rgba(20,30,40,0.45);
}
body[data-theme="mooncrypt"] {
  --vpod-highlight-bg: rgba(152,191,225,0.22);
  --vpod-highlight-fg: #edf5fd;
}

/* Capsule Pop (toy-box cream shell, bold blue body, bright red center) */
body[data-theme="capsulepop"] .vpod-container {
  background:
    linear-gradient(135deg, rgba(255,255,255,0.18) 0 10px, rgba(255,255,255,0) 10px 20px),
    linear-gradient(160deg, #fff6de 0%, #ffd25f 42%, #3970d6 100%);
  border: 3px solid #b58c2d;
  box-shadow: 0 12px 28px rgba(60,73,120,0.25), 0 0 0 3px rgba(255,255,255,0.3) inset;
}
body[data-theme="capsulepop"] .vpod-screen {
  background: linear-gradient(180deg, #fdf6e5 0%, #f6edcf 100%);
  border-color: #6589d9;
}
body[data-theme="capsulepop"] #hotBar {
  background: rgba(255,246,224,0.96);
  border-bottom-color: #d7c384;
  color: #314068;
}
body[data-theme="capsulepop"] .vpod-disk {
  background: radial-gradient(circle at 58% 38%, #fefefe 0%, #f2ecd6 62%, #e1d39b 100%);
  border-color: #7a8fc9;
}
body[data-theme="capsulepop"] .vpod-disk-center {
  background: linear-gradient(150deg, #ef5d57 0%, #bf384f 85%);
  border-color: #8f2942;
  color: #fff9f0;
}
body[data-theme="capsulepop"] .vpod-disk-btn {
  color: #47614c;
  text-shadow: none;
}
body[data-theme="capsulepop"] {
  --vpod-highlight-bg: rgba(61,112,216,0.16);
  --vpod-highlight-fg: #22345a;
}

/* Checker Faceplate (Chessboard) */
body[data-theme="chessboard"] .vpod-container {
  background:
    linear-gradient(90deg, #000 25%, #fff 25%, #fff 50%, #000 50%, #000 75%, #fff 75%, #fff 100%),
    linear-gradient(0deg,  #000 25%, #fff 25%, #fff 50%, #000 50%, #000 75%, #fff 75%, #fff 100%);
  background-size: 40px 40px, 40px 40px;
  background-position: 0 0, 20px 20px; /* offset to form checks */
  border: 2.5px solid #222;
  box-shadow: 0 12px 30px rgba(0,0,0,0.38);
}

body[data-theme="chessboard"] .vpod-screen {
  background: linear-gradient(180deg, #0f0f0f 0%, #1a1a1a 100%);
  border-color: #444;
}

body[data-theme="chessboard"] .vpod-disk {
  background: radial-gradient(circle at 55% 40%, #fafafa 60%, #cfcfcf 100%);
  border-color: #888;
  box-shadow: 0 0 14px rgba(0,0,0,0.24), 0 1px 6px rgba(0,0,0,0.18);
}

body[data-theme="chessboard"] .vpod-disk-center {
  background: linear-gradient(150deg, #cfcfcf 0%, #9a9a9a 85%);
  color: #111;
}

/* Visible highlight for lists in chessboard */
body[data-theme="chessboard"] {
  --vpod-highlight-bg: rgba(200, 200, 200, 0.28);
  --vpod-highlight-fg: #111;
}

/* Shiny Glint (unlock from first shiny encounter) */
body[data-theme="shinyglint"] .vpod-container {
  background:
    radial-gradient(circle at 18% 18%, rgba(255,255,255,0.92) 0 2px, rgba(255,255,255,0) 3px),
    radial-gradient(circle at 82% 16%, rgba(255,244,184,0.86) 0 2px, rgba(255,244,184,0) 3px),
    radial-gradient(circle at 16% 78%, rgba(184,241,255,0.8) 0 2px, rgba(184,241,255,0) 3px),
    radial-gradient(circle at 84% 82%, rgba(255,214,247,0.82) 0 1.8px, rgba(255,214,247,0) 3px),
    linear-gradient(145deg, #fffafc 0%, #efe4ff 28%, #d4f3ff 60%, #ffe9a8 100%);
  border: 3px solid #d6c4ff;
  box-shadow: 0 12px 34px rgba(108, 84, 164, 0.28), 0 0 0 1px rgba(255,255,255,0.65) inset;
  animation: shinyglintShift 8s ease-in-out infinite alternate;
}

body[data-theme="shinyglint"] .vpod-container::before {
  background:
    radial-gradient(circle at 22% 45%, rgba(255,255,255,0.7) 0 1.5px, rgba(255,255,255,0) 3px),
    radial-gradient(circle at 72% 30%, rgba(255,255,255,0.52) 0 1.5px, rgba(255,255,255,0) 3px),
    linear-gradient(180deg, rgba(255,255,255,0.48) 0%, rgba(255,255,255,0.08) 100%);
  box-shadow: 0 1px 10px 1px rgba(255,255,255,0.18);
  animation: shinyglintSparkle 5.5s linear infinite;
}

body[data-theme="shinyglint"] .vpod-container::after {
  background:
    radial-gradient(circle at 30% 55%, rgba(255,255,255,0.25) 0 1.5px, rgba(255,255,255,0) 3px),
    radial-gradient(circle at 70% 40%, rgba(255,246,196,0.2) 0 1.5px, rgba(255,246,196,0) 3px),
    linear-gradient(0deg, rgba(255,255,255,0.13) 0%, rgba(255,255,255,0.02) 100%);
  animation: shinyglintSparkle 7s linear infinite reverse;
}

body[data-theme="shinyglint"] .vpod-screen {
  background:
    radial-gradient(circle at 18% 20%, rgba(255,255,255,0.26) 0 2px, rgba(255,255,255,0) 3px),
    radial-gradient(circle at 78% 30%, rgba(194,238,255,0.22) 0 2px, rgba(194,238,255,0) 3px),
    linear-gradient(180deg, #fffafe 0%, #f1edff 52%, #eefbff 100%);
  border-color: #cfbfff;
  box-shadow: 0 0 0 2px rgba(255,255,255,0.55), 0 2px 10px 2px rgba(194,175,255,0.18) inset;
}

body[data-theme="shinyglint"] #hotBar {
  background: rgba(255, 251, 255, 0.94);
  border-bottom-color: #dccfff;
}

body[data-theme="shinyglint"] .vpod-disk {
  background:
    radial-gradient(circle at 32% 28%, rgba(255,255,255,0.95) 0 4px, rgba(255,255,255,0) 5px),
    radial-gradient(circle at 72% 72%, rgba(255,238,171,0.35) 0 10px, rgba(255,238,171,0) 22px),
    radial-gradient(circle at 55% 40%, #ffffff 0%, #f3e8ff 48%, #d6ebff 78%, #c4b0ff 100%);
  border-color: #baa0ff;
  box-shadow: 0 0 16px rgba(181, 154, 255, 0.28), 0 1px 6px rgba(255,255,255,0.6) inset;
}

body[data-theme="shinyglint"] .vpod-disk-btn {
  color: #5b4c7f;
  text-shadow: 0 1px 0 rgba(255,255,255,0.7);
}

body[data-theme="shinyglint"] .vpod-disk-center {
  background: linear-gradient(150deg, #fffefc 0%, #ecdfff 44%, #d8f6ff 100%);
  border-color: #c5adff;
  color: #58456f;
  box-shadow: 0 1px 4px rgba(255,255,255,0.85) inset, 0 0 8px rgba(180,154,255,0.18);
}

body[data-theme="shinyglint"] {
  --vpod-highlight-bg: linear-gradient(180deg, rgba(190,168,255,0.34) 0%, rgba(129,210,255,0.34) 100%);
  --vpod-highlight-fg: #3f3154;
}

@keyframes shinyglintSparkle {
  0% { transform: translateX(0) translateY(0); opacity: 0.9; }
  50% { transform: translateX(4px) translateY(-2px); opacity: 1; }
  100% { transform: translateX(-3px) translateY(2px); opacity: 0.82; }
}

@keyframes shinyglintShift {
  0% { box-shadow: 0 12px 34px rgba(108, 84, 164, 0.24), 0 0 0 1px rgba(255,255,255,0.62) inset; }
  100% { box-shadow: 0 12px 38px rgba(110, 188, 255, 0.26), 0 0 0 1px rgba(255,250,212,0.7) inset; }
}