/* ============================================================
   Camelcoding Echoes -- kioszk launcher
   A szinek es a tipografia a camelcoding.com _sass valtozoibol
   jonnek: $primary #00D5FF, $dark #00001E, $light #F8F8F8,
   $success #D8E4E7, $control-radius 0 (vegig eles sarkok).
   ============================================================ */

@font-face {
  font-family: 'SegoeUI';
  src: url('assets/fonts/SegoeUI.ttf') format('truetype');
  font-display: swap;
}

@font-face {
  font-family: 'SegoeUIBold';
  src: url('assets/fonts/SegoeUIBlack.ttf') format('truetype');
  font-display: swap;
}

:root {
  --primary: #00d5ff;
  --dark: #00001e;
  --light: #f8f8f8;
  --soft: #d8e4e7;
  --white: #ffffff;

  --body: 'SegoeUI', 'Segoe UI', 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --display: 'SegoeUIBold', 'SegoeUI', 'Segoe UI', 'Roboto', Helvetica, Arial, sans-serif;

  --gutter: clamp(24px, 3.5vw, 64px);
}

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  border-radius: 0; /* a ceges arculat vegig eles sarku */
}

html,
body {
  height: 100%;
  overflow: hidden; /* kioszk: sosem gorgetunk el a kepernyorol */
}

body {
  background: var(--light);
  color: var(--dark);
  font-family: var(--body);
  -webkit-font-smoothing: antialiased;

  /* Kioszk-higienia: nincs szovegkijeloles, nincs hosszu-nyomas menu,
     nincs dupla-koppintasos zoom, nincs kek highlight erintesnel. */
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  overscroll-behavior: none;
}

img {
  display: block;
  max-width: 100%;
  -webkit-user-drag: none;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  cursor: pointer;
  touch-action: manipulation;
}

/* ============ Fokepernyo ============ */

.shell {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: var(--gutter);
  gap: clamp(20px, 3vh, 48px);
}

.masthead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex: none;
}

.brand {
  display: flex;
  align-items: center;
  gap: 18px;
}

.brand__mark {
  height: clamp(34px, 4.4vh, 54px);
  width: auto;
}

.langs {
  display: flex;
  gap: 2px;
  background: var(--dark);
  padding: 2px;
}

.langs__item {
  min-width: clamp(58px, 6vw, 78px);
  padding: clamp(10px, 1.4vh, 16px) 8px;
  font-family: var(--display);
  font-size: clamp(14px, 1.6vh, 18px);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--white);
  background: var(--dark);
  transition: background 120ms linear, color 120ms linear;
}

.langs__item[aria-pressed='true'] {
  background: var(--primary);
  color: var(--dark);
}

.stage {
  display: flex;
  flex-direction: column;
  gap: clamp(16px, 2.4vh, 36px);
  min-height: 0; /* hogy a racs tudjon zsugorodni flex-ben */
  flex: 1;
}

.stage__title {
  font-family: var(--display);
  font-size: clamp(28px, 5vh, 60px);
  line-height: 1.05;
  letter-spacing: -0.015em;
  flex: none;
}

.stage__rule {
  width: clamp(64px, 8vw, 120px);
  height: 6px;
  background: var(--primary);
  flex: none;
}

.stage__error {
  font-size: clamp(15px, 1.9vh, 19px);
  line-height: 1.5;
  color: #8a1c1c;
  border-left: 6px solid #8a1c1c;
  padding-left: 16px;
}

/* ============ Csempek ============ */

.grid {
  display: grid;

  /* Az oszlopszamot az app.js szamolja ki a jatekok szamabol, hogy az utolso sor
     ne maradjon feltunoen hianyos (5 jatek igy 3+2, nem 4+1). Amig ez nincs meg,
     vagy keskeny kepernyon, az auto-fit a tartalek. */
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: clamp(16px, 1.8vw, 32px);

  /* A sorok egyenloen osztoznak a rendelkezesre allo magassagon, igy tobb jatek
     eseten sem csuszik ki a masodik sor a kepernyorol. */
  grid-auto-rows: minmax(0, 1fr);

  list-style: none;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding-bottom: 4px;
}

.grid.has-columns {
  grid-template-columns: repeat(var(--columns), minmax(0, 1fr));
}

.grid > li {
  display: flex;
  min-height: 0;
}

.tile {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  min-height: 0;

  /* Egyetlen sor eseten ne nyuljon el a kepernyo aljaig; ilyenkor a sor
     kozepere kerul. Tobb sornal a sor magassaga a szukebb korlat. */
  max-height: 440px;
  align-self: center;
  text-align: left;
  background: var(--white);
  border: 1px solid var(--soft);
  padding: clamp(20px, 2.4vh, 32px);
  gap: clamp(12px, 1.6vh, 20px);
  transition: transform 120ms ease-out, border-color 120ms linear, box-shadow 120ms linear;
}

