/* ============================================================
   В ТЕМУ! — base.css
   Design tokens, font, fullscreen CRT tube, screen effects.
   The old plastic monitor case is gone — the tube itself now
   fills the whole viewport and scales responsively.
   ============================================================ */

@font-face {
  font-family: 'Press Start 2P';
  font-style: normal; font-weight: 400; font-display: block;
  src: url('../assets/fonts/ps2p-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Press Start 2P';
  font-style: normal; font-weight: 400; font-display: block;
  src: url('../assets/fonts/ps2p-cyrillic-ext.woff2') format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: 'Press Start 2P';
  font-style: normal; font-weight: 400; font-display: block;
  src: url('../assets/fonts/ps2p-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215;
}

:root {
  /* the tube */
  --screen:       #0e130c;
  --panel:        #161c12;
  --panel-2:      #1d2417;
  --panel-3:      #242c1c;
  /* inks */
  --cream:        #eee1b3;
  --cream-dark:   #cdbd8b;
  --khaki:        #d3c493;
  --khaki-hi:     #e9dcae;
  --khaki-dark:   #b3a476;
  --ink:          #1b1914;
  --dim:          #7a7358;
  /* accents */
  --green:        #9dc157;
  --green-bright: #c8ec84;
  --green-deep:   #55702f;
  --green-text:   #a9c86f;
  --red:          #c8402f;
  --red-bright:   #e06a50;
  --blue:         #4a76b4;
  --blue-bright:  #7fa8de;
  --gold:         #e9b840;
  --gold-bright:  #f6d87c;

  --px-font: 'Press Start 2P', 'Courier New', monospace;
}

* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body { height: 100%; overflow: hidden; }

body {
  font-family: var(--px-font);
  background: var(--screen);
  color: var(--cream);
  -webkit-font-smoothing: none;
  user-select: none;
  -webkit-user-select: none;
}

img { image-rendering: pixelated; }
canvas { image-rendering: pixelated; }
button, .tile, .mbtn, .cbtn, .ptoggle { touch-action: manipulation; }

/* ============================================================
   The tube — fills the whole viewport, background scales
   ============================================================ */

#screen {
  position: fixed; inset: 0;
  background:
    radial-gradient(130% 130% at 50% 42%, #141a10 0%, var(--screen) 55%, #090c07 100%);
  box-shadow: inset 0 0 90px 20px rgba(0,0,0,.7);
  overflow: hidden;
}

/* full-screen views inside the tube; the --tg-* vars keep the UI clear
   of the status bar + Telegram buttons in Mini App fullscreen mode */
.view {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center;
  padding:
    max(clamp(14px, 2.6vh, 30px), env(safe-area-inset-top),
        calc(var(--tg-safe-area-inset-top, 0px) + var(--tg-content-safe-area-inset-top, 0px)))
    max(clamp(12px, 3.5vw, 44px), env(safe-area-inset-right),
        var(--tg-safe-area-inset-right, 0px))
    max(12px, env(safe-area-inset-bottom), var(--tg-safe-area-inset-bottom, 0px))
    max(clamp(12px, 3.5vw, 44px), env(safe-area-inset-left),
        var(--tg-safe-area-inset-left, 0px));
  z-index: 2;
}
.view[hidden] { display: none; }

/* ============================================================
   CRT overlays
   ============================================================ */

/* kept deliberately faint — dark lines over the khaki tiles murder
   readability, so the tube look comes mostly from vignette + glass */
#scanlines {
  position: absolute; inset: 0; z-index: 40; pointer-events: none;
  background:
    repeating-linear-gradient(0deg,
      rgba(0,0,0,.10) 0px, rgba(0,0,0,.10) 1px,
      transparent 1px, transparent 4px),
    repeating-linear-gradient(90deg,
      rgba(255,0,60,.012) 0px, rgba(255,0,60,.012) 1px,
      rgba(0,255,120,.010) 1px, rgba(0,255,120,.010) 2px,
      rgba(60,80,255,.012) 2px, rgba(60,80,255,.012) 3px);
  animation: crt-flicker 4s steps(60) infinite;
}
body.no-crt #scanlines, body.no-crt #vignette, body.no-crt #glass { display: none; }

/* small screens: even lighter lines, no RGB mask, no flicker repaints */
@media (max-width: 700px), (pointer: coarse) {
  #scanlines {
    background: repeating-linear-gradient(0deg,
      rgba(0,0,0,.06) 0px, rgba(0,0,0,.06) 1px,
      transparent 1px, transparent 5px);
    animation: none;
  }
}

@keyframes crt-flicker {
  0%,100% { opacity: 1; } 50% { opacity: .93; }
  10%,30%,70% { opacity: .97; } 20%,60%,90% { opacity: 1; }
}

#vignette {
  position: absolute; inset: 0; z-index: 41; pointer-events: none;
  background: radial-gradient(105% 105% at 50% 46%,
    transparent 55%, rgba(0,0,0,.28) 82%, rgba(0,0,0,.62) 100%);
}

