/* ==========================================================================
   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; }

/* ==========================================================================
   NÉZETEK
   ==========================================================================
   Mindhárom nézet a dokumentumban van, egyszerre csak egy látszik. Nem
   `hidden`-nel rejtjük, hanem display:none-nal: így a rejtett nézet nem
   foglal helyet a flex-oszlopban.

   Cserébe egy dolgot fejben kell tartani: rejtett elemen minden mérés
   nullát ad. A career útvonalát és a játék nézőkéjét ezért a belépéskor
   számoljuk újra, nem a betöltéskor.
   ========================================================================== */
.view{ display:none; flex:1 1 auto; min-height:0; flex-direction:column; }
body.view-career .view-career,
body.view-play   .view-play,
body.view-text   .view-text{ display:flex; }

/* A karrier és a szöveges nézet háttere mintás, a játéké a sziget vize. */
body.view-career, body.view-text{
  background-image:url('img/pattern.svg');
  background-repeat:repeat; background-size:280px 280px;
}
body.view-play{ background-image:none; }

button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
a{ color:inherit; }
:focus-visible{ outline:2px solid var(--blue); outline-offset:2px; }
/* A menü- és hanggombon a fókuszkeret csak zajt csinál: ezek egérrel
   kezelt kapcsolók, a billentyűzetes navigáció úgyis a linkeken megy. */
.menubtn:focus, .footer .snd:focus{ outline:none; }

@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.

     JÁTÉK KÖZBEN VISZONT NINCS HAMBURGER (lásd .menubtn lentebb), és
     akkor ez a padding is fölösleges - üres sávot tartana fenn egy
     gombnak, ami nincs ott. A `body.nomenu` veszi le (az osztály neve a
     `.header`-re szól, nem `.the_header`-re - az előző körben ez volt a
     hiba), a fejléc pedig
     ÁTTOLÓDIK, nem ugrik: másfél másodperc alatt, mert a játék elején és
     végén nem akarunk rántást a képernyő tetején. */
  padding-right:4.5rem;
  transition:padding-right 1.5s ease;
  /* Fix minimum magasság, hogy a sáv a zöld gomb NÉLKÜL is ugyanolyan
     magas legyen (lásd a szöveges oldalakat) - és hogy a hamburger, ami
     fixen pozicionált, mindig ugyanoda essen. */
  min-height:4.25rem;
  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; }

/* A saját oldal: nagy pontszám, mellette az életek és két apró jelzés.
   A név kikerült — a sajátomat nem kell kiírni, és a helye kellett. */
.block_left{ display:flex; align-items:center; gap:.75rem; }

.my_score{
  flex:0 0 auto; font-weight:900;
  font-size:2.25rem; line-height:1;
  font-variant-numeric:tabular-nums;
}
.mine{ display:flex; flex-direction:column; gap:.25rem; min-width:0; }

.chips{ display:flex; align-items:center; gap:.75rem; }
.chip{ display:inline-flex; align-items:center; gap:.3125rem;
  font-size:.8125rem; font-weight:900; font-variant-numeric:tabular-nums; }
.chip svg{ width:.9375rem; height:1rem; display:block; }

/* A területszám ikonja a sziget kockája — ugyanaz a forma, mint amiért
   a játék megy. */
