/* ORTO - a DOL A FA vilaga.
 *
 * KET ALAPSZABALY:
 *   1. A LAP SOSEM GOROG. A jatek egy kepernyot kitolto keret, ami F11 alatt
 *      es F11 nelkul is ugyanigy mukodik.
 *   2. NINCS RENDSZERFONT. Minden szoveg a sajat 5x7-es bitmap fonttal
 *      keszul (src/ui/betu.js), canvasra rajzolva. Ezert itt nincs
 *      font-size a tartalomra: a betu merete a betu.js "scale" erteke.
 *
 * A paletta a DOL A FA HUD-jabol jon: melysotet barna, arany kiemeles,
 * krem betu. Zold csak jelzesre, olajos tonusban.
 */

:root {
  --tinta:      #140c07;
  --fa:         #1e1209;
  --fa2:        #2e1c0e;
  --fa3:        #3a1607;
  --keret:      #5a3b22;
  --keret-vil:  #8a6238;

  --betu:       #e2d2ac;
  --betu-halk:  #b0a084;
  --betu-tompa: #8a7a62;
  --krem:       #fff2c0;

  --arany:      #ffd257;
  --arany-m:    #e0a444;
  --tuz:        #ff9a2b;
  --piros:      #ff5a22;
  --kek:        #8e9aa4;
  --zold:       #9aa45a;

  --px: 2px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  width: 100%; height: 100%;
  overflow: hidden;
  background: var(--tinta);
  background-image: radial-gradient(ellipse 100% 80% at 50% 35%, #2a1a0e 0%, #17100a 55%, #0b0705 100%);
  color: var(--betu);
  /* Csak vegso tartalek: a jatek szovegei bitmap fonttal keszulnek. */
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: 13px;
}

img, canvas { image-rendering: pixelated; }

/* Halvany scanline az egesz kep felett. Nem fogja el a kattintast. */
#scanline {
  position: fixed; inset: 0; z-index: 90; pointer-events: none;
  background: repeating-linear-gradient(to bottom,
    rgba(0,0,0,0) 0px, rgba(0,0,0,0) 2px, rgba(0,0,0,0.12) 3px, rgba(0,0,0,0.12) 4px);
  mix-blend-mode: multiply;
}

/* ---------------------------------------------------------------- keret */

#app {
  height: 100%; margin: 0 auto;
  padding: 10px 12px;
  display: flex; flex-direction: column; gap: 8px;
  position: relative; z-index: 1;
  overflow: hidden;
}

