/* ------------------------------------------------------------------ *
 * Fülbemászó -- design tokens
 * ------------------------------------------------------------------ */

:root {
  --bg: #080707;
  --ink: #f4efe9;
  --ink-dim: #a79c92;
  --ink-faint: #6b625b;
  --line: rgba(255, 255, 255, 0.07);
  --card: rgba(255, 255, 255, 0.035);
  --card-hi: rgba(255, 255, 255, 0.07);
  --radius: 12px;
  --rail: 208px;
  /* Uveg feluletek: a sav-panel es a lenti szoveges resz hattere. Mindig a
     tema SAJAT hatterszine, csak atlatszoan -- igy a neumorf arnyekok
     tonusa nem csuszik el, a sugarak meg atsejlenek alatta. */
  --glass: rgba(8, 7, 7, 0.55);
  --glass-flat: rgba(8, 7, 7, 0.88);
  --glass-line: rgba(255, 255, 255, 0.06);
  --glass-band: rgba(8, 7, 7, 0.82);
  --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --acc: #f97316;
  --acc-soft: rgba(249, 115, 22, 0.16);
  --acc-line: rgba(249, 115, 22, 0.42);
  --acc-glow: rgba(249, 115, 22, 0.5);
  --acc-h: 24;
}

body[data-diff='konnyu'] {
  --acc: #34d399; --acc-soft: rgba(52, 211, 153, 0.15);
  --acc-line: rgba(52, 211, 153, 0.4); --acc-glow: rgba(52, 211, 153, 0.45); --acc-h: 158;
}
body[data-diff='kozepes'] {
  --acc: #fbbf24; --acc-soft: rgba(251, 191, 36, 0.15);
  --acc-line: rgba(251, 191, 36, 0.4); --acc-glow: rgba(251, 191, 36, 0.45); --acc-h: 43;
}
body[data-diff='nehez'] {
  --acc: #f97316; --acc-soft: rgba(249, 115, 22, 0.16);
  --acc-line: rgba(249, 115, 22, 0.42); --acc-glow: rgba(249, 115, 22, 0.5); --acc-h: 24;
}
body[data-diff='profi'] {
  --acc: #f43f5e; --acc-soft: rgba(244, 63, 94, 0.15);
  --acc-line: rgba(244, 63, 94, 0.4); --acc-glow: rgba(244, 63, 94, 0.45); --acc-h: 350;
}
body[data-diff='lehetetlen'] {
  --acc: #a855f7; --acc-soft: rgba(168, 85, 247, 0.16);
  --acc-line: rgba(168, 85, 247, 0.4); --acc-glow: rgba(168, 85, 247, 0.45); --acc-h: 272;
}

* { box-sizing: border-box; }

[hidden] { display: none !important; }

html, body { height: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: 'Outfit', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  transition: background 400ms ease;
}

/* a reflektor-kúp: a színpad fénye, nehézség szerint hangolva */
.cone {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(120% 80% at 50% -10%, hsl(var(--acc-h) 70% 8% / 0.9), transparent 62%),
    radial-gradient(60% 50% at 50% 110%, hsl(var(--acc-h) 60% 7% / 0.55), transparent 70%);
  transition: opacity 400ms ease, background 400ms ease;
}
.cone::before {
  content: '';
  position: absolute;
  inset: 0;
  clip-path: polygon(34% 0, 66% 0, 79% 100%, 21% 100%);
  background: linear-gradient(
    180deg,
    hsl(var(--acc-h) 65% 12% / 0.55),
    hsl(var(--acc-h) 60% 9% / 0.22) 55%,
    transparent 100%
  );
  filter: blur(2px);
}
body.no-cone .cone { opacity: 0; }

/* ------------------------------------------------------------------ *
 * fenysugarak -- CSAK a sotet temaban
 *
 * Szandekosan mas mechanika mint az alapertelmezett reflektor. Ott EGY szeles
 * kup all szemben, felulrol kozepre, es a nehezseg szinet veszi fel. Itt OT
 * keskeny nyalab jon ferden a felso el mentebol, kulon szinben, es keresztezik
 * egymast -- ez a mozgo szinpadi lampak kepe, nem a rivaldae.
 *
 * `screen` keveressel adodnak ossze, ezert a metszespontjuk vilagosabb, ahogy
 * a valodi feny is. Ez sotet hatteren mukodik, vilagoson kimosna a lapot --
 * ezert kizarolag a `neumorf-sotet` alatt lathato.
 * ------------------------------------------------------------------ */
/* Regisztralt szam, hogy a szintvaltas ATMENETTEL vigye at a szint a sugaron,
   ne ugrasszal -- egy nem regisztralt custom property nem animalhato. */
@property --r-h {
  syntax: '<number>';
  inherits: false;
  initial-value: 200;
}

