/* Reset & varijable */
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
:root{
  /* Jedinstvena boja teksta (kao “Dobrodošli”) */
  --text: #CBB378; /* promijeni ako želiš nijansu */
}

/* POZADINA
   VAŽNO: CSS je u /uploader/assets/, pa koristimo ../images/...
   Alternativa: apsolutno '/uploader/images/background.webp'
*/
body{
  background: #000 url('../images/background.webp') center center / cover no-repeat fixed;
  /* ako iz nekog razloga i dalje ne vidi: odkomentariši sljedeći red i zakomentariši gornji
  background: #000 url('/uploader/images/background.webp') center center / cover no-repeat fixed;
  */
  color: var(--text);
  font-family: 'Alegreya', serif;
  min-height: 100%;
  overflow: hidden;
  position: relative;
}

/* Blagi overlay za čitljivost */
body::before{
  content: "";
  position: fixed;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.30), rgba(0,0,0,.70));
  pointer-events: none;
  z-index: 0;
}

/* App zauzima cijeli ekran i centrira sadržaj */
.app{
  position: relative;
  min-height: 100svh;
  min-height: 100dvh;
  display: grid;
  place-items: center;
  z-index: 1; /* iznad overlay-a */
}

/* Sekcije u centru ekrana */
.center-screen{
  width: 100%;
  display: grid;
  place-items: center;
  gap: 2.4vh;
  padding: 4vh 4vw;
  text-align: center;
}

/* Naslovni blok 70% širine */
.headline{
  width: 70vw;
  max-width: 1400px;
  margin-inline: auto;
}
.title{
  color: var(--text);
  font-family: 'Pinyon Script', cursive;
  line-height: 1;
  white-space: nowrap;
  font-size: clamp(48px, min(14vw, 16vh), 220px);
  text-shadow: 0 2px 10px rgba(0,0,0,.35);
  user-select: none;
}

/* Dugmad – PROZIRNA, tekst iste boje kao naslov */
.actions{
  width: min(70vw, 680px);
  display: flex;
  gap: 1em;
  justify-content: center;
}
.cta{
  flex: 1;
  padding: 1em 0;
  border-radius: 16px;
  background: transparent;                 /* prozirno */
  color: var(--text);                       /* isto kao “Dobrodošli” */
  border: 1px solid currentColor;          /* samo okvir */
  font-weight: 700;
  letter-spacing: .2px;
  font-size: clamp(16px, 2.6vw, 22px);
  cursor: pointer;
  backdrop-filter: blur(2px);              /* blagi blur ispod */
  transition: transform .08s ease, background-color .15s ease, filter .15s ease;
}
.cta:hover{
  background: rgba(255,255,255,.06);       /* blago zatamnjenje na hover */
  filter: brightness(1.05);
  transform: translateY(-2px);
}
.cta:active{ transform: translateY(2px); }
.cta.big{ font-size: clamp(18px, 3vw, 24px); padding: 1.1em 0; width: min(420px, 70vw); }

/* Hvala ekran */
.thanks{
  color: var(--text);
  font-family:'Pinyon Script', cursive;
  font-size: clamp(40px, min(14vw, 16vh), 220px);
  line-height: 1;
  margin-bottom: 2vh;
}

/* === Modal: centriranje koje radi i sa show() i sa showModal() === */
.modal {
  border: none;
  padding: 0;
  margin: 0;
  background: transparent;
  /* dialog sam po sebi ništa ne centrira — neka bude samo “nosač” + backdrop */
}
.modal:not([open]) { display: none; }
.modal::backdrop { background: rgba(0,0,0,.55); }

/* Karteica unutra: fiksno centrirana u viewportu */
.modal-card{
  position: fixed;              /* ključ: ne zavisi od dialog layouta */
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(560px, 92vw);
  max-height: 90vh;
  overflow: auto;

  background: rgba(10,10,10,.28);
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 20px;
  padding: 22px 18px 16px;
  box-shadow: 0 10px 30px rgba(0,0,0,.45);
  color: var(--text);
  display: grid;
  justify-items: center;
  gap: 10px;
  text-align: center;
  backdrop-filter: blur(6px);
}

/* (opcionalno) mala animacija na otvaranje */
.modal-card { transition: transform .2s ease, opacity .2s ease; opacity: 0; }
.modal[open] .modal-card { opacity: 1; }

.modal h2{ margin-bottom: 2px; }
.status{ opacity: .95; margin-top: 2px; color: var(--text); }
.joke{ font-size: 13px; opacity: .95; color: var(--text); }


/* Spinner (ostaje) */
.spinner{
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 4px solid rgba(255,255,255,.18);
  border-top-color: currentColor;
  animation: spin 0.9s linear infinite;
  margin: 2px 0 6px;
}
@keyframes spin{ to{ transform: rotate(360deg); } }

/* “Ghost” dugme u modalu – prozirno */
.ghost{
  margin-top: 6px;
  background: transparent;
  border: 1px solid currentColor;
  color: var(--text);
  border-radius: 12px;
  padding: 10px 14px;
  cursor: pointer;
  transition: background-color .15s ease;
}
.ghost:hover{ background: rgba(255,255,255,.06); }

/* Progress bar (ostavljen zbog kompatibilnosti sa app.js) */
.progress{ height: 12px; background: rgba(255,255,255,.12); border-radius: 999px; overflow: hidden; margin-top: 8px; position: relative; }
.bar{ height: 100%; width: 0%; background: linear-gradient(90deg, #ffdd33, #ff9f1a); transition: width .15s linear; }

/* Toast */
.toast{
  position: fixed;
  left: 50%;
  bottom: 4vh;
  transform: translateX(-50%);
  background: rgba(20,20,20,.9);
  color: #fff;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 12px;
  padding: 10px 14px;
  font-size: 14px;
  box-shadow: 0 6px 24px rgba(0,0,0,.35);
  z-index: 5;
}

.hidden{ display: none !important; }

/* Mobilni detalji */
@media (max-width: 420px){
  .actions{ width: 90vw; }
  .cta{ padding: .9em 0; }
}