/* ============================================================
   KIMO'S KORNER — theme: LIQUID GLASS
   Bright, luminous, refractive. Frosted panes floating over a
   colour field that is lit by the KORNER's own ink — comic red,
   comic blue, sunny yellow — so it reads as this masthead's
   futuristic cousin rather than a generic glass template.

   Rules of the direction:
     · light, never grey. The field is warm white with saturated blooms.
     · every surface is a pane: translucent, blurred, with a specular
       top edge and a coloured shadow beneath it.
     · type is big, tight and confident. No timid 15px body copy.
     · one gesture of colour per screen. The logo stays loudest.

   Scoped to html[data-theme="glass"] — Sunday Funnies is untouched.
   ============================================================ */

html[data-theme="glass"] {
  --g-paper:  #FFF8F0;
  --g-ink:    #16121C;
  --g-ink-2:  rgba(28, 20, 38, 0.66);
  --g-ink-3:  rgba(28, 20, 38, 0.40);

  --g-red:    #E8402F;
  --g-blue:   #1F4E8C;
  --g-sun:    #F2C014;
  --g-violet: #7B5BD6;

  /* the pane recipe */
  --g-pane:      linear-gradient(158deg, rgba(255,255,255,0.78) 0%, rgba(255,255,255,0.44) 100%);
  --g-pane-edge: rgba(255, 255, 255, 0.85);
  --g-blur:      saturate(190%) blur(26px);
  --g-lift:
     inset 0 1px 0 rgba(255,255,255,0.95),
     inset 0 -1px 0 rgba(255,255,255,0.35),
     0 24px 50px -26px rgba(31, 78, 140, 0.45),
     0 4px 16px -8px rgba(232, 64, 47, 0.22);

  --g-sans: "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI",
            system-ui, Inter, Roboto, Helvetica, Arial, sans-serif;

  background: var(--g-paper);
  color-scheme: light;
}

html[data-theme="glass"] body {
  /* transparent on purpose: the colour field is a fixed ::before at z-index -1,
     and an opaque body background would paint straight over it. */
  background: transparent;
  background-image: none;
  color: var(--g-ink);
  font-family: var(--g-sans);
  line-height: 1.42;
  -webkit-font-smoothing: antialiased;
  position: relative;
}

/* ---- the light behind the glass ------------------------------------
   A fixed colour field. Everything above it is a pane, so the blur has
   something worth refracting. */
html[data-theme="glass"] body::before {
  content: '';
  position: fixed; inset: -25%;
  z-index: -1;
  pointer-events: none;
  background-color: var(--g-paper);
  background-image:
    radial-gradient(42% 34% at 14% 14%, rgba(232, 64, 47, 0.78) 0%, transparent 66%),
    radial-gradient(38% 32% at 88% 10%, rgba(242, 192, 20, 0.82) 0%, transparent 68%),
    radial-gradient(46% 40% at 82% 70%, rgba(31, 78, 140, 0.70) 0%, transparent 68%),
    radial-gradient(42% 36% at 16% 82%, rgba(123, 91, 214, 0.62) 0%, transparent 66%),
    radial-gradient(30% 26% at 52% 46%, rgba(255, 255, 255, 0.42) 0%, transparent 72%);
  filter: blur(26px) saturate(125%);
  animation: g-drift 26s ease-in-out infinite alternate;
}
@keyframes g-drift {
  0%   { transform: scale(1)    translate3d(0, 0, 0); }
  50%  { transform: scale(1.08) translate3d(-2%, 1.5%, 0); }
  100% { transform: scale(1.03) translate3d(2%, -1.5%, 0); }
}
/* a fine grain so the gradient never looks like flat CSS */
html[data-theme="glass"] body::after {
  content: '';
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  opacity: 0.55;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.055'/%3E%3C/svg%3E");
}
@media (prefers-reduced-motion: reduce) {
  html[data-theme="glass"] body::before { animation: none; }
}

/* ---- strip the comic furniture ------------------------------------ */
html[data-theme="glass"] .home-ribbon,
html[data-theme="glass"] .home-zig,
html[data-theme="glass"] .home-folio,
html[data-theme="glass"] .home-hero__bubble,
html[data-theme="glass"] .home-demo,
html[data-theme="glass"] .masthead__logo::before,
html[data-theme="glass"] .masthead__logo::after,
html[data-theme="glass"] .dogear__arrow,
html[data-theme="glass"] .home-cta__stamp,
html[data-theme="glass"] .home-cta__fine,
html[data-theme="glass"] .home-cta__big,
html[data-theme="glass"] .page__kicker-mark { display: none !important; }

