/* The "Modern" look (?theme=modern, or the sidebar's switch; kept in the browser): light, airy, in
   the new WormsOnline logo's colours. A soft lavender-white ground; white cards that float on soft
   indigo-tinted shadows (no hard edges); the logo's deep indigo (#1d1863) for type, the active nav
   pill and the plain buttons; its golden yellow for the one call to action, as the landing page's
   striped pill (Play now): Find opponent and the ten-pull. Fredoka for headings and buttons (the
   logo's round letters), Nunito for text. The gacha's banners keep their art: their type stays white
   over it, the page around them goes light, the pulls become pills. */
:root[data-theme="modern"] {
  --ground: #f4f3fb; --surface: #ffffff; --raised: #eeedf9; --active: #e4e2f7;
  --border: #e3e1f2; --rule: #ebe9f6; --control: #c9c5e6;
  --text: #1d1863; --muted: #5d5a8a; --faint: #8a87ad;
  --accent: #f5a800;
  --gold: #e8a300;
  --primary: #1d1863; --primary-ink: #ffffff;
  --positive: #16a36a; --negative: #e0403a; --warning: #e08e00;
  --pill-positive-bg: #ddf6ea; --pill-positive-ink: #0f7c50;
  --pill-negative-bg: #fde4e2; --pill-negative-ink: #b52a24;
  --pill-warning-bg: #fff1d1; --pill-warning-ink: #9a6200;
  --pill-neutral-bg: #eeedf9; --pill-neutral-ink: #1d1863;
  --chart-1: #f5a800; --chart-muted: #c9c5e6; --grid: #ebe9f6; --axis-ink: var(--faint);
  --chart-span: 0.14;
  --indigo: #1d1863; --indigo-2: #2d2a8c; --lav: #eeedf9;
  --yellow: linear-gradient(180deg, #ffe066, #f5b400);
  --stripes: repeating-linear-gradient(-55deg, rgba(255, 255, 255, 0.18) 0 10px, rgba(255, 255, 255, 0) 10px 20px);
  --lift: 0 1px 2px rgba(29, 24, 99, 0.06), 0 8px 24px rgba(29, 24, 99, 0.08);
  --lift-hi: 0 2px 4px rgba(29, 24, 99, 0.08), 0 14px 34px rgba(29, 24, 99, 0.14);
  --font: "Nunito", system-ui, -apple-system, "Segoe UI", sans-serif;
  --display: "Fredoka", "Nunito", system-ui, sans-serif;
  --radius-card: 20px; --radius-control: 999px;
  --sidebar-width: 236px;
  color-scheme: light;
}

/* ---------- the ground ---------- */
[data-theme="modern"] body { background: radial-gradient(1200px 600px at 85% -10%, #e6e3ff 0, transparent 60%),
  radial-gradient(900px 500px at -10% 110%, #fff1cc 0, transparent 55%), var(--ground); background-attachment: fixed; color: var(--text); } /* taste-skill-ignore: the theme's soft lavender and gold glows */

/* ---------- cards: white, floating, rounded ---------- */
[data-theme="modern"] .panel, [data-theme="modern"] .kpis { background: var(--surface); border: 0; border-radius: var(--radius-card); box-shadow: var(--lift); }
[data-theme="modern"] .kpi + .kpi { border-left: 1px solid var(--rule); }
[data-theme="modern"] .panel h2, [data-theme="modern"] .rates-group { font-family: var(--display); font-weight: 600; color: var(--indigo); }
[data-theme="modern"] .kpi-value { font-family: var(--display); font-weight: 600; color: var(--indigo); }
[data-theme="modern"] th { color: var(--faint); border-bottom-color: var(--rule); }
[data-theme="modern"] td { border-bottom-color: var(--rule); }

/* ---------- the sidebar: a white rail, the active item an indigo pill ---------- */
[data-theme="modern"] .sidebar { background: rgba(255, 255, 255, 0.82); border-right: 0; box-shadow: 1px 0 0 var(--rule), 8px 0 30px rgba(29, 24, 99, 0.05);
  backdrop-filter: blur(10px); padding: 18px 14px; } /* taste-skill-ignore: the rail's frosted white */
[data-theme="modern"] .brand { padding: 0 4px; margin-bottom: 18px; }
[data-theme="modern"] .brand img { width: 100%; image-rendering: auto; }
[data-theme="modern"] .nav-item { height: 40px; padding: 0 14px; border-radius: 999px; color: var(--muted); font-family: var(--display); font-size: 16px; font-weight: 500; }
[data-theme="modern"] .nav-item:hover { background: var(--lav); color: var(--indigo); }
[data-theme="modern"] .nav-item[aria-current="page"] { background: var(--indigo); color: #ffffff; box-shadow: 0 6px 16px rgba(29, 24, 99, 0.25); } /* taste-skill-ignore: the active pill */
[data-theme="modern"] .nav-group { border-top-color: var(--rule); }
[data-theme="modern"] .nav-item.theme-toggle { height: 28px; font-family: var(--font); font-size: 12px; font-weight: 600; color: var(--faint); }
[data-theme="modern"] .nav-badge, [data-theme="modern"] .hud-badge { background: #ff4757; color: #ffffff; font-weight: 800; }
[data-theme="modern"] .hud-badge { box-shadow: 0 0 0 2px #ffffff; }

/* ---------- the top bar: frosted white ---------- */
[data-theme="modern"] .topbar { background: rgba(255, 255, 255, 0.72); border-bottom: 0; box-shadow: 0 1px 0 var(--rule); backdrop-filter: blur(10px); } /* taste-skill-ignore: the bar's frosted white */
[data-theme="modern"] .season { border-left-color: var(--rule); }
[data-theme="modern"] .season b { font-family: var(--display); font-weight: 600; color: var(--indigo); }
[data-theme="modern"] .hud-pill { background: var(--lav); color: var(--indigo); border-radius: 999px; }
[data-theme="modern"] .hud-icon img { filter: drop-shadow(0 1px 1px rgba(29, 24, 99, 0.25)); }
[data-theme="modern"] .topbar-updates .hud-badge { box-shadow: 0 0 0 2px #ffffff; }

/* ---------- fields ---------- */
[data-theme="modern"] .search input, [data-theme="modern"] .input, [data-theme="modern"] select.input {
  border: 1px solid var(--border); border-radius: 999px; background: #ffffff; color: var(--text); box-shadow: inset 0 1px 2px rgba(29, 24, 99, 0.05); }
[data-theme="modern"] .input:focus, [data-theme="modern"] .search input:focus { outline: 0; border-color: #8f88f0; box-shadow: 0 0 0 4px rgba(120, 110, 240, 0.18); }
[data-theme="modern"] .search svg { stroke: var(--faint); }

/* ---------- headings ---------- */
/* the titles and the cards' headers: the logo's "Online", golden yellow in an indigo outline, lifted on
   a soft shadow */
[data-theme="modern"] .title-row h1, [data-theme="modern"] .lg-title h1 { font-family: var(--display); font-size: 36px; font-weight: 700; letter-spacing: 0.005em; color: #ffc61a;
  -webkit-text-stroke: 6px var(--indigo); paint-order: stroke fill; text-shadow: 0 4px 0 var(--indigo), 0 10px 18px rgba(29, 24, 99, 0.28); } /* taste-skill-ignore: the logo's lettering, the user asked for outlined yellow titles */
[data-theme="modern"] .panel h2 { font-size: 19px; color: #ffc61a; -webkit-text-stroke: 4px var(--indigo); paint-order: stroke fill;
  text-shadow: 0 2px 0 var(--indigo), 0 5px 10px rgba(29, 24, 99, 0.2); letter-spacing: 0.01em; } /* taste-skill-ignore: the logo's lettering on the cards' headers */
[data-theme="modern"] .title-row .sub { color: var(--muted); }

/* the tabs: a segmented pill */
[data-theme="modern"] .tabs { gap: 4px; padding: 4px; width: fit-content; border: 0; border-radius: 999px; background: var(--lav); }
[data-theme="modern"] .tabs a { padding: 7px 18px; border-radius: 999px; font-family: var(--display); font-weight: 500; color: var(--muted); }
[data-theme="modern"] .tabs a[aria-selected="true"] { background: #ffffff; color: var(--indigo); box-shadow: 0 2px 8px rgba(29, 24, 99, 0.12); }
[data-theme="modern"] .tabs a[aria-selected="true"]::after { content: none; }

/* ---------- buttons: pills; plain ones indigo, the call to action the landing's striped yellow ---------- */
[data-theme="modern"] .btn { height: 40px; padding: 0 20px; border: 1px solid var(--border); border-radius: 999px; background: #ffffff; color: var(--indigo);
  font-family: var(--display); font-size: 15px; font-weight: 600; box-shadow: 0 1px 2px rgba(29, 24, 99, 0.06); transition: transform 150ms ease, box-shadow 150ms ease; }
[data-theme="modern"] .btn:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(29, 24, 99, 0.12); }
[data-theme="modern"] .btn.primary { border-color: transparent; background: var(--indigo); color: #ffffff; }
[data-theme="modern"] .btn.primary:hover:not(:disabled) { background: var(--indigo-2); }
[data-theme="modern"] .btn:disabled { background: var(--lav); color: var(--faint); border-color: transparent; box-shadow: none; }
[data-theme="modern"] .btn.ghost { border-color: transparent; background: transparent; box-shadow: none; }
[data-theme="modern"] .play-btn { border-radius: 999px; font-family: var(--display); font-size: 23px; font-weight: 700; color: #3a2400;
  background: var(--stripes), var(--yellow); /* taste-skill-ignore: the landing page's Play now */
  box-shadow: 0 10px 26px rgba(245, 168, 0, 0.35), inset 0 -3px 0 rgba(150, 90, 0, 0.35); } /* taste-skill-ignore: the landing page's Play now */
[data-theme="modern"] .play-btn:active:not(:disabled) { box-shadow: 0 4px 10px rgba(245, 168, 0, 0.3), inset 0 -1px 0 rgba(150, 90, 0, 0.35); } /* taste-skill-ignore: its pressed state */

/* ---------- the gacha: the banner a big floating card, the pulls pills ---------- */
[data-theme="modern"] .gacha { border-radius: 28px; box-shadow: 0 20px 50px rgba(29, 24, 99, 0.22); }
[data-theme="modern"] .gacha-arrow { background: rgba(255, 255, 255, 0.9); color: var(--indigo); box-shadow: 0 6px 18px rgba(29, 24, 99, 0.25); }
[data-theme="modern"] .gacha-arrow:hover:not(:disabled) { background: #ffffff; }
[data-theme="modern"] .gacha-title { font-family: var(--display); font-weight: 700; }
[data-theme="modern"] .gacha-banner-name { font-family: var(--display); letter-spacing: 0.06em; }
[data-theme="modern"] .gacha-btn { min-width: 230px; border-radius: 999px; padding: 14px 30px; background: #ffffff; color: var(--indigo); font-family: var(--display);
  box-shadow: 0 10px 26px rgba(29, 24, 99, 0.25); }
[data-theme="modern"] .gacha-btn b { font-weight: 700; }
[data-theme="modern"] .gacha-btn.ten { color: #3a2400; background: var(--stripes), var(--yellow); /* taste-skill-ignore: the landing page's Play now */
  box-shadow: 0 10px 28px rgba(245, 168, 0, 0.45), inset 0 -3px 0 rgba(150, 90, 0, 0.35); } /* taste-skill-ignore: the landing page's Play now */
[data-theme="modern"] .gacha-tag { border-radius: 999px; background: #ff4757; font-family: var(--display); box-shadow: 0 4px 12px rgba(255, 71, 87, 0.4); }
[data-theme="modern"] .gacha-rates-btn { border: 0; background: rgba(255, 255, 255, 0.9); color: var(--indigo); font-family: var(--display); box-shadow: 0 4px 12px rgba(29, 24, 99, 0.2); }
[data-theme="modern"] .gacha-rates-btn:hover { background: #ffffff; }
/* the latest pulls under the banner: on white, the gold and the rainbow need their own depth */
[data-theme="modern"] .gacha-latest .pull-ssr { background-image: linear-gradient(180deg, #f2b400, #c47d00); } /* taste-skill-ignore: the user's rarity colours, darkened for white */
[data-theme="modern"] .gacha-latest li { font-family: var(--display); font-weight: 500; }
[data-theme="modern"] .gacha-coins b { color: var(--indigo); }

/* dialogs */
[data-theme="modern"] .dialog-panel { border-radius: 24px; box-shadow: 0 30px 80px rgba(29, 24, 99, 0.3); }
[data-theme="modern"] .rates-list li { border-bottom-color: var(--rule); }

/* Play vs Blas: its modes and maps as white cards */
[data-theme="modern"] .blas-mode, [data-theme="modern"] .blas-map { border: 0; border-radius: var(--radius-card); background-color: #ffffff; box-shadow: var(--lift); }
[data-theme="modern"] .blas-mode:hover:not(:disabled), [data-theme="modern"] .blas-map:hover { box-shadow: var(--lift-hi); }
[data-theme="modern"] .blas-mode b, [data-theme="modern"] .blas-map b { font-family: var(--display); color: var(--indigo); }
[data-theme="modern"] .blas-mode[aria-pressed="true"] { box-shadow: 0 0 0 3px var(--indigo), var(--lift-hi); }

/* the phone: the menu sheet white */
@media (max-width: 860px) {
  [data-theme="modern"] .sidebar { background: #ffffff; }
}

/* inside a gacha banner (its art behind): the logo's yellow, outlined, never the page's indigo */
[data-theme="modern"] .gacha { color: #ffc61a; }
[data-theme="modern"] .gacha-title, [data-theme="modern"] .gacha-banner-name, [data-theme="modern"] .gacha-odds b, [data-theme="modern"] .gacha-odds .wname,
[data-theme="modern"] .gacha-coins, [data-theme="modern"] .gacha-coins b { color: #ffc61a; -webkit-text-stroke: 4px var(--indigo); paint-order: stroke fill;
  text-shadow: 0 2px 0 var(--indigo), 0 6px 14px rgba(0, 0, 0, 0.45); } /* taste-skill-ignore: the logo's lettering over the banner art */
[data-theme="modern"] .gacha-title { -webkit-text-stroke-width: 7px; text-shadow: 0 4px 0 var(--indigo), 0 10px 20px rgba(0, 0, 0, 0.45); } /* taste-skill-ignore: the logo's lettering */
[data-theme="modern"] .gacha-odds li.feat b { color: #ffe066; }

/* the level's XP bar in the top bar: an indigo track, the yellow fill */
[data-theme="modern"] .hud-xp { background: var(--indigo); box-shadow: inset 0 0 0 1px var(--indigo); }
[data-theme="modern"] .hud-xp i { background: linear-gradient(180deg, #ffe066, #f5b400); }
[data-theme="modern"] .lv-badge { background: var(--indigo); color: #ffc61a; }