.rays {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  display: none;
  transition: opacity 400ms ease;
  /* A lap kozepen all a jatek. A maszk ott kilyukasztja a sugarakat, tehat a
     szoveg mogott tiszta a hatter, a fenyt csak a szelen latod. Ettol lesz
     hatterhatas es nem diszko. */
  -webkit-mask-image: radial-gradient(40% 40% at 50% 48%, transparent 18%, #000 100%);
  mask-image: radial-gradient(40% 40% at 50% 48%, transparent 18%, #000 100%);
}
body[data-theme='neumorf-sotet'] .rays { display: block; }
/* Ugyanaz a kapcsolo kapcsolja le mint a reflektort. */
body.no-cone .rays { opacity: 0; }

.rays i {
  position: absolute;
  top: -12vh;
  width: 34vmin;
  height: 165vh;
  transform-origin: 50% 0;
  transform: rotate(var(--r-a));
  /* Keskeny nyalab, ami lefele alig szelesedik es jocskan a lap alja elott
     kifogy -- igy sugar marad, nem szines ek. */
  clip-path: polygon(44% 0, 56% 0, 76% 100%, 24% 100%);
  background: linear-gradient(
    180deg,
    hsl(var(--r-h) 85% 62% / 0.34),
    hsl(var(--r-h) 82% 56% / 0.12) 42%,
    transparent 76%
  );
  filter: blur(38px);
  mix-blend-mode: screen;
  animation: ray-sway var(--r-t) ease-in-out infinite alternate;
  transition: --r-h 520ms ease;
}

/* A lengés kicsi: a lampa mozog, nem a lap. */
@keyframes ray-sway {
  from { transform: rotate(var(--r-a)) scaleX(1); opacity: 0.7; }
  to   { transform: rotate(calc(var(--r-a) + var(--r-d))) scaleX(1.12); opacity: 1; }
}
body.no-motion .rays i { animation: none; }

/* Mind az ot lampa a NEHEZSEG szinebol indul: a kozepso pontosan az, a tobbi
   korulotte szorodik szet. Igy a fal szine megmondja hanyadik fokozaton allsz
   -- konnyun zold, lehetetlenen lila --, de nem lesz belole egyszinu folt.
   A hue korbefordul 360 folott, tehat a szelso ertekekkel sincs dolgunk.
   A tempok nem egesz aranyuak, ezert sokaig tart mire ugyanaz az allas
   visszater: nincs ismetlodo minta. */
.rays i:nth-child(1) { left: -14%; --r-h: calc(var(--acc-h) - 52); --r-a: 26deg;  --r-d: 6deg;  --r-t: 19s; }
.rays i:nth-child(2) { left: 11%;  --r-h: calc(var(--acc-h) - 24); --r-a: 10deg;  --r-d: -5deg; --r-t: 23s; }
.rays i:nth-child(3) { left: 50%;  --r-h: var(--acc-h);            --r-a: -2deg;  --r-d: 4deg;  --r-t: 21s; }
.rays i:nth-child(4) { left: 71%;  --r-h: calc(var(--acc-h) + 26); --r-a: -13deg; --r-d: 5deg;  --r-t: 17s; }
.rays i:nth-child(5) { left: 92%;  --r-h: calc(var(--acc-h) + 56); --r-a: -28deg; --r-d: -6deg; --r-t: 26s; }

/* Telefonon kevesebb hely van: a ket szelso kilogna, a blur pedig draga. */
@media (max-width: 900px) {
  /* Keskeny kepernyon a maszk lyuka szinte az egeszet lefedne, ezert ott
     feljebb huzom es a sugarak is keskenyebbek maradnak. */
  .rays {
    opacity: 0.72;
    -webkit-mask-image: radial-gradient(92% 44% at 50% 30%, transparent 32%, #000 100%);
    mask-image: radial-gradient(92% 44% at 50% 30%, transparent 32%, #000 100%);
  }
  .rays i { width: 52vmin; filter: blur(30px); }
  .rays i:nth-child(1) { left: -16%; }
  .rays i:nth-child(5) { left: 84%; }
}
@media (prefers-reduced-motion: reduce) {
  .rays i { animation: none; }
}

.grain {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ------------------------------------------------------------------ *
 * elrendezés
 * ------------------------------------------------------------------ */

.stage {
  position: relative;
  z-index: 1;
  min-height: 100dvh;
  display: grid;
  grid-template-columns: var(--rail) minmax(0, 1fr) var(--rail);
  gap: 28px;
  padding: 34px clamp(18px, 4vw, 56px) 26px;
  align-items: start;
}

.rail {
  display: flex;
  flex-direction: column;
  gap: 18px;
  position: sticky;
  top: 34px;
  padding: 16px 14px;
  border-radius: 18px;
  border: 1px solid var(--glass-line);
  /* Homalyositas nelkul tomorebb a kitoltes, kulonben a sugarak atutnenek
     rajta es olvashatatlan lenne a felirat. A @supports ezt valtja le. */
  background: var(--glass-flat);
}

@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .rail {
    background: var(--glass);
    -webkit-backdrop-filter: blur(18px) saturate(1.2);
    backdrop-filter: blur(18px) saturate(1.2);
  }
}
.rail-right { align-items: stretch; }

.group { display: flex; flex-direction: column; gap: 8px; }

.group-title {
  margin: 0 0 2px;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.rail-sep { height: 1px; background: var(--line); margin: 4px 0; }

.stack { display: flex; flex-direction: column; gap: 6px; }

/* ------------------------------------------------------------------ *
 * gombok
 * ------------------------------------------------------------------ */

button, input { font: inherit; color: inherit; }

.opt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  padding: 9px 12px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: var(--card);
  color: var(--ink-dim);
  font-size: 12.5px;
  font-weight: 500;
  cursor: pointer;
  text-align: left;
  transition: background 160ms, color 160ms, border-color 160ms, transform 120ms;
}
.opt:hover { background: var(--card-hi); color: var(--ink); }
.opt:active { transform: scale(0.985); }
.opt.on {
  background: var(--acc-soft);
  border-color: var(--acc-line);
  color: var(--acc);
}
.opt-label { display: inline-flex; align-items: center; gap: 8px; }
.opt svg { flex: none; opacity: 0.9; }

.linky {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 2px;
  border: 0;
  background: none;
  color: var(--ink-faint);
  font-size: 12px;
  cursor: pointer;
  transition: color 150ms;
}
.linky:hover { color: var(--acc); }

.switch {
  position: relative;
  width: 30px;
  height: 17px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  flex: none;
  transition: background 180ms;
}
.switch i {
  position: absolute;
  top: 2.5px;
  left: 2.5px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #fff;
  transition: transform 180ms cubic-bezier(0.2, 0.9, 0.3, 1.2);
}
.opt.on .switch { background: var(--acc); }
.opt.on .switch i { transform: translateX(13px); }

.acc .chev { transition: transform 200ms; }
.acc[aria-expanded='true'] .chev { transform: rotate(180deg); }
.accbody { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }

.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  font-family: var(--mono);
  padding: 6px 11px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: var(--card);
  color: var(--ink-dim);
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
  transition: all 160ms;
}
.chip:hover { background: var(--card-hi); color: var(--ink); }
.chip.on { background: var(--acc-soft); border-color: var(--acc-line); color: var(--acc); }

.slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 4px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  outline: none;
  cursor: pointer;
}
.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 13px; height: 13px;
  border-radius: 50%;
  background: var(--acc);
  border: 0;
  box-shadow: 0 0 0 4px var(--acc-soft);
}
.slider::-moz-range-thumb {
  width: 13px; height: 13px; border: 0; border-radius: 50%;
  background: var(--acc); box-shadow: 0 0 0 4px var(--acc-soft);
}

/* ------------------------------------------------------------------ *
 * közép
 * ------------------------------------------------------------------ */

.center {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
  padding-top: 46px;
  min-height: calc(100dvh - 60px);
}

.brand { text-align: center; }
.wordmark {
  margin: 0;
  font-size: clamp(44px, 6.4vw, 74px);
  font-weight: 800;
  font-style: italic;
  letter-spacing: -0.035em;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px rgba(255, 255, 255, 0.1);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.11), rgba(255, 255, 255, 0.02));
  -webkit-background-clip: text;
  background-clip: text;
  user-select: none;
}
.tagline {
  margin: 6px 0 0;
  font-size: 10.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.play, .result {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  width: 100%;
  /* 540 a tartalom szelessege, a tobbi a panel belso margoja -- a
     box-sizing miatt a paddingot bele kell szamolni, kulonben a merotol a
     tippmezoig minden osszeszukulne. */
  max-width: 600px;
  padding: 32px 30px 28px;
  border-radius: 22px;
  border: 1px solid var(--glass-line);
  background: var(--glass-flat);
}

@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .play,
  .result {
    background: var(--glass);
    -webkit-backdrop-filter: blur(18px) saturate(1.2);
    backdrop-filter: blur(18px) saturate(1.2);
  }
}

