/* =======================================================================
   KLASSZIKUS TÉMA (sötét, letisztult)  –  ezt a fájlt szabadon szerkesztheted.
   A másik elérhető stílus: themes/medieval.css. Váltás: config.js → style.theme.
   A 3D nézet ugyanebből a fájlból veszi a kinézetet: minden réteg egy
   csoport- és egy altípus-osztályt kap (pl. `.mf-roads--motorway`), a
   viewer pedig kiolvassa a tulajdonságokat, és abból épít 3D anyagot:

     fill              → terület színe (épületnél a fal/tető alapszíne)
     stroke            → vonal színe
     stroke-width      → vonalszélesség CSS-px-ben, amit a
                         --road-width-scale szoroz **méterré**
     stroke-dasharray  → a 3D szalag is szaggatott lesz
     fill-opacity      → a talaj színére "ráégetve" (átlátszatlan anyag)
     --h               → épületmagasság méterben (épület-osztályokon)
     --w               → vonalszélesség méterben (felülírja a stroke-width-et)
     --y               → a réteg magassága a talaj fölött (a csempe
                         felbontásához skálázva, hogy távolról se villogjon)

   Változtatás után elég az oldalt újratölteni.
   A nappali változat a fájl végén van (html[data-daytime="day"]).
   ======================================================================= */

:root {
  --card-head-bg: #33251a;      /* a POI-kártya fejléce */
  /* A RENDSZERSÁV színe: a telefon órája/térereje alatti csík a telepített
     alkalmazásban, és a böngésző eszköztárának árnyalata (`theme-color`).
     Szándékosan ugyanaz a barna, mint a kártyafejléc — az alkalmazás kerete
     egy szín —, és szándékosan NEM követi a napszakot: a térkép világosodik
     és sötétedik, a keret nem. */
  --chrome-bg: #33251a;
  --card-head-fg: #f2e6d2;
  --card-gold: #b9a05e;          /* a POI-kártya arany szegélye */
  --poi-near: #6d9410;          /* közeli POI pulzálása (sötét zöld-sárga) */
  --map-bg: #0e1726;         /* háttér / üres terület */

  /* ---- 3D jelenet ---------------------------------------------------- */
  --ground-color: #141d2e;   /* a talaj-lap színe (ide olvad az átlátszóság) */
  --sky-top: #070d1a;        /* ég teteje */
  --sky-horizon: #22364f;    /* ég alja / a köd színe */

  --sun-color: #ffe7c4;
  --sun-intensity: 1.6;
  --sun-azimuth: 135;        /* fok, 0 = észak */
  --sun-elevation: 46;       /* fok a horizont fölött */
  --hemi-sky: #8fb0d6;       /* a "felülről jövő" szórt fény színe */
  --hemi-ground: #2a3450;    /* az alulról visszaverődő fény színe */
  --hemi-intensity: 1.6;
  --ambient-intensity: .35;

  --road-width-scale: 2.4;   /* CSS-px stroke-width → méter */
  --road-min-px: 1.7;        /* ennél vékonyabb út ne tűnjön el */
  --building-height-scale: 1;
  --wall-shade: .68;         /* falak sötétítése */
  --roof-shade: 1.28;        /* tetők világosítása (ettől "állnak ki" a házak) */

  /* ---- kezelőfelület (letöltő képernyő, HUD, kártyák) ----------------- */
  --panel-bg: #1e2128;
  --panel-fg: #d8dce3;
  --panel-muted: #8b93a2;
  --accent: #4b9fff;
  --border: #333844;
  --hud-bg: #0e1726cc;
  --field-bg: #14171d;
  --btn-bg: #2b3039;
  --err-color: #ff8a80;
  --code-bg: #2a2f38;
  --ui-font: system-ui, "Segoe UI", Roboto, sans-serif;
  --ui-radius: 8px;
  --compass-color: #e35c5c;     /* az iránytű északi fele */
  --compass-ring: #48546a;      /* számlap gyűrű és osztások */
  --compass-dial: #97a2b5;      /* déli fele + tengely */
  --compass-size: 46px;
  --parchment-bg: #d9cdb4;      /* a menügomb pergamen-ikonja */
  --parchment-roll: #b9a988;
  --parchment-ink: #5a5140;

  /* ---- textúra (a 3D felületek szemcséje) ----------------------------- */
  --texture: none;              /* none | paper */

  --marker-color: #2ea3ff;      /* a GPS pontossági kör színe */
  --marker-size: 46px;          /* a marker átmérője a képernyőn */
  --marker-border: 3px;         /* a fehér keret vastagsága */
  --marker-tail: 10px;          /* a talajra mutató "farok" mérete */
  --marker-ring: #ffffff;       /* keret és farok színe */
  --marker-shadow: 0 5px 14px rgba(0, 0, 0, .6), 0 0 0 1px rgba(0, 0, 0, .35);

  --label-outline: rgba(0, 0, 0, .8);   /* a feliratok kontúrja */
  /* a 3D térkép feliratainak betűcsaládja (a méretet a viewer adja hozzá) */
  --label-font: system-ui, "Segoe UI", Roboto, sans-serif;
}

