:root {
  /* Layer A — palette (hex only here) */
  --ink-900: #15100F;   /* warm near-black, cinematic base */
  --ink-800: #1e1815;
  --ink-700: #2a2320;
  --white:   #FBFAF2;   /* frost white — warm ivory used as the base "white" everywhere */
  --off:     #FBF6F1;   /* warm pastel cream */
  --sand:    #F3EBE2;   /* soft pastel sand */
  --gray-500:#7a6f68;   /* warm gray (text on light) */
  --gray-400:#b8aca2;   /* warm muted (text on dark) */
  --gray-200:#ece3da;   /* warm border */
  --coral:   #E0785A;   /* softened terracotta accent (from logo) */
  --coral-600:#C75E3F;
  --coral-700:#B4552F;  /* AA-contrast fill for white button text (4.7:1) */
  --brown:   #8B5E3C;
  --rust:    #A6552E;
  --umber:   #5A3B29;

  /* Layer B — semantic */
  --bg-dark: var(--ink-900);
  --bg-light: var(--white);
  --bg-muted: var(--off);
  --text-on-dark: var(--white);
  --text-on-light: var(--ink-900);
  --text-muted-dark: var(--gray-400);
  --text-muted-light: var(--gray-500);
  --accent: var(--coral);
  --accent-strong: var(--coral-600);
  --accent-deep: var(--coral-700);
  --border-light: var(--gray-200);

  /* type scale (fluid) */
  --step--1: clamp(0.83rem, 0.8rem + 0.15vw, 0.9rem);
  --step-0:  clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  --step-1:  clamp(1.33rem, 1.2rem + 0.6vw, 1.6rem);
  --step-2:  clamp(1.77rem, 1.5rem + 1.2vw, 2.4rem);
  --step-3:  clamp(2.37rem, 1.9rem + 2.2vw, 3.6rem);
  --step-4:  clamp(3.1rem, 2.2rem + 4.2vw, 5.5rem);

  /* spacing + radii */
  --space-s: 0.75rem; --space-m: 1.5rem; --space-l: 3rem; --space-xl: 6rem;
  --radius: 14px; --radius-lg: 22px;
  --container: 1200px;
  /* Manrope (self-hosted, weights 200/300/400) leads; system sans is the fallback.
     Weight roles: 200 = hero/accent, 300 = section headings/secondary, 400 = body/UI. */
  --font-sans: "Manrope", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
/* Self-hosted Manrope — only the three weights the brand system uses (woff2). */
@font-face{font-family:"Manrope";font-style:normal;font-weight:200;font-display:swap;
  src:url("../fonts/Manrope-Thin.woff2?v=3dfd78f8") format("woff2")}
@font-face{font-family:"Manrope";font-style:normal;font-weight:300;font-display:swap;
  src:url("../fonts/Manrope-Light.woff2?v=72009cf8") format("woff2")}
@font-face{font-family:"Manrope";font-style:normal;font-weight:400;font-display:swap;
  src:url("../fonts/Manrope-Regular.woff2?v=1f4c2cd5") format("woff2")}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;overscroll-behavior:none}
body{font-family:var(--font-sans);font-size:var(--step-0);line-height:1.6;font-weight:400;
  color:var(--text-on-light);background:var(--bg-light);-webkit-font-smoothing:antialiased;overscroll-behavior:none}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
/* Section headings — Manrope Light. Hero-level headings are dropped to Thin below. */
h1,h2,h3,h4{line-height:1.08;letter-spacing:-0.02em;font-weight:300}
.container{width:min(var(--container),92vw);margin-inline:auto}
.section{padding-block:var(--space-xl)}
.btn{display:inline-flex;align-items:center;gap:.5rem;padding:.9rem 1.5rem;
  border-radius:100px;font-weight:400;font-size:var(--step-0);cursor:pointer;
  transition:transform .15s ease, background .15s ease;border:1px solid transparent}