.chip.tiles svg .top  { fill:#4FD69B; }
.chip.tiles svg .left { fill:#2BAC6E; }
.chip.tiles svg .right{ fill:#1E8452; }
.chip.tiles b{ color:#4FD69B; }

/* A futam ikonja körkörös: minden futam ugyanaz a kör, más eredménnyel. */
.chip.run svg{ fill:none; stroke:#C9A8F0; stroke-width:2;
  stroke-linecap:round; stroke-linejoin:round; }
.chip.run b{ color:#C9A8F0; opacity:.9; }

/* 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; }
/* A többiek egy sorban: hányan vannak és milyen pontsávban. */
.foes .foe.more{ font-size:.6875rem; font-weight:700; opacity:.45;
  font-variant-numeric:tabular-nums; }

.stars{ display:flex; gap:.25rem; }
.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; }
  .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;
  /* Pontosan a terkep vizenek szine (a base.webp-bol kimerve). Igy amikor
     alul hezag marad, nem latszik varrat - a viz egyszeruen folytatodik. */
  background-color:#7407D2;
  cursor:grab;
  touch-action:none;
}
.mapview.drag{ cursor:grabbing; }

/* ==========================================================================
   AZ ÉG — NAPLEMENTE ÉS ÉJSZAKA
   ==========================================================================
   Négy színréteg a térkép fölött, a kezelőfelület alatt. A támadási
   szakaszban naplemente gyúl a képernyőre, a végjátékban ráborul az
   éjszaka - a játék végére tényleg besötétedik.

   MIÉRT A NÉZŐKÉBEN ÉS NEM A VILÁGBAN
   A világ nagyítható és húzható; ha a fény vele mozogna, a nap a szigethez
   lenne szögezve. Így viszont a képernyőre esik, ahogy egy valódi égbolt.

   MIÉRT NEM FOG EL KATTINTÁST
   Alatta kell tudni húzni a térképet és választani a mezőt, tehát az egész
   réteg `pointer-events:none`. A kezelőfelület (kérdéslap, felirat,
   lábléc) fölötte van, azt nem színezi.

   A KEVERÉSI MÓDOK
   A Photoshopban a Day és a Sea "linear light" - ilyen a CSS-ben nincs. A
   `hard-light` áll hozzá a legközelebb: ugyanúgy egyszerre világosít és
   sötétít a forrás világossága szerint, csak lágyabban. A Night marad
   `color-burn`, az egy az egyben megvan.

   A PULZÁLÁS
   Mindhárom fény 20% és 50% között lélegzik, de más ütemben (7, 9 és 11
   másodperc) és eltolt fázisban. A három prímszámszerű hossz miatt a
   mintázat csak percenként ismétlődik: a szem véletlennek látja. */
.sky{
  position:absolute; inset:0; z-index:3;
  pointer-events:none; overflow:hidden;
  opacity:0; transition:opacity 1.2s ease;
}
.view-play.sunset .sky{ opacity:1; }

.sky i{
  position:absolute; display:block; opacity:0;
}
.view-play.sunset .sky i{ animation-iteration-count:infinite;
  animation-direction:alternate; animation-timing-function:ease-in-out; }

/* Balra vörös, alacsonyan: a lemenő nap ellenfénye. */
.sky_night{
  left:-25%; top:-30%; width:95%; height:130%;
  background:radial-gradient(circle at 40% 55%,
             rgba(214,42,58,.95) 0%, rgba(214,42,58,.5) 42%, rgba(214,42,58,0) 72%);
  mix-blend-mode:color-burn;
}
.view-play.sunset .sky_night{ animation-name:skyPulseA; animation-duration:7s; }

/* Jobbra narancs-sárga: maga a napkorong fénye. */
.sky_day{
  right:-20%; top:-35%; width:90%; height:125%;
  background:radial-gradient(circle at 60% 45%,
             rgba(255,196,74,.95) 0%, rgba(255,140,60,.45) 45%, rgba(255,140,60,0) 74%);
  mix-blend-mode:hard-light;
}
.view-play.sunset .sky_day{ animation-name:skyPulseB; animation-duration:9s;
  animation-delay:-3.5s; }

/* Alul sötétkék: a víz felől jövő hideg. */
.sky_sea{
  left:-10%; bottom:-45%; width:120%; height:95%;
  background:radial-gradient(circle at 50% 65%,
             rgba(18,32,120,.9) 0%, rgba(18,32,120,.45) 45%, rgba(18,32,120,0) 75%);
  mix-blend-mode:hard-light;
}
.view-play.sunset .sky_sea{ animation-name:skyPulseC; animation-duration:11s;
  animation-delay:-6s; }

/* ÉJSZAKA. Nem pulzál: ez nem fény, hanem a nap vége. Két réteg egyben -
   a kék adja a színt, a fekete a sötétséget -, ezért van rajta két
   háttér és egy `filter`. A végjáték feliratával együtt jön be. */
.sky_dark{
  inset:0; width:100%; height:100%;
  background:rgba(22,38,96,.85);
  mix-blend-mode:color;
  opacity:0 !important;                /* a pulzálás alapértékét felülírja */
  transition:opacity 2.5s ease;
}
.view-play.night .sky_dark{ opacity:.9 !important; }

/* A sötétítés külön elem helyett a nézőkére kerül: így a szigetet és a
   vizet egyformán fogja, és nem kell ötödik réteg. */
.view-play.night .mapworld{ filter:brightness(.45) saturate(.85); }
.view-play .mapworld{ transition:filter 2.5s ease; }

@keyframes skyPulseA{ from{ opacity:.20; } to{ opacity:.50; } }
@keyframes skyPulseB{ from{ opacity:.50; } to{ opacity:.22; } }
@keyframes skyPulseC{ from{ opacity:.24; } to{ opacity:.46; } }

@media (prefers-reduced-motion: reduce){
  .view-play.sunset .sky i{ animation:none; opacity:.35; }
}

.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); }

/* Az alaplemez a térkép ALATT, ugyanazon a dobozon.
   A méretet továbbra is a `.mapbase` adja (ő a folyamban lévő elem,
   height:auto) - az alaplemez ráfekszik, abszolút pozícióval. Ha az
   alaplemez adná a méretet, egy hiányzó fájl összecsukná a világot. */
.mapworld .mapunder{
  position:absolute; left:0; top:0; width:100%; height:100%;
  display:block; z-index:0; pointer-events:none;
}
.mapworld .mapbase{ position:relative; z-index:1; }

/* RÉTEGSORREND A TÉRKÉPEN — egy helyen, itt.
   A szeleteknek NINCS z-indexük: a DOM sorrendje dönt, és az átlógások
   sorrendjét úgysem lehet ezzel megoldani (lásd buildMap). Ami viszont
   FÖLÖTTÜK kell legyen, annak explicit szám kell - különben egy szelet
   bármikor eltakarhatja a tűt vagy a verekedést. */
.mapworld .sec     { z-index:2; }
.mapworld .sec.over{ z-index:5; }
.mapworld .hit     { z-index:6; }
/* A kattintólap MINDEN fölött van, de csak a választási szakaszban él -
   különben a térkép húzását nyelné el. Láthatatlan: a játékos azt hiszi,
   a mezőre kattint, és pontosan az is történik. */
.mapworld .pickpad{
  position:absolute; inset:0; padding:0; border:0; background:none;
  opacity:0; pointer-events:none; z-index:9;
}
.mapworld.picking .pickpad{ pointer-events:auto; }
.mapworld .fight   { z-index:7; }
.mapworld .pin     { z-index:8; }

/* AZ ÁTLÓGÓ OBJEKTUMOK RÉTEGE.
   Ugyanaz a doboz, mint a szeleté, csak a legtetején - és a fűvel együtt
   kapcsol be-ki. Nagyítás nincs rajta: a fa ne "pattanjon" a fű alól,
   hanem vele együtt jelenjen meg. */
.mapworld .sec.over{ transform:none; transition:opacity .45s ease; }
.mapworld .sec.over.on{ transform:none; }

/* A választási elhalványítás az objektumrétegre IS vonatkozik: ha a fű
   halványul, a rajta álló fa nem maradhat élénk. */
.mapworld.picking .sec.over.won{ filter:saturate(.12) brightness(1.22); }
.mapworld.picking .sec.over.cand{ filter:saturate(1.15); }

/* 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. */
/* --------------------------------------------------------------------------
   HALVÁNYÍTÁS SZÍNSZŰRŐVEL, NEM ÁTLÁTSZÓSÁGGAL
   --------------------------------------------------------------------------
   Az átlátszóság itt nem működik: a szeletek egymást fedik, és van közöttük
   olyan, amelyik a szomszédja fölé lóg (az izometrikus rajz miatt a
   hátrébb lévő mező teteje benyúlik az előrébb lévő alá). Amint egy mező
   áttetsző lesz, a MÖGÖTTE lévő szomszéd átüt rajta — és a játékos két
   színt lát egy területen.

   Ezért a halványítás színszűrővel megy: kivesszük a telítettséget és
   világosítunk. A mező így elhalványul, de átlátszatlan marad, tehát nem
   szúr át rajta semmi.

   VÁLASZTÁSKOR csak a saját területeid halványulnak: az ellenfeleké marad,
   amilyen — a piros azt jelenti, hogy ott van dolgod. */
.mapworld .sec{ transition:opacity .45s ease, filter .35s ease,
                            transform .45s cubic-bezier(.2,1.3,.4,1); }

.mapworld.picking .sec.on.won{ filter:saturate(.12) brightness(1.22); }
.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. */
/* AMIÉRT ÉPP HARCOLUNK, az VILLOG: egy másodperc a saját színében, egy
   másodperc kifakulva.

   Itt sem átlátszóság: ugyanaz a gond, mint fent — a kifakult fázisban
   átütne a mögötte lévő szomszéd. A színszűrő viszont átlátszatlan marad,
   csak a szín tűnik el belőle.

   A steps(1) azért kell, hogy tényleg váltson, ne áttűnjön: enélkül a
   böngésző interpolálna a két érték között, és megint lassú pulzálás
   lenne. A `transition` ezért is ki van kapcsolva erre az elemre. */
.mapworld .sec.on.fight{
  transition:none;
  animation:fightBlink 2s steps(1, end) infinite;
}
/* A KIFAKULT FAZIS FINOM. Korabban saturate(.1) allt itt, ami gyakorlatilag
   szurkere vitte a teruletet: a villogas nem jelzes volt, hanem villanas, es
   kiesett belole a szin informacioja - hogy kie a terulet. Most 15%-ot veszunk
   le a telitettsegbol, annyit, ami latszik, de a szin vegig olvashato marad. */
@keyframes fightBlink{
  0%   { filter:none; }
  50%  { filter:saturate(.85) brightness(1.06); }
  100% { filter:none; }
}

/* 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 .drop{ fill:#4ABCE2; transition:fill .4s; }
/* Támadási szakaszban piros lenne — de ott a tű helyett a verekedés megy,
   így ez a szabály csak akkor lát munkát, ha a szekvencia nem töltődik be. */
.mapworld .pin.attack .drop{ fill:var(--red); }

/* --------------------------------------------------------------------------
   VEREKEDÉS
   --------------------------------------------------------------------------
   Rajzfilmes porfelhő a támadott terület KÖZEPÉN. A méretét a game.js
   számolja úgy, hogy a képernyőn mindig a natív 400 fele legyen, a
   nagyítástól függetlenül — ugyanaz az ellenskálázás, mint a tűnél.

   A kockák egymáson ülnek, és csak az aktuálisnak van .on osztálya. Ettől
   nincs villanás: nem src cserélődik, hanem láthatóság. */
.mapworld .fight{
  position:absolute;
  transform:translate(-50%,-50%);
  opacity:0; pointer-events:none;
  transition:opacity .3s, left .6s cubic-bezier(.3,.8,.3,1),
             top .6s cubic-bezier(.3,.8,.3,1);
  filter:drop-shadow(0 .5rem .75rem rgba(0,0,0,.4));
}
.mapworld .fight.on{ opacity:1; }
/* A konténer tartja a négyzetes arányt, MINDEN kocka abszolút benne.
   Korábban az aktuális kocka position:relative volt, a többi absolute -
   ettől minden képváltásnál újratördelt a böngésző, és a szekvencia
   megakadt, főleg a fordulónál. Így csak a láthatóság vált. */
.mapworld .fight::before{ content:""; display:block; padding-top:100%; }
.mapworld .fight img{
  position:absolute; inset:0;
  display:block; width:100%; height:auto;
  opacity:0;
}
.mapworld .fight img.on{ opacity:1; }
.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%); } }