/* Ot korszak-gomb: keskeny kepernyon tordeljen, ne logjon ki. */
.eras { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 14px; }
.era {
  border: 0;
  background: none;
  padding: 2px 0;
  font-size: 11.5px;
  font-weight: 500;
  color: var(--ink-faint);
  cursor: pointer;
  transition: color 160ms;
}
.era:hover { color: var(--ink-dim); }
.era.on { color: var(--ink); font-weight: 600; }

.pills { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
/* Minden fokozat a sajat szineben all, ahogy a mintan -- az aktiv kitoltve. */
.pill {
  padding: 6px 16px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: color-mix(in srgb, var(--c) 14%, transparent);
  color: color-mix(in srgb, var(--c) 78%, #7a7069);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 180ms;
}
.pill:hover { background: color-mix(in srgb, var(--c) 24%, transparent); color: var(--c); }
.pill.on {
  color: #0d0a07;
  background: var(--c);
  box-shadow: 0 0 22px -6px color-mix(in srgb, var(--c) 70%, transparent);
}

/* A nehezseg-lakat: alapbol lepked a szint, ez rogziti. Szandekosan szintelen,
   hogy ne versenyezzen az ot fokozat sajat szinevel. */
.lock {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 13px;
  /* A --line temankent nagyon halvany, a lakat kerete ne tunjon el. */
  border: 1px dashed color-mix(in srgb, var(--ink-faint) 55%, transparent);
  border-radius: 999px;
  background: none;
  color: var(--ink-faint);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: all 180ms;
}
.lock:hover { color: var(--ink-dim); border-color: var(--ink-faint); }
.lock.on {
  border-style: solid;
  border-color: var(--ink-dim);
  color: var(--ink);
}
.lock .ico-locked { display: none; }
.lock.on .ico-locked { display: inline; }
.lock.on .ico-open { display: none; }

/* Egy soros magyarazat a lakat ala -- az ikon maga nem mondja meg mit csinal. */
.locknote {
  margin: -2px 0 0;
  text-align: center;
  font-size: 11px;
  line-height: 1.35;
  color: var(--ink-faint);
  letter-spacing: 0.01em;
}

/* mérő */
.meter { width: 100%; }
.meter-track {
  position: relative;
  height: 11px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.07);
  overflow: hidden;
}
.meter-fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: 2%;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--acc), hsl(var(--acc-h) 90% 68%));
  transition: width 220ms cubic-bezier(0.2, 0.8, 0.3, 1);
}
/* A fokozatok hatarai, hogy latszodjon meddig jutsz a kovetkezo kihagyassal. */
.meter-seg {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background: rgba(255, 255, 255, 0.16);
}
.meter-head {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 2%;
  width: 2px;
  background: #fff;
  opacity: 0;
  transform: translateX(-1px);
  transition: left 60ms linear, opacity 160ms;
}
body[data-state='playing'] .meter-head { opacity: 0.85; }
.meter-label {
  display: block;
  position: relative;
  margin-top: 7px;
  transform: translateX(-50%);
  white-space: nowrap;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  color: var(--acc);
  font-variant-numeric: tabular-nums;
}

/* lejátszó gomb -- a gomb pontosan kozepen all, az ido melle lóg ki */
.playwrap {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  margin: 6px 0;
}
.playbtn {
  position: relative;
  width: 108px;
  height: 108px;
  border: 0;
  border-radius: 50%;
  background: var(--acc);
  color: #14100c;
  display: grid;
  place-items: center;
  cursor: pointer;
  box-shadow: 0 0 0 0 var(--acc-glow), 0 14px 40px -12px var(--acc-glow);
  transition: transform 160ms cubic-bezier(0.2, 0.9, 0.3, 1.2), box-shadow 300ms;
}
.playbtn:hover { transform: scale(1.045); }
.playbtn:active { transform: scale(0.97); }
/* A haromszog sulypontja jobbra esik a viewBoxban, ezert balra kell huzni,
   kulonben optikailag es merve is a gomb jobb feleben ul. */
