/* Izposojeno iz apps/prototype/style.css (Korak 3, glej
   docs/prompt_faza2_dirke.md) - ista, že testirana vizualna podoba igre,
   razširjena z lobby elementi (vstopna stran, korak 2). */
body {
  font-family: system-ui, sans-serif;
  background: #1b1f27;
  color: #eee;
  max-width: 1200px;
  margin: 1.5rem auto;
  padding: 0 1rem;
}

h1 {
  margin-bottom: 0.25rem;
}

section {
  background: #262b36;
  border-radius: 8px;
  padding: 1rem 1.25rem;
  margin-top: 1rem;
}

select:disabled, input:disabled, button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

button {
  background: #3d7bfd;
  color: white;
  border: none;
  border-radius: 4px;
  padding: 0.4rem 0.9rem;
  cursor: pointer;
  font-size: 1rem;
}

button:hover {
  background: #5a8dfd;
}

input[type='text'] {
  background: #12151b;
  color: #eee;
  border: 1px solid #3a3f4b;
  border-radius: 4px;
  padding: 0.35rem 0.5rem;
  font-size: 1rem;
}

#vnos-kode {
  font-size: 1.2rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  width: 8ch;
}

.napaka {
  color: #ff6b6b;
}

#gostiteljski-kontrolniki > div,
#dodatni-parametri-proge > div {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

#dodatni-parametri-proge input[type='number'] {
  width: 6ch;
}

#gumb-zacni-pripravo {
  margin-top: 0.25rem;
}

#cakanje-koda {
  letter-spacing: 0.1em;
  color: #22d3ee;
}

#opis-proge-besedilo {
  color: #aab2c5;
  font-size: 0.85rem;
  margin-top: 0;
}

#mreza-preklop {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.9rem;
  color: #aab2c5;
  margin-bottom: 0.5rem;
  cursor: pointer;
}

#rezultat-besedilo {
  font-weight: bold;
  min-height: 1.2em; /* rezervira prostor, da se ostalo ne "trza" ob pojavu/izginotju */
}

#rezultat-besedilo.uspesna_poteza { color: #7fd97f; }
#rezultat-besedilo.tocka_zasedena { color: #f0c05a; }
#rezultat-besedilo.crash { color: #ff6b6b; }
#rezultat-besedilo.zmaga { color: #ffd54a; }

canvas {
  background: #12151b;
  border-radius: 6px;
  display: block;
  max-width: 100%;
  cursor: grab;
  /* Brskalnik naj sam ne prestreza dotika za pomik/zoom strani - platno
     (glej soba.js, premikanje z miško/prstom) mora dobiti VSE dogodke. */
  touch-action: none;
}

canvas.vlecenje {
  cursor: grabbing;
}

/* Vsebnik za platno + prekrivni namig za premikanje (pan) - glej
   soba.js, posodobiPanNamig. position:relative, da je #pan-namig
   (position:absolute) postavljen GLEDE NA platno, ne glede na cel dokument. */
#platno-vsebnik {
  position: relative;
  display: inline-block;
  max-width: 100%;
}

#pan-namig {
  position: absolute;
  left: 50%;
  bottom: 14px;
  transform: translateX(-50%);
  background: rgba(20, 22, 28, 0.85);
  color: #e8e6df;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 0.85rem;
  white-space: nowrap;
  /* Namig ne sme prestrezati klikov/vlečenja - vse dogodke mora dobiti
     platno pod njim. */
  pointer-events: none;
  transition: opacity 0.4s ease;
}

#pan-namig[hidden] {
  display: none;
}

/* Dashboard igralcev (glej soba.js, posodobiDashboard) - en pregleden vir
   resnice za vse med-igro podatke o vsakem igralcu, namesto prejšnje
   razpršene legende/"na vrsti" besedila/odklop-opozorila. */
#dashboard-tabela {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 0.75rem;
  font-size: 0.9rem;
}

#dashboard-tabela th, #dashboard-tabela td {
  padding: 0.35rem 0.5rem;
  text-align: left;
  border-bottom: 1px solid #3a3f4b;
}

#dashboard-tabela th {
  color: #aab2c5;
  font-weight: 600;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

/* Vrstica igralca, ki je trenutno na vrsti - opazna na prvi pogled (prej
   samo majhna puščica, premalo vidno v praksi - glej docs): obarvano
   ozadje + poln levi rob v naglasni barvi + krepko ime + jasna oznaka. */
#dashboard-tabela tr.na-vrsti {
  background: rgba(61, 123, 253, 0.22);
  box-shadow: inset 4px 0 0 0 #3d7bfd;
}

#dashboard-tabela tr.na-vrsti .ime-celica {
  font-weight: 700;
}

#dashboard-tabela .na-vrsti-oznaka {
  color: #7fb0ff;
  font-weight: 700;
  white-space: nowrap;
}

