/* Microsoft Copilot kiosk — 98" portrait touch display.
   The stage is 1080 design-px wide and as tall as the display's real proportions (JS sets it), so the UI fills
   the panel edge to edge. Every screen splits into three horizontal bands:
     top   (18%)  read-only: logo + the Mad Libs sentence, seen from across the room
     reach (48%)  every touch target lives here, roughly waist to eye height on a 98" portrait panel
     low   (rest) read-only: progress, hints, logo on the attract loop. Nothing below 66% is tappable,
                  because the bottom third of a floor-standing 98" panel is at knee height.                                        */

@font-face { font-family: "Segoe Sans"; src: url("assets/fonts/SegoeSans.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: block; }
@font-face { font-family: "Segoe Sans"; src: url("assets/fonts/SegoeSans-Italic.woff2") format("woff2"); font-weight: 100 900; font-style: italic; font-display: block; }
@font-face { font-family: "Segoe Serif"; src: url("assets/fonts/SegoeSerif.ttf") format("truetype"); font-weight: 100 900; font-style: normal; font-display: block; }
@font-face { font-family: "Segoe Serif"; src: url("assets/fonts/SegoeSerif-Italic.ttf") format("truetype"); font-weight: 100 900; font-style: italic; font-display: block; }

:root {
  --base: #070B16;              /* round-1 deep navy, brought back at the client's request (rev 3) */
  --base-deep: #050811;
  --surface: rgba(255, 255, 255, 0.055);
  --surface-2: rgba(255, 255, 255, 0.10);
  --stroke: rgba(255, 255, 255, 0.12);
  --stroke-2: rgba(255, 255, 255, 0.22);
  --text: #FFFFFF;
  --text-2: rgba(255, 255, 255, 0.70);
  --text-3: rgba(255, 255, 255, 0.45);
  --ink: #242424;               /* text on Sky Gradient */

  /* Sky Gradient (sampled from the brand reference): white into soft sky blue */
  --sky-0: #FFFFFF; --sky-1: #EAF8FE; --sky-2: #BCEBFD; --sky-3: #7FD9FB; --sky-4: #4FC8F8;
  --sky: radial-gradient(120% 140% at 92% 0%, rgba(79, 200, 248, .55) 0%, rgba(79, 200, 248, 0) 55%),
         linear-gradient(100deg, var(--sky-0) 0%, var(--sky-1) 30%, var(--sky-2) 62%, var(--sky-3) 86%, var(--sky-4) 100%);
  --sky-glow: rgba(79, 200, 248, .35);

  /* Expressive gradient kept from round 1 (selections, "for work") */
  --grad-text: linear-gradient(90deg, #4CC2FF 0%, #A7E04A 52%, #FFB900 100%);

  --font: "Segoe Sans", "Segoe UI Variable", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --serif: "Segoe Serif", Georgia, "Times New Roman", serif;
  --mono: "Cascadia Code", Consolas, Menlo, monospace;
  --ease-out: cubic-bezier(0, 0, 0, 1);
  --ease-std: cubic-bezier(.33, 0, .67, 1);
  --gutter: 72px;
}

/* ---------- Base ---------- */
html, body {
  margin: 0; height: 100%; background: var(--base); overflow: hidden;
  font-family: var(--font); color: var(--text); font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased; user-select: none; -webkit-user-select: none;
  touch-action: none; overscroll-behavior: none;   /* nothing scrolls; a pan would cancel the press (see app.js) */
}
html.is-kiosk, html.is-kiosk * { cursor: none !important; }
button { font-family: inherit; color: inherit; }
button:focus { outline: none; }
img { display: block; }

#stage { position: absolute; left: 0; top: 0; width: 1080px; height: 1920px; transform-origin: 0 0; background: var(--base); overflow: hidden; }
.screen { position: absolute; inset: 0; display: none; z-index: 1; }
.screen.is-active { display: grid; animation: screen-in .45s var(--ease-out); }
@keyframes screen-in { from { opacity: 0; } to { opacity: 1; } }

/* ---------- Background: the round-1 aurora (client asked for it back in rev 3: "more gamified, less corporate") ---------- */
.aurora { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; background: var(--base); }
/* The radial gradients are already soft, so no blur filter: the kiosk's Intel N150 renders this at 4K. */
.aurora i {
  position: absolute; width: 1100px; height: 1100px; border-radius: 50%;
  opacity: .55; mix-blend-mode: screen; will-change: transform; animation: drift 22s var(--ease-std) infinite alternate;
}
/* Video screens: the player covers the aurora entirely; the attract loop keeps it as a still backdrop. */
#stage[data-screen="player"] .aurora { display: none; }
#stage[data-screen="attract"] .aurora i { animation-play-state: paused; }
.aurora i:nth-child(1) { left: -420px; top: -380px; background: radial-gradient(circle, rgba(0,120,212,.95) 0%, rgba(0,120,212,.35) 32%, transparent 68%); animation-duration: 26s; }
.aurora i:nth-child(2) { right: -480px; top: 240px; background: radial-gradient(circle, rgba(135,100,184,.95) 0%, rgba(135,100,184,.3) 32%, transparent 68%); animation-duration: 31s; animation-delay: -8s; }
.aurora i:nth-child(3) { left: -300px; bottom: -420px; background: radial-gradient(circle, rgba(227,0,140,.8) 0%, rgba(227,0,140,.25) 32%, transparent 68%); animation-duration: 29s; animation-delay: -15s; }
.aurora i:nth-child(4) { right: -360px; bottom: 120px; background: radial-gradient(circle, rgba(127,186,0,.7) 0%, rgba(127,186,0,.22) 32%, transparent 68%); animation-duration: 35s; animation-delay: -4s; }
.aurora i:nth-child(5) { left: 220px; top: 620px; width: 800px; height: 800px; background: radial-gradient(circle, rgba(255,185,0,.55) 0%, rgba(255,185,0,.15) 30%, transparent 66%); animation-duration: 24s; animation-delay: -12s; opacity: .4; }
.aurora::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(7,11,22,.25) 0%, rgba(7,11,22,0) 30%, rgba(7,11,22,.35) 100%); }
@keyframes drift {
  0%   { transform: translate(0, 0) scale(1); }
  50%  { transform: translate(140px, -90px) scale(1.12); }
  100% { transform: translate(-110px, 120px) scale(.95); }
}

/* ---------- Bands (top 18% read-only · reach 48% touch · low rest read-only) ---------- */
#screen-pick, #screen-creating { grid-template-rows: 18% 48% 1fr; padding: 0 var(--gutter); }
.band { min-height: 0; position: relative; }
.band--top { display: flex; flex-direction: column; justify-content: space-between; padding: 40px 0 22px; gap: 14px; }
.band--reach { display: flex; flex-direction: column; }
.band--low { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 22px; padding: 56px 0 24px; }
.band--center { align-items: center; justify-content: center; text-align: center; }

/* ---------- Logo ---------- */
.logo--horiz { height: 56px; width: auto; align-self: flex-start; flex: none; }
.band--center .logo--horiz { align-self: center; }
.logo--small { height: 40px; }
.logo--stacked { width: 440px; height: auto; }

/* ---------- Mad Libs sentence ---------- */
.sentence {
  margin: 0; font-size: 76px; line-height: 1.12; font-weight: 600; letter-spacing: -1.6px; color: #fff;
  text-wrap: pretty; flex: 1; min-height: 0; display: flex; flex-direction: column; justify-content: flex-end;
}
.sentence .s-inner { display: block; }
.sentence .lead { color: var(--text-2); font-weight: 450; }
.slot { font-style: normal; transition: color .25s; }
.slot.is-blank {
  display: inline-block; min-width: 230px; height: .9em; vertical-align: -0.08em; margin: 0 .08em;
  border-bottom: 6px solid rgba(255, 255, 255, .35); border-radius: 2px;
}
.slot.is-blank.is-next { border-bottom-color: var(--sky-3); animation: blank-pulse 1.6s var(--ease-std) infinite; }
@keyframes blank-pulse { 50% { border-bottom-color: rgba(127, 217, 251, .35); } }
.slot.is-filled { background: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent; animation: slot-pop .45s var(--ease-out); }
@keyframes slot-pop { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ---------- Buttons ---------- */
.btn {
  appearance: none; height: 120px; padding: 0 56px; font-size: 40px; font-weight: 600; line-height: 1;
  border-radius: 999px; border: 2px solid transparent; display: inline-flex; align-items: center; justify-content: center; gap: 18px;
  white-space: nowrap; position: relative; transition: transform .1s var(--ease-std), background .15s, box-shadow .2s;
}
.btn:active { transform: scale(.97); }
.btn svg { width: 40px; height: 40px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.btn--sky { background: var(--sky); color: var(--ink); box-shadow: 0 18px 60px var(--sky-glow), inset 0 0 0 1px rgba(255,255,255,.6); }
.btn--sky .btn__spark { fill: var(--ink); stroke: none; }
/* No backdrop-filter anywhere: re-blurring what's behind on every frame is the costliest thing a 4K iGPU can do. */
.btn--glass, .btn--ghost { background: var(--surface); border-color: var(--stroke-2); color: #fff; }
.btn--glass:active, .btn--ghost:active { background: var(--surface-2); }
.btn--text { background: none; color: var(--text-2); height: 96px; font-size: 34px; font-weight: 500; }
.btn--xl { height: 140px; font-size: 46px; }
.btn--back { height: 96px; padding: 0 36px 0 24px; font-size: 32px; gap: 8px; flex: none; }
.btn--back svg { width: 40px; height: 40px; }
.btn--create { height: 168px; font-size: 60px; width: 100%; letter-spacing: -.5px; animation: create-glow 2.2s var(--ease-std) infinite; }
.btn--create .btn__spark { width: 56px; height: 56px; }
@keyframes create-glow {
  0%, 100% { box-shadow: 0 18px 60px var(--sky-glow), 0 0 0 0 rgba(127,217,251,.5), inset 0 0 0 1px rgba(255,255,255,.6); }
  60%      { box-shadow: 0 18px 70px rgba(79,200,248,.5), 0 0 0 30px rgba(127,217,251,0), inset 0 0 0 1px rgba(255,255,255,.6); }
}

/* ---------- Pick panels ---------- */
.panel { display: none; flex-direction: column; height: 100%; gap: 28px; }
#screen-pick[data-step="1"] .panel[data-panel="1"],
#screen-pick[data-step="2"] .panel[data-panel="2"],
#screen-pick[data-step="3"] .panel[data-panel="3"] { display: flex; animation: panel-in .5s var(--ease-out); }
@keyframes panel-in { from { opacity: 0; transform: translateX(60px); } to { opacity: 1; transform: none; } }
#screen-pick.is-going-back .panel { animation-name: panel-back; }
@keyframes panel-back { from { opacity: 0; transform: translateX(-60px); } to { opacity: 1; transform: none; } }

.panel__head { display: flex; align-items: center; gap: 28px; flex: none; min-height: 96px; }
.kicker { margin: 0 0 6px; font-size: 26px; font-weight: 600; letter-spacing: 3px; text-transform: uppercase; color: var(--sky-3); }
.panel__title { margin: 0; font-size: 50px; font-weight: 650; letter-spacing: -1px; line-height: 1.1; }

.options { flex: 1; min-height: 0; display: grid; grid-template-rows: repeat(5, 1fr); gap: 18px; }
.option {
  appearance: none; min-height: 0; text-align: left; font-size: 40px; line-height: 1.18; font-weight: 550; color: #fff;
  display: flex; align-items: center; gap: 30px; padding: 0 34px 0 22px;
  border-radius: 30px; border: 2px solid var(--stroke); background: var(--surface);
  transition: transform .15s var(--ease-out), border-color .2s, background .2s, box-shadow .25s;
}
.option:active { transform: scale(.985); background: var(--surface-2); }
.option.is-selected { border-color: var(--sky-2); background: rgba(127, 217, 251, .10); box-shadow: 0 0 0 4px rgba(127,217,251,.18), 0 20px 60px rgba(79,200,248,.18); }
.option__label { flex: 1; min-width: 0; }
.option__go { flex: none; width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; border: 2px solid var(--stroke-2); transition: all .2s; }
.option__go svg { width: 32px; height: 32px; fill: none; stroke: #fff; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.option.is-selected .option__go { background: var(--sky); border-color: transparent; }
.option.is-selected .option__go svg { stroke: var(--ink); }

.option__icon {
  flex: none; width: 112px; height: 112px; border-radius: 28px; display: grid; place-items: center;
  background: rgba(255,255,255,.07); border: 1px solid var(--stroke);
}
.option__icon svg { width: 56px; height: 56px; fill: none; stroke: #fff; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.option.is-selected .option__icon { background: var(--sky); border-color: transparent; }
.option.is-selected .option__icon svg { stroke: var(--ink); }

/* Aesthetic swatches: each is a tiny preview of the look */
.swatch {
  flex: none; width: 112px; height: 112px; border-radius: 28px; position: relative; overflow: hidden;
  display: grid; place-items: center; border: 2px solid rgba(255,255,255,.16);
}
.swatch .aa { font-size: 50px; line-height: 1; position: relative; z-index: 1; }
.sw-dopamine {
  background: radial-gradient(circle at 22% 26%, #FFD23F 0 22%, transparent 23%),
              radial-gradient(circle at 80% 78%, #3DDC97 0 26%, transparent 27%),
              linear-gradient(135deg, #FF4FA3 0%, #FF7A45 50%, #7B61FF 100%);
}
.sw-dopamine .aa { color: #fff; font-weight: 900; text-shadow: 0 3px 0 rgba(0,0,0,.25); }
.sw-arcade {
  background: repeating-linear-gradient(0deg, rgba(255,255,255,.06) 0 2px, transparent 2px 6px), #12062B;
}
.sw-arcade .aa { font-family: var(--mono); font-weight: 800; color: #FF3BD4; text-shadow: 3px 3px 0 #00E5FF; letter-spacing: -2px; }
.sw-techno {
  background:
    linear-gradient(rgba(0, 229, 255, .22) 1px, transparent 1px) 0 0 / 16px 16px,
    linear-gradient(90deg, rgba(0, 229, 255, .22) 1px, transparent 1px) 0 0 / 16px 16px,
    radial-gradient(circle at 50% 120%, #0F4C81 0%, #050B18 70%);
}
.sw-techno .aa { color: #9FF6FF; font-weight: 250; text-shadow: 0 0 12px rgba(0,229,255,.9); }
.sw-y2k {
  background: linear-gradient(135deg, #F4F7FB 0%, #A9BCD3 28%, #FFFFFF 46%, #C5D2E3 60%, #F6D7FF 80%, #C9EEFF 100%);
}
.sw-y2k .aa { font-weight: 800; font-style: italic; color: #4A3AFF; text-shadow: 2px 2px 0 #fff, 4px 4px 0 #FF6FD8; }
.sw-y2k::after { content: "✦"; position: absolute; top: 8px; right: 12px; font-size: 26px; color: #FF6FD8; }
.sw-maximal { background: conic-gradient(from 210deg, #F25022, #FFB900, #7FBA00, #00A4EF, #E3008C, #F25022); }
.sw-maximal .aa { color: #fff; font-weight: 900; font-style: italic; text-shadow: 3px 3px 0 #111; transform: rotate(-8deg); }
.option.is-selected .swatch { border-color: #fff; }

/* Review */
.review { display: grid; gap: 18px; flex: none; }
.review__row {
  appearance: none; display: flex; align-items: center; gap: 28px; padding: 22px 30px 22px 22px; text-align: left;
  border-radius: 30px; border: 2px solid var(--stroke); background: var(--surface); min-height: 156px;
}
.review__row:active { background: var(--surface-2); transform: scale(.99); }
.review__art .option__icon, .review__art .swatch { width: 104px; height: 104px; }
.review__text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.review__label { font-size: 24px; font-weight: 600; letter-spacing: 2.5px; text-transform: uppercase; color: var(--text-3); }
.review__value { font-size: 38px; font-weight: 600; line-height: 1.18; }
.review__edit { flex: none; font-size: 28px; font-weight: 600; color: var(--sky-3); padding: 14px 24px; border-radius: 999px; border: 2px solid rgba(127,217,251,.4); }
.panel[data-panel="3"] { justify-content: center; gap: 34px; }
.panel[data-panel="3"] .panel__head { margin-bottom: -6px; }
.panel[data-panel="3"] .btn--create { margin-top: 14px; }
.panel[data-panel="3"] .btn--text { align-self: center; margin-top: -8px; }

/* Footer progress */
.progress { display: flex; gap: 14px; }
.progress i { width: 64px; height: 10px; border-radius: 5px; background: rgba(255,255,255,.18); transition: background .3s, width .3s; }
#screen-pick[data-step="1"] .progress i[data-dot="1"],
#screen-pick[data-step="2"] .progress i[data-dot="2"],
#screen-pick[data-step="3"] .progress i[data-dot="3"] { background: var(--sky); width: 120px; }
#screen-pick[data-step="2"] .progress i[data-dot="1"],
#screen-pick[data-step="3"] .progress i[data-dot="1"],
#screen-pick[data-step="3"] .progress i[data-dot="2"] { background: rgba(127,217,251,.55); }
.hint { margin: 0; font-size: 28px; color: var(--text-3); }

/* ---------- Creating ---------- */
.creating { gap: 44px; }
.ring { width: 300px; height: 300px; border-radius: 50%; position: relative; }
.ring::before {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(from 0deg, rgba(255,255,255,0) 0deg, var(--sky-1) 90deg, var(--sky-2) 180deg, var(--sky-3) 270deg, var(--sky-4) 330deg, #fff 360deg);
  -webkit-mask: radial-gradient(circle, transparent 58%, #000 59%); mask: radial-gradient(circle, transparent 58%, #000 59%);
  animation: spin 1.4s linear infinite; filter: drop-shadow(0 0 30px rgba(79,200,248,.45));
}
.ring i { position: absolute; inset: 70px; border-radius: 50%; background: radial-gradient(circle at 38% 32%, #fff 0%, var(--sky-2) 40%, rgba(79,200,248,.25) 72%, transparent 100%); opacity: .55; animation: breathe 1.6s var(--ease-std) infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes breathe { 50% { transform: scale(1.12); opacity: .8; } }
.creating__title { margin: 0; font-size: 72px; font-weight: 650; letter-spacing: -1.6px; }
.creating__status { margin: 0; font-size: 34px; color: var(--text-2); min-height: 44px; }
#screen-creating .band--low { justify-content: flex-start; }
.creating__sentence { margin: 0; font-size: 38px; line-height: 1.35; max-width: 920px; color: var(--text-2); }
.creating__sentence .slot { font-weight: 650; }

/* ---------- Player ---------- */
#screen-player { background: var(--base-deep); }
#screen-player.is-active { display: block; }
/* 96x54 canvas, blurred and dimmed in JS, stretched here (see paintAmbient in app.js) */
.video-ambient { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Same box as the attract video band (rows 18% + 8%, then 36%), so the result plays at the same height.
   contain, not cover: the whole frame shows, edge to edge across the 1080 width, with nothing cropped. */
#player { position: absolute; left: 0; top: 26%; width: 100%; height: 36%; object-fit: contain; }
.player__top {
  position: absolute; left: 0; right: 0; top: 0; padding: 56px var(--gutter) 90px; display: flex; flex-direction: column; gap: 26px;
  background: linear-gradient(rgba(5,8,17,.82), rgba(5,8,17,0)); transition: opacity .5s var(--ease-out);
}
.caption { margin: 0; font-size: 36px; line-height: 1.32; font-weight: 500; color: #fff; max-width: 900px; opacity: 0; transform: translateY(-10px); transition: opacity .4s var(--ease-out), transform .4s var(--ease-out); }
.show-caption .caption { opacity: 1; transform: none; }
.inline-startover { position: absolute; left: 50%; top: 54%; transform: translateX(-50%); opacity: 0; pointer-events: none; transition: opacity .2s; background: rgba(5, 8, 17, .72); }
.inline-startover:active { transform: translateX(-50%) scale(.97); }
.show-inline .inline-startover { opacity: 1; pointer-events: auto; }
.is-ended .inline-startover, .is-missing .inline-startover, .is-ended .player__top, .is-missing .player__top { opacity: 0; pointer-events: none; }

.endcard {
  /* the last row is the knee-height third: the buttons stop at its top edge, so they stay in reach */
  position: absolute; inset: 0; display: grid; grid-template-rows: minmax(18%, auto) 1fr auto 34%; padding: 0 var(--gutter);
  background: rgba(7,11,22,.95);   /* the last frame only hints through: nothing may compete with the QR */
  opacity: 0; pointer-events: none; transition: opacity .45s var(--ease-out);
}
.is-ended .endcard { opacity: 1; pointer-events: auto; }
.endcard__top { justify-content: flex-start; }
.endcard__top .kicker { margin-top: auto; }
.endcard__sentence { margin: 0; font-size: 54px; line-height: 1.16; font-weight: 600; letter-spacing: -1px; }
.endcard__sentence .lead { color: var(--text-2); font-weight: 450; }
.endcard__download { display: flex; flex-direction: column; justify-content: center; min-height: 0; }
.endcard__idea { margin: 0 0 14px; display: flex; align-items: center; gap: 16px; font-size: 34px; font-weight: 500; color: var(--text-2); }
.endcard__idea svg { width: 56px; height: 28px; fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.endcard__title { margin: 0 0 36px; font-family: var(--serif); font-weight: 400; font-size: 76px; line-height: 1.06; letter-spacing: -1.2px; color: #fff; }
.endcard__title em {
  font-style: italic; background: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent;
  padding-right: .06em;
}
.endcard__scan { display: flex; align-items: center; gap: 44px; }
/* The SVG carries its own white quiet zone. Keep it big: guests scan it from a step or two back. */
.endcard__qr { flex: none; width: 440px; height: 440px; border-radius: 20px; }
.endcard__scan-title { margin: 0 0 16px; font-size: 54px; line-height: 1.12; font-weight: 650; letter-spacing: -1px; }
.endcard__scan-hint { margin: 0; font-size: 32px; line-height: 1.3; color: var(--text-2); text-wrap: balance; }
.endcard__logo { position: absolute; left: 50%; top: 87%; transform: translate(-50%, -50%); }   /* where the attract loop's logo sits */
.endcard__buttons { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; padding-top: 32px; }
.endcard__buttons .btn { width: 100%; }

.missing { position: absolute; inset: 0; display: none; grid-template-rows: 18% 48% 1fr; padding: 0 var(--gutter); background: var(--base); }
.is-missing .missing { display: grid; }
.missing__body { gap: 30px; }
.missing__body h2 { margin: 0; font-size: 60px; font-weight: 650; letter-spacing: -1px; }
.missing__sentence { margin: 0; font-size: 36px; line-height: 1.4; color: var(--text-2); }
.missing__file { font-family: var(--mono); font-size: 26px; color: var(--text-3); }
.missing__body .btn { width: 100%; margin-top: 20px; }

/* ---------- Attract ---------- */
#screen-attract.is-active { display: block; }
.attract {
  position: absolute; inset: 0; display: grid; grid-template-rows: 18% 8% 36% 12% 1fr;
  justify-items: center; align-items: center; text-align: center;
}
.attract__title {
  margin: 0; padding: 0 var(--gutter); align-self: end;
  font-family: var(--serif); font-weight: 400; font-size: 132px; line-height: 1.02; letter-spacing: -2.5px; color: #fff;
}
.attract__title em {
  font-style: italic; background: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent;
  padding-right: .06em;
}
.attract__sentence { margin: 0; padding: 0 var(--gutter); font-size: 36px; line-height: 1.55; color: var(--text-2); max-width: 980px; }
.attract__sentence .slot { color: #fff; font-weight: 650; background: none; -webkit-text-fill-color: #fff; }
/* Soft top/bottom edges come from a base-colour overlay rather than mask-image (a mask re-renders the video
   through an extra pass every frame). The overlay's 10% tint replaces the video's old .9 opacity. */
.attract__band { width: 100%; height: 100%; position: relative; overflow: hidden; }
.attract__band::after {
  content: ""; position: absolute; inset: -1px 0; pointer-events: none;
  background: linear-gradient(var(--base) 0%, rgba(7,11,22,.1) 14%, rgba(7,11,22,.1) 86%, var(--base) 100%);
}
.attract-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; visibility: hidden; }
.attract-video.is-on { visibility: visible; }
#screen-attract.no-video .attract__band { background: radial-gradient(60% 60% at 50% 50%, rgba(79,200,248,.25), transparent 70%); }
#screen-attract.no-video .attract__band::after, #screen-attract.no-video .attract-video { display: none; }
.tap {
  appearance: none; border: 0;
  display: inline-flex; align-items: center; gap: 20px; height: 128px; padding: 0 64px; border-radius: 999px;
  background: var(--sky); color: var(--ink); font-size: 42px; font-weight: 650;
  box-shadow: 0 0 0 0 rgba(127,217,251,.6), 0 20px 60px var(--sky-glow); animation: pulse 2.2s var(--ease-std) infinite;
  transition: transform .1s var(--ease-std);
}
.tap:active { transform: scale(.97); }
.tap__dot { width: 20px; height: 20px; border-radius: 50%; background: var(--sky-4); box-shadow: 0 0 0 6px rgba(79,200,248,.25); }
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 rgba(127,217,251,.6), 0 20px 60px var(--sky-glow); }
  70%  { box-shadow: 0 0 0 34px rgba(127,217,251,0), 0 20px 60px var(--sky-glow); }
  100% { box-shadow: 0 0 0 0 rgba(127,217,251,0), 0 20px 60px var(--sky-glow); }
}
.attract__logo { align-self: center; }

/* ---------- Logo only (dashboard: screen not in use) ---------- */
#screen-logo.is-active { display: grid; place-items: center; }
.logo-only { width: 560px; }
#stage[data-screen="logo"] .aurora i { animation-play-state: paused; }   /* idle screen: no animation work */

/* ---------- Paused (dashboard) ---------- */
#screen-paused.is-active { display: block; }
.paused {
  position: absolute; inset: 0; display: grid; grid-template-rows: 1fr auto 1fr;
  justify-items: center; align-items: center; text-align: center;
}
.paused .attract__title { grid-row: 2; align-self: center; }
.paused .attract__logo { grid-row: 3; }