/*!
 * Treble Trouble v2 — the cover's coat.
 *
 * Loaded AFTER treble-invaders-v1.css and only overrides looks (the Bass
 * Attack pattern). Everything here comes from the cover in
 * 06_Content & AI/*MOGRAPH + ADS/covers/treble-trouble and its COVER-RULES.md:
 *   - flat set, no gradients: a flat sky, two flat hills, two flat clouds
 *   - the staff rises and arches (drawn by the engine: SKIN.staffCurve)
 *   - the clef is big, leans, rocks gently, and drops a hard flat shadow
 *   - the invaders are the cover's: white-ringed brown heads, navy pupils,
 *     cheeky brows, a white smirk and a three-bar speed trail
 *   - the title is a logo: "Treble" in white Nunito Black over "Trouble" in
 *     Grobold small caps, the letters playing C to B, on a gentle arch
 *   - room to breathe: no slab behind the staff, no box around the title
 */

@font-face {
  font-family: "Grobold";
  src: url("../../../assets/fonts/grobold.ttf") format("truetype");
  font-display: swap;
}

body.is-cover {
  --tc-sky: #8fd6f4;
  --tc-navy: #1b233e;
  --tc-brown: #512d1b;
  background: var(--tc-sky);
}

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* ── The set ──────────────────────────────────────────────────────────────
   The piano-field painting is gone: a flat sky, flat hills under the bells,
   two clouds near the top corners. One idea, lots of air. */
/* (the menu is always on the flat sky; Classic play keeps v1's painting) */
.is-cover .ti-title .ti-field,
body.is-cover:not(.is-classic) .ti-field { background: var(--tc-sky); background-image: none; }
.is-classic .ti-play .tc-clouds, .is-classic .ti-play .tc-hills,
.is-classic .ti-over .tc-clouds, .is-classic .ti-over .tc-hills { display: none; }

.tc-clouds, .tc-hills {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
}
.tc-clouds svg, .tc-hills svg { width: 100%; height: 100%; display: block; }
.tc-clouds svg { animation: tc-drift 16s ease-in-out infinite alternate; }
@keyframes tc-drift { from { translate: -10px 0; } to { translate: 12px 0; } }

/* ── The staff ──────────────────────────────────────────────────────────── */
body.is-cover:not(.is-classic) .ti-staff::before { display: none; }          /* no white band: the sky is the page */
.ti-lines {
  position: absolute; left: 0; top: 0;
  overflow: visible; pointer-events: none;
}
.ti-lines path {
  fill: none;
  stroke: var(--tc-navy);
  stroke-width: max(2.6px, calc(var(--gap, 56px) * 0.07));
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.85;
}

/* The clef: notation-true from the engine (spiral on G), then drawn bigger
   about that spiral the way the cover does, leaning back and rocking
   -13 to -9 degrees. `translate` (the curve) is set by the engine; scale and
   rotate are separate properties, so all three compose. */
/* No z-index on purpose: the clef paints over the staff lines (it comes
   after them) and UNDER the bells (they come after it), so its tail runs
   down behind the bell row the way the cover's runs off behind the ground. */
body.is-cover:not(.is-classic) .ti-clef {
  transform-origin: 52% 58.3%;
  scale: 1.24;
  rotate: -11deg;
  filter: drop-shadow(4px 7px 0 rgba(27, 35, 62, 0.22));
  animation: tc-rock 4s ease-in-out infinite;
}
@keyframes tc-rock {
  0%, 100% { rotate: -13deg; }
  50%      { rotate: -9deg; }
}

/* An upright phone: the arena is tall and narrow, so v1's "staff as tall as
   the arena allows" made the clef a wall. A shorter staff gives the notes a
   longer road and the sky some air. */
@media (orientation: portrait) and (max-width: 600px) {
  body.is-cover:not(.is-classic) .ti-staff { height: min(30%, 170px); }
  body.is-cover:not(.is-classic) .ti-clef { scale: 1.12; }
}

