/* ======================================================================
   Modern theme: glass cards over a soft colour field, and a floating pill
   at the bottom (Home, Rant, Friends, Profile).
   Light phone: "Daylight" (white frosted glass on pastels, ink text).
   Dark phone:  "Night" (smoked glass on an aurora, white text, lime actions).
   Rules (ui-ux-pro-max glassmorphism): 10-30% glass, 16-20px blur, a 1px light
   edge, text kept at 4.5:1, a solid fallback when blur or transparency is off.
   ====================================================================== */

:root[data-theme="modern"], [data-look="modern"] {
  --canvas: #F4F1FA;
  --surface: rgb(255 255 255 / .58);
  --surface-2: rgb(255 255 255 / .74);
  --line: rgb(255 255 255 / .8);
  --line-strong: rgb(20 20 40 / .16);
  --ink: #141413;
  --ink-2: #4E4C5C;
  --on-ink: #FAFAF7;
  --accent: #5B3BEA;
  --accent-soft: rgb(91 59 234 / .12);
  --on-accent: #FFFFFF;
  --scrim: rgb(30 24 60 / .35);
  --block-ink: #141413;
  --block-ink-2: rgb(20 20 19 / .7);

  --r-pill: 999px;
  --r-card: 26px;
  --r-input: 18px;
  --r-tile: 16px;

  /* Glass recipe */
  --glass: rgb(255 255 255 / .56);
  --glass-strong: rgb(255 255 255 / .88);
  --glass-edge: rgb(255 255 255 / .78);
  --glass-shadow: 0 10px 30px rgb(40 40 90 / .12), inset 0 1px 0 rgb(255 255 255 / .9);
  --glass-blur: blur(18px) saturate(160%);
  --tint: 34%;          /* how much of a game's pastel goes into its card */
  --cta: #141413;
  --cta-ink: #FAFAF7;
  --cta-glow: rgb(20 20 19 / .18);

  /* The colour field behind everything (also drawn in the look picker preview). */
  --paper:
    radial-gradient(42% 30% at 6% 8%, rgb(205 187 245 / .95), transparent 70%),
    radial-gradient(40% 28% at 96% 34%, rgb(216 239 160 / .9), transparent 70%),
    radial-gradient(46% 30% at 0% 74%, rgb(247 195 172 / .85), transparent 70%),
    radial-gradient(44% 30% at 100% 98%, rgb(188 229 204 / .9), transparent 70%);
  --paper-drift:
    radial-gradient(26.2% 18.8% at 22.5% 23.8%, rgb(205 187 245 / .95), transparent 70%),
    radial-gradient(25% 17.5% at 78.8% 40%, rgb(216 239 160 / .9), transparent 70%),
    radial-gradient(28.8% 18.8% at 18.8% 65%, rgb(247 195 172 / .85), transparent 70%),
    radial-gradient(27.5% 18.8% at 81.2% 80%, rgb(188 229 204 / .9), transparent 70%);
}
@media (prefers-color-scheme: dark) {
  :root[data-theme="modern"], [data-look="modern"] {
    --canvas: #0B0B12;
    --surface: rgb(255 255 255 / .08);
    --surface-2: rgb(255 255 255 / .13);
    --line: rgb(255 255 255 / .16);
    --line-strong: rgb(255 255 255 / .26);
    --ink: #FFFFFF;
    --ink-2: #C6C5D3;
    --on-ink: #0B0B12;
    --accent: #D8EFA0;
    --accent-soft: rgb(216 239 160 / .16);
    --on-accent: #141413;
    --scrim: rgb(0 0 0 / .6);
    /* --block-ink stays dark: solid pastel blocks keep dark text. Glass cards switch it themselves. */

    --glass: rgb(18 18 28 / .58);
    --glass-strong: rgb(24 24 34 / .9);
    --glass-edge: rgb(255 255 255 / .13);
    --glass-shadow: 0 12px 34px rgb(0 0 0 / .45), inset 0 1px 0 rgb(255 255 255 / .1);
    --tint: 0%;           /* pastel + dark glass = muddy grey, so Night keeps glass clean */
    --cta: #D8EFA0;
    --cta-ink: #141413;
    --cta-glow: rgb(216 239 160 / .3);
    --paper:
      radial-gradient(45% 32% at 4% 6%, rgb(91 59 255 / .75), transparent 70%),
      radial-gradient(40% 30% at 100% 36%, rgb(0 194 168 / .5), transparent 70%),
      radial-gradient(46% 32% at 0% 78%, rgb(255 94 122 / .5), transparent 70%),
      radial-gradient(44% 30% at 100% 100%, rgb(47 75 255 / .6), transparent 70%);
    --paper-drift:
      radial-gradient(28.1% 20% at 21.2% 22.5%, rgb(91 59 255 / .75), transparent 70%),
      radial-gradient(25% 18.8% at 81.2% 41.2%, rgb(0 194 168 / .5), transparent 70%),
      radial-gradient(28.8% 20% at 18.8% 67.5%, rgb(255 94 122 / .5), transparent 70%),
      radial-gradient(27.5% 18.8% at 81.2% 81.2%, rgb(47 75 255 / .6), transparent 70%);
  }
}

