/* =============================================================
   Theme picker — floating quick-chip + Settings "Appearance" card
   Styled in theme-variable terms so each theme restyles the picker
   consistently for free.
   ============================================================= */

/* ── Floating chip (sits next to the account button) ────────── */
.theme-chip-wrap {
  position: relative;
  display: inline-flex;
}

.theme-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-pixel);
  font-size: 9px;
  letter-spacing: 1px;
  padding: 8px 12px;
  background: var(--surface);
  color: var(--text-dim);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  transition: all 0.15s ease;
  text-transform: uppercase;
}
.theme-chip:hover {
  color: var(--text);
  border-color: var(--text-dim);
}
.theme-chip-icon {
  font-size: 12px;
  line-height: 1;
}
.theme-chip-label {
  text-transform: uppercase;
}
.theme-chip-caret {
  font-size: 12px;
  color: var(--text-dim);
  margin-left: 2px;
  transform: translateY(-2px);
  transition: transform 0.12s ease;
}
.theme-chip[aria-expanded="true"] .theme-chip-caret {
  transform: rotate(180deg);
}

/* ── Popover (mirrors .account-popover) ─────────────────────── */
.theme-popover {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 4px;
  z-index: 200;
  min-width: 260px;
  max-width: 320px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 6px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.theme-popover.hidden {
  display: none;
}

.theme-popover-option {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  text-align: left;
  padding: 8px 10px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: calc(var(--radius) - 2px);
  color: var(--text);
  cursor: pointer;
  transition: all 0.12s ease;
}
.theme-popover-option:hover {
  background: var(--surface2);
  border-color: var(--border);
}
.theme-popover-option.active {
  border-color: var(--accent);
  background: rgba(0, 229, 160, 0.06);
}
.theme-popover-option-swatch {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  border-radius: 4px;
  border: 1px solid var(--border);
}
.theme-popover-option-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.theme-popover-option-label {
  font-family: var(--font-pixel);
  font-size: 9px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--text);
  line-height: 1.2;
}
.theme-popover-option-desc {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-dim);
  line-height: 1.35;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.theme-popover-option-check {
  flex: 0 0 auto;
  font-size: 12px;
  color: var(--accent);
  opacity: 0;
}
.theme-popover-option.active .theme-popover-option-check {
  opacity: 1;
}

/* ── Settings card ("APPEARANCE") grid ──────────────────────── */
.theme-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 10px;
}

.theme-option {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  background: var(--surface);
  border: 2px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  transition: all 0.15s ease;
  text-align: left;
  color: inherit;
  font: inherit;
}
.theme-option:hover {
  border-color: var(--text-dim);
}
.theme-option.active {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(0, 229, 160, 0.15);
}
.theme-option-thumb {
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 4px;
  border: 1px solid var(--border);
  overflow: hidden;
  position: relative;
}
.theme-option-name {
  font-family: var(--font-pixel);
  font-size: 10px;
  letter-spacing: 1px;
  color: var(--text);
  text-transform: uppercase;
  line-height: 1.2;
}
.theme-option-desc {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-dim);
  line-height: 1.4;
}
.theme-option-active-tag {
  align-self: flex-start;
  font-family: var(--font-pixel);
  font-size: 8px;
  letter-spacing: 1px;
  padding: 3px 7px;
  background: var(--accent);
  color: var(--bg);
  border-radius: 999px;
  opacity: 0;
  transition: opacity 0.15s ease;
}
.theme-option.active .theme-option-active-tag {
  opacity: 1;
}

/* ── Preview thumbnails per-theme ────────────────────────────
   Each theme provides a small CSS-only preview; the swatch in
   the chip popover uses the same class as a 28×28 square.
   ──────────────────────────────────────────────────────────── */