.fej { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.test { flex: 1 1 auto; min-height: 0; display: flex; gap: 10px; align-items: stretch; position: relative; }
.lab  { flex: 0 0 auto; display: flex; gap: 10px; align-items: center; justify-content: flex-end; }

.hasab { display: flex; flex-direction: column; gap: 8px; min-width: 0; min-height: 0; }
.hasab.keskeny { flex: 0 0 240px; }
.hasab.kozepes { flex: 1 1 320px; }
.hasab.bo      { flex: 1 1 520px; }
.tolt { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }

.gordul { overflow-y: auto; overflow-x: hidden; min-height: 0; flex: 1 1 auto; padding-right: 4px; }
.gordul::-webkit-scrollbar { width: 8px; }
.gordul::-webkit-scrollbar-track { background: var(--tinta); }
.gordul::-webkit-scrollbar-thumb { background: var(--keret); }
.gordul::-webkit-scrollbar-thumb:hover { background: var(--keret-vil); }

/* Keret NELKULI tartalomdoboz: csak hatter, nincs vonal korulotte. */
.doboz { background: rgba(20, 12, 7, 0.72); padding: 10px 12px; }
.doboz.mely { background: rgba(11, 7, 5, 0.85); }

/* --------------------------------------------------------------------- gombok */

/* A gomb tartalma egy bitmap-betus canvas, ezert itt csak a keret es a
   lenyomas-erzet van beallitva. */
button {
  background: var(--fa2);
  border: var(--px) solid var(--keret-vil);
  box-shadow: 3px 3px 0 0 #000;
  padding: 7px 12px; cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  color: var(--betu);
}
button:hover:not(:disabled) { background: var(--fa3); border-color: var(--arany-m); }
button:active:not(:disabled) { transform: translate(3px, 3px); box-shadow: none; }
button:disabled { border-color: var(--keret); cursor: not-allowed; opacity: 0.5; }
button.fo { background: #4a3210; border-color: var(--arany); }
button.fo:hover:not(:disabled) { background: #5e4014; }
button.veszes { border-color: var(--piros); }
button.lapos { background: none; border-color: transparent; box-shadow: none; padding: 4px 6px; }
button.lapos:hover:not(:disabled) { background: rgba(255, 210, 87, 0.12); border-color: transparent; }

/* -------------------------------------------------------------- valasztasok */

.valasztasok { display: flex; flex-direction: column; gap: 6px; }
.valasztas {
  width: 100%; justify-content: flex-start; align-items: flex-start;
  flex-direction: column; gap: 5px; padding: 10px 12px;
}

/* ------------------------------------------------------------------ karakterek */

.karakter-halo { display: flex; flex-wrap: wrap; gap: 6px; }

.kartya {
  padding: 4px 4px 6px;
  background: var(--fa2);
  border: var(--px) solid var(--keret);
  cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
}
.kartya:hover { border-color: var(--keret-vil); background: var(--fa3); }
.kartya.valasztott { border-color: var(--arany); background: #4a3210; }
.kartya.nezopont { border-color: var(--tuz); background: #3a2008; }

.portre { display: block; background: #2e1c0e; border: var(--px) solid var(--tinta); }

/* ------------------------------------------------------------------- mutatok */

.savok { display: flex; flex-direction: column; gap: 4px; }
.sav { display: flex; align-items: center; gap: 7px; }
.sav .vonal {
  flex: 1 1 auto; height: 10px; min-width: 60px; position: relative;
  background: var(--tinta); border: var(--px) solid var(--keret);
}
.sav .vonal i { position: absolute; top: 0; bottom: 0; left: 0; background: var(--arany-m); display: block; }

/* ---------------------------------------------------------------------- autok */

.auto-racs { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-start; }
.auto {
  flex: 1 1 300px; min-width: 260px; padding: 8px;
  background: rgba(20, 12, 7, 0.72); border: var(--px) solid var(--keret);
}
.auto.cel { border-color: var(--tuz); }
.auto-fej { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 6px; }
.ulesek { display: flex; flex-wrap: wrap; gap: 4px; }
.ules {
  width: 72px; min-height: 92px; padding: 3px;
  background: var(--tinta); border: var(--px) dashed var(--keret);
  cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 2px;
}
.ules.tele { border-style: solid; background: var(--fa2); }
.ules.vezeto { border-color: var(--arany); }
.ules .portre { width: 62px; height: 62px; }

/* -------------------------------------------------------------------- terkep */

#terkep-hely { flex: 1 1 auto; min-height: 0; position: relative; }
#terkep { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

/* A helyszin-panel MINDIG a jobb oldalon van, sajat savban: igy nem takarja
   a terkepet, es nem ugral egyik oldalrol a masikra. */
.helyszin-hasab { flex: 0 0 330px; min-width: 330px; }
.helyszin-panel {
  flex: 1 1 auto; min-height: 0;
  background: rgba(11, 7, 5, 0.9);
  padding: 16px;
  display: flex; flex-direction: column; gap: 12px;
  overflow: hidden; position: relative;
}
.helyszin-panel .zaro { position: absolute; top: 8px; right: 8px; }

/* ------------------------------------------------------------------- jelenet */

/* A jelenet SOSEM vaghat le: ha keves a hely, az elmult sorok tunnek el,
   nem az aktualis jelenet. Ezert az elmult resz zsugorodik, a jelenet nem. */
.jelenet-hely {
  flex: 0 1 auto; max-height: 58%; min-height: 0;
  display: flex; flex-direction: column; justify-content: flex-end;
  gap: 8px; overflow: hidden; padding-top: 6px;
}
.elmult { flex: 0 1 auto; min-height: 0; overflow: hidden; opacity: 0.32; }
.jelenet { flex: 0 0 auto; display: flex; flex-direction: column; gap: 8px; }

.ut-sav { flex: 1 1 auto; min-height: 90px; overflow: hidden; background: #140c07; }

/* --------------------------------------------------------------------- egyeb */

input[type=text], input[type=password] {
  font-family: ui-monospace, Consolas, monospace; font-size: 14px; color: var(--betu);
  background: var(--tinta); border: var(--px) solid var(--keret);
  padding: 8px 9px; width: 100%;
}

.pislog { animation: pislog 1s steps(2, end) infinite; }
@keyframes pislog { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0.25; } }

/* Fatyol a menuknek (AI beallitas, megerosites) */
.fatyol {
  position: fixed; inset: 0; z-index: 80;
  background: rgba(8, 5, 3, 0.82);
  display: flex; align-items: center; justify-content: center;
}
.menu {
  background: #1e1209; padding: 22px 24px;
  display: flex; flex-direction: column; gap: 14px;
  min-width: 420px; max-width: 580px;
}

.sor { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* ------------------------------------------------------------------ telefon
 * A "ki jon?" kepernyo egy telefon, benne csoportos beszelgetes. Szogletes,
 * mert pixeles: nincs lekerekites, csak vastag keret es sotet kijelzo.
 */

.telefon {
  width: 420px; max-width: 100%; flex: 0 0 auto;
  display: flex; flex-direction: column; min-height: 0;
  background: #2e1c0e;
  border: 4px solid #5a3b22;
  box-shadow: 5px 5px 0 0 #000;
  padding: 6px;
}
.telefon-fej {
  flex: 0 0 auto; background: #4a3210; padding: 6px 8px; margin-bottom: 6px;
  display: flex; align-items: center; gap: 8px;
}
.telefon-kijelzo {
  flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden;
  background: #140c07; padding: 8px;
  display: flex; flex-direction: column; gap: 7px;
}
.telefon-kijelzo::-webkit-scrollbar { width: 6px; }
.telefon-kijelzo::-webkit-scrollbar-track { background: #140c07; }
.telefon-kijelzo::-webkit-scrollbar-thumb { background: #5a3b22; }
.telefon-lab { flex: 0 0 auto; padding: 6px 4px 2px; display: flex; justify-content: center; }
.telefon-gomb { width: 54px; height: 6px; background: #5a3b22; }

.buborek {
  align-self: flex-start; max-width: 88%;
  background: #2e1c0e; border-left: 3px solid #5a3b22;
  padding: 5px 8px;
  display: flex; flex-direction: column; gap: 2px;
}
.buborek.enyem { align-self: flex-end; background: #3f2a10; border-left: none; border-right: 3px solid #ffd257; }
.buborek.rendszer { align-self: center; background: none; border: none; opacity: 0.7; }
.buborek.lemond { border-left-color: #3a2410; opacity: 0.75; }

/* ---------------------------------------------------- felulnezeti auto */

.auto-felul { flex: 0 0 auto; position: relative; }
.ules-hely {
  border: var(--px) dashed rgba(255, 210, 87, 0.35);
  background: rgba(20, 12, 7, 0.45);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; overflow: hidden;
}
.ules-hely:hover { border-color: var(--arany); background: rgba(74, 50, 16, 0.6); }
.ules-hely.tele { border-style: solid; border-color: rgba(138, 98, 56, 0.9); background: rgba(20, 12, 7, 0.2); }
.ules-hely.sofor { border-color: var(--arany); }
.ules-hely.tiltott { border-color: var(--piros); cursor: not-allowed; }
.ules-hely .portre { border: none; background: none; }
.ules-tartalom {
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  pointer-events: none; position: relative;
}
/* Ha valakinek pont a kedvenc helye jutott, egy zold plusz jelzi. */
.ules-kedv { position: absolute; top: -2px; right: -4px; }
.ules-hely.kedvenc { border-color: #9aa45a; }

.kocsi-doboz { display: flex; flex-direction: column; align-items: center; gap: 5px; }

/* ------------------------------------------------------- drag and drop
 * A kintiek es az ulesben levok is huzhatoak. A cel keret szine mondja
 * meg, hogy elfogadja-e a dobast.
 */

.kartya[draggable="true"], .ules-hely[draggable="true"] { cursor: grab; }
.huzva { opacity: 0.4; }
.cel-ok { border-color: var(--arany) !important; background: rgba(74, 50, 16, 0.75) !important; }
.cel-nem { border-color: var(--piros) !important; background: rgba(90, 20, 10, 0.5) !important; }

.kintiek {
  padding: 8px; margin-bottom: 8px;
  border: var(--px) dashed var(--keret);
  background: rgba(20, 12, 7, 0.4);
  display: flex; flex-direction: column; gap: 6px;
  min-height: 92px;
}
.kintiek.cel-ok, .kintiek.cel-nem { border-style: solid; }

/* A verzio a cimkepernyo jobb also sarkaban. Nem koppinthato, nem takar. */
.verzio { position: absolute; right: 12px; bottom: 10px; z-index: 2; pointer-events: none; }