/* ==========================================================================
   STÍLUSLAP — karrier + meccs
   ==========================================================================
   A régi css/style.less + css/style-bt.less párosa, WordPress nélkül.
   Nincs Bootstrap, nincs FontAwesome, nincs CDN, nincs Google Fonts.

   KÉT KÉPERNYŐ:
     /index.php        KARRIER — a játékos útja, egyben a játékindító
     /play/index.html  MECCS   — az izometrikus sziget

   Az osztálynevek a témából jönnek, hogy ami a régi LESS-ről tudsz,
   érvényben maradjon: .header .my_score .stars .window.question
   .the_message .statustext .the_timer > .timer_bar
   ========================================================================== */

/* --------------------------------------------------------------------------
   BETŰK — helyben, nem a fonts.googleapis.com-ról
   --------------------------------------------------------------------------
   Változó súlyú Nunito: EGY fájl, 200-tól 1000-ig minden vastagság. A latin
   és latin-ext tartományra szűkítve (kellenek az ő és ű betűk), így 44 KB.
   Ezzel a 900-as pontszámok és cím-pirulák végre valódi 900-asak, nem a
   böngésző szintetikus vastagítása.
   -------------------------------------------------------------------------- */
@font-face{
  font-family:'Nunito';
  src:url('fonts/nunito-var.woff2') format('woff2-variations'),
      url('fonts/nunito-var.woff2') format('woff2');
  font-weight:200 1000;
  font-style:normal;
  font-display:swap;
}

:root{
  --purple:      #6400AA;
  --purple-light:#8A40BF;
  --purple-dark: #510287;
  --pink:        #E60050;
  --blue:        #00A0D6;
  --green:       #2BAC6E;
  --red:         #C0081B;
  --gold:        #FFC107;

  --white:       #FFFFFF;
  --black:       #000000;
  --grey-light:  #D8D8D8;
  --grey:        #A2A2A2;
  --grey-dark:   #606060;

  --font:'Nunito', ui-sans-serif, system-ui, -apple-system, "Segoe UI",
         Roboto, "Helvetica Neue", Arial, sans-serif;

  --shadow:       0 .5rem 1rem 0 rgba(0,0,0,.5);
  --shadow-big:   0 .5rem 1.5rem 0 rgba(0,0,0,.5);
  --shadow-light: 0 .5rem 1rem 0 rgba(0,0,0,.25);
}

*,*::before,*::after{ box-sizing:border-box; }

html,body{
  margin:0; padding:0; height:100%;
  font-family:var(--font);
  color:var(--white);
  background-color:var(--purple-dark);
  -webkit-font-smoothing:antialiased;
  overscroll-behavior:none;
}
body{ display:flex; flex-direction:column; height:100dvh; overflow:hidden; }

button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
a{ color:inherit; }
:focus-visible{ outline:2px solid var(--blue); outline-offset:2px; }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
}

/* ==========================================================================
   FEJLÉC
   ========================================================================== */
.header{
  flex:0 0 auto; position:relative;
  background-color:var(--purple);
  box-shadow:var(--shadow);
  border-left:.25rem solid var(--green);
  border-right:.25rem solid var(--red);
  padding:.75rem 1.25rem;
  padding-top:max(.75rem, env(safe-area-inset-top));
  /* Jobb oldalt hely a fix menügombnak: enélkül az "Új meccs" és az
     ellenfél pontszáma alábújik. */
  padding-right:4.5rem;
  display:flex; align-items:center; gap:1rem;
  z-index:9998;
}
.block_left{ flex:1 1 auto; min-width:0; }
.block_right{ flex:0 0 auto; text-align:right; min-width:0; }