.playbtn .ico-play { transform: translateX(-1px); }
.playbtn .ico-stop { display: none; }
body[data-state='playing'] .playbtn .ico-play { display: none; }
body[data-state='playing'] .playbtn .ico-stop { display: block; }
/* Ket kifuto gyuru a gomb korul, amig szol. */
.playbtn::before,
.playbtn::after {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  border: 2px solid var(--acc);
  opacity: 0;
  pointer-events: none;
}
body[data-state='playing'] .playbtn::before { animation: ring 1.7s ease-out infinite; }
body[data-state='playing'] .playbtn::after { animation: ring 1.7s ease-out 0.85s infinite; }
body.no-motion .playbtn::before,
body.no-motion .playbtn::after { animation: none !important; }
@keyframes ring {
  0% { transform: scale(1); opacity: 0.55; }
  80% { opacity: 0; }
  100% { transform: scale(1.55); opacity: 0; }
}
.playtime {
  position: absolute;
  left: calc(50% + 72px);
  font-family: var(--mono);
  font-size: 20px;
  font-weight: 600;
  color: var(--acc);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  white-space: nowrap;
}

/* tipp */
.guessrow { display: flex; flex-wrap: wrap; gap: 8px; width: 100%; }
.guessrow .inputwrap { min-width: 190px; }
.inputwrap { position: relative; flex: 1; }
.ico-search {
  position: absolute;
  left: 13px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--ink-faint);
  pointer-events: none;
}
#guess {
  width: 100%;
  padding: 12px 14px 12px 36px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.04);
  font-size: 13.5px;
  outline: none;
  transition: border-color 180ms, background 180ms;
}
#guess::placeholder { color: var(--ink-faint); }
#guess:focus { border-color: var(--acc-line); background: rgba(255, 255, 255, 0.06); }
body.shake #guess { animation: shake 380ms; border-color: #f43f5e; }
@keyframes shake {
  0%,100% { transform: translateX(0); }
  20% { transform: translateX(-7px); }
  40% { transform: translateX(6px); }
  60% { transform: translateX(-4px); }
  80% { transform: translateX(3px); }
}

.suggest {
  position: absolute;
  z-index: 30;
  left: 0; right: 0;
  bottom: calc(100% + 6px);
  margin: 0;
  padding: 5px;
  list-style: none;
  background: #17130f;
  border: 1px solid var(--line);
  border-radius: 11px;
  box-shadow: 0 20px 50px -18px rgba(0, 0, 0, 0.9);
  max-height: 300px;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.suggest li {
  padding: 8px 10px;
  border-radius: 7px;
  font-size: 12.5px;
  color: var(--ink-dim);
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.suggest li:hover, .suggest li.sel { background: var(--acc-soft); color: var(--ink); }
/* Amit mar megtippeltel ebben a korben. */
.suggest li.used { color: var(--ink-faint); opacity: 0.5; text-decoration: line-through; }
.suggest li.used:hover { background: none; color: var(--ink-faint); }

.guess-btn {
  padding: 12px 18px;
  border: 1px solid var(--acc-line);
  border-radius: 11px;
  background: var(--acc-soft);
  color: var(--acc);
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: all 160ms;
}
.guess-btn:hover:not(:disabled) { background: var(--acc); color: #14100c; }
.guess-btn:disabled {
  border-color: var(--line);
  background: rgba(255, 255, 255, 0.03);
  color: var(--ink-faint);
  cursor: default;
}

.skip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 12px 16px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--ink-dim);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: all 160ms;
}
.skip:hover { background: rgba(255, 255, 255, 0.08); color: var(--ink); }

.hint {
  margin: 0;
  font-size: 11.5px;
  color: var(--ink-faint);
  text-align: center;
  min-height: 16px;
}

.tries { display: flex; align-items: center; gap: 10px; }
.tries-label {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-faint);
  white-space: nowrap;
}
.lives { display: flex; gap: 5px; }
.life {
  width: 22px;
  height: 3px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  transition: background 220ms;
}
/* A megmaradt tippek: a kigyulladt csik meg elerheto. */
.life.left { background: var(--acc); }

/* ------------------------------------------------------------------ *
 * eredmény
 * ------------------------------------------------------------------ */

.result { gap: 12px; }
.cover {
  width: 148px;
  height: 148px;
  border-radius: 8px;
  object-fit: cover;
  box-shadow: 0 22px 55px -20px rgba(0, 0, 0, 0.95);
  animation: pop 380ms cubic-bezier(0.2, 0.9, 0.3, 1.25);
}
body.no-motion .cover { animation: none; }
@keyframes pop {
  from { opacity: 0; transform: scale(0.9) translateY(10px); }
  to { opacity: 1; transform: none; }
}
.ribbon {
  margin: 4px 0 -4px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--acc);
}
.rtitle {
  margin: 0;
  font-size: clamp(20px, 3.4vw, 27px);
  font-weight: 700;
  text-align: center;
  line-height: 1.18;
  letter-spacing: -0.015em;
}
.rsub { margin: 0; font-size: 12.5px; color: var(--ink-dim); text-align: center; }
.listen-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
}

.listen {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  padding: 7px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 500;
  color: var(--ink-dim);
  text-decoration: none;
  transition: all 160ms;
}
.listen:hover { color: var(--ink); border-color: var(--acc-line); }