/* Cian akcentcsik a csempe tetejen -- a ceges site kiemelesi nyelve. */
.tile::before {
  content: '';
  position: absolute;
  inset: -1px -1px auto -1px;
  height: 6px;
  background: var(--primary);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 160ms ease-out;
}

.tile:hover,
.tile:focus-visible {
  border-color: var(--dark);
  outline: none;
}

.tile:hover::before,
.tile:focus-visible::before,
.tile.is-pressed::before {
  transform: scaleX(1);
}

.tile.is-pressed {
  transform: scale(0.985);
  border-color: var(--dark);
}

.tile__art {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
  background: var(--light);
  padding: clamp(12px, 1.6vh, 24px);
}

.tile__icon {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

/* A cim es a leiras ket sorra is tordelodhet. Fenntartjuk mindkettonek a
   helyet, kulonben a rovidebb nevu csempeken a kepteruletek kulonbozo
   magassaguak lennenek, es a racs rongyos lenne. */
.tile__title {
  font-family: var(--display);
  font-size: clamp(20px, 2.7vh, 30px);
  line-height: 1.15;
  min-height: 2.3em;
  flex: none;
}

.tile__tagline {
  font-size: clamp(13px, 1.75vh, 17px);
  line-height: 1.4;
  min-height: 2.8em;
  color: #4a4a5e;
  flex: none;
}

/* ============ Jatek overlay ============ */

.player {
  position: fixed;
  inset: 0;
  background: var(--white);
  z-index: 100;
}

.player[hidden] {
  display: none;
}

.player__frame,
.player__frame iframe {
  width: 100%;
  height: 100%;
  border: none;
  display: block;
}

.player__loading {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 28px;
  background: var(--light);
  transition: opacity 240ms linear;
}

.player__loading[hidden] {
  display: none;
}

.player__loading.is-fading {
  opacity: 0;
  pointer-events: none;
}

.player__loadingLabel {
  font-family: var(--display);
  font-size: clamp(18px, 2.4vh, 26px);
  letter-spacing: 0.02em;
}

.spinner {
  width: 56px;
  height: 56px;
  border: 6px solid var(--soft);
  border-top-color: var(--primary);
  animation: spin 800ms linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* A KIOSK=1 miatt a Chromiumnak nincs sajat vissza gombja,
   ezert ez az egyetlen kiut a jatekbol. */
.exit {
  position: absolute;
  top: clamp(16px, 2.2vh, 28px);
  left: clamp(16px, 2.2vw, 28px);
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 64px;
  padding: 0 clamp(20px, 1.8vw, 28px) 0 clamp(12px, 1.2vw, 16px);
  background: var(--dark);
  color: var(--white);
  box-shadow: 0 4px 20px rgb(0 0 30 / 28%);
  transition: background 120ms linear, color 120ms linear;
}

.exit:active {
  background: var(--primary);
  color: var(--dark);
}

.exit__icon {
  width: 26px;
  height: 26px;
  flex: none;
}

.exit__label {
  font-family: var(--display);
  font-size: clamp(15px, 1.9vh, 19px);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* ============ Tetlenseg-figyelmezteto ============ */

.idle {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgb(0 0 30 / 72%);
  padding: 24px;
}

.idle[hidden] {
  display: none;
}

.idle__box {
  background: var(--white);
  border-top: 8px solid var(--primary);
  padding: clamp(28px, 4vh, 52px);
  max-width: 560px;
  width: 100%;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.idle__text {
  font-family: var(--display);
  font-size: clamp(19px, 2.6vh, 28px);
  line-height: 1.25;
}

.idle__count {
  font-family: var(--display);
  font-size: clamp(48px, 9vh, 88px);
  line-height: 1;
  color: var(--primary);
  font-variant-numeric: tabular-nums;
}

.idle__stay {
  min-height: 68px;
  padding: 0 32px;
  background: var(--dark);
  color: var(--white);
  font-family: var(--display);
  font-size: clamp(15px, 1.9vh, 19px);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.idle__stay:active {
  background: var(--primary);
  color: var(--dark);
}

/* ============ Alacsony/allo kepernyok ============ */

@media (max-height: 620px) {
  .tile {
    min-height: 220px;
  }
}

@media (orientation: portrait) {
  .grid {
    grid-template-columns: 1fr;
  }

  .tile {
    flex-direction: row;
    align-items: center;
    min-height: 0;
    display: grid;
    grid-template-columns: clamp(110px, 26vw, 190px) 1fr;
    grid-template-rows: auto auto;
    column-gap: clamp(18px, 4vw, 32px);
    row-gap: 6px;
  }

  .tile__art {
    grid-row: 1 / 3;
    aspect-ratio: 1;
  }

  .tile__title {
    align-self: end;
  }

  .tile__tagline {
    align-self: start;
  }
}