/* ---- shared pane -------------------------------------------------- */
html[data-theme="glass"] .home-desk__lead,
html[data-theme="glass"] .home-notes,
html[data-theme="glass"] .home-hero__side--right,
html[data-theme="glass"] .home-hero__logo,
html[data-theme="glass"] .home-hero .masthead__logo,
html[data-theme="glass"] .stage,
html[data-theme="glass"] .leaf,
html[data-theme="glass"] .face,
html[data-theme="glass"] .page,
html[data-theme="glass"] .notepad,
html[data-theme="glass"] .scoreboard {
  background: var(--g-pane) !important;
  -webkit-backdrop-filter: var(--g-blur);
  backdrop-filter: var(--g-blur);
  border: 1px solid var(--g-pane-edge) !important;
  border-radius: 26px !important;
  box-shadow: var(--g-lift) !important;
  transform: none !important;
}

/* ---- shell -------------------------------------------------------- */
html[data-theme="glass"] .home-hero,
html[data-theme="glass"] .home-desk,
html[data-theme="glass"] .reading {
  max-width: 660px; margin-inline: auto; padding-inline: 18px;
}
html[data-theme="glass"] .home-hero { display: block; padding-top: 30px; text-align: left; }
html[data-theme="glass"] .home-hero__center { display: block; }
html[data-theme="glass"] .home-desk__grid { display: block; }

/* ---- the logo, floating on its own pane --------------------------- */
html[data-theme="glass"] .home-hero__logo,
html[data-theme="glass"] .home-hero .masthead__logo {
  display: flex; align-items: center; justify-content: center;
  padding: 30px 22px !important;
  margin: 0 0 24px !important;
  border-radius: 30px !important;
}
html[data-theme="glass"] .home-hero .masthead__logo img {
  max-height: 152px !important; width: auto;
  filter: drop-shadow(0 12px 22px rgba(31, 78, 140, 0.22)) !important;
}