/* alap: minden vonal vékony szürke, minden terület halvány.
   (egyetlen .mf osztály => alacsony specifikusság, a lenti szabályok felülírják) */
.mf {
  stroke: #43506a;
  stroke-width: 1;
  fill: #1b2740;
  fill-opacity: .6;
  stroke-linejoin: round;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}

/* ---- VÍZ -------------------------------------------------------------- */
.mf-water            { fill: #21486e; fill-opacity: .9; stroke: #2e5c88; stroke-width: 1; }
.mf-water--river,
.mf-water--stream,
.mf-water--canal     { fill: none; stroke: #3d7fb8; stroke-width: 2.5; }
/* A TENGER a partvonalból (lib/coast.js): a tavakkal egy színű és textúrájú.
   A földhasználat (0.10) és a növényzet (0.25) FÖLÖTT, a tavak (0.40), a mólók
   és az utak ALATT áll (--y): a kikötő-terület (leisure=marina) az OSM-ben a
   vizes medencét is lefedi, és alatta a víz eltűnt volna. A tenger csak a
   partvonal vízoldalát fedi, tehát valódi szárazföldet nem takar. */
.mf-water--sea       { --y: 0.33; }
.mf-water--coastline { fill: none; stroke-width: 1; }
.mf-water--wetland   { fill: #2a5568; fill-opacity: .5; stroke: none; }

/* ---- TERMÉSZET / ZÖLD ---------------------------------------------- */
.mf-nature           { fill: #24422b; fill-opacity: .8; stroke: none; }
.mf-nature--forest   { fill: #1f3d29; }
.mf-nature--park,
.mf-nature--garden   { fill: #2c5233; }

/* ---- FÖLDHASZNÁLAT ------------------------------------------------- */
.mf-landuse              { fill: #2a2f3d; fill-opacity: .55; stroke: none; }
.mf-landuse--residential { fill: #2b2c33; }
.mf-landuse--industrial  { fill: #38323d; }
.mf-landuse--commercial  { fill: #3a3630; }
.mf-landuse--farmland    { fill: #33352b; }
.mf-landuse--cemetery    { fill: #263528; }

/* ---- ÉPÜLETEK ----------------------------------------------------
   A `--h` az épület magassága méterben. Ha az OSM-adatban van `height`
   vagy `building:levels`, az erősebb; különben ez az alap, amit az
   alaprajz mérete és egy koordináta-alapú "véletlen" módosít. */
.mf-buildings        { fill: #454e66; fill-opacity: 1; stroke: #4c566f; stroke-width: .5; --h: 9; }
.mf-buildings--house,
.mf-buildings--detached,
.mf-buildings--bungalow  { fill: #3f4557; --h: 6; }
.mf-buildings--apartments,
.mf-buildings--residential { fill: #414a63; --h: 15; }
.mf-buildings--commercial,
.mf-buildings--retail    { fill: #4a4658; --h: 11; }
.mf-buildings--industrial,
.mf-buildings--warehouse { fill: #3f4450; --h: 8; }
.mf-buildings--school,
.mf-buildings--hospital,
.mf-buildings--university { fill: #45506b; --h: 13; }
.mf-buildings--church,
.mf-buildings--cathedral,
.mf-buildings--chapel    { fill: #5a5266; --h: 24; }
.mf-buildings--tower,
.mf-buildings--skyscraper { fill: #4d5872; --h: 45; }
.mf-buildings--garage,
.mf-buildings--garages,
.mf-buildings--shed,
.mf-buildings--hut       { fill: #383e4d; --h: 3.5; }

/* ---- UTAK ------------------------------------------------------- */
/* SZEGÉLY minden úton (`--casing` + `--casing-w`, lásd build3d.js): vékony,
   sötétebb perem az úttest két oldalán. Nappal a fehér úttest a világos
   tájékon szinte nyom nélkül eltűnik — a perem az, ami visszaadja a szélét.
   A szám a `stroke-width` egységében, OLDALANKÉNT. */
.mf-roads            { fill: none; stroke: #6b7488; stroke-width: 1.5;
                       --casing: #3a4150; --casing-w: .45; }
.mf-roads--motorway,
.mf-roads--trunk     { stroke: #e8935f; stroke-width: 4; }
.mf-roads--primary   { stroke: #e6b15c; stroke-width: 3.5; }
.mf-roads--secondary { stroke: #e8d18a; stroke-width: 3; }
.mf-roads--tertiary  { stroke: #cfd6e4; stroke-width: 2.5; }
.mf-roads--residential,
.mf-roads--living-street,
.mf-roads--unclassified,
.mf-roads--service   { stroke: #9aa3b7; stroke-width: 2; }
.mf-roads--footway,
.mf-roads--path,
.mf-roads--pedestrian,
.mf-roads--track,
.mf-roads--cycleway  { stroke: #8a7f74; stroke-width: 1; stroke-dasharray: 3 3;
                       --casing: #4a4238; --casing-w: .26; }

/* ---- VASÚT ---------------------------------------------------

   Nem szaggatott vonal, hanem LÉTRA: a két oldalfa a sínszalag majdnem
   fekete szegélye, a fokok a keresztirányú talpfák (lásd build3d.js
   `crossTies`), és a fokok nem lógnak túl. A szaggatott vonal bármi lehetett
   volna — ezt viszont egy pillantásra vasútnak olvassa mindenki.

   A fok VASTAGABB, mint az oldalfa: egy létrán is a fokok a vaskosabbak. */
.mf-railway          { fill: none; stroke: #aeb4c0; stroke-width: 1.8;
                       --casing: #15171c; --casing-w: .26;
                       --tie-gap: 4.5; --tie-len: 1; --tie-w: .42;
                       --tie-color: #15171c; }
.mf-railway--subway  { stroke: #c78ce8; --casing: #1d1226; --tie-color: #1d1226; }

/* ---- HATÁROK ----------------------------------------------- */
.mf-boundary         { fill: none; stroke: #7d5c9c; stroke-width: 1; stroke-dasharray: 8 3 2 3; opacity: .6; }

/* ---- POI PONTOK ------------------------------------------- */
.mf-poi              { fill: #ffd166; stroke: #1e2128; stroke-width: 1.5; }
.mf-poi--restaurant,
.mf-poi--cafe,
.mf-poi--fast-food   { fill: #ff8c69; }
.mf-poi--parking     { fill: #6ea8ff; }
.mf-places           { fill: #ffffff; stroke: #000; stroke-width: 2; }

/* ---- EGYÉB ---------------------------------------------- */
.mf-other            { fill: none; stroke: #4a5266; stroke-width: 1; opacity: .5; }

/* ---- SAJÁT HELYZET (GPS) ------------------------------- */
.mf-here             { fill: #2ea3ff; stroke: #ffffff; stroke-width: 3;
                       filter: drop-shadow(0 0 4px #2ea3ff); animation: mf-pulse 2s ease-out infinite; }
.mf-here-accuracy    { fill: #2ea3ff; fill-opacity: .12; stroke: #2ea3ff; stroke-opacity: .5; stroke-width: 1; }
@keyframes mf-pulse {
  0%   { stroke-width: 3; }
  50%  { stroke-width: 8; }
  100% { stroke-width: 3; }
}

/* A .mf-here / .mf-here-accuracy már nem használt: a marker egy HTML-elem
   (kör alakú kép fehér kerettel és árnyékkal, lásd a --marker-* változókat
   és a ui.css #marker szabályait), a GPS pontossági kör pedig 3D korong,
   aminek a színét a --marker-color adja. A szabályok referenciának maradtak. */

/* =======================================================================
   NAPPALI TÉMA
   A viewer a config.js-ben megadott órák között (alapból 06:00–18:00) a
   <html> elemre data-daytime="day"-t tesz, egyébként "night"-ot. Itt csak a
   nappali eltéréseket írjuk felül — a fenti szabályok az éjszakai alapok.
   ======================================================================= */

html[data-daytime="day"] {
  --compass-ring: #b6bfcc;
  --compass-dial: #6b7686;
  --map-bg: #e6ecf3;
  --ground-color: #eef1f5;      /* ide olvad az átlátszóság */
  --sky-top: #4c8ed4;
  --sky-horizon: #cfe2f4;

  /* BORULT ÉG — esőben, havazásban és erősen felhős időben ezekhez keverünk
     (lásd scene3d.js `_skyColors`). Kék helyett ólomszürke, a horizont felé
     fakuló fehéresbe. A `--sun-overcast` a nap erejének a szorzója teljes
     borultságnál: napsütötte talaj szürke ég alatt ellentmondás volna. */
  --sky-top-overcast: #6a737c;
  --sky-horizon-overcast: #b9c0c6;
  --hemi-sky-overcast: #c9ced3;
  --sun-overcast: .45;

  --sun-color: #fff6e2;
  --sun-intensity: 2;
  --sun-elevation: 58;
  --hemi-sky: #dcebff;
  --hemi-ground: #c9d1da;
  --hemi-intensity: 2;
  --ambient-intensity: .55;

  --wall-shade: .8;
  --roof-shade: 1.08;

  --marker-color: #1a73e8;
  --marker-ring: #ffffff;
  --marker-shadow: 0 4px 12px rgba(0, 0, 0, .3), 0 0 0 1px rgba(0, 0, 0, .12);

  /* a feliratok kerete világos háttéren fehér legyen, ne fekete */
  --label-outline: rgba(255, 255, 255, .95);

  /* kezelőfelület (letöltő képernyő, HUD, elem-infó) */
  --panel-bg: #ffffffee;
  --panel-fg: #1f2530;
  --panel-muted: #5d6675;
  --border: #c6cfda;
  --accent: #1a73e8;
  --hud-bg: #ffffffcc;
  --field-bg: #f2f5f9;
  --btn-bg: #eef1f6;
  --err-color: #c0392b;
  --code-bg: #e6eaf0;
}

/* alap: halvány szürke vonal / világos terület */
html:not([data-daytime="night"]) .mf { stroke: #b9c1cd; fill: #dfe4ea; --label-color: #39404e; }

/* ---- VÍZ -------------------------------------------------------------- */
html:not([data-daytime="night"]) .mf-water           { fill: #a8cae9; fill-opacity: 1; stroke: #8fb6d8; --label-color: #2a6ea8; }
html:not([data-daytime="night"]) .mf-water--river,
html:not([data-daytime="night"]) .mf-water--stream,
html:not([data-daytime="night"]) .mf-water--canal    { fill: none; stroke: #86b8e0; }
html:not([data-daytime="night"]) .mf-water--wetland  { fill: #bcd6dd; }

/* ---- TERMÉSZET / ZÖLD ------------------------------------------------- */
html:not([data-daytime="night"]) .mf-nature          { fill: #cbe0b6; --label-color: #4a6b39; }
html:not([data-daytime="night"]) .mf-nature--forest  { fill: #bcd5a4; }
html:not([data-daytime="night"]) .mf-nature--park,
html:not([data-daytime="night"]) .mf-nature--garden  { fill: #cfe7bb; }

/* ---- FÖLDHASZNÁLAT ---------------------------------------------------- */
html:not([data-daytime="night"]) .mf-landuse             { fill: #e4e6e3; }
html:not([data-daytime="night"]) .mf-landuse--residential { fill: #e8e6e3; }
html:not([data-daytime="night"]) .mf-landuse--industrial { fill: #e2dee6; }
html:not([data-daytime="night"]) .mf-landuse--commercial { fill: #efe7db; }
html:not([data-daytime="night"]) .mf-landuse--farmland   { fill: #ebe9da; }
html:not([data-daytime="night"]) .mf-landuse--cemetery   { fill: #dbe5db; }

/* ---- ÉPÜLETEK --------------------------------------------------------- */
html:not([data-daytime="night"]) .mf-buildings           { fill: #d3d7de; stroke: #bcc3cd; }
html:not([data-daytime="night"]) .mf-buildings--house,
html:not([data-daytime="night"]) .mf-buildings--detached,
html:not([data-daytime="night"]) .mf-buildings--bungalow { fill: #d8d9dd; }
html:not([data-daytime="night"]) .mf-buildings--apartments,
html:not([data-daytime="night"]) .mf-buildings--residential { fill: #cfd4dd; }
html:not([data-daytime="night"]) .mf-buildings--commercial,
html:not([data-daytime="night"]) .mf-buildings--retail   { fill: #ded6d8; }
html:not([data-daytime="night"]) .mf-buildings--church,
html:not([data-daytime="night"]) .mf-buildings--cathedral,
html:not([data-daytime="night"]) .mf-buildings--chapel   { fill: #d9d1dd; }
html:not([data-daytime="night"]) .mf-buildings--tower,
html:not([data-daytime="night"]) .mf-buildings--skyscraper { fill: #c9d2df; }

/* ---- UTAK ------------------------------------------------------------- */
html:not([data-daytime="night"]) .mf-roads               { stroke: #ffffff; --label-color: #4a5262;
                                                           --casing: #b9c0cc; }
html:not([data-daytime="night"]) .mf-roads--motorway,
html:not([data-daytime="night"]) .mf-roads--trunk        { stroke: #f0a06a; --label-color: #a95b23; }
html:not([data-daytime="night"]) .mf-roads--primary      { stroke: #f5c877; --label-color: #a37a1e; }
html:not([data-daytime="night"]) .mf-roads--secondary    { stroke: #f2e28d; --label-color: #8c7a1c; }
html:not([data-daytime="night"]) .mf-roads--tertiary     { stroke: #ffffff; }
html:not([data-daytime="night"]) .mf-roads--residential,
html:not([data-daytime="night"]) .mf-roads--living-street,
html:not([data-daytime="night"]) .mf-roads--unclassified,
html:not([data-daytime="night"]) .mf-roads--service      { stroke: #ffffff; }
html:not([data-daytime="night"]) .mf-roads--footway,
html:not([data-daytime="night"]) .mf-roads--path,
html:not([data-daytime="night"]) .mf-roads--pedestrian,
html:not([data-daytime="night"]) .mf-roads--track,
html:not([data-daytime="night"]) .mf-roads--cycleway     { stroke: #b3a08c; --casing: #7d6e5c; }

/* ---- VASÚT / HATÁROK / PONTOK ----------------------------------------- */
html:not([data-daytime="night"]) .mf-railway             { stroke: #c9cdd6;
                                                           --casing: #1a1d24; --tie-color: #1a1d24; }
html:not([data-daytime="night"]) .mf-railway--subway     { stroke: #9a6cc0; }
html:not([data-daytime="night"]) .mf-boundary            { stroke: #9a7bbd; }
html:not([data-daytime="night"]) .mf-poi                 { fill: #e39a2c; stroke: #ffffff; --label-color: #8a5a10; }
html:not([data-daytime="night"]) .mf-poi--restaurant,
html:not([data-daytime="night"]) .mf-poi--cafe,
html:not([data-daytime="night"]) .mf-poi--fast-food      { fill: #e2714a; }
html:not([data-daytime="night"]) .mf-poi--parking        { fill: #4a86d8; }
html:not([data-daytime="night"]) .mf-places              { fill: #2b3242; stroke: #ffffff; --label-color: #222a38; }
html:not([data-daytime="night"]) .mf-other               { stroke: #c2c8d2; }

/* =======================================================================
   IDŐJÁRÁS — a csapadék színei (lásd src/weather3d.js)
   ======================================================================= */
:root {
  --rain-color: #b9d4f0;
  --rain-opacity: .45;
  --snow-color: #ffffff;
  --snow-opacity: .85;
}

html[data-daytime="day"] {
  --rain-color: #dcebfa;
  --rain-opacity: .5;
}

/* =======================================================================
   ALKONYAT — a nappali térképszínek maradnak, de az égbolt és a fények
   melegek és alacsonyak (a rétegszabályok a "nem éjszaka" ágban vannak).
   ======================================================================= */
html[data-daytime="dusk"] {
  --compass-ring: #c3b3a6;
  --compass-dial: #7b6f64;
  --map-bg: #d9cfc6;
  --ground-color: #cfc4bd;
  --sky-top: #35406b;
  --sky-horizon: #e79a5c;

  /* Borult alkonyat: a naplemente narancsa felhők mögött nincs — marad egy
     fakó, szürkéslila derengés. */
  --sky-top-overcast: #3a3e48;
  --sky-horizon-overcast: #79767b;
  --hemi-sky-overcast: #8d8a8c;
  --sun-overcast: .5;

  --sun-color: #ffb56b;
  --sun-intensity: 1.5;
  --sun-elevation: 12;          /* alacsony nap → hosszú árnyékok */
  --hemi-sky: #cba98f;
  --hemi-ground: #7d7266;
  --hemi-intensity: 1.3;
  --ambient-intensity: .4;

  --wall-shade: .7;
  --roof-shade: 1.22;

  --label-outline: rgba(255, 246, 235, .85);

  --rain-color: #e8d3c0;

  /* kezelőfelület: a nappalihoz hasonló, csak melegebb */
  --panel-bg: #f6efe9;
  --panel-fg: #2b2620;
  --panel-muted: #6b6058;
  --accent: #c2662a;
  --border: #cbbcb0;
  --hud-bg: #f6efe9cc;
  --field-bg: #efe6de;
  --btn-bg: #ece2d9;
  --err-color: #b3402a;
  --code-bg: #e6dbd1;
  --compass-color: #c2402a;

  --marker-color: #c2662a;
  --marker-ring: #fff6ec;
  --marker-shadow: 0 4px 12px rgba(60, 40, 25, .35), 0 0 0 1px rgba(90, 60, 40, .2);
}

/* A KOCKAPÁRBAJ és a CÉLBALÖVÉS nappal és alkonyatkor is az ESTI színekkel (a fájl elején):
   a sárga összeg, a forduló felirata és a pontszám világos háttéren nem
   olvasható (mint a középkori témában, themes/medieval.css). */
html:not([data-daytime="night"]) #poi-screen[data-esti] {
  --panel-bg: #1e2128;
  --panel-fg: #d8dce3;
  --panel-muted: #8b93a2;
  --accent: #4b9fff;
  --border: #333844;
  --field-bg: #14171d;
  --btn-bg: #2b3039;
  --err-color: #ff8a80;
  background: var(--panel-bg);
  color: var(--panel-fg);
}