/* A +/- nagyítógombok kikerültek: csípés és görgetés van helyettük, és
   így a térkép jobb felső sarka is szabad marad. */

/* --------------------------------------------------------------------------
   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);
  /* 1,5s helyett 2,4s: a felszállás ugyanannyi ideig tart, a zuhanás
     kétszer annyiig - lásd a starY kulcsképeit és a UI.burst számítását. */
  animation:starX 2.4s 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 2.4s 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.

   A CSÚCS 26%-NÁL VAN, nem 42-nél. Az animáció 1,5 másodpercről 2,4-re
   nyúlt, de a FELSZÁLLÁS ugyanannyi ideig tart, mint eddig (0,63 mp) -
   csak a zuhanás lett kétszer olyan hosszú. 0,63 / 2,4 = 26%.

   A halványodás is kitolódott: a csillag a pálya négyötödéig teljesen
   látszik, és csak a legvégén tűnik el. */
@keyframes starY{
  0%{   opacity:0;
        transform:translateY(0) rotate(0deg) scale(calc(var(--s) * .4));
        animation-timing-function:cubic-bezier(.2,.7,.4,1); }
  5%{   opacity:1; }
  26%{  transform:translateY(calc(var(--up) * -1)) rotate(calc(var(--spin) * .5))
                  scale(var(--s));
        animation-timing-function:cubic-bezier(.5,0,.85,.4); }
  80%{  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); }

