/* Consensus Weather: pink bubbly Y2K / late-Aero / web 1.0-2.0 theme.
   Glossy gel buttons, glass bubbles, sparkles, a 2004-style window title bar. */

:root {
  --bg-top: #ffd6ec;
  --bg-mid: #fff0f8;
  --bg-bot: #e8dcff;
  --sparkle: rgba(255, 255, 255, 0.9);
  --card: rgba(255, 255, 255, 0.72);
  --card-solid: #fff7fc;
  --card-edge: rgba(255, 255, 255, 0.95);
  --fg: #4a1d3f;
  --muted: #9a5f86;
  --line: rgba(214, 90, 160, 0.18);
  --pink: #ff5fa8;
  --pink-deep: #d6247f;
  --pink-soft: #ffd1ea;
  --lav: #9b6bff;
  --aqua: #39b8f0;
  --mint: #3ccf91;
  --accent: #d6247f;
  --accent-soft: rgba(255, 95, 168, 0.22);
  --feels: #8a5cf6;
  --feels-soft: rgba(155, 107, 255, 0.18);
  --rain: #39b8f0;
  --rain-dark: #1679b8;
  --drizzle: #a9dcf5;
  --obs: #ff8a00;
  --high: #2fc486;
  --medium: #ffb92e;
  --low: #ff5c7a;
  --past: rgba(160, 120, 160, 0.10);
  --glow: 0 6px 22px rgba(var(--main-rgb), 0.25);
  --title-a: #ff8cc6;
  --title-b: #c79bff;
  --gloss: rgba(255, 255, 255, 0.55);
  --bubble-bg: rgba(255, 255, 255, 0.35);
  /* colour theme (default "bubblegum"); other palettes override these below */
  --gel-1: #ffa3d0; --gel-2: #ff5fa8; --gel-3: #ff7ab8; --gel-edge: #e0478f;
  --main-rgb: 255, 95, 168; --tint-rgb: 214, 36, 127; --ink-rgb: 150, 20, 80; --soft-rgb: 255, 230, 243;
  --soft-2: #ffe6f3; --theme-mid: #ffe6f2; --theme-bot: #ffd3ea; --stripes: none;
  --font-head: "Fredoka", "Nunito", system-ui, sans-serif;
  --font-body: "Nunito", system-ui, sans-serif;
  --font-pixel: "Silkscreen", ui-monospace, monospace;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg-top: #2a0f3d; --bg-mid: #1b0b2b; --bg-bot: #0f1638;
    --sparkle: rgba(255, 220, 245, 0.85);
    --card: rgba(48, 22, 70, 0.72); --card-solid: #2b1440; --card-edge: rgba(255, 140, 210, 0.35);
    --fg: #ffe6f6; --muted: #d39cc7; --line: rgba(255, 140, 210, 0.16);
    --pink: #ff6fb8; --pink-deep: #ff8cc8; --pink-soft: #5a2450;
    --accent: #ff8cc8; --accent-soft: rgba(255, 111, 184, 0.24);
    --feels: #b99bff; --feels-soft: rgba(185, 155, 255, 0.2);
    --rain: #5fd0ff; --rain-dark: #a9e6ff; --drizzle: #3f6f8f; --obs: #ffb04a;
    --past: rgba(255, 255, 255, 0.05);
    --glow: 0 0 24px rgba(255, 111, 184, 0.28);
    --title-a: #b0367f; --title-b: #5b3bb5;
    --gloss: rgba(255, 200, 235, 0.10); --bubble-bg: rgba(255, 140, 210, 0.05);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg-top: #2a0f3d; --bg-mid: #1b0b2b; --bg-bot: #0f1638; --sparkle: rgba(255, 220, 245, 0.85);
  --card: rgba(48, 22, 70, 0.72); --card-solid: #2b1440; --card-edge: rgba(255, 140, 210, 0.35);
  --fg: #ffe6f6; --muted: #d39cc7; --line: rgba(255, 140, 210, 0.16); --pink: #ff6fb8;
  --pink-deep: #ff8cc8; --pink-soft: #5a2450; --accent: #ff8cc8; --accent-soft: rgba(255, 111, 184, 0.24);
  --feels: #b99bff; --feels-soft: rgba(185, 155, 255, 0.2); --rain: #5fd0ff; --rain-dark: #a9e6ff;
  --drizzle: #3f6f8f; --obs: #ffb04a; --past: rgba(255, 255, 255, 0.05);
  --glow: 0 0 24px rgba(255, 111, 184, 0.28); --title-a: #b0367f; --title-b: #5b3bb5;
  --gloss: rgba(255, 200, 235, 0.10); --bubble-bg: rgba(255, 140, 210, 0.05); color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scrollbar-gutter: stable; } /* no sideways jump when a tab is shorter than the screen */