/* ---- display type ------------------------------------------------- */
html[data-theme="glass"] .home-hero__tagline {
  font-family: var(--g-sans) !important;
  font-size: clamp(38px, 10.5vw, 58px) !important;
  font-weight: 800 !important;
  font-style: normal !important;
  line-height: 0.98 !important;
  letter-spacing: -0.042em !important;
  color: var(--g-ink) !important;
  text-align: left !important;
  margin: 0 0 10px !important;
}
html[data-theme="glass"] .home-hero__tagline strong {
  font-size: 1em !important; font-weight: 800 !important;
  background: linear-gradient(112deg, var(--g-red) 0%, var(--g-violet) 52%, var(--g-blue) 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent !important;
}
html[data-theme="glass"] .home-hero__tagline::after {
  content: 'Thirty years of trivia, one page at a time.';
  display: block;
  font-size: 16px; font-weight: 500; letter-spacing: -0.01em;
  color: var(--g-ink-2); margin-top: 12px; line-height: 1.4;
}

/* ---- copy --------------------------------------------------------- */
html[data-theme="glass"] .home-desk { padding-top: 6px; }
html[data-theme="glass"] .home-desk__lead { padding: 22px !important; margin-bottom: 14px !important; }
html[data-theme="glass"] .home-desk__lead p {
  font-size: 16.5px !important; line-height: 1.58 !important;
  color: var(--g-ink-2) !important; font-family: var(--g-sans) !important;
}
html[data-theme="glass"] .home-desk__lead p:first-letter {
  font-size: inherit; float: none; margin: 0; color: inherit; font-family: inherit;
}
html[data-theme="glass"] .home-desk__lead strong,
html[data-theme="glass"] .home-desk__lead b { color: var(--g-ink) !important; font-weight: 700 !important; }
html[data-theme="glass"] .home-desk__sign {
  color: var(--g-ink-3) !important; font-style: normal !important; font-weight: 600 !important;
}

/* ---- the how-to list --------------------------------------------- */
html[data-theme="glass"] .home-notes { padding: 6px 0 !important; margin-bottom: 14px !important; }
html[data-theme="glass"] .home-notes__head {
  position: static !important; transform: none !important;
  writing-mode: horizontal-tb !important; white-space: normal !important;
  width: auto !important; height: auto !important; left: auto !important; top: auto !important;
  background: none !important; border: 0 !important; box-shadow: none !important;
  color: var(--g-ink-3) !important;
  font: 700 11px/1 var(--g-sans) !important;
  text-transform: uppercase !important; letter-spacing: 0.14em !important;
  padding: 14px 20px 8px !important; margin: 0 !important; text-align: left !important;
}
html[data-theme="glass"] .home-note {
  background: none !important; border: 0 !important; box-shadow: none !important;
  border-radius: 0 !important; transform: none !important;
  border-top: 1px solid rgba(28, 20, 38, 0.09) !important;
  padding: 15px 20px !important; margin: 0 !important;
}
html[data-theme="glass"] .home-notes__head + .home-note { border-top: 0 !important; }
html[data-theme="glass"] .home-note__n {
  width: 27px !important; height: 27px !important;
  background: linear-gradient(150deg, var(--g-red), var(--g-violet)) !important;
  color: #fff !important; border: 0 !important;
  box-shadow: 0 4px 10px -3px rgba(232,64,47,0.6) !important;
  font: 700 12px/1 var(--g-sans) !important;
}
html[data-theme="glass"] .home-note__txt { font-size: 15.5px !important; color: var(--g-ink-2) !important; }
html[data-theme="glass"] .home-note__txt b,
html[data-theme="glass"] .home-note__txt strong { color: var(--g-ink) !important; font-weight: 700 !important; }

/* ---- buttons: gradient glass pills -------------------------------- */
html[data-theme="glass"] .home-cta,
html[data-theme="glass"] .dogear,
html[data-theme="glass"] .archive__btn:not([disabled]) {
  position: relative; overflow: hidden;
  display: block !important; width: 100%;
  background: linear-gradient(128deg, var(--g-red) 0%, #D8342F 48%, var(--g-violet) 100%) !important;
  color: #fff !important;
  border: 0 !important; border-radius: 20px !important;
  padding: 18px 22px !important;
  font: 700 18px/1.2 var(--g-sans) !important;
  letter-spacing: -0.02em !important;
  text-align: center !important; text-decoration: none !important;
  transform: none !important; clip-path: none !important;
  margin: 0 0 12px !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.55),
    0 16px 30px -14px rgba(232, 64, 47, 0.75),
    0 3px 10px -4px rgba(123, 91, 214, 0.5) !important;
  transition: transform 0.16s cubic-bezier(0.22,1,0.36,1), box-shadow 0.16s;
}
/* specular sweep across the top of the pill */
html[data-theme="glass"] .home-cta::before,
html[data-theme="glass"] .dogear::before {
  content: '' !important; display: block !important;
  position: absolute; inset: 0 0 auto; height: 52%;
  background: linear-gradient(180deg, rgba(255,255,255,0.34), transparent);
  pointer-events: none; border-radius: 20px 20px 40% 40% / 20px 20px 100% 100%;
}
html[data-theme="glass"] .home-cta::after,
html[data-theme="glass"] .dogear::after { display: none !important; }
html[data-theme="glass"] .home-cta:active,
html[data-theme="glass"] .dogear:active { transform: scale(0.985) !important; }
html[data-theme="glass"] .home-cta__sub,
html[data-theme="glass"] .home-cta__arrow,
html[data-theme="glass"] .dogear__label {
  position: static !important; transform: none !important;
  writing-mode: horizontal-tb !important;
  color: #fff !important; font: inherit !important; display: inline !important;
}
html[data-theme="glass"] .dogear {
  position: static !important; width: auto !important; height: auto !important;
  max-width: 660px; margin: 16px auto 0 !important;
}

/* secondary: a clear pane button */
html[data-theme="glass"] .home-hero__browse,
html[data-theme="glass"] .actions a,
html[data-theme="glass"] .actions button {
  display: block !important; width: 100%;
  background: rgba(255,255,255,0.55) !important;
  -webkit-backdrop-filter: var(--g-blur); backdrop-filter: var(--g-blur);
  color: var(--g-blue) !important;
  border: 1px solid var(--g-pane-edge) !important;
  border-radius: 18px !important;
  padding: 16px 20px !important;
  font: 700 16.5px/1.2 var(--g-sans) !important;
  letter-spacing: -0.015em !important;
  text-align: center !important; text-decoration: none !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.9), 0 10px 24px -16px rgba(31,78,140,0.7) !important;
  transform: none !important; margin: 12px auto 0 !important; max-width: 660px;
}
html[data-theme="glass"] .actions a strong,
html[data-theme="glass"] .actions a b { color: var(--g-blue) !important; }

