/* ==========================================================================
   Counterpoint Motion — landing page game
   Palette lives here. Swapping the four ink values re-themes the whole page,
   canvas included: game.js reads these same custom properties at startup.
   ========================================================================== */

:root {
  --paper:      #F4F1EA;  /* page + canvas ground */
  --paper-deep: #EAE5DA;  /* canvas vignette, panel ground */
  --rule:       rgba(31, 27, 22, 0.10);   /* staff rules / barlines */
  --ink:        #1F1B16;  /* voice 1, the runner, body copy */
  /* Voice 2 == the logo's accent, so the two curves in the game read as the two
     halves of the mark. Was #8A2F2A (sanguine) before the logo landed. */
  --counter:    #D65027;
  --accent:     #018DBD;  /* HUD highlights, combo flashes */
  --ink-soft:   rgba(31, 27, 22, 0.58);
  --ink-faint:  rgba(31, 27, 22, 0.30);

  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua",
           Georgia, "Times New Roman", serif;

  --edge: 1px solid rgba(31, 27, 22, 0.16);
}

/* --- reset-ish ---------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html, body {
  height: 100%;
  /* Blocks pull-to-refresh and rubber-band chaining page-wide, so an
     overshooting swipe near the stage can't reload a run in progress. */
  overscroll-behavior-y: contain;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
}

/* Faint paper tooth over the whole page. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 100;
  opacity: 0.4;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(31,27,22,0.025) 0 1px, transparent 1px),
    radial-gradient(circle at 70% 65%, rgba(31,27,22,0.02)  0 1px, transparent 1px);
  background-size: 7px 7px, 11px 11px;
}

/* --- layout ------------------------------------------------------------- */

.frame {
  max-width: 1120px;
  margin: 0 auto;
  padding: clamp(1.5rem, 4vw, 3.25rem) clamp(1rem, 4vw, 2rem) 2rem;
  display: flex;
  flex-direction: column;
  gap: clamp(1.25rem, 3vw, 2rem);
  min-height: 100%;
}

.masthead { text-align: center; }

.wordmark {
  margin: 0;
  line-height: 0;   /* the logo is the wordmark; no text box to collapse */
}

/* The logo lockup is 1.35:1 (mark over two lines of lettering), so width is
   the axis to constrain — height follows and stays off the game's real estate.
   Its fills come from the palette, so re-theming the page re-themes the logo. */
.logo {
  display: block;
  width: clamp(150px, 26vw, 240px);
  height: auto;
  margin: 0 auto;
}

.logo-ink { fill: var(--ink); }
.logo-accent { fill: var(--counter); }

/* Hairline rule under the wordmark, drawn in two voices. */
.wordmark::after {
  content: "";
  display: block;
  width: min(280px, 60%);
  height: 2px;
  margin: 0.75rem auto 0;
  background: linear-gradient(to right,
    transparent, var(--ink) 22%, var(--ink) 48%,
    var(--counter) 52%, var(--counter) 78%, transparent);
  opacity: 0.7;
}

.subtext {
  margin: 0.85rem 0 0;
  color: var(--ink-soft);
  font-size: clamp(0.9rem, 2.4vw, 1.05rem);
  font-style: italic;
}

.colophon {
  text-align: center;
  font-size: 0.82rem;
  letter-spacing: 0.03em;
  color: var(--ink-faint);
  margin-top: auto;
  padding-top: 0.5rem;
}

/* --- stage -------------------------------------------------------------- */

.stage-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: var(--edge);
  border-radius: 3px;
  overflow: hidden;
  background: var(--paper-deep);
  box-shadow: 0 1px 0 rgba(255,255,255,0.7) inset,
              0 6px 22px -14px rgba(31,27,22,0.5);

  /* Rapid tapping otherwise selects text, raises the iOS long-press callout
     and flashes the grey tap highlight. Everything inside the stage is
     controls, not content, so none of it should be selectable. Body copy
     outside the stage (masthead, footer) stays selectable. */
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}

/* Portrait phones: 16:9 leaves only ~220px of stage at 390px wide, which is
   shorter than the title panel (~280px) — the Start button ended up below the
   fold, reading as a missing button rather than as scrollable content.
   8:7 clears the panel with room to spare while keeping the ribbon from being
   stranded in dead space: lobe height follows lobe LENGTH, so a taller stage
   can't be filled without steepening the curves, and steepness is exactly what
   caused the motion sickness. Shorten the stage instead. */
@media (orientation: portrait) and (max-width: 760px) {
  .stage-wrap { aspect-ratio: 8 / 7; }
}

/* Very narrow portrait: text wraps more, so give the panel a little more room. */
@media (orientation: portrait) and (max-width: 380px) {
  .stage-wrap { aspect-ratio: 1 / 1; }
}

/* Short viewports (phone landscape): don't let the stage push the page tall. */
@media (orientation: landscape) and (max-height: 560px) {
  .stage-wrap { aspect-ratio: auto; height: 68vh; min-height: 210px; }
  .frame { padding-top: 0.75rem; gap: 0.75rem; }
  .masthead .subtext { display: none; }
}

#stage {
  display: block;
  width: 100%;
  height: 100%;

  /* `none`, not `manipulation`: the play surface must swallow every browser
     gesture. `manipulation` still allows panning, which means a downward tap-
     drag mid-run scrolls the page — or, on Android Chrome, fires pull-to-
     refresh and reloads away the run. Players tap here; they never need to
     scroll from here. */
  touch-action: none;
}

