/* ==========================================================================
   STILUSLAP — jatek + karrier
   ==========================================================================
   A regi css/style.less + css/style-bt.less parosa, WordPress nelkul.
   Nincs Bootstrap, nincs FontAwesome, nincs CDN, nincs Google Fonts.

   KET KEPERNYO VAN, es ez fontos, mert eddig egybe volt mosva:

     index.html   JATEK. Izometrikus terkep, amiert 2-4 jatekos harcol
                  egy meccsen belul. Minden meccs ujrakezdodik.

     career.html  KARRIER. A 15 allomasos ut, ami a jatekos sajat
                  fejlodese - meccsek felett gyulik, es nem nullazodik.

   Ugyanaz a fejlec, ugyanaz a kerdesablak, ugyanaz a lila - de a ket
   terkep KET KULON DOLOG, es ket kulon blokkban is all lentebb.

   AZ OSZTALYNEVEK a temabol jonnek, hogy ami a regi LESS-rol tudsz,
   ervenyben maradjon: .header .my_score .stars .window.question
   .the_message .statustext .the_timer > .timer_bar
   ========================================================================== */

/* --------------------------------------------------------------------------
   BETUK — helyben, nem a fonts.googleapis.com-rol
   --------------------------------------------------------------------------
   FIGYELEM: jelenleg csak a Nunito Bold (700) valodi. A vilagosabb suly
   Nunito Sans, ami MASIK csalad, a 900-as pedig a bongeszo szintetikus
   vastagitasa - a pontszamokon es a cimpirulakon ez latszik. Amint megvan
   a nunito-400 es a nunito-900 (vagy egy valtozo suly fajl), ide kerul.
   -------------------------------------------------------------------------- */
@font-face{
  font-family:'Nunito';
  src:url('fonts/nunito-700.woff2') format('woff2');
  font-weight:700 900; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Nunito';
  src:url('fonts/nunito-sans-400.woff') format('woff');
  font-weight:300 600; font-style:normal; font-display:swap;
}

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

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

/* ==========================================================================
   FEJLEC
   ==========================================================================
   Ket valtozat, ugyanabbol a szerkezetbol: a jatekban ket jatekos all
   egymassal szemben, a karrierlapon egy jatekos es a szintje. */
.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:.875rem 1.25rem;
  padding-top:max(.875rem, env(safe-area-inset-top));
  display:flex; align-items:flex-start; 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,.opponent_nick{
  display:block; font-size:1rem; font-weight:400; line-height:1rem;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.opponent_nick{ font-size:.875rem; opacity:.5; }

.my_score,.opponent_score{
  display:inline-block; font-weight:900;
  font-size:2.25rem; line-height:2.25rem;
  font-variant-numeric:tabular-nums;
}
.opponent_score{ font-size:1.5rem; line-height:1.5rem; opacity:.5; }

.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:.75rem 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; }
}

/* ==========================================================================
   JATEK — IZOMETRIKUS TERKEP
   ==========================================================================
   Ez a MECCS terulete. Egy alapkep (mono sziget), es rajta szeletenkent
   egy-egy szines darab: zold, ha megszerezted, piros, ha az ellenfele.
   A darabok a sajat befoglalo dobozukra vannak vagva es szazalekban
   pozicionalva - igy a 4200x2100-as vaszonbol 380 KB lett a teljes
   keszlet, es minden meretben pontosan illeszkedik.

   A terkep GORGETHETO a felulet mogott: a .mapview a nezoke, a .mapworld
   pedig a vilag, amit eltolunk es nagyitunk. A jatek magatol arra all,
   ahol eppen tortenik valami - de kezzel is huzhato. */
.mapview{
  flex:1 1 auto; position:relative; min-height:0;
  overflow:hidden;
  background-color:var(--purple);
  cursor:grab;
  touch-action:none;          /* a huzast mi kezeljuk, nem a bongeszo */
}
.mapview.drag{ cursor:grabbing; }

.mapworld{
  position:absolute; top:0; left:0;
  width:100%;
  transform-origin:0 0;
  will-change:transform;
}
.mapworld.ease{ transition:transform .55s cubic-bezier(.3,.8,.3,1); }

.mapworld .mapbase{ display:block; width:100%; height:auto; }

/* Egy elfoglalt szelet. A `left/top/width` szazalek, tehat a vilag
   meretetol fuggetlenul a helyen marad. */
.mapworld .sec{
  position:absolute;
  background-size:100% 100%;
  background-repeat:no-repeat;
  opacity:0;
  transform:scale(1.06);
  transition:opacity .45s ease, transform .45s cubic-bezier(.2,1.3,.4,1);
  pointer-events:none;
}
.mapworld .sec.on{ opacity:1; transform:scale(1); }

/* A kerdojeles tu. Egy kep, tiz pozicio - a regi keszletben tiz kulon
   4200x2100-as PNG volt ugyanerre. */
.mapworld .pin{
  position:absolute;
  background-image:url('../img/map/pin.png');
  background-size:100% 100%; background-repeat:no-repeat;
  transform-origin:50% 100%;
  opacity:0;
  transition:opacity .3s, left .5s cubic-bezier(.3,.8,.3,1),
             top .5s cubic-bezier(.3,.8,.3,1);
  pointer-events:none;
}
.mapworld .pin.on{ opacity:1; animation:pinbob 1.1s ease-in-out infinite alternate; }
@keyframes pinbob{ from{ transform:translateY(0); } to{ transform:translateY(-8%); } }

/* Nagyitas-vezerlok. Kicsi, halk, a sarokban. */
.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); }