/* ---- the vault stat ------------------------------------------------ */
html[data-theme="glass"] .home-hero__side--right { padding: 22px !important; margin-bottom: 14px !important; }
html[data-theme="glass"] .home-hero__sidehead {
  background: none !important; border: 0 !important; box-shadow: none !important;
  border-radius: 0 !important; padding: 0 0 4px !important;
  color: var(--g-ink-3) !important;
  font: 700 11px/1 var(--g-sans) !important;
  text-transform: uppercase !important; letter-spacing: 0.14em !important;
}
html[data-theme="glass"] .home-hero__sidehead::before,
html[data-theme="glass"] .home-hero__sidehead::after { display: none !important; }
html[data-theme="glass"] .home-hero__stat {
  font: 800 64px/0.94 var(--g-sans) !important;
  letter-spacing: -0.05em !important;
  background: linear-gradient(140deg, var(--g-blue), var(--g-violet) 60%, var(--g-red));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent !important;
  margin: 6px 0 2px !important;
}
html[data-theme="glass"] .home-hero__statsub,
html[data-theme="glass"] .home-hero__statnote {
  color: var(--g-ink-2) !important; font-size: 14.5px !important; font-style: normal !important;
}
html[data-theme="glass"] .home-hero__statnote { margin-bottom: 4px !important; }

/* ============================================================
   QUIZ PAGE
   ============================================================ */
html[data-theme="glass"] .masthead {
  position: sticky; top: 0; z-index: 40;
  background: rgba(255, 248, 240, 0.55) !important;
  -webkit-backdrop-filter: saturate(190%) blur(22px);
  backdrop-filter: saturate(190%) blur(22px);
  border: 0 !important;
  border-bottom: 1px solid rgba(255,255,255,0.7) !important;
  box-shadow: 0 6px 20px -18px rgba(31,78,140,0.8) !important;
  padding: 10px 18px !important;
}
html[data-theme="glass"] .masthead__inner {
  max-width: 660px; margin-inline: auto;
  display: flex; align-items: center; gap: 12px;
}
html[data-theme="glass"] .masthead .masthead__logo {
  background: none !important; box-shadow: none !important;
  border: 0 !important; padding: 0 !important; margin: 0 !important; border-radius: 0 !important;
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
html[data-theme="glass"] .masthead .masthead__logo img { max-height: 36px !important; filter: none !important; }
html[data-theme="glass"] .masthead__tagline { display: none !important; }

html[data-theme="glass"] .dateline {
  max-width: 660px; margin: 22px auto 12px; padding-inline: 18px;
  font: 800 clamp(30px, 8vw, 40px)/1 var(--g-sans) !important;
  letter-spacing: -0.04em !important;
  color: var(--g-ink) !important; text-align: left !important;
  border: 0 !important; background: none !important;
}
html[data-theme="glass"] .dateline__item {
  border: 0 !important; background: none !important;
  font: inherit !important; color: inherit !important; letter-spacing: inherit !important;
}

html[data-theme="glass"] .archive { max-width: 660px; margin-inline: auto; padding: 0 18px 8px; background: none !important; border: 0 !important; }
html[data-theme="glass"] .archive__label {
  font: 700 11px/1 var(--g-sans) !important;
  text-transform: uppercase !important; letter-spacing: 0.14em !important;
  color: var(--g-ink-3) !important;
}
html[data-theme="glass"] .archive__picker,
html[data-theme="glass"] .archive select {
  font: 600 16px/1 var(--g-sans) !important;
  background: rgba(255,255,255,0.6) !important;
  -webkit-backdrop-filter: var(--g-blur); backdrop-filter: var(--g-blur);
  color: var(--g-ink) !important;
  border: 1px solid var(--g-pane-edge) !important;
  border-radius: 14px !important; padding: 13px 15px !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.9) !important;
}

html[data-theme="glass"] .page { padding: 14px !important; }
html[data-theme="glass"] .page__scan { border-radius: 16px !important; overflow: hidden; }
html[data-theme="glass"] .page__kicker {
  font: 700 11px/1 var(--g-sans) !important;
  text-transform: uppercase !important; letter-spacing: 0.14em !important;
  color: var(--g-ink-3) !important; text-align: left !important;
  padding: 4px 4px 12px !important; border: 0 !important; background: none !important;
}
html[data-theme="glass"] .page__scan-wrap > button,
html[data-theme="glass"] .page__fs-hint {
  background: rgba(22,18,28,0.62) !important;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  color: #fff !important; border: 0 !important; border-radius: 999px !important;
  font: 600 12px/1 var(--g-sans) !important; box-shadow: none !important;
}

