/* ==========================================================================
   danielentrenas.com — shell: HUD, stage, narrator, title cards, toasts
   ========================================================================== */

:root {
  --ink: #0d0b14;
  --ink-2: #17131f;
  --paper: #fffaf0;
  --accent: #ff5b3a;
  --gold: #ffcf3f;
  --violet: #7b5cff;
  --cyan: #22d3ee;
  --lime: #b6f23c;

  --f-display: "Bricolage Grotesque", system-ui, sans-serif;
  --f-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-pixel: "Press Start 2P", ui-monospace, monospace;
  --f-term: "VT323", ui-monospace, monospace;

  --hud-h: 58px;
  /* where scenes are drawn (desktop: right of the narrator column) */
  --box-l: 38vw;
  --box-r: 3vw;
  --box-t: calc(var(--hud-h) + 28px);
  --box-b: 36px;
  /* iris transition origin (set from the avatar position in JS) */
  --ox: 14%;
  --oy: 82%;
}

@media (max-width: 860px) {
  :root {
    --hud-h: 52px;
    --box-l: 16px;
    --box-r: 16px;
    --box-t: calc(var(--hud-h) + 14px);
    --box-b: calc(204px + env(safe-area-inset-bottom));
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; overscroll-behavior-y: none; }
body {
  margin: 0;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--f-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  transition: background-color .6s ease;
}
button { font: inherit; color: inherit; }

.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: fixed; left: 16px; top: -64px; z-index: 100;
  background: var(--accent); color: #fff;
  padding: 10px 14px; border-radius: 10px;
  font-weight: 700; text-decoration: none;
}
.skip-link:focus { top: 12px; }

:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }

/* ───────────────────────── HUD ───────────────────────── */

.hud {
  position: fixed; inset: 0 0 auto; z-index: 20;
  height: var(--hud-h);
  display: flex; align-items: center; gap: 12px;
  padding: 0 max(18px, env(safe-area-inset-right)) 0 max(18px, env(safe-area-inset-left));
  background: rgba(13, 11, 20, .74);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
  color: #fff;
}

.hud-brand {
  display: flex; align-items: center; gap: 10px;
  color: inherit; text-decoration: none;
  font: 700 15px/1 var(--f-body); letter-spacing: -.01em;
}
.hud-logo {
  width: 32px; height: 32px; border-radius: 9px;
  display: grid; place-items: center;
  background: var(--accent); color: #fff;
  font: 800 14px/1 var(--f-display);
  box-shadow: 2px 2px 0 #fff;
}