.btn:hover{transform:translateY(-2px)}
.btn--primary{background:var(--accent-deep);color:var(--white)}
.btn--primary:hover{background:var(--rust)}
.btn--ghost{background:transparent;border-color:currentColor}
.eyebrow{text-transform:uppercase;letter-spacing:.18em;font-size:var(--step--1);
  color:var(--accent);font-weight:400}
[hidden]{display:none!important}
.site-header{position:fixed;inset:0 0 auto 0;z-index:50;background:transparent;color:var(--white);
  border-bottom:1px solid transparent;
  transition:background .3s ease, color .3s ease, border-color .3s ease,
    transform .45s cubic-bezier(.22,.8,.24,1), opacity .35s ease}
.site-header.is-solid{background:rgba(20,14,11,.92);color:var(--white);
  border-bottom:1px solid rgba(255,255,255,.08);backdrop-filter:saturate(1.15) blur(6px);
  -webkit-backdrop-filter:saturate(1.15) blur(6px)}
.site-header.is-hidden{transform:translateY(-100%);opacity:0;pointer-events:none}
.site-header .container{width:100%;max-width:none;padding-inline:6vw}
.site-header__row{display:flex;align-items:center;justify-content:space-between;padding-block:1rem}
.brand{display:flex;align-items:center;gap:.6rem;color:inherit;font-weight:400;letter-spacing:-0.01em}
.brand__word{font-size:1.15rem}
.site-nav{display:flex;align-items:center;gap:1.6rem}
.site-nav__link{color:inherit;font-weight:400;font-size:var(--step--1);opacity:.85;transition:opacity .15s ease}
.site-nav__link:hover{opacity:1;text-decoration:underline;text-underline-offset:4px;text-decoration-color:var(--accent)}

.planets{background:var(--ink-900)}
@media(min-width:821px){
  .planets{margin-top:-100vh}    /* planet I slides over the film's last screen */
  /* extra CONTENT slot (not padding — sticky children are constrained to the
     content box) keeps The System pinned while Mars slides over it */
  .planets::after{content:"";display:block;height:100vh}
  .cine--mars{margin-top:-100vh} /* Mars slides over The System */
}
/* deck parallax: each block pins and the next slides over it */
.cb{position:sticky;top:0;min-height:100vh;display:grid;grid-template-columns:1fr 1fr;align-items:stretch;color:var(--white);overflow:hidden;background:var(--ink-900)}
.cb__media{position:absolute;inset:0;z-index:0}
.cb__media img,.cb__media video{width:100%;height:100%;object-fit:cover}
/* soft top edge while sliding over the previous block: an alpha mask makes the
   incoming block genuinely transparent at its top, so the pinned block below
   shows through — a real crossfade, not a colored band */
/* thin top mask softens the incoming block's moving edge; the block being
   covered is dimmed into ink by the scroll-driven --covered overlay below,
   so nothing ghosts through at rest */
.planets .cb,.planets .system{
  -webkit-mask-image:linear-gradient(180deg,transparent,rgb(0 0 0) 14vh);
  mask-image:linear-gradient(180deg,transparent,rgb(0 0 0) 14vh)}
.planets .cb::after,.planets .system::after{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;
  background:var(--ink-900);opacity:calc(var(--covered, 0) * 1)}
/* keep each planet in frame when cover-crop trims the sides */
.planets .cb:nth-of-type(1) .cb__media video{object-position:72% 50%}
.planets .cb:nth-of-type(2) .cb__media video{object-position:28% 50%}
.planets .cb:nth-of-type(3) .cb__media video{object-position:72% 50%}
.cb__text{position:relative;z-index:2;display:flex;flex-direction:column;justify-content:center;gap:.9rem;
  padding:clamp(2rem,6vw,6rem);max-width:46ch}