/* A jelvény a kártya jobb FELSŐ sarkánál ül, de nem a sarkon: a
   -.25rem-es kilógás pont a lekerekítés ívére esett, ahol se nem takarta a
   sarkot, se nem hagyta békén. Tizenöt képpont a doboz szélétől BEFELÉ -
   így a kör egésze a kártyán van, és a felső éle lóg csak ki. */
.corner{
  position:absolute; top:-1rem; right:15px;
  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; }
/* A saját választás, még kiértékelés előtt. Lila, mert az a "tiéd" színe -
   a zöld és a piros a helyességé, azt még nem tudjuk. */
.answers .a.picked .k{ background-color:var(--purple); }

/* A SORNAK NINCS HÁTTERE.
   Volt egy halvány színes folt a kiválasztott sor mögött, lekerekített
   sarokkal - de a sorokat elválasztó vonalak átszelték, és a lekerekítés
   sehol nem talált a vonalakhoz. Két rendszer feleselt egymással ugyanazon
   a helyen.

   A betűkarika színe (lila -> zöld vagy piros) és a sor végén futó pontok
   ugyanazt mondják el, csak nem vesznek össze a rácsszerkezettel. */

/* A saját válaszom ítélete, még a közös megoldás előtt. A többieké addig
   nem látszik - rájuk várunk. */
.answers .a.picked.good .k{ background-color:var(--green); }
.answers .a.picked.bad  .k{ background-color:var(--pink); }
.answers .a.dim{ opacity:.45; }

.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,
.answers .a.waitpick .who{ opacity:.85; }

/* --------------------------------------------------------------------------
   VÁRAKOZÓ PONTOK
   --------------------------------------------------------------------------
   Három pont, amelyek felváltva ugranak - a szokásos "gépel valaki"
   jelzés. Szándékosan általános: nincs benne se szín, se pozíció, mert a
   színt a `currentColor` adja (tehát azé a szövegé, amelyik mellé kerül),
   a méretet pedig a font-size. Bárhova beírható egy üres elemként.

     <span class="loader"></span>

   A három pont egyetlen elem három háttérrétege; az animáció nem a
   pontokat mozgatja, hanem a rétegek MAGASSÁGÁT nullázza egyesével. Ettől
   nincs se elrendezés-számítás, se három külön elem. */
