/* Layout: teljes képernyős éjszakai vászon, rajta vékony műszerfal és középre úszó kártyák; álló telefonra tervezve */
:root {
  --night: #0a0e19;
  --panel: rgba(14, 19, 34, 0.88);
  --line: rgba(160, 176, 214, 0.22);
  --fg: #e6eaf4;
  --muted: #8f97ad;
  --sodium: #ffb547;   /* reflektorfény, a játék egyetlen akcentusa */
  --ok: #7fe3b4;
  --bad: #ff7a66;
  --bronz: #d0915e;
  --ezust: #cdd5e1;
  --arany: #f4c651;
  --platina: #a6e6ff;
  --display: "Saira Extra Condensed", "Arial Narrow", "Roboto Condensed", sans-serif;
  --body: "Barlow", "Segoe UI", Roboto, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  color-scheme: dark;
}
[hidden] { display: none !important; }
html, body { height: 100%; }
body {
  margin: 0; overflow: hidden; overscroll-behavior: none; background: var(--night); color: var(--fg);
  font-family: var(--body); font-size: 15px;
  -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none;
  user-select: none; -webkit-user-select: none; touch-action: none;
}
canvas {
  position: fixed; inset: 0; width: 100%; height: 100%; display: block; touch-action: none;
  /* ég és talaj; a talajvonal a game.js groundY()-jával egyezik: H - max(56px, 12%H) */
  --gy: calc(100% - max(56px, 12%));
  background: linear-gradient(to bottom, #070a14 0, #121a33 calc(var(--gy) * 0.6), #3b2a3c var(--gy), #2a2422 var(--gy), #141113 100%);
}

.ui {
  position: fixed; inset: 0; pointer-events: none;
  display: flex; flex-direction: column; justify-content: space-between;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
  padding-block: calc(12px + env(safe-area-inset-top, 0px)) calc(14px + env(safe-area-inset-bottom, 0px));
}
.top { display: flex; flex-direction: column; gap: 6px; }
.hud { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.gauge { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.lbl { font: 600 11px/1 var(--body); letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.speed { font: 800 clamp(44px, 12vw, 76px)/0.9 var(--display); font-variant-numeric: tabular-nums; letter-spacing: 0.01em; }
.speed small, .meter small { font-size: 0.38em; font-weight: 600; color: var(--muted); margin-left: 4px; letter-spacing: 0.08em; }
.right { align-items: flex-end; text-align: right; }
.angle { font: 800 clamp(30px, 8vw, 48px)/0.9 var(--display); font-variant-numeric: tabular-nums; color: var(--sodium); }
.angle[data-s="ok"] { color: var(--ok); }
.angle[data-s="bad"] { color: var(--bad); }
.tank { width: clamp(110px, 30vw, 180px); height: 8px; border: 1px solid var(--line); border-radius: 2px; overflow: hidden; margin-top: 6px; }
.tank i { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, #9fd3ff, #e9f6ff); transform-origin: left; transition: transform 0.15s; }
.tank.flash { border-color: #a6e6ff; box-shadow: 0 0 12px rgba(166, 230, 255, 0.8); }
.mid { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; padding-top: 10px; }
.meter {
  font: 800 clamp(30px, 9vw, 56px)/1 var(--display); font-variant-numeric: tabular-nums;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.6);
}
.vs {
  font: 600 14px/1 var(--mono); font-variant-numeric: tabular-nums; color: var(--muted);
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.7);
}
.vs[data-s="ok"] { color: var(--ok); }
.vs[data-s="warn"] { color: var(--sodium); }
.vs[data-s="bad"] { color: var(--bad); }
.hint {
  align-self: center; text-align: center; max-width: 34ch;
  font: 600 clamp(15px, 4.2vw, 19px)/1.3 var(--body); color: var(--fg);
  background: var(--panel); border: 1px solid var(--line); border-radius: 4px; padding: 9px 14px;
  text-wrap: balance;
}
.hint b { color: var(--sodium); font-weight: 600; }

/* irányítás-súgó a rajtlámpa idejére: a két érintési mező és a „mindkettő”; zöld jelzéskor elhalványul */
.controls {
  position: fixed; left: 50%; transform: translateX(-50%); width: min(560px, calc(100% - 32px));
  top: 40%;   /* a rajtlámpa és a talajon álló autó közé, hogy egyiket se takarja */
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px; pointer-events: none;
  transition: opacity 0.35s;
}
.controls.out { opacity: 0; }
.controls .zone {
  display: flex; flex-direction: column; align-items: flex-start; gap: 5px; padding: 12px 14px;
  background: rgba(14, 19, 34, 0.78); border: 1.5px dashed rgba(166, 230, 255, 0.6); border-radius: 10px;
}
.controls .zone.r { align-items: flex-end; text-align: right; }
.controls .zone.both { grid-column: 1 / -1; align-items: center; text-align: center; border-color: rgba(255, 181, 71, 0.75); }
.controls .key { font: 800 13px/1 var(--display); letter-spacing: 0.16em; text-transform: uppercase; color: #a6e6ff; }
.controls .zone.both .key { color: var(--sodium); }
.controls .key kbd { font-size: 14px; color: var(--fg); letter-spacing: 0; }
.controls b { font: 800 20px/1.05 var(--display); text-transform: uppercase; letter-spacing: 0.04em; }
.controls .zone > span:last-child { font: 600 14px/1.3 var(--body); color: var(--fg); opacity: 0.85; }
:lang(ru) .controls b, :lang(ja) .controls b, :lang(ko) .controls b, :lang(zh) .controls b { font-size: 16px; letter-spacing: 0; }

.sheet {
  position: fixed; inset: 0; display: grid; place-items: center; overflow-y: auto; touch-action: pan-y;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
  padding-block: calc(16px + env(safe-area-inset-top, 0px)) calc(16px + env(safe-area-inset-bottom, 0px));
  background: radial-gradient(ellipse at 50% 60%, rgba(10, 14, 25, 0.35), rgba(10, 14, 25, 0.85));
}
.card {
  box-sizing: border-box; min-width: 0; width: min(460px, 100%); background: var(--panel); border: 1px solid var(--line); border-radius: 6px;
  padding: 24px 22px 20px; display: flex; flex-direction: column; gap: 16px;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.eyebrow { font: 600 11px/1 var(--body); letter-spacing: 0.18em; text-transform: uppercase; color: var(--sodium); }
h1 {
  margin: 0; font: 800 clamp(54px, 16vw, 92px)/0.82 var(--display); letter-spacing: -0.01em; text-transform: uppercase;
  text-wrap: balance;
}
h1 span { color: var(--sodium); }
h2 { margin: 0; font: 800 clamp(64px, 20vw, 104px)/0.85 var(--display); font-variant-numeric: tabular-nums; }
h2 small { font-size: 0.36em; color: var(--muted); font-weight: 600; margin-left: 6px; }
.lead { margin: 0; color: var(--muted); line-height: 1.5; max-width: 52ch; }
ol.steps { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; counter-reset: s; }
ol.steps li { display: grid; grid-template-columns: 24px 1fr; gap: 10px; align-items: baseline; line-height: 1.4; counter-increment: s; }
ol.steps li::before { content: counter(s); font: 800 22px/1 var(--display); color: var(--sodium); }
ol.steps b { font-weight: 600; }
dl.stats { margin: 0; display: grid; grid-template-columns: 1fr auto; gap: 7px 16px; }
dl.stats dt { color: var(--muted); }
dl.stats dd { margin: 0; font: 500 14px/1.5 var(--mono); font-variant-numeric: tabular-nums; text-align: right; }
.verdict { font: 600 16px/1.35 var(--body); }
.verdict.good { color: var(--ok); } .verdict.bad { color: var(--bad); }
.medals { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.medal {
  display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 4px 7px;
  border: 1px solid var(--line); border-radius: 4px; color: var(--muted);
}
.medal i { width: 14px; height: 14px; border-radius: 50%; border: 2px solid currentColor; opacity: 0.45; }
.medal b { font: 800 15px/1 var(--display); letter-spacing: 0.06em; text-transform: uppercase; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.medal span { font: 500 11px/1 var(--mono); }
/* a cirill és CJK betűk tartalék betűtípusból jönnek, szélesebbek: kisebb méret, ritkítás nélkül */
:lang(ru) .medal b, :lang(ja) .medal b, :lang(ko) .medal b, :lang(zh) .medal b { font-size: 12px; letter-spacing: 0; }
.medal.got i { background: currentColor; opacity: 1; }
.medal.got { color: var(--fg); border-color: currentColor; }
.medal[data-m="bronz"].got { color: var(--bronz); }
.medal[data-m="ezüst"].got { color: var(--ezust); }
.medal[data-m="arany"].got { color: var(--arany); }
.medal[data-m="platina"].got { color: var(--platina); }
.challenge {
  font: 600 16px/1.35 var(--body); padding: 10px 12px; border-radius: 4px;
  border: 1px solid var(--sodium); background: rgba(255, 181, 71, 0.08); text-wrap: balance;
}
.challenge b { color: var(--sodium); font-weight: 600; }
.challenge.won { border-color: var(--ok); background: rgba(127, 227, 180, 0.08); }
.challenge.won b { color: var(--ok); }
.daily { margin: 0; font: 600 13px/1.3 var(--body); color: var(--ok); letter-spacing: 0.02em; }
.daily::before { content: '◆ '; color: var(--sodium); }
.record { font: 600 13px/1.3 var(--body); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.record.new { color: var(--sodium); }
.row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
button {
  text-wrap: balance; word-break: keep-all; overflow-wrap: anywhere;
  pointer-events: auto; cursor: pointer; border-radius: 4px; padding: 14px 20px; min-height: 48px;
  font: 800 20px/1 var(--display); letter-spacing: 0.08em; text-transform: uppercase;
  border: 1px solid var(--sodium); background: var(--sodium); color: #1a1206;
}
button.ghost { background: transparent; color: var(--fg); border-color: var(--line); }
button.small { font-size: 15px; padding: 10px 14px; min-height: 40px; }
button:focus-visible { outline: 2px solid var(--fg); outline-offset: 3px; }
button:active { transform: translateY(1px); }
button.big { flex: 1 1 160px; font-size: 24px; min-height: 56px; }
button.accent { background: transparent; color: var(--sodium); border-color: var(--sodium); }
.row.cta { gap: 10px; }

/* fejléc: alcím és nyelvválasztó (natív lenyíló, hogy mobilon a rendszer listája nyíljon meg) */
.cardhead { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.lang { position: relative; flex: none; pointer-events: auto; }
.lang select {
  appearance: none; -webkit-appearance: none; cursor: pointer; max-width: 9.5em;
  font: 600 13px/1 var(--body); color: var(--fg); background: transparent;
  border: 1px solid var(--line); border-radius: 999px; padding: 8px 28px 8px 12px; min-height: 34px;
}
.lang::after {
  content: ''; position: absolute; right: 12px; top: 50%; width: 6px; height: 6px; margin-top: -5px; pointer-events: none;
  border-right: 2px solid var(--sodium); border-bottom: 2px solid var(--sodium); transform: rotate(45deg);
}
.lang select:focus-visible { outline: 2px solid var(--fg); outline-offset: 2px; }
.lang option { color: #111; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* játékszabály: az első futamig nyitva, utána összecsukva */
.howto { border-top: 1px solid var(--line); padding-top: 14px; }
.howto summary {
  display: flex; align-items: center; gap: 8px; cursor: pointer; pointer-events: auto; list-style: none;
  font: 600 11px/1 var(--body); letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted);
}
.howto summary::-webkit-details-marker { display: none; }
.howto summary::after { content: '+'; margin-left: auto; font: 800 20px/1 var(--display); color: var(--sodium); }
.howto[open] summary::after { content: '−'; }
.howto[open] summary { margin-bottom: 14px; }
.howto summary:focus-visible { outline: 2px solid var(--fg); outline-offset: 3px; }

.fine { margin: 0; font-size: 12px; color: var(--muted); line-height: 1.45; }
.fine a { color: var(--sodium); pointer-events: auto; }
kbd { font: 500 12px/1 var(--mono); border: 1px solid var(--line); border-radius: 3px; padding: 2px 5px; }

@media (pointer: coarse) {
  .kb { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  button:active { transform: none; }
}

/* toplista és beküldés */
.lbl.gap { margin-top: 8px; }
.board { display: flex; flex-direction: column; gap: 8px; }
.board .head { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
.board .tabs { display: flex; gap: 6px; }
.board .tabs button {
  font-size: 14px; padding: 6px 10px; min-height: 34px; letter-spacing: 0.06em;
  background: transparent; color: var(--muted); border-color: var(--line);
}
.board .tabs button[aria-pressed="true"] { color: var(--sodium); border-color: var(--sodium); }
.board ol { margin: 0; padding: 0; list-style: none; display: grid; gap: 2px; }
.board li {
  display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; gap: 8px; align-items: baseline;
  padding: 5px 8px; border-radius: 3px;
}
.board li.me { background: rgba(255, 181, 71, 0.12); box-shadow: inset 0 0 0 1px rgba(255, 181, 71, 0.45); }
.board .rk { font: 800 16px/1 var(--display); color: var(--muted); font-variant-numeric: tabular-nums; }
.board li:nth-child(1) .rk { color: var(--arany); }
.board li:nth-child(2) .rk { color: var(--ezust); }
.board li:nth-child(3) .rk { color: var(--bronz); }
.board .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.board .sc { font: 500 14px/1.4 var(--mono); font-variant-numeric: tabular-nums; }
.board .empty { margin: 0; color: var(--muted); font-size: 14px; }
.submit { display: flex; flex-direction: column; gap: 8px; }
.submit label { font: 600 11px/1 var(--body); letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.submit input {
  flex: 1 1 140px; min-width: 0; min-height: 44px; padding: 10px 12px; box-sizing: border-box;
  font: 600 16px/1.2 var(--body); color: var(--fg); background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--line); border-radius: 4px; user-select: text; -webkit-user-select: text; touch-action: auto;
}
.submit input:focus-visible { outline: 2px solid var(--sodium); outline-offset: 1px; }
.submit .fine:empty { display: none; }