.cb__text h2{font-size:var(--step-3);font-weight:200}          /* Thin heading */
.cb__body{color:var(--gray-400);font-weight:300;max-width:38ch}
.cb__link{color:var(--accent);font-weight:400;margin-top:.4rem;width:max-content}
.cb__link:hover{text-decoration:underline;text-underline-offset:4px}
/* left variant: text left over a scrim that fades to the right */
.cb--left .cb__text{grid-column:1}
.cb--left::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(90deg, rgba(18,12,10,.86) 42%, transparent 78%)}
/* right variant mirrors it */
.cb--right .cb__text{grid-column:2;justify-self:end;text-align:right;align-items:flex-end}
.cb--right::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(270deg, rgba(18,12,10,.86) 42%, transparent 78%)}
/* scroll reveal */
@media (prefers-reduced-motion: no-preference){
  .cb.is-armed .cb__text{opacity:0;transform:translateY(26px)}
  .cb.is-armed.is-in .cb__text{opacity:1;transform:none;
    transition:opacity .8s ease, transform .9s cubic-bezier(.22,.8,.24,1)}
}
@media(max-width:820px){
  .cb{grid-template-columns:1fr}
  .cb--right .cb__text,.cb--left .cb__text{grid-column:1;text-align:left;align-items:flex-start}
  .cb--right::before{background:linear-gradient(90deg, rgba(18,12,10,.86) 42%, transparent 92%)}
  /* no deck parallax on phones — plain stacked sections */
  .planets .cb,.system{position:relative;top:auto;min-height:88vh}
}

.system{position:sticky;top:0;min-height:100vh;display:flex;align-items:center;justify-content:center;
  text-align:center;color:var(--white);overflow:hidden;background:var(--ink-900)}
.system__media{position:absolute;inset:0;z-index:0}
.system__media img,.system__media video{width:100%;height:100%;object-fit:cover;opacity:.7}
.system__inner{position:relative;z-index:2;max-width:40ch}
.system__inner h2{font-size:var(--step-4);font-weight:200;margin:.4rem 0}
.system__sub{color:var(--gray-400);font-weight:300;margin-inline:auto;max-width:44ch}
@media (prefers-reduced-motion: no-preference){
  .system.is-armed .system__inner{opacity:0;transform:translateY(26px)}
  .system.is-armed.is-in .system__inner{opacity:1;transform:none;
    transition:opacity .8s ease, transform .9s cubic-bezier(.22,.8,.24,1)}
}

.finale{position:relative;background:var(--ink-900);color:var(--white);overflow:hidden}
.finale__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;
  opacity:.6;mix-blend-mode:screen;pointer-events:none}
.cta{background:transparent;color:var(--white);text-align:center;position:relative;z-index:1}
.cta__inner{position:relative;z-index:1}
.cta h2{font-size:var(--step-4);font-weight:200;max-width:18ch;margin:0 auto 2rem}
.cta__actions{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap}
.cta__mail{display:inline-block;margin-top:1.6rem;color:var(--gray-400);font-weight:300;
  letter-spacing:.04em;text-decoration:none;border-bottom:1px solid rgba(224,120,90,.35);
  padding-bottom:2px;transition:color .2s ease, border-color .2s ease}
.cta__mail:hover{color:var(--accent);border-color:var(--accent)}
.site-footer{background:transparent;color:var(--white);padding-block:var(--space-l);position:relative;z-index:1}
.site-footer .container{width:100%;max-width:none;padding-inline:6vw}  /* align with the header */
.site-footer__row{display:flex;flex-wrap:wrap;gap:1rem;align-items:center;justify-content:space-between}
.site-footer__links{display:flex;gap:1.5rem}
.site-footer__company{display:block;margin-top:1.4rem;padding-top:1.2rem;padding-inline:clamp(16px,4vw,40px);
  text-align:center;border-top:1px solid rgba(255,255,255,.12);color:var(--gray-400);font-style:normal;font-size:var(--step--1)}
@media(max-width:720px){
  .site-footer__row{flex-direction:column;align-items:center;text-align:center;gap:1.1rem}
  .site-footer__links{justify-content:center}
}

/* Legal pages (privacy, terms) — static content over the light frost body */
.legal__back{color:var(--accent);font-weight:400;display:inline-block;margin-bottom:1.5rem}
.legal h1{font-size:var(--step-3);margin-bottom:.5rem}
.legal__updated{color:var(--text-muted-light);margin-bottom:2rem}
.legal__body{max-width:70ch}.legal__body h2{font-size:var(--step-1);margin-block:1.5rem .5rem}
.legal__body p{margin-bottom:1rem;color:var(--text-muted-light)}
.legal__body ul,.legal__body ol{padding-left:1.4em;margin-bottom:1rem}
.legal__body li{margin-bottom:.4rem;color:var(--text-muted-light)}

