/* Test server only: the new look (dashboard layout in ui2.js). Loaded after style.css; everything is under body.ui2. */
@import url("https://fonts.googleapis.com/css2?family=Nunito:wght@600;700;800;900&display=swap");

body.ui2 {
  --bg: #0b1328;
  --panel: #142042;
  --panel-2: #1c2b55;
  --border: #2d3f74;
  --text: #f1f4ff;
  --muted: #a8b3d8;
  --navy: #13204a;
  --navy-2: #1b2c62;
  --glass: rgba(16, 26, 56, .9);
  --glass-2: rgba(24, 38, 80, .92);
  --line: rgba(130, 160, 240, .28);
  --gold: #ffcb05;
  --gold-2: #ffb300;
  --radius: 16px;
  font-family: "Nunito", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background: var(--bg);
}
body.ui2 button { font-family: inherit; font-weight: 700; }

/* The live map behind the menus: brighter, so it reads as the game world. */
/* (the live map behind the menus is drawn lighter: see MENU_BG_DIM in ui2.js. No CSS filter: that cost a repaint every frame) */
body.ui2:not(.in-game)::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(ellipse at 50% 20%, transparent 40%, rgba(5, 9, 22, .55) 100%);
}

/* ---------- Top bar ---------- */
body.ui2 header {
  position: sticky; top: 0; z-index: 30;
  padding: 8px 18px; gap: 14px;
  background: linear-gradient(180deg, rgba(14, 24, 54, .97), rgba(16, 28, 62, .95));
  border-bottom: 1px solid var(--line);
  box-shadow: 0 6px 18px rgba(0, 0, 0, .35);
}
body.ui2 .brand { font-size: 18px; color: var(--gold); text-shadow: 2px 2px 0 #2a4aa8, 3px 3px 0 rgba(0, 0, 0, .4); }
body.ui2 .header-actions { align-items: center; gap: 4px; }
body.ui2 .header-actions > button, body.ui2 .header-actions > .u2-nav {
  background: transparent; border: 1px solid transparent; box-shadow: none !important;
  color: #d9e1ff; padding: 7px 12px; border-radius: 10px; font-size: 14px;
}
body.ui2 .header-actions > button:hover:not(:disabled) { background: rgba(255, 255, 255, .07); border-color: transparent; }
body.ui2 .header-actions > .u2-nav.on { background: rgba(255, 255, 255, .1); color: #fff; }
body.ui2 #trainer-btn { background: rgba(255, 255, 255, .06); border: 1px solid var(--line); }
body.ui2 #menu-btn { background: var(--gold); color: #1a1a1a; }
body.ui2 .u2-coins {
  display: inline-flex; align-items: center; gap: 6px; margin: 0 6px 0 8px;
  padding: 5px 12px; border-radius: 99px; font-weight: 800; color: #ffe27a;
  background: rgba(255, 203, 5, .1); border: 1px solid rgba(255, 203, 5, .35);
}
body.ui2.in-game .u2-coins, body.ui2.in-game #u2-home-nav { display: none; }

/* ---------- Page and panels ---------- */
body.ui2 .title-screen { max-width: 1320px; padding: 18px 20px 28px; }
body.ui2 .hero { display: none; }
body.ui2 .u2-panel, body.ui2 .view:not(#view-menu) {
  background: linear-gradient(180deg, var(--glass-2), var(--glass));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 10px 28px rgba(0, 0, 0, .38), inset 0 1px 0 rgba(255, 255, 255, .06);

}
body.ui2 .view:not(#view-menu) { padding: 6px 20px 20px; margin-top: 4px; }
body.ui2 .u2-head {
  display: flex; align-items: center; gap: 10px; margin: 0; padding: 12px 16px;
  font-size: 15px; font-weight: 900; letter-spacing: .04em; text-transform: uppercase; color: #fff;
  background: linear-gradient(180deg, rgba(36, 56, 116, .9), rgba(24, 38, 82, .9));
  border-bottom: 1px solid var(--line); border-radius: var(--radius) var(--radius) 0 0;
}
.u2-ball {
  width: 18px; height: 18px; border-radius: 50%; flex: none;
  background: linear-gradient(180deg, #ef4444 0 45%, #1a1a1a 45% 55%, #fff 55%);
  box-shadow: 0 0 0 2px #1a1a1a inset, 0 0 0 1px rgba(255, 255, 255, .4);
  position: relative;
}
.u2-ball::after { content: ""; position: absolute; inset: 6px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 2px #1a1a1a; }

/* Section titles in every other menu */
body.ui2 .view-head { margin: 10px 0 12px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
body.ui2 .section-title {
  font-family: "Nunito", system-ui, sans-serif; font-size: 20px; font-weight: 900; text-shadow: none; color: #fff; letter-spacing: .01em;
}
body.ui2 .back-btn { border-radius: 99px; padding: 6px 14px; background: rgba(255, 255, 255, .07); border-color: var(--line); }
body.ui2 .view-sub { color: var(--muted); font-size: 14px; }
body.ui2 .coin-pill { background: rgba(255, 203, 5, .1); border-color: rgba(255, 203, 5, .35); border-radius: 99px; }

/* One font everywhere (the pixel font stays on the logo only) */
body.ui2 .mode-name, body.ui2 .dialog-name, body.ui2 .tc-name, body.ui2 .do-title, body.ui2 .panel section h3, body.ui2 .pz-kicker, body.ui2 .pz-title,
body.ui2 .ch-kicker, body.ui2 .support-sub, body.ui2 .note-title, body.ui2 .cd-title, body.ui2 .tw-eyebrow, body.ui2 .tw-rar {
  font-family: "Nunito", system-ui, sans-serif; font-weight: 900; letter-spacing: .02em; text-shadow: none; line-height: 1.3;
}
body.ui2 .pz-title, body.ui2 .tc-name { font-size: 20px; }
body.ui2 .pz-kicker, body.ui2 .ch-kicker, body.ui2 .note-title, body.ui2 .cd-title, body.ui2 .do-title, body.ui2 .dialog-name { font-size: 15px; }
body.ui2 .panel section h3, body.ui2 .tw-eyebrow, body.ui2 .tw-rar { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; }

/* Buttons */
body.ui2 button { border-radius: 10px; background: var(--panel-2); border-color: var(--border); }
body.ui2 button.primary { background: linear-gradient(180deg, #ffd84a, var(--gold-2)); border-color: #e0a100; color: #1d1600; box-shadow: 0 3px 0 #a87400; }
body.ui2 button:hover:not(:disabled) { border-color: #6f86d6; }

/* ---------- Home dashboard ---------- */
.u2-home { display: grid; grid-template-columns: minmax(0, 1fr) 370px; gap: 18px; align-items: start; }
.u2-main, .u2-side { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
body.ui2 #view-menu > .section-title { display: none; }
body.ui2 #pw-nag { margin: 0; border-radius: 12px; }
body.ui2 #crown-box { margin: 0; border-radius: var(--radius); background: linear-gradient(135deg, rgba(255, 203, 5, .2), rgba(255, 140, 0, .08)), linear-gradient(180deg, var(--glass-2), var(--glass)); }

.u2-welcome {
  display: flex; align-items: center; gap: 12px; align-self: flex-start; cursor: pointer;
  padding: 10px 18px 10px 10px; border-radius: 14px; color: #14204a;
  background: linear-gradient(180deg, #ffffff, #e9eefc); border: 2px solid #c9d4f4;
  box-shadow: 0 6px 16px rgba(0, 0, 0, .3);
}
/* Welcome card and, beside it, a small Friends button (same card look; filled in by renderFriendsBtn in game.js) */
.u2-wrow { display: flex; align-items: stretch; gap: 10px; min-width: 0; }
.u2-wrow > #u2-welcome { min-width: 0; }
.u2-friends { font: inherit; flex: none; align-self: flex-end; flex-direction: column; justify-content: center; align-items: center; gap: 2px; padding: 4px 9px; border-radius: 10px; min-width: 0; }
.u2-welcome.u2-carded.u2-friends { min-width: 0; padding: 4px 9px; }
.u2-friends:hover { filter: brightness(1.06); }
.u2-ficon { position: relative; font-size: 16px; line-height: 1; }
.u2-fask { position: absolute; top: -5px; right: -11px; min-width: 14px; height: 14px; padding: 0 3px; box-sizing: border-box; border-radius: 99px;
  background: #f95587; color: #fff; font-size: 9px; font-weight: 800; font-style: normal; line-height: 14px; text-align: center; }
.u2-fline { display: flex; align-items: center; gap: 4px; font-size: 10px; font-weight: 700; color: #44517e; white-space: nowrap; }
.u2-fline .fr-dot { position: static; width: 7px; height: 7px; box-shadow: none; }
.u2-carded .u2-fline { color: #d6dcf0; }
body.ui2.dark-cards .u2-fline { color: #b4bee0; }
/* (a phone: the welcome card gives the button its room without its lines breaking) */
@media (max-width: 560px) {
  .u2-wrow { gap: 8px; }
  .u2-wrow .u2-wtext { min-width: 0; flex: 1; }
  .u2-wrow .u2-wtext > b { font-size: 15px; overflow-wrap: anywhere; }
  .u2-wrow .u2-dexline { white-space: nowrap; }
  .u2-wrow .u2-bar { min-width: 24px; }
  .u2-wrow .u2-welcome.u2-carded:not(.u2-friends) { padding-right: 12px; }
  .u2-friends, .u2-welcome.u2-carded.u2-friends { padding: 4px 7px; }
}
.u2-avatar { width: 52px; height: 52px; border-radius: 12px; background: #dfe7ff; display: grid; place-items: center; overflow: hidden; flex: none; }
.u2-avatar img { width: 64px; height: 64px; image-rendering: pixelated; }
.u2-wtext { display: flex; flex-direction: column; gap: 4px; }
.u2-wtext > b { font-size: 17px; font-weight: 900; }
/* A supporter's glowing name sits on a dark chip, so every nameplate shows up on the light card. */
.u2-np { display: inline-block; padding: 0 7px; border-radius: 7px; background: #241a3e; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); }
.u2-dexline { display: flex; align-items: center; gap: 8px; font-size: 13px; color: #44517e; }
.u2-dexline b { color: #14204a; }
.u2-bar { display: inline-block; flex: 1; min-width: 90px; height: 8px; border-radius: 99px; background: rgba(60, 90, 166, .2); overflow: hidden; }
.u2-bar i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, #3b82f6, #22c3ee); }

.u2-hero {
  position: relative; overflow: hidden; min-height: 280px; border-radius: var(--radius);
  border: 2px solid rgba(255, 255, 255, .5);
  background: linear-gradient(90deg, rgba(10, 20, 48, .95) 0%, rgba(10, 20, 48, .82) 38%, rgba(10, 20, 48, .1) 75%), var(--art) center / cover no-repeat, #1b2a55;
  image-rendering: pixelated;
  box-shadow: 0 12px 30px rgba(0, 0, 0, .45);
}
.u2-hero-text { position: relative; z-index: 1; max-width: 470px; padding: 26px 28px 20px; display: flex; flex-direction: column; gap: 10px; }
.u2-chip { align-self: flex-start; font-size: 11px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; padding: 3px 9px; border-radius: 6px; background: rgba(255, 255, 255, .14); color: #dfe7ff; }
.u2-hero h2 { margin: 0; font-size: 38px; font-weight: 900; line-height: 1.05; color: #fff; text-shadow: 0 3px 0 rgba(0, 0, 0, .35); }
.u2-hero p { margin: 0; font-size: 16px; color: #e4eaff; }
body.ui2 .u2-cta {
  align-self: flex-start; margin-top: 6px; padding: 12px 30px; font-size: 19px; font-weight: 900; border-radius: 12px;
  color: #1d1600; background: linear-gradient(180deg, #ffe066, var(--gold-2)); border: 0; box-shadow: 0 4px 0 #a87400, 0 8px 18px rgba(0, 0, 0, .35);
}
.u2-hero-foot { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 8px; padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, .18); font-size: 13px; color: #dbe3ff; }
.u2-dots { display: inline-flex; gap: 6px; }
.u2-dots i { width: 13px; height: 13px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .55); }
.u2-dots i.done { background: linear-gradient(180deg, #ef4444 0 45%, #222 45% 55%, #fff 55%); border-color: #fff; }
.u2-dots i.now { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(255, 203, 5, .35); }
.u2-partner { position: absolute; right: 6%; bottom: -6px; width: 210px; height: 210px; image-rendering: pixelated; filter: drop-shadow(0 8px 10px rgba(0, 0, 0, .5)); pointer-events: none; }
body.ui2 .u2-link { background: none; border: 0; box-shadow: none !important; padding: 0; color: #9cc0ff; font-size: 13px; font-weight: 800; }

/* Game modes */
body.ui2 #u2-modes-slot { padding: 14px; }
body.ui2 #mode-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
body.ui2 #mode-grid .mode-challenges { display: none; }
body.ui2 .mode-card {
  min-height: 0; padding: 0; gap: 0; border-radius: 14px; background: #f4f7ff !important; color: #1a2550;
  border: 2px solid #d6def6; box-shadow: 0 6px 14px rgba(0, 0, 0, .25);
}
body.ui2 .mode-card::before {
  position: static; display: block; width: 100%; height: 108px; opacity: 1; order: -2;
  background: var(--art) center / cover no-repeat !important; image-rendering: pixelated;
}
body.ui2 .mode-card:hover { transform: translateY(-3px); border-color: var(--gold); }
body.ui2 .mode-card .mode-icon { position: absolute; top: 34px; left: 50%; width: 84px; height: 84px; margin: 0; transform: translateX(-50%); filter: drop-shadow(0 4px 4px rgba(0, 0, 0, .45)); }
body.ui2 .mode-card .mode-name {
  order: -1; width: 100%; padding: 7px 12px; margin-top: -2px; position: relative; z-index: 1;
  font-family: "Nunito", system-ui, sans-serif; font-size: 18px; font-weight: 900; color: #fff;
  background: linear-gradient(180deg, #1d2d63, #142150);
}
body.ui2 .mode-card .mode-desc {
  padding: 9px 12px 0; font-size: 12.5px; color: #4a567f; line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
body.ui2 .mode-card .mode-info { padding: 6px 12px 0; font-size: 12.5px; font-weight: 800; color: #1a2550; margin-top: auto; }
body.ui2 .mode-card .mode-testing { padding: 0 12px; color: #7a86ad; }
/* Battle Tower card: this week's Shadow look gliding over the art (the animated sprite, in its img[data-skin] look from
   style.css, over a dark aura with mist rising off it), and its tag. .tw-card-sky clips it all to the art. */
body.ui2 .mode-card .tw-card-sky { position: absolute; top: 0; left: 0; right: 0; height: 108px; overflow: hidden; pointer-events: none; }
body.ui2 .mode-card .tw-card-glide { position: absolute; inset: 0; animation: tw-glide 6s ease-in-out infinite; } /* (all of it glides together) */
body.ui2 .mode-card .tw-card-mon {
  top: 8px; width: auto; height: 92px; max-width: 150px; object-fit: contain; transform: none; translate: -50% 0;
  animation: shadow-pulse 2.2s ease-in-out infinite;
}
/* its in-game aura (game.js drawLiveSkins, data-live-part): black flames and dark gas behind it, embers in front */
body.ui2 .mode-card .tw-card-fx { position: absolute; left: 50%; top: 54px; width: 200px; height: 200px; translate: -50% -50%; image-rendering: pixelated; }
body.ui2 .mode-card .tw-card-aura {
  position: absolute; left: 50%; top: 54px; width: 150px; height: 120px; translate: -50% -50%; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(120, 30, 160, .6), rgba(70, 10, 110, .32) 60%, transparent);
  animation: tw-aura 2.2s ease-in-out infinite;
}
/* the mist: soft violet puffs drifting up off it and fading */
body.ui2 .mode-card .tw-card-aura::before, body.ui2 .mode-card .tw-card-aura::after {
  content: ''; position: absolute; inset: 20% 18%; border-radius: 50%; filter: blur(3px);
  background: radial-gradient(circle at 20% 70%, rgba(170, 60, 230, .7) 0 6px, transparent 7px),
    radial-gradient(circle at 55% 85%, rgba(120, 30, 190, .7) 0 8px, transparent 9px),
    radial-gradient(circle at 80% 60%, rgba(190, 80, 255, .6) 0 5px, transparent 6px),
    radial-gradient(circle at 40% 40%, rgba(140, 40, 210, .6) 0 5px, transparent 6px);
  animation: tw-mist 3s linear infinite;
}
body.ui2 .mode-card .tw-card-aura::after { animation-delay: -1.5s; transform: scaleX(-1); }
@keyframes tw-aura { 0%, 100% { opacity: .75; scale: 1; } 50% { opacity: 1; scale: 1.08; } }
@keyframes tw-mist { from { translate: 0 18px; opacity: 0; } 25% { opacity: 1; } to { translate: 0 -34px; opacity: 0; } }
@keyframes tw-glide {
  0%, 100% { transform: translate(-16px, 4px) rotate(-4deg); }
  25% { transform: translate(0, -6px) rotate(0deg); }
  50% { transform: translate(16px, 2px) rotate(4deg); }
  75% { transform: translate(0, -8px) rotate(0deg); }
}
body.ui2 .mode-card .tw-card-look {
  position: absolute; top: 6px; right: 6px; z-index: 2; padding: 2px 8px; border-radius: 999px;
  font-size: 11px; font-weight: 900; color: #f3e6ff; background: rgba(30, 6, 50, .82); border: 1px solid #9a28ff;
  box-shadow: 0 0 8px rgba(154, 40, 255, .55); white-space: nowrap;
}
body.ui2 .mode-card .tw-card-look.got { color: #d9ffe0; background: rgba(10, 50, 25, .85); border-color: #3fcf6a; box-shadow: none; }
@media (prefers-reduced-motion: reduce) { body.ui2 .mode-card .tw-card-glide, body.ui2 .mode-card .tw-card-mon, body.ui2 .mode-card .tw-card-aura, body.ui2 .mode-card .tw-card-aura::before, body.ui2 .mode-card .tw-card-aura::after { animation: none; } }
body.ui2 .u2-play {
  margin: 10px 12px 12px; width: calc(100% - 24px); padding: 8px; border-radius: 10px; text-align: center;
  font-size: 15px; font-weight: 900; color: #fff; box-shadow: 0 3px 0 rgba(0, 0, 0, .25);
}
body.ui2 .mode-story .u2-play { background: linear-gradient(180deg, #ffd84a, #f0a800); color: #2a1d00; }
body.ui2 .mode-classic .u2-play { background: linear-gradient(180deg, #3b82f6, #1d5fd6); }
body.ui2 .mode-endless .u2-play { background: linear-gradient(180deg, #8b5cf6, #6d3fe0); }
body.ui2 .mode-hardcore .u2-play { background: linear-gradient(180deg, #ef4444, #c62828); }
body.ui2 .mode-tower .u2-play { background: linear-gradient(180deg, #f2b632, #c98a00); }

/* More features */
.u2-features-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; padding: 14px; }
body.ui2 .u2-feature {
  display: flex; align-items: center; gap: 12px; margin: 0 !important; padding: 12px 14px; text-align: left; min-height: 74px;
  background: #f4f7ff !important; border: 2px solid #d6def6 !important; border-radius: 14px; color: #1a2550; box-shadow: 0 4px 10px rgba(0, 0, 0, .2);
}
body.ui2 .u2-feature:hover { border-color: var(--gold) !important; transform: translateY(-2px); }
/* Phones: the handle between the map and the panel (ui2.js). */
.u2-split { display: none; }
body.in-game.portrait-board .u2-split {
  display: flex; flex: 0 0 auto; align-items: center; justify-content: center; height: 18px; margin: -4px 0 -4px;
  touch-action: none; cursor: ns-resize; user-select: none;
}
.u2-split i { width: 54px; height: 5px; border-radius: 99px; background: rgba(255, 255, 255, .35); transition: background .15s, width .15s; }
.u2-split.on i, .u2-split:hover i { background: #ffd84a; width: 72px; }
body.ui2 .u2-feature .free-egg-count { margin: 0; flex: none; white-space: nowrap; font-weight: 800; }
.u2-fi { font-size: 30px; width: 44px; text-align: center; flex: none; }
.u2-ft { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.u2-ft b { font-size: 15px; font-weight: 900; }
.u2-ft small, .u2-rt small { font-size: 12px; font-weight: 600; color: #5d6890; line-height: 1.3; }
.u2-arrow { font-size: 22px; color: #8a96c2; flex: none; }
body.ui2 #discord-link { margin: 0 14px 14px; width: auto; border-radius: 12px; }

/* Side panels: rows */
.u2-side .u2-panel { overflow: hidden; }
body.ui2 .u2-row {
  display: flex; align-items: center; gap: 12px; width: calc(100% - 20px); margin: 10px 10px 0; padding: 10px 12px; text-align: left;
  background: #f4f7ff; border: 2px solid #d6def6; border-radius: 12px; color: #1a2550; box-shadow: 0 2px 6px rgba(0, 0, 0, .15);
}
body.ui2 .u2-row:last-child { margin-bottom: 10px; }
body.ui2 .u2-row:hover { border-color: var(--gold); }
.u2-ri { width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; font-size: 22px; background: linear-gradient(180deg, #dfe8ff, #c6d4fb); flex: none; }
.u2-rt { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.u2-rt b { font-size: 15px; font-weight: 900; }
.u2-pill { padding: 3px 10px; border-radius: 99px; font-size: 12px; font-weight: 900; background: #e2e8fb; color: #2a3a78; white-space: nowrap; }
.u2-pill.new { background: #22c55e; color: #fff; }
.u2-pill.ready { background: #2563eb; color: #fff; }
.u2-pill.done { background: #d1fae5; color: #047857; }
.u2-head .u2-reset { margin-left: auto; text-align: right; font-size: 11px; font-weight: 700; letter-spacing: 0; text-transform: none; color: #c3cdf0; line-height: 1.2; }
.u2-head .u2-reset b { display: block; font-size: 16px; color: #fff; font-variant-numeric: tabular-nums; }
.u2-cal { font-size: 18px; }
body.ui2 .u2-gift { background: linear-gradient(180deg, #fff3c4, #ffe28a); border-color: #f2c94c; }
.u2-gift .u2-ri { background: linear-gradient(180deg, #ff8a65, #e8553f); }
.u2-egg { font-size: 26px; }
.u2-stat .u2-rt b { font-size: 18px; }
.u2-stat .u2-bar { margin-top: 4px; min-width: 0; width: 100%; }
body.ui2 .u2-stat .u2-link { color: #2350c8; white-space: nowrap; }
.u2-mon { background: linear-gradient(180deg, #2b3f86, #1b2a5e); }
.u2-mon img { width: 48px; height: 48px; image-rendering: pixelated; }

/* ---------- Every other menu ---------- */
body.ui2 .egg-card, body.ui2 .mart-card, body.ui2 .map-card, body.ui2 .chapter-card, body.ui2 .ch-card, body.ui2 .challenge-card,
body.ui2 .coll-card, body.ui2 .lb-table, body.ui2 .tower-panel section, body.ui2 .collection-details, body.ui2 .base-deco {
  border-color: var(--line) !important; border-radius: 14px;
}
body.ui2 .map-card, body.ui2 .chapter-card { background-color: rgba(24, 38, 80, .95) !important; box-shadow: 0 6px 14px rgba(0, 0, 0, .3); }
body.ui2 .map-card:hover, body.ui2 .chapter-card:hover, body.ui2 .egg-card:hover, body.ui2 .mart-card:hover { border-color: var(--gold) !important; }
body.ui2 .mart-tabs button, body.ui2 .lb-tabs button, body.ui2 .coll-gen button, body.ui2 .tr-chip { border-radius: 99px; }
body.ui2 .mart-tabs button.active, body.ui2 .lb-tabs button.active, body.ui2 .coll-gen button.active, body.ui2 .tr-chip.on {
  background: var(--gold); color: #1d1600; border-color: var(--gold);
}
body.ui2 .base-stage { border-radius: 14px; overflow: hidden; border: 2px solid var(--line); }
body.ui2 .tower-panel, body.ui2 .tower-panel section { background: rgba(10, 18, 44, .55) !important; border-color: var(--line) !important; border-radius: 14px; }
body.ui2 input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), body.ui2 select, body.ui2 textarea {
  background: rgba(10, 18, 44, .8); color: var(--text); border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; font-family: inherit;
}
body.ui2 input::placeholder { color: #8391bd; }

/* Pop-ups */
body.ui2 .modal { background: rgba(5, 9, 22, .78); } /* (no backdrop blur: it re-blurred the animated background every frame) */
body.ui2 .modal-box, body.ui2 .overlay-box, body.ui2 .hatch-box, body.ui2 .team-box {
  background: linear-gradient(180deg, #1c2b5c, #121d42) !important;
  border: 1px solid rgba(160, 185, 255, .45) !important; border-radius: 18px !important;
  box-shadow: 0 20px 50px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .08) !important;
}
body.ui2 .overlay-box h2, body.ui2 .team-title { font-family: "Nunito", system-ui, sans-serif; font-size: 22px; font-weight: 900; text-shadow: none; color: #fff; }
body.ui2 .modal-close { background: rgba(255, 255, 255, .1); border-color: transparent; }

/* In a game: the side panel matches */
body.ui2 .panel { border-radius: 14px; border: 1px solid var(--line) !important; box-shadow: 0 8px 22px rgba(0, 0, 0, .35) !important; background: linear-gradient(180deg, #19285a, #111b3e); }

/* ---------- Tablets ---------- */
@media (max-width: 1150px) {
  .u2-home { grid-template-columns: minmax(0, 1fr) 320px; }
  body.ui2 #mode-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .u2-partner { width: 170px; height: 170px; right: 2%; }
}

/* ---------- Phones: one column, the most used things first ---------- */
@media (max-width: 860px) {
  .u2-home, .u2-main, .u2-side { display: flex; flex-direction: column; align-items: stretch; gap: 14px; }
  .u2-main, .u2-side { display: contents; }
  body.ui2 #pw-nag, body.ui2 #crown-box { order: 0; }
  body.ui2 #crown-box { margin: 0; }
  .u2-wrow { order: 1; }
  .u2-wrow > #u2-welcome { flex: 1; min-width: 0; }
  .u2-hero { order: 2; }
  .u2-daily { order: 3; }
  .u2-modes { order: 4; }
  .u2-features { order: 6; }
  .u2-progress { order: 7; }
  body.ui2 #discord-link { order: 8; margin: 0; }
  .u2-recent { order: 9; } /* at the very bottom */
  html:has(body.ui2), body.ui2 { overflow-x: hidden; }
  body.ui2 .title-screen { padding: 12px 12px 24px; }
  /* Top bar: the logo, then one row of icon buttons that scrolls sideways if it has to */
  body.ui2 header { flex-wrap: wrap; padding: 6px 10px; gap: 4px 6px; }
  body.ui2 .brand { font-size: 14px; }
  body.ui2 .header-actions {
    flex: 1 1 100%; margin: 0; max-width: 100%; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; justify-content: flex-start;
  }
  body.ui2 .header-actions::-webkit-scrollbar { display: none; }
  body.ui2 .header-actions > button { padding: 6px 9px; flex: none; }
  body.ui2 .header-actions .btn-label { display: none; }
  body.ui2 .u2-coins { position: absolute; top: 6px; right: 10px; margin: 0; padding: 3px 10px; font-size: 13px; } /* beside the logo */
  body.ui2 #trainer-btn { font-size: 12px; }
  body.ui2 #mode-grid .mode-tower { grid-column: span 2; }
  .u2-hero { min-height: 0; background: linear-gradient(180deg, rgba(10, 20, 48, .25), rgba(10, 20, 48, .92) 58%), var(--art) center top / cover no-repeat, #1b2a55; }
  .u2-hero-text { padding: 120px 18px 16px; max-width: none; }
  .u2-hero h2 { font-size: 28px; }
  .u2-hero p { font-size: 14px; }
  body.ui2 .u2-cta { align-self: stretch; text-align: center; }
  .u2-partner { top: 8px; bottom: auto; right: 8px; width: 120px; height: 120px; }
  body.ui2 #mode-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  body.ui2 .mode-card::before { height: 84px; }
  body.ui2 .mode-card .mode-icon { top: 22px; width: 68px; height: 68px; }
  body.ui2 .mode-card .tw-card-sky { height: 84px; }
  body.ui2 .mode-card .tw-card-mon { top: 6px; width: auto; height: 72px; }
  body.ui2 .mode-card .tw-card-aura { top: 42px; width: 120px; height: 96px; }
  body.ui2 .mode-card .tw-card-fx { top: 42px; width: 160px; height: 160px; }
  body.ui2 .mode-card .tw-card-look { font-size: 10px; padding: 1px 6px; }
  body.ui2 .mode-card .mode-name { font-size: 16px; }
  body.ui2 .mode-card .mode-desc { display: none; }
  .u2-features-grid { grid-template-columns: 1fr; padding: 10px; gap: 8px; }
  body.ui2 #u2-modes-slot { padding: 10px; }
  body.ui2 .view:not(#view-menu) { padding: 4px 12px 14px; }
  body.ui2 .section-title { font-size: 17px; }
}
@media (max-width: 380px) {
  body.ui2 .brand { font-size: 12px; }
  body.ui2 .u2-coins b { font-size: 12px; }
}

/* ---------- Story overworld map (ui/story-map.js) ---------- */
body.ui2 .sm-grid { display: none; }
.sm-wrap { display: flex; flex-direction: column; gap: 14px; margin-top: 12px; }
.sm-map { position: relative; width: 100%; aspect-ratio: 720 / 408; border-radius: 12px; overflow: hidden; border: 4px solid #f4ead0; box-shadow: 0 0 0 3px #3c2c18, inset 0 0 0 2px rgba(0, 0, 0, .25), 0 12px 30px rgba(0, 0, 0, .45); } /* (a framed map) */
.sm-map canvas { position: absolute; inset: 0; width: 100%; height: 100%; image-rendering: pixelated; }
.sm-nodes { position: absolute; inset: 0; }
.sm-node {
  position: absolute; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: 2px;
  background: none !important; border: 0 !important; box-shadow: none !important; padding: 0; cursor: pointer;
}
.sm-dot {
  display: grid; place-items: center; width: clamp(24px, 4.2vw, 44px); height: clamp(24px, 4.2vw, 44px); border-radius: 50%;
  font-weight: 900; font-size: clamp(11px, 1.6vw, 18px); color: #fff; background: radial-gradient(circle at 35% 30%, #8a96b8, #4c5878);
  border: 3px solid #e8ecf8; box-shadow: 0 3px 0 rgba(0, 0, 0, .35), 0 0 0 2px rgba(0, 0, 0, .35);
}
.sm-node.open .sm-dot { background: radial-gradient(circle at 35% 30%, #6aa8ff, #2a5cc8); }
.sm-node.cleared .sm-dot { background: radial-gradient(circle at 35% 30%, #ffe27a, #d89a00); color: #4a3000; }
.sm-node.locked .sm-dot { filter: grayscale(.4); opacity: .85; }
.sm-node.here .sm-dot { box-shadow: 0 0 0 4px #ffcb05, 0 0 14px 4px rgba(255, 203, 5, .7); animation: sm-pulse 1.4s ease-in-out infinite; }
.sm-node.finale { cursor: default; }
@keyframes sm-pulse { 50% { box-shadow: 0 0 0 6px #ffcb05, 0 0 20px 8px rgba(255, 203, 5, .55); } }
.sm-label {
  padding: 1px 8px; border-radius: 99px; white-space: nowrap; font-size: clamp(9px, 1.15vw, 13px); font-weight: 800; color: #fff;
  background: rgba(20, 28, 56, .82); border: 1px solid rgba(255, 255, 255, .25);
}
.sm-node:hover:not(.locked) .sm-dot { filter: brightness(1.12); }
.sm-node:active:not(:disabled) { transform: translate(-50%, -50%); }
.sm-node.shake { animation: sm-shake .35s; }
@keyframes sm-shake { 25% { margin-left: -4px; } 75% { margin-left: 4px; } }
.sm-panel .chapter-card { margin: 0; }
@media (max-width: 860px) { .sm-label { display: none; } .sm-node.here .sm-label { display: block; } }
.sm-panel .chapter-card { display: grid; grid-template-columns: minmax(0, 340px) 1fr; column-gap: 18px; row-gap: 4px; align-items: start; padding: 14px; }
.sm-panel .chapter-card > canvas { grid-column: 1; grid-row: 1 / span 6; width: 100%; height: auto; border-radius: 10px; image-rendering: pixelated; }
.sm-panel .chapter-card > :not(canvas) { grid-column: 2; }
@media (max-width: 860px) { .sm-panel .chapter-card { grid-template-columns: 1fr; } .sm-panel .chapter-card > canvas { grid-row: auto; } .sm-panel .chapter-card > :not(canvas) { grid-column: 1; } }
body.ui2 .play-story { background: linear-gradient(180deg, #ffd84a, #f0a800) !important; border-color: #d89400 !important; color: #2a1d00 !important; box-shadow: 0 3px 0 #a87400 !important; }
body.ui2 .play-story .pa-title, body.ui2 .play-story .pa-sub { color: #2a1d00 !important; opacity: 1; }
body.ui2 .play-story .pa-team { background: rgba(255, 255, 255, .35); border-radius: 8px; }
body.ui2 .play-story:disabled { filter: grayscale(.8); opacity: .55; }

/* ---------- Halloween (body.halloween is set by the game in October) ---------- */
body.ui2.halloween {
  --glass: rgba(26, 12, 40, .93); --glass-2: rgba(40, 18, 58, .95); --line: rgba(255, 140, 40, .32);
  --panel: #241238; --panel-2: #321a4c; --border: #4c2c6c; --gold: #ff9a2a; --gold-2: #e8620c;
}
body.ui2.halloween header { background: linear-gradient(180deg, rgba(22, 8, 34, .97), rgba(36, 14, 52, .95)); border-bottom: 2px solid rgba(255, 140, 40, .55); }
body.ui2.halloween .brand { color: #ff9a2a; text-shadow: 2px 2px 0 #4c1c6c, 3px 3px 0 rgba(0, 0, 0, .5); }
body.ui2.halloween .u2-head { background: linear-gradient(180deg, rgba(64, 26, 92, .95), rgba(40, 16, 60, .95)); border-bottom: 2px solid rgba(255, 140, 40, .5); }
body.ui2.halloween .u2-ball { background: radial-gradient(circle at 35% 35%, #ffb04c, #e8620c 70%); box-shadow: inset 0 0 0 2px #7c2c08; border-radius: 45%; }
body.ui2.halloween .u2-ball::after { inset: -4px auto auto 7px; width: 4px; height: 5px; border-radius: 1px; background: #4c7c2c; box-shadow: none; }
body.ui2.halloween button.primary, body.ui2.halloween .u2-cta, body.ui2.halloween .play-story {
  background: linear-gradient(180deg, #ffb04c, #e8620c) !important; border-color: #c04c08 !important; color: #2a0c00 !important; box-shadow: 0 3px 0 #8c3404 !important;
}
body.ui2.halloween .tr-chip.on, body.ui2.halloween .mart-tabs button.active, body.ui2.halloween .lb-tabs button.active, body.ui2.halloween .coll-gen button.active { background: #ff9a2a; border-color: #ff9a2a; color: #2a0c00; }
body.ui2.halloween .u2-welcome { background: linear-gradient(180deg, #fff6e8, #ffe2c0); border-color: #f4b878; }
body.ui2.halloween .u2-gift { background: linear-gradient(180deg, #ffe8cc, #ffc890); border-color: #f09848; }
body.ui2.halloween .u2-coins { color: #ffc070; background: rgba(255, 140, 40, .12); border-color: rgba(255, 140, 40, .45); }
body.ui2.halloween .mode-card:hover, body.ui2.halloween .u2-feature:hover, body.ui2.halloween .u2-row:hover { border-color: #ff9a2a !important; }
body.ui2.halloween .sm-map { border-color: #ffd9a8; box-shadow: 0 0 0 3px #3c1c08, 0 12px 30px rgba(0, 0, 0, .5); }
/* cobwebs in the top corner of each panel */
body.ui2.halloween .u2-panel, body.ui2.halloween .view:not(#view-menu) { position: relative; }
body.ui2.halloween .u2-panel::after, body.ui2.halloween .view:not(#view-menu)::after {
  content: ""; position: absolute; top: 0; right: 0; width: 54px; height: 54px; pointer-events: none; opacity: .4; border-top-right-radius: var(--radius);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 54 54' fill='none' stroke='%23e8dcf8' stroke-width='1'%3E%3Cpath d='M54 0 L0 54 M54 0 L20 54 M54 0 L40 54 M54 0 L0 30 M54 0 L0 12'/%3E%3Cpath d='M44 0 Q46 8 54 10 M32 0 Q36 18 54 22 M20 0 Q26 28 54 34 M8 0 Q16 38 54 46'/%3E%3C/svg%3E") no-repeat;
}
/* bats flapping across the screen (transforms only, so it stays smooth) */
.u2-bats { position: fixed; inset: 0; pointer-events: none; z-index: 5; overflow: hidden; }
body.in-game .u2-bats { display: none; }
.u2-bats span { position: absolute; left: -60px; font-size: 26px; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .5)); animation: u2-bat 26s linear infinite; will-change: transform; }
.u2-bats span:nth-child(2) { top: 18%; font-size: 20px; animation-duration: 32s; animation-delay: -9s; }
.u2-bats span:nth-child(3) { top: 46%; font-size: 30px; animation-duration: 38s; animation-delay: -21s; }
.u2-bats span:nth-child(4) { top: 72%; font-size: 18px; animation-duration: 29s; animation-delay: -4s; }
.u2-bats span:nth-child(1) { top: 9%; }
@keyframes u2-bat {
  0% { transform: translate(0, 0) scaleX(-1); } 25% { transform: translate(28vw, -40px) scaleX(-1); } 50% { transform: translate(55vw, 20px) scaleX(-1); }
  75% { transform: translate(82vw, -30px) scaleX(-1); } 100% { transform: translate(calc(100vw + 120px), 10px) scaleX(-1); }
}
@media (prefers-reduced-motion: reduce) { .u2-bats { display: none; } }

/* ---------- Autumn (body.autumn is set by the game in November) ---------- */
body.ui2.autumn {
  --glass: rgba(38, 20, 12, .93); --glass-2: rgba(54, 28, 16, .95); --line: rgba(240, 150, 50, .3);
  --panel: #2e1a10; --panel-2: #3e2416; --border: #6a3c1e; --gold: #f0a030; --gold-2: #d0601c;
}
body.ui2.autumn header { background: linear-gradient(180deg, rgba(40, 20, 10, .97), rgba(58, 30, 14, .95)); border-bottom: 2px solid rgba(240, 150, 50, .55); }
body.ui2.autumn .brand { color: #f0a030; text-shadow: 2px 2px 0 #7a2a10, 3px 3px 0 rgba(0, 0, 0, .5); }
body.ui2.autumn .u2-head { background: linear-gradient(180deg, rgba(110, 50, 20, .95), rgba(70, 32, 14, .95)); border-bottom: 2px solid rgba(240, 150, 50, .5); }
/* the section ball becomes an acorn */
body.ui2.autumn .u2-ball { background: radial-gradient(circle at 35% 70%, #d08a4a, #8a4a1c 70%); box-shadow: inset 0 0 0 2px #4a220a; border-radius: 50% 50% 46% 46% / 40% 40% 60% 60%; }
body.ui2.autumn .u2-ball::after { inset: -2px -1px auto -1px; width: auto; height: 6px; border-radius: 5px 5px 2px 2px; background: repeating-linear-gradient(90deg, #6a3a14 0 2px, #8a5424 2px 4px); box-shadow: none; }
body.ui2.autumn button.primary, body.ui2.autumn .u2-cta, body.ui2.autumn .play-story {
  background: linear-gradient(180deg, #ffb84a, #e0641c) !important; border-color: #b04a10 !important; color: #2a0e00 !important; box-shadow: 0 3px 0 #7a300a !important;
}
body.ui2.autumn .tr-chip.on, body.ui2.autumn .mart-tabs button.active, body.ui2.autumn .lb-tabs button.active, body.ui2.autumn .coll-gen button.active { background: #f0a030; border-color: #f0a030; color: #2a0e00; }
body.ui2.autumn .u2-welcome { background: linear-gradient(180deg, #fff8e8, #ffe6bc); border-color: #f0b46a; }
body.ui2.autumn .u2-gift { background: linear-gradient(180deg, #ffecc8, #ffc880); border-color: #e8963a; }
body.ui2.autumn .u2-coins { color: #ffc860; background: rgba(240, 150, 50, .12); border-color: rgba(240, 150, 50, .45); }
body.ui2.autumn .mode-card:hover, body.ui2.autumn .u2-feature:hover, body.ui2.autumn .u2-row:hover { border-color: #f0a030 !important; }
body.ui2.autumn .sm-map { border-color: #ffd9a0; box-shadow: 0 0 0 3px #3a1c08, 0 12px 30px rgba(0, 0, 0, .5); }
body.ui2.autumn .fav-star.on { color: #f0a030; }
body.ui2.autumn .panel .controls > .auto:has(input:checked) { border-color: #f0a030; color: #f0a030; }
body.autumn .mg-box { border-color: #f0a030 !important; background: linear-gradient(180deg, #2e1a10, #1e1008) !important; }
/* a sprig of maple leaves in the top corner of each panel */
body.ui2.autumn .u2-panel, body.ui2.autumn .view:not(#view-menu) { position: relative; }
body.ui2.autumn .u2-panel::after, body.ui2.autumn .view:not(#view-menu)::after {
  content: ""; position: absolute; top: -6px; right: -4px; width: 58px; height: 50px; pointer-events: none; opacity: .9; transform-origin: 90% 10%; animation: u2-sprig 5s ease-in-out infinite;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 58 50'%3E%3Cpath d='M56 2 Q40 10 22 30' stroke='%235a2a0a' stroke-width='2' fill='none'/%3E%3Cpath fill='%23e85a20' d='M30 22l3-7 2 4 4-3-1 6 5 1-5 3 2 3-5-1-1 4-3-4-3 3 0-5-4-1 4-2-2-3z'/%3E%3Cpath fill='%23f0a030' d='M44 10l2-6 2 3 3-2v5l4 1-4 2 1 3-4-1-1 3-2-3-3 2 1-4-3-1 3-2z'/%3E%3Cpath fill='%23f8d048' d='M18 34l2-5 1 3 3-2-1 4 4 1-4 2 1 2-3-1-1 3-2-3-2 2 0-3-3-1 3-1z'/%3E%3C/svg%3E") no-repeat;
}
@keyframes u2-sprig { 50% { transform: rotate(-6deg); } }
/* leaves falling across the screen, tumbling as they go (transforms only) */
.u2-leaves { position: fixed; inset: 0; pointer-events: none; z-index: 5; overflow: hidden; }
body.in-game .u2-leaves { display: none; }
.u2-leaves span { position: absolute; top: -40px; left: var(--x); font-size: var(--s); filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .4)); animation: u2-leaf var(--t) linear infinite; animation-delay: var(--d); will-change: transform; }
@keyframes u2-leaf {
  0% { transform: translate(0, 0) rotate(0deg) rotateY(0deg); } 25% { transform: translate(40px, 26vh) rotate(90deg) rotateY(180deg); }
  50% { transform: translate(-20px, 52vh) rotate(180deg) rotateY(360deg); } 75% { transform: translate(50px, 78vh) rotate(270deg) rotateY(540deg); }
  100% { transform: translate(10px, calc(100vh + 80px)) rotate(360deg) rotateY(720deg); }
}
@media (prefers-reduced-motion: reduce) { .u2-leaves { display: none; } body.ui2.autumn .u2-panel::after, body.ui2.autumn .view:not(#view-menu)::after { animation: none; } }

/* ---------- Favourites (★) ---------- */
.fav-star { position: absolute; bottom: 3px; right: 5px; z-index: 2; font-style: normal; font-size: 15px; line-height: 1; color: rgba(255, 255, 255, .35); cursor: pointer; text-shadow: 0 1px 2px rgba(0, 0, 0, .6); transition: transform .12s; }
.fav-star:hover { transform: scale(1.25); color: rgba(255, 216, 74, .8); }
.fav-star.on { color: #ffd84a; }
.pi-head .fav-star { position: static; font-size: 20px; vertical-align: middle; margin-left: 4px; }
.give-mon .fav-star { top: 3px; left: 5px; right: auto; bottom: auto; }
body.ui2.halloween .fav-star.on { color: #ff9a2a; }
#unmaxed-btn.active { background: #ffd84a; color: #2a2000; border-color: #ffd84a; }

/* ---------- In-game controls: two tidy rows instead of one overflowing strip ----------
   Row 1: Start wave, speed, pause. Row 2: restart, recall, unmaxed, stats, Auto (equal widths). */
body.ui2 .panel .controls { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 6px; align-items: stretch; }
body.ui2.in-game .panel .controls > button, body.ui2 .panel .controls > .auto {
  grid-column: span 2; min-width: 0; height: 36px; padding: 0 4px; display: flex; align-items: center; justify-content: center;
  white-space: nowrap; overflow: hidden; font-size: 15px; line-height: 1;
}
body.ui2.in-game .panel .controls > #start-btn { grid-column: span 6; font-size: 15px; font-weight: 900; }
body.ui2 .panel .controls > .auto { gap: 5px; border-radius: 8px; border: 1px solid var(--border); background: var(--panel-2); color: var(--text); font-size: 13px; font-weight: 700; }
body.ui2 .panel .controls > .auto input { margin: 0; width: 14px; height: 14px; }
body.ui2 .panel .controls > .auto:has(input:checked) { border-color: #ffd84a; color: #ffd84a; }
body.ui2.halloween .panel .controls > .auto:has(input:checked) { border-color: #ff9a2a; color: #ff9a2a; }
body.ui2.in-game.portrait-board .panel .controls { gap: 5px; }
body.ui2.in-game.portrait-board .panel .controls > button, body.ui2.in-game.portrait-board .panel .controls > .auto { height: 34px; }
@media (max-height: 700px) {
  body.ui2.in-game.portrait-board .panel .controls > button, body.ui2.in-game.portrait-board .panel .controls > .auto { height: 30px; }
}
@media (orientation: landscape) and (max-height: 540px) {
  body.ui2 .panel .controls { gap: 4px; }
  body.ui2.in-game .panel .controls > button, body.ui2 .panel .controls > .auto { height: 30px; font-size: 13px; }
  body.ui2.in-game .panel .controls > #start-btn { font-size: 13px; }
}

/* ---------- Mini Games (ui/minigames.js) ---------- */
.mg-box { width: min(560px, 100%); max-height: 92vh; overflow-y: auto; padding: 18px 18px 20px !important; background: linear-gradient(180deg, #1c2236, #141a2a) !important; border: 2px solid #ffd84a !important; color: #e8ecf8; }
body.halloween .mg-box { border-color: #ff9a2a !important; background: linear-gradient(180deg, #24132f, #170c22) !important; }
.mg-title { font-family: "Press Start 2P", monospace; font-size: 15px; color: #ffd84a; margin: 4px 0 8px; letter-spacing: .5px; text-shadow: 2px 2px 0 rgba(0, 0, 0, .5); }
.mg-title small { font-size: 9px; color: #aab4d0; margin-left: 6px; }
.mg-hub-head { display: flex; align-items: center; gap: 12px; padding: 4px 34px 12px 2px; border-bottom: 2px solid rgba(255, 216, 74, .25); margin-bottom: 12px; }
.mg-hub-head small { color: #aab4d0; font-size: 12px; }
.mg-hub-icon { font-size: 30px; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .5)); }
.mg-list { display: grid; gap: 10px; }
.mg-card { display: flex; align-items: center; gap: 12px; text-align: left; padding: 12px; border-radius: 10px; border: 1px solid rgba(255, 255, 255, .1); border-left: 4px solid var(--mg);
  background: linear-gradient(90deg, color-mix(in srgb, var(--mg) 14%, transparent), rgba(255, 255, 255, .03)); color: inherit; cursor: pointer; transition: transform .12s, border-color .12s; }
.mg-card:hover { transform: translateX(3px); border-color: var(--mg); }
.mg-icon { flex: 0 0 52px; height: 52px; display: grid; place-items: center; font-size: 26px; border-radius: 8px; background: rgba(0, 0, 0, .35); border: 2px solid color-mix(in srgb, var(--mg) 55%, transparent); }
.mg-body { flex: 1; display: grid; gap: 4px; min-width: 0; }
.mg-name { font-family: "Press Start 2P", monospace; font-size: 11px; color: #fff; line-height: 1.5; }
.mg-new { font-style: normal; font-size: 8px; background: #e5534b; color: #fff; padding: 2px 4px; border-radius: 3px; margin-left: 4px; vertical-align: 2px; }
.mg-desc { font-size: 12.5px; color: #b8c2dc; }
.mg-tags { display: flex; gap: 6px; flex-wrap: wrap; }
.mg-tag, .mg-coin { font-size: 11px; padding: 2px 7px; border-radius: 4px; border: 1px solid color-mix(in srgb, var(--mg) 60%, transparent); color: var(--mg); background: rgba(0, 0, 0, .25); }
.mg-coin { color: #ffd84a; border-color: rgba(255, 216, 74, .45); }
.mg-status { justify-self: start; font-size: 11.5px; font-weight: 700; padding: 3px 8px; border-radius: 5px; }
.mg-status.avail { background: rgba(99, 144, 240, .18); color: #a8c4ff; border: 1px solid rgba(99, 144, 240, .45); }
.mg-status.started { background: rgba(255, 216, 74, .14); color: #ffe48a; border: 1px solid rgba(255, 216, 74, .4); }
.mg-status.done { background: rgba(76, 217, 100, .14); color: #8af0a0; border: 1px solid rgba(76, 217, 100, .4); }
.mg-arrow { font-size: 22px; color: var(--mg); }
.mg-back { background: none !important; border: 0 !important; box-shadow: none !important; color: #aab4d0 !important; padding: 0 0 6px !important; font-size: 13px; cursor: pointer; }
.mg-back:hover { color: #fff; }
.mg-help { font-size: 13px; color: #b8c2dc; margin: 0 0 10px; }
.mg-form { display: flex; gap: 8px; margin-top: 10px; }
.mg-form input { flex: 1; min-width: 0; padding: 10px 12px; border-radius: 8px; border: 2px solid rgba(255, 255, 255, .15); background: rgba(0, 0, 0, .35); color: #fff; font-size: 15px; }
.mg-msg { min-height: 18px; font-size: 12.5px; color: #ff9a9a; margin-top: 4px; }
.mg-result { display: flex; gap: 12px; align-items: center; padding: 12px; margin-top: 10px; border-radius: 10px; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .12); font-size: 14px; }
.mg-result.ok { border-color: rgba(76, 217, 100, .5); }
.mg-result.bad { border-color: rgba(229, 83, 75, .5); }
.mg-result img { width: 72px; height: 72px; image-rendering: pixelated; }
.mg-result small { color: #aab4d0; }
.mg-coins { color: #ffd84a; font-weight: 700; margin: 4px 0; }
.mg-big { font-family: "Press Start 2P", monospace; font-size: 26px; color: #ffd84a; margin-bottom: 6px; }
.mg-actions { display: flex; gap: 8px; justify-content: center; margin-top: 10px; flex-wrap: wrap; }
.mg-none { font-size: 11px; color: #7c86a0; }
/* Wordle */
.wd-grid { display: grid; gap: 4px; overflow-x: auto; }
.wd-row { display: grid; grid-template-columns: 1.6fr repeat(7, 1fr); gap: 4px; min-width: 500px; }
.wd-headrow div { font-size: 10px; color: #aab4d0; text-align: center; text-transform: uppercase; letter-spacing: .5px; }
.wd-cell { display: grid; place-items: center; text-align: center; min-height: 44px; padding: 2px; border-radius: 6px; font-size: 11.5px; font-weight: 700; background: rgba(255, 255, 255, .06); }
.wd-row:last-child:not(.wd-headrow) .wd-cell { animation: wd-flip .35s ease both; }
.wd-cell img { width: 34px; height: 34px; image-rendering: pixelated; }
.wd-cell:first-child { grid-template-columns: auto 1fr; justify-items: start; font-size: 11px; }
.wd-cell.ok { background: #2f8f46; }
.wd-cell.near { background: #b08a1c; }
.wd-cell.bad { background: #8c2f34; }
.wd-cell .badge { font-size: 10px; }
@keyframes wd-flip { from { transform: rotateX(90deg); } to { transform: none; } }
/* Higher or Lower */
.hol-top { display: flex; justify-content: space-between; font-size: 15px; }
.hol-bar { height: 8px; border-radius: 4px; background: rgba(255, 255, 255, .1); overflow: hidden; margin: 6px 0 10px; }
.hol-bar i { display: block; height: 100%; background: linear-gradient(90deg, #ff9a2a, #ffd84a); transition: width .1s linear; }
.hol-stat { text-align: center; font-family: "Press Start 2P", monospace; font-size: 12px; color: #ff9a2a; margin-bottom: 8px; }
.hol-pair { display: flex; align-items: center; justify-content: center; gap: 10px; }
.hol-card { flex: 1; display: grid; justify-items: center; gap: 2px; padding: 10px; border-radius: 10px; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .12); }
.hol-card img { width: 96px; height: 96px; image-rendering: pixelated; }
.hol-val { font-family: "Press Start 2P", monospace; font-size: 18px; color: #fff; margin-top: 4px; }
.hol-val .ok { color: #6ee08a; }
.hol-val .bad { color: #ff7a7a; }
.hol-vs { font-family: "Press Start 2P", monospace; color: #ffd84a; }
/* Zoom */
.zm-view { width: 220px; height: 220px; margin: 0 auto; overflow: hidden; border-radius: 12px; border: 3px solid #4cc3ff; background: radial-gradient(circle, #f4f6ff, #c8d4ee); }
.zm-view canvas { display: block; width: 100%; height: 100%; image-rendering: pixelated; -webkit-user-drag: none; user-select: none; }
.zm-tries { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; margin-top: 8px; }
.zm-tries span { font-size: 12px; padding: 2px 8px; border-radius: 4px; }
.zm-tries .bad { background: #8c2f34; }
.zm-tries .ok { background: #2f8f46; }
/* PokéSize Up */
.sz-stage { position: relative; height: 240px; display: flex; align-items: flex-end; justify-content: center; gap: 28px; padding-bottom: 14px; border-radius: 12px;
  background: linear-gradient(180deg, #8ec8f0 0%, #c8e8ff 70%, #7cc458 70%); overflow: hidden; }
.sz-floor { position: absolute; left: 0; right: 0; bottom: 0; height: 14px; background: #5aa040; }
.sz-trainer { width: auto; position: relative; z-index: 1; flex: 0 0 auto; }
.sz-mon { position: relative; z-index: 1; display: flex; align-items: flex-end; }
.sz-mon img { image-rendering: pixelated; margin-bottom: -18%; max-height: 236px; transition: height .15s; }
.sz-real { position: absolute; right: -16px; bottom: 0; width: 4px; background: #e5534b; border-radius: 2px; }
.sz-real span { position: absolute; top: -18px; left: 50%; transform: translateX(-50%); white-space: nowrap; font-size: 11px; font-weight: 700; color: #fff; background: #e5534b; padding: 1px 5px; border-radius: 4px; }
.sz-control { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.sz-control input { flex: 1; accent-color: #ff6aa8; }
.sz-control b { min-width: 58px; text-align: right; font-family: "Press Start 2P", monospace; font-size: 11px; color: #ff6aa8; }
.sz-review { display: grid; grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); gap: 6px; margin-top: 10px; }
.sz-review div { display: grid; justify-items: center; font-size: 11px; text-align: center; padding: 4px; border-radius: 8px; background: rgba(255, 255, 255, .05); }
.sz-review img { width: 56px; height: 56px; image-rendering: pixelated; }
.sz-review small { color: #aab4d0; }
.u2-mini .u2-ri { background: linear-gradient(135deg, #ff6aa8, #ffd84a); }
@media (max-width: 520px) { .mg-name { font-size: 10px; } .mg-icon { flex-basis: 44px; height: 44px; font-size: 22px; } .hol-card img { width: 72px; height: 72px; } }

/* ---------- Challenges panel: the Weekly card, sections, Monotype and the minigames row ---------- */
.u2-weekly { position: relative; display: grid; grid-template-columns: 1fr auto; grid-template-areas: 'tag tag' 'text art' 'foot foot'; gap: 4px 10px; width: 100%; min-height: 150px;
  padding: 12px 14px; margin: 2px 0 10px; text-align: left; color: #fff; border-radius: 14px; overflow: hidden; cursor: pointer; border: 2px solid #ffd84a;
  background: linear-gradient(100deg, rgba(14, 18, 40, .92) 30%, rgba(14, 18, 40, .55) 70%, rgba(14, 18, 40, .25)), var(--wk-art) center / cover;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .35); transition: transform .15s, box-shadow .15s; }
.u2-weekly:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(0, 0, 0, .45); }
.u2-weekly.event { border-color: #ff9a2a; background: radial-gradient(circle at 85% 45%, rgba(160, 60, 255, .45), transparent 55%),
  linear-gradient(100deg, rgba(26, 8, 40, .95) 30%, rgba(26, 8, 40, .6) 70%, rgba(26, 8, 40, .3)), var(--wk-art) center / cover;
  box-shadow: 0 0 0 2px rgba(255, 154, 42, .25), 0 0 22px rgba(160, 60, 255, .35), 0 6px 18px rgba(0, 0, 0, .4); animation: u2-wk-glow 3s ease-in-out infinite; }
@keyframes u2-wk-glow { 50% { box-shadow: 0 0 0 2px rgba(255, 154, 42, .45), 0 0 32px rgba(160, 60, 255, .55), 0 6px 18px rgba(0, 0, 0, .4); } }
.u2-wk-tag { grid-area: tag; justify-self: start; font-size: 10.5px; font-weight: 900; letter-spacing: .6px; padding: 3px 9px; border-radius: 99px; background: #ffd84a; color: #2a2000; }
.u2-weekly.event .u2-wk-tag { background: linear-gradient(90deg, #ff9a2a, #c77dff); color: #fff; }
.u2-wk-text { grid-area: text; align-self: center; display: grid; gap: 3px; }
.u2-wk-text b { font-family: "Press Start 2P", monospace; font-size: 13px; line-height: 1.45; color: #ffe48a; text-shadow: 2px 2px 0 rgba(0, 0, 0, .55); }
.u2-weekly.event .u2-wk-text b { color: #ffb066; }
.u2-wk-text small { font-size: 12px; color: #dfe5ff; }
.u2-wk-boss { grid-area: art; width: 92px; height: 92px; image-rendering: pixelated; align-self: center; filter: drop-shadow(0 0 10px rgba(180, 90, 255, .9)) drop-shadow(0 3px 2px rgba(0, 0, 0, .6));
  animation: u2-wk-float 3.2s ease-in-out infinite; }
@keyframes u2-wk-float { 50% { transform: translateY(-6px); } }
.u2-wk-team { grid-area: art; align-self: center; display: grid; grid-template-columns: repeat(2, 40px); }
.u2-wk-team img { width: 40px; height: 40px; image-rendering: pixelated; filter: drop-shadow(0 2px 1px rgba(0, 0, 0, .6)); }
.u2-weekly:has(.u2-wk-rewards) { grid-template-areas: 'tag tag' 'text art' 'rew rew' 'foot foot'; }
.u2-wk-rewards { grid-area: rew; display: flex; flex-wrap: wrap; gap: 4px; }
.u2-wk-rewards i { font-style: normal; font-size: 11px; font-weight: 800; padding: 2px 8px; border-radius: 99px; color: #fff; background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .28); }
/* ☄️ The Deoxys week: deep space, Deoxys's orange and cyan. */
.u2-weekly.ev-deoxys { border-color: #5ad8ff; background: radial-gradient(circle at 85% 45%, rgba(255, 106, 58, .45), transparent 50%), radial-gradient(circle at 60% 0%, rgba(90, 216, 255, .3), transparent 45%),
  linear-gradient(100deg, rgba(8, 10, 40, .95) 30%, rgba(8, 10, 40, .6) 70%, rgba(8, 10, 40, .3)), var(--wk-art) center / cover; animation-name: u2-wk-glow-cosmic; }
@keyframes u2-wk-glow-cosmic { 0%, 100% { box-shadow: 0 0 0 2px rgba(90, 216, 255, .3), 0 0 22px rgba(255, 106, 58, .35), 0 6px 18px rgba(0, 0, 0, .4); }
  50% { box-shadow: 0 0 0 2px rgba(90, 216, 255, .55), 0 0 34px rgba(90, 160, 255, .55), 0 6px 18px rgba(0, 0, 0, .4); } }
.u2-weekly.ev-deoxys .u2-wk-tag { background: linear-gradient(90deg, #ff6a3a, #8a3ae0, #2ad8ff); }
.u2-weekly.ev-deoxys .u2-wk-text b { color: #ffb08a; }
.u2-weekly.ev-deoxys .u2-wk-boss { filter: drop-shadow(0 0 10px rgba(255, 106, 58, .85)) drop-shadow(0 0 4px rgba(90, 216, 255, .9)) drop-shadow(0 3px 2px rgba(0, 0, 0, .6)); }
.u2-weekly.ev-deoxys .u2-wk-rewards i { background: rgba(90, 216, 255, .14); border-color: rgba(90, 216, 255, .45); }
.u2-weekly.ev-deoxys .u2-wk-play { background: linear-gradient(180deg, #ff9a5a, #e8420c); }
.u2-ani { object-fit: contain; image-rendering: pixelated; }
.u2-wk-foot { grid-area: foot; display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 12px; color: #ffe9b0; font-weight: 700; }
.u2-wk-play { padding: 6px 14px; border-radius: 99px; background: linear-gradient(180deg, #ffd84a, #f0a800); color: #2a2000; font-weight: 900; box-shadow: 0 2px 0 #9a6a00; }
.u2-weekly.event .u2-wk-play { background: linear-gradient(180deg, #ffb04c, #e8620c); color: #fff; box-shadow: 0 2px 0 #8c3404; }
.u2-wk-soon { display: flex; align-items: center; gap: 10px; margin: -4px 0 10px; padding: 8px 12px; border-radius: 12px; color: #fff;
  background: linear-gradient(90deg, rgba(160, 60, 255, .35), rgba(255, 140, 40, .25)); border: 1px dashed rgba(255, 170, 90, .7); }
.u2-wk-soon img { width: 44px; height: 44px; image-rendering: pixelated; filter: drop-shadow(0 0 6px rgba(180, 90, 255, .9)); }
.u2-wk-soon span { display: grid; }
.u2-wk-soon b { font-size: 13px; }
.u2-wk-soon small { font-size: 11.5px; color: #e7dcff; }
.u2-sec { margin: 6px 2px 6px; font-size: 11px; font-weight: 900; letter-spacing: 1px; text-transform: uppercase; color: rgba(255, 255, 255, .72); }
.u2-type { display: grid; place-items: center; width: 100%; height: 100%; border-radius: 10px; color: #fff; font-size: 20px; font-weight: 900; text-shadow: 0 1px 1px rgba(0, 0, 0, .5); letter-spacing: .5px; }
.u2-mono .u2-ri { padding: 0; overflow: hidden; }
.u2-type .type-ico { font-size: 40px; } /* (the real type icon fills the square) */
.u2-mini-dots { display: flex; gap: 4px; margin-top: 4px; }
.u2-mini-dots i { width: 9px; height: 9px; border-radius: 50%; background: #d4dbf2; }
.u2-mini-dots i.half { background: #ffd84a; }
.u2-mini-dots i.on { background: #22c55e; }
.ch-soon { display: flex; align-items: center; gap: 12px; padding: 10px 14px; margin: -2px 0 4px; border-radius: 12px; color: #fff; border: 1px dashed rgba(255, 170, 90, .75);
  background: linear-gradient(90deg, rgba(160, 60, 255, .35), rgba(255, 140, 40, .22)); }
.ch-soon img { width: 56px; height: 56px; image-rendering: pixelated; filter: drop-shadow(0 0 8px rgba(180, 90, 255, .9)); }
.ch-soon div { display: grid; gap: 2px; }
.ch-soon span { font-size: 13px; color: #e7dcff; }

/* While loading: the home screen and the header buttons stay hidden until ui2.js has built them (it adds u2-ready), so the
   page never flashes the old layout or jumps around. (index.html shows them anyway after a few seconds.) */
body.ui2:not(.u2-ready) #view-menu, body.ui2:not(.u2-ready) .header-actions { visibility: hidden; }

/* ---------- ⚙️ Settings (ui/settings.js) ---------- */
body.ui2 .u2-settings-btn { flex: none; display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 10px; font-size: 14px;
  color: #d9e1ff; background: rgba(255, 255, 255, .08); border: 1px solid var(--line); box-shadow: none !important; }
body.ui2 .u2-settings-btn:hover { background: rgba(255, 255, 255, .14); }
@media (max-width: 900px) { body.ui2 .u2-settings-btn .btn-label { display: none; } body.ui2 .u2-settings-btn { padding: 6px 10px; font-size: 16px; } }
/* Phones: the Settings button sits at the end of the row of header buttons (which scrolls sideways), always on screen. */
@media (max-width: 860px) { body.ui2 .header-actions { flex: 1 1 calc(100% - 56px); min-width: 0; } }
body.ui2.in-game .u2-settings-btn { order: 0; }
.set-box { width: min(560px, 100%); max-height: 92vh; overflow-y: auto; }
.set-tabs { display: flex; gap: 6px; margin: 4px 0 12px; }
.set-tabs button { flex: 1; padding: 8px; border-radius: 10px; background: rgba(255, 255, 255, .06); border: 1px solid var(--line); color: var(--text); }
.set-tabs button.active { background: var(--gold); border-color: var(--gold); color: #1a1a1a; }
.set-group { margin-bottom: 12px; padding: 4px 12px; border-radius: 12px; background: rgba(255, 255, 255, .04); border: 1px solid var(--line); }
.set-group h4 { margin: 8px 0 2px; font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: var(--muted); }
.set-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); cursor: pointer; }
.set-group h4 + .set-row { border-top: 0; }
.set-row span { display: grid; gap: 2px; }
.set-row b { font-size: 14.5px; color: var(--text); }
.set-row small { font-size: 12px; color: var(--muted); }
.set-row input[type=checkbox] { display: none; }
.set-switch { flex: none; position: relative; width: 44px; height: 24px; border-radius: 99px; background: #5a6488; transition: background .15s; }
.set-switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: transform .15s; box-shadow: 0 1px 3px rgba(0, 0, 0, .4); }
.set-row input:checked + .set-switch { background: #22c55e; }
.set-row input:checked + .set-switch::after { transform: translateX(20px); }
.set-seg { flex: none; display: flex; border-radius: 10px; overflow: hidden; border: 1px solid var(--line); }
.set-seg button { padding: 7px 11px; border: 0; border-radius: 0; background: rgba(255, 255, 255, .05); color: var(--text); font-size: 13px; box-shadow: none !important; }
.set-seg button.on { background: var(--gold); color: #1a1a1a; }
.set-btn { padding: 7px 12px; border-radius: 10px; }
.set-note { font-size: 12px; color: var(--muted); text-align: center; margin: 4px 0 0; }
#set-keys .hotkeys-help { margin: 0; }
#set-keys .hotkeys-help > summary { display: none; }
@media (max-width: 520px) { .set-row { flex-wrap: wrap; } .set-seg button { padding: 7px 9px; } }

/* Reduce motion: no looping or decorative animation in the menus. */
body.reduce-motion .u2-bats, body.reduce-motion .u2-weekly, body.reduce-motion .u2-wk-boss, body.reduce-motion .wd-cell { animation: none !important; }
body.reduce-motion .u2-bats { display: none; }
body.reduce-motion * { transition-duration: 0s !important; }

/* ---------- ☀️ Light theme ---------- */
body.ui2.light {
  --bg: #e6ecfa; --panel: #ffffff; --panel-2: #eef2fc; --border: #c6d1f0; --text: #1a2550; --muted: #5a6890;
  --navy: #dfe7ff; --navy-2: #cfdaf8; --glass: rgba(255, 255, 255, .93); --glass-2: rgba(244, 247, 255, .95); --line: rgba(60, 90, 170, .2);
  color: var(--text);
}
body.ui2.light:not(.in-game)::before { background: radial-gradient(ellipse at 50% 20%, transparent 45%, rgba(220, 230, 250, .5) 100%); }
body.ui2.light header { background: linear-gradient(180deg, rgba(255, 255, 255, .97), rgba(240, 244, 255, .96)); border-bottom: 1px solid var(--border); box-shadow: 0 4px 14px rgba(40, 60, 120, .15); }
body.ui2.light .brand { color: #2a4aa8; text-shadow: 2px 2px 0 #ffcb05; }
body.ui2.light .header-actions > button, body.ui2.light .header-actions > .u2-nav, body.ui2.light .u2-settings-btn { color: #2a3a78; }
body.ui2.light .header-actions > button:hover:not(:disabled), body.ui2.light .u2-settings-btn:hover { background: rgba(42, 74, 168, .08); }
body.ui2.light .header-actions > .u2-nav.on { background: rgba(42, 74, 168, .12); color: #1a2550; }
body.ui2.light #trainer-btn, body.ui2.light .u2-settings-btn { background: rgba(42, 74, 168, .06); }
body.ui2.light .u2-coins, body.ui2.light .coin-pill { color: #8a5a00; background: rgba(255, 203, 5, .2); }
body.ui2.light .u2-head { color: #1a2550; background: linear-gradient(180deg, #eef3ff, #dde6fb); }
body.ui2.light .u2-panel, body.ui2.light .view:not(#view-menu) { box-shadow: 0 8px 22px rgba(40, 60, 120, .16); }
body.ui2.light .u2-sec { color: #4a5a8a; }
body.ui2.light .mode-card .mode-name { background: linear-gradient(180deg, #2a4aa8, #1d3a8a); }
body.ui2.light .map-card, body.ui2.light .chapter-card { background-color: #ffffff !important; color: var(--text); box-shadow: 0 6px 14px rgba(40, 60, 120, .15); }
body.ui2.light .modal { background: rgba(30, 40, 80, .45); }
body.ui2.light .modal-box, body.ui2.light .overlay-box, body.ui2.light .hatch-box, body.ui2.light .team-box {
  background: linear-gradient(180deg, #ffffff, #eef2fc) !important; border-color: #c6d1f0 !important; color: var(--text); box-shadow: 0 20px 50px rgba(30, 40, 80, .35) !important; }
body.ui2.light .overlay-box h2, body.ui2.light .team-title { color: #1a2550; }
body.ui2.light .modal-close { background: rgba(42, 74, 168, .1); color: #1a2550; }
body.ui2.light input, body.ui2.light select, body.ui2.light textarea { background: #ffffff; color: var(--text); border-color: var(--border); }
body.ui2.light .set-group { background: #f6f8ff; }
body.ui2.light .set-tabs button, body.ui2.light .set-seg button { background: #eef2fc; }
body.ui2.light .set-switch { background: #b8c2de; }
body.ui2.light .u2-link { color: #2a5cc8; }
body.ui2.light .view-sub, body.ui2.light .ch-sub, body.ui2.light .ch-next { color: var(--muted); }
body.ui2.light .challenge-card { color: var(--text); }
/* (the game's own side panel during a run) */
body.ui2.light.in-game aside, body.ui2.light.in-game .side { color: var(--text); }
/* Mini Games in light */
body.ui2.light .mg-box { background: linear-gradient(180deg, #ffffff, #eef2fc) !important; color: #1a2550; }
body.ui2.light .mg-desc, body.ui2.light .mg-help, body.ui2.light .mg-hub-head small, body.ui2.light .mg-result small, body.ui2.light .mg-back { color: #5a6890 !important; }
body.ui2.light .mg-name { color: #1a2550; }
body.ui2.light .mg-card { background: linear-gradient(90deg, color-mix(in srgb, var(--mg) 16%, #ffffff), #ffffff); border-color: #d6def6; }
body.ui2.light .mg-icon { background: #f4f7ff; }
body.ui2.light .mg-title { text-shadow: 1px 1px 0 rgba(0, 0, 0, .25); color: #c98a00; }
body.ui2.light .mg-result, body.ui2.light .hol-card, body.ui2.light .sz-review div { background: #f4f7ff; border-color: #d6def6; }
body.ui2.light .mg-form input { background: #ffffff; color: #1a2550; border-color: #c6d1f0; }
body.ui2.light .hol-val { color: #1a2550; }
/* Light + Halloween: cream and pumpkin orange. */
body.ui2.light.halloween { --gold: #e8620c; --line: rgba(200, 100, 30, .25); }
body.ui2.light.halloween header { background: linear-gradient(180deg, #fff8ef, #ffeedd); border-bottom: 2px solid rgba(232, 98, 12, .45); }
body.ui2.light.halloween .brand { color: #e8620c; text-shadow: 2px 2px 0 #4c1c6c; }
body.ui2.light.halloween .u2-head { background: linear-gradient(180deg, #fff1e0, #ffe0c0); border-bottom: 2px solid rgba(232, 98, 12, .4); color: #4a1c00; }
body.ui2.light.halloween .u2-panel::after, body.ui2.light.halloween .view:not(#view-menu)::after { filter: invert(1); opacity: .25; }
/* Light + Autumn: cream and amber. */
body.ui2.light.autumn { --gold: #d0601c; --line: rgba(200, 110, 30, .25); }
body.ui2.light.autumn header { background: linear-gradient(180deg, #fffaf0, #fff0d8); border-bottom: 2px solid rgba(208, 96, 28, .45); }
body.ui2.light.autumn .brand { color: #d0601c; text-shadow: 2px 2px 0 #7a2a10; }
body.ui2.light.autumn .u2-head { background: linear-gradient(180deg, #fff3dc, #ffe2b8); border-bottom: 2px solid rgba(208, 96, 28, .4); color: #4a2000; }
body.ui2.light.autumn .mg-box { border-color: #f0a030 !important; }
body.ui2.light.halloween .mg-box { border-color: #ff9a2a !important; }
/* (more specific than the general button and light-theme rules, so these keep their own colours) */
body.ui2 button.u2-weekly { background: linear-gradient(100deg, rgba(14, 18, 40, .92) 30%, rgba(14, 18, 40, .55) 70%, rgba(14, 18, 40, .25)), var(--wk-art) center / cover; color: #fff; }
body.ui2 button.u2-weekly.event { background: radial-gradient(circle at 85% 45%, rgba(160, 60, 255, .45), transparent 55%),
  linear-gradient(100deg, rgba(26, 8, 40, .95) 30%, rgba(26, 8, 40, .6) 70%, rgba(26, 8, 40, .3)), var(--wk-art) center / cover; }
body.ui2 .u2-wk-soon { background: linear-gradient(90deg, #4a1c78, #7a3a1c); }
body.ui2.light .u2-reset, body.ui2.light .u2-reset b { color: #4a5a8a; }
body.ui2 .set-tabs button.active { background: var(--gold) !important; border-color: var(--gold) !important; color: #1a1a1a !important; }
body.ui2.halloween .set-tabs button.active { color: #fff !important; }
body.ui2 .set-seg button.on { background: var(--gold) !important; color: #1a1a1a !important; }
body.ui2.halloween .set-seg button.on { color: #fff !important; }
body.ui2 .set-row input:checked + .set-switch { background: #22c55e !important; }
/* Light: the run's side panel, and the Mini Games' small tags readable on white */
body.ui2.light .panel { background: linear-gradient(180deg, #ffffff, #eef2fc); box-shadow: 0 8px 22px rgba(40, 60, 120, .18) !important; color: var(--text); }
body.ui2.light .panel .section-title, body.ui2.light .panel h3, body.ui2.light .panel .hint { color: #4a5a8a; }
body.ui2.light .mg-tag { color: color-mix(in srgb, var(--mg) 55%, #1a1a1a); background: #ffffff; }
body.ui2.light .mg-coin { color: #8a5a00; background: #fff7d6; border-color: #e8c25a; }
body.ui2.light .mg-status.avail { color: #2a5cc8; background: #eaf1ff; }
body.ui2.light .mg-status.started { color: #8a5a00; background: #fff7d6; }
body.ui2.light .mg-status.done { color: #15803d; background: #e3f9ea; }

/* ---------- 📊 Run stats (game.js) ---------- */
.stats-box { width: min(560px, 100%); max-height: 88vh; overflow-y: auto; }
.st-tabs { display: flex; gap: 6px; margin: 6px 0 8px; }
.st-tabs button { flex: 1; padding: 8px; border-radius: 10px; background: rgba(255, 255, 255, .06); border: 1px solid var(--line, #353a47); color: var(--text); }
body .st-tabs button.active { background: var(--gold, #ffcb05) !important; border-color: var(--gold, #ffcb05) !important; color: #1a1a1a !important; }
.st-group { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); margin-bottom: 8px; cursor: pointer; }
.st-total { font-weight: 800; margin: 2px 0 8px; }
.st-weather { font-size: 13px; margin: 0 0 8px; padding: 6px 10px; border-radius: 10px; background: rgba(99, 144, 240, .14); }
.st-wx { font-size: 11px; font-weight: 700; padding: 1px 6px; border-radius: 99px; margin-left: 4px; white-space: nowrap; }
.st-wx.up { background: rgba(122, 199, 76, .22); color: #8fe06a; }
.st-wx.down { background: rgba(229, 83, 75, .2); color: #ff8a80; }
body.ui2.light .st-wx.up { color: #2f7d1e; }
body.ui2.light .st-wx.down { color: #b3261e; }
.st-list { display: grid; gap: 6px; }
.st-row { display: grid; grid-template-columns: 22px 40px 1fr auto; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 10px; background: rgba(255, 255, 255, .05); border: 1px solid var(--line, #353a47); }
.st-row.bench { opacity: .7; }
.st-rank { font-weight: 900; color: var(--muted); text-align: center; }
.st-row img { width: 40px; height: 40px; image-rendering: pixelated; }
.st-main { display: grid; gap: 4px; min-width: 0; }
.st-main b { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st-main small { font-weight: 600; color: var(--muted); }
.st-bar { height: 8px; border-radius: 99px; background: rgba(127, 140, 180, .25); overflow: hidden; }
.st-bar i { display: block; height: 100%; border-radius: 99px; }
.st-num { display: grid; justify-items: end; }
.st-num b { font-size: 14.5px; }
.st-num small { font-size: 11.5px; color: var(--muted); }
.st-empty { color: var(--muted); text-align: center; padding: 14px 6px; }
body.ui2.light .st-row { background: #f6f8ff; }

/* ---------- 🆕 Update banner (ui/fresh.js): stays until the page is refreshed ---------- */
.fresh-banner { position: fixed; left: 50%; bottom: 14px; transform: translateX(-50%); z-index: 1000; display: flex; align-items: center; gap: 12px;
  max-width: calc(100% - 24px); padding: 10px 12px 10px 16px; border-radius: 14px; color: #fff; font-size: 14px;
  background: linear-gradient(90deg, #2563eb, #7c3aed); box-shadow: 0 10px 28px rgba(0, 0, 0, .45); border: 2px solid rgba(255, 255, 255, .35); animation: fresh-in .4s ease both; }
.fresh-banner button { flex: none; padding: 8px 14px; border-radius: 10px; border: 0; background: #ffcb05; color: #1a1a1a; font-weight: 900; cursor: pointer; box-shadow: 0 2px 0 #b38a00; }
@keyframes fresh-in { from { transform: translate(-50%, 30px); opacity: 0; } }
@media (max-width: 520px) { .fresh-banner { font-size: 13px; bottom: 8px; } }

/* ---------- 🏅 Daily/Weekly leaderboard prizes (PLACE_PRIZES in src/modes.js) ---------- */
.ch-prizes { margin-top: 6px; padding: 5px 9px; border-radius: 8px; font-size: 12px; line-height: 1.45; color: #ffe9b0; background: rgba(255, 203, 5, .1); border: 1px solid rgba(255, 203, 5, .3); }
.ch-prizes b { color: #ffd84a; }
.do-prize { font-size: 12px; color: #ffd84a; font-weight: 700; }
.lb-sub.lb-prizes { display: block; margin-top: 4px; font-size: 12px; color: #ffe9b0; }
.lb-sub.lb-prizes b { color: #ffd84a; }
body.ui2.light .ch-prizes, body.ui2.light .lb-sub.lb-prizes { color: #6b4f00; background: #fff6d6; border-color: #f0c84a; }
body.ui2.light .ch-prizes b, body.ui2.light .lb-sub.lb-prizes b, body.ui2.light .do-prize { color: #8a5a00; }

/* ---------- Shop drag-to-reorder, Swablu flight speed, Replace all ---------- */
#shop .card.dragging { opacity: .3; outline: 2px dashed #ffd84a; outline-offset: -2px; }
.shop.shop-ghost { position: fixed; left: 0; top: 0; z-index: 9999; display: block; margin: 0; padding: 0; pointer-events: none; will-change: transform; }
.shop.shop-ghost .card { box-shadow: 0 10px 24px rgba(0, 0, 0, .5); border-color: #ffd84a; cursor: grabbing; }
body:has(.shop-ghost) { cursor: grabbing; }
.tp-flyspeed { display: grid !important; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; }
.tp-flyspeed button { padding: 5px 0; font-size: 12.5px; font-weight: 800; }
body .tp-flyspeed button.active { background: #ffd84a !important; border-color: #ffd84a !important; color: #2a2000 !important; }
.tp-repall { display: flex; align-items: center; gap: 6px; margin: 6px 0 2px; font-size: 13px; font-weight: 700; cursor: pointer; }
.tp-repall input { width: 16px; height: 16px; margin: 0; }

/* Settings: custom cursor, cursor colours, and Lock loadout order (swipes on the shop just scroll) */
body.custom-cursor, body.custom-cursor * { cursor: var(--cursor) !important; }
.set-seg.set-colors { flex-wrap: wrap; gap: 6px; border: 0; overflow: visible; }
.set-seg.set-colors button, body.ui2 .set-seg.set-colors button.on { background: var(--sw) !important; width: 26px; height: 26px; padding: 0; border-radius: 50%; border: 2px solid rgba(0, 0, 0, .45); }
.set-seg.set-colors button.on { outline: 3px solid var(--gold); outline-offset: 1px; }
body.lock-shop .shop .card { touch-action: auto; cursor: pointer; }
/* The 🔒 by the wave controls (touch screens: a mouse doesn't scroll by dragging, so it's only in Settings there) */
.controls .shop-lock, body.ui2.in-game .panel .controls > #shop-lock-btn { display: none; }
@media (pointer: coarse) { /* in the first row, after pause (Start wave gives up a little room) */
  .controls .shop-lock, body.ui2.in-game .panel .controls > #shop-lock-btn { display: flex; align-items: center; justify-content: center; order: 1; }
  body.ui2.in-game .panel .controls > #start-btn { grid-column: span 4; }
  body.ui2.in-game .panel .controls > :is(#restart-map-btn, #recall-btn, #undo-btn, #unmaxed-btn, #stats-btn, .auto) { order: 2; }
}
body.ui2 .controls .shop-lock.on { border-color: #ffd84a; }

/* ---------- Phones on their side: the home screen in two columns, a one-row top bar that scrolls away, and a short
   hero with the text on the left, so the buttons fit on a short screen ---------- */
@media (orientation: landscape) and (max-height: 540px) and (max-width: 1150px) {
  body.ui2:not(.in-game) header { position: relative; flex-wrap: nowrap; padding: 4px 10px; gap: 6px; }
  body.ui2:not(.in-game) .brand { font-size: 13px; flex: none; }
  body.ui2:not(.in-game) .header-actions { flex: 1 1 auto; min-width: 0; }
  body.ui2:not(.in-game) .header-actions > button { padding: 5px 8px; }
  body.ui2:not(.in-game) .u2-coins { position: static; order: 2; flex: none; margin: 0; padding: 3px 10px; font-size: 13px; }
  body.ui2 .title-screen { padding: 10px 14px 20px; }
  .u2-home { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 38%); gap: 12px; align-items: start; }
  .u2-main, .u2-side { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
  .u2-welcome { align-self: stretch; padding: 6px 12px 6px 6px; }
  .u2-wrow > #u2-welcome { flex: 1; }
  .u2-avatar { width: 40px; height: 40px; }
  .u2-avatar img { width: 50px; height: 50px; }
  .u2-hero { min-height: 0; background: linear-gradient(90deg, rgba(10, 20, 48, .95) 0%, rgba(10, 20, 48, .8) 50%, rgba(10, 20, 48, .15) 85%), var(--art) center / cover no-repeat, #1b2a55; }
  .u2-hero-text { padding: 14px 16px 12px; max-width: 64%; gap: 6px; }
  .u2-hero h2 { font-size: 22px; }
  .u2-hero p { font-size: 13px; }
  body.ui2 .u2-cta { align-self: flex-start; }
  .u2-hero-foot { margin-top: 2px; padding-top: 8px; }
  .u2-partner { top: auto; bottom: -4px; right: 2%; width: 120px; height: 120px; }
  body.ui2 #mode-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  body.ui2 #mode-grid .mode-tower { grid-column: auto; }
  .u2-features-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Welcome card with your trainer card's banner, frame and title (see renderWelcome) */
.u2-welcome.u2-carded { position: relative; overflow: hidden; isolation: isolate; color: #fff; padding: 8px 20px 8px 8px; min-width: 300px;
  background: linear-gradient(135deg, #2b3350, #1a1f33); border-color: rgba(255, 255, 255, .22); }
.u2-carded .u2-wban { position: absolute; inset: 0; z-index: -1; }
.u2-carded .u2-wban::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(12, 14, 30, .78) 0, rgba(12, 14, 30, .5) 55%, rgba(12, 14, 30, .15)); }
.u2-carded .u2-wtext { gap: 3px; align-items: flex-start; }
.u2-carded .u2-wtext > b { text-shadow: 0 2px 0 rgba(0, 0, 0, .5); }
.u2-carded .u2-dexline { color: #d6dcf0; }
.u2-carded .u2-dexline b { color: #fff; }
.u2-carded .u2-bar { background: rgba(255, 255, 255, .2); }
.u2-fav { width: 76px; height: 76px; margin: -6px 0; }
.u2-fav > .avatar { width: 43px; height: 43px; }
body.ui2.halloween .u2-welcome.u2-carded, body.ui2.autumn .u2-welcome.u2-carded { background: linear-gradient(135deg, #2b3350, #1a1f33); border-color: rgba(255, 180, 100, .4); }
@media (max-width: 760px) { .u2-fav { width: 58px; height: 58px; } .u2-fav > .avatar { width: 33px; height: 33px; } .u2-welcome.u2-carded { min-width: 0; } }

/* Leaderboard trainer chip: the name sits inside its card with room to spare (ui2 buttons have no padding here). */
body.ui2 .lb-rich .lb-trainer { padding: 3px 16px 3px 3px; border-radius: 999px; max-width: 100%; }
body.ui2 .lb-rich .lb-who { padding-right: 2px; }
body.ui2 .lb-rich .lb-who > :first-child { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
/* Phones: the whole table fits without scrolling sideways (tighter cells, a smaller frame, long names and titles trimmed). */
@media (max-width: 560px) {
  body.ui2 .lb-rich th, body.ui2 .lb-rich td { padding-left: 5px; padding-right: 5px; font-size: 13px; }
  body.ui2 .lb-rich td:first-child { width: 26px; }
  body.ui2 .lb-rich .lb-tc { width: auto; padding-left: 4px; }
  body.ui2 .lb-rich .lb-trainer { gap: 6px; padding-right: 10px; }
  body.ui2 .lb-rich .lb-trainer .fav { flex: none; transform: scale(.78); margin: -10px -7px; } /* (scaled, so the avatar stays inside its frame) */
  body.ui2 .lb-rich .lb-who { max-width: 80px; }
  body.ui2 .lb-rich th { font-size: 9.5px; letter-spacing: 0; }
  body.ui2 .lb-rich .lb-who > :first-child { font-size: 13px; display: block; white-space: nowrap; }
  body.ui2 .lb-rich .lb-who .ctitle { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

/* ---------- Phones on their side, in a game: a slim one-row top bar, and the side panel fits the screen's height. A
   selected Pokémon's panel comes straight after the money and lives, with Sell / Target and its upgrades first, so
   nothing needs the phone turned upright. ---------- */
@media (orientation: landscape) and (max-height: 540px) {
  body.ui2.in-game { --chrome-h: 50px; }
  body.ui2.in-game header { flex-wrap: nowrap; height: 40px; padding: 3px 8px; gap: 6px; }
  body.ui2.in-game .brand { font-size: 12px; flex: none; }
  body.ui2.in-game header #run-info { display: none; }
  body.ui2.in-game .header-actions { flex: 1 1 auto; min-width: 0; margin: 0; gap: 2px; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  body.ui2.in-game .header-actions > button { flex: none; padding: 4px 9px; font-size: 13px; }
  body.ui2.in-game .header-actions .btn-label { display: none; }
  body.ui2.in-game main { padding-top: 4px; }
  body.ui2.in-game > footer { display: none; } /* (so the page itself doesn't scroll the top bar away) */
  body.ui2.in-game .panel { top: 44px; max-height: calc(100dvh - 48px); padding: 6px; gap: 6px; overscroll-behavior: contain; }
  .panel.has-selection #tower-panel { order: 2; }
  .panel.has-selection .controls { order: 3; }
  .panel.has-selection :is(#wave-section, #sandbox-bar) { display: none; }
  body.in-game #tower-panel { padding: 8px; gap: 6px; }
  body.in-game #tower-panel > * { order: 3; }
  body.in-game #tower-panel > .tp-head { order: 0; }
  body.in-game #tower-panel > .tp-actions { order: 1; }
  body.in-game #tower-panel > :is(.evolve-btn, .tp-section-label, .choices, .learned) { order: 2; }
  body.in-game #tower-panel .tp-head img { width: 36px; height: 36px; margin: -4px 0; }
  body.in-game #tower-panel .tp-head .sub { display: none; }
  body.in-game #tower-panel .tp-actions { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 5px; }
  body.in-game #tower-panel .tp-actions #sell-btn { grid-column: 1 / -1; order: -1; } /* Sell on its own row, first */
  body.in-game #tower-panel .tp-row button { min-width: 0; padding: 7px 4px; font-size: 12.5px; min-height: 34px; line-height: 1.15; }
}

/* Dark cards (Settings → Look): the white home cards and rows go near-black with white text. */
body.ui2.dark-cards .u2-welcome { background: linear-gradient(180deg, #1c2340, #121830) !important; border-color: #343f6a !important; color: #f2f5ff; }
body.ui2.dark-cards .u2-dexline { color: #b4bee0; }
body.ui2.dark-cards .u2-dexline b { color: #fff; }
body.ui2.dark-cards .u2-avatar { background: #2a3460; }
body.ui2.dark-cards .u2-bar { background: rgba(255, 255, 255, .14); }
body.ui2.dark-cards .mode-card, body.ui2.dark-cards .u2-feature, body.ui2.dark-cards .u2-row {
  background: #141a2e !important; border-color: #2e3860 !important; color: #f2f5ff;
}
body.ui2.dark-cards .mode-card:hover, body.ui2.dark-cards .u2-feature:hover, body.ui2.dark-cards .u2-row:hover { border-color: var(--gold) !important; }
body.ui2.dark-cards .mode-card .mode-desc { color: #c3cbe8; }
body.ui2.dark-cards .mode-card .mode-info { color: #fff; }
body.ui2.dark-cards .mode-card .mode-testing { color: #8f9ac4; }
body.ui2.dark-cards .u2-ft small, body.ui2.dark-cards .u2-rt small { color: #b4bee0; }
body.ui2.dark-cards .u2-arrow { color: #8f9ac4; }
body.ui2.dark-cards .u2-ri { background: linear-gradient(180deg, #2c3868, #1e2850); }
body.ui2.dark-cards .u2-pill { background: #2a3460; color: #e2e8ff; }
body.ui2.dark-cards .u2-pill.new { background: #22c55e; color: #fff; }
body.ui2.dark-cards .u2-pill.ready { background: #2563eb; color: #fff; }
body.ui2.dark-cards .u2-pill.done { background: #0f3d2c; color: #6ee7b7; }
body.ui2.dark-cards .u2-gift { background: linear-gradient(180deg, #3a2a10, #2a1e08) !important; border-color: #8a6a1e !important; }
body.ui2.dark-cards .u2-stat .u2-link { color: #8fb4ff; }
body.ui2.dark-cards .u2-mini-dots i { background: #3a4470; }
body.ui2.dark-cards .u2-mini-dots i.half { background: #ffd84a; }
body.ui2.dark-cards .u2-mini-dots i.on { background: #22c55e; }