/* toronto.css — "Heroes & Villains of Toronto" skin. Active only under
   body[data-skin="toronto"]; loaded AFTER dorking.css in the skin chain, and
   every rule is skin-scoped, so no other skin is affected. Winter-night
   warmth: navy base, chalk-white text, hero-gold, villain-red, and a
   Leafs-ish sky blue on the title (spec §7). */
body[data-skin="toronto"] {
  --tow-toxic: #ffd166;   /* hero gold (salute) */
  --tow-wand:  #e5484d;   /* villain red (banish) */
  --tow-grave: #0f1b2d;   /* winter-night navy */
}
body[data-skin="toronto"] .tow-line.l1 { color: #ffd166; text-shadow: 0 0 14px rgba(255, 209, 102, .5); }
body[data-skin="toronto"] .tow-line .dead { color: #8ec5ff; text-shadow: 0 0 18px rgba(142, 197, 255, .6); }
body[data-skin="toronto"] #record-btn { background: #16294a; border-color: #ffd166; }
body[data-skin="toronto"] #record-btn[aria-pressed="true"] { background: #ffd166; }
body[data-skin="toronto"] #tow-boss-word .bw-l.current { color: #ffd166; }

/* Lakeside-winter atmosphere: cool the spooky fog toward icy blue */
body[data-skin="toronto"] .tow-fog { filter: hue-rotate(200deg) saturate(0.7) brightness(0.85); }
body[data-skin="toronto"] #tow-mute,
body[data-skin="toronto"] #tow-info {
  border-color: rgba(255, 209, 102, 0.45);
  background: rgba(15, 27, 45, 0.7);
  color: #eef4fb;
}

/* Life-lost reveal pop-up (toronto sets lifeLostReveal:true — tow.js creates
   #tow-life-reveal lazily). Scoped so only /toronto styles it. lowercaseNames
   applies here too (…that was ontario place → write 'o'…) via text-transform,
   matching the drifting name label — the berlin pattern.
   Owner-rule note: the reveal is ENGINE-composed text, so this transform also
   lowercases the one rare capital-L mention (a missed leafs reads "write 'l'")
   — accepted residual; the wave-4 letter card shows the real L. */
body[data-skin="toronto"] #tow-life-reveal {
  position: fixed; left: 50%; top: 38%; transform: translate(-50%,-50%) scale(.9);
  z-index: 60; max-width: 86vw; padding: 12px 16px; border-radius: 12px;
  background: rgba(15, 27, 45, .96); color: #eef4fb; border: 2px solid #ffd166;
  font: 600 16px/1.3 Inter, sans-serif; text-align: center; opacity: 0; pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
  text-transform: lowercase;
}
body[data-skin="toronto"] #tow-life-reveal.show { opacity: 1; transform: translate(-50%,-50%) scale(1); }

/* Between-wave "TORONTO, DID YOU KNOW? 🦝" tidbit card (toronto sets
   tidbits:[…]; NO reverentBeats, so every gap is a tidbit slot). PLAYFUL —
   a gold raccoon header on a deep-navy panel. Anchored to the LOWER third so
   it clears the centred "WAVE N" countdown it shows alongside. Built lazily by
   tow_waveprogress → only ever exists on /berlin + /dorking + /toronto. */