.theme-thumb-default {
  background:
    radial-gradient(circle at 78% 22%, rgba(0, 229, 160, 0.35), transparent 55%),
    linear-gradient(180deg, #13131d 0%, #0a0a0f 100%);
  position: relative;
}
.theme-thumb-default::after {
  content: '';
  position: absolute;
  inset: 28% 18% auto 18%;
  height: 3px;
  background: linear-gradient(90deg, #00e5a0 0%, #00b8ff 100%);
  border-radius: 2px;
  box-shadow: 0 0 12px rgba(0, 229, 160, 0.5);
}

.theme-thumb-trinitron {
  background: linear-gradient(180deg, #0F1428 0%, #07091A 100%);
  position: relative;
  overflow: hidden;
}
.theme-thumb-trinitron::before {
  /* SMPTE bars */
  content: '';
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 18%;
  background: linear-gradient(90deg,
    #C0C0C0 0 14.28%,
    #C0C000 14.28% 28.57%,
    #00C0C0 28.57% 42.85%,
    #00C000 42.85% 57.14%,
    #C000C0 57.14% 71.42%,
    #C00000 71.42% 85.71%,
    #0000C0 85.71% 100%
  );
}
.theme-thumb-trinitron::after {
  /* RGB sub-pixel stripe accent */
  content: '';
  position: absolute;
  inset: 35% 18% 30% 18%;
  background: linear-gradient(90deg,
    #FF3E5B 0 33%,
    #3BE08A 33% 66%,
    #4A9EFF 66% 100%
  );
  border-radius: 2px;
  box-shadow: 0 0 10px rgba(74, 158, 255, 0.5);
}

.theme-thumb-phosphor {
  background:
    repeating-linear-gradient(to bottom, transparent 0 2px, rgba(0, 0, 0, 0.5) 2px 3px),
    linear-gradient(180deg, #130A00 0%, #0A0500 100%);
  position: relative;
  overflow: hidden;
}
.theme-thumb-phosphor::after {
  content: '> _';
  position: absolute;
  left: 14%;
  top: 50%;
  transform: translateY(-50%);
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  color: #FFB000;
  text-shadow: 0 0 8px rgba(255, 176, 0, 0.7);
}

.theme-thumb-cartridge {
  background-color: #F3E7CF;
  background-image: radial-gradient(circle at 1px 1px, rgba(20, 20, 31, 0.18) 1px, transparent 1.5px);
  background-size: 5px 5px;
  position: relative;
  overflow: hidden;
  border-color: #14141F;
}
.theme-thumb-cartridge::before {
  /* Red ribbon */
  content: '';
  position: absolute;
  left: 10%;
  right: 10%;
  top: 22%;
  height: 18%;
  background: #D62828;
  border: 1.5px solid #14141F;
}
.theme-thumb-cartridge::after {
  /* Gold seal */
  content: '';
  position: absolute;
  right: 8%;
  bottom: 12%;
  width: 30%;
  height: 14%;
  background: #D9A441;
  border: 1.5px solid #14141F;
  transform: rotate(4deg);
}

.theme-thumb-gameboy {
  background:
    linear-gradient(90deg, rgba(224, 218, 205, 0.88), rgba(191, 183, 163, 0.78)),
    url('/img/game-boy-dmg.png') 8% 58% / auto 150% no-repeat,
    linear-gradient(180deg, #D8D0BC 0%, #BFB7A3 100%);
  position: relative;
  overflow: hidden;
}
.theme-thumb-gameboy::before {
  /* Olive LCD area */
  content: '';
  position: absolute;
  left: 12%;
  right: 12%;
  top: 14%;
  bottom: 38%;
  background:
    repeating-linear-gradient(0deg,  rgba(0, 0, 0, 0.06) 0 2px, transparent 2px 3px),
    linear-gradient(180deg, #B5C380 0%, #98A96A 100%);
  border: 1px solid #1F2A10;
  border-radius: 2px 2px 6px 2px;
  box-shadow: 0 0 0 4px rgba(224, 218, 205, 0.72);
}
.theme-thumb-gameboy::after {
  /* Maroon A/B buttons */
  content: '';
  position: absolute;
  right: 14%;
  bottom: 12%;
  width: 16%;
  height: 18%;
  background:
    radial-gradient(circle at 25% 50%, #7B0712 0 38%, transparent 38%),
    radial-gradient(circle at 75% 50%, #7B0712 0 38%, transparent 38%);
}

.theme-thumb-arcade {
  background: radial-gradient(ellipse at 50% 100%, #2A0F4E 0%, #060010 80%);
  position: relative;
  overflow: hidden;
  border-color: #2A0F4E;
}
.theme-thumb-arcade::before {
  /* Perspective grid floor */
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(rgba(255, 45, 149, .55) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 240, 255, .45) 1px, transparent 1px);
  background-size: 6px 6px;
  transform: perspective(60px) rotateX(52deg);
  transform-origin: 50% 100%;
  -webkit-mask-image: linear-gradient(to top, #000 20%, transparent 92%);
          mask-image: linear-gradient(to top, #000 20%, transparent 92%);
}
.theme-thumb-arcade::after {
  /* Hot-pink accent band */
  content: '';
  position: absolute;
  inset: 30% 18% 55% 18%;
  background: linear-gradient(90deg, #FF2D95 0 60%, #00F0FF 60% 100%);
  border-radius: 2px;
  box-shadow: 0 0 10px rgba(255, 45, 149, 0.7);
}

.theme-thumb-modular {
  background: linear-gradient(180deg, #363B48 0%, #22252D 22%, #22252D 78%, #0E1015 100%);
  border-color: #000;
  position: relative;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1);
}
.theme-thumb-modular::before {
  /* Amber readout */
  content: '';
  position: absolute;
  top: 22%; left: 20%; right: 20%;
  height: 28%;
  background: #0E1015;
  border: 1px solid #000;
  border-radius: 2px;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, .7);
}
.theme-thumb-modular::after {
  /* LED dots */
  content: '';
  position: absolute;
  bottom: 18%; left: 25%;
  width: 50%; height: 10%;
  background:
    radial-gradient(circle at 12% 50%, #C7F443 0 28%, transparent 28%),
    radial-gradient(circle at 50% 50%, #FFC857 0 28%, transparent 28%),
    radial-gradient(circle at 88% 50%, #FF5A3C 0 28%, transparent 28%);
}

.theme-thumb-swiss {
  background: #F1EFE8;
  border-color: #0B0B10;
  position: relative;
  overflow: hidden;
}
.theme-thumb-swiss::before {
  /* Red accent bar */
  content: '';
  position: absolute;
  left: 14%; top: 24%; bottom: 24%;
  width: 8%;
  background: #E6004D;
}
.theme-thumb-swiss::after {
  /* Black editorial bars */
  content: '';
  position: absolute;
  left: 34%; right: 14%; top: 30%;
  height: 40%;
  background:
    linear-gradient(180deg,
      #0B0B10 0 22%, transparent 22% 32%,
      #0B0B10 32% 54%, transparent 54% 64%,
      #0B0B10 64% 86%, transparent 86% 100%);
}

.theme-thumb-woodgrain {
  background-color: #6A3F1E;
  background-image:
    repeating-linear-gradient(0deg,
      rgba(0, 0, 0, .35) 0 1px, transparent 1px 4px,
      rgba(154, 98, 54, .4) 4px 5px, transparent 5px 9px),
    linear-gradient(90deg, #9A6236 0%, #6A3F1E 50%, #3A2412 100%);
  border-color: #0A0806;
  position: relative;
  overflow: hidden;
}
.theme-thumb-woodgrain::before {
  /* Orange stripe */
  content: '';
  position: absolute;
  left: 16%; right: 16%; top: 40%;
  height: 10%;
  background: #E96A1E;
  border: 1px solid #0A0806;
}
.theme-thumb-woodgrain::after {
  /* Chrome toggle switches */
  content: '';
  position: absolute;
  left: 26%; right: 26%; bottom: 18%;
  height: 14%;
  background:
    linear-gradient(180deg, #E8E4DC 0%, #C0BCB4 45%, #6C6860 100%);
  border: 1px solid #0A0806;
  border-radius: 2px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6);
}

.theme-thumb-frontloader {
  background: linear-gradient(180deg, #D0CBC2 0%, #B5B0A8 50%, #6F6A62 100%);
  border-color: #1D1E22;
  position: relative;
  overflow: hidden;
}
.theme-thumb-frontloader::before {
  /* Red-and-black stripe */
  content: '';
  position: absolute;
  top: 16%; left: 0; right: 0;
  height: 18%;
  background: linear-gradient(90deg,
    #1D1E22 0 40%,
    #D8242B 40% 55%,
    #1D1E22 55% 80%,
    #D8242B 80% 100%);
  border-top: 1px solid #0E0F12;
  border-bottom: 1px solid #0E0F12;
}
.theme-thumb-frontloader::after {
  /* Cart door */
  content: '';
  position: absolute;
  bottom: 16%; left: 18%; right: 18%;
  height: 28%;
  background: linear-gradient(180deg, #2D2E34 0%, #1D1E22 40%, #0E0F12 100%);
  border: 1px solid #0E0F12;
  border-radius: 2px;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, .6);
}

.theme-thumb-super {
  background: linear-gradient(180deg, #EAE3D4 0%, #CFC8BA 50%, #8E877A 100%);
  border-color: #605A4F;
  position: relative;
  overflow: hidden;
}
.theme-thumb-super::before {
  /* Purple hero pad */
  content: '';
  position: absolute;
  top: 14%; left: 18%; right: 18%;
  height: 40%;
  background: linear-gradient(180deg, #6F56B2 0%, #4D3789 100%);
  border-radius: 6px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22);
}
.theme-thumb-super::after {
  /* SMW-colored buttons (Y/X/B/A in their four colors) */
  content: '';
  position: absolute;
  bottom: 14%; left: 24%; right: 24%;
  height: 22%;
  background:
    radial-gradient(circle at 16% 50%, #EDEAE2 0 28%, transparent 28%),
    radial-gradient(circle at 40% 50%, #C7E29E 0 28%, transparent 28%),
    radial-gradient(circle at 64% 50%, #FFC2C2 0 28%, transparent 28%),
    radial-gradient(circle at 88% 50%, #A7E4FF 0 28%, transparent 28%);
}

.theme-thumb-blueprint {
  background-color: #0B3C5D;
  background-image:
    linear-gradient(rgba(234, 244, 251, .18) 1px, transparent 1px),
    linear-gradient(90deg, rgba(234, 244, 251, .18) 1px, transparent 1px);
  background-size: 4px 4px;
  position: relative;
  overflow: hidden;
  border-color: #71A7D4;
}
.theme-thumb-blueprint::before {
  /* Gameboy-ish schematic drawn with chalk outlines */
  content: '';
  position: absolute;
  left: 14%; right: 58%; top: 18%; bottom: 18%;
  background:
    linear-gradient(#EAF4FB, #EAF4FB) left top / 100% 1px no-repeat,
    linear-gradient(#EAF4FB, #EAF4FB) left bottom / 100% 1px no-repeat,
    linear-gradient(#EAF4FB, #EAF4FB) left top / 1px 100% no-repeat,
    linear-gradient(#EAF4FB, #EAF4FB) right top / 1px 100% no-repeat;
}
.theme-thumb-blueprint::after {
  /* Dimension line with stamp accent */
  content: '';
  position: absolute;
  right: 10%; top: 26%; bottom: 26%; width: 34%;
  background:
    linear-gradient(#EAF4FB, #EAF4FB) center / 100% 1px no-repeat,
    linear-gradient(#F3D35D, #F3D35D) top left / 30% 24% no-repeat,
    linear-gradient(#F3D35D, #F3D35D) bottom right / 30% 24% no-repeat;
}

.theme-thumb-matrix {
  background: linear-gradient(180deg, #020B02 0%, #0A160A 100%);
  border-color: #00FF66;
  position: relative;
  overflow: hidden;
}
.theme-thumb-matrix::before {
  /* Vertical rain streaks */
  content: '';
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(90deg,
      transparent 0 3px,
      rgba(0, 255, 102, 0.4) 3px 4px,
      transparent 4px 8px,
      rgba(0, 255, 102, 0.2) 8px 9px,
      transparent 9px 14px);
}
.theme-thumb-matrix::after {
  /* Glowing "01" at center */
  content: '01';
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'JetBrains Mono', monospace;
  font-size: 14px;
  color: #00FF66;
  text-shadow: 0 0 10px rgba(0, 255, 102, 0.8);
  letter-spacing: 3px;
}

.theme-thumb-cyberpunk {
  background:
    radial-gradient(ellipse at 15% 20%, rgba(18, 255, 204, 0.35), transparent 55%),
    radial-gradient(ellipse at 85% 80%, rgba(255, 0, 122, 0.45), transparent 55%),
    linear-gradient(180deg, #161033 0%, #0A0618 100%);
  border-color: #3A1F5C;
  position: relative;
  overflow: hidden;
}
.theme-thumb-cyberpunk::before {
  /* Glitch stripes */
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(90deg,
    transparent 0 3px,
    rgba(255, 0, 122, 0.25) 3px 4px,
    transparent 4px 7px,
    rgba(18, 255, 204, 0.20) 7px 8px);
}
.theme-thumb-cyberpunk::after {
  /* Sharp dual-stripe accent — pink + cyan */
  content: '';
  position: absolute;
  inset: 42% 18% 42% 18%;
  background: linear-gradient(90deg, #FF007A 0 55%, #12FFCC 55% 100%);
  box-shadow: 0 0 10px rgba(255, 0, 122, 0.7);
}

.theme-thumb-wasteland {
  background:
    radial-gradient(ellipse at 15% 20%, rgba(200, 100, 40, 0.3), transparent 60%),
    radial-gradient(ellipse at 90% 85%, rgba(200, 100, 40, 0.25), transparent 60%),
    repeating-linear-gradient(to bottom, transparent 0 2px, rgba(0, 0, 0, 0.55) 2px 3px),
    linear-gradient(180deg, #2A1D10 0%, #080C05 100%);
  border-color: #0A0705;
  position: relative;
  overflow: hidden;
}
.theme-thumb-wasteland::before {
  /* Mini Pip-Boy screen (green CRT) */
  content: '';
  position: absolute;
  left: 18%; right: 18%; top: 25%; bottom: 25%;
  background:
    repeating-linear-gradient(to bottom, transparent 0 2px, rgba(0, 0, 0, 0.4) 2px 3px),
    radial-gradient(ellipse at center, #16291A 0%, #0B170E 100%);
  border: 1px solid #7AE865;
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.8);
}
.theme-thumb-wasteland::after {
  content: '111';
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Press Start 2P', monospace;
  font-size: 11px;
  color: #7AE865;
  text-shadow: 0 0 8px rgba(122, 232, 101, 0.8);
  letter-spacing: 2px;
  z-index: 1;
}

.theme-thumb-steampunk {
  background:
    linear-gradient(135deg, #4A3A1E 0%, #2A1E0E 40%, #1A1208 100%);
  border-color: #5C4A2E;
  position: relative;
  overflow: hidden;
}
.theme-thumb-steampunk::before {
  content: '';
  position: absolute;
  left: 50%; top: 50%;
  width: 55%; height: 70%;
  transform: translate(-50%, -50%);
  border: 3px solid rgba(212, 160, 48, 0.55);
  border-radius: 50%;
  box-shadow:
    inset 0 0 0 3px rgba(26, 18, 8, 0.8),
    inset 0 0 0 5px rgba(212, 160, 48, 0.3);
}
.theme-thumb-steampunk::after {
  content: '';
  position: absolute;
  right: 10%; top: 0; bottom: 0;
  width: 18%;
  background: linear-gradient(180deg, #D4A030 0%, #A07020 100%);
  box-shadow: 0 0 8px rgba(212, 160, 48, 0.5);
}

/* Responsive tweaks */
@media (max-width: 768px) {
  .theme-popover {
    position: fixed;
    top: 52px;
    left: 12px;
    right: 12px;
    min-width: 0;
    max-width: none;
  }
  /* Tighter rows on mobile so the full theme list fits on a phone in
     portrait without scrolling. Description is already hidden by the
     default rule (only revealed on hover, which doesn't fire on touch). */
  .theme-popover-option {
    padding: 4px 8px;
    gap: 8px;
  }
  .theme-popover-option-swatch {
    width: 22px;
    height: 22px;
  }
  .theme-grid {
    grid-template-columns: 1fr;
  }
  .theme-chip-label {
    display: none;
  }
}