.my_nick{
  display:block; font-size:1rem; font-weight:400; line-height:1rem;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.my_score{
  display:inline-block; font-weight:900;
  font-size:2.25rem; line-height:2.25rem;
  font-variant-numeric:tabular-nums;
}

/* Ellenfelek. Kettőnél többnél egymás alatt, kisebben — a fejléc szélessége
   nem nő a játékosszámmal. */
.foes{ display:flex; flex-direction:column; align-items:flex-end; gap:.125rem; }
.foes .foe{ display:flex; align-items:baseline; gap:.5rem; }
.opponent_nick{ font-size:.875rem; font-weight:400; opacity:.5;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:9rem; }
.opponent_score{ font-weight:900; font-size:1.5rem; line-height:1.5rem;
  opacity:.5; font-variant-numeric:tabular-nums; }
.foes.many .opponent_score{ font-size:1.125rem; line-height:1.25rem; }
.foes.many .opponent_nick{ font-size:.75rem; }

.stars{ display:inline-block; margin-left:.5rem; vertical-align:.3rem; }
.stars .star{
  display:inline-block; width:1.5rem; height:1.5rem;
  background-image:url('../img/star-full.png');
  background-size:contain; background-position:center; background-repeat:no-repeat;
  transition:transform .3s;
}
.stars .star.off{ background-image:url('../img/star-empty.png'); transform:scale(.9); }

@media (max-width:575px){
  .header{ padding:.625rem 1rem; }
  .my_score{ font-size:1.875rem; line-height:1.875rem; }
  .opponent_score{ font-size:1.25rem; line-height:1.25rem; }
  .stars .star{ width:1.125rem; height:1.125rem; vertical-align:.1rem; }
}

/* ==========================================================================
   MECCS — IZOMETRIKUS TÉRKÉP
   ==========================================================================
   Egy alapkép (mono sziget), rajta szeletenként egy-egy színes darab. A
   darabok a saját befoglaló dobozukra vágva, százalékban pozicionálva:
   441 KB az egész készlet TELJES 4200x2100-as felbontáson. (Korábban
   feleztük a méretet, ezért volt lágy nagyításkor.)

   A térkép görgethető és nagyítható a felület mögött. */
.mapview{
  flex:1 1 auto; position:relative; min-height:0;
  overflow:hidden;
  background-color:var(--purple);
  cursor:grab;
  touch-action:none;
}
.mapview.drag{ cursor:grabbing; }

.mapworld{
  position:absolute; top:0; left:0; width:100%;
  transform-origin:0 0;
  will-change:transform;
}
.mapworld .mapbase{ display:block; width:100%; height:auto; }

.mapworld .sec{
  position:absolute;
  background-size:100% 100%; background-repeat:no-repeat;
  opacity:0; transform:scale(1.05);
  transition:opacity .45s ease, transform .45s cubic-bezier(.2,1.3,.4,1);
  pointer-events:none;
}
.mapworld .sec.on{ opacity:1; transform:scale(1); }

/* Kattintható terület a végjátéki választáshoz. Mindig láthatatlan: a
   VÁLASZTHATÓSÁGOT nem keret jelzi, hanem az, hogy a többi terület
   elhalványul (lásd .picking lentebb). Egy narancs téglalap-háló a
   szeletek fölött csak zajt csinál, ráadásul a rácshoz igazodik, nem a
   szeletek valódi alakjához. */
.mapworld .hit{
  position:absolute; padding:0; border:0; background:none;
  pointer-events:none; opacity:0;
}
.mapworld .hit.pickable{ pointer-events:auto; cursor:pointer; }

/* VÁLASZTÁSI ÁLLAPOT
   Ami támadható, az marad, amilyen volt. Minden más — a saját területeim és
   a nem szomszédos ellenséges területek — 20%-ra halványul, felmutatva
   alatta a lilát. Így a választható területek nem kiabálnak, hanem
   egyszerűen ők maradnak az egyetlen élő dolog a képen. */
.mapworld.picking .sec.on{ opacity:.4; }
.mapworld.picking .sec.on.cand{ opacity:1; }
.mapworld.picking .sec.on.cand{ filter:saturate(1.15); }

/* AMIÉRT ÉPP HARCOLUNK, az 40%-ra megy — mindenkinél, a saját színében.
   Zöld 40%: elveszíthetem. Piros 40%: megnyerhetem. Egy fél-áttetsző
   terület azt mondja, hogy ez most nem eldöntött, és pont ez a lényeg. */
.mapworld .sec.on.fight{
  opacity:.4;
  animation:fightPulse 1.4s ease-in-out infinite alternate;
}
@keyframes fightPulse{ from{ opacity:.32; } to{ opacity:.5; } }

/* A TŰ. Vektor, és ellenskálázzuk: a szélességét a game.js számolja úgy,
   hogy a képernyőn mindig ugyanakkora legyen. A talppontja a megadott
   koordináta, ezért toljuk el. */
.mapworld .pin{
  position:absolute;
  transform:translate(-50%,-100%);
  opacity:0;
  transition:opacity .3s, left .8s cubic-bezier(.3,.8,.3,1),
             top .8s cubic-bezier(.3,.8,.3,1);
  pointer-events:none;
  filter:drop-shadow(0 .35rem .5rem rgba(0,0,0,.45));
}
.mapworld .pin svg{ display:block; width:100%; height:auto; }
.mapworld .pin.on{ opacity:1; animation:pinbob 1.2s ease-in-out infinite alternate; }
@keyframes pinbob{ from{ transform:translate(-50%,-100%); }
                   to{ transform:translate(-50%,-108%); } }

.mapzoom{
  position:absolute; right:.75rem; top:.75rem;
  display:flex; flex-direction:column; gap:.375rem; z-index:5;
}
.mapzoom button{
  width:2.25rem; height:2.25rem; border-radius:.75rem;
  background-color:rgba(0,0,0,.28); color:var(--white);
  font-weight:900; font-size:1.125rem; line-height:1;
  display:grid; place-items:center; transition:background-color .2s;
}
.mapzoom button:hover{ background-color:rgba(0,0,0,.45); }

/* --------------------------------------------------------------------------
   ROBBANÓ FELIRAT — MECCSLABDA / N TÁMADÁS
   --------------------------------------------------------------------------
   Ez a meccs csúcspontja, és eddig észrevétlenül ment el. Izometrikus
   szilánkok szórnak szét, középen a felirat. */
.banner{
  position:absolute; inset:0; z-index:9998;
  display:grid; place-items:center;
  pointer-events:none;
  opacity:0;
}
.banner.in{ animation:bannerIn 5s ease-out forwards; }
@keyframes bannerIn{
  0%{ opacity:0; } 6%{ opacity:1; } 82%{ opacity:1; } 100%{ opacity:0; }
}

.banner strong{
  position:relative;
  font-weight:1000; font-size:clamp(2rem, 9vw, 5rem);
  line-height:1; letter-spacing:-.02em;
  color:var(--gold);
  text-shadow:0 .25rem 0 rgba(0,0,0,.35), 0 1rem 2rem rgba(0,0,0,.5);
  transform:scale(.6) rotate(-4deg);
  animation:bannerPop .6s cubic-bezier(.2,1.6,.4,1) forwards;
}
@keyframes bannerPop{ to{ transform:scale(1) rotate(-4deg); } }

.banner.match strong{ color:var(--gold); }
.banner.attacks strong{ color:var(--white); }

/* A ROBBANÁS
   ==========
   Húsz kis csillag pattan szét a felirat MÖGÜL, ballisztikus íven.

   A parabolát KÉT elem adja: a külső (i) vízszintesen mozog egyenletesen,
   a belső (svg) függőlegesen fel, majd le. Egyetlen transformmal nem lehet
   ívet rajzolni, mert a vízszintes és a függőleges összetevő időfüggése
   különbözik — vízszintesen egyenletes, függőlegesen lassuló-gyorsuló.

   A --x, --up és --fall vmin-ben van, NEM százalékban: a translate
   százaléka az elem saját méretéhez mérődik, nem a képernyőhöz. Ezen bukott
   el az előző változat, ott hét pixert mozdultak a szilánkok. */
.starburst{
  position:absolute; inset:0; overflow:visible; pointer-events:none;
}
.starburst i{
  position:absolute; left:50%; top:50%;
  width:2.25rem; height:2.25rem; margin:-1.125rem 0 0 -1.125rem;
  transform:translateX(0);
  animation:starX 1.5s linear var(--t) forwards;
}
.starburst svg{
  display:block; width:100%; height:100%;
  fill:var(--gold);
  filter:drop-shadow(0 .125rem .25rem rgba(0,0,0,.45));
  opacity:0;
  animation:starY 1.5s linear var(--t) forwards;
}

@keyframes starX{
  from{ transform:translateX(0); }
  to  { transform:translateX(var(--x)); }
}

/* Fel: lassuló. Le: gyorsuló. A kettő között a pálya csúcsa. */
@keyframes starY{
  0%{   opacity:0;
        transform:translateY(0) rotate(0deg) scale(calc(var(--s) * .4));
        animation-timing-function:cubic-bezier(.2,.7,.4,1); }
  8%{   opacity:1; }
  42%{  transform:translateY(calc(var(--up) * -1)) rotate(calc(var(--spin) * .5))
                  scale(var(--s));
        animation-timing-function:cubic-bezier(.5,0,.85,.4); }
  70%{  opacity:1; }
  100%{ opacity:0;
        transform:translateY(var(--fall)) rotate(var(--spin)) scale(var(--s)); }
}

/* ==========================================================================
   KÉRDÉS-ABLAK
   ==========================================================================
   A térkép FÖLÖTT úszik, nem tolja el — ezért lehet a térképet mögötte
   görgetni. */
.main{
  position:absolute; left:0; right:0; bottom:0;
  padding:0 1rem .5rem;
  z-index:9999;
  display:flex; flex-direction:column; align-items:center;
  pointer-events:none;
  /* A .mapview `grab` kurzort ad, és a kérdéslap azon BELÜL van. Enélkül az
     egész képernyő megfoghatónak látszik, a válaszok fölé érve is. */
  cursor:default;
}
.main .answers .a{ cursor:pointer; }
.main .answers .a:disabled{ cursor:default; }

.window{
  width:100%; max-width:600px; position:relative;
  background-color:var(--white); color:var(--black);
  border-radius:1rem; box-shadow:var(--shadow);
  pointer-events:auto;
  opacity:0; transform:translateY(1rem);
  transition:opacity .25s, transform .25s cubic-bezier(.2,.8,.3,1);
}
.window[hidden]{ display:none; }
.window.in{ opacity:1; transform:translateY(0); }

.corner{
  position:absolute; top:-1rem; right:-.25rem;
  width:2rem; height:2rem; border-radius:50%;
  background-color:var(--blue); border:2px solid var(--white);
  color:var(--white); display:grid; place-items:center;
  font-weight:900; font-size:1.375rem; line-height:1;
  box-shadow:var(--shadow-light);
}
.corner.question_mark::before{ content:"?"; }
.corner.clock{ background-color:var(--grey); }
.corner.clock::before{
  content:""; width:100%; height:100%;
  background-image:url('../img/hourglass.png');
  background-size:contain; background-position:center; background-repeat:no-repeat;
  animation:rotation 2s infinite linear;
}
@keyframes rotation{ to{ transform:rotate(360deg); } }

.q{ display:block; padding:1rem; font-weight:700;
  font-size:1rem; line-height:1.25rem; }

.answers{ display:block; padding:0 1rem;
  box-shadow:0 -.25rem .5rem 0 rgba(0,0,0,.125); }
.answers .a{
  display:flex; align-items:center; gap:.625rem;
  width:100%; text-align:left; padding:.5rem .375rem;
  font-weight:900; font-size:1.125rem; line-height:1.5rem;
  border-bottom:.125rem solid var(--grey-light);
  transition:opacity .2s;
}
.answers .a:last-child{ border-bottom:0; }
.answers .a .k{
  flex:0 0 auto; width:1.5rem; height:1.5rem; border-radius:50%;
  display:grid; place-items:center;
  background-color:var(--grey); color:var(--white);
  font-weight:900; font-size:.875rem; line-height:1;
  transition:background-color .2s;
}
.answers .a .t{ flex:1 1 auto; min-width:0; }
.answers .a.correct .k{ background-color:var(--green); }
.answers .a.wrong   .k{ background-color:var(--pink); }
.answers .a.inactive{ opacity:.25; pointer-events:none; }

/* Ki mit választott. Több játékosnál nevek, kettőnél csak egy pont. */
.answers .a .who{
  flex:0 0 auto; font-size:.75rem; font-weight:700;
  color:var(--grey-dark); opacity:0; transition:opacity .3s;
  max-width:9rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.answers .a.haspick .who{ opacity:.85; }

.the_message{ padding:1rem; text-align:center;
  color:var(--grey-dark); font-weight:700; }
.the_message .message_header{
  margin:-1rem -1rem 1rem; padding-bottom:1rem;
  background-image:url('../img/message-head.png');
  background-position:bottom; background-repeat:no-repeat; background-size:contain;
}
.the_message .message_header h4{
  margin:0; padding:1.25rem 0;
  font-size:1.5rem; font-weight:900; color:var(--blue);
}
.the_message .big{
  display:block; font-weight:900; color:var(--pink);
  font-size:3.5rem; line-height:1; margin:.25rem 0;
  font-variant-numeric:tabular-nums;
}
.the_message .sub{ display:block; font-size:.875rem; font-weight:700; }
.the_message .big-nick{ font-size:1.25rem; font-weight:900; color:var(--black); }
/* A meccs vége: a szikra a három csillag MÖGÖTT, de a fehér doboz ELŐTT.
   A sorrendet a rétegek adják: .endwrap a viszonyítási pont, benne a
   .starburst z-index 1-en, a csillagok képe 2-n. */
.the_message .endwrap{ position:relative; display:block; width:100%;
  height:4.5rem; }
.the_message .endwrap .starburst{ z-index:1; }
.the_message .endstars{
  position:relative; z-index:2;
  display:block; width:100%; height:100%;
  background-image:url('../img/stars-shadow.png');
  background-position:center; background-repeat:no-repeat; background-size:contain;
}

.the_message .endbtns{
  display:flex; justify-content:center; gap:.625rem; flex-wrap:wrap;
  margin-top:1rem;
}
.the_message .endbtns .go{ margin-top:0; }
.the_message .go.purple{ background-color:var(--purple); }
.the_message .go{
  display:inline-block; margin-top:.75rem;
  padding:.625rem 1.5rem; border-radius:1.5rem;
  background-color:var(--green); color:var(--white);
  font-weight:900; text-decoration:none; box-shadow:var(--shadow-light);
}

.statustext{ margin:.5rem 0 0; min-height:1.25rem;
  font-size:.875rem; opacity:.75; text-align:center; }

/* ==========================================================================
   KARRIER
   ==========================================================================
   A tapéta csak itt kell: a meccsen a sziget vize adja a hátteret. A csempe
   záródó, tehát ismétlésnél nem marad üres sáv az ikonok között. */
body.career{
  background-image:url('../img/pattern.svg');
  background-repeat:repeat;
  background-size:280px 280px;
}

/* --------------------------------------------------------------------------
   FEJLÉC: karika + három sor
   --------------------------------------------------------------------------
   A név külön sorban csúsztatta lefelé az egészet. Most a karika mellett
   három sor áll, függőlegesen a karikához igazítva:
     1. Jelenlegi állomásod: ELSŐ JÁRMŰ
     2. a csík
     3. 1300 pont a következő állomásig
   -------------------------------------------------------------------------- */
.level{ display:flex; align-items:center; gap:.875rem; min-width:0; }
.level .lv{
  flex:0 0 auto; width:3rem; height:3rem; border-radius:50%;
  background-color:var(--purple-dark); border:2px solid var(--white);
  display:grid; place-items:center; box-shadow:var(--shadow-light);
  font-weight:900; font-size:1.375rem; font-variant-numeric:tabular-nums;
}
.level .bar{ flex:1 1 auto; min-width:0; max-width:26rem; }
.level .where{
  display:block; font-size:.8125rem; font-weight:700; line-height:1.1;
  margin-bottom:.3125rem; opacity:.85;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.level .where b{ font-weight:900; text-transform:uppercase; opacity:1;
  letter-spacing:.03em; }
.level .track{
  display:block; height:.5rem; border-radius:.25rem;
  background-color:rgba(0,0,0,.28); overflow:hidden;
}
.level .track i{
  display:block; height:100%; width:0; border-radius:.25rem;
  background-color:var(--green);
  transition:width .8s cubic-bezier(.3,.8,.3,1);
}
.level .xp{ display:block; margin-top:.3125rem;
  font-size:.75rem; opacity:.7; font-weight:700; }

/* Az "Új meccs" a fejlécben marad, mert az a lap valódi célja. */
.header .newgame{
  flex:0 0 auto;
  padding:.75rem 1.5rem; border-radius:2rem;
  background-color:var(--green); color:var(--white);
  font-weight:900; font-size:1rem; text-decoration:none;
  box-shadow:var(--shadow-light);
  white-space:nowrap;
  transition:transform .2s;
}
.header .newgame:hover{ transform:translateY(-2px); }

@media (max-width:575px){
  .level .lv{ width:2.5rem; height:2.5rem; font-size:1.125rem; }
  .level .where{ font-size:.75rem; }
  .header .newgame{ padding:.625rem 1rem; font-size:.875rem; }
}

.careerwrap{
  flex:1 1 auto; min-height:0; overflow-y:auto;
  padding:1rem 1rem 2.5rem;
  -webkit-overflow-scrolling:touch;
}

/* Az összesítő FELÜL: az oldal a tetején nyílik, tehát ez látszik először. */
.stats{
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:.625rem; max-width:680px; margin:0 auto 1.25rem;
}
.stats div{
  background-color:rgba(0,0,0,.22); border-radius:1rem;
  padding:.75rem .5rem; text-align:center;
}
.stats b{ display:block; font-size:1.625rem; font-weight:900; line-height:1.1;
  font-variant-numeric:tabular-nums; }
.stats span{ display:block; margin-top:.125rem;
  font-size:.6875rem; opacity:.7; font-weight:700;
  text-transform:uppercase; letter-spacing:.06em; }

@media (max-width:575px){
  .stats{ grid-template-columns:repeat(2,1fr); }
  .stats b{ font-size:1.375rem; }
}

.careerinner{ position:relative; width:100%; max-width:680px; margin:0 auto; }

.the_path{ position:absolute; inset:0; width:100%; height:100%;
  pointer-events:none; z-index:0; overflow:visible; }
.the_path path{ fill:none; stroke-linecap:round; stroke-linejoin:round; }
.the_path .track{ stroke:var(--purple); }
.the_path .walked{ stroke:var(--white);
  transition:stroke-dashoffset .9s cubic-bezier(.4,0,.2,1); }

.the_map{ position:relative; z-index:1;
  display:grid; grid-template-columns:repeat(3,1fr); gap:1.25rem 1.5rem; }
.the_map section{ position:relative;
  display:flex; flex-direction:column; align-items:center; }

/* --------------------------------------------------------------------------
   A 45 CSS-SZABÁLY HELYETT KETTŐ
   --------------------------------------------------------------------------
   A page-quiz-bt.php-ban minden állomáshoz három background-image szabály
   tartozott (alap, .active, .ok) — 15 állomás, 45 sor, és minden új pálya
   újabb negyvenöt. A képek most két CSS-változóban ülnek, amiket a
   career.js ír ki a CAREER tömbből.
   -------------------------------------------------------------------------- */
.the_map .obj{
  position:relative; width:100%; aspect-ratio:1/1;
  background-image:var(--obj);
  background-size:contain; background-position:center bottom;
  background-repeat:no-repeat;
  transition:transform .35s ease;
}
.the_map section.ok .obj,
.the_map section.active .obj{ background-image:var(--obj-ok); }
.the_map section.active .obj{ animation:bounce 1s infinite alternate; }
@keyframes bounce{ from{ transform:translateY(0); } to{ transform:translateY(-.6rem); } }

/* A PIPA a rajzon BELÜL, jobb alul — így a cím-pirula közvetlenül alá kerül,
   és nem tolja szét a rácsot. */
.the_map .check{
  display:none; position:absolute; right:2%; bottom:0;
  width:2rem; height:2rem; border-radius:50%;
  border:1px solid var(--white); background-color:var(--green);
  box-shadow:var(--shadow-big); place-items:center;
}
.the_map .check svg{ width:58%; height:58%; stroke:#fff; stroke-width:3.4;
  fill:none; stroke-linecap:round; stroke-linejoin:round; }
.the_map section.ok .check{ display:grid; }

/* A CÍM a rajz ALATT. A pipa alja a rajz aljánál van, a cím pedig épp
   annyival lejjebb, hogy a teteje ne kerüljön a pipa alja alá. */
.the_map .title{
  position:relative;
  margin:-.875rem 0 0; padding:.375rem .625rem;
  border-radius:.5rem;
  background-color:var(--purple-dark); color:var(--white);
  font-weight:900; font-size:.8125rem; line-height:1rem;
  text-transform:uppercase; text-align:center;
  box-shadow:var(--shadow-big);
  max-width:100%;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.the_map section.active .title{ background-color:var(--white); color:var(--black); }
.the_map section.locked{ opacity:.62; }
.the_map section.locked .title{ background-color:rgba(0,0,0,.32); }

@media (max-width:767px){
  .the_map{ gap:1rem .75rem; }
  .the_map .title{ font-size:.6875rem; line-height:.875rem;
    padding:.25rem .375rem; border-radius:.375rem; margin-top:-.625rem; }
  .the_map .check{ width:1.375rem; height:1.375rem; }
}

/* ==========================================================================
   LÁBLÉC + IDŐZÍTŐ
   ========================================================================== */
.footer{
  flex:0 0 auto; height:3rem;
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:0 1rem; padding-bottom:env(safe-area-inset-bottom);
  position:relative; z-index:10;
}
.footer .exit{ font-weight:700; font-size:.875rem;
  color:var(--white); opacity:.5; transition:opacity .3s; text-decoration:none; }
.footer .exit:hover{ opacity:1; }
.footer .site_logo{ font-weight:900; font-size:.875rem;
  letter-spacing:.14em; text-transform:uppercase; opacity:.85; }

.footer .snd{ opacity:.5; transition:opacity .3s; display:grid; place-items:center;
  width:2rem; height:2rem; }
.footer .snd:hover{ opacity:1; }
.footer .snd svg{ width:1.125rem; height:1.125rem; fill:none; stroke:#fff;
  stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.footer .snd .off{ display:none; }
.footer .snd[aria-pressed="true"] .on{ display:none; }
.footer .snd[aria-pressed="true"] .off{ display:block; }

.the_timer{ position:fixed; left:0; right:0; bottom:0;
  height:.25rem; z-index:10000; pointer-events:none; }
.the_timer .timer_bar{ display:block; height:.25rem; width:0;
  background-color:var(--pink); }
.the_timer.go .timer_bar{ animation:the_timer_anim linear forwards; }
@keyframes the_timer_anim{ from{ width:100%; } to{ width:0; } }

/* ==========================================================================
   MENÜ — jobbról benyíló, teljes magasságú
   ==========================================================================
   Asztali gépen is így viselkedik, ugyanúgy, mint a connectini.com-on és a
   calcuedge.com-on. A markupot a menu.js építi: két képernyő plusz négy
   WP-ből jövő szöveges oldal használja, és egy új menüpont ne hat fájl
   átírása legyen.
   ========================================================================== */
.menubtn{
  position:fixed; top:.625rem; right:.75rem;
  top:max(.625rem, env(safe-area-inset-top));
  width:2.75rem; height:2.75rem; border-radius:.875rem;
  background-color:rgba(0,0,0,.3);
  display:grid; place-content:center; gap:.3125rem;
  z-index:10002;
  transition:background-color .2s;
}
.menubtn:hover{ background-color:rgba(0,0,0,.5); }
.menubtn i{
  display:block; width:1.25rem; height:.1875rem; border-radius:1px;
  background-color:var(--white);
  transition:transform .3s, opacity .2s;
}
body.menuopen .menubtn i:nth-child(1){ transform:translateY(.5rem) rotate(45deg); }
body.menuopen .menubtn i:nth-child(2){ opacity:0; }
body.menuopen .menubtn i:nth-child(3){ transform:translateY(-.5rem) rotate(-45deg); }

.menuscrim{
  position:fixed; inset:0; z-index:10000;
  background-color:rgba(0,0,0,.55);
  opacity:0; pointer-events:none;
  transition:opacity .3s;
}
body.menuopen .menuscrim{ opacity:1; pointer-events:auto; }

.menupanel{
  position:fixed; top:0; right:0; z-index:10001;
  width:min(20rem, 86vw); height:100dvh;
  background-color:var(--purple-dark);
  background-image:url('../img/pattern.svg');
  background-size:280px 280px;
  box-shadow:-.5rem 0 2rem rgba(0,0,0,.5);
  display:flex; flex-direction:column;
  transform:translateX(100%);
  transition:transform .32s cubic-bezier(.3,.9,.3,1);
  padding-top:env(safe-area-inset-top);
  padding-bottom:env(safe-area-inset-bottom);
}
body.menuopen .menupanel{ transform:translateX(0); }

.menuhead{
  flex:0 0 auto; display:flex; align-items:center; gap:.75rem;
  padding:1rem 1.25rem 1rem 1.25rem;
  border-bottom:1px solid rgba(255,255,255,.14);
}
.menuuser{ flex:1 1 auto; display:flex; align-items:center; gap:.75rem; min-width:0; }
.menuuser .av{
  flex:0 0 auto; width:2.75rem; height:2.75rem; border-radius:50%;
  background-color:var(--green); border:2px solid var(--white);
  display:grid; place-items:center;
  font-weight:900; font-size:1.25rem;
}
.menuuser .who{ min-width:0; }
.menuuser .who b{ display:block; font-weight:900; font-size:1rem;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.menuuser .who i{ display:block; font-style:normal;
  font-size:.75rem; font-weight:700; opacity:.6; }

.menuclose{ flex:0 0 auto; width:2.25rem; height:2.25rem;
  display:grid; place-items:center; opacity:.6; }
.menuclose:hover{ opacity:1; }
.menuclose svg{ width:1.25rem; height:1.25rem; fill:none; stroke:#fff;
  stroke-width:2.5; stroke-linecap:round; }

.menulist{ flex:1 1 auto; list-style:none; margin:0; padding:.75rem 0;
  overflow-y:auto; }
.menulist a{
  display:block; padding:.875rem 1.25rem;
  font-weight:900; font-size:1.125rem; text-decoration:none;
  border-left:.25rem solid transparent;
  transition:background-color .2s, border-color .2s;
}
.menulist a:hover{ background-color:rgba(255,255,255,.07); }
.menulist a.on{ border-left-color:var(--green);
  background-color:rgba(255,255,255,.1); }

.menufoot{ flex:0 0 auto; padding:1rem 1.25rem;
  border-top:1px solid rgba(255,255,255,.14); opacity:.5; }

/* A nagyítógombok ne bújjanak a menügomb alá. */
.mapzoom{ top:4.25rem; }

/* Területválasztás alatt a térkép nem mozgatható: a húzás elnyelné a
   kattintást, és ilyenkor dönteni kell, nem nézelődni. */
.mapview.locked{ cursor:default; }
.mapview.locked .mapzoom{ opacity:.35; pointer-events:none; }

/* ==========================================================================
   SZÖVEGES OLDALAK — a tartalom a WordPressből jön
   ==========================================================================
   Bolt, Szabályok, Céges, Rólunk. A keret a miénk, a törzsszöveg a WP-é.

   Ugyanezek az értékek vannak a `quiz` WP-témában is, hogy a szerkesztő
   ablakában nagyjából ugyanaz látszódjon, mint élesben. Ha itt változtatsz,
   a téma editor-style.css-ét is igazítsd — ez a két fájl párban jár.
   ========================================================================== */
.prose{
  max-width:46rem; margin:0 auto;
  font-size:1.0625rem; line-height:1.65; font-weight:400;
}
.prose h1{ font-size:2.25rem; font-weight:900; line-height:1.1;
  margin:0 0 1rem; letter-spacing:-.02em; }
.prose h2{ font-size:1.5rem; font-weight:900; line-height:1.2;
  margin:2rem 0 .625rem; color:var(--gold); }
.prose h3{ font-size:1.1875rem; font-weight:900; line-height:1.3;
  margin:1.5rem 0 .5rem; }
.prose p{ margin:0 0 1rem; }
.prose ul,.prose ol{ margin:0 0 1rem; padding-left:1.25rem; }
.prose li{ margin:0 0 .375rem; }
.prose a{ color:var(--white); text-decoration:underline;
  text-decoration-color:var(--green); text-underline-offset:.2em;
  text-decoration-thickness:.125em; }
.prose a:hover{ color:var(--green); }
.prose strong,.prose b{ font-weight:900; }
.prose blockquote{
  margin:1.5rem 0; padding:.75rem 1.25rem;
  border-left:.25rem solid var(--green);
  background-color:rgba(0,0,0,.2); border-radius:0 .75rem .75rem 0;
}
.prose img{ max-width:100%; height:auto; border-radius:1rem; }
.prose table{ width:100%; border-collapse:collapse; margin:0 0 1rem; }
.prose th,.prose td{ padding:.5rem .625rem; text-align:left;
  border-bottom:1px solid rgba(255,255,255,.18); }
.prose th{ font-weight:900; }
.prose .hint{ opacity:.65; font-size:.9375rem; }

/* Gomb a szövegben: a WP-ben <a class="btn"> vagy gomb blokk. */
.prose .btn,
.prose .wp-block-button__link{
  display:inline-block; padding:.75rem 1.75rem; border-radius:2rem;
  background-color:var(--green); color:var(--white);
  font-weight:900; font-size:1rem; text-decoration:none;
  box-shadow:var(--shadow-light);
}
.prose .btn:hover,
.prose .wp-block-button__link:hover{ color:var(--white); transform:translateY(-2px); }

.header .backhome{ font-weight:900; font-size:1rem; text-decoration:none; opacity:.85; }
.header .backhome:hover{ opacity:1; }
body.textpage .careerwrap{ padding:2rem 1.25rem 4rem; }

@media (max-width:575px){
  .prose{ font-size:1rem; }
  .prose h1{ font-size:1.75rem; }
  .prose h2{ font-size:1.3125rem; }
}