.loader{
  --loader:no-repeat radial-gradient(circle closest-side, currentColor 92%, transparent);
  display:inline-block; vertical-align:middle;
  width:1.5rem; aspect-ratio:4;
  background:var(--loader) 0% 50%, var(--loader) 50% 50%, var(--loader) 100% 50%;
  background-size:calc(100% / 3) 100%;
  animation:l7 1s infinite linear;
}
@keyframes l7{
  33%{ background-size:calc(100%/3) 0%,   calc(100%/3) 100%, calc(100%/3) 100%; }
  50%{ background-size:calc(100%/3) 100%, calc(100%/3) 0%,   calc(100%/3) 100%; }
  66%{ background-size:calc(100%/3) 100%, calc(100%/3) 100%, calc(100%/3) 0%;   }
}
@media (prefers-reduced-motion: reduce){
  .loader{ animation:none; opacity:.5; }
}

.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); }
.the_message .sub.champ{ color:var(--green); font-weight:900; }
.the_message .sub.tiebreak{ margin-top:.5rem; opacity:.7; font-style:italic; }
.the_message .sub.tally{ margin-top:.75rem; opacity:.6; }
.the_message .sub.hint{ margin-top:.5rem; color:var(--pink); }

/* Az életek az eredményen is látszanak: az elveszett csillag fakón. Így a
   veszteség nem egy szám a fejlécben, hanem történik veled. */
.the_message .endlives{
  display:flex; justify-content:center; gap:.375rem; margin:.25rem 0 .5rem;
}
.the_message .endlives i{
  width:1.5rem; height:1.5rem;
  background-image:url('img/star-full.png');
  background-size:contain; background-position:center; background-repeat:no-repeat;
}
.the_message .endlives i.off{
  background-image:url('img/star-empty.png');
  filter:grayscale(1); opacity:.5;
}
/* 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; }

/* A HÁROM PIKTOGRAM
   -----------------
   Korábban egyetlen háttérkép volt (stars-shadow.png). Egy kép egyben
   mozdul; ezek viszont KÜLÖN-KÜLÖN liftezenek, más fázisban és más
   frekvenciával — ettől tűnik véletlenszerűnek, holott mindhárom egyszerű
   oda-vissza ciklus.

   A doboz mérete a régi képé (300x174 @ 4.5rem magasság), a szeletek helye
   pedig százalékban ugyanaz, mint a képen volt: a csere pixelre ugyanoda
   tette a csillagokat, csak most három darabban. */
.the_message .endstars{
  position:relative; z-index:2;
  display:block; width:7.76rem; height:100%; margin:0 auto;
}
.the_message .endstars i{
  position:absolute;
  display:flex; align-items:center; justify-content:center;
  background-position:center; background-repeat:no-repeat; background-size:contain;
  /* Az árnyék CSS-ből jön, nem a képbe égetve: így a piktogrammal EGYÜTT
     mozog, és a vesztés-emojik is kapnak belőle. */
  filter:drop-shadow(0 .15rem .18rem rgba(0,0,0,.18));
  /* Külön tulajdonságok, nem rövidítés: a shorthandbe írt var() a
     duration/delay sorrendjén múlik, és néma hibát ad, ha elcsúszik. */
  animation-name:qu_lift;
  animation-duration:var(--dur);
  animation-delay:var(--dly);
  animation-timing-function:ease-in-out;
  animation-iteration-count:infinite;
  animation-direction:alternate;
}
/* Három különböző ütem és három különböző kitérés. A negatív késleltetés
   miatt egyik sem a nyugalmi pontról indul: már mozgásban találjuk őket. */
.the_message .endstars .s1{
  left:5.67%;  top:39.08%; width:26.67%; height:44.25%;
  --dur:1.9s; --dly:-.7s;  --lift:-.32rem;
}
.the_message .endstars .s2{
  left:29.33%; top:4.02%;  width:41.33%; height:68.39%;
  --dur:2.6s; --dly:-1.9s; --lift:-.6rem;
}
.the_message .endstars .s3{
  left:67.67%; top:39.08%; width:26.67%; height:44.25%;
  --dur:2.2s; --dly:-.25s; --lift:-.44rem;
}

.the_message .endstars.won .s1{ background-image:url('img/end-star-1.png'); }
.the_message .endstars.won .s2{ background-image:url('img/end-star-2.png'); }
.the_message .endstars.won .s3{ background-image:url('img/end-star-3.png'); }

/* HALÁL: sírkő két virággal. A kő ÁLL - egy lebegő sírkő komikus volna -,
   a virágok viszont ringanak mellette. Ettől lesz a kép szomorú, de nem
   gyászos: a futamnak van vége, nem a világnak.

   Az SVG-k kitöltik a slotjukat; a sírkő egy hajszállal lejjebb ül, mint a
   csillag volt, hogy a fűcsomó a talapzat vonalára essen. */