/* ── The invaders (the cover's note-troublemakers) ──────────────────────── */
body.is-cover:not(.is-classic) .ti-invader { animation: tc-bob 1s ease-in-out infinite; }
@keyframes tc-bob {
  0%, 100% { translate: 0 0; }
  50%      { translate: -0.05em -0.07em; }
}
body.is-cover:not(.is-classic) .ti-invader.is-hit,
body.is-cover:not(.is-classic) .ti-invader.is-landed { translate: 0 0; }
body.is-cover:not(.is-classic) .ti-invader.is-hit { animation: ti-pop 0.28s ease-out forwards; }
body.is-cover:not(.is-classic) .ti-invader.is-landed { animation: ti-land 0.6s ease-in forwards; }

body.is-cover:not(.is-classic) .ti-invader-head {
  border-color: #fff;
  filter: none;
}
body.is-cover:not(.is-classic) .ti-invader-stem {
  box-shadow: 0 0 0 0.03em #fff;
}
body.is-cover:not(.is-classic) .ti-eye::after { background: var(--tc-navy); }
body.is-cover:not(.is-classic) .ti-brow { background: #a8927f; }
/* the smirk */
body.is-cover:not(.is-classic) .ti-invader-head::after {
  content: "";
  position: absolute; left: 0.3em; top: 0.5em;
  width: 0.32em; height: 0.14em;
  border-bottom: 0.055em solid #fff;
  border-radius: 0 0 60% 60%;
  transform: rotate(14deg);
}
/* the speed trail: three flat bars in the note's ink, fading by steps */
body.is-cover:not(.is-classic) .ti-invader-blur {
  left: 108%; top: 34%;
  width: 0.78em; height: 0.17em;
  background: var(--c);
  border-radius: 1em;
  opacity: 0.32;
}
body.is-cover:not(.is-classic) .ti-invader-blur::before,
body.is-cover:not(.is-classic) .ti-invader-blur::after {
  content: ""; position: absolute; height: 100%; border-radius: 1em; background: inherit;
}
body.is-cover:not(.is-classic) .ti-invader-blur::before { left: 0.16em; top: 0.3em; width: 0.56em; opacity: 0.62; }
body.is-cover:not(.is-classic) .ti-invader-blur::after  { left: 0.06em; top: -0.3em; width: 0.42em; opacity: 0.44; }

/* ── HUD: light pills on the sky instead of navy slabs ──────────────────── */
body.is-cover:not(.is-classic) .ti-lives,
body.is-cover:not(.is-classic) .ti-stat,
body.is-cover:not(.is-classic) .ti-icon-btn {
  background: rgba(255, 255, 255, 0.9);
  color: var(--tc-navy);
  border-radius: 999px;
  box-shadow: 0 3px 10px rgba(27, 35, 62, 0.14);
}
body.is-cover:not(.is-classic) .ti-stat dt { color: #6a7392; }
body.is-cover:not(.is-classic) #streak.is-hot { color: #d9480f; }   /* v1's gold is unreadable on a white pill */
body.is-cover:not(.is-classic) .ti-heart.is-gone svg { fill: #d5dced; }
body.is-cover:not(.is-classic) .ti-icon-btn svg { fill: var(--tc-navy); }
body.is-cover:not(.is-classic) .ti-heat-track { background: rgba(255, 255, 255, 0.55); }

/* ── Bells: a softer contact shadow on the flat grass ───────────────────── */
body.is-cover:not(.is-classic) .ti-bell-layer { filter: drop-shadow(0 4px 0 rgba(27, 35, 62, 0.14)); }

/* ══════════════════════════════════════════════════════════════════════════
   THE TITLE SCREEN: a poster, not a form
   No box. The title lockup sits on the sky like the cover's; the choices are
   white cards floating below it; the G bell leans in from the corner.
   ══════════════════════════════════════════════════════════════════════════ */
.is-cover .ti-title { padding: 18px 16px 48px; }
.is-cover .ti-title .ti-title-card {
  width: min(100%, 560px);
  background: none; border: 0; box-shadow: none;
  padding: 10px 0 0;
}
.is-cover .ti-title .ti-eyebrow { color: rgba(27, 35, 62, 0.55); margin-bottom: 0; }

.is-cover .ti-logo {
  display: flex; flex-direction: column; align-items: center;
  margin: 8px 0 6px;
  line-height: 0.9; letter-spacing: 0;
}
/* v1 makes every span in the logo a red block; these are not that */
.is-cover .ti-logo .tc-row { display: flex; justify-content: center; color: inherit; }
.is-cover .ti-logo .tc-l {
  display: inline-block;
  translate: 0 var(--y);
  rotate: var(--r);
  animation: tc-ripple 2s ease-in-out infinite;
  animation-delay: calc(var(--d) * -2s);
}
@keyframes tc-ripple {
  0%, 100% { margin-top: 0; }
  50%      { margin-top: -0.04em; }
}
.tc-kicker {
  font-family: "Nunito", system-ui, sans-serif; font-weight: 900;
  font-size: clamp(34px, 8vw, 60px);
  letter-spacing: 0.01em;
}
.tc-word {
  font-family: "Grobold", "Nunito", system-ui, sans-serif; font-weight: 400;
  font-variant-caps: small-caps;
  font-size: clamp(62px, 15.5vw, 118px);
  margin-top: -0.06em;
}

.is-cover .ti-tag {
  color: var(--tc-navy); font-weight: 800; font-size: 15.5px;
  margin: 2px auto 18px; max-width: 30em;
}
.is-cover .ti-mode,
.is-cover .ti-level {
  background: #fff;
  border: 3px solid transparent;
  border-radius: 20px;
  box-shadow: 0 4px 0 rgba(27, 35, 62, 0.12);
}
.is-cover .ti-mode.is-on { border-color: #009999; background: #f1fbfb; }
.is-cover .ti-pick { color: var(--tc-navy); }
.is-cover .ti-endless { border-radius: 20px; background: #009999; box-shadow: 0 4px 0 #007474; }
.is-cover .ti-title .ti-bests {
  background: rgba(255, 255, 255, 0.8);
  border-radius: 20px;
  padding: 10px 12px;
  margin-top: 16px;
}
.is-cover .ti-title .ti-note { color: rgba(27, 35, 62, 0.62); margin-top: 12px; }

/* The game-over card keeps its card (it is a result, not the front door),
   minus the heavy navy border. */
.is-cover .ti-over .ti-title-card {
  border: 0;
  border-radius: 28px;
  box-shadow: 0 14px 40px rgba(27, 35, 62, 0.18);
}

/* The cover's G bell, cropped by the bottom-right corner, leaning like the
   wave pendulum and swaying a little about its foot. Wide screens only: on a
   phone the choices need the whole width. */
.tc-hero {
  position: absolute; z-index: 0;
  right: -2%; bottom: -5%;
  width: clamp(240px, 30vw, 440px); aspect-ratio: 1;
  pointer-events: none;
  transform-origin: 50% 94%;
  animation: tc-sway 4s ease-in-out infinite;
}
.tc-hero > * { width: 100%; height: 100%; display: block; }
@keyframes tc-sway {
  0%, 100% { rotate: -9deg; }
  50%      { rotate: -7deg; }
}
@media (max-width: 900px) { .tc-hero { display: none; } }

@media (prefers-reduced-motion: reduce) {
  .tc-clouds svg, body.is-cover:not(.is-classic) .ti-clef, body.is-cover:not(.is-classic) .ti-invader, .tc-l, .tc-hero { animation: none; }
}

/* ══════════════════════════════════════════════════════════════════════════
   THE KID-FIRST MENU (Rob, 2026-10-08, with Kiddopia's home as the model):
   no reading needed, two big picture buttons, menus in the corners, the
   grown-up detail behind the gear. Built by titleHtml() in index.html.
   ══════════════════════════════════════════════════════════════════════════ */
.tc-menu { position: relative; z-index: 1; width: 100%; justify-self: stretch; align-self: stretch; min-height: 100vh; min-height: 100svh; }
.tc-menu:not([data-view="map"]) .tc-map,
.tc-menu[data-view="map"] .tc-front { display: none; }
.ti-title.is-map .tc-hero { display: none; }
.is-cover .ti-title:has(.tc-menu) { display: block; padding: 0; }

/* the front: the title, then BAM, two buttons */
.tc-front {
  min-height: 100vh; min-height: 100svh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: clamp(14px, 4vh, 40px);
  padding: 70px 16px 60px;
}
.tc-front .ti-logo { margin: 0; }
.tc-big { display: flex; gap: clamp(14px, 3vw, 32px); justify-content: center; }
.tc-btn {
  position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  width: clamp(150px, 24vw, 250px); aspect-ratio: 1 / 0.9;
  border: 0; border-radius: 34px; cursor: pointer;
  color: #fff; font: inherit;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.12s ease;
  animation: tc-float 3s ease-in-out infinite;
}
.tc-btn:active { transform: scale(0.95); }
.tc-btn:focus-visible { outline: 5px solid #fff; outline-offset: 4px; }
.tc-journey { background: #009999; box-shadow: 0 9px 0 #007474, 0 16px 24px rgba(27, 35, 62, 0.18); }
.tc-endless { background: #7b569e; box-shadow: 0 9px 0 #5c3f79, 0 16px 24px rgba(27, 35, 62, 0.18); animation-delay: -1.5s; }
@keyframes tc-float { 50% { translate: 0 -6px; } }
.tc-btn b {
  font-family: "Grobold", "Nunito", system-ui, sans-serif; font-weight: 400;
  font-size: clamp(24px, 3.6vw, 38px); line-height: 1;
  text-shadow: 0 0.07em 0 rgba(27, 35, 62, 0.28);
}
.tc-ico { display: grid; place-items: center; width: 52%; height: 46%; margin-bottom: 10px; }
.tc-ico svg { width: 100%; height: 100%; overflow: visible; }
.tc-dots { display: flex; gap: 5px; margin-top: 2px; }
.tc-dots i { width: 11px; height: 11px; border-radius: 50%; background: rgba(255, 255, 255, 0.35); }
.tc-dots i.on { background: var(--c); box-shadow: 0 0 0 2px #fff; }
.tc-btn .tc-lock, .tc-stone .tc-lock {
  display: grid; place-items: center;
  width: 34px; height: 34px; border-radius: 50%; background: #fff;
}
.tc-btn .tc-lock { position: absolute; top: -10px; right: -10px; box-shadow: 0 3px 8px rgba(27, 35, 62, 0.25); }
.tc-lock svg { width: 20px; height: 20px; }

/* the journey: stepping stones along an arch, the next one bouncing */
.tc-map { position: absolute; inset: 96px 5% 100px; }
.tc-road { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.tc-road path {
  fill: none; stroke: #fff; stroke-width: 9; stroke-linecap: round;
  stroke-dasharray: 2 18; opacity: 0.9;
  vector-effect: non-scaling-stroke;
}
.tc-road-p { display: none; }
.tc-stone {
  position: absolute; left: var(--x); top: var(--y);
  translate: -50% -50%;
  width: clamp(76px, 10vw, 118px); aspect-ratio: 1;
  border-radius: 50%; border: 6px solid #fff; cursor: pointer;
  background: var(--c); color: #fff; font: inherit;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  box-shadow: 0 7px 0 rgba(27, 35, 62, 0.18);
  -webkit-tap-highlight-color: transparent;
}
.tc-stone:active { scale: 0.94; }
.tc-num {
  font-family: "Grobold", "Nunito", system-ui, sans-serif;
  font-size: clamp(30px, 4vw, 46px); line-height: 0.9;
  text-shadow: 0 0.07em 0 rgba(27, 35, 62, 0.3);
}
.tc-stone .tc-stars { font-size: clamp(11px, 1.3vw, 15px); letter-spacing: 1px; }
.tc-stars i { font-style: normal; color: rgba(255, 255, 255, 0.45); }
.tc-stars i.on { color: #ffd25b; text-shadow: 0 1px 0 rgba(27, 35, 62, 0.35); }
.tc-stone.is-locked { filter: saturate(0.45) brightness(1.05); }
.tc-stone .tc-lock { width: 30px; height: 30px; }
.tc-stone.is-next { animation: tc-hop 1.1s ease-in-out infinite; z-index: 1; }
@keyframes tc-hop { 0%, 100% { translate: -50% -50%; } 45% { translate: -50% -62%; } }
.tc-go {
  position: absolute; right: -14px; top: -14px;
  display: grid; place-items: center;
  width: 44px; height: 44px; border-radius: 50%;
  background: #1b233e; border: 4px solid #fff;
}
.tc-go svg { width: 22px; height: 22px; margin-left: 3px; }

/* round corner buttons: back (bottom-left, on the map) and the gear (top-right) */
.tc-round {
  position: fixed; z-index: 5;
  display: grid; place-items: center;
  width: 60px; height: 60px; border-radius: 50%;
  border: 0; cursor: pointer;
  background: rgba(255, 255, 255, 0.92); color: #1b233e;
  box-shadow: 0 4px 0 rgba(27, 35, 62, 0.15);
}
.tc-round svg { width: 30px; height: 30px; }
.tc-back { left: max(16px, env(safe-area-inset-left)); bottom: max(16px, env(safe-area-inset-bottom)); }
.tc-gear { right: max(16px, env(safe-area-inset-right)); top: calc(max(10px, env(safe-area-inset-top)) + 62px); width: 52px; height: 52px; }
.tc-gear svg { width: 30px; height: 30px; }
.tc-mic-on {
  position: absolute; right: -6px; bottom: -6px;
  display: grid; place-items: center;
  width: 24px; height: 24px; border-radius: 50%;
  background: #009999; color: #fff; border: 2px solid #fff;
}
.tc-mic-on svg { width: 14px; height: 14px; }

/* the grown-ups sheet */
.tc-scrim, .tc-sheet { display: none; }
.tc-menu[data-view="settings"] .tc-scrim { display: block; position: fixed; inset: 0; z-index: 20; background: rgba(15, 12, 40, 0.4); }
.tc-menu[data-view="settings"] .tc-sheet {
  display: block;
  position: fixed; z-index: 21; left: 50%; top: 50%; translate: -50% -50%;
  width: min(540px, calc(100vw - 24px)); max-height: calc(100svh - 40px); overflow: auto;
  background: #fdfbf6; color: #1b233e; border-radius: 28px;
  padding: 14px 20px 22px; text-align: left;
  box-shadow: 0 20px 50px rgba(15, 12, 40, 0.35);
}
.tc-sheet-head { display: flex; align-items: center; justify-content: space-between; }
.tc-sheet-head b { font-size: 20px; font-weight: 900; }
.tc-x { width: 44px; height: 44px; border: 0; border-radius: 50%; background: rgba(27, 35, 62, 0.08); color: #1b233e; font: 900 24px/1 Nunito, system-ui, sans-serif; cursor: pointer; }
.tc-h { margin: 14px 0 8px; font-size: 11px; font-weight: 900; letter-spacing: 1.8px; text-transform: uppercase; color: #8a93ad; }
.tc-sheet .ti-mode { border: 3px solid #e3e8f2; }
.tc-sheet .ti-mode-art svg { width: 24px; height: 24px; color: #1b233e; }
.tc-waves { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.tc-waves li { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 14px; }
.tc-waves li > i {
  display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%;
  background: var(--c); color: #fff; font-style: normal; font-weight: 900; font-size: 13px;
}
.tc-waves .tc-stars { margin-left: auto; }
.tc-waves .tc-stars i { color: #d5dced; }
.tc-waves .tc-stars i.on { color: #f2b72b; text-shadow: none; }
.tc-sheet .ti-bests { margin: 16px 0 4px; }
.tc-sheet .ti-looks { justify-content: flex-start; margin: 12px 0 6px; }
.tc-hint { margin: 0 0 4px; font-size: 12px; font-weight: 700; color: #8a93ad; }
.tc-sheet .ti-note { margin-top: 10px; text-align: left; color: #6a7392; }

/* an upright phone: buttons side by side but smaller, the stones zig-zag down */
@media (orientation: portrait) and (max-width: 700px) {
  .tc-btn { width: min(43vw, 200px); border-radius: 28px; }
  .tc-map { inset: 120px 6% 96px; }
  .tc-stone { left: var(--px); top: var(--py); }
  .tc-road-l { display: none; }
  .tc-road-p { display: inline; }
}
@media (prefers-reduced-motion: reduce) { .tc-btn, .tc-stone.is-next { animation: none; } }