.badge {
  margin: 8px 0 2px;
  padding: 7px 18px;
  border: 1.5px solid currentColor;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--acc);
  transform: rotate(-2.2deg);
}
.badge.lost { color: #f43f5e; }

.ractions { display: flex; gap: 8px; margin-top: 6px; }
.ghost, .primary {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 10px 18px;
  border-radius: 10px;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.04);
  color: var(--ink-dim);
  transition: all 160ms;
}
.ghost:hover { background: rgba(255, 255, 255, 0.08); color: var(--ink); }
.primary {
  background: var(--acc-soft);
  border-color: var(--acc-line);
  color: var(--acc);
}
.primary:hover { background: var(--acc); color: #14100c; }

/* ------------------------------------------------------------------ *
 * lábléc, toast, mobil
 * ------------------------------------------------------------------ */

.foot {
  margin-top: auto;
  padding-top: 26px;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.16);
  text-align: center;
}

.streak { display: flex; gap: 16px; }
.streak b { display: block; font-size: 19px; font-weight: 700; color: var(--acc); line-height: 1.1; }
.streak span { font-size: 10px; color: var(--ink-faint); }
.streak-best b { color: var(--ink-dim); }

.toast {
  position: fixed;
  left: 50%;
  bottom: 26px;
  transform: translateX(-50%);
  z-index: 60;
  padding: 10px 18px;
  border-radius: 999px;
  background: #1d1712;
  border: 1px solid var(--acc-line);
  color: var(--ink);
  font-size: 12.5px;
  box-shadow: 0 16px 40px -16px #000;
  animation: pop 240ms ease;
}

.rail-toggle {
  display: none;
  position: fixed;
  z-index: 50;
  top: 14px;
  right: 14px;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: rgba(20, 16, 12, 0.85);
  backdrop-filter: blur(8px);
  color: var(--ink-dim);
  cursor: pointer;
}

@media (max-width: 1000px) {
  .stage {
    grid-template-columns: 1fr;
    gap: 14px;
    padding: 18px 16px 40px;
  }
  /* Telefonon a sav fiokka valik. A hatteret a kozos .rail szabaly adja,
     itt mar csak a nyitas-zaras es a keskenyebb belso ter marad. */
  /* Telefonon nincs menu: a beallitasok a jatek ALATT allnak, mindig
     lathatoan. A menugomb pont attol nem mukodott jol, hogy elrejtett
     valamit, amit ugyis meg kellett keresni. */
  .rail {
    position: static;
    display: flex;
    padding: 14px;
    border-radius: 14px;
  }
  .rail-toggle { display: none; }
  .center { order: -1; padding-top: 12px; min-height: 0; }
  .play, .result { padding: 20px 16px 18px; border-radius: 18px; }
  .rail-left { order: 1; }
  .rail-right { order: 2; }
  .cone::before { clip-path: polygon(18% 0, 82% 0, 96% 100%, 4% 100%); }
  .playbtn { width: 96px; height: 96px; }
  .playtime { left: calc(50% + 64px); font-size: 17px; }
  .foot { padding-top: 18px; }
}

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

.meter-legend { position: relative; height: 16px; }
.meter-label { position: absolute; top: 0; }
.meter-label::before {
  content: '';
  position: absolute;
  top: -5px;
  left: 50%;
  width: 5px;
  height: 5px;
  margin-left: -2.5px;
  background: var(--acc);
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
}

/* ------------------------------------------------------------------ *
 * Neumorf temak (vilagos es sotet)
 *
 * A felulet es a hatter UGYANAZ a szin, a melyseget kizarolag ket arnyek
 * adja: egy vilagos balrol fentrol es egy sotet jobbrol lentrol. Ami
 * valaszthato, az kiemelkedik (--up); ami ki van valasztva vagy bemenet, az
 * be van nyomva (--in). A nehezseg szine az egyetlen szin a feluleten.
 *
 * A ket valtozat KIZAROLAG a lenti valtozoblokkokban ter el -- a szerkezeti
 * szabalyok kozosek, `[data-theme^='neumorf']` alatt. Uj arnyalathoz eleg egy
 * harmadik valtozoblokk, a szabalyokhoz nem kell nyulni.
 * ------------------------------------------------------------------ */

.themes { display: flex; gap: 6px; margin-bottom: 6px; }
.themes .opt { justify-content: center; }

body[data-theme='neumorf'] {
  --glass: rgba(230, 231, 238, 0.62);
  --glass-flat: rgba(230, 231, 238, 0.92);
  --glass-line: rgba(255, 255, 255, 0.72);
  --glass-band: rgba(230, 231, 238, 0.88);
  --bg: #e6e7ee;
  --ink: #3a3e52;
  --ink-dim: #5f6479;
  --ink-faint: #9195a8;
  --line: rgba(163, 167, 185, 0.34);
  --card: transparent;
  --card-hi: transparent;
  /* Sima felulet: a melyseget csak arnyek adja. */
  --up: -7px -7px 15px rgba(255, 255, 255, 0.95), 7px 7px 16px rgba(163, 167, 185, 0.6);
  --up-s: -4px -4px 9px rgba(255, 255, 255, 0.9), 4px 4px 10px rgba(163, 167, 185, 0.55);
  --in: inset -5px -5px 11px rgba(255, 255, 255, 0.9), inset 5px 5px 11px rgba(163, 167, 185, 0.6);
  --nm-mark: -2px -2px 5px rgba(255, 255, 255, 0.9), 2px 2px 6px rgba(163, 167, 185, 0.55);
  /* Szin nelkuli kitoltesek: savok, kapcsolok, lebego lista kiemelese. */
  --nm-flat: rgba(163, 167, 185, 0.45);
  --nm-seg: rgba(163, 167, 185, 0.7);
  --nm-soft: rgba(163, 167, 185, 0.2);
  --nm-edge: rgba(163, 167, 185, 0.35);
  --nm-head: #3a3e52;
  --nm-foot: rgba(58, 62, 82, 0.32);
}