.the_message .endstars.dead svg{ display:block; width:100%; height:100%; }
.the_message .endstars.dead .s2{ top:6%; height:74%; }
.the_message .endstars.dead .s1,
.the_message .endstars.dead .s3{ top:42%; height:46%; }
.the_message .endstars.dead .s2{ animation:none; }
.the_message .endstars.dead .s1{ --dur:2.4s; --lift:-.18rem; }
.the_message .endstars.dead .s3{ --dur:2.9s; --lift:-.22rem; }
/* A sírkőnek nem kell külön árnyék: a kő maga a súly. */
.the_message .endstars.dead i{ filter:none; }

/* Vesztés: három arc, a rendszer saját betűkészletéből. Nincs új kép,
   nincs letöltött ikonkészlet - ugyanaz a szabály, mint a többi assetnél. */
/* Az <i> elem alapból dőlt - egy emojinál ez ferde arcot jelent, ami
   véletlennek látszik, nem szándéknak. */
.the_message .endstars i{ font-style:normal; }
.the_message .endstars.lost i{ line-height:1; font-size:1.6rem; }
.the_message .endstars.lost .s2{ font-size:2.6rem; }

/* A kitérés remben van, nem százalékban: a transform százaléka az elem
   SAJÁT méretéhez mérődik, tehát a nagy csillag háromszor akkorát ugrana,
   mint a kicsik. */
@keyframes qu_lift{
  from{ transform:translateY(0); }
  to{   transform:translateY(var(--lift)); }
}

@media (prefers-reduced-motion: reduce){
  .the_message .endstars i{ animation:none; }
}

.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); }

/* Regisztráció nélküli látogatónak is ajánlat: mit lehet ebből kihozni.
   Levendula, link-formájú - nem versenyez a két gombbal. */
/* A névlista legfeljebb három sor magas, alatta görgethető. Görgetősáv
   nélkül: az három sornál csak zajt csinálna. */
.the_message .endlist{
  display:block; max-height:4.5rem; overflow-y:auto;
  scrollbar-width:none;
}
.the_message .endlist::-webkit-scrollbar{ display:none; }

/* A statisztika-ajánlat a fehér dobozon KÍVÜL, a láblécben áll: így nem
   növeli a doboz magasságát, és marad hely a térképnek. */
.footer .endlink{
  color:#C9A8F0; text-decoration:underline;
  text-underline-offset:.2em; text-decoration-thickness:.1em;
  font-weight:700;
}
.footer .endlink:hover{ color:var(--white); }
/* --------------------------------------------------------------------------
   NEHÉZSÉGVÁLASZTÓ
   --------------------------------------------------------------------------
   Három gomb egymás alatt, mindegyiken név, egy mondat és a készlet mérete.
   A kérdésszám nem díszítés: abból derül ki, hogy egy nehézség tényleg
   választható-e, vagy csak három kérdés van benne. */
/* Névbekérés. Egy mező és egy gomb — az Enter is elküldi, mert ez az a
   pillanat, amikor a látogató még nem tudja, mit vár tőle a felület. */
.the_message .namebox{
  display:flex; gap:.5rem; margin-top:.875rem;
}
.the_message .namebox input{
  flex:1 1 auto; min-width:0;
  padding:.75rem .875rem; border-radius:.875rem;
  border:2px solid var(--grey-light); background-color:#F7F4EE;
  font:inherit; font-weight:900; font-size:1rem; color:var(--black);
}
.the_message .namebox input:focus{
  outline:none; border-color:var(--blue); background-color:var(--white);
}
.the_message .namebox .go{ margin-top:0; flex:0 0 auto; }
.the_message .namebox .go:disabled{ opacity:.5; }
.the_message .sub.hint{ color:var(--pink); min-height:1.1rem; }

.the_message .pools{ display:flex; flex-direction:column; gap:.5rem; }
.the_message .pool{
  display:block; width:100%; text-align:left;
  padding:.75rem 1rem; border-radius:.875rem;
  background-color:#F2EDE3; color:var(--black);
  transition:background-color .2s, transform .15s;
}
.the_message .pool:hover{ background-color:#E8E0CE; transform:translateY(-1px); }
/* Amit legutóbb választottál. Nem választja ki helyetted - csak megmutatja,
   hova nyúlj, ha ugyanazt akarod. */
.the_message .pool.last{ box-shadow:inset 0 0 0 2px var(--green); }
.the_message .pool b{ display:block; font-size:1.125rem; font-weight:900; }
.the_message .pool i{ display:block; font-style:normal;
  font-size:.8125rem; font-weight:700; color:var(--grey-dark); }
.the_message .pool em{ display:block; font-style:normal;
  font-size:.75rem; font-weight:700; color:var(--grey); margin-top:.125rem;
  font-variant-numeric:tabular-nums; }

.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);
}


/* ==========================================================================
   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. */