#dashboard-tabela tr.koncal {
  color: #8a93a6;
}

.pika {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
}

#dashboard-tabela .ime-celica {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

#dashboard-tabela .povezava-online { color: #7fd97f; }
#dashboard-tabela .povezava-offline { color: #ff6b6b; }

/* "Kako igrati" panel (glej docs/kako_igrati_panel.md) - preprost
   prekrivni modal, brez posebne komponente/knjižnice. */
#gumb-kako-igrati {
  background: transparent;
  border: 1px solid #3d7bfd;
  color: #9db4f5;
}
#gumb-kako-igrati:hover {
  background: #262b36;
}

#kako-igrati-panel {
  position: fixed;
  inset: 0;
  background: rgba(10, 12, 16, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  z-index: 10;
}
#kako-igrati-panel[hidden] {
  display: none;
}

#kako-igrati-vsebina {
  position: relative;
  background: #262b36;
  border-radius: 8px;
  padding: 1.5rem 1.75rem;
  max-width: 40rem;
  max-height: 85vh;
  overflow-y: auto;
}
#kako-igrati-vsebina h2 {
  margin-top: 0;
}
#kako-igrati-vsebina h3 {
  margin-bottom: 0.3rem;
  color: #9db4f5;
}
#kako-igrati-vsebina p {
  margin-top: 0.3rem;
}

#gumb-zapri-kako-igrati {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  background: transparent;
  color: #aaa;
  padding: 0.2rem 0.5rem;
}
#gumb-zapri-kako-igrati:hover {
  background: #3a3f4b;
  color: #fff;
}

/* Enoigralski način (Dnevni izziv / Trening, glej apps/client/enoigralec.js) */
.povezava-domov {
  color: inherit;
  text-decoration: none;
}
.povezava-domov:hover {
  text-decoration: underline;
}

#izbira-nacina {
  margin-top: 0.75rem;
  display: flex;
  gap: 0.5rem;
}

.gumb-nacin.aktiven {
  background: #2ecc71;
}

#datumi-zavihki {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 0.75rem;
}

.zavihek-datum {
  background: #12151b;
  border: 1px solid #3a3f4b;
  color: #aab2c5;
  font-size: 0.85rem;
}
.zavihek-datum:hover {
  background: #1c2029;
}
.zavihek-datum.aktiven {
  background: #3d7bfd;
  color: white;
  border-color: #3d7bfd;
}

#igra-vrstica-stanja {
  display: flex;
  gap: 1.5rem;
  font-size: 0.95rem;
  color: #aab2c5;
  margin-bottom: 0.25rem;
}
#stevec-potez, #stoparica {
  font-variant-numeric: tabular-nums;
}

#lestvica-tabela {
  width: 100%;
  border-collapse: collapse;
  margin-top: 0.5rem;
  font-size: 0.9rem;
}
#lestvica-tabela th, #lestvica-tabela td {
  padding: 0.3rem 0.5rem;
  text-align: left;
  border-bottom: 1px solid #3a3f4b;
}
#lestvica-tabela th {
  color: #aab2c5;
  font-weight: 600;
  font-size: 0.8rem;
  text-transform: uppercase;
}
#lestvica-dnf-besedilo {
  color: #aab2c5;
  font-size: 0.85rem;
  margin-top: 0.4rem;
}

/* Gumb za povratne informacije (glej apps/client/povratneInformacije.js) -
   nevpadljiv, fiksen v spodnjem desnem kotu, na vseh straneh, ki ga vključijo. */
#gumb-povratne-informacije {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 20;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  padding: 0;
  font-size: 1.1rem;
  line-height: 1;
  background: #262b36;
  border: 1px solid #3a3f4b;
  opacity: 0.75;
}
#gumb-povratne-informacije:hover {
  opacity: 1;
  background: #2f3542;
}

#povratne-informacije-panel {
  position: fixed;
  right: 1rem;
  bottom: 4.25rem;
  z-index: 20;
  width: min(18rem, calc(100vw - 2rem));
  background: #262b36;
  border: 1px solid #3a3f4b;
  border-radius: 8px;
  padding: 0.75rem;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
}
#povratne-informacije-panel[hidden] {
  display: none;
}
#povratne-informacije-besedilo {
  width: 100%;
  min-height: 4.5rem;
  resize: vertical;
  background: #12151b;
  color: #eee;
  border: 1px solid #3a3f4b;
  border-radius: 4px;
  padding: 0.4rem 0.5rem;
  font: inherit;
  box-sizing: border-box;
}
#povratne-informacije-gumbi {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  margin-top: 0.5rem;
}
#gumb-zapri-povratno {
  background: transparent;
  border: 1px solid #3a3f4b;
}
#povratne-informacije-status {
  font-size: 0.85rem;
  color: #7fd97f;
  margin: 0.5rem 0 0;
}