body[data-theme='neumorf-sotet'] {
  --glass: rgba(35, 34, 40, 0.58);
  --glass-flat: rgba(35, 34, 40, 0.9);
  --glass-line: rgba(255, 255, 255, 0.055);
  --glass-band: rgba(35, 34, 40, 0.84);
  --bg: #232228;
  --ink: #c9c6d0;
  --ink-dim: #8b8896;
  --ink-faint: #7d7a88;
  --line: rgba(255, 255, 255, 0.07);
  --card: transparent;
  --card-hi: transparent;
  --up: -7px -7px 14px rgba(255, 255, 255, 0.045), 7px 7px 16px rgba(0, 0, 0, 0.55);
  --up-s: -4px -4px 9px rgba(255, 255, 255, 0.04), 4px 4px 10px rgba(0, 0, 0, 0.5);
  --in: inset -5px -5px 11px rgba(255, 255, 255, 0.04), inset 5px 5px 11px rgba(0, 0, 0, 0.55);
  --nm-mark: -2px -2px 5px rgba(255, 255, 255, 0.05), 2px 2px 6px rgba(0, 0, 0, 0.5);
  --nm-flat: rgba(0, 0, 0, 0.42);
  --nm-seg: rgba(0, 0, 0, 0.5);
  --nm-soft: rgba(255, 255, 255, 0.055);
  --nm-edge: rgba(0, 0, 0, 0.45);
  --nm-head: #e4e1ea;
  --nm-foot: rgba(201, 198, 208, 0.3);
}

body[data-theme^='neumorf'] .cone,
body[data-theme^='neumorf'] .grain { display: none; }

body[data-theme^='neumorf'] .wordmark {
  -webkit-text-stroke: 0;
  color: var(--nm-head);
  background: none;
  -webkit-background-clip: initial;
  background-clip: initial;
  text-shadow: var(--nm-mark);
}

body[data-theme^='neumorf'] .opt,
body[data-theme^='neumorf'] .chip,
body[data-theme^='neumorf'] .skip,
body[data-theme^='neumorf'] .guess-btn,
body[data-theme^='neumorf'] .ghost,
body[data-theme^='neumorf'] .primary,
body[data-theme^='neumorf'] .listen {
  background: transparent;
  border-color: transparent;
  box-shadow: var(--up-s);
}
body[data-theme^='neumorf'] .opt:hover,
body[data-theme^='neumorf'] .chip:hover,
body[data-theme^='neumorf'] .skip:hover,
body[data-theme^='neumorf'] .ghost:hover { background: transparent; color: var(--ink); }

body[data-theme^='neumorf'] .opt.on,
body[data-theme^='neumorf'] .chip.on {
  box-shadow: var(--in);
  color: var(--acc);
  background: transparent;
}
body[data-theme^='neumorf'] .opt.on .switch { background: var(--acc); }
body[data-theme^='neumorf'] .switch { background: var(--nm-flat); box-shadow: var(--in); }

body[data-theme^='neumorf'] .pill {
  background: transparent;
  box-shadow: var(--up-s);
  color: var(--ink-faint);
}
body[data-theme^='neumorf'] .pill.on {
  background: transparent;
  box-shadow: var(--in);
  color: var(--c);
  text-shadow: 0 0 12px color-mix(in srgb, var(--c) 45%, transparent);
}

body[data-theme^='neumorf'] .meter-track {
  background: transparent;
  border: 0;
  box-shadow: var(--in);
  height: 14px;
  border-radius: 99px;
  padding: 3px;
}
body[data-theme^='neumorf'] .meter-fill {
  inset: 3px auto 3px 3px;
  border-radius: 99px;
  box-shadow: 0 0 10px color-mix(in srgb, var(--acc) 60%, transparent);
}
body[data-theme^='neumorf'] .meter-seg { background: var(--nm-seg); }
body[data-theme^='neumorf'] .meter-head { background: var(--nm-head); }

body[data-theme^='neumorf'] .playbtn {
  background: transparent;
  box-shadow: var(--up);
  color: var(--acc);
}
body[data-theme^='neumorf'] .playbtn::before,
body[data-theme^='neumorf'] .playbtn::after { border-color: var(--acc); }
body[data-theme^='neumorf'] .playbtn svg { filter: drop-shadow(0 0 8px color-mix(in srgb, var(--acc) 55%, transparent)); }

body[data-theme^='neumorf'] #guess {
  background: transparent;
  border: 0;
  box-shadow: var(--in);
  color: var(--ink);
}
body[data-theme^='neumorf'] .suggest {
  background: var(--bg);
  border: 0;
  box-shadow: var(--up);
}
body[data-theme^='neumorf'] .suggest li:hover,
body[data-theme^='neumorf'] .suggest li.sel { background: var(--nm-soft); }

body[data-theme^='neumorf'] .life { background: var(--nm-flat); }
body[data-theme^='neumorf'] .life.left {
  background: var(--acc);
  box-shadow: 0 0 8px color-mix(in srgb, var(--acc) 55%, transparent);
}

body[data-theme^='neumorf'] .slider { background: var(--nm-flat); box-shadow: var(--in); }
body[data-theme^='neumorf'] .rail-sep { background: var(--nm-edge); }
body[data-theme^='neumorf'] .cover { box-shadow: var(--up); }
body[data-theme^='neumorf'] .badge { border-color: currentColor; }
body[data-theme^='neumorf'] .primary:hover { background: transparent; color: var(--acc); box-shadow: var(--in); }
body[data-theme^='neumorf'] .foot { color: var(--nm-foot); }
body[data-theme^='neumorf'] .toast { background: var(--bg); border: 0; box-shadow: var(--up); }
body[data-theme^='neumorf'] .rail-toggle { background: var(--bg); border: 0; box-shadow: var(--up-s); }
body[data-theme^='neumorf'] .linky:hover { color: var(--acc); }

@media (max-width: 1000px) {
  body[data-theme^='neumorf'] .rail { background: transparent; border: 0; box-shadow: var(--in); }
}

/* ------------------------------------------------------------------ *
 * márkajel
 *
 * A jel inline SVG, nem kep: a `currentColor` miatt a nehezseg szinet
 * veszi fel, ugyanugy mint a lejatszas gomb vagy a sorozat szamai.
 * ------------------------------------------------------------------ */

.brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.mark {
  color: var(--acc);
  filter: drop-shadow(0 0 14px color-mix(in srgb, var(--acc) 45%, transparent));
  transition: color 400ms ease, transform 400ms ease;
}
body[data-state='playing'] .mark { transform: scale(1.06); }
body.no-motion .mark { transition: none; }

/* A szojel eddig szinte lathatatlan volt. Marad a kontur-hatas, de a
   felso ele felveszi a nehezseg szinet, igy van mihez kotni a jelet. */
.wordmark {
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--acc) 30%, rgba(255, 255, 255, 0.24)),
    rgba(255, 255, 255, 0.04)
  );
  -webkit-text-stroke-color: color-mix(in srgb, var(--acc) 26%, rgba(255, 255, 255, 0.1));
  transition: background 400ms ease;
}

/* ------------------------------------------------------------------ *
 * olvashato resz: a lap alatt, a jatek utan
 * ------------------------------------------------------------------ */

.foot-link {
  display: inline-block;
  margin-left: 14px;
  color: var(--ink-faint);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.foot-link:hover { color: var(--acc); border-bottom-color: var(--acc-line); }

.lore {
  position: relative;
  z-index: 1;
  padding: 48px clamp(18px, 5vw, 28px) 72px;
  color: var(--ink-dim);
  font-size: 15px;
  line-height: 1.7;
  text-wrap: pretty;
  /* Sajat hatter a jatek alatt. Eddig a szoveg a puszta lapon ult, es a
     fenysugarak atvagtak rajta -- itt mar nem a jatek megy, hanem olvasni
     kell, tehat a hatternek el kell csendesednie. Szandekosan NINCS
     backdrop-filter: ez a sav tobb ezer pixel magas, es a homalyositast
     gorgetes kozben ujra kellene rajzolni. A savoknal (kicsi, ragados) ez
     nem gond, itt az lenne. */
  background: var(--glass-band);
  border-top: 1px solid var(--glass-line);
}

/* A sav fut vegig, a szoveg nem: az olvashato sorhossz marad. */
.lore-block,
.lore > .site-foot {
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}

.lore-block { margin-bottom: 46px; margin-top: 0; }

.lore h2 {
  margin: 0 0 14px;
  font-size: clamp(20px, 3vw, 25px);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
}
/* A cim ele egy rovid szinvonal, ugyanabbol a paletabol mint a jel. */
.lore h2::before {
  content: '';
  display: block;
  width: 34px;
  height: 3px;
  margin-bottom: 12px;
  border-radius: 3px;
  background: var(--acc);
  opacity: 0.85;
  transition: background 400ms ease;
}

.lore p { margin: 0 0 13px; }
.lore b { color: var(--ink); font-weight: 600; }

.lore-stat {
  margin-top: 18px;
  padding: 13px 16px;
  border: 1px solid var(--line);
  border-left: 2px solid var(--acc-line);
  border-radius: var(--radius);
  background: var(--card);
  font-size: 14px;
}
.lore-stat b { color: var(--acc); font-family: var(--mono); font-weight: 600; }

.steps {
  margin: 0 0 16px;
  padding: 0;
  list-style: none;
  counter-reset: lepes;
}
.steps li {
  position: relative;
  counter-increment: lepes;
  padding: 9px 0 9px 40px;
  border-bottom: 1px solid var(--line);
}
.steps li:last-child { border-bottom: 0; }
.steps li::before {
  content: counter(lepes);
  position: absolute;
  left: 0;
  top: 9px;
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--acc-line);
  background: var(--acc-soft);
  color: var(--acc);
  font-family: var(--mono);
  font-size: 11px;
}
.steps b { color: var(--ink); }