/* logo mark */
.brandmark{display:inline-flex;width:26px;height:26px;color:inherit;flex:none;align-items:center}
.brandmark--sm{width:14px;height:14px}   /* small mark for the terminal bar */
.brandmark svg{width:100%;height:100%}
.brandmark .chev1,.brandmark .chev2{transform-box:fill-box;transform-origin:center}
@media (prefers-reduced-motion: no-preference){
  .brand:hover .brandmark .chev1,.brand.is-greet .brandmark .chev1{animation:chevRise 1.9s ease-out infinite}
  .brand:hover .brandmark .chev2,.brand.is-greet .brandmark .chev2{animation:chevRise 1.9s ease-out infinite .32s}
}
@keyframes chevRise{
  0%{opacity:0;transform:translateY(4px)}
  25%{opacity:1;transform:translateY(0)}
  70%{opacity:1;transform:translateY(-2px)}
  100%{opacity:0;transform:translateY(-4px)}
}
/* header Telegram button: compact pill (matches the header CTA sizing).
   Over the transparent header it goes white for contrast; on the solid dark
   header and in the mobile dropdown it returns to the coral CTA. */
.site-nav__tg{padding:.45rem 1rem;font-size:var(--step--1)}
.site-header .site-nav__tg{background:var(--white);color:var(--text-on-light)}
.site-header .site-nav__tg:hover{background:var(--sand)}
.site-header.is-solid .site-nav__tg,.site-header.nav-open .site-nav__tg{background:var(--accent-deep);color:var(--white)}
.site-header.is-solid .site-nav__tg:hover,.site-header.nav-open .site-nav__tg:hover{background:var(--rust)}
/* mobile nav */
.nav-toggle{display:none;appearance:none;-webkit-appearance:none;background:none;border:0;cursor:pointer;
  width:40px;height:34px;padding:6px 8px;flex-direction:column;justify-content:center;gap:6px;color:inherit}
.nav-toggle span{display:block;height:2px;width:100%;background:currentColor;border-radius:2px;
  transition:transform .25s ease}
@media(max-width:720px){
  .nav-toggle{display:inline-flex}
  .site-nav{display:flex;position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:center;
    text-align:center;gap:1.3rem;padding:1.4rem 6vw 1.7rem;background:rgba(20,14,11,.96);color:var(--white);
    backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
    border-bottom:1px solid rgba(224,120,90,.35);
    opacity:0;transform:translateY(-10px);visibility:hidden;pointer-events:none;
    transition:opacity .3s ease, transform .3s ease, visibility 0s linear .3s}
  .site-nav__link{font-size:var(--step-0)}
  .site-nav .site-nav__tg{width:min(260px,86%);padding:.85rem 1.2rem;font-size:var(--step-0);justify-content:center}
  .site-header.nav-open{background:rgba(20,14,11,.96)}
  .site-header.nav-open .site-nav{opacity:1;transform:none;visibility:visible;pointer-events:auto;
    transition:opacity .3s ease, transform .3s ease}
  .site-header.nav-open .nav-toggle span:first-child{transform:translateY(4px) rotate(45deg)}
  .site-header.nav-open .nav-toggle span:last-child{transform:translateY(-4px) rotate(-45deg)}
}
/* legal pages: container matches the header width; body copy stays at 70ch */
.legal .container{width:100%;max-width:none;padding-inline:6vw}
/* the cinematic page lives on ink — hairline gaps between sections must be dark */
body{background:var(--bg-dark)}
.cine{background:var(--ink-900);color:var(--text-on-dark)}
.cine__pin{height:700vh;position:relative}
.cine__stage{position:sticky;top:0;height:100vh;overflow:hidden;display:grid;place-items:center}
.cine__poster,.cine__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cine__video{opacity:0;transition:opacity .6s ease}
.cine.is-live .cine__video{opacity:1}
.cine__cue{position:absolute;bottom:1.6rem;left:50%;translate:-50%;z-index:2;color:var(--white);opacity:.8}
.scroller{display:block;width:26px;height:42px;border:2px solid currentColor;border-radius:14px;position:relative;opacity:.9}
.scroller__dot{position:absolute;left:50%;top:8px;width:4px;height:8px;border-radius:2px;background:currentColor;transform:translate(-50%,0);animation:scrollDot 1.8s ease-in-out infinite}
@keyframes scrollDot{0%{opacity:0;transform:translate(-50%,0)}20%{opacity:1}70%{opacity:1;transform:translate(-50%,14px)}100%{opacity:0;transform:translate(-50%,16px)}}
.cine.is-live .cine__cue{opacity:.55}
/* the covered film melts into ink as planet I slides over (driven by --covered) */
[data-cine-header] .cine__stage::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:var(--ink-900);opacity:var(--covered,0)}
/* reduced-motion / mobile: stack scenes, cross-fade on scroll, no pin */
.cine.is-reduced .cine__pin{height:auto}
.cine.is-reduced .cine__stage{position:relative;height:auto;display:block}
.cine.is-reduced .cine__video{display:none}
@media (prefers-reduced-motion: reduce){
  .scroller__dot{animation:none}
  .brandmark__tile{animation:none;opacity:1;transform:none}
  .price::before{animation:none}
}