#glass {
  position: absolute; inset: 0; z-index: 42; pointer-events: none;
  background: linear-gradient(112deg,
    transparent 30%, rgba(220,255,220,.045) 42%, rgba(220,255,220,.085) 47%,
    rgba(220,255,220,.045) 52%, transparent 64%);
}

/* particle canvas sits above views AND modals (confetti / flying coins
   must sail over the veil), below the scanlines */
#fx-canvas {
  position: absolute; inset: 0; z-index: 39; pointer-events: none;
  width: 100%; height: 100%;
}

/* static burst used for screen transitions */
#tv-static {
  position: absolute; inset: 0; z-index: 45; pointer-events: none;
  opacity: 0;
  background-size: 240px 240px;
}
#tv-static.on { animation: static-burst .28s steps(4) both; }
@keyframes static-burst {
  0% { opacity: 0; background-position: 0 0; }
  20% { opacity: .95; background-position: 80px 40px; }
  55% { opacity: .7; background-position: 20px 160px; }
  100% { opacity: 0; background-position: 200px 90px; }
}

/* power-off / power-on tube collapse */
#tv-off {
  position: absolute; inset: 0; z-index: 50; pointer-events: none;
  background: #000; opacity: 0;
}
#tv-off.off { animation: tube-off .5s ease-in both; }
#tv-off.on  { animation: tube-on .7s ease-out both; }
@keyframes tube-off {
  0%   { opacity: 0; transform: scaleY(1); }
  35%  { opacity: 1; transform: scaleY(1); }
  36%  { opacity: 1; transform: scaleY(.98); background: #cfe8b0; }
  70%  { transform: scaleY(.006); background: #eaffd0; }
  85%  { transform: scale(.006, .006); background: #ffffff; }
  100% { transform: scale(.0001, .006); background: #000; opacity: 1; }
}
@keyframes tube-on {
  0%   { opacity: 1; transform: scale(.0001, .006); background: #fff; }
  30%  { opacity: 1; transform: scale(1, .006); background: #eaffd0; }
  60%  { opacity: 1; transform: scaleY(1); background: #cfe8b0; }
  61%  { background: #000; opacity: .6; }
  100% { opacity: 0; transform: scaleY(1); }
}
body.tv-dead #screen > .view,
body.tv-dead #toast-root, body.tv-dead #modal-root { visibility: hidden; }
/* a dead tube emits no picture — no scanlines/vignette/glass/particles */
body.tv-dead #scanlines, body.tv-dead #vignette, body.tv-dead #glass,
body.tv-dead #fx-canvas { visibility: hidden; }

/* boot loader — a faint OSD while scripts/fonts/assets arrive.
   Pure CSS and deliberately plain monospace: it shows before the
   pixel font (and any JS) has loaded. Hidden once `boot` drops. */
#boot-loader {
  position: absolute; inset: 0; z-index: 49;
  display: none; align-items: center; justify-content: center; gap: 10px;
  pointer-events: none;
}
body.boot #boot-loader { display: flex; }
#boot-loader span {
  font-family: 'Courier New', monospace; font-weight: 700;
  font-size: clamp(13px, 3.2vw, 16px); letter-spacing: 5px; color: #8fae5f;
  text-shadow: 0 0 8px rgba(143,174,95,.4);
  animation: boot-glow 1.2s ease-in-out infinite;
}
#boot-loader i {
  width: 6px; height: 6px; background: #8fae5f;
  opacity: 0; animation: boot-dot 1.2s infinite;
}
#boot-loader i:nth-of-type(2) { animation-delay: .2s; }
#boot-loader i:nth-of-type(3) { animation-delay: .4s; }
@keyframes boot-glow { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
@keyframes boot-dot { 0%, 20% { opacity: 0; } 30%, 70% { opacity: 1; } 80%, 100% { opacity: 0; } }

/* glitch slices on outgoing view during a screen switch */
.view.glitch-out { animation: glitch-out .22s steps(3) both; }
@keyframes glitch-out {
  0%   { clip-path: inset(0 0 0 0);      transform: translateX(0); }
  34%  { clip-path: inset(12% 0 64% 0);  transform: translateX(-8px); opacity: .8; }
  67%  { clip-path: inset(58% 0 8% 0);   transform: translateX(9px);  opacity: .55; }
  100% { clip-path: inset(30% 0 30% 0);  transform: translateX(-4px); opacity: 0; }
}
.view.glitch-in { animation: glitch-in .24s steps(4) both; }
@keyframes glitch-in {
  0%   { clip-path: inset(40% 0 40% 0); transform: translateX(6px);  opacity: .3; }
  50%  { clip-path: inset(10% 0 20% 0); transform: translateX(-5px); opacity: .75; }
  100% { clip-path: inset(0 0 0 0);     transform: translateX(0);    opacity: 1; }
}