.btn, .icon-btn {
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

/* --- HUD ---------------------------------------------------------------- */

.hud {
  position: absolute;
  inset: 0 0 auto 0;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: clamp(0.6rem, 2vw, 1rem);
  pointer-events: none;   /* canvas stays clickable underneath */
}

.hud[hidden] { display: none; }

.hud-left  { display: flex; gap: clamp(0.9rem, 3vw, 1.6rem); align-items: baseline; }
.hud-right { display: flex; gap: 0.4rem; align-items: center; pointer-events: auto; }

.stat { display: flex; flex-direction: column; line-height: 1.15; }

.stat-label {
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.stat-value {
  font-size: clamp(1.1rem, 3.6vw, 1.6rem);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

.stat-quiet .stat-value { color: var(--ink-soft); font-size: clamp(0.9rem, 2.6vw, 1.1rem); }

/* Combo lights up as it climbs; game.js toggles .hot. */
#combo.hot { color: var(--accent); }

.flash {
  font-size: 0.78rem;
  font-style: italic;
  letter-spacing: 0.04em;
  color: var(--accent);
  opacity: 0;
  transition: opacity 0.25s ease;
  white-space: nowrap;
  margin-right: 0.35rem;
}

.flash.show { opacity: 1; transition-duration: 0.06s; }
.flash.miss { color: var(--counter); }

.icon-btn {
  font: inherit;
  font-size: 0.9rem;
  line-height: 1;
  padding: 0.42rem 0.55rem;
  color: var(--ink-soft);
  background: rgba(244, 241, 234, 0.72);
  border: var(--edge);
  border-radius: 3px;
  cursor: pointer;
}

.icon-btn:hover { color: var(--ink); border-color: var(--ink-faint); }
.icon-btn[aria-pressed="false"] { color: var(--accent); }

/* Mute button carries a word, not a glyph — emoji speakers fight the paper
   theme. min-width stops the HUD shifting as the label changes length. */
#mute, #comfort {
  font-size: 0.6rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.52rem 0.6rem;
  min-width: 5.8em;
}

#comfort { min-width: 7.6em; }

.panel-foot em { font-style: italic; color: var(--ink-soft); }

/* --- overlays ----------------------------------------------------------- */

.overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(0.75rem, 3vw, 2rem);
  background: rgba(244, 241, 234, 0.90);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  overflow-y: auto;
}

.overlay[hidden] { display: none; }

.panel {
  max-width: 34rem;
  text-align: center;
  margin: auto;
}

.panel-title {
  margin: 0 0 0.75rem;
  font-size: clamp(1.3rem, 4.5vw, 2rem);
  font-weight: 400;
  letter-spacing: 0.05em;
}

.panel-lead {
  margin: 0 0 0.85rem;
  font-size: clamp(0.86rem, 2.5vw, 1rem);
  line-height: 1.6;
  color: var(--ink-soft);
}

.panel-lead em { color: var(--ink); font-style: italic; }

/* Touch hint only where it applies. */
.panel-touch { display: none; }
@media (hover: none) and (pointer: coarse) {
  .panel-touch { display: block; }
}

.panel-foot {
  margin: 1rem 0 0;
  font-size: 0.8rem;
  font-style: italic;
  color: var(--ink-faint);
}

.panel-score {
  margin: 0 0 1.1rem;
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 0.5rem;
}

#pauseScore {
  font-size: clamp(2rem, 8vw, 3.2rem);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.panel-score-label {
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

kbd {
  font-family: var(--serif);
  font-size: 0.95em;
  display: inline-block;
  min-width: 1.7em;
  padding: 0.05em 0.3em;
  margin: 0 0.06em;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--ink-faint);
  border-bottom-width: 2px;
  border-radius: 3px;
}

/* --- buttons ------------------------------------------------------------ */

.btn-row { display: flex; gap: 0.6rem; justify-content: center; flex-wrap: wrap; }

.btn {
  font-family: var(--serif);
  font-size: clamp(0.9rem, 2.6vw, 1rem);
  letter-spacing: 0.06em;
  padding: 0.6rem 1.6rem;
  color: var(--paper);
  background: var(--ink);
  border: 1px solid var(--ink);
  border-radius: 3px;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, transform 0.08s ease;
}

.btn:hover { background: var(--counter); border-color: var(--counter); }
.btn:active { transform: translateY(1px); }

.btn-ghost { color: var(--ink); background: transparent; }
.btn-ghost:hover { color: var(--paper); }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* --- small screens ------------------------------------------------------ */
/* The panel must fit the stage without scrolling: on a phone an overlay that
   scrolls reads as a missing button, not as scrollable content. */

@media (max-width: 640px) {
  .overlay { padding: 0.7rem; }
  .panel-title { margin-bottom: 0.4rem; }
  .panel-lead { margin-bottom: 0.5rem; line-height: 1.45; }
  .panel-foot { display: none; }

  /* Comfortable thumb target. */
  .btn { padding: 0.72rem 1.6rem; }

  /* The HUD gets crowded at this width; the ink blot and the score drop
     already communicate a miss. */
  .flash { display: none; }

  .hud { padding: 0.5rem; gap: 0.5rem; }
  .hud-left { gap: 0.85rem; }
  #mute, #comfort { font-size: 0.55rem; padding: 0.45rem 0.45rem; }
  #mute { min-width: 5.2em; }
  #comfort { min-width: 6.8em; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition-duration: 0.01ms !important; }
}