/* ============================================================
   KIMO'S KORNER  ·  THEME: "SUNDAY FUNNIES PUZZLE PAGE"   key=funnies
   ------------------------------------------------------------
   A joyful mid-century Sunday-comics PUZZLE section. Fat wood-type
   nameplate flourishes, ben-day / halftone dot fields, Bungee
   section banners, zig-zag rules, a clip-out coupon source button,
   chunky candy-tab dog-ears, and a snappy kinetic page flip.
   Loud, fun, ink-on-paper comics — built to frame the loud comic
   logo so it reads as INTENTIONAL, never screen-glow.
   Every rule is scoped under html[data-theme="funnies"].
   Palette: paper #F4ECD8 · ink #23201A · red #C8362B · rule #3A352B
            + comic blue #1F4E8C · sunny yellow #F2C014 (on-paper pops)
   Fonts (preloaded): Rye, Bungee, Bungee Inline, Bitter, Special Elite
   ============================================================ */

/* ---------- TOKENS ---------- */
html[data-theme="funnies"] {
  --paper:        #F4ECD8;
  --paper-edge:   #d9cda6;
  --ink:          #23201A;
  --ink-soft:     #5a5240;
  --accent:       #C8362B;   /* comic red */
  --rule:         #c4b88f;   /* light hairline on paper */
  --rule-strong:  #3A352B;   /* heavy comic outline */

  /* companion pops (used sparingly, always on-paper) */
  --comic-blue:   #1F4E8C;
  --sunny:        #F2C014;
  --blue-deep:    #143861;

  /* type */
  --font-masthead: "Rye", "Bungee", Georgia, serif;
  --font-headline: "Bungee", "Bitter", Georgia, serif;
  --font-body:     "Bitter", Georgia, "Times New Roman", serif;
  --font-accent:   "Special Elite", "Bitter", Courier, monospace;

  --radius:       4px;

  /* snappier, more KINETIC flip */
  --flip-dur:  640ms;
  --flip-ease: cubic-bezier(0.34, 1.30, 0.40, 1.00);
}

/* ---------- PAGE BACKGROUND: comic newsprint + faint ben-day field ---------- */
html[data-theme="funnies"] body {
  color: var(--ink);
  background-color: var(--paper);
  /* a whisper of cyan/magenta mis-registration dots + warm grain */
  background-image:
    radial-gradient(circle at 50% 50%, rgba(31,78,140,0.045) 0 1.4px, transparent 1.6px),
    radial-gradient(circle at 50% 50%, rgba(200,54,43,0.040) 0 1.4px, transparent 1.6px),
    radial-gradient(circle at 30% 22%, rgba(0,0,0,0.025) 0 1px, transparent 1px);
  background-size: 16px 16px, 16px 16px, 8px 8px;
  background-position: 0 0, 8px 8px, 0 0;
}

/* ============================================================
   MASTHEAD  —  a bold comic banner that cradles the logo
   ============================================================ */
html[data-theme="funnies"] .masthead {
  position: relative;
  padding-top: clamp(12px, 2.4vw, 20px);
}

/* heavy candy-striped top rule (red / blue / yellow comic ribbon) */
html[data-theme="funnies"] .masthead__rule--top {
  border: 0;
  height: 12px;
  border-radius: 3px;
  background:
    repeating-linear-gradient(
      -45deg,
      var(--accent) 0 14px,
      var(--sunny)  14px 28px,
      var(--comic-blue) 28px 42px
    );
  box-shadow:
    0 0 0 2px var(--rule-strong),
    0 2px 0 0 rgba(0,0,0,0.18);
  margin-bottom: 14px;
}