/* notepad + scoreboard */
html[data-theme="glass"] .notepad,
html[data-theme="glass"] .scoreboard { padding: 6px 0 !important; margin-top: 16px !important; }
html[data-theme="glass"] .notepad__head,
html[data-theme="glass"] .notepad__title,
html[data-theme="glass"] .scoreboard :is(h1,h2,h3,h4) {
  background: none !important; border: 0 !important; box-shadow: none !important;
  color: var(--g-ink-3) !important;
  font: 700 11px/1 var(--g-sans) !important;
  text-transform: uppercase !important; letter-spacing: 0.14em !important;
  padding: 14px 20px 8px !important; margin: 0 !important; text-align: left !important;
}
html[data-theme="glass"] .notepad__hint {
  color: var(--g-ink-2) !important; font: 400 14px/1.5 var(--g-sans) !important;
  font-style: normal !important; padding: 6px 20px 12px !important; margin: 0 !important;
}
html[data-theme="glass"] .notepad__clear {
  background: rgba(28,20,38,0.07) !important; color: var(--g-ink-2) !important;
  border: 0 !important; border-radius: 999px !important;
  font: 600 12px/1 var(--g-sans) !important; text-transform: none !important;
  padding: 8px 14px !important; box-shadow: none !important;
}
html[data-theme="glass"] .notepad textarea,
html[data-theme="glass"] .notepad input {
  background: rgba(255,255,255,0.5) !important; color: var(--g-ink) !important;
  border: 0 !important; border-top: 1px solid rgba(28,20,38,0.09) !important;
  border-radius: 0 !important;
  font: 400 16px/1.5 var(--g-sans) !important; padding: 14px 20px !important;
}
html[data-theme="glass"] .notepad textarea::placeholder,
html[data-theme="glass"] .notepad input::placeholder { color: var(--g-ink-3) !important; }
html[data-theme="glass"] .scoreboard,
html[data-theme="glass"] .scoreboard * { color: var(--g-ink-2) !important; font-style: normal !important; }
html[data-theme="glass"] .scoreboard b,
html[data-theme="glass"] .scoreboard strong { color: var(--g-ink) !important; }

html[data-theme="glass"] .reading__layout { display: block; }
html[data-theme="glass"] .reading__main { max-width: none; }

/* ---- footer + settings -------------------------------------------- */
html[data-theme="glass"] .colophon,
html[data-theme="glass"] .home-foot {
  max-width: 660px; margin: 30px auto 0 !important; padding: 20px 18px 4px !important;
  border-top: 1px solid rgba(28,20,38,0.10) !important;
  background: none !important; text-align: center !important;
  font: 400 13.5px/1.6 var(--g-sans) !important; color: var(--g-ink-3) !important;
}
html[data-theme="glass"] .colophon *,
html[data-theme="glass"] .home-foot * {
  font-family: var(--g-sans) !important; font-style: normal !important;
  color: var(--g-ink-3) !important; letter-spacing: -0.005em !important;
}
html[data-theme="glass"] .colophon strong,
html[data-theme="glass"] .home-foot strong { color: var(--g-ink-2) !important; font-weight: 700 !important; }
html[data-theme="glass"] .colophon__rule { border-top: 0 !important; background: none !important; height: 0 !important; }

html[data-theme="glass"] .kk-setbtn {
  background: rgba(255,255,255,0.55) !important;
  -webkit-backdrop-filter: var(--g-blur); backdrop-filter: var(--g-blur);
  border: 1px solid var(--g-pane-edge) !important;
  color: var(--g-ink-2) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.9), 0 8px 20px -14px rgba(31,78,140,0.7) !important;
}

/* ---- one broad sweep so no comic type survives --------------------- */
html[data-theme="glass"] .home-hero *,
html[data-theme="glass"] .home-desk *,
html[data-theme="glass"] .masthead *,
html[data-theme="glass"] .dateline *,
html[data-theme="glass"] .archive *,
html[data-theme="glass"] .notepad *,
html[data-theme="glass"] .scoreboard *,
html[data-theme="glass"] .actions * {
  font-family: var(--g-sans) !important;
  font-style: normal !important;
  text-shadow: none !important;
}