/* styst-led · zajednički stil plejera (pitch + ads). Kontejner .stage je 9:16, sve mere unutra su u cqh/cqw. */
@import url('/assets/fonts.css');

:root {
  --bg: #0a0a0b;
  --tx: #f5f5f4;
  --mu: #a1a1aa;
  --or: #ff5c16;
  --or2: #ff8a4c;
  --gold: #f5c542;
  --line: rgba(245, 245, 244, .12);
  --sans: 'Geist', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'Geist Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
}

html, body { margin: 0; height: 100%; background: #000; overflow: hidden; }
body {
  display: grid; place-items: center;
  color: var(--tx); font-family: var(--sans);
  -webkit-font-smoothing: antialiased; cursor: auto;
}

/* 9:16 kontejner: staje u prozor, letterbox crno okolo */
.stage {
  position: relative;
  width: min(100vw, calc(100vh * 9 / 16));
  height: min(100vh, calc(100vw * 16 / 9));
  background: var(--bg);
  overflow: hidden;
  container-type: size;
  isolation: isolate;
}
@supports (height: 100dvh) {
  .stage { width: min(100vw, calc(100dvh * 9 / 16)); height: min(100dvh, calc(100vw * 16 / 9)); }
}

/* pozadinski sjaj (narandžasti) */
.stage .glow {
  position: absolute; inset: -20cqh -30cqw; z-index: -1; pointer-events: none;
  background:
    radial-gradient(60cqw 40cqh at 50% 0%, rgba(255, 92, 22, .22), transparent 70%),
    radial-gradient(70cqw 35cqh at 50% 110%, rgba(255, 92, 22, .14), transparent 70%);
  transition: opacity .8s ease;
}

/* ekrani: svi na istom mestu, vidljiv samo .on */
.scr {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center;
  padding: 6cqh 7cqw; box-sizing: border-box; text-align: center;
  opacity: 0; transform: scale(1.04); filter: blur(1cqh);
  transition: opacity .7s ease, transform .9s cubic-bezier(.2, .8, .2, 1), filter .7s ease;
  pointer-events: none;
}
.scr.on { opacity: 1; transform: none; filter: none; }

/* zajednički elementi */
.lbl { font-family: var(--mono); font-weight: 700; letter-spacing: .3em; text-transform: uppercase; font-size: 2cqh; color: var(--or); }
.mut { color: var(--mu); }
.big { font-family: var(--mono); font-weight: 700; line-height: .9; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.logo-top { height: 3.2cqh; width: auto; }

/* traka napretka (skidanje) u uglu */
.dl {
  position: absolute; right: 2cqw; top: 1.4cqh; z-index: 50;
  font-family: var(--mono); font-size: 1.3cqh; color: var(--mu);
  display: flex; align-items: center; gap: 1cqw;
  transition: opacity .6s ease;
}
.dl i { display: block; width: 12cqw; height: .5cqh; background: var(--line); border-radius: 1cqh; overflow: hidden; }
.dl b { display: block; height: 100%; width: 0; background: var(--or); transition: width .3s ease; }
.dl.gone { opacity: 0; }
/* 9.11.2026 (Dejan „cursor mi se ne pojavljuje“): kursor se vidi kad se miš pomera, skriva se posle 3 s mirovanja (body.mir) */
/* 9.11.2026: kursor se NIKAD ne skriva (Dejan) */
/* 9.11.2026 (Dejan „ne mogu da pritisnem PLAY“): ekrani su pointer-events:none — PLAY dugme mora da prima klik */
#b-play-ekran { pointer-events: auto !important; position: relative; z-index: 50; }

/* 9.11.2026 (Dejan „zašto mi na chrome ne radi cursor“): kursor uvek vidljiv svuda */
html, body, body.mir, body.mir * { cursor: default !important; }
button, #b-play-ekran { cursor: pointer !important; }