.cine--mars .cine__pin{height:400vh}
/* mask the SECTION (not the stage): the section's own ink background is what
   slides over The System — fading the whole element makes a true crossfade */
.cine--mars{background:transparent;
  -webkit-mask-image:linear-gradient(180deg,transparent,rgb(0 0 0) 14vh);
  mask-image:linear-gradient(180deg,transparent,rgb(0 0 0) 14vh)}
/* organic hand-off into the dark finale: bottom of the Mars stage melts into ink */
.cine--mars .cine__stage::after{content:"";position:absolute;left:0;right:0;bottom:0;height:20vh;
  background:linear-gradient(180deg, transparent, var(--ink-900));pointer-events:none;z-index:1}

/* Mission-log terminal — fixed bottom-right of the cinematic stage */
.term{position:absolute;right:clamp(16px,4vw,40px);bottom:clamp(16px,5vh,44px);
  width:min(460px,74vw);z-index:3;color:var(--white);overflow:hidden;
  background:rgba(20,14,11,.72);backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);
  border:1px solid rgba(224,120,90,.45);border-radius:11px;
  box-shadow:0 22px 60px rgba(0,0,0,.5), inset 0 0 44px rgba(224,120,90,.05);
  font-family:"SFMono-Regular",Menlo,Consolas,monospace;
  transform:translateX(120%)}
.term.is-in{transform:translateX(0);transition:transform .9s cubic-bezier(.22,.8,.24,1)}
.term__bar{display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:.5rem .75rem;border-bottom:1px solid rgba(224,120,90,.4);background:rgba(224,120,90,.06)}
.term__brand{display:inline-flex;align-items:center;gap:.4rem;font-size:.62rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--accent)}
.term__status{font-size:.58rem;letter-spacing:.1em;color:var(--gray-400);white-space:nowrap}
/* tabs: the divider line is drawn by each tab's bottom border + a flex filler,
   so the active tab simply has a transparent bottom edge and merges with the
   body — no opaque cover-ups, identical on any backdrop brightness */
.term__tabs{display:flex;padding:.55rem 0 0}
.term__tabs::before{content:"";width:.75rem;flex:none;border-bottom:1px solid rgba(224,120,90,.4)}
.term__tabs::after{content:"";flex:1;border-bottom:1px solid rgba(224,120,90,.4)}
.term__tab{appearance:none;-webkit-appearance:none;font:inherit;font-size:.58rem;letter-spacing:.05em;
  padding:.4rem .6rem;border-radius:6px 6px 0 0;cursor:pointer;
  color:rgba(255,255,255,.34);background:rgba(255,255,255,.03);white-space:nowrap;
  border:1px solid transparent;border-bottom:1px solid rgba(224,120,90,.4);
  transition:color .3s ease, background .3s ease}
