/* ===========================================================================
   Rocko's Quiet Corner — calm daily-puzzle section (older-player audience).
   Its OWN large-type, low-pressure design system: NOT the kids' festive chrome
   (no bobbing dog, no dashed borders, no confetti, no sfx). Reuses the site's
   warm-paper color VALUES from /styles.css but pairs them with a calm deep-teal
   accent and much bigger type + tap targets. Self-contained: pages in /daily/
   load ONLY this (plus a per-game stylesheet) — never /styles.css chrome.
   Design goals: iPad-first, 44px+ targets, high contrast, readable, forgiving.
   =========================================================================== */
:root {
  --paper:        #FBFAF7;   /* warm page background (from the site palette) */
  --surface:      #FFFFFF;   /* cards */
  --surface-2:    #F1EDE6;   /* insets, pills */
  --ink:          #23201B;
  --ink-soft:     #5F5A51;
  --line:         #E3DED4;

  --accent:       #F04E37;   /* Rocko orange-red — matches the Where's Rocko? site theme */
  --accent-ink:   #B8351F;   /* darker brand red for links/text on paper */
  --accent-soft:  #FBE3DE;   /* soft red tint for pills / active states */
  --accent-line:  #F3C9C1;   /* red-tinted hairline */
  --on-accent:    #FFFFFF;
  --rocko-red:    #F04E37;   /* brand red (same as the accent) */
  --gold:         #FFC93C;   /* site action-button gold ("paw pop") */
  --gold-ink:     #241454;
  --gold-shadow:  #C98A12;

  /* Daily Word tiles (calm default palette). Every state ALSO carries a
     distinct symbol (see word.css) so color is never the only signal. */
  --tile-correct: #4C9A6B;   /* green  — right letter, right spot  (✓) */
  --tile-present: #C7952B;   /* amber  — right letter, wrong spot  (◆) */
  --tile-absent:  #8C857A;   /* gray   — letter not in the word     (✕) */
  --tile-border-empty:  #D8D2C7;
  --tile-border-filled: #A7A093;
  --on-tile:      #FFFFFF;

  --radius:    16px;
  --radius-sm: 10px;
  --radius-lg: 22px;
  --shadow:      0 1px 2px rgba(30,22,14,.05), 0 10px 28px rgba(30,22,14,.07);
  --shadow-soft: 0 1px 2px rgba(30,22,14,.05);
  --shadow-lift: 0 2px 8px rgba(30,22,14,.08), 0 18px 40px rgba(30,22,14,.12);
  --font-display: 'Fredoka', ui-rounded, 'Segoe UI', system-ui, sans-serif;
  --font-body:    'Nunito', ui-rounded, 'Segoe UI', system-ui, sans-serif;
  --maxw: 720px;
}

/* Opt-in high-contrast / colorblind tile palette (Wordle's orange/blue).
   Layered on top of the always-on symbols for a second line of safety. */
body.hc {
  --tile-correct: #E8792B;   /* orange */
  --tile-present: #4C86C6;   /* blue */
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper:        #16140F;
    --surface:      #201D17;
    --surface-2:    #2A2620;
    --ink:          #F3EEE5;
    --ink-soft:     #ADA69B;
    --line:         #332E26;

    --accent:       #FF6A52;   /* brand red (dark mode) */
    --accent-ink:   #FF8873;
    --accent-soft:  #3A231E;
    --accent-line:  #5A362D;
    --on-accent:    #FFFFFF;
    --rocko-red:    #FF6A52;

    --tile-correct: #4E9A6B;
    --tile-present: #C79A34;
    --tile-absent:  #6E675D;
    --tile-border-empty:  #3A342B;
    --tile-border-filled: #5A5346;
    --shadow:      0 1px 2px rgba(0,0,0,.30), 0 10px 28px rgba(0,0,0,.30);
    --shadow-soft: 0 1px 2px rgba(0,0,0,.35);
    --shadow-lift: 0 2px 8px rgba(0,0,0,.4), 0 18px 40px rgba(0,0,0,.42);
  }
  body.hc {
    --tile-correct: #E8823A;
    --tile-present: #5B93D6;
  }
}

* { box-sizing: border-box; }
html { font-size: 18px; -webkit-text-size-adjust: 100%; }
html, body { margin: 0; }
body {
  font-family: var(--font-body);
  font-weight: 600;
  color: var(--ink);
  background: var(--paper);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1, h2, h3 { font-family: var(--font-display); font-weight: 700; line-height: 1.1; letter-spacing: -.01em; margin: 0; }
a { color: var(--accent-ink); }

/* Clear, calm focus ring everywhere (keyboard users + older eyes). */
:where(a, button, [tabindex], input, select):focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
  border-radius: 6px;
}

