/* NOCTRA — design tokens, base layout and shared components (MVP_PLAN.md §3) */

@font-face{font-family:"Montserrat";src:url(../assets/fonts/montserrat-latin-wght.woff2) format("woff2");font-weight:100 900;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Montserrat";src:url(../assets/fonts/montserrat-cyrillic-wght.woff2) format("woff2");font-weight:100 900;font-display:swap;unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"Cormorant";src:url(../assets/fonts/cormorant-latin-wght.woff2) format("woff2");font-weight:300 700;font-display:swap;unicode-range:U+0000-00FF,U+2000-206F}
@font-face{font-family:"Cormorant";src:url(../assets/fonts/cormorant-cyrillic-wght.woff2) format("woff2");font-weight:300 700;font-display:swap;unicode-range:U+0400-045F,U+0490-0491,U+2116}
@font-face{font-family:"Cormorant";font-style:italic;src:url(../assets/fonts/cormorant-latin-wght-italic.woff2) format("woff2");font-weight:300 700;font-display:swap;unicode-range:U+0000-00FF,U+2000-206F}
@font-face{font-family:"Cormorant";font-style:italic;src:url(../assets/fonts/cormorant-cyrillic-wght-italic.woff2) format("woff2");font-weight:300 700;font-display:swap;unicode-range:U+0400-045F,U+0490-0491,U+2116}
@font-face{font-family:"Plex Mono";src:url(../assets/fonts/plexmono-latin-300.woff2) format("woff2");font-weight:300;font-display:swap;unicode-range:U+0000-00FF,U+2000-206F}
@font-face{font-family:"Plex Mono";src:url(../assets/fonts/plexmono-cyrillic-300.woff2) format("woff2");font-weight:300;font-display:swap;unicode-range:U+0400-045F,U+0490-0491,U+2116}
@font-face{font-family:"Plex Mono";src:url(../assets/fonts/plexmono-latin-400.woff2) format("woff2");font-weight:400;font-display:swap;unicode-range:U+0000-00FF,U+2000-206F}
@font-face{font-family:"Plex Mono";src:url(../assets/fonts/plexmono-cyrillic-400.woff2) format("woff2");font-weight:400;font-display:swap;unicode-range:U+0400-045F,U+0490-0491,U+2116}

:root{
  --void:#000; --void-2:#060608;
  --glass:rgba(14,15,18,.72); --glass-border:rgba(255,255,255,.08); --glass-border-strong:rgba(255,255,255,.14);
  --text:#F2F2F4; --text-2:rgba(222,228,235,.78); --text-3:rgba(255,255,255,.55);
  --ice:#A4EFF9; --ice-glow:rgba(140,215,240,.55);
  --amber:#F7B064; --amber-deep:#E69E5D; --lavender:#D1C0EF; --violet:#8C7CFF; --mint:#B1EDE6;
  --white-glow:rgba(255,255,255,.65);
  --accent:var(--amber);

  --f-sans:"Montserrat",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-mono:"Plex Mono",ui-monospace,"SFMono-Regular",Menlo,monospace;
  --f-serif:"Cormorant","Times New Roman",serif;

  --ease:cubic-bezier(.65,0,.35,1);
  --ease-out:cubic-bezier(.22,1,.36,1);
  --gutter:24px;
  --safe-t:env(safe-area-inset-top,0px); --safe-b:env(safe-area-inset-bottom,0px);
  --safe-l:env(safe-area-inset-left,0px); --safe-r:env(safe-area-inset-right,0px);
  --app-h:100vh; /* set from JS (innerHeight) — stable on iOS */
  --hdr-h:64px; --dock-h:64px;
  --dock-space:calc(var(--dock-h) + 12px + var(--safe-b) + 12px); /* room tabs leave for the dock */
  --r-card:20px; --r-field:24px; --r-pill:999px;
}

*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;height:100%;background:#000;color:var(--text);overflow:hidden;overscroll-behavior:none}
body{position:fixed;inset:0;font-family:var(--f-sans);font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased;
  -webkit-tap-highlight-color:transparent;-webkit-text-size-adjust:100%;touch-action:none;user-select:none;-webkit-user-select:none}
button,input,select,textarea{font:inherit;color:inherit}
button{background:none;border:0;padding:0;cursor:pointer}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
:focus-visible{outline:1px solid rgba(255,255,255,.7);outline-offset:3px}
[hidden]{display:none!important}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* scroll containers: body is locked, these may pan vertically */
.scroll{overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;touch-action:pan-y;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.scroll::-webkit-scrollbar{display:none}
.selectable{user-select:text;-webkit-user-select:text}

/* ---------- typography (MVP_PLAN §3.2) ---------- */
.t-logo-hero{font:500 34px/1 var(--f-sans);letter-spacing:.22em;text-transform:uppercase}
.t-display{font:600 clamp(28px,9vw,35px)/1.05 var(--f-sans);letter-spacing:.01em;text-transform:uppercase;margin:0}
.t-title{font:300 20px/1.2 var(--f-sans);letter-spacing:.12em;text-transform:uppercase;margin:0}
.t-name{font:500 14px/1.2 var(--f-sans);letter-spacing:.16em;text-transform:uppercase}
.t-body{font:300 14.5px/1.62 var(--f-sans);color:var(--text-2)}
.t-label{font:400 11px/1.3 var(--f-sans);letter-spacing:.32em;text-transform:uppercase}
.t-mono{font:300 10px/1.5 var(--f-mono);letter-spacing:.14em;text-transform:uppercase}
.t-mono-xs{font:400 9px/1.6 var(--f-mono);letter-spacing:.2em;text-transform:uppercase}
.t-serif{font-family:var(--f-serif);font-weight:300}
.c-2{color:var(--text-2)} .c-3{color:var(--text-3)} .c-ice{color:var(--ice)} .c-amber{color:var(--amber)} .c-lav{color:var(--lavender)} .c-mint{color:var(--mint)}

/* ---------- background layers ---------- */
#sky{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
#grain{position:fixed;inset:-50%;z-index:60;pointer-events:none;opacity:.06;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1.4 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  animation:grain 1s steps(8) infinite}
@keyframes grain{0%{transform:translate(0,0)}25%{transform:translate(-3%,2%)}50%{transform:translate(2%,-3%)}75%{transform:translate(-2%,-1%)}100%{transform:translate(1%,3%)}}

/* ---------- moon (geometry from js/core/moon.js, looks per state here) ---------- */
.moon{position:fixed;left:0;top:0;width:100vw;height:100vw;z-index:1;pointer-events:none;transform-origin:50% 50%;
  transition:transform 1400ms var(--ease),opacity 900ms var(--ease);will-change:transform;color:#fff}
.moon.is-instant,.moon.is-instant *{transition:none!important}
.moon__body{position:absolute;inset:0;border-radius:50%;overflow:hidden;transition:filter 1400ms var(--ease)}
.moon__disk{position:absolute;inset:0;background:url(../assets/img/moon.webp) center/102.4% 102.4% no-repeat;filter:contrast(1.18)}
.moon.is-spin .moon__disk{animation:moonspin 200s linear infinite}
@keyframes moonspin{to{transform:rotate(360deg)}}
.moon__shade{position:absolute;inset:-4%;border-radius:50%;background:#000;opacity:0;filter:blur(calc(var(--moon-blur,6px)));
  transform:translateX(-120%);transition:transform 1400ms var(--ease),opacity 1400ms var(--ease)}
.moon__rim{position:absolute;inset:0;border-radius:50%;opacity:.5;
  box-shadow:0 0 var(--rim-blur,24px) var(--rim-spread,1px) currentColor,inset 0 0 calc(var(--rim-blur,24px) * .6) rgba(255,255,255,.18);
  -webkit-mask-image:var(--rim-mask,none);mask-image:var(--rim-mask,none);transition:opacity 1400ms var(--ease),color 1400ms var(--ease)}
.moon__pulsar{position:absolute;left:80%;top:9%;width:var(--pulsar,60px);height:var(--pulsar,60px);margin:calc(var(--pulsar,60px) / -2);opacity:0;
  background:
    radial-gradient(circle,#fff 0 4%,rgba(190,225,255,.9) 6%,rgba(160,210,255,.25) 18%,transparent 42%),
    linear-gradient(90deg,transparent 0 30%,rgba(200,230,255,.85) 50%,transparent 70% 100%) center/100% 3% no-repeat,
    linear-gradient(0deg,transparent 0 30%,rgba(200,230,255,.85) 50%,transparent 70% 100%) center/3% 100% no-repeat;
  transition:opacity 900ms var(--ease);animation:pulsar 3.2s ease-in-out infinite}
@keyframes pulsar{0%,100%{transform:scale(.85);filter:brightness(.9)}50%{transform:scale(1.08);filter:brightness(1.25)}}

.moon[data-state=welcome]{color:#fff} .moon[data-state=welcome] .moon__shade{opacity:1;transform:translateX(-58%)}
.moon[data-state=welcome] .moon__rim{opacity:.55;--rim-mask:linear-gradient(90deg,transparent 45%,#000 80%)}
.moon[data-state=welcome] .moon__pulsar{opacity:1}
.moon[data-state=manifesto]{color:#dfeaf5} .moon[data-state=manifesto] .moon__rim{opacity:.45}
.moon[data-state=profile]{color:#fff} .moon[data-state=profile] .moon__rim{opacity:.9;--rim-mask:linear-gradient(180deg,#000 0 18%,transparent 34%)}
.moon[data-state=profile] .moon__body{filter:brightness(.6) contrast(1.35)}
.moon[data-state=orbit]{color:var(--amber)} .moon[data-state=orbit] .moon__shade{opacity:.88;transform:translateX(-14%)}
.moon[data-state=orbit] .moon__rim{opacity:.35;--rim-mask:linear-gradient(135deg,#000 0 30%,transparent 55%)}
.moon[data-state=crew]{color:var(--amber)} .moon[data-state=crew] .moon__shade{opacity:.97;transform:translateX(8%)}
.moon[data-state=crew] .moon__rim{opacity:.9;--rim-mask:linear-gradient(225deg,transparent 40%,#000 75%)}
.moon[data-state=hq]{color:#fff} .moon[data-state=hq] .moon__shade{opacity:1;transform:translateX(-7%)}
.moon[data-state=hq] .moon__rim{opacity:1;--rim-mask:linear-gradient(90deg,transparent 72%,#000 96%)}
.moon[data-state=hq] .moon__body{filter:brightness(1.1) contrast(1.2)}
.moon[data-state=game]{color:#cfe2ff} .moon[data-state=game] .moon__rim{opacity:.6;--rim-mask:linear-gradient(180deg,#000 0 15%,transparent 30%)}
.moon[data-state=game] .moon__body{filter:brightness(.62) contrast(1.35)}
.moon[data-state=player] .moon__rim{opacity:.1} .moon[data-state=player] .moon__body{filter:brightness(.82) contrast(1.3)}
.moon[data-state=manifesto] .moon__body{filter:contrast(1.12)}
.moon[data-state=stage],.moon[data-state=hidden]{opacity:0}

/* ---------- header ---------- */
.hdr{position:fixed;left:0;right:0;top:0;z-index:30;display:flex;align-items:flex-start;justify-content:space-between;gap:12px;
  padding:max(20px,calc(var(--safe-t) + 8px)) calc(var(--gutter) + var(--safe-r)) 0 calc(var(--gutter) + var(--safe-l));pointer-events:none}
.hdr > *{pointer-events:auto}
.hdr__logo{display:block;height:13px;color:var(--text);opacity:1;transition:opacity 500ms var(--ease)}
.hdr__logo svg{height:100%;width:auto;display:block;overflow:visible}
.is-onboarding .hdr__logo{opacity:0;pointer-events:none}
.hdr__right{display:flex;align-items:flex-start;gap:14px}
.hdr__tele{text-align:right;color:var(--text-3);transition:opacity 300ms var(--ease)}
.hdr__tele:empty{display:none}
.hdr__ctl{display:flex;gap:2px;align-items:center}
.hdr__btn{min-width:32px;height:28px;padding:0 6px;display:grid;place-items:center;color:var(--text-3);font:400 10px/1 var(--f-mono);letter-spacing:.14em;border-radius:14px}
.hdr__btn:active{color:var(--text)}
.hdr__btn svg{width:16px;height:16px}
#btn-play:not([hidden]){animation:hdr-in .2s var(--ease)}
@keyframes hdr-in{from{opacity:0}}

/* ---------- logo svg ---------- */
.logo path,.logo circle{fill:none;stroke:currentColor;stroke-width:var(--logo-sw,1.2px);vector-effect:non-scaling-stroke;stroke-linecap:square}
.logo .fill{fill:currentColor;stroke:none}

/* ---------- screens & tabs ---------- */
#app{position:fixed;inset:0;z-index:10}
/* portrait only: manifest.json locks the installed Android app; iOS and browser tabs cannot lock, so a phone on its side gets this cover */
.rotate{display:none}
@media (orientation:landscape) and (max-height:540px) and (pointer:coarse){
  .rotate{position:fixed;inset:0;z-index:100;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;background:#050507;font:400 10px/1.5 var(--f-mono);letter-spacing:.2em;text-transform:uppercase;color:var(--text-2);text-align:center}
  .rotate svg{width:48px;height:48px;fill:none;stroke:var(--text);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
  .rotate p{margin:0;max-width:260px}
}
.screen,.tab{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity 300ms var(--ease),visibility 0s linear 300ms}
.screen.is-active,.tab.is-active{opacity:1;visibility:visible;transition:opacity 500ms var(--ease) 150ms,visibility 0s}
/* stagger: children marked .rise animate in when their screen/tab becomes active */
.rise{opacity:0;transform:translateY(12px);transition:opacity 500ms var(--ease-out),transform 500ms var(--ease-out)}
.is-active .rise{opacity:1;transform:none;transition-delay:calc(150ms + var(--i,0) * 60ms)}
.tab__inner{position:absolute;inset:0;padding:calc(max(20px,calc(var(--safe-t) + 8px)) + 52px) calc(var(--gutter) + var(--safe-r)) var(--dock-space) calc(var(--gutter) + var(--safe-l))}

/* ---------- dock (MVP_PLAN §3.6) ---------- */
.dock{position:fixed;z-index:40;left:calc(16px + var(--safe-l));right:calc(16px + var(--safe-r));bottom:calc(12px + var(--safe-b));height:var(--dock-h);
  max-width:480px;margin:0 auto;display:grid;grid-template-columns:repeat(5,1fr);border-radius:36px;
  background:rgba(14,15,18,.62);backdrop-filter:blur(28px) saturate(120%);-webkit-backdrop-filter:blur(28px) saturate(120%);
  border:1px solid var(--glass-border);box-shadow:0 10px 40px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.04);
  transform:translateY(calc(100% + 40px));opacity:0;transition:transform 600ms var(--ease-out),opacity 600ms var(--ease-out)}
.dock.is-shown{transform:none;opacity:1}
.dock__btn{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;color:rgba(255,255,255,.55);transition:color 300ms var(--ease)}
.dock__btn svg{width:22px;height:22px}
.dock__btn span{font:400 8.5px/1 var(--f-mono);letter-spacing:.2em;text-transform:uppercase}
.dock__btn::after{content:"";position:absolute;bottom:3px;left:50%;width:28px;height:2px;margin-left:-14px;border-radius:2px;background:var(--amber);
  box-shadow:0 0 10px var(--amber);opacity:0;transform:scaleX(.3);transition:opacity 300ms var(--ease),transform 300ms var(--ease)}
.dock__btn[aria-current=page]{color:var(--amber)}
.dock__btn[aria-current=page]::after{opacity:1;transform:none}
.dock__btn[aria-current=page] svg{filter:drop-shadow(0 0 6px rgba(247,176,100,.55))}
/* unread HQ news (PLAN_V7 §Б.3): amber dot on the icon */
.dock__btn.has-dot::before{content:"";position:absolute;top:10px;left:calc(50% + 8px);width:8px;height:8px;border-radius:50%;background:var(--amber);
  box-shadow:0 0 8px var(--amber),0 0 0 2px rgba(14,15,18,.9);animation:dock-dot 2.4s ease-in-out infinite}
@keyframes dock-dot{50%{box-shadow:0 0 14px var(--amber),0 0 0 2px rgba(14,15,18,.9)}}

/* «Новое в Штабе» — a glowing banner under the header on app open (tap → HQ, hides by itself) */
.news-banner{position:fixed;z-index:45;left:calc(16px + var(--safe-l));right:calc(16px + var(--safe-r));top:calc(max(20px,calc(var(--safe-t) + 8px)) + 48px);
  max-width:448px;margin:0 auto;display:flex;align-items:center;gap:12px;min-height:48px;padding:10px 18px;border-radius:var(--r-pill);text-align:left;
  background:rgba(20,16,10,.82);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);border:1px solid rgba(247,176,100,.7);color:var(--text);
  box-shadow:0 0 22px rgba(247,176,100,.4),inset 0 0 10px rgba(247,176,100,.15);font:400 12px/1.35 var(--f-sans);letter-spacing:.04em;
  opacity:0;transform:translateY(-12px);transition:opacity 400ms var(--ease),transform 400ms var(--ease)}
.news-banner.is-shown{opacity:1;transform:none}
.news-banner__dot{flex:none;width:8px;height:8px;border-radius:50%;background:var(--amber);box-shadow:0 0 10px var(--amber)}
.news-banner__text{overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}

/* ---------- components (MVP_PLAN §3.4) ---------- */
.glass{background:var(--glass);backdrop-filter:blur(32px) saturate(120%);-webkit-backdrop-filter:blur(32px) saturate(120%);border:1px solid var(--glass-border);border-radius:var(--r-card)}

.pill{--c:var(--ice);--glow:var(--ice-glow);position:relative;display:inline-flex;align-items:center;justify-content:center;gap:14px;
  width:54%;min-width:220px;max-width:340px;height:52px;padding:0 26px;border-radius:var(--r-pill);
  border:1px solid color-mix(in srgb,var(--c) 75%,transparent);background:rgba(8,12,16,.35);
  box-shadow:0 0 18px var(--glow),inset 0 0 12px color-mix(in srgb,var(--glow) 60%,transparent);
  font:400 11px/1 var(--f-sans);letter-spacing:.32em;text-transform:uppercase;color:var(--text);
  transition:transform 150ms var(--ease),box-shadow 300ms var(--ease),opacity 300ms var(--ease)}
.pill:active{transform:scale(.97);box-shadow:0 0 30px var(--glow),inset 0 0 18px var(--glow)}
.pill[aria-disabled=true]{opacity:.4}
.pill--white{--c:#fff;--glow:var(--white-glow)}
.pill--amber{--c:var(--amber);--glow:rgba(247,176,100,.45)}
.pill--lav{--c:var(--lavender);--glow:rgba(160,140,255,.4)}
.pill--quiet{--glow:transparent;box-shadow:none;border-color:var(--glass-border-strong)}
.pill--breathe{animation:breathe 3s ease-in-out infinite}
@keyframes breathe{0%,100%{box-shadow:0 0 12px color-mix(in srgb,var(--glow) 55%,transparent),inset 0 0 8px color-mix(in srgb,var(--glow) 40%,transparent)}50%{box-shadow:0 0 22px var(--glow),inset 0 0 14px color-mix(in srgb,var(--glow) 70%,transparent)}}
.pill svg{width:22px;height:22px;flex:none}

.field{position:relative;display:flex;align-items:center;height:52px;border-radius:var(--r-field);border:1px solid var(--glass-border-strong);
  background:rgba(255,255,255,.015);transition:border-color 250ms var(--ease),box-shadow 250ms var(--ease)}
.field:focus-within{border-color:rgba(255,255,255,.3);box-shadow:0 0 14px rgba(255,255,255,.08)}
.field.is-error{border-color:rgba(255,140,120,.7);animation:shake 360ms var(--ease)}
@keyframes shake{25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}
.field > svg{position:absolute;left:18px;width:22px;height:22px;color:rgba(255,255,255,.75);pointer-events:none}
.field input,.field button.field__btn{width:100%;height:100%;border:0;background:none;outline:none;padding:0 18px 0 56px;text-align:left;
  font:400 16px/1 var(--f-sans);letter-spacing:.14em;color:var(--text);text-transform:uppercase}
.field input::placeholder{color:rgba(255,255,255,.62);font-size:12px;letter-spacing:.24em}
.field__btn.is-empty{color:rgba(255,255,255,.62);font-size:12px;letter-spacing:.24em}

.chip{display:inline-flex;align-items:center;gap:8px;height:32px;padding:0 16px;border-radius:var(--r-pill);border:1px solid var(--glass-border-strong);
  font:400 10px/1 var(--f-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--text-2);white-space:nowrap}
.chip svg{width:13px;height:13px}
.chip--mint{color:var(--mint);border-color:color-mix(in srgb,var(--mint) 35%,transparent);background:rgba(120,220,200,.05)}
.chip.is-on{color:var(--text);border-color:var(--amber);box-shadow:0 0 12px rgba(247,176,100,.35),inset 0 0 8px rgba(247,176,100,.2)}

.btn-round{display:grid;place-items:center;flex:none;width:var(--s,32px);height:var(--s,32px);border-radius:50%;border:1px solid rgba(255,255,255,.6);color:var(--text);
  transition:transform 150ms var(--ease),box-shadow 300ms var(--ease)}
.btn-round:active{transform:scale(.92)}
.btn-round svg{width:42%;height:42%}
.btn-round--lg{--s:44px}

.divider{height:1px;background:linear-gradient(90deg,rgba(255,255,255,.12),rgba(255,255,255,.12));border:0;margin:0}

/* ---------- modal / sheet ---------- */
.modal-root{position:fixed;inset:0;z-index:50;pointer-events:none}
.modal{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:calc(var(--safe-t) + 16px) 16px calc(var(--safe-b) + 16px);
  pointer-events:auto;opacity:0;transition:opacity 350ms var(--ease)}
.modal.is-open{opacity:1}
.modal__scrim{position:absolute;inset:0;background:rgba(0,0,0,.55);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.modal__panel{position:relative;width:min(100%,420px);max-height:100%;transform:translateY(24px) scale(.98);transition:transform 450ms var(--ease-out)}
.modal.is-open .modal__panel{transform:none}
.modal--sheet{align-items:flex-end;padding:0}
.modal--sheet .modal__panel{width:100%;max-width:520px;transform:translateY(100%);border-radius:28px 28px 0 0;padding-bottom:var(--safe-b)}
.modal--sheet.is-open .modal__panel{transform:none}
.modal--full{padding:0}
.modal--full .modal__panel{width:100%;max-width:none;height:100%;border-radius:0}
.modal__close{position:absolute;top:14px;right:14px;z-index:2;width:40px;height:40px;display:grid;place-items:center;color:var(--text)}
/* full-screen panels start under the iPhone status bar: keep ✕ below the clock, where it can be tapped */
.modal--full .modal__close{top:calc(var(--safe-t) + 14px);right:calc(var(--safe-r) + 14px)}
.modal__close svg{width:22px;height:22px}

/* ---------- toast & flash ---------- */
.toast{position:fixed;left:50%;bottom:calc(var(--dock-space) + 8px);z-index:70;transform:translate(-50%,10px);opacity:0;pointer-events:none;
  padding:12px 18px;border-radius:var(--r-pill);background:rgba(14,15,18,.85);border:1px solid var(--glass-border-strong);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);font:400 10px/1.4 var(--f-mono);letter-spacing:.16em;text-transform:uppercase;
  color:var(--text);white-space:nowrap;max-width:calc(100vw - 32px);overflow:hidden;text-overflow:ellipsis;transition:opacity 300ms var(--ease),transform 300ms var(--ease)}
.toast.is-shown{opacity:1;transform:translate(-50%,0)}
.is-onboarding .toast{bottom:calc(var(--safe-b) + 24px)}
.flash{position:fixed;inset:0;z-index:80;pointer-events:none;opacity:0;
  background:radial-gradient(circle at var(--fx,50%) var(--fy,70%),rgba(255,255,255,.95),rgba(220,235,255,.5) 25%,transparent 70%)}
.flash.is-on{animation:flash 700ms var(--ease) forwards}
@keyframes flash{0%{opacity:0}30%{opacity:.9}100%{opacity:0}}

/* ---------- «Обновить приложение» (PLAN_V7 §В): a full screen above everything, nothing closes it ---------- */
.upd{position:fixed;inset:0;z-index:90;display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:calc(var(--safe-t) + 24px) calc(var(--safe-r) + 20px) calc(var(--safe-b) + 24px) calc(var(--safe-l) + 20px);
  background:radial-gradient(circle at 50% 36%,rgba(140,215,240,.14),rgba(140,215,240,.04) 34%,transparent 62%),#000;
  opacity:0;transition:opacity 500ms var(--ease);touch-action:none}
.upd.is-open{opacity:1}
.upd__moon{flex:none;width:min(46vw,200px);aspect-ratio:1;margin-bottom:-40px;border-radius:50%;
  background:url(../assets/img/moon.webp) center/102.4% 102.4% no-repeat;filter:contrast(1.18) brightness(.92);
  box-shadow:0 0 50px rgba(164,239,249,.32),0 0 140px rgba(140,215,240,.18);animation:updglow 4s ease-in-out infinite}
@keyframes updglow{50%{box-shadow:0 0 70px rgba(164,239,249,.45),0 0 180px rgba(140,215,240,.26)}}
.upd__card{position:relative;width:min(100%,360px);padding:56px 24px 28px;display:flex;flex-direction:column;align-items:center;gap:14px;
  text-align:center;transform:translateY(18px);transition:transform 600ms var(--ease-out)}
.upd.is-open .upd__card{transform:none}
.upd__title{margin:0;font:300 19px/1.3 var(--f-sans);letter-spacing:.14em;text-transform:uppercase}
.upd__text{margin:0 0 10px;font:300 13.5px/1.6 var(--f-sans);color:var(--text-2)}
.upd__go{width:100%;min-width:0}
.upd__go[aria-busy=true]{opacity:.6;animation:none}

/* ---------- desktop / tablet: keep the phone composition centred ---------- */
@media (min-width:600px){
  #app,.hdr{max-width:480px;margin:0 auto}
  .hdr{left:50%;transform:translateX(-50%);width:100%}
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:1ms!important;animation-iteration-count:1!important;transition-duration:1ms!important}
  #grain{animation:none}
}

/* ---------- tab explainer (PLAN_V15 А, js/intro.js; was the Crew intro of PLAN_V5 §2): inside the tab, so the header and the dock stay above it ---------- */
.tab-intro{position:absolute;inset:0;z-index:20;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;
  padding:0 calc(var(--gutter) + 12px);background:#000;text-align:center;transition:opacity 600ms var(--ease)}
.tab-intro.is-out{opacity:0;pointer-events:none}
.tab-intro__big{margin:0;max-width:16em;font:300 clamp(21px,6vw,25px)/1.3 var(--f-sans);letter-spacing:.04em;color:var(--text)}
.tab-intro__small{margin:0;max-width:24em;font:300 13px/1.5 var(--f-sans);color:var(--text-3)}
.tab-intro__off{position:absolute;left:50%;bottom:calc(var(--dock-space) + 8px);transform:translateX(-50%);width:auto;min-width:0;padding:0 24px;white-space:nowrap}