/* title.css — the front door: MINDASH stamped over the live street, the
   VP's query letter pinned in the sky (the story), Kemi in the clear
   between, and one paper panel at her feet: Play (filling like the wooden
   ruler while the street loads) and Upload. Then the picker sheet. Same
   stationery as the HUD and the cards; the letter is official school paper,
   like the report card. */

/* The still of the first live frame shows at once and fades when the 3D draws; the controls never move. */
/* Without the image (a run that starts mid-act, or it hasn't come): the dawn sky over the red street. */
.title-still { position: fixed; inset: 0; z-index: 1; pointer-events: none; transition: opacity .8s ease;
  background: linear-gradient(180deg, #a9b9cf 0%, #cfd2d2 38%, #d9c4a6 52%, #b6542b 53%, #a4472a 100%); }
.title-still img { display: block; width: 100%; height: 100%; object-fit: cover; }
.title-still.is-gone { opacity: 0; }
.no-title .title-still, .no-still .title-still img { display: none; }
body.is-title #hud, body.is-title #status { opacity: 0; visibility: hidden; }
#hud { transition: opacity .45s ease; }

/* One column, top to bottom: the logo, the letter, the street (Kemi), the panel. */
.title { position: fixed; inset: 0; z-index: 8; box-sizing: border-box; display: flex; flex-direction: column; align-items: flex-start;
  padding: calc(var(--safe-t) + 14px) 16px calc(var(--safe-b) + 16px); pointer-events: none; font-family: var(--ui); color: var(--ink); }
.title button { font: inherit; color: inherit; cursor: pointer; pointer-events: auto; -webkit-tap-highlight-color: transparent; }
.title button:focus-visible { outline: 3px solid var(--uniform-blue); outline-offset: 3px; }
.title .pin { position: absolute; top: -10px; left: 50%; width: 20px; height: 20px; translate: -50% 0; border-radius: 50%;
  background: radial-gradient(circle at 35% 32%, #ff8a80, var(--red-ink) 62%); border: 2px solid var(--ink); }

/* ── The logo ─────────────────────────────────────────────── */
.title-logo { flex: none; align-self: stretch; display: flex; align-items: flex-start; justify-content: space-between; transition: opacity .35s ease, transform .45s ease; }
.title-logo .logo { position: relative; margin: 0; font: 800 clamp(46px, 13vw, 92px)/.92 var(--display); letter-spacing: .01em; color: var(--pencil);
  -webkit-text-stroke: clamp(5px, 1.35vw, 9px) var(--ink); paint-order: stroke fill; text-shadow: 0 clamp(4px, 1vw, 7px) 0 var(--ink); }
.title-logo .logo .word { display: block; }
.title-logo .stamp { position: absolute; right: -0.3em; top: 86%; padding: .18em .5em .12em; font: 800 clamp(15px, 3.9vw, 26px)/1 var(--display); letter-spacing: .16em;
  color: var(--red-ink); -webkit-text-stroke: 0; text-shadow: none; background: rgba(255, 246, 224, .9); border: 3px solid var(--red-ink); border-radius: 7px;
  rotate: -8deg; box-shadow: 0 0 0 2px rgba(255, 246, 224, .9); }
.title-tools { display: flex; gap: 8px; }
.title-tool, .title-sound { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; background: var(--paper); border: 2.5px solid var(--ink); border-radius: 12px;
  box-shadow: 0 3px 0 var(--ink); }
.title-tool svg, .title-sound svg { width: 24px; height: 24px; }
.title-switch { width: auto; min-width: 48px; padding: 0 7px; font: 900 13px/1 var(--ui)!important; }

.audio-settings { position: fixed; inset: 0; z-index: 30; display: grid; place-items: center; padding: 16px; box-sizing: border-box; font-family: var(--ui); color: var(--ink); }
.audio-backdrop { position: absolute; inset: 0; background: rgba(22, 18, 14, .65); }
.audio-sheet { position: relative; box-sizing: border-box; width: min(100%, 390px); padding: 22px; background: var(--paper); border: 3px solid var(--ink); border-radius: 12px; box-shadow: 0 6px 0 var(--ink), 0 24px 48px rgba(0, 0, 0, .4); }
.audio-sheet h2 { margin: 0 44px 14px 0; font: 800 27px/1 var(--display); }
.audio-sheet label { display: flex; justify-content: space-between; margin-top: 16px; font: 800 16px/1.2 var(--ui); }
.audio-sheet output { font-variant-numeric: tabular-nums; }
.audio-sheet input { width: 100%; height: 44px; margin: 2px 0; accent-color: var(--uniform-blue); }
.audio-sheet p { margin: 10px 0 0; font: 700 12px/1.35 var(--ui); color: rgba(22, 18, 14, .68); }
.audio-close { position: absolute; top: 12px; right: 12px; width: 44px; height: 44px; background: #fff; border: 2px solid var(--ink); border-radius: 10px; font: 800 29px/1 var(--ui); cursor: pointer; }
.audio-settings button:focus-visible, .audio-settings input:focus-visible { outline: 3px solid var(--uniform-blue); outline-offset: 2px; }

/* ── The query letter: the story ──────────────────────────── */
/* Typed by the office, stamped ACCUSED, and answered in her own pen beside the stamp. It sits in the sky,
   above her head; the gap under the logo grows with its NO EXPO stamp. */
.title-query { position: relative; flex: none; box-sizing: border-box; width: 100%; max-width: 400px; margin-top: calc(clamp(15px, 3.9vw, 26px) * 1.6 + 12px); padding: 18px 16px 10px;
  background: #fffdf4; border: 2.5px solid var(--ink); border-radius: 6px;
  box-shadow: inset 0 0 0 4px #fffdf4, inset 0 0 0 5.5px var(--uniform-blue), 0 5px 0 var(--ink), 0 16px 36px rgba(22, 18, 14, .32);
  rotate: -1.2deg; transition: opacity .35s ease, transform .45s cubic-bezier(.6, 0, .9, .4); animation: query-in .6s var(--spring) backwards; }
.title-query .from { display: block; font: 800 10px/1 var(--ui); letter-spacing: .18em; text-transform: uppercase; color: var(--uniform-blue); }
.title-query .charge { margin: 6px 0 0; font: 800 20px/1.1 var(--display); }
.title-query .answer { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 7px; }
.title-query .reply { margin: 0 0 0 6px; font: 700 27px/1 var(--hand); color: var(--uniform-blue); rotate: -2.5deg; transform-origin: left center;
  animation: query-write .7s .8s ease-out backwards; }
.title-query .stamp { flex: none; margin-right: 4px; padding: 5px 10px 3px; font: 800 16px/1 var(--display); letter-spacing: .12em; text-transform: uppercase;
  color: var(--red-ink); border: 3px solid currentColor; border-radius: 7px; box-shadow: inset 0 0 0 1.5px #fffdf4, inset 0 0 0 3px currentColor;
  mix-blend-mode: multiply; opacity: .9; rotate: -6deg; animation: query-stamp .28s .45s cubic-bezier(.3, 1.6, .5, 1) backwards; }
.title-query .terms { margin: 6px 0 0; font: 700 13.5px/1.35 var(--ui); color: rgba(22, 18, 14, .78); }
.title-query .terms b { color: var(--red-ink); font-weight: 900; }
.title-query .sign { margin: 2px 0 0; text-align: right; font: 700 19px/1 var(--hand); }
.title-query .sign::before { content: '— '; }
@keyframes query-in { from { opacity: 0; transform: translateY(-26px) rotate(-6deg); } }
@keyframes query-stamp { from { opacity: 0; transform: scale(2.4); } to { opacity: .9; transform: none; } }
@keyframes query-write { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }

/* ── The panel: Play, the deck, Upload ────────────────────── */
.title-panel { position: relative; flex: none; box-sizing: border-box; width: 100%; max-width: 420px; margin-top: auto; padding: 16px 14px 14px 50px; pointer-events: auto;
  background: linear-gradient(90deg, transparent 36px, rgba(215, 38, 30, .55) 36px 38px, transparent 38px), var(--paper);
  border: 2.5px solid var(--ink); border-radius: 8px; box-shadow: 0 6px 0 var(--ink), 0 18px 40px rgba(22, 18, 14, .35);
  transition: transform .45s cubic-bezier(.6, 0, .9, .4); }
.title-panel .slip { margin: 0; font: 800 10.5px/1 var(--ui); letter-spacing: .18em; text-transform: uppercase; color: var(--red-ink); }
.title-panel .play { position: relative; overflow: hidden; display: flex; align-items: center; gap: 8px; width: 100%; height: 54px; margin-top: 8px; padding: 0 14px;
  background: var(--paper); border: 2.5px solid var(--ink); border-radius: 12px; box-shadow: 0 3px 0 var(--ink); font: 800 17px/1 var(--ui); text-align: left; }
/* While loading, Play fills like the wooden ruler (its ticks along the bottom). */
.title-panel .play .fill { position: absolute; inset: 0 auto 0 0; width: calc(var(--f, 0) * 100%); transition: width .3s ease;
  background: repeating-linear-gradient(90deg, transparent 0 9px, rgba(22, 18, 14, .4) 9px 10.5px) bottom / 100% 8px no-repeat, linear-gradient(180deg, var(--wood-a), var(--wood-b)); }
.title-panel .play .label { position: relative; display: inline-flex; align-items: center; gap: 8px; min-width: 0; white-space: nowrap; }
.title-panel .play .glyph { display: inline-flex; }
.title-panel .play svg { width: 22px; height: 22px; }
.title-panel .play .progress { position: relative; margin-left: auto; font: 800 13px/1 var(--ui); font-variant-numeric: tabular-nums; }
.title-panel .play:disabled { cursor: progress; }
.title-panel .play.is-ready { background: var(--pencil); font-size: 18px; }
.title-panel .play.is-ready .fill { opacity: 0; }
.title-panel .play.is-ready:disabled { cursor: not-allowed; opacity: .55; }
.title-panel .deck { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.title-panel .deck p { margin: 0; min-width: 0; font: 700 13.5px/1.3 var(--ui); color: rgba(22, 18, 14, .68); overflow-wrap: anywhere; }
.title-panel .deck b { font-weight: 800; color: var(--ink); }
.title-panel .deck span { white-space: nowrap; }
.title-panel .change { flex: none; display: inline-flex; align-items: center; gap: 1px; min-height: 44px; padding: 0 2px 0 10px; background: none; border: 0;
  font: 700 22px/1 var(--hand); color: var(--uniform-blue); }
.title-panel .change svg { width: 18px; height: 18px; }
.title-panel .change.is-urgent { color: var(--red-ink); text-decoration: underline; text-underline-offset: 4px; }
.title-panel .student-name { display: flex; align-items: center; gap: 8px; margin: 2px 0 10px; font: 800 12px/1.2 var(--ui); color: var(--uniform-blue); }
.title-panel .student-name input { box-sizing: border-box; min-width: 0; flex: 1; height: 38px; padding: 4px 9px; border: 2px solid var(--ink); border-radius: 8px; background: #fffdf6; color: var(--ink); font: 700 15px/1 var(--ui); }
.title-panel .student-name input:focus-visible { outline: 3px solid var(--uniform-blue); outline-offset: 2px; }
.title-panel .note { margin: 0 0 8px; font: 700 13.5px/1.35 var(--ui); color: rgba(22, 18, 14, .8); }
.title-panel .note.is-urgent { color: var(--red-ink); font-weight: 800; }
.title-panel .upload { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 56px; padding: 6px 12px; text-align: left;
  background: #fffdf6; border: 2.5px solid var(--ink); border-radius: 12px; box-shadow: 0 3px 0 var(--ink); }
.title-panel .upload svg { flex: none; width: 30px; height: 30px; }
.title-panel .upload b { display: block; font: 800 17px/1.1 var(--ui); }
.title-panel .upload small { display: block; margin-top: 2px; font: 700 12.5px/1.2 var(--ui); color: rgba(22, 18, 14, .62); }
.title-panel .upload-limit { display: block; margin: 4px 0 0 42px; font: 800 11px/1.2 var(--ui); color: rgba(22, 18, 14, .6); }
.title-panel .play:not(:disabled):active, .title-panel .upload:active { translate: 0 2px; box-shadow: 0 1px 0 var(--ink); }

/* Play: the letter, the panel and the logo leave; the run's HUD takes over. */
.title.is-out .title-panel { transform: translateY(calc(100% + 40px)); }
.title.is-out .title-logo { opacity: 0; transform: translateY(-24px); }
.title.is-out .title-query { opacity: 0; transform: translateY(-36px) rotate(-6deg); }

/* Landscape phones and desktop: the same column on the left; the street and Kemi stay right of it. */
@media (min-aspect-ratio: 1/1) {
  .title { padding-left: max(24px, 4vw); padding-right: max(24px, 3vw); }
  .title-query, .title-panel { width: min(420px, 46vw); }
}
/* Shorter portrait phones: the letter tightens so it stays above her head. */
@media (max-aspect-ratio: 1/1) and (max-height: 740px) {
  .title-logo .logo { font-size: 42px; }
  .title-query { margin-top: calc(clamp(15px, 3.9vw, 26px) * 1.6 + 2px); padding: 12px 14px 7px; }
  .title-query .pin { display: none; }                  /* the room it needs is her head's */
  .title-query .charge { margin-top: 5px; font-size: 18px; }
  .title-query .answer { margin-top: 3px; }
  .title-query .reply { font-size: 23px; }
  .title-query .stamp { padding: 4px 8px 2px; font-size: 14px; }
  .title-query .terms { margin-top: 6px; font-size: 12.5px; }
  .title-query .sign { display: none; }
}
/* Short screens (landscape phones): everything tightens. */
@media (max-height: 520px) {
  .title { padding-top: calc(var(--safe-t) + 10px); padding-bottom: calc(var(--safe-b) + 10px); }
  .title-logo .logo { font-size: 38px; -webkit-text-stroke-width: 5px; }
  .title-logo .stamp { font-size: 13px; }
  .title-query { margin-top: 28px; padding: 16px 12px 7px; }
  .title-query .from, .title-query .sign { display: none; }
  .title-query .charge { margin-top: 0; font-size: 17px; }
  .title-query .answer { margin-top: 2px; }
  .title-query .reply { font-size: 22px; }
  .title-query .stamp { padding: 4px 8px 2px; font-size: 13px; }
  .title-query .terms { margin-top: 5px; font-size: 12.5px; }
  .title-panel { padding: 16px 12px 10px 46px; }
  .title-panel .upload small { display: none; }
  .title-panel .play { height: 46px; margin-top: 6px; }
  .title-panel .change { min-height: 38px; }
  .title-panel .upload { min-height: 46px; }
}
/* Landscape phones: the column is too short for both, so the letter goes up into the sky over her head,
   between the logo and the sound button; the panel keeps the left column. */
@media (min-aspect-ratio: 1/1) and (max-height: 520px) {
  .title-query { position: absolute; top: calc(var(--safe-t) + 14px); right: calc(max(24px, 3vw) + 58px); width: min(400px, 46vw); margin: 0; }
}

/* ── The picker sheet ─────────────────────────────────────── */
.title-sheet { position: fixed; inset: 0; z-index: 10; display: flex; align-items: flex-end; justify-content: center; pointer-events: auto; }
.title-sheet[hidden] { display: none; }
.title-sheet .backdrop { position: absolute; inset: 0; background: rgba(22, 18, 14, .5); }
.title-sheet .paper { position: relative; box-sizing: border-box; width: min(100%, 480px); max-height: min(88dvh, 680px); overflow: auto; overscroll-behavior: contain;
  padding: 18px 16px calc(var(--safe-b) + 16px); background: var(--paper); border: 2.5px solid var(--ink); border-bottom: 0; border-radius: 16px 16px 0 0;
  box-shadow: 0 -4px 0 rgba(22, 18, 14, .2); animation: sheet-in .38s var(--spring); }
@media (min-aspect-ratio: 1/1) and (min-height: 521px) {
  .title-sheet { align-items: center; }
  .title-sheet .paper { border-bottom: 2.5px solid var(--ink); border-radius: 16px; box-shadow: 0 6px 0 var(--ink), 0 20px 44px rgba(22, 18, 14, .38); }
}
@keyframes sheet-in { from { transform: translateY(40px); opacity: 0; } }
.title-sheet h2 { margin: 0 0 12px; font: 800 24px/1 var(--display); }
.title-sheet .subjects { display: grid; gap: 6px; }
.title-sheet .subject { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 48px; padding: 6px 12px; text-align: left;
  background: #fffdf6; border: 2px solid rgba(22, 18, 14, .28); border-radius: 10px; font: 800 17px/1.15 var(--ui); }
.title-sheet .subject b { min-width: 0; overflow-wrap: anywhere; }
.title-sheet .subject small { flex: none; max-width: 55%; font: 700 13px/1.25 var(--ui); color: rgba(22, 18, 14, .62); text-align: right; }
.title-sheet .subject[aria-checked="true"] { border: 2.5px solid var(--ink); box-shadow: 0 0 0 3px var(--pencil); background: #fff3c4; }
.title-sheet .subject.is-off { opacity: .6; cursor: not-allowed; }
.title-sheet .subject.is-off small { color: var(--red-ink); }
.title-sheet .levels { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 14px; }
.title-sheet .levels[hidden] { display: none; }
.title-sheet .chip { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-height: 60px; padding: 6px 4px;
  background: #fffdf6; border: 2.5px solid var(--ink); border-radius: 12px; }
.title-sheet .chip b { font: 800 17px/1 var(--display); }
.title-sheet .chip small { font: 700 13px/1 var(--ui); color: rgba(22, 18, 14, .7); }
.title-sheet .chip[aria-checked="true"] { background: #fff3c4; box-shadow: 0 0 0 3px var(--pencil); }
.title-sheet .chip .mark { position: absolute; top: 4px; right: 5px; display: inline-flex; color: var(--red-ink); }
.title-sheet .chip .mark svg { width: 17px; height: 17px; }
.title-sheet .chip.is-locked { cursor: not-allowed; background: #efe6cf; color: rgba(22, 18, 14, .55); }
.title-sheet .chip.is-locked .mark { color: var(--ink); }
.title-sheet .sheet-label { margin: 14px 0 0; font: 800 10.5px/1 var(--ui); letter-spacing: .18em; text-transform: uppercase; color: var(--red-ink); }
.title-sheet .lengths { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 8px; }
.title-sheet .lengths .chip { min-height: 48px; }
.title-sheet .meta { margin: 12px 0 0; font: 700 13.5px/1.35 var(--ui); color: rgba(22, 18, 14, .66); }
.title-sheet .done { width: 100%; height: 52px; margin-top: 12px; background: var(--pencil); border: 2.5px solid var(--ink); border-radius: 12px; box-shadow: 0 3px 0 var(--ink);
  font: 800 18px/1 var(--ui); }
.title-sheet .done:active { translate: 0 2px; box-shadow: 0 1px 0 var(--ink); }

@media (prefers-reduced-motion: reduce) {
  .title-still, .title-logo, .title-query, .title-panel, .title-panel .play .fill, #hud { transition: none; }
  .title-query, .title-query .stamp, .title-query .reply, .title-sheet .paper { animation: none; }
}