/* Mere so v referenčnih pikslih Unity CanvasScalerja (1920 x 1080), --s je merilo.
   Barve so Unityjeve, pred filtrom; #stage jih obarva enako kot original. */
:root { --s: 0.5; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #231F20; }
body { font-family: "Liberation Sans", Arial, Helvetica, sans-serif; user-select: none; -webkit-user-select: none; }

#stage { position: fixed; inset: 0; filter: saturate(1.7) sepia(0.7) grayscale(0.17); }
.bg { position: absolute; inset: 0; background: center top / cover no-repeat; transition: opacity 1s linear; }
#bg-b { opacity: 0; }
#scene { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.layer { position: absolute; inset: 0; }
.hidden { display: none !important; }

/* UISprite: zaobljen pravokotnik, 9-slice rob 10 px */
.u-panel { border: 0; padding: 0; margin: 0; cursor: pointer; background: rgba(0, 0, 0, 0.631);
  border-radius: calc(8px * var(--s) * 2); }
.u-panel:hover { background: rgba(0, 0, 0, 0.606); }         /* highlighted 0.96 */
.u-panel:active { background: rgba(0, 0, 0, 0.49); }         /* pressed 0.78 */
.u-panel:disabled { opacity: 0.5; cursor: default; }

/* LangPicker: sidro zgoraj desno, (-32, -32), 120 x 60 */
#lang { position: absolute; right: calc(32px * var(--s)); top: calc(32px * var(--s));
  width: calc(120px * var(--s)); height: calc(60px * var(--s)); color: #fff;
  font: bold calc(34px * var(--s)) / 1 "Liberation Sans", Arial, sans-serif; }

/* Gumb mikrofona: sidro spodaj na sredini, y = 50, 60 x 60, ikona z robom 10 */
#mic { position: absolute; left: 50%; bottom: calc((50px - 30px) * var(--s));
  width: calc(60px * var(--s)); height: calc(60px * var(--s)); transform: translateX(-50%);
  display: flex; align-items: center; justify-content: center; }
#mic img { height: calc(40px * var(--s)); width: auto; pointer-events: none; }
#mic.recording img { filter: drop-shadow(0 0 calc(6px * var(--s)) rgba(255, 60, 60, 0.9)); }

/* Prijava: LoginForm sidro zgoraj na sredini, (0, -455), 460 x 320 */
#login-bg { background-image: url(assets/menu.png); }
#login { position: absolute; left: 50%; top: calc(455px * var(--s)); width: calc(460px * var(--s));
  height: calc(320px * var(--s)); transform: translate(-50%, -50%); box-sizing: border-box; }
.u-field { background: #ffffff; border: calc(2px * var(--s)) solid rgba(50, 40, 20, 0.55);
  border-radius: calc(20px * var(--s)); }
#login label { position: absolute; left: 50%; top: calc(160px * var(--s) - 98px * var(--s) - 20px * var(--s));
  width: calc(380px * var(--s)); transform: translateX(-50%); color: #000;
  font: bold calc(22px * var(--s)) / calc(40px * var(--s)) "Liberation Sans", Arial, sans-serif; }
#pwd { position: absolute; left: 50%; top: calc(160px * var(--s) - 40px * var(--s) - 37.5px * var(--s));
  width: calc(400px * var(--s)); height: calc(75px * var(--s)); transform: translateX(-50%);
  box-sizing: border-box; padding: 0 calc(10px * var(--s)); text-align: center; outline: none;
  background: rgb(245, 255, 238); border: calc(2px * var(--s)) solid rgba(50, 40, 20, 0.55);
  border-radius: calc(20px * var(--s)); color: rgb(50, 50, 50);
  font: calc(24px * var(--s)) "Liberation Sans", Arial, sans-serif; }
#pwd::placeholder { color: rgba(50, 50, 50, 0.5); font-style: italic; }
#warn { position: absolute; left: 50%; top: calc(160px * var(--s) + 20px * var(--s) - 20px * var(--s));
  width: calc(320px * var(--s)); transform: translateX(-50%); text-align: center; color: #f00;
  font: calc(22px * var(--s)) / calc(40px * var(--s)) "Liberation Sans", Arial, sans-serif; }
#login-btn { position: absolute; left: 50%; top: calc(160px * var(--s) + 85px * var(--s) - 30px * var(--s));
  width: calc(320px * var(--s)); height: calc(60px * var(--s)); transform: translateX(-50%);
  background: rgb(208, 255, 114); color: rgb(50, 50, 50); cursor: pointer;
  font: bold calc(22px * var(--s)) "Liberation Sans", Arial, sans-serif; }
#login-btn:active { filter: brightness(0.78); }
#title { position: absolute; left: 0; right: 0; bottom: 0; height: calc(80px * var(--s));
  color: #fff; text-align: center; font: calc(30px * var(--s)) / calc(80px * var(--s)) "Liberation Sans", Arial, sans-serif; }

/* Nalaganje: izmerjene barve po filtru, zato zunaj #stage */
#loading { position: fixed; inset: 0; background: rgb(128, 119, 103); color: #fff;
  font: calc(22px * var(--s)) "Liberation Sans", Arial, sans-serif; }
#loading-text { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); text-align: center; }
#bar { position: absolute; left: 50%; top: calc(50% + 71px * var(--s)); width: calc(400px * var(--s));
  height: calc(5px * var(--s)); transform: translateX(-50%); background: rgba(255, 255, 255, 0.35); }
#fill { height: 100%; width: 0; background: #fff; }

/* Telefon: gumbi vsaj za prst, polje za geslo 16 px (sicer iOS poveča stran), brez dvojnega tapa za povečavo */
html, body, #stage, button, input { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
#scene { touch-action: none; }
@media (pointer: coarse), (max-width: 600px), (max-height: 500px) {
  #mic { width: max(calc(60px * var(--s)), 64px); height: max(calc(60px * var(--s)), 64px);
         bottom: calc(max(20px * var(--s), 18px) + env(safe-area-inset-bottom)); border-radius: 14px; }
  #mic img { height: max(calc(40px * var(--s)), 40px); }
  #lang { width: max(calc(120px * var(--s)), 76px); height: max(calc(60px * var(--s)), 40px);
          top: calc(max(32px * var(--s), 12px) + env(safe-area-inset-top)); right: calc(max(32px * var(--s), 12px) + env(safe-area-inset-right));
          font-size: max(calc(34px * var(--s)), 20px); border-radius: 10px; }
  #login { width: min(max(calc(460px * var(--s)), 300px), 92vw); height: max(calc(320px * var(--s)), 210px);
           top: max(calc(455px * var(--s)), 38%); }
  #login label { top: 12%; width: 84%; font-size: 16px; line-height: 1.6; }
  #pwd { top: 30%; width: 88%; height: 48px; font-size: 16px; }
  #warn { top: 57%; width: 88%; font-size: 14px; line-height: 1.4; }
  #login-btn { top: 70%; width: 70%; height: 42px; font-size: 16px; }
  #title { height: 56px; line-height: 56px; font-size: 18px; bottom: env(safe-area-inset-bottom); }
  #loading { font-size: 16px; }
  #bar { width: 200px; height: 3px; top: calc(50% + 28px); }
}

/* Ozadje igre ima spodaj enobarven pas (vrstice 951–1024). Na pokončnem zaslonu bi se videl,
   zato je plast višja od zaslona in pas ostane pod robom. Na 16:9 se nič ne spremeni. */
#bg-a, #bg-b { bottom: auto; height: calc(100% * 1024 / 951); }