/* Keskeny kepernyon a tablazat sajat maga gorduljon, ne a lap. */
.lore-table { overflow-x: auto; margin: 0 0 18px; }
.lore table {
  width: 100%;
  min-width: 420px;
  border-collapse: collapse;
  font-size: 14px;
}
.lore caption {
  text-align: left;
  padding-bottom: 10px;
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.lore th, .lore td {
  padding: 9px 12px 9px 0;
  text-align: left;
  border-bottom: 1px solid var(--line);
  font-weight: 400;
}
.lore thead th {
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.lore tbody th { color: var(--ink); font-weight: 600; white-space: nowrap; }
.lore tbody td:last-child {
  font-family: var(--mono);
  color: var(--ink);
  text-align: right;
  padding-right: 0;
}
.dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 9px;
  border-radius: 50%;
  background: var(--c);
  vertical-align: middle;
}

.lore details {
  border-bottom: 1px solid var(--line);
}
.lore summary {
  padding: 13px 26px 13px 0;
  position: relative;
  cursor: pointer;
  list-style: none;
  color: var(--ink);
  font-weight: 500;
}
.lore summary::-webkit-details-marker { display: none; }
.lore summary::after {
  content: '';
  position: absolute;
  right: 4px;
  top: 20px;
  width: 8px;
  height: 8px;
  border-right: 1.6px solid var(--ink-faint);
  border-bottom: 1.6px solid var(--ink-faint);
  transform: rotate(45deg);
  transition: transform 200ms ease;
}
.lore details[open] summary { color: var(--acc); }
.lore details[open] summary::after {
  transform: rotate(-135deg);
  border-color: var(--acc);
}
.lore summary:hover { color: var(--acc); }
.lore details p { padding: 0 0 15px; font-size: 14px; }

.site-foot {
  margin-top: 44px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
  font-size: 12.5px;
  line-height: 1.65;
  color: var(--ink-faint);
}
.site-foot p { margin: 0 0 10px; }
.site-foot b { color: var(--ink-dim); }
.site-foot-nav { display: flex; flex-wrap: wrap; gap: 18px; }
.site-foot-nav a {
  color: var(--ink-faint);
  text-decoration: none;
  border-bottom: 1px solid var(--line);
}
.site-foot-nav a:hover { color: var(--acc); border-bottom-color: var(--acc-line); }

/* A vilagos temaban a kartya-szeru dobozokat arnyek rajzolja, nem keret. */
body[data-theme^='neumorf'] .lore-stat {
  border: 0;
  background: transparent;
  box-shadow: var(--in);
}
body[data-theme^='neumorf'] .steps li,
body[data-theme^='neumorf'] .lore th,
body[data-theme^='neumorf'] .lore td,
body[data-theme^='neumorf'] .lore details { border-color: var(--nm-edge); }
body[data-theme^='neumorf'] .site-foot { border-top-color: var(--nm-edge); }
body[data-theme^='neumorf'] .steps li::before { border: 0; box-shadow: var(--nm-mark); }
body[data-theme^='neumorf'] .mark { filter: none; }

@media (max-width: 1000px) {
  .lore { padding-bottom: 52px; }
  .lore-block { margin-bottom: 38px; }
  .foot-link { display: block; margin: 8px 0 0; }
}

/* ================================================================== *
 * Telefonos javitasok
 *
 * Ezek NEM a latvanyhoz tartoznak, hanem harom bejelentett hibahoz, ezert
 * maradtak meg akkor is, amikor a sik atszabas visszakerult a regi
 * felulethez.
 * ================================================================== */

/* ------------------------------------------------------------------ *
 * 1. A menugomb helyett nincs menu
 *
 * A gombra koppintva latszolag nem tortent semmi: a savok a jatek ALATT, a
 * kepernyon kivul nyiltak ki. A javitas nem az volt, hogy a menu jobban
 * nyiljon, hanem hogy ne legyen menu: telefonon a beallitasok egyszeruen
 * a jatek alatt allnak, gorgetesre elerhetoen.
 * ------------------------------------------------------------------ */

/* ------------------------------------------------------------------ *
 * 2. A beiromezobe koppintva a Safari razoomolt
 *
 * Egyetlen oka van: a 16 pixelnel kisebb betumeret. Csak erintos
 * keszuleken allitjuk at, egeres gepen a kisebb meret jobban all.
 * ------------------------------------------------------------------ */

@media (pointer: coarse) {
  #guess,
  .guess-btn,
  .skip { font-size: 16px; }
}

/* ------------------------------------------------------------------ *
 * 3. A Skip pergetese dupla koppintasnak szamitott es razoomolt
 *
 * A `touch-action: manipulation` pontosan ezt az egy gesztust veszi ki, a
 * csippentessel valo nagyitas es a gorgetes marad. NEM a
 * `user-scalable=no` a megoldas: az a nagyitast egeszben tiltana le, ami
 * akadalymentessegi visszalepes.
 * ------------------------------------------------------------------ */

button,
input,
a,
.opt,
.pill,
.chip,
.era,
.lock,
.slider,
.playbtn,
.rail-toggle {
  touch-action: manipulation;
}

button, a, input { -webkit-tap-highlight-color: transparent; }

/* ------------------------------------------------------------------ *
 * 4. A Skip leszakadt a sajat soraba
 *
 * Telefonon harom elem nem fer ki egy sorba, es a Skip balra hasalva ult
 * egy fel sorban, mintha elrontottuk volna. Ket soros racs helyette: a
 * beiromezo vegigfut, alatta a ket gomb egyforma szelesen.
 * ------------------------------------------------------------------ */

@media (max-width: 560px) {
  .guessrow {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
  .guessrow .inputwrap {
    grid-column: 1 / -1;
    min-width: 0;
  }
  .guessrow .guess-btn,
  .guessrow .skip {
    width: 100%;
    justify-content: center;
  }
}

/* ------------------------------------------------------------------ *
 * Telefonos savok szeles kepernyon
 *
 * A savok a gepen 208 pixel szelesek, telefonon viszont a teljes lapot
 * elfoglaljak. A `space-between` ott meg egyutt tartja az ikont es a
 * feliratot, itt szethuzza oket a ket szelre -- a felirat a semmi kozepen
 * lebeg. Telefonon ezert balra huzzuk oket, a kapcsolo marad jobbra.
 * ------------------------------------------------------------------ */

@media (max-width: 1000px) {
  .rail .opt { justify-content: flex-start; gap: 10px; }
  .rail .opt .switch { margin-left: auto; }
  .rail .opt .chev { margin-left: auto; }
  /* A hosszusag-valaszto harmas racsba all, hogy ne tordelodjon ragadtra. */
  .rail-right #lenRow { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
  .rail-right #lenRow .chip { width: 100%; justify-content: center; }
  /* A ket savot ugyanaz a keret hatarolja, ne csusszanak el egymastol. */
  .rail { width: 100%; }
}

/* ------------------------------------------------------------------ *
 * Megjelenes-valaszto: ket ikon
 *
 * Harom feliratos gomb (Reflektor, Vilagos, Sotet) nem fert ki a 190
 * pixeles savba: a harmadik 35 pixellel kilogott a kartyabol. Ket ikon
 * marad, hold es nap, felirat nelkul -- a cim es az aria-label mondja meg
 * melyik micsoda, tehat a kepolvaso is tudja.
 * ------------------------------------------------------------------ */

.themes .theme-ico {
  flex: 1 1 0;
  min-width: 0;
  justify-content: center;
  padding: 9px 0;
}
.themes .theme-ico svg { flex: none; }
.themes .theme-ico.on { color: var(--acc); }

/* A hosszusag-valaszto a savban 2-3-1 alakban tordelodott, ami ragadtnak
   latszik. Harmas racs helyette: ugyanaz a hat gomb, ket egyenes sorban. */
.rail-right #lenRow {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}
.rail-right #lenRow .chip { width: 100%; justify-content: center; padding-left: 4px; padding-right: 4px; }