body {
  margin: 0;
  min-height: 100vh;
  color: var(--fg);
  font: 15px/1.45 var(--font-body);
  background-color: var(--bg-mid);
  /* sparkles + soft bubbles over a candy gradient, fixed like a 2003 desktop wallpaper */
  background-image:
    radial-gradient(circle at 12% 18%, var(--sparkle) 0 1.5px, transparent 2.5px),
    radial-gradient(circle at 78% 9%, var(--sparkle) 0 1px, transparent 2px),
    radial-gradient(circle at 63% 42%, var(--sparkle) 0 1.5px, transparent 2.5px),
    radial-gradient(circle at 31% 71%, var(--sparkle) 0 1px, transparent 2px),
    radial-gradient(circle at 90% 80%, var(--sparkle) 0 1.5px, transparent 2.5px),
    radial-gradient(circle at 85% 30%, var(--bubble-bg) 0 60px, transparent 61px),
    radial-gradient(circle at 8% 60%, var(--bubble-bg) 0 90px, transparent 91px),
    linear-gradient(180deg, var(--sky-top, var(--bg-top)), var(--sky-mid, var(--bg-mid)) 45%, var(--sky-bot, var(--bg-bot)));
  background-size: 240px 240px, 300px 300px, 260px 260px, 220px 220px, 280px 280px, 100% 100%, 100% 100%, 100% 100%;
  background-attachment: fixed;
  padding-bottom: env(safe-area-inset-bottom);
}
a { color: var(--accent); }
h1, h2 { margin: 0; font-family: var(--font-head); font-weight: 600; }
h2 { font-size: 1.08rem; margin-bottom: 8px; display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.muted { color: var(--muted); }
.small { font-size: 0.8rem; font-weight: 400; }


/* ------------------------------------------------------------ colour themes, all early-2000s */
/* bubblegum (default): Sanrio + Bratz pink, ~2002 */
/* aqua: Mac OS X Aqua, 2001: lickable blue gel + pinstripes */
:root[data-palette="aqua"] {
  --pink: #3d9cf0; --pink-deep: #1462c7; --pink-soft: #cfe6ff; --lav: #6fb8ff; --accent: #1462c7;
  --accent-soft: rgba(61, 156, 240, 0.22); --gel-1: #9fd4ff; --gel-2: #2f8ff0; --gel-3: #57a9f5; --gel-edge: #1a6fd6;
  --main-rgb: 61, 156, 240; --tint-rgb: 20, 98, 199; --ink-rgb: 10, 50, 120; --soft-rgb: 222, 238, 255;
  --soft-2: #e3f0ff; --theme-mid: #eef5ff; --theme-bot: #d6e7fb; --fg: #16304f; --muted: #5d7899;
  --line: rgba(20, 98, 199, 0.16); --bg-top: #cfe6ff; --bg-mid: #f2f8ff; --bg-bot: #d9e8fb;
  --pinstripe: repeating-linear-gradient(180deg, #fbfbfb 0 1px, #f1f1f1 1px 2px, #e8e8e8 2px 3px); /* Mac OS X 10.0 window body */
}
/* Aqua: like Mac OS X 10.0, the pinstripes are ONLY the texture of a window's body. The desktop is a
   picture (here: the weather sky), and everything inside a window is solid: gel buttons, white fields. */
:root[data-palette="aqua"] :is(.bubble, .toolbar) {
  background: var(--pinstripe); border: 1px solid #a9a9a9; backdrop-filter: none; -webkit-backdrop-filter: none;
  box-shadow: 0 10px 28px rgba(0, 30, 80, 0.32), 0 1px 3px rgba(0, 0, 0, 0.25);
}
:root[data-palette="aqua"] .bubble::before { display: none; }
:root[data-palette="aqua"] :is(.hour, .day, .speech, .pill, .theme-card, #q) {
  background: #fff; border: 1px solid #b5b5b5; color: #16304f;
}
:root[data-palette="aqua"] #q { box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25); }
:root[data-palette="aqua"] .speech::after { border-bottom-color: #b5b5b5; }
:root[data-palette="aqua"] .hour.now { border: 2px solid #3d9cf0; }
:root[data-palette="aqua"] :is(.tabs button, .chip, .pills button, .segmented) { /* Aqua "clear" gel */
  background: linear-gradient(180deg, #ffffff 0%, #f1f1f1 48%, #dcdcdc 52%, #f4f4f4 100%); border: 1px solid #9a9a9a;
  backdrop-filter: none; -webkit-backdrop-filter: none; color: #16304f;
}
:root[data-palette="aqua"] :is(.tabs button, .pills button, .segmented button)[aria-selected="true"], :root[data-palette="aqua"] .chip.active {
  background: linear-gradient(180deg, #a6d6ff 0%, #4ea8f5 48%, #1f86ea 52%, #6cc0ff 100%); color: #fff; border-color: #1a6fd6;
}
@media (max-width: 700px) { :root[data-palette="aqua"] .tabs { background: var(--pinstripe); backdrop-filter: none; -webkit-backdrop-filter: none; } }
/* luna: Windows XP default "Luna Blue" + the Bliss wallpaper hill, 2001 */
:root[data-palette="luna"] {
  --pink: #2a6fe8; --pink-deep: #0b3fa8; --pink-soft: #d7e4fb; --lav: #3fa53a; --accent: #0b3fa8;
  --accent-soft: rgba(42, 111, 232, 0.2); --gel-1: #8ab8ff; --gel-2: #2462e0; --gel-3: #3d7ef0; --gel-edge: #0a3a9e;
  --main-rgb: 42, 111, 232; --tint-rgb: 11, 63, 168; --ink-rgb: 8, 30, 90; --soft-rgb: 226, 236, 252;
  --soft-2: #e6eefc; --theme-mid: #e8f1ff; --theme-bot: #b9e08e; --fg: #0c2350; --muted: #4f6a99;
  --line: rgba(11, 63, 168, 0.15); --bg-top: #9cc4ff; --bg-mid: #e8f1ff; --bg-bot: #b9e08e;
}
:root[data-palette="luna"] .gel.round { /* the green Start button */
  background: linear-gradient(180deg, #8fdc7c 0%, #3a9e33 55%, #4fb046 100%); border-color: #26761f;
}
/* olive: Windows XP "Olive Green" Luna, 2001 */
:root[data-palette="olive"] {
  --pink: #8aa04a; --pink-deep: #56691c; --pink-soft: #ebeed6; --lav: #b5a14a; --accent: #56691c;
  --accent-soft: rgba(138, 160, 74, 0.22); --gel-1: #d4e09a; --gel-2: #849b3f; --gel-3: #a0b45b; --gel-edge: #5f7228;
  --main-rgb: 138, 160, 74; --tint-rgb: 86, 105, 28; --ink-rgb: 50, 60, 15; --soft-rgb: 242, 244, 226;
  --soft-2: #f1f3e0; --theme-mid: #f4f5e6; --theme-bot: #dfe5bf; --fg: #2f3a12; --muted: #6f7a4c;
  --line: rgba(86, 105, 28, 0.16); --bg-top: #e3e9c6; --bg-mid: #f6f7ea; --bg-bot: #dfe5bf;
}
/* aero: Windows Vista, 2007 (as in its screenshot): windows are a translucent blurred glass FRAME
   around an opaque white content area; taskbar / Start menu / gadgets are dark smoked glass;
   Start orb; light grey push buttons; pale-blue selection; teal-green aurora wallpaper. */
:root[data-palette="aero"] {
  --pink: #1f8fb8; --pink-deep: #145f86; --pink-soft: #d5effc; --lav: #3cbf8f; --accent: #1f6fb5;
  --accent-soft: rgba(31, 143, 184, 0.18); --gel-1: #b4ecff; --gel-2: #1f9dd0; --gel-3: #5ec4ea; --gel-edge: #1781ad;
  --main-rgb: 31, 143, 184; --tint-rgb: 15, 90, 120; --ink-rgb: 0, 30, 45; --soft-rgb: 241, 248, 253;
  --soft-2: #f1f8fd; --theme-mid: #5fb8b0; --theme-bot: #1f6f6a; --fg: #1e1e1e; --muted: #5a5a5a;
  --line: rgba(0, 0, 0, 0.12); --bg-top: #9fd8d2; --bg-mid: #4aa6a0; --bg-bot: #155f5c;
  --card-solid: #ffffff; --card-edge: rgba(0, 0, 0, 0.45);
  --glass: linear-gradient(115deg, rgba(255, 255, 255, 0.5) 0%, rgba(200, 235, 240, 0.35) 30%, rgba(160, 215, 225, 0.3) 31%, rgba(185, 225, 232, 0.38) 60%, rgba(220, 245, 248, 0.45) 100%);
  --smoke: linear-gradient(180deg, rgba(70, 70, 70, 0.62) 0%, rgba(20, 20, 20, 0.72) 50%, rgba(5, 5, 5, 0.78) 51%, rgba(30, 30, 30, 0.7) 100%);
  --font-body: "Segoe UI", "Nunito", system-ui, sans-serif;
  --stripes: radial-gradient(ellipse 140% 30% at 20% 95%, rgba(150, 255, 170, 0.4), transparent 70%),
    radial-gradient(ellipse 120% 26% at 75% 85%, rgba(120, 230, 255, 0.35), transparent 70%),
    linear-gradient(160deg, transparent 40%, rgba(220, 255, 200, 0.18) 45%, transparent 52%);
}
/* window: glass frame (the border) + white content (the padding box) */
:root[data-palette="aero"] :is(.bubble, .toolbar) {
  border: 7px solid transparent; border-radius: 9px;
  background: linear-gradient(#fff, #fff) padding-box, var(--glass) border-box;
  backdrop-filter: blur(10px) saturate(1.4); -webkit-backdrop-filter: blur(10px) saturate(1.4);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.55), inset 0 0 0 1px rgba(255, 255, 255, 0.35), 0 10px 30px rgba(0, 30, 40, 0.45);
}
:root[data-palette="aero"] .bubble::before { display: none; }
/* taskbar-style smoked glass: tabs + place chips */
:root[data-palette="aero"] :is(.tabs button, .chip) {
  background: var(--smoke); color: #fff; text-shadow: 0 1px 2px #000; border: 1px solid rgba(0, 0, 0, 0.8);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25); border-radius: 4px;
}
:root[data-palette="aero"] :is(.tabs button[aria-selected="true"], .chip.active) { /* active taskbar button */
  background: linear-gradient(180deg, rgba(120, 200, 230, 0.75), rgba(30, 110, 150, 0.85) 50%, rgba(10, 80, 120, 0.9) 51%, rgba(40, 140, 180, 0.85));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 0 10px rgba(80, 200, 255, 0.55);
}
@media (max-width: 700px) { :root[data-palette="aero"] .tabs { background: var(--smoke); border-top-color: #000; } }
/* the two round buttons = Start orbs */
:root[data-palette="aero"] .gel.round { /* Vista Start orb: tinted glass, lit from below, reflection on top */
  background:
    radial-gradient(ellipse 70% 55% at 50% 105%, rgba(120, 225, 255, 0.85), rgba(40, 150, 200, 0.35) 55%, transparent 75%),
    radial-gradient(circle at 50% 50%, rgba(30, 90, 120, 0.55), rgba(8, 35, 50, 0.78) 72%, rgba(4, 20, 30, 0.85));
  border: 1px solid rgba(0, 20, 30, 0.75); color: #fff; text-shadow: 0 0 4px rgba(120, 220, 255, 0.9);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.25), 0 0 8px rgba(80, 190, 240, 0.35);
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
}
:root[data-palette="aero"] .gel.round::before { /* the glass reflection, curved like the sphere */
  display: block; left: 9%; right: 9%; top: 2px; height: 48%;
  border-radius: 50% 50% 45% 45% / 70% 70% 30% 30%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.08));
}
/* Vista push button */
:root[data-palette="aero"] .gel:not(.round) {
  background: linear-gradient(180deg, #f2f2f2 0%, #ebebeb 50%, #dddddd 51%, #cfcfcf 100%); color: #1e1e1e; text-shadow: none;
  border: 1px solid #707070; border-radius: 3px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.7);
}
:root[data-palette="aero"] .gel:not(.round):hover { background: linear-gradient(180deg, #eaf6fd 0%, #d9f0fc 50%, #bee6fd 51%, #a7d9f5 100%); border-color: #3c7fb1; }
:root[data-palette="aero"] .gel:not(.round)::before { display: none; }
/* fields + content tiles inside windows */
:root[data-palette="aero"] #q { background: #fff; border: 1px solid #abadb3; border-radius: 2px; color: #1e1e1e; box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.1); }
:root[data-palette="aero"] :is(.hour, .day, .pill, .theme-card) { background: #fff; border: 1px solid #dcdcdc; border-radius: 3px; }
:root[data-palette="aero"] :is(.hour.now, .theme-card[aria-checked="true"]) { /* Vista selection */
  background: linear-gradient(180deg, #f1f8fd, #d5effc); border: 1px solid #99defd; box-shadow: none;
}
:root[data-palette="aero"] .speech { background: linear-gradient(180deg, #f6fbfd, #e3f2f8); border: 1px solid #a7cfe0; color: #1e1e1e; border-radius: 4px; }
:root[data-palette="aero"] .speech::after { border-bottom-color: #a7cfe0; }
:root[data-palette="aero"] .segmented { background: #f0f0f0; border: 1px solid #a0a0a0; border-radius: 3px; }
:root[data-palette="aero"] :is(.segmented button, .pills button) { border-radius: 3px; }
:root[data-palette="aero"] :is(.segmented button, .pills button)[aria-selected="true"] {
  background: linear-gradient(180deg, #eaf6fd, #bee6fd); color: #1e1e1e; text-shadow: none; border: 1px solid #3c7fb1; box-shadow: none;
}
:root[data-palette="aero"] .logo-text { background: linear-gradient(180deg, #ffffff, #d8f3f5 50%, #8fd3d8); -webkit-background-clip: text; background-clip: text;
  filter: drop-shadow(0 1px 1px rgba(0, 40, 50, 0.7)) drop-shadow(0 0 8px rgba(0, 60, 70, 0.4)); }
:root[data-palette="aero"] .tagline { color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7); }
:root[data-palette="aero"] .now-temp { background: linear-gradient(180deg, #2a9fd0, #145f86); -webkit-background-clip: text; background-clip: text; }
/* winamp: the classic 2.x base skin (from base-2.91's main.bmp): no gloss anywhere, only 1-px bevels.
   Slate panels raised, black displays sunken, light grey-blue buttons, pale pixel labels, gold accents. */
:root[data-palette="winamp"] {
  --pink: #00c000; --pink-deep: #00e000; --pink-soft: #26263b; --lav: #8fff8f; --accent: #00e000;
  --accent-soft: rgba(0, 224, 0, 0.14); --gel-1: #c6cddc; --gel-2: #a7b0c3; --gel-3: #9aa4b8; --gel-edge: #000;
  --main-rgb: 0, 0, 0; --tint-rgb: 0, 0, 0; --ink-rgb: 0, 0, 0; --soft-rgb: 50, 50, 78;
  --soft-2: #000; --theme-mid: #39395a; --theme-bot: #20203a; --fg: #ececf6; --muted: #bdbdd8;
  --line: rgba(110, 110, 150, 0.4); --bg-top: #2b2b45; --bg-mid: #22223a; --bg-bot: #181829;
  --card: linear-gradient(135deg, #45456a 0%, #39395a 40%, #2c2c46 100%); --card-solid: #39395a; --card-edge: #000;
  --glow: none; --gloss: transparent;
  --raised: inset 1px 1px 0 #5e5e86, inset -1px -1px 0 #181829;
  --sunken-edge: #101018 #6d6d8f #6d6d8f #101018; /* top right bottom left */
  color-scheme: dark;
}
:root[data-palette="winamp"] body::before { content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none; background: rgba(20, 20, 32, 0.6); }
:root[data-palette="winamp"] :is(.bubble, .toolbar, #q, .gel, .chip, .tabs button, .hour, .day, .speech, .pill,
  .segmented, .segmented button, .pills button, .theme-card, .theme-card .swatch, .suggest, .suggest li, .tbar, .tbar span,
  .progress, .progress div, .podium .bar, .podium .bar span, .xp) { border-radius: 0; }
/* raised slate panels */
:root[data-palette="winamp"] .bubble, :root[data-palette="winamp"] .toolbar {
  border: 1px solid #000; box-shadow: var(--raised); backdrop-filter: none; -webkit-backdrop-filter: none;
}
:root[data-palette="winamp"] .bubble::before { display: none; }
:root[data-palette="winamp"] h2 { font: 400 0.8rem var(--font-pixel); text-transform: uppercase; letter-spacing: 0.08em; color: #d8d8f0; }
/* flat grey-blue bevel buttons, no shine; pressed = inverted bevel */
:root[data-palette="winamp"] :is(.gel, .tabs button, .chip, .segmented button, .pills button) {
  background: linear-gradient(180deg, #c6cddc, #9aa4b8); color: #1b1b2c; text-shadow: none; border: 1px solid #000;
  box-shadow: inset 1px 1px 0 #eef1f7, inset -1px -1px 0 #5b6377; filter: none;
}
:root[data-palette="winamp"] .gel::before { display: none; }
:root[data-palette="winamp"] :is(.tabs button[aria-selected="true"], .segmented button[aria-selected="true"],
  .pills button[aria-selected="true"], .chip.active, .gel:active, .gel[aria-pressed="true"]) {
  background: linear-gradient(180deg, #8e98ad, #a7b0c3); color: #000; text-shadow: none;
  box-shadow: inset 1px 1px 0 #5b6377, inset -1px -1px 0 #eef1f7;
}
:root[data-palette="winamp"] .segmented { background: #000; border: 1px solid #000; padding: 1px; }
/* sunken black displays with green LCD text */
:root[data-palette="winamp"] :is(#q, .speech) {
  background: #000; color: #00e000; border: 1px solid; border-color: var(--sunken-edge); box-shadow: none;
  font-family: var(--font-pixel);
}
:root[data-palette="winamp"] #q::placeholder { color: #2f8f2f; }
:root[data-palette="winamp"] .speech { font-size: 0.82rem; }
:root[data-palette="winamp"] .speech::after { display: none; }
:root[data-palette="winamp"] .now-temp { /* the time display */
  font-family: var(--font-pixel); background: #000; color: #00e000; -webkit-text-fill-color: #00e000;
  -webkit-background-clip: border-box; background-clip: border-box; display: inline-block; padding: 6px 12px 4px;
  border: 1px solid; border-color: var(--sunken-edge); text-shadow: 0 0 6px rgba(0, 224, 0, 0.55); letter-spacing: 0.04em;
}
/* recessed tiles, like the kbps/kHz boxes */
:root[data-palette="winamp"] :is(.hour, .day, .pill, .theme-card) {
  background: #26263b; border: 1px solid; border-color: var(--sunken-edge); box-shadow: none;
}
:root[data-palette="winamp"] .hour.now { border-color: #00e000; }
:root[data-palette="winamp"] .tbar { background: #000; }
:root[data-palette="winamp"] .tbar span { background: #00c000; box-shadow: none; }
:root[data-palette="winamp"] .logo-text { background: linear-gradient(180deg, #f2e6b8, #c8b98a 50%, #8a7a4a); -webkit-background-clip: text; background-clip: text; }
:root[data-palette="winamp"] .tagline { color: #e6e6f6; text-shadow: 0 1px 0 #000, 0 0 4px #000; }
:root[data-palette="winamp"] .logo-text { filter: drop-shadow(0 1px 0 #000) drop-shadow(0 0 3px rgba(0, 0, 0, 0.6)); }
:root[data-palette="winamp"] h2 .small { font: 400 0.74rem var(--font-body); text-transform: none; letter-spacing: 0; color: var(--muted); }
:root[data-palette="winamp"] .podium .bar { background: #000; border: 1px solid; border-color: var(--sunken-edge); }
:root[data-palette="winamp"] .podium .bar span { background: #00c000; }
/* winamp-modern: the Winamp 5 "Modern" skin, 2003 (as in its screenshot): pearl-silver body,
   black outlines, navy title bar, deep-blue display with white LCD digits, blue accents, orange bolt */
:root[data-palette="winamp-modern"] {
  --pink: #3d6fe0; --pink-deep: #1c2a5c; --pink-soft: #d9dde6; --lav: #3d6fe0; --accent: #1c2a5c;
  --accent-soft: rgba(61, 111, 224, 0.16); --gel-1: #ffffff; --gel-2: #c2c8d4; --gel-3: #e3e6ee; --gel-edge: #1a1d24;
  --main-rgb: 60, 80, 130; --tint-rgb: 28, 42, 92; --ink-rgb: 10, 15, 30; --soft-rgb: 230, 232, 238;
  --soft-2: #2e4483; --theme-mid: #dfe3ea; --theme-bot: #9ea7ba; --fg: #12151c; --muted: #454c60;
  --line: rgba(20, 25, 40, 0.16); --bg-top: #b8c0d0; --bg-mid: #e4e7ee; --bg-bot: #9ea7ba;
  --card: linear-gradient(180deg, #f6f6f9 0%, #e6e8ee 45%, #c8cdd8 100%);
  --card-solid: #e6e8ee; --card-edge: #1a1d24;
  --glow: 0 0 0 1px #000, 0 6px 16px rgba(10, 15, 30, 0.3); --gloss: rgba(255, 255, 255, 0.8);
}
:root[data-palette="winamp-modern"] .bubble { border-radius: 14px; border: 1px solid #000; }
:root[data-palette="winamp-modern"] .gel, :root[data-palette="winamp-modern"] .tabs button[aria-selected="true"],
:root[data-palette="winamp-modern"] .segmented button[aria-selected="true"], :root[data-palette="winamp-modern"] .pills button[aria-selected="true"],
:root[data-palette="winamp-modern"] .chip.active { color: #12151c; text-shadow: 0 1px 0 #fff; border-color: #000; }
:root[data-palette="winamp-modern"] .tabs button[aria-selected="true"] { box-shadow: inset 0 0 0 2px #3d6fe0; }
:root[data-palette="winamp-modern"] .toolbar, :root[data-palette="winamp-modern"] .tabs button { border-color: #000; }
/* the blue display panel: search, rain bubble, big temperature */
:root[data-palette="winamp-modern"] #q, :root[data-palette="winamp-modern"] .speech, :root[data-palette="winamp-modern"] .now-temp {
  background: linear-gradient(180deg, #24376e 0%, #4562aa 48%, #2e4483 52%, #24376e 100%);
  border: 1px solid #000; color: #eaf2ff;
}
:root[data-palette="winamp-modern"] #q { font-family: var(--font-pixel); letter-spacing: 0.05em; }
:root[data-palette="winamp-modern"] #q::placeholder { color: #a9c0ee; }
:root[data-palette="winamp-modern"] .speech { text-shadow: 0 0 6px rgba(160, 200, 255, 0.6); }
:root[data-palette="winamp-modern"] .speech b { color: #fff; }
:root[data-palette="winamp-modern"] .speech::after { border-bottom-color: #000; }
:root[data-palette="winamp-modern"] .now-temp { /* white segmented LCD digits in a display box */
  -webkit-background-clip: border-box; background-clip: border-box; -webkit-text-fill-color: #f2f7ff;
  font-family: var(--font-pixel); font-size: 2.6rem; padding: 6px 14px 4px; border-radius: 10px; display: inline-block;
  text-shadow: 0 0 8px rgba(170, 205, 255, 0.85); box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.5);
}
:root[data-palette="winamp-modern"] .chip { background: linear-gradient(180deg, #fff, #c8cdd8); color: #12151c; border-color: #000; }
:root[data-palette="winamp-modern"] .hour { background: linear-gradient(180deg, #ffffff, #d5d9e2); border-color: #1a1d24; }
:root[data-palette="winamp-modern"] .hour.now { border-color: #3d6fe0; }
:root[data-palette="winamp-modern"] .day, :root[data-palette="winamp-modern"] .pill { background: rgba(255, 255, 255, 0.55); border-color: #1a1d24; }
:root[data-palette="winamp-modern"] .tbar span { background: linear-gradient(90deg, #6f9cff, #3d6fe0); }
:root[data-palette="winamp-modern"] .logo-text { background: linear-gradient(180deg, #3d5aa8, #1c2a5c); -webkit-background-clip: text; background-clip: text; }
:root[data-palette="winamp-modern"] .spark { color: #ff8a1a; } /* the orange bolt */
:root[data-palette="winamp-modern"] .tagline { color: #1c2a5c; }
@media (prefers-color-scheme: dark) {
  :root[data-palette="aqua"]:not([data-theme="light"]) :is(.hour, .day, .speech, .pill, .theme-card, #q) { background: #1c2736; color: #e3f0ff; border-color: #3d5068; }
  :root[data-palette="aqua"]:not([data-theme="light"]) :is(.tabs button, .chip, .pills button, .segmented) { background: linear-gradient(180deg, #4a5566, #333c4a 50%, #2b3340 52%, #3a4452); color: #e3f0ff; border-color: #1c2430; }
  :root[data-palette="aqua"]:not([data-theme="light"])   { --pinstripe: repeating-linear-gradient(180deg, #2c3646 0 1px, #283140 1px 2px, #232b38 2px 3px); --fg: #e3f0ff; --muted: #9dbbe0; --pink-soft: #1d3a5f; --accent: #8cc8ff; --pink-deep: #8cc8ff; --line: rgba(140, 200, 255, 0.16); --card-edge: rgba(140, 200, 255, 0.35); --card: rgba(18, 40, 70, 0.72); --card-solid: #142a48; }
  :root[data-palette="luna"]:not([data-theme="light"])   { --fg: #e3ecff; --muted: #9fb5e0; --pink-soft: #1a2f5c; --accent: #8db6ff; --pink-deep: #8db6ff; --line: rgba(141, 182, 255, 0.16); --card-edge: rgba(141, 182, 255, 0.35); --card: rgba(14, 30, 70, 0.74); --card-solid: #12264e; }
  :root[data-palette="olive"]:not([data-theme="light"])  { --fg: #eef2da; --muted: #b5bf8a; --pink-soft: #343d18; --accent: #c8d97e; --pink-deep: #c8d97e; --line: rgba(200, 217, 126, 0.16); --card-edge: rgba(200, 217, 126, 0.32); --card: rgba(40, 46, 18, 0.74); --card-solid: #2b3212; }
  :root[data-palette="aero"]:not([data-theme="light"])   { --fg: #e8f4f6; --muted: #a9c3c8; --pink-soft: #133a48; --accent: #7fdcff; --pink-deep: #7fdcff; --line: rgba(127, 220, 255, 0.16); }
  :root[data-palette="aero"]:not([data-theme="light"]) :is(.bubble, .toolbar) { background: linear-gradient(rgba(16, 26, 30, 0.94), rgba(16, 26, 30, 0.94)) padding-box, var(--glass) border-box; }
  :root[data-palette="aero"]:not([data-theme="light"]) :is(.hour, .day, .pill, .theme-card, #q, .speech, .segmented) { background: #1b2a30; border-color: #34505a; color: var(--fg); }
}
body::after { /* Aqua pinstripes (other themes: none) */
  content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none; background: var(--stripes);
}

/* ------------------------------------------------------------ sky: background follows the weather now */
/* data-sky / data-night are set on <html> from the consensus for the current hour.
   Top colour comes from the weather, mid/bottom from the colour theme. */
:root[data-sky] { --sky-mid: var(--theme-mid); --sky-bot: var(--theme-bot); }
:root[data-sky="sunny"]   { --sky-top: #ffd88a; }
:root[data-sky="partly"]  { --sky-top: #bfe0ff; }
:root[data-sky="cloudy"]  { --sky-top: #c3bdd6; --sky-mid: #e6deec; --cloud-rgb: 236, 232, 244; }
:root[data-sky="drizzle"] { --sky-top: #b8c7e0; --sky-mid: #e3ddef; --cloud-rgb: 238, 236, 246; }
:root[data-sky="rain"]    { --sky-top: #8fa6d2; --sky-mid: #d2cdea; --cloud-rgb: 222, 222, 238; }
:root[data-sky="storm"]   { --sky-top: #5e5487; --sky-mid: #a99cc9; --cloud-rgb: 150, 142, 180; }
:root[data-sky="snow"]    { --sky-top: #dfe9ff; --sky-mid: #f6f4ff; }
:root[data-night="true"]  { --sky-top: #5d52a8; --sky-mid: #a993d6; }
:root[data-night="true"][data-sky="cloudy"], :root[data-night="true"][data-sky="drizzle"],
:root[data-night="true"][data-sky="rain"] { --sky-top: #4f5482; --sky-mid: #9a8fc0; }
:root[data-night="true"][data-sky="storm"] { --sky-top: #2f2a4d; --sky-mid: #6f6293; }
:root[data-night="true"] .tagline, :root[data-night="true"] .greeting,
:root[data-sky="storm"] .tagline, :root[data-sky="storm"] .greeting { color: #fff; }
@media (prefers-color-scheme: dark) {
  /* dark UI: same sky, dimmed, so the dark bubbles still sit on something dark */
  :root:not([data-theme="light"]) body::before { content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none; background: rgba(16, 6, 30, 0.62); }
}
:root[data-theme="dark"] body::before { content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none; background: rgba(16, 6, 30, 0.62); }

.sky-fx, .season-fx { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.top, main, footer { position: relative; z-index: 1; }
.top { position: sticky; z-index: 10; }
.fx { position: absolute; inset: 0; }

.fx.sun { /* soft sun glow, top right */
  inset: auto; top: -140px; right: -120px; width: 460px; height: 460px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 236, 150, 0.95) 0 18%, rgba(255, 200, 120, 0.45) 36%, rgba(255, 180, 200, 0) 68%);
  animation: pulse 6s ease-in-out infinite;
}
.fx.rays {
  inset: auto; top: -330px; right: -310px; width: 840px; height: 840px; border-radius: 50%;
  background: repeating-conic-gradient(rgba(255, 255, 255, 0.28) 0 6deg, transparent 6deg 18deg);
  -webkit-mask-image: radial-gradient(circle, #000 20%, transparent 65%); mask-image: radial-gradient(circle, #000 20%, transparent 65%);
  animation: spin 90s linear infinite;
}
.fx.moon {
  inset: auto; top: 40px; right: 8%; width: 110px; height: 110px; border-radius: 50%;
  background: radial-gradient(circle at 38% 38%, #fffbe8, #ffe9b8 55%, rgba(255, 233, 184, 0) 72%);
  box-shadow: 0 0 60px 20px rgba(255, 240, 200, 0.35);
}
.fx.stars {
  height: 65%; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cg fill='%23fff'%3E%3Ccircle cx='20' cy='30' r='1.3'/%3E%3Ccircle cx='90' cy='14' r='0.9'/%3E%3Ccircle cx='130' cy='70' r='1.5'/%3E%3Ccircle cx='60' cy='110' r='1'/%3E%3Ccircle cx='110' cy='140' r='0.8'/%3E%3Cpath d='M44 70l1.6 4 4 1.6-4 1.6-1.6 4-1.6-4-4-1.6 4-1.6z' opacity='.9'/%3E%3C/g%3E%3C/svg%3E");
  -webkit-mask-image: linear-gradient(#000, transparent); mask-image: linear-gradient(#000, transparent);
  animation: twinkle-bg 3.5s ease-in-out infinite;
}

/* clouds: two copies of a tile side by side on a 200% wide strip, slid left forever */
.fx.clouds, .fx.clouds2, .fx.clouds3 {
  --c: var(--cloud-rgb, 255, 255, 255);
  right: auto; width: 200%; height: 60%; filter: blur(3px);
  background-size: 50% 100%; background-repeat: repeat-x;
  animation: drift 140s linear infinite;
}
.fx.clouds, .fx.clouds2 {
  background-image:
    radial-gradient(ellipse 160px 52px at 12% 22%, rgba(var(--c), 0.9), transparent 70%),
    radial-gradient(ellipse 120px 40px at 18% 16%, rgba(var(--c), 0.85), transparent 70%),
    radial-gradient(ellipse 200px 60px at 38% 48%, rgba(var(--c), 0.75), transparent 70%),
    radial-gradient(ellipse 150px 46px at 66% 26%, rgba(var(--c), 0.85), transparent 70%),
    radial-gradient(ellipse 110px 38px at 72% 20%, rgba(var(--c), 0.8), transparent 70%),
    radial-gradient(ellipse 180px 54px at 90% 58%, rgba(var(--c), 0.7), transparent 70%);
}
.fx.clouds2 { top: 18%; opacity: 0.75; animation-duration: 95s; filter: blur(5px); }
.fx.clouds3 { /* the heavy overcast deck: big, dense, low-contrast */
  height: 85%; top: -8%; filter: blur(8px); animation-duration: 210s;
  background-image:
    radial-gradient(ellipse 380px 130px at 10% 20%, rgba(var(--c), 0.95), transparent 72%),
    radial-gradient(ellipse 420px 150px at 34% 34%, rgba(var(--c), 0.9), transparent 72%),
    radial-gradient(ellipse 360px 120px at 58% 14%, rgba(var(--c), 0.95), transparent 72%),
    radial-gradient(ellipse 440px 160px at 80% 40%, rgba(var(--c), 0.88), transparent 72%),
    radial-gradient(ellipse 300px 110px at 96% 12%, rgba(var(--c), 0.92), transparent 72%),
    linear-gradient(rgba(var(--c), 0.55), rgba(var(--c), 0) 85%);
}

/* rain, drizzle, snow: the layer is ROTATED to the drop angle and moves along that
   same axis, so drops never slide sideways. Three layers = parallax depth.
   Each layer is bigger than the screen so the rotation leaves no gaps. */
.fx.rain-far, .fx.rain-mid, .fx.rain-near, .fx.drizzle-far, .fx.drizzle-near, .fx.snow-far, .fx.snow-near {
  inset: -40%; --ang: 11deg; transform: rotate(var(--ang));
  animation: fall-r var(--speed) linear infinite;
}
.fx.rain-far  { --tile: 97px;  --speed: 1.05s; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='53' height='97'%3E%3Cg stroke='%237d9fd8' stroke-width='0.9' stroke-linecap='round' opacity='0.35'%3E%3Cline x1='9.3' y1='82.2' x2='9.3' y2='94.9'/%3E%3Cline x1='15.0' y1='48.1' x2='15.0' y2='58.7'/%3E%3Cline x1='33.6' y1='76.5' x2='33.6' y2='84.8'/%3E%3Cline x1='4.3' y1='81.1' x2='4.3' y2='91.6'/%3E%3C/g%3E%3C/svg%3E"); }
.fx.rain-mid  { --tile: 139px; --speed: 0.72s; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='79' height='139'%3E%3Cg stroke='%237aa6e6' stroke-width='1.3' stroke-linecap='round' opacity='0.55'%3E%3Cline x1='72.8' y1='131.7' x2='72.8' y2='146.4'/%3E%3Cline x1='72.8' y1='-7.3' x2='72.8' y2='7.4'/%3E%3Cline x1='9.2' y1='116.1' x2='9.2' y2='139.0'/%3E%3Cline x1='51.9' y1='42.8' x2='51.9' y2='64.1'/%3E%3C/g%3E%3C/svg%3E"); }
.fx.rain-near { --tile: 211px; --speed: 0.48s; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='127' height='211'%3E%3Cg stroke='%238db4ee' stroke-width='2' stroke-linecap='round' opacity='0.7'%3E%3Cline x1='31.8' y1='114.8' x2='31.8' y2='148.0'/%3E%3Cline x1='76.1' y1='132.0' x2='76.1' y2='158.6'/%3E%3C/g%3E%3C/svg%3E"); filter: blur(0.6px); }
:root[data-sky="storm"] .fx.rain-far, :root[data-sky="storm"] .fx.rain-mid, :root[data-sky="storm"] .fx.rain-near { --ang: 17deg; }
.fx.drizzle-far  { --ang: 6deg; --tile: 71px;  --speed: 2.3s; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='37' height='71'%3E%3Cg stroke='%238fb0dd' stroke-width='0.8' stroke-linecap='round' opacity='0.35'%3E%3Cline x1='10.3' y1='7.3' x2='10.3' y2='12.0'/%3E%3Cline x1='7.8' y1='4.7' x2='7.8' y2='9.4'/%3E%3Cline x1='31.5' y1='56.8' x2='31.5' y2='62.6'/%3E%3C/g%3E%3C/svg%3E"); }
.fx.drizzle-near { --ang: 6deg; --tile: 113px; --speed: 1.5s; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='61' height='113'%3E%3Cg stroke='%238fb0dd' stroke-width='1.1' stroke-linecap='round' opacity='0.5'%3E%3Cline x1='37.3' y1='83.8' x2='37.3' y2='92.1'/%3E%3Cline x1='54.8' y1='83.6' x2='54.8' y2='92.4'/%3E%3Cline x1='4.6' y1='52.6' x2='4.6' y2='61.5'/%3E%3C/g%3E%3C/svg%3E"); }
.fx.snow-far  { --ang: -6deg; --tile: 110px; --speed: 11s; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='70' height='110'%3E%3Cg fill='%23fff' opacity='0.75'%3E%3Ccircle cx='53.2' cy='87.8' r='1.4'/%3E%3Ccircle cx='20.2' cy='4.0' r='1.6'/%3E%3Ccircle cx='33.2' cy='81.5' r='1.4'/%3E%3Ccircle cx='51.7' cy='31.8' r='1.7'/%3E%3C/g%3E%3C/svg%3E"); animation-name: snow-r; }
.fx.snow-near { --ang: 8deg;  --tile: 190px; --speed: 7s;  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='190'%3E%3Cg fill='%23fff' opacity='0.95'%3E%3Ccircle cx='46.7' cy='31.5' r='3.1'/%3E%3Ccircle cx='13.6' cy='101.5' r='2.8'/%3E%3Ccircle cx='11.7' cy='96.4' r='2.4'/%3E%3C/g%3E%3C/svg%3E"); animation-name: snow-r; filter: drop-shadow(0 0 2px rgba(150, 170, 230, 0.6)); }

/* thunderstorm: irregular flashes + a bolt that only shows during the flash */
.fx.flash {
  background: radial-gradient(ellipse at 70% 10%, rgba(255, 255, 255, 0.95), rgba(220, 210, 255, 0.5) 40%, transparent 75%);
  opacity: 0; animation: flash 9s linear infinite;
}
.fx.bolt {
  inset: auto; top: 0; right: 18%; width: 90px; height: 200px; opacity: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='260'%3E%3Cpath d='M70 0 L30 120 L62 120 L38 260 L100 96 L66 96 L92 0Z' fill='%23fffbe0' stroke='%23fff' stroke-width='3' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
  filter: drop-shadow(0 0 10px #fff) drop-shadow(0 0 22px rgba(200, 180, 255, 0.9));
  animation: flash 9s linear infinite;
}

@keyframes fall-r { from { transform: rotate(var(--ang)) translateY(0); } to { transform: rotate(var(--ang)) translateY(var(--tile)); } }
@keyframes snow-r {
  0% { transform: rotate(var(--ang)) translate(0, 0); }
  50% { transform: rotate(var(--ang)) translate(10px, calc(var(--tile) / 2)); }
  100% { transform: rotate(var(--ang)) translate(0, var(--tile)); }
}
@keyframes flash {
  0%, 57%, 59.5%, 61%, 63%, 86%, 88.5%, 100% { opacity: 0; }
  58% { opacity: 0.9; } 60% { opacity: 0.55; } 62% { opacity: 0.75; } 87% { opacity: 0.8; }
}
@keyframes drift { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes pulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.06); opacity: 0.85; } }
@keyframes twinkle-bg { 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } }

/* seasons: petals / leaves drift down with a sway (spawned by app.js) */
.season-fx span {
  position: absolute; top: -40px; left: var(--x); font-size: var(--size, 18px);
  animation: flutter var(--dur) linear var(--delay) infinite;
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.12));
}
@keyframes flutter {
  0% { transform: translate(0, 0) rotate(0); }
  25% { transform: translate(var(--drift), 25vh) rotate(90deg); }
  50% { transform: translate(0, 50vh) rotate(180deg); }
  75% { transform: translate(calc(var(--drift) * -1), 75vh) rotate(270deg); }
  100% { transform: translate(0, 105vh) rotate(360deg); }
}
.snowman {
  position: fixed; z-index: 5; left: 14px; bottom: 12px; font-size: 38px; cursor: pointer;
  filter: drop-shadow(0 3px 4px rgba(0, 0, 0, 0.2)); animation: wobble 4s ease-in-out infinite; transform-origin: bottom center;
}
@media (max-width: 700px) { .snowman { bottom: calc(76px + env(safe-area-inset-bottom)); font-size: 30px; } }
@keyframes wobble { 0%, 100% { transform: rotate(-4deg); } 50% { transform: rotate(4deg); } }

/* konami code party */
:root.party .logo-text { animation: rainbow 1.2s linear infinite; }
@keyframes rainbow { to { filter: hue-rotate(360deg) drop-shadow(0 2px 0 #fff); } }

/* ------------------------------------------------------------ anime bits */
.greeting { font: 700 0.82rem var(--font-head); color: var(--muted); margin-bottom: 2px; }
.mood { font-size: 0.92rem; text-align: center; color: var(--fg); font-weight: 700; }
.mood:empty { display: none; }
.hero-actions { display: flex; justify-content: center; }
.hero-actions .gel { font-size: 0.85rem; padding: 6px 14px; }
.now-icon { border: 0; background: none; padding: 0; cursor: pointer; }
.now-icon.boop { animation: boop 0.5s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes boop { 0% { transform: scale(1); } 40% { transform: scale(1.25) rotate(-8deg); } 100% { transform: scale(1); } }
.kao-pop {
  position: fixed; z-index: 30; pointer-events: none; font: 700 1rem var(--font-body); color: var(--pink-deep);
  text-shadow: 0 0 6px #fff, 0 0 2px #fff; white-space: nowrap; animation: popup 1.4s ease-out forwards;
}
@keyframes popup { 0% { opacity: 0; transform: translate(-50%, 0) scale(0.6); } 20% { opacity: 1; transform: translate(-50%, -20px) scale(1); } 100% { opacity: 0; transform: translate(-50%, -70px); } }
.spark-trail {
  position: fixed; z-index: 40; pointer-events: none; color: var(--pink); font-size: 14px;
  text-shadow: 0 0 6px #fff; animation: trail 0.8s ease-out forwards;
}
@keyframes trail { from { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(0); } to { opacity: 0; transform: translate(-50%, 10px) scale(0.3) rotate(90deg); } }
.spark-trail.rise { animation: trail-rise 0.9s ease-out forwards; }
@keyframes trail-rise { from { opacity: 0.95; transform: translate(-50%, -50%) scale(0.6); } to { opacity: 0; transform: translate(-30%, -46px) scale(1.15); } }
.spark-trail.ghost { animation: trail-ghost 0.45s linear forwards; transform: none; line-height: 0; }
@keyframes trail-ghost { from { opacity: 0.75; } to { opacity: 0; } }

/* ------------------------------------------------------------ header: bubbly logo + search bubble */
.top {
  position: sticky; top: 0; z-index: 10;
  max-width: 1100px; margin: 0 auto;
  padding: calc(env(safe-area-inset-top) + 8px) 12px 0;
  display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 4px 14px;
}
.brand { display: flex; flex-direction: column; line-height: 1; padding: 0 4px; }
.logo { display: inline-flex; align-items: center; gap: 4px; }
.logo-icon { font-size: 1.5rem; filter: drop-shadow(0 2px 2px rgba(var(--tint-rgb), 0.3)); }
.logo-text { /* sticker-style bubble letters */
  font: 600 1.7rem/1 var(--font-head); letter-spacing: -0.01em;
  background: linear-gradient(180deg, var(--gel-1), var(--pink-deep) 60%, var(--lav));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 2px 0 #fff) drop-shadow(0 3px 6px rgba(var(--tint-rgb), 0.3));
}
.spark { display: inline-block; color: var(--pink); animation: twinkle 2.4s ease-in-out infinite; }
.tagline {
  margin: 3px 0 0 2px; padding: 0; border: 0; background: none; cursor: pointer; text-align: left;
  font: 400 0.62rem var(--font-pixel); color: var(--muted); letter-spacing: 0.06em; text-transform: lowercase;
}
.tagline:hover { color: var(--pink); }
.toolbar {
  display: flex; gap: 8px; padding: 7px; min-width: 0;
  background: var(--card); border: 1px solid var(--card-edge); border-radius: 999px;
  backdrop-filter: blur(14px) saturate(1.3); -webkit-backdrop-filter: blur(14px) saturate(1.3);
  box-shadow: var(--glow);
}
.top .chips { grid-column: 1 / -1; }
@media (max-width: 640px) {
  .top { grid-template-columns: minmax(0, 1fr); }
  .brand { flex-direction: row; align-items: baseline; gap: 8px; }
  .logo-text { font-size: 1.45rem; }
}
.search { position: relative; flex: 1; min-width: 0; }
.search-icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); font-size: 0.9rem; }
#q {
  width: 100%; height: 40px; padding: 0 14px 0 36px;
  border-radius: 999px; border: 2px solid var(--pink-soft);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.6));
  color: var(--fg); font: 600 16px var(--font-body); /* 16px: no iOS zoom */
  box-shadow: inset 0 2px 4px rgba(var(--tint-rgb), 0.12);
}
:root[data-theme="dark"] #q { background: rgba(30, 10, 45, 0.7); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) #q { background: rgba(30, 10, 45, 0.7); } }
#q::placeholder { color: var(--muted); }
#q:focus { outline: none; border-color: var(--pink); box-shadow: 0 0 0 4px var(--accent-soft); }
.suggest {
  position: absolute; left: 0; right: 0; top: 46px; margin: 0; padding: 6px; list-style: none;
  background: var(--card-solid); border: 2px solid var(--pink-soft); border-radius: 18px;
  box-shadow: 0 12px 30px rgba(var(--tint-rgb), 0.25); max-height: 60vh; overflow: auto;
}
.suggest li { padding: 9px 12px; border-radius: 12px; cursor: pointer; font-weight: 600; }
.suggest li .muted { font-weight: 400; font-size: 0.85rem; }
.suggest li[aria-selected="true"], .suggest li:hover { background: var(--accent-soft); }

/* glossy gel button: the whole point of the era */
.gel {
  position: relative; overflow: hidden; cursor: pointer;
  border: 1px solid var(--gel-edge); border-radius: 999px; padding: 8px 16px;
  font: 700 0.92rem var(--font-body); color: #fff; text-shadow: 0 1px 1px rgba(var(--ink-rgb), 0.5);
  background: linear-gradient(180deg, var(--gel-1) 0%, var(--gel-2) 55%, var(--gel-3) 100%);
  box-shadow: 0 3px 8px rgba(var(--tint-rgb), 0.35), inset 0 -2px 4px rgba(var(--ink-rgb), 0.2);
  transition: transform 0.12s ease, filter 0.12s ease;
}
.gel::before { /* the shine */
  content: ""; position: absolute; left: 6%; right: 6%; top: 0; height: 50%;
  border-radius: 999px 999px 40% 40% / 999px 999px 60% 60%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.12));
  pointer-events: none;
}
.gel:hover { filter: brightness(1.06) saturate(1.1); }
.gel:active { transform: scale(0.94); }
.gel:disabled { filter: grayscale(0.6); cursor: wait; }
.gel.round { width: 40px; height: 40px; padding: 0; flex: none; font-size: 1.15rem; line-height: 1; }
.gel.round::before { /* orb highlight: an ellipse hugging the inner rim, Aqua style */
  left: 10%; right: 10%; top: 1px; height: 52%;
  border-radius: 50% 50% 50% 50% / 64% 64% 36% 36%;
}
.gel[aria-pressed="true"] { background: linear-gradient(180deg, #ffe58a, #ffb92e 55%, #ffc94d); border-color: #e09a00; }

.chips { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; margin: 4px 0 0; padding-bottom: 2px; }
.chips::-webkit-scrollbar { display: none; }
.chip {
  flex: none; padding: 4px 12px; border-radius: 999px; cursor: pointer; white-space: nowrap;
  font: 700 0.84rem var(--font-body); color: var(--accent);
  background: linear-gradient(180deg, #fff, var(--pink-soft));
  border: 1px solid rgba(var(--main-rgb), 0.4); box-shadow: 0 2px 5px rgba(var(--tint-rgb), 0.15);
}
:root[data-theme="dark"] .chip { background: linear-gradient(180deg, #4a2050, #2f1240); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .chip { background: linear-gradient(180deg, #4a2050, #2f1240); } }
.chip.active { color: #fff; background: linear-gradient(180deg, var(--gel-1), var(--gel-2)); border-color: var(--gel-edge); }
.chip.recent { opacity: 0.8; }

/* ------------------------------------------------------------ tabs */
.tabs {
  position: relative; z-index: 2; /* above the sky / season effect layers (phones: fixed, below) */
  display: flex; gap: 6px; justify-content: center;
  max-width: 1100px; margin: 10px auto 0; padding: 0 12px;
}
.tabs button {
  flex: 0 1 160px; cursor: pointer; padding: 8px 12px; border-radius: 999px;
  font: 700 0.92rem var(--font-head); color: var(--accent);
  background: var(--card); border: 1px solid var(--card-edge);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 2px 8px rgba(var(--tint-rgb), 0.12);
}
.tabs button[aria-selected="true"] {
  color: #fff; text-shadow: 0 1px 1px rgba(var(--ink-rgb), 0.5);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0) 50%),
    linear-gradient(180deg, var(--gel-1), var(--gel-2));
  border-color: var(--gel-edge);
}
@media (max-width: 700px) {
  /* phone: app-style tab bar at the bottom */
  .tabs {
    position: fixed; z-index: 20; left: 0; right: 0; bottom: 0; margin: 0;
    padding: 8px 10px calc(8px + env(safe-area-inset-bottom));
    background: var(--card); border-top: 1px solid var(--card-edge);
    backdrop-filter: blur(16px) saturate(1.3); -webkit-backdrop-filter: blur(16px) saturate(1.3);
  }
  .tabs button { flex: 1; }
  body { padding-bottom: calc(70px + env(safe-area-inset-bottom)); }
}

/* ------------------------------------------------------------ layout + bubbles */
main { max-width: 1100px; margin: 0 auto; padding: 12px 12px 8px; }
.panel { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.panel[hidden] { display: none; }
.bubble {
  position: relative; min-width: 0; padding: 14px 16px;
  background: var(--card); border: 1px solid var(--card-edge); border-radius: 24px;
  backdrop-filter: blur(14px) saturate(1.3); -webkit-backdrop-filter: blur(14px) saturate(1.3);
  box-shadow: var(--glow), inset 0 1px 0 rgba(255, 255, 255, 0.9);
}
.bubble::before { /* Aero glass highlight across the top */
  content: ""; position: absolute; inset: 1px 1px auto; height: 42px; border-radius: 23px 23px 60% 60% / 23px 23px 16px 16px;
  background: linear-gradient(180deg, var(--gloss), rgba(255, 255, 255, 0));
  pointer-events: none;
}
.bubble > * { position: relative; }
.section-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.section-head h2 { margin: 0; }
@media (min-width: 900px) {
  /* desktop dashboard: hero + right-now side by side */
  .panel[data-panel="home"] { grid-template-columns: 3fr 2fr; }
  .panel[data-panel="home"] > .bubble:not(.hero):not(.now) { grid-column: 1 / -1; }
}

/* ------------------------------------------------------------ hero */
.hero { display: grid; gap: 10px; }
.hero-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.hero h1 { font-size: 1.6rem; line-height: 1.15; color: var(--accent); }
.hero-now { display: flex; align-items: center; gap: 14px; }
.now-icon { font-size: 4.2rem; line-height: 1; filter: drop-shadow(0 4px 6px rgba(var(--tint-rgb), 0.25)); }
.now-temp {
  font: 600 3.4rem/1 var(--font-head); letter-spacing: -0.02em;
  background: linear-gradient(180deg, var(--pink), var(--lav)); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.now-cond { font: 700 1.05rem var(--font-head); }
.speech { /* rain verdict as a chat bubble */
  position: relative; padding: 11px 14px; border-radius: 18px;
  background: linear-gradient(180deg, #fff, var(--soft-2)); color: #4a1d3f;
  border: 2px solid var(--pink-soft); font-size: 0.98rem;
}
.speech::after {
  content: ""; position: absolute; top: -10px; left: 36px; border: 10px solid transparent;
  border-bottom-color: var(--pink-soft); border-top: 0;
}
.speech:empty { display: none; }
:root[data-theme="dark"] .speech { background: linear-gradient(180deg, #3d1a4f, #2c1240); color: var(--fg); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .speech { background: linear-gradient(180deg, #3d1a4f, #2c1240); color: var(--fg); } }
.progress { height: 6px; border-radius: 6px; background: var(--pink-soft); overflow: hidden; }
.progress div {
  height: 100%; width: 0; border-radius: 6px; transition: width 0.25s;
  background: repeating-linear-gradient(45deg, var(--pink) 0 8px, var(--gel-1) 8px 16px);
}
.pill {
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  padding: 4px 10px; border-radius: 999px; font: 700 0.8rem var(--font-body);
  background: rgba(255, 255, 255, 0.7); border: 1px solid var(--card-edge);
}
:root[data-theme="dark"] .pill { background: rgba(0, 0, 0, 0.25); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .pill { background: rgba(0, 0, 0, 0.25); } }
.badge { display: inline-flex; align-items: center; gap: 5px; font-size: 0.82rem; white-space: nowrap; }
.dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; box-shadow: inset 0 -1px 2px rgba(0, 0, 0, 0.2), 0 0 0 1.5px rgba(255, 255, 255, 0.8); }
.dot.high { background: radial-gradient(circle at 35% 30%, #b8ffdf, var(--high) 60%); }
.dot.medium { background: radial-gradient(circle at 35% 30%, #fff1c4, var(--medium) 60%); }
.dot.low { background: radial-gradient(circle at 35% 30%, #ffd0d9, var(--low) 60%); }
.dot.na { background: var(--line); }

/* ------------------------------------------------------------ right now */
.now-lines { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; font-size: 0.92rem; }
.now-lines li { display: flex; gap: 8px; align-items: baseline; }
.now-lines .ic { flex: none; width: 1.4em; text-align: center; }

/* ------------------------------------------------------------ next hours strip */
.hours { display: flex; gap: 8px; overflow-x: auto; padding: 2px 2px 6px; scroll-snap-type: x proximity; scrollbar-width: thin; }
.hour {
  flex: none; width: 70px; scroll-snap-align: start; text-align: center;
  padding: 8px 4px; border-radius: 18px; display: grid; gap: 2px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.85), rgba(var(--soft-rgb), 0.6));
  border: 1px solid var(--card-edge);
}
:root[data-theme="dark"] .hour { background: linear-gradient(180deg, rgba(90, 36, 80, 0.6), rgba(40, 16, 60, 0.6)); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .hour { background: linear-gradient(180deg, rgba(90, 36, 80, 0.6), rgba(40, 16, 60, 0.6)); } }
.hour.now { border: 2px solid var(--pink); }
.hour .h-time { font: 700 0.78rem var(--font-body); color: var(--muted); }
.hour .h-icon { font-size: 1.6rem; line-height: 1.2; }
.hour .h-temp { font: 600 1.1rem var(--font-head); }
.hour .h-rain { font-size: 0.74rem; color: var(--rain-dark); font-weight: 700; min-height: 1.1em; }
.hour .dot { margin: 2px auto 0; width: 8px; height: 8px; }

/* ------------------------------------------------------------ 7-day list */
.days { display: grid; gap: 6px; }
.day { border-radius: 18px; border: 1px solid var(--card-edge); background: rgba(255, 255, 255, 0.45); }
:root[data-theme="dark"] .day { background: rgba(0, 0, 0, 0.18); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .day { background: rgba(0, 0, 0, 0.18); } }
.day summary {
  list-style: none; cursor: pointer; padding: 8px 12px;
  display: grid; grid-template-columns: 5.4em 2em 3.4em 1fr 0.9em; align-items: center; gap: 8px;
}
.day .tcell { display: flex; align-items: center; gap: 8px; min-width: 0; }
.day .tcell .tbar { flex: 1; }
.day .d-lo, .day .d-hi { width: 2.3em; flex: none; }
.day summary::-webkit-details-marker { display: none; }
.day .d-name { font: 700 0.95rem var(--font-head); }
.day .d-icon { font-size: 1.5rem; text-align: center; }
.day .d-rain { font-size: 0.78rem; font-weight: 800; color: var(--rain-dark); text-align: right; }
.day .d-lo { text-align: right; color: var(--muted); font-weight: 700; }
.day .d-hi { font-weight: 800; }
.tbar { position: relative; height: 8px; border-radius: 8px; background: var(--line); }
.tbar span {
  position: absolute; top: 0; bottom: 0; border-radius: 8px;
  background: linear-gradient(90deg, var(--aqua), var(--pink));
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.7);
}
.day[open] summary { border-bottom: 1px dashed var(--line); }
.day-more { padding: 8px 14px 10px; display: grid; gap: 4px; font-size: 0.88rem; }
.day-more .row { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
@media (max-width: 420px) {
  .day summary { grid-template-columns: 4.4em 1.8em 2.9em 1fr 0.8em; gap: 6px; padding: 8px 10px; }
  .day .tcell { gap: 5px; }
  .day .d-name { font-size: 0.86rem; }
}

/* ------------------------------------------------------------ charts tab */
.segmented { display: inline-flex; padding: 3px; border-radius: 999px; background: var(--pink-soft); border: 1px solid var(--card-edge); }
.segmented button, .pills button {
  border: 0; background: none; color: var(--accent); cursor: pointer;
  padding: 6px 12px; border-radius: 999px; font: 700 0.86rem var(--font-body);
}
.segmented button[aria-selected="true"], .pills button[aria-selected="true"] {
  color: #fff; text-shadow: 0 1px 1px rgba(var(--ink-rgb), 0.45);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0) 50%), linear-gradient(180deg, var(--gel-1), var(--gel-2));
  box-shadow: 0 2px 6px rgba(var(--tint-rgb), 0.3);
}
.pills { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; margin-bottom: 8px; }
.pills::-webkit-scrollbar { display: none; }
.pills button { flex: none; border: 1px solid rgba(var(--main-rgb), 0.35); background: rgba(255, 255, 255, 0.5); }
.legend { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 0.8rem; color: var(--muted); margin: 2px 0 4px; }
.legend i { display: inline-block; vertical-align: middle; margin-right: 5px; }
.legend .line { width: 18px; height: 3px; background: var(--pink-deep); border-radius: 2px; }
.legend .dash { width: 18px; border-top: 3px dashed var(--feels); }
.legend .band { width: 18px; height: 10px; background: var(--accent-soft); border-radius: 3px; }
.legend .band.feels { background: var(--feels-soft); }
.legend .bar { width: 10px; height: 10px; background: var(--rain); border-radius: 2px; }
.legend .bar.dark { background: var(--rain-dark); }
.legend .bar.drizzle { background: var(--drizzle); }
.legend .obs { width: 8px; height: 8px; border-radius: 50%; background: var(--obs); }
.chart { width: 100%; height: 440px; touch-action: pan-y; overflow: hidden; }
@media (max-width: 560px) { .chart { height: 380px; } }
.note { font-size: 0.8rem; margin: 4px 0 0; }

/* ------------------------------------------------------------ details tab */
.more { display: grid; gap: 2px; }
.more details { border-bottom: 1px dashed var(--line); padding: 9px 0; }
.more details:last-child { border-bottom: 0; }
.more summary { cursor: pointer; font: 600 1rem var(--font-head); color: var(--accent); }
.more details p { margin: 8px 0; }
.table-wrap { overflow-x: auto; }
table.plain { border-collapse: collapse; font-size: 0.86rem; margin: 6px 0; width: 100%; }
table.plain th, table.plain td { padding: 4px 8px; border-bottom: 1px solid var(--line); text-align: left; }
table.num td:not(:first-child), table.num th:not(:first-child) { text-align: right; font-variant-numeric: tabular-nums; }
.sources { margin: 8px 0; padding-left: 18px; font-size: 0.88rem; }
.sources .bad { color: var(--muted); }

/* ------------------------------------------------------------ source toggles */
.toggles { display: grid; gap: 12px; }
.toggles h3 { margin: 0 0 4px; font: 600 0.92rem var(--font-head); color: var(--accent); }
.toggles .group { display: grid; gap: 2px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.toggle { display: flex; align-items: center; gap: 10px; padding: 5px 8px; border-radius: 12px; cursor: pointer; }
.toggle:hover { background: var(--accent-soft); }
.toggle input { position: absolute; opacity: 0; pointer-events: none; }
.switch {
  flex: none; position: relative; width: 38px; height: 22px; border-radius: 999px;
  background: linear-gradient(180deg, #e9d6e3, #f6eaf2); border: 1px solid rgba(var(--ink-rgb), 0.35);
  box-shadow: inset 0 2px 3px rgba(var(--ink-rgb), 0.2); transition: background 0.15s;
}
.switch::after {
  content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff, #f3dceb); box-shadow: 0 1px 3px rgba(var(--ink-rgb), 0.35);
  transition: left 0.15s;
}
.toggle input:checked + .switch { background: linear-gradient(180deg, var(--gel-1), var(--gel-2)); border-color: var(--gel-edge); }
.toggle input:checked + .switch::after { left: 18px; }
.toggle input:focus-visible + .switch { outline: 2px solid var(--pink); outline-offset: 2px; }
.toggle .t-name { font-weight: 700; }
.toggle .t-note { display: block; font-size: 0.76rem; color: var(--muted); }
.toggle.off .t-name { color: var(--muted); }
.toggle .t-status { margin-left: auto; font-size: 0.74rem; color: var(--muted); text-align: right; max-width: 42%; }
.toggle .t-status.ok { color: var(--high); font-weight: 800; }

/* ------------------------------------------------------------ expert of the day */
.expert-crown { display: flex; align-items: center; gap: 12px; }
.expert-crown .crown { font-size: 2.2rem; }
.expert-crown b { font: 600 1.15rem var(--font-head); color: var(--accent); }
.podium { display: grid; gap: 4px; margin-top: 8px; font-size: 0.86rem; }
.podium .row { display: grid; grid-template-columns: minmax(8em, 13em) 1fr 3.6em; align-items: center; gap: 8px; } /* every bar starts at the same x */
.podium .row > span:last-child { text-align: right; white-space: nowrap; }
.podium .bar { height: 8px; margin: 0 4px; border-radius: 8px; overflow: hidden;
  background: color-mix(in srgb, var(--fg) 14%, transparent); }
.podium .bar span { display: block; height: 100%; border-radius: 8px; background: var(--pink); }
.podium .head { font-size: 0.72rem; color: var(--muted); }
.podium .head > span:nth-child(2) { text-align: center; }

/* ------------------------------------------------------------ theme picker */
.themes { display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
.theme-card {
  display: grid; gap: 4px; padding: 10px; border-radius: 18px; cursor: pointer; text-align: left;
  border: 2px solid var(--card-edge); background: rgba(255, 255, 255, 0.4); color: var(--fg); font: inherit;
}
.theme-card[aria-checked="true"] { border-color: var(--pink); box-shadow: 0 0 0 3px var(--accent-soft); }
.theme-card .swatch { height: 26px; border-radius: 999px; border: 1px solid rgba(0, 0, 0, 0.15); position: relative; overflow: hidden; }
.theme-card .swatch::before { content: ""; position: absolute; left: 6%; right: 6%; top: 0; height: 50%; border-radius: 999px; background: linear-gradient(rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0.1)); }
.theme-card b { font: 600 0.95rem var(--font-head); }
.theme-card small { color: var(--muted); font-size: 0.74rem; }

/* ------------------------------------------------------------ "the experts are fighting" (Windows XP Luna) */
.xp-backdrop { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; background: rgba(30, 10, 40, 0.25); padding: 16px; }
.xp {
  width: min(420px, 100%); border-radius: 8px 8px 4px 4px; overflow: hidden; font: 13px Tahoma, Verdana, "Segoe UI", sans-serif; color: #000;
  background: #ece9d8; border: 1px solid #0831d9; box-shadow: 4px 6px 18px rgba(0, 0, 0, 0.35); animation: xp-pop 0.18s ease-out;
}
.xp-title {
  display: flex; align-items: center; justify-content: space-between; padding: 5px 6px 5px 8px; color: #fff; font-weight: 700;
  background: linear-gradient(180deg, #0997ff, #0053ee 8%, #0050ee 40%, #06f 88%, #06f 93%, #005bff 95%, #003dd7);
  text-shadow: 1px 1px #0f1089;
}
.xp-x {
  width: 21px; height: 21px; border-radius: 3px; border: 1px solid #fff; color: #fff; font-weight: 700; cursor: pointer; line-height: 1;
  background: linear-gradient(180deg, #e98d75, #e2582f 45%, #c4361b);
}
.xp-body { display: flex; gap: 14px; padding: 16px 14px 10px; align-items: flex-start; }
.xp-icon { font-size: 30px; line-height: 1; }
.xp-body p { margin: 0 0 6px; }
.xp-btns { display: flex; justify-content: flex-end; gap: 6px; padding: 6px 12px 12px; flex-wrap: wrap; }
.xp-btn {
  min-width: 75px; padding: 4px 10px; font: 12px Tahoma, Verdana, sans-serif; cursor: pointer; border-radius: 3px;
  border: 1px solid #003c74; background: linear-gradient(180deg, #fff, #ece9d8 86%, #d6d0c5);
}
.xp-btn:hover { box-shadow: inset 0 0 0 2px #f8b636; }
@keyframes xp-pop { from { transform: scale(0.92); opacity: 0; } }

/* ------------------------------------------------------------ footer: 88x31 badges */
footer { max-width: 1100px; margin: 0 auto; padding: 6px 12px 24px; text-align: center; }
.badges { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin: 6px 0 10px; }
.b88 {
  width: 88px; height: 31px; display: inline-flex; align-items: center; justify-content: center;
  font: 8px/1.15 var(--font-pixel); color: #fff; text-align: center; letter-spacing: 0.02em;
  border: 1px solid rgba(0, 0, 0, 0.35); box-shadow: inset 1px 1px 0 rgba(255, 255, 255, 0.7), inset -1px -1px 0 rgba(0, 0, 0, 0.25);
  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.35);
}
.b-pink { background: linear-gradient(180deg, var(--gel-1), var(--gel-edge)); text-transform: uppercase; padding: 0 3px; overflow: hidden; }
.b-aqua { background: linear-gradient(180deg, #8fe3ff, #1c8fd1); }
.b-lav { background: linear-gradient(180deg, #d7b8ff, #7a45e0); }
.b-mint { background: linear-gradient(180deg, #a7f5d2, #1fae73); }
.b-butter { background: linear-gradient(180deg, #ffe9a0, #f0a500); }
.b-clay { background: linear-gradient(180deg, #f2a98a, #c2603e); }
.credits { max-width: 760px; margin: 0 auto; }
.offline { background: linear-gradient(90deg, #ffe58a, #ffb92e); color: #4a1d3f; text-align: center; font-weight: 700; font-size: 0.85rem; padding: 4px; }

/* ------------------------------------------------------------ motion */
@keyframes twinkle { 0%, 100% { opacity: 1; transform: scale(1) rotate(0); } 50% { opacity: 0.4; transform: scale(0.75) rotate(20deg); } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}