/* typewriter folio line, set like a comics strip credit */
html[data-theme="funnies"] .masthead__brandline {
  font-family: var(--font-accent);
  font-size: 0.74rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
html[data-theme="funnies"] .masthead__edition {
  background: var(--paper);
  padding: 2px 8px;
  border: 1.5px solid var(--rule-strong);
  border-radius: 999px;
  box-shadow: 2px 2px 0 0 var(--rule-strong);
}
html[data-theme="funnies"] .masthead__edition--right {
  color: var(--comic-blue);
}

/* THE LOGO STAGE: a sunny ben-day starburst halo sits BEHIND the
   transparent PNG so the loud logo reads as the puzzle-page hero. */
html[data-theme="funnies"] .masthead__logo {
  position: relative;
  margin: 4px auto 8px;
  max-width: min(580px, 92%);
  padding: 14px 10px;
  isolation: isolate;
}
/* yellow conic "POW" starburst rays */
html[data-theme="funnies"] .masthead__logo::before {
  content: "";
  position: absolute;
  z-index: -2;
  left: 50%; top: 52%;
  width: 132%; height: 168%;
  transform: translate(-50%, -50%);
  background:
    repeating-conic-gradient(
      from 0deg at 50% 50%,
      rgba(242,192,20,0.55) 0deg 9deg,
      transparent 9deg 18deg
    );
  -webkit-mask-image: radial-gradient(closest-side, #000 38%, rgba(0,0,0,0.35) 60%, transparent 74%);
          mask-image: radial-gradient(closest-side, #000 38%, rgba(0,0,0,0.35) 60%, transparent 74%);
  opacity: 0.9;
  pointer-events: none;
}
/* blue ben-day halftone disc behind the faces, echoing the logo */
html[data-theme="funnies"] .masthead__logo::after {
  content: "";
  position: absolute;
  z-index: -1;
  left: 50%; top: 50%;
  width: 94%; height: 124%;
  transform: translate(-50%, -50%);
  background-image: radial-gradient(circle, rgba(31,78,140,0.30) 0 2.1px, transparent 2.4px);
  background-size: 11px 11px;
  -webkit-mask-image: radial-gradient(closest-side, #000 52%, transparent 78%);
          mask-image: radial-gradient(closest-side, #000 52%, transparent 78%);
  pointer-events: none;
}
html[data-theme="funnies"] .masthead__logo img {
  max-height: 196px;
  position: relative;
  /* lift the PNG off the paper just a touch, comic-decal style */
  filter: drop-shadow(3px 4px 0 rgba(35,32,26,0.22));
}

/* tagline: a Bungee-Inline mini banner under the logo */
html[data-theme="funnies"] .masthead__tagline {
  font-family: "Bitter", Georgia, "Times New Roman", serif;  /* mixed-case (Bungee was caps-only) */
  font-weight: 400;
  font-style: italic;
  text-transform: none;
  font-size: clamp(0.84rem, 2vw, 1.08rem);
  letter-spacing: 0.005em;
  color: var(--ink);
  margin-top: 8px;
}
html[data-theme="funnies"] .masthead__tagline strong {
  font-family: "Bitter", Georgia, serif;
  font-weight: 600;
  font-style: normal;
  font-size: 1.42em;                 /* GooD NewS bigger than the rest */
  color: var(--accent);
  text-shadow: 1.5px 1.5px 0 rgba(35,32,26,0.18);
}

/* the "double" rule becomes a fat zig-zag comic divider */
html[data-theme="funnies"] .masthead__rule--double {
  border: 0;
  height: 13px;
  margin: 16px 0 12px;
  background:
    linear-gradient(135deg, var(--rule-strong) 25%, transparent 25%) -7px 0,
    linear-gradient(225deg, var(--rule-strong) 25%, transparent 25%) -7px 0,
    linear-gradient(315deg, var(--rule-strong) 25%, transparent 25%),
    linear-gradient(45deg,  var(--rule-strong) 25%, transparent 25%);
  background-size: 14px 14px;
  background-color: transparent;
}

/* dateline as a punch-card ticket */
html[data-theme="funnies"] .dateline {
  font-family: var(--font-accent);
  font-size: 0.76rem;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
}
html[data-theme="funnies"] .dateline__dot { color: var(--accent); }
html[data-theme="funnies"] #dateline-issue { color: var(--comic-blue); font-weight: 700; }

/* ============================================================
   ARCHIVE NAV  —  chunky comic buttons
   ============================================================ */
html[data-theme="funnies"] .archive__btn {
  font-family: "Bungee", var(--font-accent);
  font-size: 0.72rem;
  letter-spacing: 0.02em;
  color: var(--ink);
  background: var(--sunny);
  border: 2px solid var(--rule-strong);
  border-radius: 999px;
  padding: 7px 16px;
  box-shadow: 2px 2px 0 0 var(--rule-strong);
  transition: transform 0.1s ease, box-shadow 0.1s ease, background 0.12s ease, color 0.12s ease;
}
html[data-theme="funnies"] .archive__btn:hover {
  background: var(--accent);
  color: var(--paper);
  transform: translate(-1px, -1px);
  box-shadow: 3px 3px 0 0 var(--rule-strong);
}
html[data-theme="funnies"] .archive__btn:active {
  transform: translate(1px, 1px);
  box-shadow: 1px 1px 0 0 var(--rule-strong);
}
html[data-theme="funnies"] .archive__btn:disabled {
  opacity: 0.4;
  background: var(--paper);
  color: var(--ink);
  box-shadow: 1px 1px 0 0 var(--rule-strong);
  transform: none;
}
html[data-theme="funnies"] .archive__label {
  font-family: var(--font-accent);
  font-size: 0.6rem;
  letter-spacing: 0.16em;
  color: var(--comic-blue);
}
html[data-theme="funnies"] .archive__picker {
  font-family: "Bungee", var(--font-headline);
  font-size: 0.92rem;
  color: var(--ink);
  border-bottom: 2.5px dotted var(--accent);
  background-image:
    linear-gradient(45deg, transparent 50%, var(--accent) 50%),
    linear-gradient(135deg, var(--accent) 50%, transparent 50%);
}

/* ============================================================
   STAGE + FLIPPING LEAF  (keep the 3D flip intact)
   ============================================================ */
html[data-theme="funnies"] .stage {
  perspective: 2000px;          /* a bit closer = punchier turn */
  perspective-origin: 50% 36%;
}

/* sheen tinted slightly warm/comic, snappier */
html[data-theme="funnies"] .leaf::after {
  background: linear-gradient(105deg,
    rgba(255,255,255,0) 28%,
    rgba(255,255,255,0.50) 50%,
    rgba(31,78,140,0.10) 60%,
    rgba(0,0,0,0) 80%);
  border-radius: var(--radius);
}

/* ============================================================
   THE PAGE  —  a bold-outlined comic puzzle panel
   ============================================================ */
html[data-theme="funnies"] .page {
  background: var(--paper);
  border: 3px solid var(--rule-strong);
  border-radius: var(--radius);
  box-shadow:
    0 0 0 1px var(--paper) inset,
    6px 7px 0 0 var(--rule-strong),         /* hard comic drop */
    0 22px 40px -22px rgba(0,0,0,0.5);
}
/* faint corner registration crosshairs, like a printer's plate */
html[data-theme="funnies"] .page::before {
  content: "";
  position: absolute;
  inset: 8px;
  pointer-events: none;
  border: 1px dashed rgba(58,53,43,0.22);
  border-radius: 2px;
}

/* THE KICKER  —  a fat Bungee section BANNER over a ben-day band */
html[data-theme="funnies"] .page__kicker {
  position: relative;
  font-family: "Bungee", var(--font-headline);
  font-size: clamp(0.92rem, 2.6vw, 1.3rem);
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--paper);
  text-align: center;
  padding: 12px 14px;
  margin: 2px 0 18px;
  border: 2.5px solid var(--rule-strong);
  border-radius: 6px;
  /* QUIZ banner = comic BLUE with a halftone dot field showing through */
  background-color: var(--comic-blue);
  background-image: radial-gradient(circle, rgba(255,255,255,0.18) 0 2px, transparent 2.3px);
  background-size: 9px 9px;
  box-shadow: 4px 4px 0 0 var(--rule-strong);
  text-shadow: 2px 2px 0 rgba(20,56,97,0.9);
}
/* ANSWERS banner = comic RED, with a yellow "tab" feel */
html[data-theme="funnies"] .page__kicker--answers {
  color: var(--paper);
  background-color: var(--accent);
  background-image: radial-gradient(circle, rgba(255,255,255,0.20) 0 2px, transparent 2.3px);
  text-shadow: 2px 2px 0 rgba(120,28,22,0.9);
}
html[data-theme="funnies"] .page__kicker-mark {
  color: var(--sunny);
  text-shadow: 1px 1px 0 rgba(0,0,0,0.35);
}
html[data-theme="funnies"] .page__kicker--answers .page__kicker-mark {
  color: var(--sunny);
}

/* the scan gets a thin keyline so it reads as a pasted-in panel */
html[data-theme="funnies"] .page__scan {
  border: 2px solid var(--rule-strong);
  border-radius: 3px;
  background: #fff;
  box-shadow: 3px 3px 0 0 rgba(58,53,43,0.25);
}

/* ============================================================
   DOG-EAR  —  a bright CHUNKY candy tab (the fun "play" cue)
   ============================================================ */
html[data-theme="funnies"] .dogear {
  font-family: "Bungee", var(--font-accent);
  font-size: 0.7rem;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--ink);
  background: var(--sunny);
  border: 2.5px solid var(--rule-strong);
  border-bottom: 0;
  padding: 10px 18px;
  border-radius: 12px 12px 0 0;
  box-shadow: 0 -3px 0 0 rgba(0,0,0,0.10), 4px -2px 0 -1px var(--rule-strong);
  transition: transform 0.12s var(--flip-ease), filter 0.12s ease, background 0.12s ease;
}
html[data-theme="funnies"] .dogear--next {
  right: clamp(16px, 3vw, 30px);
  transform: rotate(0.5deg);
}
html[data-theme="funnies"] .dogear--back {
  left: clamp(16px, 3vw, 30px);
  background: var(--comic-blue);
  color: var(--paper);
  transform: rotate(-0.5deg);
}
html[data-theme="funnies"] .dogear:hover {
  transform: translateY(-4px) rotate(0deg);
  filter: brightness(1.04);
}
html[data-theme="funnies"] .dogear--next:hover { background: var(--accent); color: var(--paper); }
html[data-theme="funnies"] .dogear__arrow { font-size: 1.1em; }
/* a tiny star before the dog-ear label, comic-tab style */
html[data-theme="funnies"] .dogear__label::before {
  content: "\2605 ";
  color: var(--accent);
}
html[data-theme="funnies"] .dogear--back .dogear__label::before { color: var(--sunny); }

/* ============================================================
   ACTIONS
   ============================================================ */
/* primary FLIP button = big red comic action button */
html[data-theme="funnies"] .btn--flip {
  font-family: "Bungee", var(--font-headline);
  font-size: 0.96rem;
  letter-spacing: 0.01em;
  color: var(--paper);
  background: var(--accent);
  border: 2.5px solid var(--rule-strong);
  border-radius: 999px;
  padding: 13px 26px;
  box-shadow: 4px 4px 0 0 var(--rule-strong);
  text-shadow: 1.5px 1.5px 0 rgba(120,28,22,0.8);
  transition: transform 0.1s ease, box-shadow 0.1s ease, filter 0.12s ease;
}
html[data-theme="funnies"] .btn--flip:hover {
  filter: none;
  transform: translate(-1px, -1px);
  box-shadow: 5px 5px 0 0 var(--rule-strong);
}
html[data-theme="funnies"] .btn--flip:active {
  transform: translate(2px, 2px);
  box-shadow: 1px 1px 0 0 var(--rule-strong);
}

/* SOURCE button = a CLIP-OUT COUPON: dashed border + scissors */
html[data-theme="funnies"] .btn--source {
  position: relative;
  font-family: var(--font-accent);
  font-size: 0.84rem;
  letter-spacing: 0.02em;
  color: var(--ink);
  background:
    /* faint ben-day so it reads like newsprint coupon stock */
    radial-gradient(circle, rgba(31,78,140,0.10) 0 1.2px, transparent 1.4px) 0 0 / 7px 7px,
    var(--paper);
  border: 2.5px dashed var(--rule-strong);
  border-radius: 4px;
  padding: 12px 22px 12px 34px;
  overflow: visible;
}
html[data-theme="funnies"] .btn--source strong { color: var(--accent); }
/* scissors riding the dashed "cut here" line */
html[data-theme="funnies"] .btn--source::before {
  content: "\2701";              /* ✁ upper-blade scissors */
  position: absolute;
  left: 8px;
  top: 50%;
  transform: translateY(-50%) rotate(0deg);
  font-size: 1.15rem;
  line-height: 1;
  color: var(--rule-strong);
  transition: transform 0.18s var(--flip-ease);
}
/* tiny "CLIP" stamp in the corner */
html[data-theme="funnies"] .btn--source::after {
  content: "CLIP";
  position: absolute;
  top: -10px;
  right: -8px;
  font-family: "Bungee", var(--font-headline);
  font-size: 0.5rem;
  letter-spacing: 0.06em;
  color: var(--ink);
  background: var(--sunny);
  padding: 3px 7px;
  border: 2px solid var(--rule-strong);
  border-radius: 999px;
  transform: rotate(8deg);
  box-shadow: 1.5px 1.5px 0 0 var(--rule-strong);
}
html[data-theme="funnies"] .btn--source:hover {
  background:
    radial-gradient(circle, rgba(31,78,140,0.10) 0 1.2px, transparent 1.4px) 0 0 / 7px 7px,
    #fffdf3;
  color: var(--ink);
}
html[data-theme="funnies"] .btn--source:hover strong { color: var(--accent); }
html[data-theme="funnies"] .btn--source:hover::before {
  transform: translateY(-50%) rotate(-14deg);  /* snip! */
}

/* ============================================================
   COLOPHON / FOOTER
   ============================================================ */
html[data-theme="funnies"] .colophon__rule {
  border: 0;
  height: 8px;
  background: repeating-linear-gradient(
    -45deg,
    var(--accent) 0 10px,
    var(--sunny)  10px 20px,
    var(--comic-blue) 20px 30px
  );
  border-radius: 2px;
  box-shadow: 0 0 0 1.5px var(--rule-strong);
  margin-bottom: 16px;
}
html[data-theme="funnies"] .colophon__line {
  font-family: var(--font-body);
  color: var(--ink-soft);
}
html[data-theme="funnies"] .colophon__line strong { color: var(--accent); }
html[data-theme="funnies"] .colophon__fine {
  font-family: var(--font-accent);
  font-style: normal;
  color: var(--comic-blue);
}

/* ============================================================
   RESPONSIVE  —  shrink the loud chrome on phones
   ============================================================ */
@media (max-width: 560px) {
  /* keep the starburst + halftone glow on phones too, just trimmed so it fits the smaller logo (body has overflow-x: clip to stop any sideways scroll) */
  html[data-theme="funnies"] .masthead__logo::before { width: 118%; height: 150%; }
  html[data-theme="funnies"] .masthead__logo::after { width: 92%; height: 118%; }
  html[data-theme="funnies"] .masthead__logo img { max-height: 138px; }
  /* tighten the masthead on phones: less space around the logo, tagline right beneath it, drop the redundant date (the picker below already shows it) */
  html[data-theme="funnies"] .masthead { padding-top: 6px; }
  html[data-theme="funnies"] .masthead__logo { margin: 0 auto; padding: 6px 10px 2px; }
  html[data-theme="funnies"] .masthead__tagline { margin-top: 2px; }
  html[data-theme="funnies"] .dateline { display: none; }
  html[data-theme="funnies"] .masthead__rule--top { height: 9px; }
  html[data-theme="funnies"] .masthead__edition { font-size: 0.6rem; padding: 2px 6px; }
  html[data-theme="funnies"] .page__kicker { font-size: 0.86rem; padding: 9px 8px; box-shadow: 3px 3px 0 0 var(--rule-strong); }
  html[data-theme="funnies"] .page { box-shadow: 4px 5px 0 0 var(--rule-strong), 0 18px 32px -22px rgba(0,0,0,0.5); }
  html[data-theme="funnies"] .btn--source::after { top: -8px; right: -4px; }
  /* corner-only dog-ears keep the star, drop the words (base hides label) */
  html[data-theme="funnies"] .dogear { padding: 9px 12px; }
}

/* reduced-motion: keep coupon scissors + flip calm */
@media (prefers-reduced-motion: reduce) {
  html[data-theme="funnies"] .btn--source:hover::before { transform: translateY(-50%); }
}

/* ============================================================
   ANSWER PAD  —  a taped-up comic SCORECARD / legal pad
   ============================================================ */
html[data-theme="funnies"] .notepad {
  background: #fffdf2;                       /* pale legal-pad yellow */
  border: 3px solid var(--rule-strong);
  border-radius: 8px;
  box-shadow: 6px 7px 0 0 var(--rule-strong), 0 18px 34px -22px rgba(0,0,0,0.5);
  top: 18px;
}
/* a strip of "tape" pinning the pad to the page */
html[data-theme="funnies"] .notepad::before {
  content: "";
  position: absolute;
  top: -11px; left: 50%;
  width: 92px; height: 21px;
  transform: translateX(-50%) rotate(-2deg);
  background: rgba(242,192,20,0.6);
  border: 1.5px solid rgba(58,53,43,0.42);
  box-shadow: 1px 1px 0 rgba(0,0,0,0.12);
}
html[data-theme="funnies"] .notepad__head { border-bottom: 2.5px solid var(--rule-strong); }
html[data-theme="funnies"] .notepad__title {
  font-family: "Bungee", var(--font-headline);
  color: var(--accent);
  text-transform: none;
  letter-spacing: 0;
  font-size: 1rem;
  text-shadow: 1.5px 1.5px 0 rgba(35,32,26,0.14);
}
html[data-theme="funnies"] .notepad__clear {
  font-family: "Bungee", var(--font-accent);
  color: var(--ink);
  background: var(--sunny);
  border: 2px solid var(--rule-strong);
  border-radius: 999px;
  box-shadow: 1.5px 1.5px 0 0 var(--rule-strong);
}
html[data-theme="funnies"] .notepad__clear:hover {
  background: var(--accent);
  color: var(--paper);
  border-color: var(--rule-strong);
}
html[data-theme="funnies"] .notepad__num {
  font-family: "Bungee", var(--font-accent);
  color: var(--comic-blue);
  font-size: 0.74rem;
}
html[data-theme="funnies"] .notepad__input {
  border-bottom: 1.5px solid rgba(31,78,140,0.30);  /* faint blue notepad rules */
}
html[data-theme="funnies"] .notepad__input:focus {
  border-bottom-color: var(--accent);
  background: rgba(242,192,20,0.16);
}
html[data-theme="funnies"] .notepad__hint {
  font-family: var(--font-accent);
  color: var(--comic-blue);
  font-style: italic;
}

/* ---- family game layer ---- */
html[data-theme="funnies"] .submit__btn {
  font-family: "Bungee", var(--font-headline);
  font-size: 0.8rem;
  border: 2px solid var(--rule-strong);
  border-radius: 999px;
  box-shadow: 2px 2px 0 0 var(--rule-strong);
}
html[data-theme="funnies"] .submit__btn:hover { transform: translate(-1px,-1px); box-shadow: 3px 3px 0 0 var(--rule-strong); }
html[data-theme="funnies"] .submit__name:focus { border-color: var(--accent); }
html[data-theme="funnies"] .scoreboard__title { color: var(--comic-blue); }
html[data-theme="funnies"] .scoreboard__pscore { font-family: "Bungee", var(--font-accent); font-size: 0.72rem; }
html[data-theme="funnies"] .scoreboard__row--clickable {
  border: 2px solid var(--rule-strong);
  box-shadow: 2px 2px 0 0 rgba(58,53,43,0.18);
}
html[data-theme="funnies"] .scoreboard__row--clickable:hover { background: #fffdf2; }
html[data-theme="funnies"] .notepad__grade input { accent-color: var(--accent); }
html[data-theme="funnies"] .viewer__box { border: 3px solid var(--rule-strong); border-radius: 8px; box-shadow: 8px 9px 0 0 var(--rule-strong), 0 24px 60px -20px rgba(0,0,0,0.6); }
html[data-theme="funnies"] .viewer__name { font-family: "Bungee", var(--font-headline); color: var(--accent); font-size: 1.1rem; }