.hud-level {
  position: absolute; left: 50%; transform: translateX(-50%);
  display: flex; align-items: center; gap: 10px;
  white-space: nowrap;
}
.hud-lvl {
  font: 9px/1 var(--f-pixel);
  background: #fff; color: var(--ink);
  padding: 6px 8px; border-radius: 6px;
}
.hud-title { font: 600 13px/1 var(--f-body); color: #ffffffcc; }

/* Timeline: the year being told and Daniel's age at the time. Desktop: an arcade
   score panel above the narrator; mobile: two small odometers inside the HUD. */
.timebox {
  position: absolute; top: calc(100% + 34px); left: max(4vw, 24px);
  display: flex; padding: 12px 4px;
  background: rgba(13, 11, 20, .82); color: #fff;
  border: 2px solid rgba(255, 255, 255, .16); border-radius: 16px;
  box-shadow: 6px 6px 0 rgba(0, 0, 0, .35);
}
.tm-cell { display: grid; gap: 10px; padding: 0 14px; }
.tm-cell + .tm-cell { border-left: 1px dashed rgba(255, 255, 255, .22); }
.tm-cell small { font: 8px/1 var(--f-pixel); color: var(--gold); letter-spacing: .08em; }
.tm-age .odo { color: var(--lime); }
.odo { display: flex; font: 28px/1 var(--f-pixel); transition: text-shadow .3s; }
.odo-d { display: block; width: 1em; height: 1em; overflow: hidden; }
.odo-d > span { display: block; transform: translateY(calc(var(--n, 0) * -1em)); transition: transform .55s cubic-bezier(.3, 1.25, .5, 1); }
.odo-d i { display: block; height: 1em; font-style: normal; text-align: center; }
.tm-warp {
  position: absolute; left: 16px; top: calc(100% + 10px);
  font: 8px/1 var(--f-pixel); color: var(--cyan); white-space: nowrap;
  opacity: 0; pointer-events: none;
}
.timebox.warping .tm-warp { animation: warp 1.1s steps(1) both; }
.timebox.warping .odo { text-shadow: -3px 0 #ff2a6d, 3px 0 #22d3ee; }
@keyframes warp { 0%, 30%, 60% { opacity: 1; } 15%, 45%, 100% { opacity: 0; } }

@media (max-height: 700px) and (min-width: 861px) {
  .timebox { top: calc(100% + 26px); padding: 9px 2px; }
  .tm-cell { gap: 7px; padding: 0 11px; }
  .odo { font-size: 20px; }
}

.hud-actions { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.hud-btn {
  height: 34px; min-width: 34px; padding: 0 10px;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, .16);
  background: rgba(255, 255, 255, .06);
  font: 700 13px/1 var(--f-body);
  cursor: pointer;
  transition: background .2s, transform .2s;
}
.hud-btn:hover { background: rgba(255, 255, 255, .14); }
.hud-btn svg { width: 17px; height: 17px; flex: none; }
.hud-of { opacity: .5; font-weight: 600; }
.hud-trophies svg { color: var(--gold); }
.hud-trophies.bump { animation: bump .5s cubic-bezier(.3, 1.8, .5, 1); }
.hud-sfx .s-on { display: none; }
.hud-sfx[aria-pressed="true"] .s-on { display: inline; }
.hud-sfx[aria-pressed="true"] .s-off { display: none; }
.hud-sfx[aria-pressed="true"] { background: rgba(182, 242, 60, .18); border-color: rgba(182, 242, 60, .5); }

.hud-cta {
  height: 34px; padding: 0 14px;
  display: inline-flex; align-items: center;
  border-radius: 10px;
  background: var(--accent); color: #fff;
  font: 700 13px/1 var(--f-body); text-decoration: none;
  transition: transform .2s, box-shadow .2s;
}
.hud-cta:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(255, 91, 58, .45); }
.hud-cta .short { display: none; }

/* XP bar = overall progress, with one tick per level */
.xp { position: absolute; left: 0; right: 0; bottom: -2px; height: 4px; background: rgba(255, 255, 255, .1); }
.xp-fill {
  position: absolute; inset: 0 auto 0 0;
  width: calc(var(--gp, 0) * 100%);
  background: linear-gradient(90deg, var(--accent), var(--gold));
}
.xp-ticks { list-style: none; margin: 0; padding: 0; position: absolute; inset: 0; }
.xp-ticks li { position: absolute; top: -8px; left: calc(var(--at, 0) * 100%); transform: translateX(-50%); }
.xp-ticks button {
  position: relative; width: 20px; height: 20px; padding: 0;
  border: 0; background: none; cursor: pointer;
  display: grid; place-items: center;
}
.xp-ticks button::before {
  content: ""; width: 7px; height: 7px;
  background: rgba(255, 255, 255, .45);
  transform: rotate(45deg);
  transition: background .2s, width .2s, height .2s;
}
.xp-ticks .done button::before { background: var(--gold); }
.xp-ticks .cur button::before { background: #fff; width: 10px; height: 10px; box-shadow: 0 0 10px #fff; }
.xp-ticks button::after {
  content: attr(data-tip);
  position: absolute; top: 24px; left: 50%; transform: translateX(-50%);
  white-space: nowrap;
  font: 600 12px/1 var(--f-body); color: #fff;
  background: var(--ink); border: 1px solid rgba(255, 255, 255, .2);
  padding: 7px 9px; border-radius: 8px;
  opacity: 0; pointer-events: none; transition: opacity .15s;
}
.xp-ticks button:hover::after, .xp-ticks button:focus-visible::after { opacity: 1; }
.xp-ticks li:first-child button::after { left: 0; transform: none; }
.xp-ticks li:last-child button::after { left: auto; right: 0; transform: none; }
/* year ruler under the bar */
.xp-ticks li[data-y]::after {
  content: attr(data-y);
  position: absolute; top: 21px; left: 50%; transform: translateX(-50%);
  font: 7px/1 var(--f-pixel); color: rgba(255, 255, 255, .4);
  pointer-events: none; transition: color .3s;
}
.xp-ticks li.done[data-y]::after { color: rgba(255, 207, 63, .7); }
.xp-ticks li.cur[data-y]::after { color: #fff; }
@media (max-width: 1000px) { .xp-ticks li[data-y]::after { display: none; } }

/* Achievements panel */
.trophy-panel {
  position: fixed; z-index: 22;
  top: calc(var(--hud-h) + 12px); right: 16px;
  width: min(340px, calc(100vw - 32px));
  max-height: min(70vh, 560px); overflow: auto;
  background: #15121f; color: #fff;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 18px; padding: 16px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .55);
}
.trophy-head { display: flex; justify-content: space-between; align-items: center; margin: 0 0 10px; }
.trophy-head b { font: 800 18px/1 var(--f-display); }
.trophy-head span { font: 9px/1 var(--f-pixel); color: var(--gold); }
.trophy-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.trophy-list li {
  display: grid; grid-template-columns: 36px 1fr; gap: 10px; align-items: center;
  padding: 8px; border-radius: 12px; background: rgba(255, 255, 255, .04);
}
.trophy-list li > span {
  width: 36px; height: 36px; border-radius: 50%;
  display: grid; place-items: center; font-size: 17px;
  background: rgba(255, 255, 255, .06);
}
.trophy-list li.got > span { background: radial-gradient(circle at 35% 30%, #ffe58a, #f5a623); }
.trophy-list b { display: block; font: 700 14px/1.2 var(--f-body); }
.trophy-list small { display: block; font: 12px/1.3 var(--f-body); opacity: .65; }
.trophy-list li:not(.got) b { opacity: .5; }

/* ───────────────────────── STAGE ───────────────────────── */

.stage { position: fixed; inset: 0; z-index: 1; overflow: hidden; background: var(--ink); }
.box-probe { visibility: hidden; pointer-events: none; }
.vh-probe { position: absolute; top: 0; left: 0; width: 1px; height: 100vh; height: 100svh; visibility: hidden; pointer-events: none; }

.scene { position: absolute; inset: 0; overflow: hidden; visibility: hidden; pointer-events: none; }
.scene.is-active, .scene.is-prev { visibility: visible; }
.scene.is-active { z-index: 2; pointer-events: auto; }
.scene.is-prev { z-index: 1; }
.scene.is-entering { animation: iris .9s cubic-bezier(.65, 0, .25, 1) both; }

@keyframes iris {
  from { clip-path: circle(0 at var(--ox) var(--oy)); }
  to   { clip-path: circle(170vmax at var(--ox) var(--oy)); }
}

.scene-bg { position: absolute; inset: 0; overflow: hidden; }
.scene-box { position: absolute; left: var(--box-l); right: var(--box-r); top: var(--box-t); bottom: var(--box-b); }

/* Every scene is drawn on a 560×480 canvas and scaled to fit its box */
.canvas {
  position: absolute; left: 50%; top: 50%;
  width: 560px; height: 480px;
  transform: translate(-50%, -50%) scale(var(--fit, 1));
}

/* ───────────────────────── TITLE CARD ───────────────────────── */

.titlecard {
  position: fixed; z-index: 4;
  left: var(--box-l); right: var(--box-r); top: var(--box-t); bottom: var(--box-b);
  display: grid; place-items: center;
  pointer-events: none; visibility: hidden;
}
.titlecard.show { visibility: visible; }
.tc-inner {
  max-width: min(600px, 100%);
  background: var(--ink); color: #fff;
  border: 3px solid #fff; border-radius: 24px;
  padding: 26px 32px 24px;
  box-shadow: 10px 10px 0 var(--accent);
  transform: rotate(-2deg) scale(calc(.94 + var(--tcp, 0) * .1));
}
.tc-level { margin: 0 0 14px; font: 12px/1 var(--f-pixel); color: var(--gold); letter-spacing: .06em; }
.tc-title { margin: 0; font: 800 clamp(38px, 5.4vw, 76px)/.95 var(--f-display); letter-spacing: -.025em; }
.tc-meta { display: flex; align-items: center; gap: 12px; margin: 18px 0 0; font: 600 14px/1 var(--f-body); color: rgba(255, 255, 255, .65); }
.tc-meta b { font: 9px/1 var(--f-pixel); color: #fff; background: var(--accent); padding: 7px 9px; border-radius: 6px; }
.titlecard.show .tc-inner { animation: tcIn .55s cubic-bezier(.2, 1.4, .4, 1) both; }
@keyframes tcIn { from { opacity: 0; transform: rotate(-6deg) scale(.7); } }

/* ───────────────────────── NARRATOR ───────────────────────── */

.narrator {
  position: fixed; z-index: 5;
  left: max(4vw, 24px); bottom: max(4vh, 24px);
  width: min(420px, 33vw);
  display: flex; flex-direction: column; align-items: flex-start; gap: 22px;
  pointer-events: none;
}

.bubble {
  position: relative; width: 100%;
  background: #fff; color: var(--ink);
  border: 3px solid var(--ink); border-radius: 20px;
  padding: 20px 22px 22px;
  box-shadow: 6px 6px 0 var(--ink);
  font: 500 clamp(16px, 1.22vw, 19px)/1.5 var(--f-body);
  transform-origin: 18% 100%;
  transition: opacity .25s ease, transform .35s cubic-bezier(.2, 1.4, .4, 1);
}
.bubble.hidden { opacity: 0; transform: scale(.86) translateY(10px); }
.bubble.pop { animation: bubblePop .35s cubic-bezier(.2, 1.5, .4, 1); }
@keyframes bubblePop { from { transform: scale(.96); } }
.bubble::before {
  content: ""; position: absolute;
  left: 52px; bottom: -14px;
  width: 22px; height: 22px;
  background: #fff;
  border-right: 3px solid var(--ink); border-bottom: 3px solid var(--ink);
  transform: rotate(45deg);
}
.bubble-name {
  position: absolute; top: -14px; left: 18px;
  font: 9px/1 var(--f-pixel); color: #fff;
  background: var(--accent);
  border: 2px solid var(--ink); border-radius: 8px;
  padding: 6px 9px;
}
.bubble-text { margin: 0; min-height: 3em; }
.bubble-text .w { display: inline-block; opacity: 0; animation: wordIn .32s cubic-bezier(.2, .8, .2, 1) forwards; animation-delay: calc(var(--i) * 22ms); }
@keyframes wordIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.bubble-next {
  position: absolute; right: 14px; bottom: 6px;
  font-size: 11px; color: var(--accent);
  animation: nudge 1s ease-in-out infinite;
}
@keyframes nudge { 50% { transform: translateY(3px); } }

/* Avatar */
.avatar {
  position: relative; flex: none;
  width: clamp(160px, 14vw, 230px); aspect-ratio: 200 / 220;
  padding: 0; border: 0; background: none;
  cursor: pointer; pointer-events: auto;
  -webkit-tap-highlight-color: transparent;
}
.avatar-halo {
  position: absolute; left: 50%; bottom: 0;
  width: 92%; aspect-ratio: 1;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(circle at 50% 35%, #ffd8a8 0%, var(--accent) 70%);
  border: 4px solid #fff;
  box-shadow: 6px 6px 0 var(--ink);
}
.av, .av-img {
  position: absolute; left: 0; bottom: 0; width: 100%; height: 100%;
  transform-origin: 50% 100%;
  animation: bob 3.4s ease-in-out infinite;
}
.av-img { display: none; object-fit: contain; object-position: bottom; }
.avatar.png-mode .av { display: none; }
.avatar.png-mode .av-img { display: block; }
.avatar.png-mode.is-talking .av-img { animation: talkBob .28s ease-in-out infinite alternate; }
.avatar.pop .av, .avatar.pop .av-img { animation: avPop .4s cubic-bezier(.2, 1.6, .4, 1); }
@keyframes bob { 50% { transform: translateY(-3px) scale(1.01); } }
@keyframes talkBob { to { transform: translateY(-4px) rotate(-1deg); } }
@keyframes avPop { from { transform: scale(.9) translateY(6px); } }

.avatar:hover .av { transform: rotate(-3deg); }
.avatar:active .av { transform: scale(.95); }

/* 3D avatar (js/avatar3d.js). The head may pop out above the halo; the shoulders
   are cut by the circle, like a contact photo. */
.av3d {
  position: absolute; left: 0; bottom: 0; width: 100%; height: 100%;
  display: none;
  transform-origin: 50% 100%;
  -webkit-mask:
    radial-gradient(closest-side, #000 calc(100% - 5px), transparent calc(100% - 4px)) 50% 100% / 92% 83.64% no-repeat,
    linear-gradient(#000, #000) 0 0 / 100% 58.2% no-repeat;
  mask:
    radial-gradient(closest-side, #000 calc(100% - 5px), transparent calc(100% - 4px)) 50% 100% / 92% 83.64% no-repeat,
    linear-gradient(#000, #000) 0 0 / 100% 58.2% no-repeat;
}
.avatar.is-3d .av3d { display: block; }
.avatar.is-3d .av, .avatar.is-3d .av-img { display: none; }
.avatar.pop .av3d { animation: avPop .4s cubic-bezier(.2, 1.6, .4, 1); }
.avatar:active .av3d { transform: scale(.96); }

/* SVG placeholder avatar: parts */
.av-skin { fill: #f2c29b; }
.av-hair { fill: #3b2a20; }
.av-shirt { fill: #1f2a44; }
.av-neck { fill: #e0a983; }
.av-collar { fill: none; stroke: var(--accent); stroke-width: 5; stroke-linecap: round; }
.av-brow { fill: none; stroke: #3b2a20; stroke-width: 5; stroke-linecap: round; transform-box: fill-box; transform-origin: center; transition: transform .3s; }
.av-eye ellipse, .av-eyes-wink ellipse { fill: #2a1d16; }
.av-glint { fill: #fff; }
.av-eyes-happy path, .av-eyes-wink path { fill: none; stroke: #2a1d16; stroke-width: 4.5; stroke-linecap: round; }
.av-cheeks ellipse { fill: #f08a7a; opacity: .35; }
.av-nose { fill: none; stroke: #d29470; stroke-width: 3; stroke-linecap: round; }
.av-m-smile, .av-m-flat, .av-m-sad { fill: none; stroke: #7a2e2a; stroke-width: 4.5; stroke-linecap: round; }
.av-m-grin, .av-m-talk, .av-m-o { fill: #7a2e2a; }
.av-shades rect { fill: #111; }
.av-shades path { fill: none; stroke: #111; stroke-width: 4; stroke-linecap: round; }

.av-head { transform-box: view-box; transform-origin: 100px 150px; transition: transform .4s cubic-bezier(.3, 1.4, .5, 1); }
.av-eye { transform-box: fill-box; transform-origin: center; transition: transform .3s; }
.av-eyes-open { transform-box: fill-box; transform-origin: center; animation: blink 5s infinite; }
@keyframes blink { 0%, 94%, 100% { transform: scaleY(1); } 96% { transform: scaleY(.1); } }

.av-eyes-happy, .av-eyes-wink, .av-shades, .av-m, .av-wave { display: none; }
.av-m-smile { display: inline; }

.av-wave {
  position: absolute; right: -8%; top: 30%;
  font-size: clamp(30px, 2.6vw, 42px);
  transform-origin: 70% 80%;
  animation: wave 1.1s ease-in-out infinite;
}
@keyframes wave { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-22deg); } 75% { transform: rotate(14deg); } }

/* poses */
.avatar[data-pose="hello"] .av-wave { display: block; }
.avatar[data-pose="hello"] .av-m-smile,
.avatar[data-pose="happy"] .av-m-smile,
.avatar[data-pose="wink"] .av-m-smile { display: none; }
.avatar[data-pose="hello"] .av-m-grin,
.avatar[data-pose="happy"] .av-m-grin,
.avatar[data-pose="wink"] .av-m-grin { display: inline; }
.avatar[data-pose="hello"] .av-brow { transform: translateY(-3px); }

.avatar[data-pose="happy"] .av-eyes-open,
.avatar[data-pose="proud"] .av-eyes-open,
.avatar[data-pose="wink"] .av-eyes-open,
.avatar[data-pose="cool"] .av-eyes-open { display: none; }
.avatar[data-pose="happy"] .av-eyes-happy,
.avatar[data-pose="proud"] .av-eyes-happy { display: inline; }
.avatar[data-pose="wink"] .av-eyes-wink { display: inline; }
.avatar[data-pose="happy"] .av-cheeks ellipse { opacity: .6; }
.avatar[data-pose="happy"] .av-head { transform: rotate(3deg); }

.avatar[data-pose="think"] .av-m-smile { display: none; }
.avatar[data-pose="think"] .av-m-flat { display: inline; }
.avatar[data-pose="think"] .av-eye { transform: translate(-3px, -4px); }
.avatar[data-pose="think"] .av-brow-r { transform: translateY(-6px) rotate(-6deg); }
.avatar[data-pose="think"] .av-head { transform: rotate(-5deg); }

.avatar[data-pose="surprised"] .av-m-smile { display: none; }
.avatar[data-pose="surprised"] .av-m-o { display: inline; }
.avatar[data-pose="surprised"] .av-eye { transform: scale(1.2); }
.avatar[data-pose="surprised"] .av-brow { transform: translateY(-7px); }
.avatar[data-pose="surprised"] .av-head { transform: translateY(-3px); }

.avatar[data-pose="proud"] .av-head { transform: rotate(-3deg) translateY(-3px); }
.avatar[data-pose="proud"] .av-brow { transform: translateY(-2px); }

.avatar[data-pose="sad"] .av-m-smile { display: none; }
.avatar[data-pose="sad"] .av-m-sad { display: inline; }
.avatar[data-pose="sad"] .av-brow-l { transform: rotate(-14deg) translateY(-2px); }
.avatar[data-pose="sad"] .av-brow-r { transform: rotate(14deg) translateY(-2px); }
.avatar[data-pose="sad"] .av-head { transform: rotate(-4deg) translateY(4px); }

.avatar[data-pose="cool"] .av-shades { display: inline; }
.avatar[data-pose="cool"] .av-head { transform: rotate(-4deg); }

/* talking: mouth flaps while the words appear */
.avatar.is-talking .av-m { display: none !important; }
.avatar.is-talking .av-m-talk {
  display: inline !important;
  transform-box: fill-box; transform-origin: 50% 0;
  animation: talk .22s ease-in-out infinite alternate;
}
@keyframes talk { from { transform: scaleY(.25); } to { transform: scaleY(1); } }

/* ───────────────────────── TOASTS ───────────────────────── */

.toasts {
  position: fixed; z-index: 21;
  top: calc(var(--hud-h) + 16px); right: 16px;
  display: flex; flex-direction: column; align-items: flex-end; gap: 10px;
  pointer-events: none;
}
.toast {
  display: flex; align-items: center; gap: 12px;
  max-width: min(360px, calc(100vw - 32px));
  background: #15121f; color: #fff;
  border: 2px solid rgba(255, 207, 63, .5); border-radius: 999px;
  padding: 7px 20px 7px 7px;
  box-shadow: 0 14px 36px rgba(0, 0, 0, .45);
  animation: toastIn .55s cubic-bezier(.2, 1.3, .4, 1) both;
}
.toast.out { animation: toastOut .4s ease both; }
.toast-ico {
  flex: none; width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center; font-size: 21px;
  background: radial-gradient(circle at 35% 30%, #ffe58a, #f5a623);
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .2);
}
.toast small { display: block; margin-bottom: 5px; font: 8px/1.2 var(--f-pixel); color: var(--gold); letter-spacing: .04em; text-transform: uppercase; }
.toast b { display: block; font: 700 15px/1.2 var(--f-body); }
.toast .d { display: block; margin-top: 2px; font: 12px/1.3 var(--f-body); opacity: .7; }
@keyframes toastIn { from { opacity: 0; transform: translateX(40px) scale(.9); } }
@keyframes toastOut { to { opacity: 0; transform: translateX(40px); } }

/* confetti */
.confetti { position: fixed; inset: 0; z-index: 30; overflow: hidden; pointer-events: none; }
.confetti i {
  position: absolute; left: var(--x); top: -20px;
  width: var(--w); height: calc(var(--w) * .5);
  background: var(--c); border-radius: 2px;
  animation: fall var(--d) cubic-bezier(.25, .6, .45, 1) var(--delay) forwards;
}
@keyframes fall { to { transform: translate(var(--sx), 112vh) rotate(var(--r)); } }

/* ───────────────────────── TRACK ───────────────────────── */

.track { position: relative; z-index: 0; pointer-events: none; }
.chapter { position: relative; }
.track-end { height: 100vh; height: 100svh; }

/* ───────────────────────── MOBILE ───────────────────────── */

@media (max-width: 860px) {
  .hud { gap: 8px; padding-left: 12px; padding-right: 12px; }
  .hud-name, .hud-title { display: none; }
  .hud-level { position: static; transform: none; gap: 7px; }
  .hud-lvl { font-size: 8px; }
  .hud-actions { order: 3; }
  .timebox {
    position: static; order: 2;
    padding: 0; background: none; border: 0; border-radius: 0; box-shadow: none;
  }
  .tm-cell { gap: 5px; padding: 0 8px; }
  .tm-cell small { font-size: 6px; }
  .odo { font-size: 11px; }
  .tm-warp { display: none; }
  .hud-btn { height: 32px; min-width: 32px; padding: 0 8px; font-size: 12px; }
  .hud-cta { height: 32px; padding: 0 12px; }
  .hud-cta .long { display: none; }
  .hud-cta .short { display: inline; }

  .narrator {
    left: 12px; right: 12px;
    bottom: calc(14px + env(safe-area-inset-bottom));
    width: auto;
    flex-direction: row-reverse; align-items: flex-end; gap: 12px;
  }
  .avatar { width: 84px; }
  .avatar-halo { border-width: 3px; box-shadow: 3px 3px 0 var(--ink); }
  .av-wave { font-size: 22px; right: -18%; top: 18%; }
  .bubble {
    flex: 1; min-width: 0;
    padding: 15px 15px 17px;
    border-radius: 16px;
    box-shadow: 4px 4px 0 var(--ink);
    font-size: 15px; line-height: 1.45;
    transform-origin: 0 100%;
  }
  .bubble::before {
    left: -13px; bottom: 22px;
    width: 18px; height: 18px;
    border-right: 0; border-bottom: 3px solid var(--ink); border-left: 3px solid var(--ink);
  }
  .bubble-name { top: -12px; left: 14px; font-size: 8px; padding: 5px 7px; }
  .bubble-text { min-height: 2.9em; }

  .tc-inner { padding: 18px 20px; border-radius: 18px; box-shadow: 6px 6px 0 var(--accent); }
  .tc-level { font-size: 10px; margin-bottom: 10px; }
  .tc-title { font-size: clamp(30px, 9.5vw, 46px); }
  .tc-meta { margin-top: 12px; font-size: 13px; }

  .toasts { left: 12px; right: 12px; align-items: center; top: calc(var(--hud-h) + 10px); }
  .toast { padding-right: 16px; }
  .toast-ico { width: 38px; height: 38px; font-size: 18px; }
  .toast b { font-size: 14px; }
}

@media (max-width: 380px) {
  .hud-lvl { display: none; }
}

/* ───────────────────────── REDUCED MOTION ───────────────────────── */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .scene.is-entering { animation: none; }
  .bubble-text .w { opacity: 1; animation: none; }
}