/* ==========================================================================
   3DS theme (default): XL-style shell, glossy rounded UI, X/Y style textboxes.
   ========================================================================== */
:root {
  --font: 'Nunito', 'Segoe UI', system-ui, sans-serif;
  --fs: 15px; --fs-sm: 13px; --fs-xs: 11.5px; --fs-lg: 17px; --fs-xl: 22px;
  --text: #22304b; --muted: #66728c;
  --accent: #2f86e8; --accent-2: #e8473a; --good: #2ea865; --warn: #e3a00f;
  --glow: rgba(47, 134, 232, .35);
  --page-bg:
    radial-gradient(1200px 700px at 15% -10%, rgba(255,255,255,.95), rgba(255,255,255,0) 60%),
    radial-gradient(900px 600px at 110% 110%, rgba(181, 214, 255, .7), rgba(181,214,255,0) 60%),
    repeating-linear-gradient(45deg, rgba(255,255,255,.35) 0 2px, rgba(255,255,255,0) 2px 14px),
    linear-gradient(160deg, #eef3fa, #d9e4f2);
  --device-w: 1060px; --device-h: 1010px; --device-aspect: 1.08;

  --shell-hi: #4a4f60; --shell-lo: #1d2029; --shell-edge: #111319; --shell-text: rgba(255,255,255,.55);

  --btn-bg: linear-gradient(180deg, #ffffff 0%, #eef3fa 55%, #dfe7f2 100%);
  --btn-border: 1px solid #b3c1d6;
  --btn-text: #22304b;
  --btn-radius: 12px;
  --btn-shadow: 0 2px 0 #a6b6cd, 0 4px 10px rgba(32, 56, 100, .14);
  --btn-shadow-active: 0 1px 0 #a6b6cd;
  --btn-hover: brightness(1.04) saturate(1.05);
  --btn-primary-bg: linear-gradient(180deg, #6db4ff 0%, #3a86ea 55%, #2a6fd2 100%);
  --btn-primary-text: #fff; --btn-primary-border: 1px solid #1f5db5;
  --btn-danger-bg: linear-gradient(180deg, #ff8c7d 0%, #ea5443 60%, #d23b2b 100%);
  --btn-danger-text: #fff; --btn-danger-border: 1px solid #a82a1d;
  --btn-ghost-bg: rgba(255,255,255,.55); --btn-ghost-text: #4a5873;
  --focus-ring: 3px solid rgba(47, 134, 232, .55);

  --input-bg: #fff; --input-border: 2px solid #b9c8dd; --input-radius: 10px; --input-focus: 0 0 0 3px rgba(47,134,232,.3);
  --toggle-off: #c4cedd; --toggle-on: linear-gradient(180deg, #5fd08d, #2ea865); --toggle-knob: #fff; --toggle-border: 1px solid rgba(0,0,0,.08);
  --chip-bg: rgba(255,255,255,.85); --chip-border: 1px solid #c3cfe0; --chip-radius: 10px;
  --chip-on-bg: linear-gradient(180deg, #5aa8ff, #2b74de); --chip-on-text: #fff;
  --badge-radius: 999px; --badge-border: 1px solid rgba(0,0,0,.12);
  --bar-bg: #e3e9f2; --bar-border: 1px solid #c4cfdf; --bar-fill: linear-gradient(90deg, #58c4ff, #2f86e8);
  --rage-fill: linear-gradient(90deg, #7fdc6c, #3cb54a); --rage-warn: linear-gradient(90deg, #ffd65a, #f2a90f); --rage-hot: linear-gradient(90deg, #ff8b6b, #e3341f);

  --textbox-bg: linear-gradient(180deg, #ffffff, #f2f6fb);
  --textbox-border: 3px solid #4f86cf;
  --textbox-border-danger: 3px solid #d9483a;
  --textbox-border-good: 3px solid #2ea865;
  --textbox-radius: 16px;
  --textbox-shadow: inset 0 0 0 3px #fff, inset 0 0 0 5px #c5d8f1, 0 6px 18px rgba(20, 40, 80, .28);
  --textbox-text: #22304b;
  --speaker-bg: linear-gradient(180deg, #4f9df2, #2f73d1); --speaker-text: #fff;
  --choices-scrim: linear-gradient(180deg, rgba(220,232,248,.55), rgba(205,222,244,.82));

  --sheet-bg: linear-gradient(180deg, #f8fbff, #e6eef9);
  --sheet-border: 0; --sheet-radius: 0;
  --sheet-head-bg: linear-gradient(180deg, #5aa3f5 0%, #3479d6 100%);
  --sheet-head-text: #fff; --sheet-head-border: 1px solid rgba(30, 70, 140, .25);
  --sheet-close-bg: rgba(255,255,255,.22);

  --card-bg: linear-gradient(180deg, rgba(255,255,255,.97), rgba(240,246,253,.97));
  --card-border: 2px solid #b7cbe6; --card-radius: 16px; --card-shadow: 0 8px 22px rgba(20, 40, 80, .25);
  --panel-bg: rgba(255,255,255,.82); --panel-border: 1px solid #c5d3e6; --panel-radius: 14px; --panel-shadow: 0 2px 8px rgba(30, 60, 110, .08);
  --panel-title: #4a6a99;
  --item-bg: rgba(255,255,255,.9); --item-border: 1px solid #cad6e7; --item-radius: 12px; --item-hover: #f3f8ff;
  --tab-bg: rgba(255,255,255,.75); --tab-border: 1px solid #c3cfe0; --tab-text: #3b4a66;
  --tab-active-bg: linear-gradient(180deg, #5aa8ff, #2b74de); --tab-active-text: #fff;
  --toast-bg: rgba(34, 48, 75, .92); --toast-text: #fff; --toast-border: 0;
  --scroll-thumb: rgba(70, 100, 150, .35);

  --bottom-bg:
    repeating-linear-gradient(135deg, rgba(255,255,255,.45) 0 12px, rgba(255,255,255,0) 12px 24px),
    radial-gradient(120% 90% at 50% 0%, #f4f9ff 0%, #d7e7fa 70%, #c6dbf5 100%);
}

/* Shell colors */
[data-shell="flame"] { --shell-hi: #f05a48; --shell-lo: #a2201a; --shell-edge: #6e130e; }
[data-shell="ice"] { --shell-hi: #ffffff; --shell-lo: #c8d0dc; --shell-edge: #9aa5b5; --shell-text: rgba(40,50,70,.45); }
[data-shell="cobalt"] { --shell-hi: #4b84ec; --shell-lo: #1b3d92; --shell-edge: #102657; }
[data-shell="pikachu"] { --shell-hi: #ffe36a; --shell-lo: #e8a60c; --shell-edge: #a8740a; --shell-text: rgba(90,50,0,.5); }
[data-shell="sylveon"] { --shell-hi: #ffd3e6; --shell-lo: #ea8cb6; --shell-edge: #b8588a; --shell-text: rgba(110,30,70,.45); }
[data-shell="mint"] { --shell-hi: #b3f0d4; --shell-lo: #4daf87; --shell-edge: #2d7a5a; --shell-text: rgba(20,70,50,.5); }

/* Type colors */
[data-type="Normal"] { --badge-bg: #A8A77A; } [data-type="Fire"] { --badge-bg: #EE8130; } [data-type="Water"] { --badge-bg: #6390F0; }
[data-type="Electric"] { --badge-bg: #F7D02C; --badge-text: #3a2e00; } [data-type="Grass"] { --badge-bg: #7AC74C; } [data-type="Ice"] { --badge-bg: #96D9D6; --badge-text: #123b3a; }
[data-type="Fighting"] { --badge-bg: #C22E28; } [data-type="Poison"] { --badge-bg: #A33EA1; } [data-type="Ground"] { --badge-bg: #E2BF65; --badge-text: #3d2d05; }
[data-type="Flying"] { --badge-bg: #A98FF3; } [data-type="Psychic"] { --badge-bg: #F95587; } [data-type="Bug"] { --badge-bg: #A6B91A; }
[data-type="Rock"] { --badge-bg: #B6A136; } [data-type="Ghost"] { --badge-bg: #735797; } [data-type="Dragon"] { --badge-bg: #6F35FC; }
[data-type="Dark"] { --badge-bg: #705746; } [data-type="Steel"] { --badge-bg: #B7B7CE; --badge-text: #26263a; } [data-type="Fairy"] { --badge-bg: #D685AD; }

/* ---------------------------------------------------------------- shell -- */
[data-theme="3ds"] .lid {
  background:
    linear-gradient(170deg, rgba(255,255,255,.22), rgba(255,255,255,0) 35%),
    linear-gradient(180deg, var(--shell-hi), var(--shell-lo));
  border-radius: 30px 30px 12px 12px;
  padding: 10px 18px 8px;
  box-shadow: inset 0 2px 0 rgba(255,255,255,.35), inset 0 -3px 0 rgba(0,0,0,.25), 0 14px 30px rgba(20, 30, 60, .35);
  border: 1px solid var(--shell-edge);
}
[data-theme="3ds"] .lid-strip { display: flex; justify-content: center; gap: 10px; height: 14px; align-items: center; margin-bottom: 4px; }
[data-theme="3ds"] .lid-strip .cam { width: 7px; height: 7px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #6e7690, #0d0f14 70%); box-shadow: 0 0 0 2px rgba(0,0,0,.25); }
[data-theme="3ds"] .lid-strip .led { width: 5px; height: 5px; border-radius: 50%; background: #48e07a; box-shadow: 0 0 6px #48e07a; margin-left: 18px; }
[data-theme="3ds"] .bezel-top {
  background: linear-gradient(180deg, #1d1f26, #0b0c10);
  border-radius: 16px;
  padding: 12px 10px 14px;
  gap: 10px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 1px 0 rgba(255,255,255,.12);
}
[data-theme="3ds"] .speaker { flex: 0 0 26px; background-image: radial-gradient(circle, rgba(255,255,255,.22) 1.4px, transparent 1.8px); background-size: 8px 8px; background-position: center; border-radius: 6px; opacity: .8; }
[data-theme="3ds"] .lid-label { display: flex; justify-content: center; align-items: baseline; gap: 4px; height: 18px; margin-top: 4px; color: var(--shell-text); font-weight: 900; letter-spacing: .3em; font-size: 11px; }
[data-theme="3ds"] .lid-label .brand-sub { color: #e8473a; letter-spacing: .1em; }
[data-theme="3ds"] .hinge {
  height: 18px; margin: 0 7%;
  background: linear-gradient(180deg, var(--shell-lo), var(--shell-hi) 45%, var(--shell-lo));
  border-left: 1px solid var(--shell-edge); border-right: 1px solid var(--shell-edge);
  display: flex; justify-content: space-between; padding: 0 14%;
}
[data-theme="3ds"] .hinge span { width: 30%; background: linear-gradient(180deg, rgba(0,0,0,.25), rgba(255,255,255,.1)); border-radius: 2px; margin: 4px 0; }
[data-theme="3ds"] .hinge span:nth-child(2) { display: none; }
[data-theme="3ds"] .base {
  background:
    linear-gradient(10deg, rgba(0,0,0,.12), rgba(0,0,0,0) 40%),
    linear-gradient(180deg, var(--shell-hi), var(--shell-lo));
  border-radius: 12px 12px 34px 34px;
  padding: 14px 14px 8px;
  column-gap: 14px;
  border: 1px solid var(--shell-edge);
  box-shadow: inset 0 2px 0 rgba(255,255,255,.3), 0 16px 34px rgba(20, 30, 60, .35);
}
[data-theme="3ds"] .bezel-bottom {
  background: linear-gradient(180deg, #17181d, #0b0c10);
  border-radius: 12px; padding: 9px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 1px 0 rgba(255,255,255,.15);
}
[data-theme="3ds"] .screen { border-radius: 6px; box-shadow: inset 0 0 0 1px rgba(0,0,0,.4); }

/* Both screens are exactly the same size. The device is the size container; the
   shell around each screen (strip, label, hinge, button strip) takes about 170px of
   height in total, and the rest is split evenly between the two screens. */
@media (min-width: 641px) and (min-height: 561px) {
  [data-theme="3ds"] .device {
    container-type: size;
    --scr-w: 64cqw;
    --scr-h: calc((100cqh - 170px) / 2);
  }
  [data-theme="3ds"] .lid { flex: 0 0 auto; min-height: 0; }
  [data-theme="3ds"] .base { flex: 1 1 auto; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; }
  [data-theme="3ds"] .bezel-top { flex: 0 0 auto; justify-content: center; }
  [data-theme="3ds"] .speaker { flex: 0 1 60px; min-width: 26px; }
  [data-theme="3ds"] .bezel-bottom { justify-self: center; }
  [data-theme="3ds"] .screen-wrap { flex: none; width: var(--scr-w); height: var(--scr-h); }
}
/* Without the side controls the bottom screen could be wider than the top one,
   so the top speakers step aside and both use nearly the full width. */
@media (min-width: 641px) and (max-width: 860px) and (min-height: 561px) {
  [data-theme="3ds"] .device { --scr-w: calc(100cqw - 56px); }
  [data-theme="3ds"] .speaker { display: none; }
  [data-theme="3ds"] .base { column-gap: 0; }
}
/* Phones: the screens stack and the page scrolls; both get the same height. */
@media (max-width: 640px), (max-height: 560px) {
  [data-theme="3ds"] .bezel-top .screen-wrap, [data-theme="3ds"] .bezel-bottom .screen-wrap { min-height: 420px; }
  [data-theme="3ds"] .base { column-gap: 0; }
}
[data-theme="3ds"] .screen-wrap .overlay { border-radius: 6px; }

[data-theme="3ds"] .deco { display: flex; flex-direction: column; align-items: center; justify-content: space-around; padding: 10px 0; }
[data-theme="3ds"] .circle-pad { width: 66px; height: 66px; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #8b92a6, #3a3f4e 60%, #1e2129); box-shadow: inset 0 3px 6px rgba(255,255,255,.25), 0 3px 0 rgba(0,0,0,.35), 0 0 0 6px rgba(0,0,0,.18); }
[data-theme="3ds"] .dpad { position: relative; width: 64px; height: 64px; }
[data-theme="3ds"] .dpad span { position: absolute; background: linear-gradient(180deg, #4a4f5f, #22252e); border-radius: 4px; box-shadow: 0 2px 0 rgba(0,0,0,.4); }
[data-theme="3ds"] .dpad span:first-child { left: 22px; top: 0; width: 20px; height: 64px; }
[data-theme="3ds"] .dpad span:last-child { top: 22px; left: 0; width: 64px; height: 20px; }
[data-theme="3ds"] .abxy { position: relative; width: 86px; height: 86px; }
[data-theme="3ds"] .abxy span { position: absolute; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-weight: 900; font-size: 12px; color: #fff; background: radial-gradient(circle at 35% 30%, #5d6375, #262934 70%); box-shadow: 0 2px 0 rgba(0,0,0,.45); }
[data-theme="3ds"] .abxy .x { top: 0; left: 29px; color: #4fa7ff; }
[data-theme="3ds"] .abxy .y { top: 29px; left: 0; color: #54d27a; }
[data-theme="3ds"] .abxy .a { top: 29px; right: 0; color: #ff5b5b; }
[data-theme="3ds"] .abxy .b { bottom: 0; left: 29px; color: #ffd04d; }
[data-theme="3ds"] .base-strip { display: flex; justify-content: center; gap: 26px; padding: 7px 0 0; }
[data-theme="3ds"] .base-strip span { width: 54px; height: 6px; border-radius: 6px; background: rgba(0,0,0,.28); box-shadow: inset 0 1px 0 rgba(0,0,0,.3), 0 1px 0 rgba(255,255,255,.18); }
[data-theme="3ds"] .base-strip .home { width: 28px; height: 10px; margin-top: -2px; background: rgba(255,255,255,.18); }

/* Bottom screen backdrop */
[data-theme="3ds"] .screen-bottom { background: var(--bottom-bg); }

/* --------------------------------------------------------- top scenes ---- */
.scene-bg { position: absolute; inset: 0; overflow: hidden; }
:is([data-theme="3ds"], [data-theme="wii"]) .scene-bg {
  background: linear-gradient(180deg, var(--sky-a, #9fd3ff) 0%, var(--sky-b, #dff1ff) 52%, var(--ground-a, #9ed67a) 52.2%, var(--ground-b, #6fb44d) 100%);
}
:is([data-theme="3ds"], [data-theme="wii"]) .scene-bg::before {
  content: ''; position: absolute; inset: 0;
  background:
    radial-gradient(60px 22px at 18% 22%, rgba(255,255,255,.9), rgba(255,255,255,0) 70%),
    radial-gradient(80px 26px at 26% 25%, rgba(255,255,255,.8), rgba(255,255,255,0) 70%),
    radial-gradient(90px 26px at 74% 16%, rgba(255,255,255,.85), rgba(255,255,255,0) 70%),
    radial-gradient(60px 20px at 82% 19%, rgba(255,255,255,.75), rgba(255,255,255,0) 70%);
  opacity: var(--clouds, 1);
}
:is([data-theme="3ds"], [data-theme="wii"]) .scene-bg::after {
  content: ''; position: absolute; left: -10%; right: -10%; top: 50%; height: 50%;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.06) 0 30px, rgba(0,0,0,.04) 30px 60px),
    radial-gradient(120% 70% at 50% 0%, rgba(255,255,255,.25), rgba(255,255,255,0) 60%);
  transform: perspective(300px) rotateX(55deg); transform-origin: top;
}
[data-scene="forest"] { --sky-a: #8fc7a2; --sky-b: #d3ecd1; --ground-a: #5d9a46; --ground-b: #3a6d2b; }
[data-scene="jungle"] { --sky-a: #6fb38a; --sky-b: #c7ebc9; --ground-a: #4c8c3a; --ground-b: #2c5a23; }
[data-scene="flowers"] { --sky-a: #a8d8ff; --sky-b: #ffeaf4; --ground-a: #9fdc84; --ground-b: #e98cc0; }
[data-scene="cave"] { --sky-a: #2a2430; --sky-b: #4a3d44; --ground-a: #5e4b42; --ground-b: #362a25; --clouds: 0; }
[data-scene="mountain"] { --sky-a: #8cb8e8; --sky-b: #e6eef8; --ground-a: #a39279; --ground-b: #6f604d; }
[data-scene="desert"] { --sky-a: #f6c27a; --sky-b: #fde8c2; --ground-a: #ecc77d; --ground-b: #c99a4b; --clouds: .3; }
[data-scene="volcano"] { --sky-a: #5b2320; --sky-b: #e2683a; --ground-a: #6a3a2c; --ground-b: #2f1712; --clouds: .2; }
[data-scene="snow"] { --sky-a: #b9d4ee; --sky-b: #f2f7fd; --ground-a: #f4f8fc; --ground-b: #cbd9ea; }
[data-scene="lake"] { --sky-a: #8cc9ff; --sky-b: #e2f3ff; --ground-a: #6bb6ea; --ground-b: #2f7fc0; }
[data-scene="sea"] { --sky-a: #6fbaf6; --sky-b: #d9efff; --ground-a: #3f9de0; --ground-b: #1b5e9e; }
[data-scene="deepsea"] { --sky-a: #0c2a52; --sky-b: #164a7e; --ground-a: #0f3866; --ground-b: #06182e; --clouds: 0; }
[data-scene="beach"] { --sky-a: #7cc6ff; --sky-b: #e4f5ff; --ground-a: #f3e1a6; --ground-b: #d8bd73; }
[data-scene="swamp"] { --sky-a: #7f9a83; --sky-b: #c6d3b9; --ground-a: #66704a; --ground-b: #3d4630; --clouds: .4; }
[data-scene="city"] { --sky-a: #9ec4ec; --sky-b: #edf3fa; --ground-a: #b8bec9; --ground-b: #8a919f; }
[data-scene="industry"] { --sky-a: #7d8797; --sky-b: #c7ccd4; --ground-a: #8b8f96; --ground-b: #55595f; --clouds: .5; }
[data-scene="night"] { --sky-a: #121a3c; --sky-b: #33407a; --ground-a: #2b3d4f; --ground-b: #141f2a; --clouds: .15; }
[data-scene="haunted"] { --sky-a: #2a1d3d; --sky-b: #5b4776; --ground-a: #3c3549; --ground-b: #1d1826; --clouds: .2; }
[data-scene="ruins"] { --sky-a: #c9b48c; --sky-b: #efe4cc; --ground-a: #b9a27c; --ground-b: #85704f; }
[data-scene="sky"] { --sky-a: #5aa9f7; --sky-b: #cfe9ff; --ground-a: #e8f4ff; --ground-b: #b9dcf8; }
[data-scene="space"] { --sky-a: #05051a; --sky-b: #1d1b4d; --ground-a: #2a2950; --ground-b: #0c0b20; --clouds: 0; }
[data-scene="storm"] { --sky-a: #3d4658; --sky-b: #7e889a; --ground-a: #5c6b52; --ground-b: #343d2e; --clouds: .6; }
[data-scene="rain"] { --sky-a: #6c7f99; --sky-b: #b8c4d4; --ground-a: #6f9a5a; --ground-b: #42683a; --clouds: .7; }
[data-scene="fog"] { --sky-a: #b4bcc6; --sky-b: #e2e6eb; --ground-a: #a8b3a3; --ground-b: #7c8778; }
[data-scene="night"] .scene-bg::before, [data-scene="space"] .scene-bg::before {
  background-image: radial-gradient(1.5px 1.5px at 10% 20%, #fff, transparent), radial-gradient(1px 1px at 30% 10%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 55% 25%, #fff, transparent), radial-gradient(1px 1px at 70% 8%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 88% 30%, #fff, transparent), radial-gradient(1px 1px at 42% 38%, #fff, transparent);
  opacity: 1;
}

/* ------------------------------------------------------------- titles ---- */
.logo { text-align: center; line-height: 1; user-select: none; }
[data-theme="3ds"] .logo-main {
  font-weight: 900; font-size: clamp(38px, 7vw, 74px); letter-spacing: -.01em;
  color: #ffd84a;
  -webkit-text-stroke: 3px #2b5ab3;
  paint-order: stroke fill;
  text-shadow: 0 5px 0 #1d3f84, 0 10px 20px rgba(10, 30, 80, .35);
  transform: rotate(-2deg);
}
[data-theme="3ds"] .logo-sub { margin-top: 10px; font-weight: 900; letter-spacing: .45em; color: #fff; text-shadow: 0 2px 0 #2b5ab3, 0 0 12px rgba(43,90,179,.6); font-size: 15px; }
[data-theme="3ds"] .press-start { font-size: 22px; font-weight: 900; color: #2b5ab3; text-shadow: 0 2px 0 #fff; letter-spacing: .12em; animation: blink 1.4s steps(2, start) infinite; }