/* ==========================================================================
   KERDES-ABLAK
   ==========================================================================
   A terkep FOLOTT uszik, nem tolja el - ezert lehet a terkepet mogotte
   gorgetni. */
.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;
}

.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:disabled{ cursor:default; }
.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; }
.answers .a .foe{
  flex:0 0 auto; width:.5rem; height:.5rem; border-radius:50%;
  background-color:var(--red); opacity:0; transition:opacity .3s;
}
.answers .a.foepick .foe{ opacity:1; }

.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 .endstars{
  display:block; width:100%; height:4.5rem;
  background-image:url('../img/stars-shadow.png');
  background-position:center; background-repeat:no-repeat; background-size:contain;
}
.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 15 ALLOMASOS UT
   ==========================================================================
   Ez NEM a meccs terkepe. Ez a jatekos sajat utja: meccsek felett gyulik,
   nem nullazodik, es a kinyitott allomasok nem tunnek el.

   A tapeta (pattern.svg) csak itt kell: a jatekban a sziget vize adja a
   hatteret, itt viszont ures lila lenne. */
body.career{ background-image:url('../img/pattern.svg');
  background-repeat:repeat; background-size:340px 340px; }

/* Szintcsik a fejlecben. A szam onmagaban nem mond semmit arrol, hogy
   mennyi van hatra a kovetkezoig - a csik igen. */
.level{ display:flex; align-items:center; gap:.625rem; }
.level .lv{
  flex:0 0 auto; width:2.75rem; height:2.75rem; 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.25rem; font-variant-numeric:tabular-nums;
}
.level .bar{ flex:1 1 auto; min-width:6rem; max-width:16rem; }
.level .bar .track{
  display:block; height:.5rem; border-radius:.25rem;
  background-color:rgba(0,0,0,.28); overflow:hidden;
}
.level .bar .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 .bar .xp{ display:block; margin-top:.25rem;
  font-size:.75rem; opacity:.7; font-weight:700; }

.careerwrap{
  flex:1 1 auto; min-height:0; overflow-y:auto;
  padding:1.25rem 1rem 2rem;
  -webkit-overflow-scrolling:touch;
}
.careerinner{ position:relative; width:100%; max-width:680px; margin:0 auto; }

/* AZ UT. Ket path egymason: a teljes ut, es a megtett resz. A pontokat a
   career.js meri, tehat barmilyen szelessegen a mezokozeppontokat koti
   ossze - a regi 16 hatterkep (bt-bttf-map-00..15.jpg) pont ezt csinalta,
   csak 16 x 250 KB-bol es 16 ugrassal. */
.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:.25rem 1.5rem; }
.the_map section{ position:relative;
  display:flex; flex-direction:column; align-items:center; }

.the_map .title{
  display:none; position:relative; max-width:100%;
  margin:0 0 .5rem; padding:.375rem .5rem; 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);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.the_map .title::after{
  content:""; position:absolute; top:100%; left:50%;
  margin-left:-5px; border:5px solid transparent;
  border-top-color:var(--purple-dark);
}
.the_map section.ok .title{ display:inline-block; }
.the_map section.active .title{
  display:inline-block; background-color:var(--white); color:var(--black);
}
.the_map section.active .title::after{ border-top-color:var(--white); }

/* --------------------------------------------------------------------------
   A 45 CSS-SZABALY HELYETT KETTO
   --------------------------------------------------------------------------
   A page-quiz-bt.php-ban minden allomashoz harom kulon background-image
   szabaly tartozott (alap, .active, .ok) - 15 allomas, 45 sor, es minden
   uj palya ujabb negyvenot. A kepek most ket CSS-valtozoban ulnek, amiket
   a career.js ir ki a CAREER tombbol:

       s.style.setProperty('--obj',    'url(img/career/tile-07.png)');
       s.style.setProperty('--obj-ok', 'url(img/career/tile-07-ok.png)');
   -------------------------------------------------------------------------- */
.the_map .obj{
  position:relative; width:100%; aspect-ratio:1/1; border-radius:1rem;
  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); } }

.the_map .check{
  display:none; position:absolute; right:2%; bottom:6%;
  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 meg zart allomasok kicsit halkabbak - de latszanak, mert eppen az a
   celjuk, hogy legyen mit kinyitni. */
.the_map section.locked{ opacity:.62; }

@media (max-width:767px){
  .the_map{ gap:.125rem .75rem; }
  .the_map .title{ font-size:.675rem; line-height:.75rem;
    padding:.25rem .375rem; border-radius:.25rem; margin-bottom:.25rem; }
  .the_map .check{ width:1.375rem; height:1.375rem; }
}

/* Statisztika a karrierlap aljan. */
.stats{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(7rem,1fr));
  gap:.75rem; max-width:680px; margin:1.75rem auto 0;
}
.stats div{
  background-color:rgba(0,0,0,.22); border-radius:1rem;
  padding:.875rem 1rem; text-align:center;
}
.stats b{ display:block; font-size:1.75rem; font-weight:900; line-height:1.1;
  font-variant-numeric:tabular-nums; }
.stats span{ display:block; margin-top:.125rem;
  font-size:.75rem; opacity:.7; font-weight:700;
  text-transform:uppercase; letter-spacing:.06em; }

.careercta{ display:block; max-width:680px; margin:1.5rem auto 0; text-align:center; }
.careercta a{
  display:inline-block; padding:.875rem 2.25rem; border-radius:2rem;
  background-color:var(--green); color:var(--white);
  font-weight:900; font-size:1.0625rem; text-decoration:none;
  box-shadow:var(--shadow);
}

/* ==========================================================================
   LABLEC + IDOZITO
   ========================================================================== */
.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; } }