/* LS-003 "The Release Nobody Approved": proof scene, speech bubbles, style guide pages. Preview only. */
@font-face { font-family: 'Inter'; src: url('../../assets/fonts/InterVariable.woff2') format('woff2'); font-weight: 100 900; font-display: swap; }
:root { --ink: #221a33; --navy: #1a1f3d; --amber: #ffc83d; --orange: #f07a2a; --aqua: #52f0ff; --lilac: #c58ce8; --paper: #fbf7f0; --go: #33d17a; }
* { box-sizing: border-box; }
html, body { margin: 0; }
body { font-family: Inter, system-ui, sans-serif; color: var(--ink); background: var(--navy); }
.ls3-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ------------------------------------------------------------------ player */
.ls3-player { position: fixed; inset: 0; overflow: hidden; background: #120f26; color: #fff; }
.ls3-view { position: absolute; inset: 0; overflow: hidden; contain: strict; z-index: 0; pointer-events: none; }   /* M1 has no scene hotspots; M2 re-enables them per object */
.ls3-world { position: absolute; left: 0; top: 0; transform-origin: 0 0; will-change: transform; }
.ls3-layer { position: absolute; left: 0; top: 0; will-change: transform; transform-origin: 0 0; }
.ls3-layer > svg, .ls3-layer > img, .ls3-layer > canvas { display: block; position: absolute; left: 0; top: 0; }
.ls3-sky { image-rendering: auto; }
.ls3-gl { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; mix-blend-mode: screen; }
.ls3-vignette { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(120% 90% at 50% 45%, transparent 55%, rgba(12, 6, 30, 0.55) 100%); }
.ls3-bars { position: absolute; left: 0; right: 0; height: 0; background: #07050f; pointer-events: none; transition: height 0.6s ease; z-index: 3; }
.ls3-bars--t { top: 0; } .ls3-bars--b { bottom: 0; }
.ls3-player.is-letterbox .ls3-bars { height: 5.5vh; }
.ls3-fade { position: absolute; inset: 0; background: #07050f; opacity: 0; pointer-events: none; z-index: 4; }

/* speech bubbles: positioned in screen space each frame (transform only) */
.ls3-bubbles-layer { position: absolute; inset: 0; pointer-events: none; z-index: 5; }
.ls3-bubble { position: absolute; left: 0; top: 0; max-width: min(380px, 78vw); padding: 12px 16px 13px; background: #fffdf7; color: var(--ink);
  border: 3px solid var(--ink); border-radius: 22px; box-shadow: 0 5px 0 rgba(20, 10, 40, 0.35); font-weight: 600; font-size: 19px; line-height: 1.25;
  will-change: transform, opacity; transform-origin: var(--ox, 50%) 100%; }
.ls3-bubble p { margin: 0; }
.ls3-bubble .ls3-ghost { visibility: hidden; }
.ls3-bubble__who { display: block; font-size: 12px; font-weight: 800; letter-spacing: 0.09em; text-transform: uppercase; margin-bottom: 2px; color: #6b5a8a; }
.ls3-bubble__tail { position: absolute; bottom: -17px; width: 26px; height: 18px; left: var(--tx, 50%); margin-left: -13px; overflow: visible; }
.ls3-bubble--shout { font-weight: 800; font-size: 21px; background: #fff3c4; border-radius: 14px; border-width: 3.5px; }
.ls3-bubble--whisper { font-weight: 500; border-style: dashed; background: #f4f0ff; }
.ls3-bubble--think { border-radius: 30px; background: #eef9ff; }
.ls3-bubble[data-who="rm"] .ls3-bubble__who { color: #c9580f; }
.ls3-bubble[data-who="dev7"] .ls3-bubble__who { color: #0f8aa6; }
.ls3-bubble[data-who="qa9"] .ls3-bubble__who { color: #6a34c2; }
.ls3-bubble[data-who="ship1"] .ls3-bubble__who { color: #b45a07; }
.ls3-bubble.is-static { position: relative; display: inline-block; margin: 8px 12px 24px 0; }

/* title card + controls */
.ls3-title { position: absolute; left: clamp(16px, 3vw, 40px); top: clamp(14px, 3vh, 34px); padding-top: calc(var(--ls3-brand-w) * 0.2683 + 4px); z-index: 6; pointer-events: none; text-shadow: 0 2px 10px rgba(10, 5, 30, 0.6); transition: opacity 0.6s; }
/* The Tracston logo floats in its usual top-left place for the whole story and links home (the episode has no site header). */
.ls3-player { --ls3-brand-w: clamp(120px, 14vw, 190px); }
.ls3-homelogo { position: absolute; left: clamp(16px, 3vw, 40px); top: clamp(14px, 3vh, 34px); z-index: 8; display: block; padding: 6px; margin: -6px; border-radius: 12px; pointer-events: auto; transition: opacity 0.35s, filter 0.2s; animation: ls3-float 6s ease-in-out infinite; }
.ls3-homelogo img { display: block; width: var(--ls3-brand-w); height: auto; filter: drop-shadow(0 3px 8px rgba(10, 5, 30, 0.55)); }
.ls3-homelogo:hover, .ls3-homelogo:focus-visible { filter: brightness(1.15); }
.ls3-homelogo:focus-visible { outline: 3px solid var(--amber); outline-offset: 2px; }
@keyframes ls3-float { 0%, 100% { transform: translate(0, 0) rotate(-0.8deg); } 50% { transform: translate(0, -5px) rotate(0.8deg); } }
.ls3-player.is-cinema:not(.is-peek) .ls3-homelogo { opacity: 0; pointer-events: none; }
.ls3-title p { margin: 6px 0 0; font-size: clamp(12px, 1.3vw, 17px); font-weight: 600; letter-spacing: 0.06em; }
.ls3-title a.ls3-home { pointer-events: auto; position: relative; color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.ls3-title a.ls3-home::after { content: ""; position: absolute; inset: -14px -10px; }   /* 44px touch target, no layout change */
.ls3-player:not(.is-idle):not(.is-ended) .ls3-title a.ls3-home, .ls3-player.is-card .ls3-title a.ls3-home { pointer-events: none; }
.ls3-title h1 { margin: 2px 0 0; font-size: clamp(16px, 2vw, 28px); font-weight: 800; }
.ls3-player:not(.is-idle):not(.is-ended) .ls3-title { opacity: 0; }
.ls3-player.is-ended .ls3-title, .ls3-player.is-idle .ls3-title { opacity: 1; }
.ls3-player.is-card .ls3-title { opacity: 0; }
.ls3-ctl { position: absolute; right: clamp(12px, 2vw, 28px); bottom: calc(clamp(12px, 2.4vh, 28px) + env(safe-area-inset-bottom)); z-index: 7; display: flex; gap: 10px; align-items: center; }
.ls3-btn { font: 700 15px/1 Inter, system-ui, sans-serif; color: var(--ink); background: var(--amber); border: 3px solid var(--ink); border-radius: 999px; padding: 11px 18px; min-height: 44px; min-width: 44px; cursor: pointer; box-shadow: 0 4px 0 var(--ink); }
.ls3-btn:active { translate: 0 3px; box-shadow: 0 1px 0 var(--ink); }   /* `translate`, not `transform`: .ls3-big is centred with transform */
.ls3-btn--ghost { background: rgba(255, 253, 247, 0.92); }
a.ls3-btn { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; box-sizing: border-box; }
.ls3-btn:focus-visible { outline: 3px solid var(--aqua); outline-offset: 3px; }
.ls3-btn[aria-pressed="true"] { background: var(--aqua); }
.ls3-progress { position: absolute; left: 0; right: 0; bottom: 0; height: 4px; z-index: 7; background: rgba(255, 255, 255, 0.12); }
.ls3-progress i { display: block; height: 100%; width: 100%; background: var(--amber); transform-origin: 0 0; transform: scaleX(0); will-change: transform; }
.ls3-big { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 7; font-size: 20px; padding: 16px 30px; }
.ls3-player.is-running .ls3-big { display: none; }
.ls3-endcard { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -78%); z-index: 6; text-align: center; width: min(600px, 88vw); pointer-events: none; opacity: 0; transition: opacity 0.6s;
  background: rgba(20, 15, 46, 0.96); border: 3px solid var(--amber); border-radius: 24px; padding: clamp(14px, 3vh, 28px) clamp(16px, 3vw, 32px); box-shadow: 0 6px 0 var(--ink), 0 0 60px rgba(255, 200, 61, 0.25); }
.ls3-endcard h2 { margin: 0; font-size: clamp(22px, 3.4vw, 44px); font-weight: 900; color: #fff; text-shadow: 0 3px 0 var(--ink), 0 0 24px rgba(255, 200, 61, 0.5); }
.ls3-endcard p { margin: 8px 0 0; font-size: clamp(14px, 1.5vw, 19px); font-weight: 600; color: #ffe9b8; text-shadow: 0 2px 6px rgba(0, 0, 0, 0.6); }
.ls3-player.is-card .ls3-endcard { opacity: 1; }
.ls3-player.is-card .ls3-big { display: block; top: auto; bottom: calc(clamp(12px, 2.4vh, 28px) + 64px); transform: translateX(-50%); }
.ls3-note { position: absolute; left: clamp(12px, 2vw, 28px); bottom: calc(clamp(12px, 2.4vh, 28px) + env(safe-area-inset-bottom)); z-index: 7; margin: 0; font-size: 12px; color: rgba(255, 255, 255, 0.72); max-width: 46vw; }

/* phones: bubbles a little smaller; landscape phones keep the controls in a corner */
@media (max-width: 560px) {
  .ls3-bubble { font-size: 15.5px; padding: 9px 12px 10px; border-radius: 18px; max-width: 74vw; }
  .ls3-bubble--shout { font-size: 17px; }
  .ls3-btn { font-size: 14px; padding: 10px 14px; }
  .ls3-note { display: none; }
}
@media (max-height: 500px) and (orientation: landscape) {
  .ls3-bubble { font-size: 14.5px; padding: 8px 12px 9px; max-width: 40vw; }
  .ls3-title h1 { font-size: 15px; } .ls3-title p { font-size: 11px; } .ls3-player { --ls3-brand-w: 110px; } .ls3-homelogo { padding: 8px; margin: -8px; }
  .ls3-note { display: none; }
}
@media (prefers-reduced-motion: reduce) { .ls3-homelogo { animation: none; } .ls3-bars, .ls3-title, .ls3-endcard, .ls3-ctl, .ls3-hot { transition: none; } }

/* ------------------------------------------------------------------ M2: environment, transitions, interaction */
.ls3-alert { position: absolute; inset: 0; pointer-events: none; opacity: 0; z-index: 2;
  background: radial-gradient(110% 80% at 50% 0%, rgba(255, 60, 40, 0.38), rgba(255, 40, 30, 0.12) 55%, transparent 80%); mix-blend-mode: screen; }
.ls3-fade { will-change: opacity, transform; }
.ls3-hotspots { position: absolute; inset: 0; z-index: 6; pointer-events: none; }
.ls3-hot { position: absolute; left: 0; top: 0; pointer-events: auto; cursor: pointer; padding: 0; margin: 0; background: transparent;
  border: 3px dashed rgba(82, 240, 255, 0.85); border-radius: 18px; box-shadow: 0 0 0 2px rgba(18, 15, 38, 0.5), 0 0 22px rgba(82, 240, 255, 0.45) inset;
  animation: ls3-hot 1.6s ease-in-out infinite; }
.ls3-hot__tag { position: absolute; right: 6px; bottom: 6px; white-space: nowrap; font: 800 13px/1 Inter, system-ui, sans-serif; letter-spacing: 0.04em;
  color: var(--ink); background: var(--aqua); border: 2px solid var(--ink); border-radius: 999px; padding: 6px 10px; }
.ls3-hot.is-seen { border-style: solid; border-color: rgba(51, 209, 122, 0.85); animation: none; }
.ls3-hot.is-seen .ls3-hot__tag { background: var(--go); }
.ls3-hot.is-seen .ls3-hot__tag::before { content: '✓ '; }
.ls3-hot:hover, .ls3-hot:focus-visible { outline: 3px solid var(--amber); outline-offset: 2px; background: rgba(82, 240, 255, 0.08); }
@keyframes ls3-hot { 50% { border-color: rgba(255, 200, 61, 0.95); } }
@media (prefers-reduced-motion: reduce) { .ls3-hot { animation: none; } }
.ls3-info { position: absolute; z-index: 9; left: clamp(12px, 3vw, 32px); top: clamp(12px, 3vh, 32px); width: min(380px, calc(100vw - 24px)); max-height: calc(100% - 140px); overflow: auto;
  background: rgba(20, 15, 46, 0.95); color: #fff; border: 3px solid var(--aqua); border-radius: 20px; padding: 14px 16px 12px; box-shadow: 0 6px 0 var(--ink); }
.ls3-info h3 { margin: 0 0 6px; font-size: 17px; color: var(--aqua); }
.ls3-info p { margin: 0 0 8px; font-size: 15px; line-height: 1.4; }
.ls3-info__close { min-height: 40px; padding: 8px 14px; }
.ls3-decide { position: absolute; z-index: 8; left: 50%; bottom: calc(clamp(12px, 2.4vh, 28px) + 64px + env(safe-area-inset-bottom)); transform: translateX(-50%);
  width: min(640px, calc(100vw - 24px)); background: rgba(20, 15, 46, 0.94); color: #fff; border: 3px solid var(--amber); border-radius: 22px;
  padding: 12px 16px 12px; box-shadow: 0 6px 0 var(--ink), 0 0 50px rgba(255, 200, 61, 0.25); text-align: center; }
.ls3-decide__kick { margin: 0; font-size: 12px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--amber); }
.ls3-decide h2 { margin: 4px 0 10px; font-size: clamp(16px, 2.2vw, 22px); line-height: 1.25; }
.ls3-decide__opts { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.ls3-opt { display: grid; gap: 3px; text-align: left; flex: 1 1 220px; max-width: 300px; padding: 10px 14px; border-radius: 16px; line-height: 1.2; }
.ls3-opt strong { font-size: 16px; } .ls3-opt span { font-size: 13px; font-weight: 600; opacity: 0.85; }
.ls3-opt--trust { background: #ffd8d0; }
.ls3-decide__note { margin: 8px 0 0; font-size: 13px; color: #cfe9ff; }
.ls3-endmenu { margin-top: 14px; text-align: center; pointer-events: auto; }
.ls3-endmenu[hidden] { display: none; }
.ls3-endmenu__found { margin: 0 0 10px; font-size: 14px; font-weight: 700; color: #ffe9b8; text-shadow: 0 2px 6px rgba(0, 0, 0, 0.7); }
.ls3-endmenu__row { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.ls3-player.is-ended .ls3-big { display: none; }
.ls3-player.is-deciding .ls3-big, .ls3-player.is-deciding #ls3-skip, .ls3-player.is-deciding #ls3-play { display: none; }
.ls3-cine { position: absolute; z-index: 7; right: clamp(12px, 2vw, 28px); top: calc(clamp(10px, 2vh, 24px) + env(safe-area-inset-top)); min-height: 40px; padding: 8px 14px; font-size: 14px; }
/* Cinema Mode: the picture gets the screen; a tap peeks the controls; decisions, info and endings always show */
.ls3-ctl, .ls3-note, .ls3-progress { transition: opacity 0.35s; }
.ls3-player.is-cinema .ls3-title, .ls3-player.is-cinema .ls3-note { opacity: 0; pointer-events: none; }
.ls3-player.is-cinema .ls3-ctl { opacity: 0; visibility: hidden; transition: opacity 0.35s, visibility 0s 0.35s; }
.ls3-player.is-cinema.is-peek .ls3-ctl { opacity: 1; visibility: visible; transition: opacity 0.35s; }
.ls3-player.is-cinema .ls3-progress { height: 3px; opacity: 0.7; }
.ls3-player.is-cinema .ls3-cine { opacity: 0.55; }
.ls3-player.is-cinema .ls3-cine:hover, .ls3-player.is-cinema .ls3-cine:focus-visible, .ls3-player.is-cinema.is-peek .ls3-cine { opacity: 1; }
.ls3-player.is-cinema .ls3-decide { bottom: calc(14px + env(safe-area-inset-bottom)); }
.ls3-player:fullscreen { width: 100%; height: 100%; }
.ls3-btn:disabled { opacity: 0.55; cursor: default; box-shadow: 0 2px 0 var(--ink); }
@media (max-width: 560px) {
  .ls3-decide { padding: 10px 12px; border-radius: 18px; }
  .ls3-opt { flex: 1 1 calc(50% - 5px); max-width: none; padding: 9px 11px; }
  .ls3-decide h2 { font-size: 15.5px; margin: 2px 0 8px; } .ls3-decide__note { font-size: 12px; margin-top: 6px; }
  .ls3-info { top: calc(64px + env(safe-area-inset-top)); }
  .ls3-opt strong { font-size: 15px; } .ls3-opt span { font-size: 12.5px; }
  .ls3-cine { font-size: 13px; padding: 7px 12px; }
  .ls3-hot__tag { font-size: 12px; padding: 5px 8px; }
}
@media (max-width: 560px) and (max-height: 740px) { .ls3-opt span, .ls3-decide__kick { display: none; } .ls3-decide__note { display: none; } }
@media (max-height: 500px) and (orientation: landscape) {
  .ls3-decide { bottom: calc(10px + env(safe-area-inset-bottom)); width: min(560px, calc(100vw - 170px)); left: 12px; transform: none; padding: 8px 12px; }
  .ls3-decide h2 { margin: 2px 0 6px; font-size: 15px; } .ls3-decide__kick { font-size: 12px; }
  .ls3-opt { flex-basis: 200px; padding: 7px 10px; } .ls3-opt strong { font-size: 14px; } .ls3-opt span { display: none; }
  .ls3-decide__note { display: none; }
  .ls3-ctl { gap: 8px; } .ls3-ctl .ls3-btn { padding: 8px 12px; font-size: 13px; }
  .ls3-endcard { transform: translate(-50%, -60%); padding: 10px 16px; } .ls3-endmenu { margin-top: 8px; }
  .ls3-info { max-height: calc(100% - 24px); }
}

/* ------------------------------------------------------------------ style guide / reference sheets */
.ls3-doc { background: var(--paper); }
.ls3-doc__head { display: flex; gap: 20px; align-items: center; padding: 20px clamp(16px, 4vw, 48px); background: var(--navy); color: #fff; }
.ls3-doc__head h1 { margin: 2px 0 0; font-size: clamp(20px, 3vw, 32px); }
.ls3-kicker { margin: 0; font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--amber); font-weight: 700; }
.ls3-logo { width: 140px; height: auto; flex: none; }
.ls3-doc__main { padding: 8px clamp(16px, 4vw, 48px) 60px; max-width: 1480px; margin: 0 auto; }
.ls3-doc h2 { font-size: 26px; margin: 36px 0 4px; } .ls3-doc h3 { font-size: 17px; margin: 22px 0 8px; color: #4b3d68; }
.ls3-doc ul { padding-left: 20px; line-height: 1.5; max-width: 980px; }
.ls3-ref img { width: 100%; height: auto; border-radius: 14px; border: 3px solid var(--ink); }
.ls3-role { margin: 0; color: #5d4f77; font-weight: 600; }
.ls3-palette { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; }
.ls3-chip { display: grid; gap: 4px; font-size: 13px; } .ls3-chip small { color: #5d4f77; }
.ls3-sw { display: inline-block; width: 22px; height: 22px; border-radius: 6px; border: 2px solid var(--ink); vertical-align: middle; }
.ls3-sw--lg { width: 100%; height: 54px; border-radius: 12px; }
.ls3-swatches { display: flex; gap: 6px; margin: 10px 0; flex-wrap: wrap; }
.ls3-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; }
.ls3-row figure { margin: 0; background: #fff; border: 2px solid #e7dfd0; border-radius: 14px; padding: 6px 6px 8px; text-align: center; }
.ls3-row figcaption { font-size: 13px; font-weight: 700; text-transform: capitalize; color: #4b3d68; }
.ls3-fig { width: 170px; height: auto; display: block; }
.ls3-row.is-heads .ls3-fig { width: 112px; }
.ls3-sheet { border-top: 3px solid #e7dfd0; margin-top: 30px; }
@media (max-width: 560px) { .ls3-fig { width: 128px; } .ls3-row.is-heads .ls3-fig { width: 86px; } .ls3-doc__head { flex-direction: column; align-items: flex-start; } }
.ls3-stage { position: absolute; inset: 0; overflow: hidden; }
.ls3-player.is-failed .ls3-stage::after { content: 'The animated preview could not start in this browser.'; position: absolute; inset: auto 0 45% 0; text-align: center; color: #fff; }