/* --------------------------------------------------------------------------
   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;
  /* Enélkül a hosszú állomásnév megnöveli a rugalmas dobozt, és a gomb
     alábújik a hamburgernek. A min-width:0 engedi a zsugorodást. */
  max-width:100%;
}
.block_left{ min-width:0; }
.level .xp{ 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;
  display:grid; place-items:center;
  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); }

/* A gomb SVG-je csak mobilon látszik: ott a szöveg helye kell a
   szintcsíknak. Idegen nyelven ráadásul bármi előfordulhat ("Neues
   Spiel", "Nouvelle partie"), és a hosszabb szöveg kiszorítaná a
   hamburgert - ezért ott ikon áll helyette. */
.header .newgame::before{
  content:""; display:none;
  width:1.125rem; height:1.25rem;
  background-color:currentColor;
  clip-path:polygon(0 0, 100% 50%, 0 100%);
}

@media (max-width:640px){
  /* A SZINTSZÁM LEKERÜL. A karika fix szélességű (flex:0 0 auto), tehát a
     helyét nem adja oda a zsugorodásnál — és épp ez tolta a zöld gombot a
     hamburger alá. A számot a főképernyőn amúgy is látta. */
  .level .lv{ display:none; }
  .level{ gap:0; }
  .level .where{ font-size:.75rem; }
  /* Mobilon a gomb ikon: a szöveg helyére a szintcsík kell. */
  .header .newgame{ width:2.75rem; height:2.75rem; padding:0;
    border-radius:.875rem; }
  .header .newgame .lbl{ display:none; }
  .header .newgame::before{ display:block; }
}

@media (max-width:575px){
  .level .bar{ max-width:none; }
  .header{ gap:.625rem; padding-left:.75rem; padding-right:4rem; }
  .level .xp{ font-size:.6875rem; }
}

.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.
   -------------------------------------------------------------------------- */
/* Az állomás egy link: a rajzra kattintva a játékba lépsz. Ez az, amit
   ösztönösen megnyom az ember - eddig nem csinált semmit. */
.the_map .obj{
  display:block; text-decoration:none;
  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; }
.the_map section.locked .obj{ pointer-events:none; }
.the_map .obj:hover{ filter:brightness(1.08); }
@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Ő
   ==========================================================================
   Három elem egy sorban: kilépés balra, állapot középen, hang jobbra.

   A "JÁTÉK" felirat kikerült — a saját nevünket kiírni a képernyő aljára
   önmagában semmit nem ad, viszont mobilon egy egész sort foglalt. Az
   állapotsor (Válassz! / Leggyorsabb: ...) korábban külön sorban ült a
   kérdéslap alatt; így két sor ment el arra, ami elfér egyben. */
.footer{
  flex:0 0 auto; height:3rem;
  display:flex; align-items:center; gap:.75rem;
  padding:0 .75rem; padding-bottom:env(safe-area-inset-bottom);
  position:relative; z-index:10;
}

/* Kilépés. Mobilon levendula körvonalas X, asztali gépen szöveg — ott van
   hely rá, és a szó egyértelműbb, mint egy ikon. */
.footer .exit{
  flex:0 0 auto;
  display:inline-flex; align-items:center; gap:.375rem;
  font-weight:700; font-size:.875rem; text-decoration:none;
  color:var(--white); opacity:.55; transition:opacity .3s;
}
.footer .exit:hover{ opacity:1; }
.footer .exit .x{
  display:none;
  width:2rem; height:2rem; border-radius:50%;
  border:2px solid #A57BE0; color:#A57BE0;
  align-items:center; justify-content:center;
  font-size:1.25rem; line-height:1; font-weight:400;
}

.footer .statustext{
  flex:1 1 auto; min-width:0; margin:0;
  text-align:center; font-size:.875rem; opacity:.75;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

/* TELJES KÉPERNYŐ GOMB — a kilépés mellett, közvetlenül jobbra.
   Két esetben nincs rá szükség, és akkor el sem foglalja a helyet:
     body.fs    már teljes képernyőn vagyunk
     body.nofs  a böngésző nem tudja (iPhone-on a Safari nem) */
.footer .fsbtn{
  flex:0 0 auto; margin-left:-.25rem;
  display:grid; place-items:center; width:2rem; height:2rem;
  opacity:.5; transition:opacity .3s;
}
.footer .fsbtn:hover{ opacity:1; }
.footer .fsbtn svg{
  width:1.125rem; height:1.125rem;
  fill:none; stroke:#fff; stroke-width:2;
  stroke-linecap:round; stroke-linejoin:round;
}
body.fs .footer .fsbtn,
body.nofs .footer .fsbtn{ display:none; }

@media (max-width:640px){
  .footer .exit{ opacity:1; }
  .footer .exit .x{ display:inline-flex; }
  .footer .exit .lbl{ display:none; }
}

.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; }