/* ---------- calm top bar ---------- */
.qc-nav {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 9px clamp(14px, 4vw, 28px);
  background: color-mix(in srgb, var(--paper) 90%, transparent);
  backdrop-filter: saturate(1.05) blur(8px);
  border-bottom: 1px solid var(--accent-line);
}
.qc-brand {
  display: inline-flex; align-items: center; gap: 10px;
  text-decoration: none; color: var(--ink);
  font-family: var(--font-display); font-size: 1.28rem; letter-spacing: -.01em;
  min-height: 44px;
}
.qc-brand-dog { width: 36px; height: 36px; object-fit: contain; flex: 0 0 auto;
  filter: drop-shadow(0 2px 3px rgba(0,0,0,.18)); }
.qc-brand-text { font-weight: 500; }
.qc-brand-text b { color: var(--rocko-red); font-weight: 700; }
.qc-brand-tag { font-family: var(--font-display); font-weight: 700; font-size: .66rem; letter-spacing: .05em;
  text-transform: uppercase; color: var(--accent-ink); background: var(--accent-soft);
  border: 1px solid var(--accent-line); padding: 2px 8px; border-radius: 999px; margin-left: 5px; white-space: nowrap; }
.qc-nav-out {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 6px;
  text-decoration: none; color: var(--ink-soft); font-weight: 700; font-size: .95rem;
  white-space: nowrap;
}
.qc-nav-out:hover { color: var(--accent-ink); text-decoration: underline; }
@media (max-width: 500px) { .qc-brand-tag { display: none; } }
@media (max-width: 420px) {
  .qc-brand { font-size: 1.02rem; gap: 7px; }
  .qc-brand-dog { width: 28px; height: 28px; }
  .qc-nav-out { font-size: .78rem; }
}

/* ---------- page shell ---------- */
.qc-wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 clamp(16px, 4vw, 28px) 72px; }
.qc-eyebrow {
  display: inline-flex; align-items: center; gap: .45em;
  color: var(--accent-ink); font-family: var(--font-display); font-weight: 600;
  font-size: .95rem; letter-spacing: .02em; margin: 0 0 .4em;
}
.qc-lede { color: var(--ink-soft); font-size: 1.12rem; font-weight: 600; max-width: 60ch; }

/* ---------- buttons (big, calm, springy-but-gentle) ---------- */
.qc-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  min-height: 52px; padding: 12px 26px; border-radius: 999px;
  font-family: var(--font-display); font-weight: 600; font-size: 1.08rem;
  background: var(--gold); color: var(--gold-ink);
  text-decoration: none; border: 0; cursor: pointer;
  box-shadow: 0 5px 0 var(--gold-shadow), 0 10px 20px rgba(201,138,18,.28);
  transition: transform .08s ease, box-shadow .08s ease, filter .1s ease;
}
.qc-btn:hover { filter: brightness(1.04); }
.qc-btn:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--gold-shadow), 0 4px 10px rgba(201,138,18,.28); }
.qc-btn.secondary {
  background: var(--surface); color: var(--ink);
  border: 2px solid var(--line); box-shadow: var(--shadow-soft);
}
.qc-btn.secondary:hover { border-color: var(--accent); color: var(--accent-ink); filter: none; }
.qc-btn.secondary:active { transform: translateY(2px); box-shadow: var(--shadow-soft); }
.qc-btn.ghost {
  background: transparent; color: var(--accent-ink);
  min-height: 48px; padding: 10px 18px; box-shadow: none;
}
.qc-btn.ghost:hover { background: var(--accent-soft); filter: none; }
.qc-btn[disabled] { opacity: .5; cursor: default; pointer-events: none; }
.qc-btn.block { width: 100%; }

/* small round icon button (help / stats / settings) */
.qc-iconbtn {
  display: inline-flex; align-items: center; justify-content: center; gap: .45em;
  min-height: 48px; min-width: 48px; padding: 0 16px; border-radius: 999px;
  background: var(--surface); color: var(--ink); border: 2px solid var(--line);
  font-family: var(--font-display); font-weight: 600; font-size: 1rem;
  cursor: pointer; box-shadow: var(--shadow-soft);
  transition: transform .12s ease, border-color .12s ease, color .12s ease;
}
.qc-iconbtn:hover { border-color: var(--accent); color: var(--accent-ink); }
.qc-iconbtn:active { transform: translateY(2px); }