/* The field stays put while you scroll (a fixed layer: iPhone ignores background-attachment). */
html[data-theme="modern"] { background: var(--canvas); }
html[data-theme="modern"] body { background: transparent; } /* so the field layer below shows */
html[data-theme="modern"] body::before {
  /* Bigger than the screen so the colour field can drift without showing an edge. */
  content: ""; position: fixed; inset: -30%; z-index: -1; pointer-events: none;
  background: var(--paper-drift), var(--canvas);
  will-change: transform;
  animation: modern-drift 18s ease-in-out infinite alternate;
}
/* A slow lava-lamp drift. Transform only, so the phone's GPU does it cheaply. */
@keyframes modern-drift {
  /* Kept inside the oversized layer: up to 8% slide and 8deg turn, so no edge ever shows. */
  0%   { transform: translate3d(0, 0, 0) rotate(0deg) scale(1); }
  25%  { transform: translate3d(8%, -7%, 0) rotate(7deg) scale(1.1); }
  50%  { transform: translate3d(-8%, 7%, 0) rotate(-6deg) scale(1.03); }
  75%  { transform: translate3d(6%, 8%, 0) rotate(8deg) scale(1.12); }
  100% { transform: translate3d(-7%, -6%, 0) rotate(-8deg) scale(1.05); }
}
@media (prefers-reduced-motion: reduce) {
  html[data-theme="modern"] body::before { animation: none; }
}

/* ---------- Glass. The cards people touch most. Pastel cards keep a hint of their colour. */
html[data-theme="modern"] :is(
  .hero-card, .tile, .card, .friends-row, .rs-card, .note-row, .pal-card, .pal-line, .pal-challenge,
  .prompt-card, .done-box .tile.row, .alert-card, .look-opt, .look, .fl-row, .fl-intro, .pinned-card, .unlock-card, .share-card, .sofar-card
) {
  background: color-mix(in srgb, var(--block, transparent) var(--tint), var(--glass));
  border: 1px solid var(--glass-edge);
  box-shadow: var(--glass-shadow);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  color: var(--ink);
  --block-ink: var(--ink);
  --block-ink-2: var(--ink-2);
}
/* The big card carries more of its game's colour: it's the one thing to tap. */
html[data-theme="modern"] #hero-card { --tint: 48%; }
@media (prefers-color-scheme: dark) {
  html[data-theme="modern"] #hero-card { --tint: 0%; }
}
html[data-theme="modern"] .rs-card.calm, html[data-theme="modern"] .rs-card.make { --block: transparent; }
html[data-theme="modern"] .tile.row.done-row { background: color-mix(in srgb, transparent 100%, var(--glass)); }