/* A zenegomb ugyanaz a forma, más ikon. Kikapcsolt állapotban áthúzva —
   külön "off" rajz nélkül, mert egy hangjegy és egy áthúzott hangjegy
   között a különbség egy vonal. */
.footer .snd.note{ position:relative; }
.footer .snd.note svg{ fill:none; stroke:#fff; stroke-width:2;
  stroke-linecap:round; stroke-linejoin:round; }
.footer .snd.note[aria-pressed="true"]::after{
  content:""; position:absolute; left:15%; right:15%; top:50%;
  height:2px; background:#fff; transform:rotate(-38deg);
  border-radius:1px;
}
.footer .snd.note[aria-pressed="true"]{ opacity:.4; }

.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; } }

/* "VÁRUNK A TÖBBIEKRE" — a sáv fut, de NEM a te időd.
   Ugyanaz a fogyó csík, halványabban és más színnel: annyit mond meg, hogy
   legkésőbb mikor lép tovább a játék. Rózsaszínnel azt hinnéd, még
   válaszolhatsz. */
.the_timer.wait .timer_bar{ background-color:var(--purple); opacity:.55; }

/* ==========================================================================
   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.
   ========================================================================== */
/* Játék közben nincs menü: ott a képernyő minden sarka a pályáé. A játék
   VÉGÉN viszont van értelme - akkor a body kap egy .over osztályt.

   A `nomenu` osztályt ugyanez a feltétel adja, csak a fejlécnek szól: ha
   nincs gomb, ne maradjon hely sem. Két külön szabály, egy ok. */
body.view-play:not(.over) .menubtn{ display:none; }
body.nomenu .header{ padding-right:1.25rem; }

.menubtn{
  position:fixed; right:.75rem;
  /* A fejléc 4,25rem magas, a gomb 2,75rem - a különbség fele a fenti
     margó. Így a hamburger és a zöld gomb egy vonalban van. */
  top:calc(env(safe-area-inset-top) + .75rem);
  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á. */

/* 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; }

/* ==========================================================================
   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.view-text .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; }
}

/* ==========================================================================
   KILÉPÉS-MEGERŐSÍTÉS
   ==========================================================================
   A "Kilépek" félrekattintható, és egy futó meccsből kilépni nem
   visszavonható. A kérdés viszont nem áll meg attól, hogy te épp
   gondolkodsz — ezért ha közben megérkezik a következő, ez magától eltűnik.
   ========================================================================== */
.exitask{
  position:fixed; inset:0; z-index:10005;
  display:grid; place-items:center;
  background-color:rgba(0,0,0,.55);
  opacity:0; transition:opacity .22s;
}
.exitask[hidden]{ display:none; }
.exitask.in{ opacity:1; }

.exitask .exitbox{
  width:min(22rem, 88vw);
  background-color:var(--white); color:var(--black);
  border-radius:1rem; box-shadow:var(--shadow);
  padding:1.5rem 1.25rem 1.25rem;
  text-align:center;
  transform:translateY(.75rem) scale(.97);
  transition:transform .22s cubic-bezier(.2,.9,.3,1);
}
.exitask.in .exitbox{ transform:translateY(0) scale(1); }

.exitask b{ display:block; font-size:1.25rem; font-weight:900; color:var(--blue); }
.exitask span{ display:block; margin-top:.375rem;
  font-size:.875rem; font-weight:700; color:var(--grey-dark); }
/* A megerősítő ablak grafikus állapotsora: életek és futamszám. Ugyanaz a
   két jelzés, amit játék közben is lát - nem kell megtanulnia kétszer. */
.exitask .askstate{
  display:flex; align-items:center; justify-content:center; gap:1rem;
  margin-top:.75rem;
}
.exitask .askstars{ display:flex; gap:.3125rem; }
.exitask .askstars i{
  width:1.75rem; height:1.75rem;
  background-image:url('img/star-full.png');
  background-size:contain; background-position:center; background-repeat:no-repeat;
}
.exitask .askstars i.off{
  background-image:url('img/star-empty.png');
  filter:grayscale(1); opacity:.45;
}
.exitask .askchip{
  display:inline-flex; align-items:center; gap:.375rem;
  font-weight:900; font-size:1.125rem; color:var(--purple);
  font-variant-numeric:tabular-nums;
}
.exitask .askchip svg{
  width:1.125rem; height:1.125rem; fill:none; stroke:var(--purple);
  stroke-width:2; stroke-linecap:round; stroke-linejoin:round;
}

.exitask .exitbtns{ display:flex; justify-content:center; gap:.625rem;
  margin-top:1.125rem; }
.exitask .go{
  display:inline-block; padding:.625rem 1.25rem; border-radius:1.5rem;
  background-color:var(--green); color:var(--white);
  font-weight:900; font-size:.9375rem; text-decoration:none;
  box-shadow:var(--shadow-light);
}
.exitask .go.grey{ background-color:var(--grey); }
.exitask .go.green{ background-color:var(--green); }
.exitask .go.purple{ background-color:var(--purple); }