/* ---------- cards / hub grid ---------- */
.qc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 560px) { .qc-grid { grid-template-columns: 1fr; } }
.qc-card {
  display: flex; flex-direction: column; gap: 6px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 20px 20px 22px; box-shadow: var(--shadow); text-decoration: none; color: inherit;
  position: relative; transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease;
}
a.qc-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); border-color: var(--accent-line); }
.qc-card-ico { font-size: 2rem; line-height: 1; }
.qc-card h3 { font-size: 1.32rem; }
.qc-card p { margin: 0; color: var(--ink-soft); font-size: 1rem; font-weight: 600; }
.qc-card-cta { margin-top: 8px; color: var(--accent-ink); font-weight: 700; font-family: var(--font-display); }
.qc-card.soon { pointer-events: none; opacity: .72; }
.qc-tag {
  position: absolute; top: 14px; right: 14px;
  font-family: var(--font-display); font-weight: 600; font-size: .72rem; letter-spacing: .04em;
  text-transform: uppercase; color: var(--ink-soft);
  background: var(--surface-2); border: 1px solid var(--line);
  padding: 4px 10px; border-radius: 999px;
}
.qc-tag.live { color: var(--on-accent); background: var(--accent); border-color: transparent; }

/* ---------- modal (how-to-play / stats / settings / result) ---------- */
.qc-modal-overlay {
  position: fixed; inset: 0; z-index: 100;
  display: flex; align-items: center; justify-content: center; padding: 18px;
  background: rgba(20,16,10,.5);
  opacity: 0; transition: opacity .16s ease;
}
/* the [hidden] attribute must beat the display:flex above, or a "closed"
   modal leaves an invisible full-screen layer that eats every click. */
.qc-modal-overlay[hidden] { display: none; }
.qc-modal-overlay.open { opacity: 1; }
.qc-modal {
  width: 100%; max-width: 440px; max-height: calc(100dvh - 36px); overflow: auto;
  background: var(--surface); color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lift);
  transform: translateY(8px) scale(.99); transition: transform .16s ease;
}
.qc-modal-overlay.open .qc-modal { transform: none; }
.qc-modal-head {
  position: sticky; top: 0; background: var(--surface);
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 18px 20px 12px; border-bottom: 1px solid var(--line);
}
.qc-modal-head h2 { font-size: 1.35rem; }
.qc-modal-close {
  flex: 0 0 auto; width: 44px; height: 44px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--surface-2); color: var(--ink); border: 0; cursor: pointer;
  font-size: 1.4rem; line-height: 1;
}
.qc-modal-close:hover { background: var(--accent-soft); color: var(--accent-ink); }
.qc-modal-body { padding: 16px 20px 22px; }
.qc-modal-body p { margin: 0 0 .9em; font-size: 1.04rem; }
.qc-modal-body h3 { font-size: 1.05rem; margin: 1.2em 0 .4em; }
.qc-modal-actions { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; margin-top: 16px; }

/* ---------- footer ---------- */
.qc-foot {
  border-top: 1px solid var(--line); background: var(--surface-2);
  padding: 22px clamp(16px, 4vw, 28px) 28px;
}
.qc-foot-inner {
  max-width: var(--maxw); margin: 0 auto;
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px;
}
.qc-foot-brand { display: inline-flex; align-items: center; gap: 8px; text-decoration: none;
  font-family: var(--font-display); font-weight: 700; font-size: 1.1rem; color: var(--ink); }