/* Things that stay solid on glass: the main buttons. */
html[data-theme="modern"] .btn.primary, html[data-theme="modern"] .pc-go {
  background: var(--cta); color: var(--cta-ink); border-color: transparent; box-shadow: 0 6px 18px var(--cta-glow);
}
html[data-theme="modern"] .btn.secondary { background: var(--glass); border: 1px solid var(--glass-edge); color: var(--ink); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); }
html[data-theme="modern"] #screen-hub #hero-card::after { background: var(--cta); color: var(--cta-ink); box-shadow: 0 6px 18px var(--cta-glow); }
html[data-theme="modern"] .status:not(.done):not(.soon), html[data-theme="modern"] .tile.row .status:not(.done):not(.soon) { background: var(--cta); color: var(--cta-ink); }
html[data-theme="modern"] .pals-badge, html[data-theme="modern"] .pals-tab-badge { box-shadow: 0 0 0 2px rgb(255 255 255 / .6); }
html[data-theme="modern"] input, html[data-theme="modern"] textarea {
  background: var(--glass); border-color: var(--glass-edge); color: var(--ink);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
}
html[data-theme="modern"] .pf-tabs { background: var(--glass); border: 1px solid var(--glass-edge); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); }
html[data-theme="modern"] .pf-tabs [role=tab][aria-selected="true"] { background: var(--cta); color: var(--cta-ink); }
html[data-theme="modern"] dialog.sheet { background: var(--glass-strong); border: 1px solid var(--glass-edge); -webkit-backdrop-filter: blur(28px) saturate(170%); backdrop-filter: blur(28px) saturate(170%); }
html[data-theme="modern"] .streak, html[data-theme="modern"] .credits-pill { background: var(--glass); border: 1px solid var(--glass-edge); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); }