.term__tab:hover{color:var(--white)}
.term__tab.is-seen{color:rgba(255,255,255,.55)}
.term__tab.is-on{color:var(--white);background:transparent;
  border-color:rgba(224,120,90,.4);border-bottom-color:transparent}
.term__body{position:relative;padding:.9rem 1rem 1rem;min-height:116px}
.term__scene{opacity:0;transform:translateY(8px);pointer-events:none;
  position:absolute;inset:.9rem 1rem auto;transition:opacity .45s ease, transform .5s ease}
.term__scene.is-on{opacity:1;transform:none;pointer-events:auto;position:static}
.term__eyebrow{font-size:.58rem;letter-spacing:.2em;text-transform:uppercase;color:var(--accent);margin-bottom:.5rem}
.term__text{font-family:var(--font-sans);font-size:clamp(1rem,1.4vw,1.2rem);line-height:1.3;font-weight:400}
.term__cursor{display:inline-block;width:.5ch;margin-left:1px;background:var(--accent);color:transparent;
  animation:termBlink 1s steps(1) infinite}
@keyframes termBlink{50%{opacity:0}}
.term__menu{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem .7rem;margin-top:.9rem;padding:.7rem 1rem .9rem;
  border-top:1px dashed rgba(224,120,90,.25);font-size:.72rem}
.term__menu a{color:var(--accent);text-decoration:none}
.term__menu a:not(:last-child)::after{content:"";display:inline-block;width:4px;height:4px;border-radius:50%;
  background:rgba(224,120,90,.5);margin-left:.7rem;vertical-align:middle}
.term__menu a:hover{text-decoration:underline;text-underline-offset:3px}
.term__menu a.term__tg{color:var(--white)}
.term__menu a.term__gamelink{color:var(--white);border:1px solid rgba(224,120,90,.6);
  background:rgba(224,120,90,.16);padding:.15rem .6rem;border-radius:999px}
.term__menu a.term__gamelink:hover{background:rgba(224,120,90,.3);text-decoration:none}
/* reduced-motion / stacked fallback */
.cine.is-reduced .term{position:relative;right:auto;bottom:auto;left:auto;margin:2rem auto;
  width:min(460px,90vw);transform:none}
.cine.is-reduced .term__scene{position:static;opacity:1;transform:none}
@media (prefers-reduced-motion: reduce){.term__cursor{animation:none}}
@media(max-width:640px){.term{left:12px;right:12px;bottom:12px;width:auto}}

/* Terminal game mode ("Mission: Mars") */
html.has-game{overflow:hidden}
.term.is-game{width:min(920px,92vw);display:flex;flex-direction:column;transition:width .45s ease}
.term.is-game .term__tabs,.term.is-game .term__body,.term.is-game .term__menu{display:none}
.term__close{display:none;appearance:none;-webkit-appearance:none;background:none;border:0;
  color:var(--gray-400);font:inherit;font-size:1.4rem;line-height:1;cursor:pointer;
  padding:.3rem .7rem;margin:-.3rem -.4rem -.3rem 0}
.term__close:hover{color:var(--white)}
.term.is-game .term__close{display:inline-block}
.term.is-game .term__bar{justify-content:flex-start}
.term.is-game .term__status{margin-left:auto;margin-right:.9rem}
.tgame{position:relative;display:none;flex-direction:column;height:min(62vh,560px)}
.term.is-game .tgame{display:flex}
.tgame__canvas{flex:1;width:100%;min-height:0;display:block;touch-action:none}
.tgame__hud{display:flex;align-items:center;gap:1rem;padding:.3rem 1rem;
  font-size:.62rem;letter-spacing:.12em;color:var(--gray-400)}