.qc-foot-brand b { color: var(--rocko-red); }
.qc-foot-brand img { width: 26px; height: 26px; object-fit: contain; }
.qc-foot-links { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.qc-foot a { color: var(--ink-soft); text-decoration: none; font-weight: 700; font-size: .95rem; }
.qc-foot a:hover { color: var(--accent-ink); text-decoration: underline; }
.qc-foot-copy { margin-left: auto; color: var(--ink-soft); font-size: .88rem; font-weight: 700; }
@media (max-width: 560px) { .qc-foot-copy { margin-left: 0; } }

/* ---- LOCKED boards (Ron: "easy for old people") ----
   A finger on the puzzle — the grid, the number pad, the on-screen keyboard —
   must never scroll or zoom the page: taps land where they're aimed and the board
   stays put. touch-action:none kills pan + pinch + double-tap-zoom on these (taps
   still click); corner.js adds a non-passive touchmove guard for older iPads.
   No long-press text selection / callout on letters either. Every other button
   gets touch-action:manipulation so quick double taps never zoom. The page can
   still scroll by swiping outside the board. */
html:has(body.qc) { overscroll-behavior: none; }   /* no rubber-band / pull-to-refresh */
body.qc { overscroll-behavior: none; }
.qc-lock, .sk-grid, .sk-pad, .sk-tools, .xw-grid, .ws-grid, .word-board, .keyboard {
  touch-action: none; -webkit-user-select: none; user-select: none;
  -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; }
body.qc button, body.qc a, body.qc input { touch-action: manipulation; }
body.qc :is(.qc-lock, .sk-pad, .sk-tools, .keyboard) button { touch-action: none; }

/* ---- ONE SCREEN puzzles (body.qc-fit: sudoku / crossword / search / word) ----
   The whole puzzle fits the screen with no page scrolling — nothing to hunt for.
   The page is locked to the viewport, the footer is dropped (the top bar still
   links home), and each game's fit() sizes the board to the space left. Before
   the board shrinks, QC.tighten() frees room from the header in steps:
   t1 hides the subtitle, t2 the Puzzle ID bar (it still prints), t3 compacts the
   title rows. If a screen is simply too short (phone on its side) the puzzle
   area scrolls inside itself as a fallback. */
body.qc.qc-fit { height: 100dvh; overflow: hidden; display: flex; flex-direction: column; }
body.qc.qc-fit > .qc-nav { flex: 0 0 auto; }
body.qc.qc-fit > main { flex: 1 1 auto; min-height: 0; width: 100%; overflow-y: auto;
  overscroll-behavior: contain; -webkit-overflow-scrolling: touch; justify-content: safe center;
  padding-bottom: 8px; }
body.qc.qc-fit > main > * { flex-shrink: 0; }
body.qc.qc-fit > .qc-foot { display: none; }
body.qc-t1 :is(.sk-sub, .xw-sub, .ws-sub, .word-sub) { display: none; }
body.qc-t2 > main > .qc-idbar { display: none; }
body.qc-t3 > .qc-nav { padding-top: 3px; padding-bottom: 3px; }
body.qc-t3 > main { padding-top: 2px; }
body.qc-t3 :is(.sk-head, .xw-head, .ws-head, .word-head) { margin: 0 0 2px; }
body.qc-t3 :is(.sk-head, .xw-head, .ws-head, .word-head) h1 { font-size: 1.3rem; }
body.qc-t3 :is(.sk-diff, .ws-diff) { margin-top: 4px; }
body.qc-t3 :is(.sk-controls, .xw-controls, .ws-controls, .word-controls) { margin-top: 4px; }
@media print { body.qc.qc-fit { height: auto; overflow: visible; display: block; }
  body.qc.qc-fit > main { overflow: visible; } }

/* screen-reader-only helper (shared live region lives here) */
.qc-sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* print-only branding — injected by corner.js, shown on every printout */
.qc-print-brand { display: none; }
@media print {
  .qc-print-brand { display: block !important; text-align: center; margin: 0 0 10px;
    font-family: var(--font-display); }
  .qc-print-brand strong { display: block; font-size: 1.25rem; color: #000 !important; }
  .qc-print-brand span { display: block; font-size: .82rem; color: #333 !important; letter-spacing: .01em; }
}

/* ---- puzzle ID bar (type an ID + Go to reproduce a puzzle); prints as text ---- */
.qc-idbar { display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap;
  margin: 6px 0 2px; color: var(--ink-soft); font-family: var(--font-display); font-weight: 600; font-size: .92rem; }
.qc-idbar input { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-weight: 700; font-size: .95rem;
  width: 12ch; min-width: 10ch; text-align: center; padding: 7px 10px; border: 1.5px solid var(--line); border-radius: 8px;
  background: var(--surface); color: var(--ink); text-transform: uppercase; }
.qc-idbar input:focus-visible { outline: 3px solid var(--accent); outline-offset: 1px; }
.qc-idbar .qc-btn { min-height: 40px; padding: 0 16px; font-size: .95rem; }
@media print {
  .qc-idbar { display: flex !important; color: #000 !important; justify-content: center; margin: 8px 0 4px; }
  .qc-idbar .qc-btn { display: none !important; }
  .qc-idbar input { border: 0 !important; background: transparent !important; color: #000 !important; width: auto; font-size: 1rem; }
}

/* ---- print-only QR (scan to reopen this exact puzzle) ---- */
.qc-print-qr { display: none; }
@media print {
  .qc-print-qr { display: block !important; text-align: center; margin: 4px 0 2px; }
  .qc-print-qr svg { width: 128px; height: 128px; }
  .qc-qr-cap { display: block; font-family: var(--font-display); font-weight: 700; font-size: .72rem;
    color: #000 !important; margin-top: 2px; line-height: 1.15; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}