/* ---------- The pill. Profile lives here, so the top bar keeps only the logo and your streak. */
.navpill { display: none; }
html[data-theme="modern"] body.has-navpill .navpill {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px;
  position: fixed; z-index: 40; left: 50%; transform: translateX(-50%); bottom: calc(14px + env(safe-area-inset-bottom));
  width: min(calc(100vw - 32px), 380px); height: 66px; padding: 6px; border-radius: 999px;
  background: var(--glass-strong); border: 1px solid var(--glass-edge); box-shadow: 0 14px 40px rgb(0 0 0 / .18), inset 0 1px 0 rgb(255 255 255 / .5);
  -webkit-backdrop-filter: blur(30px) saturate(180%); backdrop-filter: blur(30px) saturate(180%);
}
.navpill button {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  min-height: 44px; border: 0; border-radius: 999px; background: transparent; color: var(--ink-2); cursor: pointer;
  font: inherit; font-size: 11px; font-weight: 700; letter-spacing: .01em; -webkit-tap-highlight-color: transparent;
  transition: background .25s var(--ease), color .25s var(--ease), transform .15s var(--ease);
}
.navpill button svg { width: 22px; height: 22px; }
.navpill button:active { transform: scale(.94); }
.navpill button[aria-current="page"] { background: var(--cta); color: var(--cta-ink); box-shadow: 0 4px 14px var(--cta-glow); }
.navpill button:focus-visible { outline: 2.5px solid var(--accent); outline-offset: 2px; }
.np-badge { position: absolute; top: 5px; left: calc(50% + 6px); min-width: 17px; height: 17px; padding: 0 5px; border-radius: 99px; background: #FF4D3D; color: #fff; font-size: 10.5px; font-weight: 800; display: grid; place-items: center; box-shadow: 0 0 0 2px var(--glass-strong); }
.np-dot { position: absolute; top: 8px; left: calc(50% + 8px); width: 9px; height: 9px; border-radius: 50%; background: #FF4D3D; box-shadow: 0 0 0 2px var(--glass-strong); }
/* Room for the pill: nothing ever hides behind it. */
html[data-theme="modern"] body.has-navpill .app { padding-bottom: calc(112px + env(safe-area-inset-bottom)); }
/* The pill has Profile, so the "me" chip in the corner goes on the main screens. */
html[data-theme="modern"] body.has-navpill #credits-pill { display: none; }

/* Type: a touch more weight on glass. */
html[data-theme="modern"] .hub-label { color: var(--ink); }

/* Look pickers: the Modern preview shows glass over the field. */
.look-preview[data-look="modern"] { background: var(--paper), var(--canvas); }
.look-preview[data-look="modern"] .lp-hero { background: color-mix(in srgb, var(--b-lilac) 40%, rgb(255 255 255 / .55)); border: 1px solid rgb(255 255 255 / .8); box-shadow: 0 6px 16px rgb(40 40 90 / .12); color: #141413; }
.look-preview[data-look="modern"] .lp-tile { background: rgb(255 255 255 / .55); border: 1px solid rgb(255 255 255 / .8); }
.look-preview[data-look="modern"] .lp-btn { background: #141413; color: #fff; }
.look-preview[data-look="modern"] .lp-top { border-bottom: 0; }
.look-preview[data-look="modern"] .lp-pill { width: 60%; height: 14px; margin: 2px auto 0; background: rgb(255 255 255 / .8); border: 1px solid rgb(255 255 255 / .9); }
.look-swatch[data-look="modern"] { background: linear-gradient(135deg, #CDBBF5, #D8EFA0); border: 1px solid rgb(255 255 255 / .8); }

/* When blur isn't there (or the phone asks for less transparency): solid surfaces, same colours. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :root[data-theme="modern"] { --glass: rgb(255 255 255 / .9); }
  @media (prefers-color-scheme: dark) { :root[data-theme="modern"] { --glass: #1C1C26; } }
}
@media (prefers-reduced-transparency: reduce) {
  :root[data-theme="modern"] { --glass: #FFFFFF; --glass-strong: #FFFFFF; }
  @media (prefers-color-scheme: dark) { :root[data-theme="modern"] { --glass: #1C1C26; --glass-strong: #1C1C26; } }
}

/* The home inbox box: a glass card like the rest. */
html[data-theme="modern"] #screen-hub > #note-box {
  padding: 14px; border-radius: var(--r-card); background: var(--glass); border: 1px solid var(--glass-edge); box-shadow: var(--glass-shadow);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
}
/* Tab screens: the pill is the way around, so their Back arrows go. */
html[data-theme="modern"] body.has-navpill :is(#screen-rant, #screen-friends, #screen-profile) > .subhead [data-go="back"] { display: none; }
/* The picked look keeps its outline on glass. */
html[data-theme="modern"] :is(.look-opt, .look)[aria-checked="true"] { border: 2px solid var(--ink); }

/* Night: chips and small labels on glass. Clean white on a faint frosted pill, never white on grey. */
@media (prefers-color-scheme: dark) {
  html[data-theme="modern"] :is(.judge-chips .chip, .prompt-card .chip.small, .card.g-rant .chip.small) {
    background: rgb(255 255 255 / .1); border: 1px solid rgb(255 255 255 / .2); color: #FFFFFF;
  }
  html[data-theme="modern"] .judge-chips { color: var(--ink-2); }
  /* The big card gets its colour as a soft glow in the corner instead of a muddy fill. */
  html[data-theme="modern"] #hero-card { background:
      radial-gradient(120% 90% at 0% 0%, color-mix(in srgb, var(--block) 26%, transparent), transparent 60%),
      var(--glass); }
  html[data-theme="modern"] .prompt-card { background:
      radial-gradient(120% 90% at 0% 0%, color-mix(in srgb, var(--block, #CDBBF5) 22%, transparent), transparent 60%),
      var(--glass); }
}

/* Icons on pastel squares keep dark ink. Glass cards turn their text white, which on a pastel is only ~1.5:1. */
html[data-theme="modern"] :is(.tile.row .game-icon, .done-row .done-icon .game-icon, #screen-hub > #pals-row .row-icon) {
  color: #141413;
}

/* Pill taps: each icon does a tiny move that fits it. Home hops, Rant shouts, Friends pops, Profile nods. */
.navpill button.np-tap svg { animation: .5s var(--pop) both; transform-origin: 50% 70%; }
.navpill button.np-tap[data-nav="hub"] svg { animation-name: np-hop; }
.navpill button.np-tap[data-nav="rant"] svg { animation-name: np-shout; transform-origin: 30% 50%; }
.navpill button.np-tap[data-nav="friends"] svg { animation-name: np-pop; }
.navpill button.np-tap[data-nav="profile"] svg { animation-name: np-nod; transform-origin: 50% 100%; }
@keyframes np-hop {
  0% { transform: none; } 30% { transform: translateY(-6px) scale(1.06, .96); }
  60% { transform: translateY(0) scale(1.12, .86); } 80% { transform: scale(.96, 1.05); } 100% { transform: none; }
}
@keyframes np-shout {
  0% { transform: none; } 20% { transform: rotate(-14deg) scale(1.12); } 40% { transform: rotate(10deg) scale(1.12); }
  60% { transform: rotate(-7deg) scale(1.06); } 80% { transform: rotate(4deg); } 100% { transform: none; }
}
@keyframes np-pop {
  0% { transform: none; } 35% { transform: scale(1.28) rotate(-6deg); } 65% { transform: scale(.94) rotate(4deg); } 100% { transform: none; }
}
@keyframes np-nod {
  0% { transform: none; } 30% { transform: rotate(-12deg) translateY(-2px); } 60% { transform: rotate(9deg); } 100% { transform: none; }
}
@media (prefers-reduced-motion: reduce) { .navpill button.np-tap svg { animation: none; } }

/* Live notes: frosted like the pill. */
html[data-theme="modern"] :is(.live-toast, .live-drop) {
  background: var(--glass-strong); border-color: var(--glass-edge); box-shadow: var(--glass-shadow);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
}
html[data-theme="modern"] .ld-play { background: var(--cta); color: var(--cta-ink); }
/* The banner sits over headings: more solid so nothing reads through it. */
html[data-theme="modern"] .live-drop { background: color-mix(in srgb, var(--canvas) 94%, transparent); }
html[data-theme="modern"] .lt-icon { background: rgb(127 127 127 / .14); }
/* Buttons that use the card's ink as their fill: inside glass that ink turns white, so they'd be white on white.
   Modern gives them the theme's action colours instead. */
html[data-theme="modern"] .credits-card .btn.lime { background: var(--cta); color: var(--cta-ink); }
html[data-theme="modern"] .fl-steps li::before { background: var(--cta); color: var(--cta-ink); }
html[data-theme="modern"] .verdict-hero .rank-tag { background: var(--cta); color: var(--cta-ink); }

html[data-theme="modern"] .cal-day:not(:disabled) { background: rgb(127 127 127 / .12); }
html[data-theme="modern"] .cal-day[aria-current="date"] { background: var(--cta); color: var(--cta-ink); }
html[data-theme="modern"] .arc-tabs .tab[aria-selected="true"] { background: var(--cta); color: var(--cta-ink); }

html[data-theme="modern"] .hero-back { --tint: 18%; }
html[data-theme="modern"] .hero-back::after { background: var(--cta); color: var(--cta-ink); }
html[data-theme="modern"] .hs-dots [aria-selected="true"] i { background: var(--cta); }
@media (prefers-color-scheme: dark) { html[data-theme="modern"] .hero-back { --tint: 0%; } }

html[data-theme="modern"] .streak-pill:not([data-kind="frozen"]) { background: color-mix(in srgb, var(--canvas) 96%, transparent); color: var(--ink); border: 1px solid var(--glass-edge);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); }
html[data-theme="modern"] .streak-pill:not([data-kind="frozen"]) .spill-ico { background: rgb(127 127 127 / .14); }