/* ==========================================================================
   Wii theme: the game runs on a TV under a sensor bar. White pinstripe menus,
   channel-style tiles with the blue selection glow, the Wii Menu bar with its
   clock, and the Wii Remote hand pointer.
   ========================================================================== */
[data-theme="wii"] {
  --font: 'M PLUS Rounded 1c', 'Nunito', 'Segoe UI', system-ui, sans-serif;
  --fs: 15px; --fs-sm: 13px; --fs-xs: 11.5px; --fs-lg: 17px; --fs-xl: 22px;
  --text: #45494e; --muted: #868b91;
  --accent: #34beed; --accent-2: #e8473a; --good: #36ad6a; --warn: #e3a00f;
  --glow: rgba(52, 190, 237, .45);
  --wii-blue: #34beed;
  --wii-glow: 0 0 0 2px rgba(52, 190, 237, .4), 0 0 14px rgba(52, 190, 237, .6);
  --wii-stripes: repeating-linear-gradient(0deg, #f8f9fa 0 2px, #eceef1 2px 4px);
  --page-bg:
    radial-gradient(1000px 520px at 50% -12%, #ffffff, rgba(255,255,255,0) 70%),
    repeating-linear-gradient(0deg, rgba(0,0,0,.022) 0 2px, rgba(0,0,0,0) 2px 4px),
    linear-gradient(180deg, #f2f4f6, #d6dbe0);
  --device-w: 1120px; --device-h: 1010px; --device-aspect: 1.1;

  --btn-bg: linear-gradient(180deg, #ffffff 0%, #f5f6f7 50%, #e3e6e9 100%);
  --btn-border: 2px solid #c6cbd0;
  --btn-text: #45494e;
  --btn-radius: 14px;
  --btn-shadow: inset 0 1px 0 #fff, 0 2px 4px rgba(50, 60, 70, .16);
  --btn-shadow-active: 0 1px 2px rgba(50, 60, 70, .16);
  --btn-hover: none;
  --btn-primary-bg: linear-gradient(180deg, #86dbf8 0%, #34beed 52%, #1fa5dc 100%);
  --btn-primary-text: #fff; --btn-primary-border: 2px solid #1a94c7;
  --btn-danger-bg: linear-gradient(180deg, #ff9d91 0%, #ea574b 55%, #d43e32 100%);
  --btn-danger-text: #fff; --btn-danger-border: 2px solid #b5332a;
  --btn-ghost-bg: rgba(255,255,255,.65); --btn-ghost-text: #5b6066;
  --focus-ring: 3px solid rgba(52, 190, 237, .7);

  --input-bg: #fff; --input-border: 2px solid #c6cbd0; --input-radius: 12px; --input-focus: 0 0 0 3px rgba(52,190,237,.4);
  --toggle-off: #cdd1d6; --toggle-on: linear-gradient(180deg, #6fd3f5, #22a9df); --toggle-knob: #fff; --toggle-border: 1px solid rgba(0,0,0,.08);
  --chip-bg: #fff; --chip-border: 2px solid #d3d7db; --chip-radius: 999px;
  --chip-on-bg: linear-gradient(180deg, #6fd3f5, #22a9df); --chip-on-text: #fff;
  --bar-bg: #e9ecef; --bar-border: 1px solid #cfd3d7; --bar-fill: linear-gradient(90deg, #86dbf8, #34beed);

  --textbox-bg: linear-gradient(180deg, #ffffff, #f3f5f7);
  --textbox-border: 3px solid #c6cbd0;
  --textbox-border-danger: 3px solid #ea574b;
  --textbox-border-good: 3px solid #36ad6a;
  --textbox-radius: 22px;
  --textbox-shadow: inset 0 0 0 2px #fff, 0 0 0 2px rgba(52,190,237,.3), 0 8px 20px rgba(40, 50, 60, .22);
  --textbox-text: #45494e;
  --speaker-bg: linear-gradient(180deg, #6fd3f5, #22a9df); --speaker-text: #fff;
  --choices-scrim: linear-gradient(180deg, rgba(242,244,246,.6), rgba(228,231,234,.9));

  --sheet-bg: var(--wii-stripes);
  --sheet-head-bg: linear-gradient(180deg, #ffffff, #e9ecef);
  --sheet-head-text: #45494e; --sheet-head-border: 3px solid var(--wii-blue);
  --sheet-close-bg: #e3e7eb;

  --card-bg: linear-gradient(180deg, #ffffff, #f3f5f7);
  --card-border: 3px solid #c6cbd0; --card-radius: 20px; --card-shadow: 0 8px 22px rgba(40, 50, 60, .22);
  --panel-bg: rgba(255,255,255,.93); --panel-border: 2px solid #d3d7db; --panel-radius: 18px; --panel-shadow: 0 2px 6px rgba(40, 50, 60, .08);
  --panel-title: #1d97d0;
  --item-bg: #fff; --item-border: 2px solid #d3d7db; --item-radius: 14px; --item-hover: #effaff;
  --tab-bg: #fff; --tab-border: 2px solid #d3d7db; --tab-text: #5b6066;
  --tab-active-bg: linear-gradient(180deg, #6fd3f5, #22a9df); --tab-active-text: #fff;
  --toast-bg: rgba(255,255,255,.97); --toast-text: #45494e; --toast-border: 2px solid var(--wii-blue);
  --scroll-thumb: rgba(52, 190, 237, .55);
  --bottom-bg: var(--wii-stripes);
}

/* Selection glow, the Wii's blue highlight */
[data-theme="wii"] .btn:hover:not([disabled]),
[data-theme="wii"] .menu-tile:hover:not([disabled]),
[data-theme="wii"] .choices .choice:hover:not([disabled]),
[data-theme="wii"] .theme-card:hover,
[data-theme="wii"] .mon-card:hover,
[data-theme="wii"] .shop-item:hover:not([disabled]) { border-color: var(--wii-blue); box-shadow: var(--wii-glow); }
[data-theme="wii"] .btn.primary:hover:not([disabled]) { filter: brightness(1.05); }

/* Channel tiles */
[data-theme="wii"] .menu-tile {
  background: linear-gradient(180deg, #ffffff, #f0f2f4);
  border: 3px solid #d0d4d8; border-radius: 18px;
  box-shadow: inset 0 0 0 2px #fff, 0 3px 6px rgba(40, 50, 60, .12);
}
[data-theme="wii"] .menu-tile .tile-ico { background: var(--wii-stripes); border-radius: 12px; box-shadow: inset 0 0 0 2px #e0e3e6; }
[data-theme="wii"] .menu-tile.primary { background: linear-gradient(180deg, #ffffff, #e8f7fd); border-color: var(--wii-blue); color: #1888bf; }
[data-theme="wii"] .menu-tile.primary .tile-sub { color: #4aa6d2; }
[data-theme="wii"] .menu-tile.primary .tile-ico { background: #fff; }
[data-theme="wii"] .sheet-close { color: #6c7177; }

/* ---------------------------------------------------------------- shell -- */
[data-theme="wii"] .device { isolation: isolate; padding: 42px 30px 90px; }
/* the TV */
[data-theme="wii"] .device::before {
  content: ''; position: absolute; inset: 14px 0 46px 0; z-index: -1; border-radius: 18px;
  background:
    linear-gradient(170deg, rgba(255,255,255,.12), rgba(255,255,255,0) 30%),
    linear-gradient(180deg, #2c2e34, #131418 70%, #1c1d22);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.2), inset 0 -2px 0 rgba(0,0,0,.5), 0 22px 40px rgba(20, 25, 35, .35);
}
/* the stand */
[data-theme="wii"] .device::after {
  content: ''; position: absolute; left: 50%; bottom: 0; width: 36%; height: 48px; transform: translateX(-50%); z-index: -2;
  background:
    linear-gradient(90deg, #15161a, #2e3036 45%, #15161a) center top / 24% 36px no-repeat,
    radial-gradient(50% 100% at 50% 100%, #2b2d33 97%, rgba(0,0,0,0) 100%) center bottom / 100% 16px no-repeat;
  filter: drop-shadow(0 6px 8px rgba(20, 25, 35, .25));
}
/* the sensor bar, sitting on the TV */
[data-theme="wii"] .wii-sensor {
  display: block; position: absolute; top: 2px; left: 50%; width: 34%; height: 14px; transform: translateX(-50%);
  border-radius: 8px 8px 3px 3px;
  background: linear-gradient(180deg, #44474e, #18191d 45%, #08090a);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 3px 5px rgba(0,0,0,.3);
}
[data-theme="wii"] .wii-sensor::before, [data-theme="wii"] .wii-sensor::after {
  content: ''; position: absolute; top: 3px; width: 16%; height: 6px; border-radius: 3px;
  background: linear-gradient(180deg, #3a1418, #120506); box-shadow: inset 0 1px 0 rgba(255,120,120,.18);
}
[data-theme="wii"] .wii-sensor::before { left: 5%; }
[data-theme="wii"] .wii-sensor::after { right: 5%; }

[data-theme="wii"] .lid { flex: 0 0 44%; padding: 0; background: none; min-height: 210px; }
[data-theme="wii"] .lid-strip, [data-theme="wii"] .lid-label, [data-theme="wii"] .speaker, [data-theme="wii"] .hinge,
[data-theme="wii"] .deco, [data-theme="wii"] .base-strip, [data-theme="wii"] .gb-grille { display: none !important; }
[data-theme="wii"] .bezel-top { padding: 0; background: #000; border-radius: 6px 6px 0 0; }
[data-theme="wii"] .screen-top { border-radius: 6px 6px 0 0; }
[data-theme="wii"] .bezel-top .screen-wrap .overlay { border-radius: 6px 6px 0 0; }
[data-theme="wii"] .base {
  padding: 0; background: none;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr) auto;
  grid-template-areas: "screen" "bar";
}
[data-theme="wii"] .bezel-bottom { padding: 0; background: none; }
[data-theme="wii"] .screen-bottom { background: var(--bottom-bg); box-shadow: inset 0 2px 0 #d3d8dc; }
/* TV brand and power light in the bottom lip */
[data-theme="wii"] .base::after {
  content: 'RIVALS'; position: absolute; left: 0; right: 0; bottom: -31px; text-align: center;
  font: 800 11px/1 'M PLUS Rounded 1c', 'Nunito', sans-serif; letter-spacing: .4em; color: #8d9399;
}
[data-theme="wii"] .base::before {
  content: ''; position: absolute; right: 10px; bottom: -27px; width: 6px; height: 6px; border-radius: 50%;
  background: var(--wii-blue); box-shadow: 0 0 6px var(--wii-blue);
}

/* ------------------------------------------------------- Wii Menu bar ---- */
[data-theme="wii"] .wii-bar {
  grid-area: bar; position: relative;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  height: 86px; padding: 6px 16px 4px;
  border-radius: 0 0 6px 6px;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 100' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23f7f8f9'/%3E%3Cstop offset='1' stop-color='%23d2d6da'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M0 5H140C200 5 215 32 280 32H720C785 32 800 5 860 5H1000V100H0Z' fill='url(%23g)'/%3E%3Cpath d='M0 5H140C200 5 215 32 280 32H720C785 32 800 5 860 5H1000' fill='none' stroke='%2334beed' stroke-width='2.5' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") center / 100% 100% no-repeat,
    var(--wii-stripes);
}
[data-theme="wii"] .wii-round {
  appearance: none; padding: 0; width: 60px; height: 60px; border-radius: 50%;
  display: grid; place-items: center;
  border: 3px solid #c3c8cd;
  background: radial-gradient(circle at 50% 28%, #ffffff, #f1f3f5 58%, #dde1e5);
  box-shadow: inset 0 0 0 2px #fff, 0 2px 5px rgba(40, 50, 60, .22);
  color: #8d9298; font: 800 17px/1 var(--font); letter-spacing: .02em;
  transition: border-color .12s ease, box-shadow .12s ease;
}
[data-theme="wii"] .wii-round:hover, [data-theme="wii"] .wii-round:focus-visible { outline: none; border-color: var(--wii-blue); box-shadow: inset 0 0 0 2px #fff, var(--wii-glow); }
[data-theme="wii"] .wii-round:active { transform: scale(.96); }
[data-theme="wii"] .wii-btn { justify-self: start; }
[data-theme="wii"] .wii-mail { justify-self: end; }
[data-theme="wii"] .wii-mail .pxi { width: 32px; height: 32px; }
[data-theme="wii"] .wii-clock { display: flex; flex-direction: column; align-items: center; line-height: 1; padding-top: 22px; color: #8d9298; user-select: none; }
[data-theme="wii"] .wii-time { font-size: 30px; font-weight: 700; letter-spacing: .04em; text-shadow: 0 1px 0 #fff; display: flex; align-items: baseline; }
[data-theme="wii"] .wii-colon { animation: wii-colon 2s steps(1) infinite; }
[data-theme="wii"] .wii-ampm { font-size: 13px; margin-left: 5px; letter-spacing: 0; }
[data-theme="wii"] .wii-date { font-size: 13px; font-weight: 700; margin-top: 4px; color: #9aa0a6; }
@keyframes wii-colon { 50% { opacity: 0; } }
[data-motion="reduced"] .wii-colon { animation: none; }

/* ------------------------------------------------- Wii Remote pointer ---- */
[data-theme="wii"][data-pointer="on"],
[data-theme="wii"][data-pointer="on"] * { cursor: url('../assets/cursor-wii.svg') 11 1, auto !important; }
[data-theme="wii"][data-pointer="on"] :is(textarea, input:not([type]), input[type="text"], input[type="search"], input[type="number"]) { cursor: text !important; }

/* ------------------------------------------------------------- titles ---- */
[data-theme="wii"] .logo-main {
  font-weight: 800; font-size: clamp(36px, 6.6vw, 70px); letter-spacing: .01em;
  color: #fff; -webkit-text-stroke: 3px var(--wii-blue); paint-order: stroke fill;
  text-shadow: 0 4px 0 #1d97d0, 0 10px 22px rgba(30, 120, 170, .35);
}
[data-theme="wii"] .logo-sub { margin-top: 10px; font-weight: 800; letter-spacing: .5em; color: #fff; text-shadow: 0 2px 0 #8d9399, 0 0 10px rgba(80, 90, 100, .45); font-size: 14px; }
[data-theme="wii"] .press-start { font-size: 18px; font-weight: 700; color: #6c7177; animation: wii-pulse 2.4s ease-in-out infinite; }
@keyframes wii-pulse { 50% { opacity: .3; } }

/* ------------------------------------------------ new-save screens ---- */
/* Setting up a new game (rules, players, starters) uses the whole TV: the menus
   run the full height, and the top screen's help and previews sit beside them. */
@media (min-width: 641px) and (min-height: 561px) {
  :root[data-theme="wii"]:is([data-screen="rules"], [data-screen="setup"], [data-screen="starters"]) .device {
    display: grid;
    grid-template-columns: minmax(0, 34%) minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) auto;
    grid-template-areas: "top screen" "bar bar";
  }
  :root[data-theme="wii"]:is([data-screen="rules"], [data-screen="setup"], [data-screen="starters"]) .lid { grid-area: top; min-height: 0; }
  :root[data-theme="wii"]:is([data-screen="rules"], [data-screen="setup"], [data-screen="starters"]) .base { display: contents; }
  :root[data-theme="wii"]:is([data-screen="rules"], [data-screen="setup"], [data-screen="starters"]) .bezel-bottom { grid-area: screen; min-height: 0; }
  :root[data-theme="wii"]:is([data-screen="rules"], [data-screen="setup"], [data-screen="starters"]) .wii-bar { grid-area: bar; }
  :root[data-theme="wii"]:is([data-screen="rules"], [data-screen="setup"], [data-screen="starters"]) .bezel-top,
  :root[data-theme="wii"]:is([data-screen="rules"], [data-screen="setup"], [data-screen="starters"]) .screen-top { border-radius: 6px 0 0 0; }
  :root[data-theme="wii"]:is([data-screen="rules"], [data-screen="setup"], [data-screen="starters"]) .screen-bottom { box-shadow: inset 2px 0 0 #d3d8dc; border-radius: 0 6px 0 0; }
  /* The brand and power light belonged to the bottom half; keep them in the TV's lip. */
  :root[data-theme="wii"]:is([data-screen="rules"], [data-screen="setup"], [data-screen="starters"]) .base::after { bottom: 59px; }
  :root[data-theme="wii"]:is([data-screen="rules"], [data-screen="setup"], [data-screen="starters"]) .base::before { bottom: 63px; right: 40px; }
}

/* ------------------------------------------------------------- phones ---- */
@media (max-width: 640px), (max-height: 560px) {
  [data-theme="wii"] .device { padding: 6px; }
  [data-theme="wii"] .device::before { inset: 0; border-radius: 0 0 12px 12px; }
  [data-theme="wii"] .device::after, [data-theme="wii"] .wii-sensor, [data-theme="wii"] .base::after, [data-theme="wii"] .base::before { display: none; }
  [data-theme="wii"] .wii-bar { height: 62px; padding: 4px 8px 3px; }
  [data-theme="wii"] .wii-round { width: 44px; height: 44px; font-size: 13px; border-width: 2px; }
  [data-theme="wii"] .wii-mail .pxi { width: 16px; height: 16px; }
  [data-theme="wii"] .wii-clock { padding-top: 16px; }
  [data-theme="wii"] .wii-time { font-size: 21px; }
  [data-theme="wii"] .wii-date { font-size: 10.5px; margin-top: 2px; }
}