: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}
}