.tgame__score{flex:1}
.tgame__prog{flex:1;text-align:right}
.tgame__lives{display:inline-flex;align-items:center;gap:.3rem}
.tgame__life svg{display:block;fill:var(--accent);stroke:var(--accent);stroke-width:1.4;stroke-linejoin:round}
.tgame__life.is-lost svg{fill:none;stroke:rgba(224,120,90,.45)}
.tgame__controls{display:flex;justify-content:center;gap:1.4rem;padding:.55rem 0 .8rem}
.tgame__btn{appearance:none;-webkit-appearance:none;font:inherit;cursor:pointer;
  width:52px;height:52px;border-radius:50%;border:1px solid rgba(224,120,90,.45);
  background:rgba(255,255,255,.04);color:var(--accent);display:inline-flex;
  align-items:center;justify-content:center;user-select:none;-webkit-user-select:none;
  touch-action:none;position:relative}
.tgame__btn:active{background:rgba(224,120,90,.18)}
.tgame__fire{border-color:var(--accent);color:var(--white)}
.tgame__fire.is-cd::after{content:"";position:absolute;inset:-1px;border-radius:50%;
  border:2px solid rgba(224,120,90,.9);animation:tgameReload 1s linear forwards}
@keyframes tgameReload{0%{clip-path:inset(0 0 100% 0)}100%{clip-path:inset(0 0 0 0)}}
.tgame__screen{position:absolute;inset:0;display:none;flex-direction:column;align-items:center;
  justify-content:center;gap:.8rem;text-align:center;background:rgba(20,14,11,.78);z-index:2;padding:1rem}
.tgame__screen.is-on{display:flex}
.tgame__title{font-size:.95rem;letter-spacing:.22em;color:var(--accent)}
.tgame__sub{font-family:var(--font-sans);font-size:.9rem;font-weight:400;color:var(--gray-400);max-width:36ch}
.tgame__start{appearance:none;-webkit-appearance:none;font:inherit;cursor:pointer;
  padding:.6rem 1.6rem;border-radius:999px;border:1px solid var(--accent);
  background:rgba(224,120,90,.14);color:var(--white);letter-spacing:.18em}
.tgame__start:hover{background:rgba(224,120,90,.28)}
@media(max-width:640px){
  .term.is-game{top:70px;bottom:12px}
  .term.is-game .tgame{height:auto;flex:1;min-height:0}
}

/* ---- phone: one swipe, one line ------------------------------------------
   Snap stops exist only here — a mouse wheel is fine-grained enough that the
   desktop scrub needs no help. Markers are absolutely positioned and 1px tall,
   so they add snap positions without touching the layout. Pin heights are set
   from the engine, one screen per beat. */
.cine__beats{display:none}
@media (max-width: 720px){
  /* mandatory, but armed by the engine only while a film is on screen; left on
     past the last beat it would haul the reader back into the film */
  html.is-snapping{scroll-snap-type:y mandatory}
  .cine__stage{height:100svh}
  .cine__beats{display:block}
  .cine__beat{position:absolute;left:0;width:1px;height:1px;pointer-events:none;
    scroll-snap-align:start;scroll-snap-stop:always}
  /* the block after each film is a snap target too, so the swipe that leaves a
     film lands somewhere instead of fighting the last beat */
  .planets,.finale{scroll-snap-align:start}
}

/* Neither control takes a separator dot: they are buttons, not list items.
   Has to apply everywhere, not just on phones — :last-child is structural, so
   hiding Info on desktop does NOT hand the "last" slot back to the game
   button, and the dot would sit inside its border. */
.term__menu a.term__gamelink::after,
.term__menu a.term__info::after{display:none}

/* Info: a way straight out of the film. On a phone the log sits four swipes
   deep, so the menu offers an exit; the desktop menu is left as it was.
   Matches the game button, and suppresses the dot separator that would now
   trail the game button since it is no longer last in the row. */
.term__info{display:none}
@media (max-width: 720px){
  .term__menu a.term__info{display:inline-block;color:var(--white);
    border:1px solid rgba(224,120,90,.6);background:rgba(224,120,90,.16);
    padding:.15rem .6rem;border-radius:999px}
  .term__menu a.term__info:hover{background:rgba(224,120,90,.3);text-decoration:none}
}