/*
 * Oha. The page is the studio: close to black, so every story can take it over.
 * Studio colours and faces come from src/theme/index.ts and src/ui/Logo.tsx,
 * each story's look from src/reels/skins.ts and src/studio/lenses.ts.
 */

/* ---------- Faces (self-hosted, Latin subset, OFL) ---------- */
@font-face { font-family: 'Unbounded'; src: url('../fonts/unbounded-800.woff2') format('woff2'); font-weight: 800; font-display: swap; }
@font-face { font-family: 'Atkinson'; src: url('../fonts/atkinson-400.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Atkinson'; src: url('../fonts/atkinson-700.woff2') format('woff2'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Courier Prime'; src: url('../fonts/courier-700.woff2') format('woff2'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'VT323'; src: url('../fonts/vt323.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'Dela Gothic One'; src: url('../fonts/dela-gothic.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'M PLUS Rounded 1c'; src: url('../fonts/mplus-800.woff2') format('woff2'); font-weight: 800; font-display: swap; }
@font-face { font-family: 'Tomorrow'; src: url('../fonts/tomorrow-600.woff2') format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Bowlby One'; src: url('../fonts/bowlby.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'Work Sans'; src: url('../fonts/worksans-700.woff2') format('woff2'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Gloock'; src: url('../fonts/gloock.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'IM Fell Double Pica'; src: url('../fonts/fellpica.woff2') format('woff2'); font-display: swap; }

:root {
  /* Studio */
  --deep: #08070A;
  --night: #17141F;
  --plum: #241C2E;
  --bone: #F4EEE6;
  --mark: #F3EEF6;
  --ash: #A79DB5;
  --smoke: #5E566E;
  --onair: #FF4D3D;
  --ember: #FFB347;

  --f-brand: 'Unbounded', 'Arial Black', 'Helvetica Neue', system-ui, sans-serif;
  --f-ui: 'Atkinson', 'Atkinson Hyperlegible', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --f-osd: 'VT323', ui-monospace, 'SF Mono', Menlo, monospace;
  --f-horror: 'Courier Prime', 'Courier New', Courier, monospace;
  --f-anime-d: 'Dela Gothic One', 'Arial Black', Impact, sans-serif;
  --f-anime: 'M PLUS Rounded 1c', 'Arial Rounded MT Bold', system-ui, sans-serif;
  --f-scifi: 'Tomorrow', 'Eurostile', 'Bank Gothic', system-ui, sans-serif;
  --f-heist-d: 'Bowlby One', Impact, 'Arial Black', sans-serif;
  --f-heist: 'Work Sans', system-ui, sans-serif;

  --gutter: 16px;
  --measure: 34rem;
  --ease-out: cubic-bezier(.22, .61, .36, 1);
  --ease-io: cubic-bezier(.65, 0, .35, 1);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--deep);
  color: var(--bone);
  font: 400 1.0625rem/1.55 var(--f-ui);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; }
button { font: inherit; color: inherit; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--mark); outline-offset: 3px; border-radius: 6px; }
.sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.wrap { width: min(100% - 2 * var(--gutter), 72rem); margin-inline: auto; }

/* ---------- The word mark ---------- */
.logo { --s: 28px; display: inline-flex; align-items: center; text-decoration: none; color: var(--mark); }
.logo .dot {
  width: calc(var(--s) * .68); height: calc(var(--s) * .68); border-radius: 50%;
  background: var(--onair); margin-right: calc(var(--s) * .04); flex: none;
  box-shadow: 0 0 calc(var(--s) * .32) rgba(255, 77, 61, .55);
}
.logo .rest { display: inline-flex; }
.logo .w { display: block; overflow: hidden; height: calc(var(--s) * 1.12); margin-right: calc(var(--s) * -.045); }
.logo .w span { display: block; font: 800 var(--s)/1.12 var(--f-brand); }

/* The opening: black, the dot records, "ha" slides up out of it, the word flies to the corner. */
.intro { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; pointer-events: none; }
.intro-veil { position: absolute; inset: 0; background: var(--deep); }
.intro .logo { --s: 72px; position: relative; transform-origin: 0 0; }
.no-intro .intro, .no-js .intro { display: none; }
.intro-on .bar .logo { opacity: 0; }
.intro.play .dot { animation: dotIn 680ms var(--ease-out) both, dotSlide 620ms var(--ease-out) 620ms both, glow 1000ms linear both; }
.intro.play .rest { animation: fadeIn 210ms linear 620ms both; }
.intro.play .w:nth-child(1) span { animation: rise 390ms var(--ease-out) 620ms both; }
.intro.play .w:nth-child(2) span { animation: rise 390ms var(--ease-out) 852ms both; }
@keyframes dotIn { 0% { scale: .6; opacity: 0; } 38% { scale: 1.08; opacity: 1; } 70% { scale: .96; } 100% { scale: 1; opacity: 1; } }
@keyframes dotSlide { from { translate: var(--shift, 0) 0; } to { translate: 0 0; } }
@keyframes glow { 0% { box-shadow: 0 0 23px rgba(255, 77, 61, .2); } 30% { box-shadow: 0 0 30px rgba(255, 77, 61, .9); } 100% { box-shadow: 0 0 23px rgba(255, 77, 61, .55); } }
@keyframes rise { from { transform: translateY(105%); } to { transform: none; } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.intro.play .dot { translate: var(--shift, 0) 0; }

/* ---------- Reel (the first screen) ---------- */
.reel {
  --bg: #040604; --fg: #D9E2CF; --acc: #9BEA7C; --ink: #F2EFE6; --rec: #FF4D3D;
  position: relative; height: 100vh; height: 100svh; min-height: 540px;
  background: var(--bg); overflow: hidden; isolation: isolate;
}
.reel-back { position: absolute; inset: -8%; z-index: -1; display: none; }
.reel-back img { width: 100%; height: 100%; object-fit: cover; filter: blur(42px) saturate(.5) brightness(.32); transition: opacity 1100ms; }

.bar {
  position: absolute; z-index: 10; top: 0; left: 0; right: 0;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: max(12px, env(safe-area-inset-top)) var(--gutter) 12px;
}
.bar-r { display: flex; gap: 8px; align-items: center; }
.chip {
  display: inline-flex; align-items: center; gap: 7px; min-height: 40px; padding: 0 14px;
  border: 1px solid rgba(244, 238, 230, .28); border-radius: 999px; background: rgba(8, 7, 10, .45);
  font: 700 .875rem/1 var(--f-ui); color: var(--bone); cursor: pointer; text-decoration: none;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.chip:hover { border-color: rgba(244, 238, 230, .6); }
.chip svg { width: 18px; height: 18px; }
.sound[aria-pressed="true"] { border-color: var(--onair); }
.sound .on, .sound[aria-pressed="true"] .off { display: none; }
.sound[aria-pressed="true"] .on { display: inline; }
.soon-pill { display: none; }

.stage {
  position: absolute; inset: 0; overflow: hidden; background: #000;
  touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
  cursor: pointer; outline: none;
}
.stage:focus-visible { box-shadow: inset 0 0 0 3px var(--mark); }
.stage.done { touch-action: pan-y; cursor: default; }
.shot { position: absolute; inset: 0; overflow: hidden; opacity: 0; transition: opacity 1100ms ease; }
.shot.on { opacity: 1; }
.shot.cut { transition: none; }
.shot img { width: 100%; height: 100%; object-fit: cover; transform-origin: 50% 40%; will-change: transform; }
.shade { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to bottom, rgba(0,0,0,.55) 0, rgba(0,0,0,0) 22%, rgba(0,0,0,0) 42%, rgba(4,6,4,.78) 72%, rgba(4,6,4,.94) 100%); }

/* Lens "Kein Netz": cold, grainy, the picture breaking up now and then. */
.grain, .scan, .vig { position: absolute; inset: 0; pointer-events: none; }
.grain {
  inset: -50%; opacity: .2; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain 900ms steps(5) infinite;
}
@keyframes grain { 0% { transform: translate(0, 0); } 20% { transform: translate(-6%, 4%); } 40% { transform: translate(5%, -7%); } 60% { transform: translate(-3%, 8%); } 80% { transform: translate(7%, 2%); } }
.scan { background: repeating-linear-gradient(to bottom, rgba(0,0,0,.16) 0 1px, transparent 1px 3px); opacity: .7; }
.vig { background: radial-gradient(ellipse 85% 70% at 50% 45%, transparent 55%, rgba(0,0,0,.75) 100%); }

.osd {
  position: absolute; z-index: 3; left: 18px; right: 18px; top: 68px;
  display: flex; justify-content: space-between; align-items: flex-start;
  font: 1.375rem/1 var(--f-osd); color: var(--ink); letter-spacing: .04em; text-shadow: 0 0 6px rgba(0,0,0,.6);
  pointer-events: none;
}
.osd .rec { display: inline-flex; align-items: center; gap: 8px; }
.osd .rec i { width: 11px; height: 11px; border-radius: 50%; background: var(--rec); box-shadow: 0 0 8px var(--rec); animation: blink 1.6s steps(2, jump-none) infinite; }
.osd .net { display: inline-flex; align-items: flex-end; gap: 8px; }
.bars { display: inline-flex; align-items: flex-end; gap: 2px; height: 16px; }
.bars b { width: 4px; background: rgba(242, 239, 230, .3); }
.bars b:nth-child(1) { height: 25%; } .bars b:nth-child(2) { height: 50%; } .bars b:nth-child(3) { height: 75%; } .bars b:nth-child(4) { height: 100%; }
.osd .clock { position: absolute; left: 0; top: 30px; opacity: .85; }
@keyframes blink { 50% { opacity: .15; } }

.line {
  position: absolute; z-index: 4; left: 22px; right: 22px; bottom: 132px; margin: 0;
  font: 700 1.6rem/1.3 var(--f-horror); color: var(--fg);
  text-shadow: 0 2px 14px rgba(0,0,0,.85);
  transition: opacity 600ms ease;
  text-wrap: pretty;
}
.line.big { font-size: 2.3rem; line-height: 1.18; }
.line.hide { opacity: 0; transition: none; }
.line .wd { transition: opacity 160ms linear; }
.line.speaking .wd { opacity: .38; }
.line.speaking .wd.lit { opacity: 1; }

.hint {
  position: absolute; z-index: 4; left: 22px; right: 130px; bottom: max(30px, env(safe-area-inset-bottom));
  margin: 0; text-align: left; font: 1.25rem/1 var(--f-osd); color: var(--ink); opacity: .75; letter-spacing: .03em;
  pointer-events: none; transition: opacity 400ms;
}
.hint.hide { opacity: 0; }
.hint.nudge { animation: nudge 2.2s var(--ease-io) 2; }
@keyframes nudge { 0%, 100% { transform: none; opacity: .75; } 40% { transform: translateY(-8px); opacity: 1; } }
.k-desk { display: none; }

.picks { position: absolute; z-index: 5; left: 0; right: 0; bottom: max(18px, env(safe-area-inset-bottom)); display: none; padding: 0 12px; gap: 10px; }
.picks.on { display: flex; }
.pick {
  flex: 1 1 0; min-height: 84px; display: flex; flex-direction: column; justify-content: flex-end; gap: 6px;
  padding: 12px 12px 14px; border: 0; border-radius: 16px; cursor: pointer;
  background: rgba(4, 6, 4, .45); color: #fff; text-align: left;
  font: 700 1.25rem/1.15 var(--f-horror); text-shadow: 0 1px 8px #000;
  box-shadow: inset 0 0 0 1px rgba(217, 226, 207, .25);
  transition: transform 120ms, box-shadow 160ms, background 160ms;
}
.pick.R { text-align: right; align-items: flex-end; }
.pick .way { font: 1.25rem/1 var(--f-osd); color: var(--acc); opacity: .9; }
.pick:hover, .pick.lean { background: rgba(155, 234, 124, .16); box-shadow: inset 0 0 0 2px var(--acc); }
.pick:active { transform: scale(.98); }

.flash { position: absolute; inset: 0; z-index: 7; background: #E8F2E0; opacity: 0; pointer-events: none; }
.flash.go { animation: flash 420ms ease-out; }
@keyframes flash { 0% { opacity: .95; } 25% { opacity: .5; } 100% { opacity: 0; } }
.stage.jolt { animation: jolt 380ms cubic-bezier(.36, .07, .19, .97); }
@keyframes jolt { 10%, 90% { translate: -2px 1px; } 20%, 80% { translate: 5px -3px; } 30%, 50%, 70% { translate: -9px 4px; } 40%, 60% { translate: 9px -2px; } }

/* End of the scene */
.end {
  position: absolute; inset: 0; z-index: 8; display: flex; flex-direction: column; justify-content: flex-end;
  padding: 0 22px max(28px, env(safe-area-inset-bottom));
  background: linear-gradient(to bottom, rgba(4,6,4,.2), rgba(4,6,4,.86) 40%, rgba(4,6,4,.97));
  opacity: 0; transition: opacity 700ms ease; pointer-events: none;
}
.end.on { opacity: 1; pointer-events: auto; }
.end[hidden] { display: none; }
.end-kind { margin: 0; font: 3.5rem/1 var(--f-osd); color: var(--onair); letter-spacing: .02em; }
.end-kind.alive { color: var(--acc); }
.end-title { margin: 4px 0 10px; font: 700 2.1rem/1.1 var(--f-horror); color: var(--fg); }
.end-line { margin: 0 0 18px; font: 700 1.15rem/1.4 var(--f-horror); color: var(--fg); opacity: .9; max-width: 26rem; }
.end-count { margin: 0 0 20px; padding: 14px 0 0; border-top: 1px solid rgba(217, 226, 207, .2); font: 1.0625rem/1.45 var(--f-ui); color: var(--ash); max-width: 28rem; }
.end-count strong { color: var(--bone); }
.end-acts { display: flex; flex-wrap: wrap; gap: 10px; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 20px;
  border-radius: 999px; border: 0; cursor: pointer; text-decoration: none;
  font: 700 1rem/1 var(--f-ui); background: var(--bone); color: var(--deep);
}
.btn.ghost { background: transparent; color: var(--bone); box-shadow: inset 0 0 0 1.5px rgba(244, 238, 230, .45); }
.btn.red { background: var(--onair); color: #fff; }
.btn:hover { filter: brightness(1.08); }

.skip {
  position: absolute; z-index: 6; right: var(--gutter); bottom: max(22px, env(safe-area-inset-bottom));
  font: 700 .875rem/1 var(--f-ui); color: var(--ash); text-decoration: none; padding: 10px 4px;
}
.skip:hover { color: var(--bone); }
.reel.ended .skip, .reel.picking .skip { display: none; }

@media (min-width: 760px) {
  .reel { background: #020302; }
  .reel-back { display: block; }
  .stage {
    inset: auto; left: 50%; top: 76px; transform: translateX(-50%);
    height: calc(100svh - 112px); width: min(calc((100svh - 112px) * 2 / 3), 92vw);
    min-height: 420px; border-radius: 30px;
    box-shadow: 0 30px 90px rgba(0,0,0,.7), 0 0 0 1px rgba(242,239,230,.08);
  }
  .stage.jolt { animation-name: joltDesk; }
  @keyframes joltDesk { 10%, 90% { transform: translateX(calc(-50% - 2px)); } 20%, 80% { transform: translateX(calc(-50% + 5px)); } 30%, 50%, 70% { transform: translateX(calc(-50% - 9px)); } 40%, 60% { transform: translateX(calc(-50% + 9px)); } }
  .osd { top: 20px; }
  .bar { padding-inline: 28px; }
  .soon-pill { display: inline-flex; font: 1.25rem/1 var(--f-osd); color: var(--ash); letter-spacing: .03em; margin-right: 6px; }
  .k-touch { display: none; }
  .k-desk { display: inline; }
  .skip { right: 28px; }
  .hint { left: 50%; right: auto; transform: translateX(-50%); text-align: center; white-space: nowrap; }
  .hint.nudge { animation-name: nudgeDesk; }
  @keyframes nudgeDesk { 0%, 100% { transform: translateX(-50%); opacity: .75; } 40% { transform: translate(-50%, -8px); opacity: 1; } }
}

/* ---------- Studio sections ---------- */
.studio { padding: 88px 0; }
.h-brand { margin: 0 0 18px; font: 800 clamp(2rem, 7.4vw, 4.4rem)/1.04 var(--f-brand); letter-spacing: -.02em; color: var(--mark); text-wrap: balance; }
.h-sub { margin: 0 0 18px; font: 800 clamp(1.5rem, 4.6vw, 2.5rem)/1.1 var(--f-brand); letter-spacing: -.015em; color: var(--mark); text-wrap: balance; }
.lede { margin: 0; max-width: var(--measure); font-size: 1.1875rem; line-height: 1.5; color: var(--bone); }
.quiet { color: var(--ash); }

/* Endings: an empty collection, every ending still locked. */
.endings .lede + .lede { margin-top: 12px; }
.ledger { margin: 44px 0 0; padding: 0; list-style: none; display: grid; gap: 18px; }
.ledger li { display: grid; gap: 8px; }
.ledger .who { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font: 700 .9375rem/1.2 var(--f-ui); color: var(--bone); }
.ledger .who span { font-weight: 400; color: var(--ash); }
.tiles { display: flex; flex-wrap: wrap; gap: 4px; }
.tile {
  width: 18px; height: 24px; border-radius: 4px; display: grid; place-items: center;
  background: var(--night); box-shadow: inset 0 0 0 1.5px var(--c, var(--smoke));
  font: .9375rem/1 var(--f-osd); color: var(--c, var(--smoke));
}
.tile.d { --c: var(--onair); }
.tile.w { --c: var(--bone); }
.tile.t { --c: var(--ember); }
.legend { display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 22px 0 0; padding: 0; list-style: none; font-size: .9375rem; color: var(--ash); }
.legend li { display: inline-flex; align-items: center; gap: 8px; }
.legend .tile { width: 12px; height: 16px; font-size: 0; }
.names { margin: 34px 0 0; max-width: var(--measure); font-size: 1.0625rem; color: var(--ash); }
.names em { font-style: normal; color: var(--bone); font-weight: 700; }

@media (min-width: 760px) {
  .studio { padding: 128px 0; }
  .tile { width: 30px; height: 38px; border-radius: 6px; font-size: 1.25rem; }
  .tiles { gap: 6px; }
  .ledger { gap: 22px; }
  .ledger li { grid-template-columns: 13rem 1fr; align-items: center; gap: 24px; }
  .ledger .who { flex-direction: column; align-items: flex-start; gap: 4px; }
}

/* ---------- Stories: each one takes the page over ---------- */
.stories-head { padding: 88px 0 56px; }
.story { position: relative; background: var(--bg); color: var(--fg); overflow: hidden; }
.story-inner { display: grid; }
.pic { position: relative; aspect-ratio: 4 / 5; background: #000; }
.pic > img:not(.thing) { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.pic::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to bottom, transparent 60%, var(--bg)); }
.osd2 {
  position: absolute; z-index: 2; inset: 14px 16px auto; display: flex; justify-content: space-between;
  font: 1.25rem/1 var(--f-osd); color: var(--ink); letter-spacing: .04em; text-shadow: 0 0 6px rgba(0,0,0,.7);
}
.osd2 .rec { display: inline-flex; align-items: center; gap: 7px; }
.osd2 .rec i { width: 10px; height: 10px; border-radius: 50%; background: var(--rec); }
.thing { position: absolute; z-index: 3; width: 34%; max-width: 170px; right: 6%; bottom: -4%; filter: drop-shadow(0 18px 24px rgba(0,0,0,.6)); rotate: -8deg; }
.body { position: relative; z-index: 2; padding: 6px var(--gutter) 64px; }
.genre { margin: 0 0 6px; font: 1.375rem/1 var(--f-osd); color: var(--acc); letter-spacing: .03em; }
.title { margin: 0 0 16px; font-weight: 400; line-height: 1; letter-spacing: -.01em; overflow-wrap: anywhere; }
.hook { margin: 0 0 20px; max-width: 30rem; }
.does { margin: 0 0 26px; max-width: 30rem; opacity: .82; }
.facts { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; list-style: none; }
.facts li { padding: 9px 14px; border-radius: 999px; box-shadow: inset 0 0 0 1.5px currentColor; font: 700 .9375rem/1 var(--f-ui); }
.facts li.dead { background: var(--acc); color: var(--onAcc); box-shadow: none; }

/* Funkloch: horror skin, lens "Kein Netz" */
.s-funkloch { --bg: #040604; --fg: #D9E2CF; --acc: #9BEA7C; --onAcc: #071006; --ink: #F2EFE6; --rec: #FF4D3D; }
.s-funkloch .pic > img:not(.thing) { filter: saturate(.55) contrast(1.08); }
.s-funkloch .title { font: 700 clamp(3rem, 13vw, 6rem)/1 var(--f-horror); }
.s-funkloch .hook, .s-funkloch .does { font: 700 1.3rem/1.38 var(--f-horror); }
/* Babyfon: horror skin, lens "Nachtsicht" camcorder */
.s-babyfon { --bg: #040604; --fg: #D9E2CF; --acc: #9BEA7C; --onAcc: #071006; --ink: #D8FFC8; --rec: #FF3B30; background: linear-gradient(#040604, #061006); }
.s-babyfon .pic > img:not(.thing) { filter: grayscale(1) contrast(1.3) brightness(1.04); }
.s-babyfon .pic::before { content: ''; position: absolute; inset: 0; z-index: 1;  border-radius: inherit; background: #6CFF55; mix-blend-mode: multiply; opacity: .92; pointer-events: none; }
.s-babyfon .title { font: 700 clamp(3rem, 13vw, 6rem)/1 var(--f-horror); }
.s-babyfon .hook, .s-babyfon .does { font: 700 1.3rem/1.38 var(--f-horror); }
.batt { display: inline-block; width: 26px; height: 13px; border: 2px solid currentColor; border-radius: 2px; position: relative; vertical-align: -1px; }
.batt::before { content: ''; position: absolute; inset: 1px 9px 1px 1px; background: currentColor; }
.batt::after { content: ''; position: absolute; right: -5px; top: 2px; width: 3px; height: 5px; background: currentColor; }
/* Nie bremsen: anime skin, lens "Schnitt 12" */
.s-bremsen { --bg: #0A0D26; --fg: #FFFFFF; --acc: #FF7A66; --onAcc: #120D14; --ink: #FFFFFF; --rec: #FF7A66; }
.s-bremsen .title { margin-bottom: 26px; transform: skewX(-3deg) rotate(-1.5deg); font: clamp(2.6rem, 11vw, 5.2rem)/1.32 var(--f-anime-d); }
.s-bremsen .title span { background: #000; color: #fff; padding: 2px 16px 6px; box-shadow: 8px 8px 0 var(--acc); -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.s-bremsen .hook, .s-bremsen .does { font: 800 1.3rem/1.32 var(--f-anime); }
.s-bremsen .osd2 { font-family: var(--f-anime-d); font-size: 1rem; letter-spacing: .02em; }
.speed { position: absolute; inset: 0; overflow: hidden; z-index: 1; pointer-events: none; opacity: .28; background: repeating-conic-gradient(from 0deg at 50% 45%, transparent 0 4deg, rgba(255,255,255,.55) 4deg 4.6deg, transparent 4.6deg 9deg); -webkit-mask: radial-gradient(circle at 50% 45%, transparent 38%, #000 75%); mask: radial-gradient(circle at 50% 45%, transparent 38%, #000 75%); }
/* Mitfahrer: sci-fi skin, lens "Helmkamera" */
.s-mitfahrer { --bg: #05090F; --fg: #CFE9F2; --acc: #4FD6E8; --onAcc: #03161A; --ink: #8FF3FF; --rec: #FF5A4A; }
.s-mitfahrer .title { font: 600 clamp(2.8rem, 12vw, 5.6rem)/1 var(--f-scifi); letter-spacing: -.02em; }
.s-mitfahrer .hook, .s-mitfahrer .does { font: 600 1.25rem/1.38 var(--f-scifi); }
.s-mitfahrer .osd2 { font-family: var(--f-scifi); font-size: .875rem; letter-spacing: .12em; }
.hud { position: absolute; inset: 12px; z-index: 1; pointer-events: none; --hc: rgba(143, 243, 255, .8);
  background:
    linear-gradient(var(--hc), var(--hc)) top left / 28px 2px, linear-gradient(var(--hc), var(--hc)) top left / 2px 28px,
    linear-gradient(var(--hc), var(--hc)) top right / 28px 2px, linear-gradient(var(--hc), var(--hc)) top right / 2px 28px,
    linear-gradient(var(--hc), var(--hc)) bottom left / 28px 2px, linear-gradient(var(--hc), var(--hc)) bottom left / 2px 28px,
    linear-gradient(var(--hc), var(--hc)) bottom right / 28px 2px, linear-gradient(var(--hc), var(--hc)) bottom right / 2px 28px;
  background-repeat: no-repeat; }
.hud::after { content: ''; position: absolute; left: 50%; top: 46%; width: 44px; height: 44px; translate: -50% -50%; border: 1.5px solid var(--hc); border-radius: 50%; opacity: .6; }
/* Zwei Hälften: heist skin, lens "Kamera 3", two phones */
.s-zwei { --bg: #15110D; --fg: #F4E8D2; --acc: #E9A83A; --onAcc: #1A1208; --ink: #F4F1E8; --rec: #FF3B30; }
.s-zwei .title { font: clamp(2.6rem, 11.5vw, 5.4rem)/1 var(--f-heist-d); text-transform: none; }
.s-zwei .hook { display: inline-block; padding: 10px 14px; background: #F4E8D2; color: #15110D; transform: skewX(-1deg); font: 700 1.25rem/1.32 var(--f-heist); }
.s-zwei .does { font: 700 1.15rem/1.4 var(--f-heist); }
.pair { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 64px var(--gutter) 28px; }
.phone { position: relative; border-radius: 22px; overflow: hidden; aspect-ratio: 9 / 16; box-shadow: 0 0 0 5px #2A221A, 0 20px 40px rgba(0,0,0,.5); }
.phone img { width: 100%; height: 100%; object-fit: cover; }
.phone b { position: absolute; left: 10px; top: 10px; padding: 5px 9px; border-radius: 6px; background: #15110D; color: var(--acc); font: 1.125rem/1 var(--f-osd); font-weight: 400; letter-spacing: .03em; }
.phone:nth-child(2) { margin-top: 36px; }
.pair .osd2 { position: absolute; inset: 22px var(--gutter) auto; }
.duo-tag { display: inline-block; margin: 0 0 14px; padding: 7px 12px; border-radius: 8px; background: var(--acc); color: var(--onAcc); font: 700 .9375rem/1 var(--f-ui); }

@media (min-width: 900px) {
  .stories-head { padding: 128px 0 72px; }
  .story-inner { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: center; width: min(100% - 56px, 72rem); margin-inline: auto; gap: 64px; padding: 96px 0; }
  .pic { aspect-ratio: 2 / 3; border-radius: 6px; max-height: 760px; }
  .pic::after { display: none; }
  .thing { right: -12%; bottom: 6%; width: 40%; }
  .body { padding: 0; }
  .pair { padding: 0; gap: 18px; }
  .pair .osd2 { inset: -34px 0 auto; }
}

/* ---------- Lines: one sentence per screen ---------- */
.lines { padding-bottom: 40px; }
.strip { display: grid; grid-auto-flow: column; grid-auto-columns: 74%; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 8px var(--gutter) 22px; margin-top: 36px; scrollbar-width: thin; scrollbar-color: var(--smoke) transparent; overscroll-behavior-x: contain; }
.screen {
  position: relative; aspect-ratio: 9 / 16; border-radius: 22px; overflow: hidden; scroll-snap-align: center;
  background: var(--bg); color: var(--fg); display: flex; flex-direction: column; justify-content: flex-end; padding: 22px 20px;
}
.screen > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .62; }
.screen::before { content: ''; position: absolute; inset: 0; background: linear-gradient(to bottom, transparent 30%, var(--bg) 92%); }
.screen q, .screen cite { position: relative; }
.screen q { quotes: none; display: block; margin-bottom: 14px; }
.screen cite { font: 1.125rem/1 var(--f-osd); font-style: normal; color: var(--acc); letter-spacing: .03em; }
.screen.horror { --bg: #040604; --fg: #D9E2CF; --acc: #9BEA7C; }
.screen.horror q { font: 700 1.4rem/1.28 var(--f-horror); }
.screen.anime { --bg: #0A0D26; --fg: #fff; --acc: #FF7A66; }
.screen.anime q { font: 800 1.3rem/1.3 var(--f-anime); background: #000; padding: 10px 12px; transform: skewX(-3deg); box-shadow: 5px 5px 0 var(--acc); }
.screen.scifi { --bg: #05090F; --fg: #CFE9F2; --acc: #4FD6E8; }
.screen.scifi q { font: 600 1.3rem/1.32 var(--f-scifi); }
.screen.heist { --bg: #15110D; --fg: #15110D; --acc: #E9A83A; }
.screen.heist q { font: 700 1.25rem/1.3 var(--f-heist); background: #F4E8D2; padding: 10px 12px; transform: skewX(-1deg); }
@media (min-width: 760px) {
  .strip { grid-auto-flow: row; grid-template-columns: repeat(5, 1fr); overflow: visible; width: min(100% - 56px, 72rem); margin-inline: auto; padding: 8px 0 0; gap: 16px; }
  .screen { padding: 18px 16px; }
  .screen.horror q { font-size: 1.15rem; }
  .screen.anime q, .screen.scifi q, .screen.heist q { font-size: 1.05rem; }
}

/* ---------- The phone plays along ---------- */
.moves { margin: 44px 0 0; padding: 0; list-style: none; display: grid; gap: 14px; }
.move { display: grid; grid-template-columns: 84px 1fr; gap: 18px; align-items: center; padding: 6px 0; }
.move svg { border-radius: 22px; background: radial-gradient(circle at 50% 55%, rgba(255, 77, 61, .14), transparent 70%); }
.move svg { width: 84px; height: 84px; }
.move h3 { margin: 0 0 4px; font: 800 1.125rem/1.2 var(--f-brand); color: var(--mark); }
.move p { margin: 0; font-size: 1rem; line-height: 1.45; }
.move .in { display: block; margin-top: 6px; font: 1.125rem/1 var(--f-osd); color: var(--ash); letter-spacing: .02em; }
.more { margin: 26px 0 0; max-width: var(--measure); color: var(--ash); }
.ico .ln { fill: none; stroke: var(--bone); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.ico .red { fill: var(--onair); }
.ico .redln { fill: none; stroke: var(--onair); stroke-width: 2.4; stroke-linecap: round; }
.ico .fog { fill: rgba(244, 238, 230, .16); }
.move:hover .wave, .move:focus-within .wave { animation: ping 1.2s var(--ease-out) infinite; }
@keyframes ping { from { opacity: 1; } to { opacity: .1; } }
@media (min-width: 900px) {
  .moves { grid-template-columns: repeat(5, 1fr); }
  .moves { gap: 28px; }
  .move { grid-template-columns: 1fr; align-content: start; padding: 0; }
  .move svg { width: 120px; height: 120px; margin-bottom: 10px; }
}

/* ---------- Pro ---------- */
.idea { margin: 34px 0 0; max-width: 36rem; padding: 18px 20px; border-radius: 18px; background: var(--night); box-shadow: inset 0 0 0 1px rgba(244,238,230,.12); }
.idea p { margin: 0; }
.idea .q { font: 700 1.1875rem/1.4 var(--f-ui); color: var(--bone); }
.idea .q::after { content: ''; display: inline-block; width: 2px; height: 1.1em; margin-left: 3px; vertical-align: -3px; background: var(--onair); }
.idea .k { margin-bottom: 8px; font: 1.125rem/1 var(--f-osd); color: var(--ash); }
.styles { margin: 30px 0 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 10px; }
.styles li { padding: 12px 18px 13px; border-radius: 14px; line-height: 1; font-size: 1.5rem; }
.st-horror { background: #040604; color: #D9E2CF; font-family: var(--f-horror); font-weight: 700; box-shadow: inset 0 0 0 1.5px #9BEA7C; }
.st-anime { background: #000; color: #fff; font-family: var(--f-anime-d); box-shadow: 5px 5px 0 #FF7A66; transform: skewX(-3deg); }
.st-chat { background: #1C1522; color: #F8EEE8; font-family: var(--f-ui); font-weight: 700; box-shadow: inset 0 0 0 1.5px #F2AD84; border-radius: 22px 22px 22px 6px !important; }
.st-heist { background: #F4E8D2; color: #15110D; font-family: var(--f-heist-d); transform: skewX(-1deg); }
.st-romantasy { background: #241426; color: #FBEEF0; font-family: 'Gloock', Georgia, serif; box-shadow: inset 0 0 0 1.5px #F0A6B8; }
.st-scifi { background: #05090F; color: #CFE9F2; font-family: var(--f-scifi); font-weight: 600; box-shadow: inset 0 0 0 1.5px #4FD6E8; letter-spacing: .02em; }
.st-fantasy { background: #0E0A06; color: #F2E7D0; font-family: 'IM Fell Double Pica', Georgia, serif; box-shadow: inset 0 0 0 1.5px #DCAE5E; }
.free { margin: 26px 0 0; color: var(--ash); max-width: var(--measure); }

/* ---------- Soon ---------- */
.soon { padding: 104px 0 96px; background: radial-gradient(ellipse 70% 60% at 50% 0%, rgba(255, 77, 61, .14), transparent 70%), var(--deep); text-align: center; }
.soon .logo { --s: 64px; margin-bottom: 30px; }
.soon .logo .dot { animation: breathe 2s ease-in-out infinite; }
@keyframes breathe { 0%, 100% { box-shadow: 0 0 20px rgba(255, 77, 61, .35); } 50% { box-shadow: 0 0 34px rgba(255, 77, 61, .85); } }
.soon .lede { margin-inline: auto; }
.badge {
  display: inline-flex; align-items: center; gap: 12px; margin: 36px 0 0; padding: 10px 20px 10px 14px; min-height: 58px;
  border-radius: 13px; background: #000; color: #fff; box-shadow: inset 0 0 0 1.5px #A6A6A6; text-align: left;
}
.badge-ico { width: 30px; height: 30px; border-radius: 8px; border: 2px dashed #A6A6A6; flex: none; }
.badge small { display: block; font: 400 .75rem/1.1 var(--f-ui); letter-spacing: .01em; }
.badge strong { display: block; font: 700 1.3rem/1.1 var(--f-ui); }
.soon-acts { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 26px; }
.note { min-height: 1.5em; margin: 18px auto 0; max-width: 30rem; color: var(--ash); }

/* ---------- Footer ---------- */
.foot { padding: 36px 0 max(36px, env(safe-area-inset-bottom)); border-top: 1px solid rgba(244,238,230,.1); font-size: .9375rem; color: var(--ash); }
.foot .wrap { display: flex; flex-wrap: wrap; gap: 14px 28px; align-items: center; justify-content: space-between; }
.foot nav { display: flex; flex-wrap: wrap; gap: 6px 22px; }
.foot a { text-decoration: none; padding: 8px 0; }
.foot a:hover { color: var(--bone); text-decoration: underline; }
.foot .logo { --s: 22px; }

/* ---------- Legal pages ---------- */
.legal { padding: 28px 0 80px; }
.legal .wrap { max-width: 44rem; }
.legal header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 48px; }
.legal h1 { margin: 0 0 24px; font: 800 clamp(2rem, 7vw, 3rem)/1.05 var(--f-brand); color: var(--mark); }
.legal h2 { margin: 40px 0 10px; font: 800 1.25rem/1.25 var(--f-brand); color: var(--mark); }
.legal p, .legal li { max-width: 40rem; }
.legal address { font-style: normal; }
.gap { background: rgba(255, 179, 71, .16); color: var(--ember); padding: 1px 6px; border-radius: 5px; font-weight: 700; }
.warn { padding: 16px 18px; border-radius: 14px; background: rgba(255, 77, 61, .12); box-shadow: inset 0 0 0 1px rgba(255, 77, 61, .4); }

/* ---------- Motion off ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; }
  .grain { animation: none; }
  .flash.go { animation: none; }
  .soon .logo .dot { animation: none; }
}

/* Desktop: the scene gets a title on the left and the keys on the right. */
.side { display: none; }
@media (min-width: 1180px) {
  .side { display: block; position: absolute; z-index: 2; top: 50%; transform: translateY(-50%); width: min(300px, calc((100vw - (100svh - 112px) * 2 / 3) / 2 - 80px)); }
  .side-l { left: max(28px, calc(50% - (100svh - 112px) / 3 - 340px)); }
  .side-r { right: max(28px, calc(50% - (100svh - 112px) / 3 - 340px)); }
  .side-t { margin: 0 0 14px; font: 700 2.75rem/1 var(--f-horror); color: var(--fg); }
  .side-p { margin: 0; font: 1.0625rem/1.5 var(--f-ui); color: var(--ash); }
  .keys { margin: 0; padding: 0; list-style: none; display: grid; gap: 14px; font: 1.0625rem/1.3 var(--f-ui); color: var(--ash); }
  .keys li { display: flex; align-items: center; gap: 10px; }
  kbd { display: inline-grid; place-items: center; min-width: 38px; height: 38px; padding: 0 9px; border-radius: 9px; font: 1.375rem/1 var(--f-osd); color: var(--ink); background: rgba(242, 239, 230, .06); box-shadow: inset 0 0 0 1.5px rgba(242, 239, 230, .3), 0 2px 0 rgba(242, 239, 230, .18); }
}