body[data-skin="toronto"] #tow-tidbit {
  position: fixed; inset: 0; z-index: 57; display: grid;
  align-items: end; justify-items: center; padding-bottom: 12vh;
  opacity: 0; pointer-events: none; transition: opacity .3s ease;
}
body[data-skin="toronto"] #tow-tidbit[hidden] { display: none; }
body[data-skin="toronto"] #tow-tidbit.tid-show { opacity: 1; }
body[data-skin="toronto"] #tow-tidbit .tid-card {
  width: min(86vw, 440px); max-width: 82vw; padding: 18px 22px 20px; text-align: center;
  background: linear-gradient(180deg, rgba(26, 44, 72, .96), rgba(15, 27, 45, .96));
  border: 1.5px solid rgba(255, 209, 102, .6); border-radius: 16px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, .5);
}
body[data-skin="toronto"] #tow-tidbit .tid-head {
  font: 800 13px/1.2 Inter, sans-serif; letter-spacing: .1em; color: #ffd166;
  text-transform: lowercase; margin-bottom: 8px;   /* §6: renders lowercase */
}
body[data-skin="toronto"] #tow-tidbit .tid-title {
  font: 700 17px/1.3 Inter, sans-serif; color: #fff; margin-bottom: 6px;
}
body[data-skin="toronto"] #tow-tidbit .tid-title[hidden] { display: none; }
body[data-skin="toronto"] #tow-tidbit .tid-text {
  font: 400 14px/1.5 Inter, sans-serif; color: #dce7f5;
}
@media (prefers-reduced-motion: reduce) {
  body[data-skin="toronto"] #tow-tidbit { transition: none; }
}

/* While the tidbit card is visibly up, the oval "hold to draw" pad CTA is
   hidden — the card owns the bottom of the screen. The body class is toggled
   by toronto_theme.js for exactly the card's visible lifetime (showTidbit wrap
   hides only once the card actually renders; the symmetric hideTidbit wrap
   restores on the engine's real hide path).
   visibility (not display) so tow.css's `display:flex !important` pad rule
   needs no counter-!important — the fixed oval keeps its slot and pops back. */
body[data-skin="toronto"].toronto-tidbit-up #record-btn { visibility: hidden; }

/* ── §6 (the place-game owner rule): ALL player-facing copy RENDERS lowercase —
   the only capital ever shown is a standalone L naming the capital-L class.
   Theme/TT strings are lowercased at the data level (toronto_theme.js); the
   scoped transforms below cover the ENGINE-composed literals that reach the
   player on /toronto ("WAVE 9" wave titles, "Wave 3" HUD, "Only N waves…",
   "HALL OF FAME", "ENTER YOUR NAME", the ⌫/✓ board buttons, share-channel
   labels, the info-modal body, the game-over row literals).
   `none`  → the element's text is fully theme data (already correct case);
   `lowercase` → engine literals are mixed in.
   The testBanner keeps transform:none (the fv.css precedent) so its one
   deliberate capital — the leafs' L — survives; base .twp-title is uppercase
   in tow.css, so without these rules the banner would SHOUT.
   Player CONTENT is exempt: board initials (.tsb-list) and the name-entry
   slots (.tsb-slots) are what the player typed/drew, never transformed. */
body[data-skin="toronto"] .tow-line,
body[data-skin="toronto"] .tow-hud-rank,
body[data-skin="toronto"] .tow-go-headline,
body[data-skin="toronto"] .tow-win-headline { text-transform: none; }
/* …except the how-to-play heading, which is NOT theme data: tow_title.js
   buildIntroOverlay hardcodes the literal "How to Play" into
   #tow-intro-overlay .tow-line.l2, so the `none` above (which the TITLE needs —
   its text is already correct-case theme data) would let those capitals
   through. Scoped to the intro overlay only, and specific enough to win
   (id + 3 classes vs 2 classes). Asserted on the rendered innerText by
   tow_toronto_lowercase.spec.js. */
body[data-skin="toronto"] #tow-intro-overlay .tow-line.l2 { text-transform: lowercase; }
body[data-skin="toronto"] .tow-hud-wave,
body[data-skin="toronto"] .twp-title,
body[data-skin="toronto"] .twp-sub,
body[data-skin="toronto"] .tow-go-stat,
body[data-skin="toronto"] .tow-go-fun,
body[data-skin="toronto"] .tsb-h,
body[data-skin="toronto"] .tsb-sub,
body[data-skin="toronto"] .tsb-hint,
body[data-skin="toronto"] .tsb-btn,
body[data-skin="toronto"] .tsb-first,
body[data-skin="toronto"] .btn-share,
body[data-skin="toronto"] #share-overlay,
body[data-skin="toronto"] .tow-info-card { text-transform: lowercase; }
body[data-skin="toronto"] #tow-wave-progress.twp--testbanner .twp-title { text-transform: none; }