/* stils.css — tikai izkārtojums un pogas. Spēles grafika ir kanvā, tāpēc CSS
   nedrīkst ietekmēt spēles laukumu: tam nav ne ēnu, ne noapaļojumu. */

:root {
  --panelis: #1b2130;
  --panelis-gaiss: #2e3a4e;
  --balts: #f6f7f2;
  --zils: #3e8bd9;
  --zals: #48b87a;
  --sarkans: #c0342b;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  background: #0e1420;
  color: var(--balts);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  overscroll-behavior: none;
}

.spele {
  position: fixed;
  inset: 0;
  display: block;
}

.kanva {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  image-rendering: pixelated;
  touch-action: none;
}

/* Ekrāni ir pārklājumi virs kanvas. */
.ekrans {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: 1.25rem;
  text-align: center;
  background: linear-gradient(180deg, rgba(10, 14, 22, 0.86), rgba(10, 14, 22, 0.58));
}

.ekrans[hidden] { display: none; }

.virsraksts {
  margin: 0;
  font-size: clamp(1.35rem, 5vw, 2.4rem);
  line-height: 1.15;
  letter-spacing: 0.02em;
}

.apaksvirsraksts { margin: 0; opacity: 0.8; max-width: 34rem; }

/* Komandas izvēle: divas puses, poga ir liela un taustāma (≥ 64 px augstumā). */
.komandas {
  display: grid;
  gap: 0.75rem;
  width: 100%;
  max-width: 40rem;
}

@media (min-width: 700px) {
  .komandas { grid-template-columns: 1fr 1fr; }
}

.komanda {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  min-height: 96px;
  padding: 1rem 1.1rem;
  border: 2px solid var(--panelis-gaiss);
  border-radius: 0.75rem;
  background: var(--panelis);
  color: inherit;
  text-align: left;
  cursor: pointer;
  font: inherit;
}

.komanda:hover, .komanda:focus-visible { border-color: var(--balts); }

.komanda--volt { border-left: 8px solid var(--zils); }
.komanda--dolt { border-left: 8px solid var(--zals); }

.komanda__virsraksts { font-size: 1.5rem; font-weight: 700; letter-spacing: 0.08em; }
.komanda__sauklis { font-size: 0.95rem; opacity: 0.9; }
.komanda__apraksts { font-size: 0.85rem; opacity: 0.75; }

.poga {
  min-height: 56px;
  padding: 0.85rem 1.6rem;
  border: 2px solid var(--panelis-gaiss);
  border-radius: 0.6rem;
  background: var(--panelis);
  color: inherit;
  font: inherit;
  cursor: pointer;
}

.poga--galvena {
  min-height: 64px;
  font-size: 1.1rem;
  font-weight: 600;
  background: #24405e;
  border-color: var(--zils);
}

.poga--ikona {
  width: 56px;
  height: 56px;
  padding: 0;
  font-size: 1.2rem;
}

.pamaciba {
  margin: 0;
  padding: 0;
  list-style: none;
  max-width: 32rem;
  text-align: left;
  display: grid;
  gap: 0.4rem;
  font-size: 0.95rem;
}

.pamaciba li::before { content: "▸ "; opacity: 0.7; }

.beigas__cipars {
  margin: 0;
  font-size: clamp(1.6rem, 6vw, 2.6rem);
  font-weight: 700;
}

.beigas__saraksts {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.3rem;
  font-size: 0.95rem;
  opacity: 0.9;
}

.atruna {
  margin: 0.5rem 0 0;
  max-width: 34rem;
  font-size: 0.75rem;
  opacity: 0.6;
}

/* Frones karte: 12 rajoni 4×3 režģī (K93 — fronte paliek starp maiņām). */
.karte {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.4rem;
  width: 100%;
  max-width: 44rem;
}

@media (min-width: 700px) {
  .karte { grid-template-columns: repeat(4, 1fr); }
}

.rajons {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 0.5rem 0.6rem;
  border: 2px solid var(--panelis-gaiss);
  border-radius: 0.45rem;
  background: var(--panelis);
  text-align: left;
  font-size: 0.75rem;
}

.rajons strong { font-size: 0.85rem; }
.rajons span { opacity: 0.75; }
.rajons__proc { font-weight: 700; opacity: 1 !important; }
.rajons--zils { border-color: var(--zils, #3d7ad6); }
.rajons--zils .rajons__proc { color: var(--zils, #3d7ad6); }
.rajons--zals { border-color: var(--zals, #46a06b); }
.rajons--zals .rajons__proc { color: var(--zals, #46a06b); }

.beigas__pogas { display: flex; gap: 0.75rem; flex-wrap: wrap; justify-content: center; }

/* Veikals: kartītes ar cenu un pirkšanas pogu (poga ≥ 64 px, K35). */
.veikals {
  display: grid;
  gap: 0.75rem;
  width: 100%;
  max-width: 46rem;
}

@media (min-width: 700px) {
  .veikals { grid-template-columns: repeat(3, 1fr); }
}

.kartite {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 0.9rem 1rem;
  border: 2px solid var(--panelis-gaiss);
  border-radius: 0.6rem;
  background: var(--panelis);
  text-align: left;
}

.kartite h3 { margin: 0; font-size: 1rem; }
.kartite p { margin: 0; font-size: 0.85rem; opacity: 0.8; }
.kartite__cena { font-weight: 600; opacity: 1 !important; color: var(--zelts, #e0a93b); }
.kartite .poga { margin-top: auto; }

.hud-pogas {
  position: absolute;
  top: 0.5rem;
  left: 0.5rem;
  display: flex;
  gap: 0.5rem;
  z-index: 5;
}

.hud-pogas[hidden] { display: none; }