/* Arany arculat (2026-09-15 óta élesben). A honlap minden nem játékhoz tartozó színe ebből a tokenkészletből jön;
   a stíluslapokban máshol nyers szín nem állhat (site.test.mjs őrzi), az áttetsző változatok color-mix()-szel készülnek.
   Márka: --gold (kiemelés, bekapcsolt vagy kiválasztott állapot, fókusz), --pink (hover minden kattintható elemen,
   a logójel pontja), --violet-light (a márka lilájának, a #8955D8-nak az aranyéval azonos fényerejű világos
   árnyalata), --logo (a logójel gyűrűje és a cégnév). Szöveg: --paper (elsődleges), --text-soft (másodlagos a
   felületen), --text-faint (HUD- és összesítő-címkék), --muted (címkék, halvány ikonok), --error.
   Felület: --surface (lábléc, ablakok, összesítő sáv, súgó), --line és --line-faint (vékony vonalak).
   Az ég fölé kerülő fátylak, betűárnyékok és a lap háttere is a --surface-ből készülnek: a régi kékesfekete
   (--ink) 2026-09-16 óta sehol nem szerepel. Az égi szöveg előtűnő fénye --sky-glow és --sky-glow-core,
   a vetett árnyék --shadow. */
@font-face { font-family: 'Brand Manrope'; src: url('fonts/Manrope-Variable.woff2') format('woff2'); font-weight: 200 800; font-display: swap; }
:root {
  --gold: #D8B56D; --pink: #D95181; --violet-light: #C6ADEC; --logo: #FFFFFF;
  --paper: #F0ECE3; --text-soft: #C7C2B8; --muted: #948E83; --error: #EDBAA7;
  --text-faint: color-mix(in srgb, var(--paper) 66%, transparent);
  --surface: #14110E;
  --line: color-mix(in srgb, var(--paper) 14%, transparent); --line-faint: color-mix(in srgb, var(--paper) 5%, transparent);
  --sky-glow: #D8DFFF; --sky-glow-core: #FFFAF0; --shadow: #000000;
  --modal-pad: 20px; --margin: clamp(24px,4.5vw,80px); --footer: 144px;
  /* A hero áttűnésének EGYETLEN forrása. Hazatéréskor lassabb, mint eltűnéskor: a 0,5 s-os
     visszatérés a footer fölött vágásnak érződött. A görbe szimmetrikus — megfordítva ugyanaz
     az ív —, és a fátyol is pont ezt kapja: két különböző görbe (ease vs ease-in-out) a
     felezőpontot ~110 ms-mal tolta el, és ez látszott „a fátyol lemarad a szöveg mögött”-nek. */
  --hero-in: .9s; --hero-out: .5s; --hero-ease: ease-in-out;
}
body.company-site { background: var(--surface); color: var(--paper); font-family: 'Avenir Next','Segoe UI',sans-serif; }
body.company-site, .company-site button, .company-site input { -webkit-font-smoothing: antialiased; }
.company-site > canvas { position: fixed; inset: 0 0 auto; z-index: 0; }
html.gorgetheto .company-site > canvas { height: max(1px,calc(100lvh - var(--footer))); }
/* Közös koordinátarendszer: a felső fátyol és a szöveg mögötti ellipszis
   a teljes vásznon fut ki, ezért egyiknek sincs levágott illesztési széle.
   Az ellipszis lefelé is lefedi a szolgáltatások sorát. */
body.company-site::before,
body.company-site::after {
  content: ''; position: fixed; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(to bottom,color-mix(in srgb,var(--surface) 75%,transparent) 0,color-mix(in srgb,var(--surface) 44%,transparent) 90px,color-mix(in srgb,var(--surface) 15%,transparent) 180px,transparent 280px);
  opacity: 1; transition: opacity var(--hero-in) var(--hero-ease);
}
/* A szöveg mögötti ellipszis a játék vászna (z-index: 3) fölött sötétít, különben a romok és
   a hegyek eltakarják (mérve: 15 fényerőszint a lap tetejének 60-ával szemben). A felső
   fátyol a vászon alatt marad, hogy az égi beszélgetést ne sötétítse tovább. */
body.company-site::after {
  z-index: 4;
  background: radial-gradient(ellipse clamp(560px,58vw,900px) clamp(340px,calc(44vh + 40px),520px) at 12vw clamp(240px,calc(30vh + 40px),370px),color-mix(in srgb,var(--surface) 74%,transparent) 0%,color-mix(in srgb,var(--surface) 56%,transparent) 35%,color-mix(in srgb,var(--surface) 22%,transparent) 65%,transparent 100%);
}
body.company-site.is-game-focused::before,
body.company-site.is-game-focused::after { opacity: 0; transition-duration: var(--hero-out); }
.site-ui { position: fixed; z-index: 5; box-sizing: border-box; }
.site-intro { pointer-events: auto; }
.world-silhouette .site-description { color: color-mix(in srgb, var(--paper) 86%, transparent); text-shadow: 0 1px 4px var(--surface); }
/* A félbeszakított áttűnést a böngésző magától fordítja vissza a pillanatnyi értékről
   (css-transitions-1, „faster reversing of interrupted transitions”): a rávitt, majd rögtön
   levitt egér ugyanazt az ívet járja be visszafelé, arányosan megrövidített idő alatt.
   Ezért itt nincs JS-idővonal — a fade EGYETLEN kapcsolója a body `is-game-focused` osztálya. */
.world-silhouette .site-intro {
  opacity: 1; transform: translateY(0); visibility: visible;
  transition: opacity var(--hero-in) var(--hero-ease),transform var(--hero-in) var(--hero-ease),visibility 0s linear 0s;
}
.world-silhouette.is-game-focused .site-intro {
  /* Az áttűnés közben még elérhető, teljesen eltűnve már nem fog egeret. */
  opacity: 0; transform: translateY(-10px); visibility: hidden;
  transition-duration: var(--hero-out),var(--hero-out),0s;
  transition-delay: 0s,0s,var(--hero-out);
}
.company-site a { color: inherit; }
.company-site button, .company-site input, .company-site select { font: inherit; }
.company-site button, .company-site a, .company-site input, .company-site select { -webkit-tap-highlight-color: transparent; }
.company-site button { cursor: pointer; }
.company-site button:disabled { cursor: wait; opacity: .5; }
.company-site :focus-visible { outline: 2px solid var(--gold); outline-offset: 5px; }
.site-header { top: 30px; left: var(--margin); right: var(--margin); display: flex; align-items: center; justify-content: space-between; gap: 20px; pointer-events: none; }
/* A logó GOMB (a promptba ír), ezért a böngésző keretét, hátterét és belső margóját le kell vetkőznie. */
.company-brand { --divider-space: 20px; display: flex; align-items: center; gap: 0; margin: 0; padding: 0; border: 0; background: none; color: inherit; text-align: start; text-decoration: none; pointer-events: auto; }
/* A logójel 50 × 50 px minden ablakméreten; csökkentett mozgásnál az álló változat látszik. */
.brand-mark { display: inline-flex; flex: 0 0 50px; width: 50px; height: 50px; }
.brand-mark > img { display: block; width: 100%; height: 100%; }
.brand-mark > .brand-mark-still { display: none; }
@media (prefers-reduced-motion: reduce) {
  .brand-mark > .brand-mark-moving { display: none; }
  .brand-mark > .brand-mark-still { display: block; }
}
.brand-name { margin-left: var(--divider-space); padding-left: var(--divider-space); border-left: 1px solid var(--line); font-family: 'Brand Manrope',Arial,sans-serif; font-size: 11px; letter-spacing: .12em; font-weight: 550; line-height: 1.65; text-transform: uppercase; color: var(--logo); }
.header-actions { display: flex; align-items: center; gap: 24px; }
.quiet-button { padding: 8px 0; background: none; border: 0; font-size: 12px !important; }
.quiet-button span { margin-left: 7px; color: var(--gold); }
.site-intro { left: var(--margin); top: clamp(120px,13vh,176px); }
.eyebrow { display: flex; align-items: center; gap: 13px; margin: 0 0 10px; font-size: 10px; letter-spacing: .22em; font-weight: 500; color: var(--gold); }
.eyebrow-rule { width: 25px; height: 1px; background: var(--gold); }
.site-intro h1 { margin: 0; font-size: clamp(43px,5.15vw,84px); font-weight: 430; letter-spacing: -.052em; line-height: 1.08; text-shadow: 0 3px 30px color-mix(in srgb,var(--surface) 27%,transparent); }
.site-intro h1 em { font-family: Georgia,'Times New Roman',serif; font-weight: 400; color: var(--violet-light); letter-spacing: -.055em; }
.site-description { font-size: clamp(14px,1.12vw,17px); line-height: 1.8; margin: 23px 0 21px; letter-spacing: -.01em; }
/* A három szolgáltatás egy-egy nagyon halvány, áttetsző csip. */
.service-line { display: flex; gap: 8px; font-size: 11px; color: var(--paper); }
.service-line button { margin: 0; padding: 6px 12px; border: 1px solid var(--line); border-radius: 999px; background: color-mix(in srgb, var(--surface) 45%, transparent); color: inherit; font: inherit; letter-spacing: inherit; transition: color .2s ease,border-color .2s ease; }
.service-line button:hover, .service-line button:focus-visible { border-color: color-mix(in srgb, var(--pink) 55%, transparent); color: var(--pink); }
.service-line button:focus-visible { outline: 1px solid var(--gold); outline-offset: 4px; }
.service-line button:disabled { cursor: wait; opacity: .65; }
#oracle-input { min-width: 0; flex: 1; width: 100%; background: transparent; border: none; font-size: 12px; padding: 14px 6px 14px 0; user-select: text; }
#oracle-input:focus { outline: none; }
#oracle-send { flex-shrink: 0; }
.company-footer { bottom: 0; left: var(--margin); right: var(--margin); min-height: var(--footer); padding: 20px 0 18px; border-top: 1px solid var(--line); user-select: text; }
.company-details { display: grid; grid-template-columns: 1.25fr .8fr .9fr 1.8fr; gap: 15px; margin: 17px 0 0; }
.company-details dd { margin: 0; font-size: 11px; overflow-wrap: anywhere; }
.company-details a { text-decoration: none; }
.company-site #hud {
  top: auto !important; bottom: calc(var(--footer) + 20px) !important;
  right: max(var(--margin),env(safe-area-inset-right)) !important; left: auto !important;
  display: flex; flex-direction: row; align-items: flex-start; gap: 28px; z-index: 4;
  box-sizing: border-box; max-width: calc(100vw - 2 * var(--margin)); padding: 0 !important;
  border: 0; border-radius: 0; background: none !important; box-shadow: none;
  text-shadow: 0 1px 5px color-mix(in srgb,var(--surface) 50%,transparent);
}
.company-site #hud .cell { align-items: flex-start; gap: 6px; }
.company-site #hud .cell .k { font-size: 9px; line-height: 1; color: var(--text-faint); letter-spacing: .13em; opacity: 1; }
.company-site #hud .cell .v { font-size: 24px; font-weight: 450; line-height: 1; height: 1em; letter-spacing: -.025em; color: var(--paper); }
.company-site #hud-score { min-width: 4ch; }
.company-site #hud-lives { display: flex; align-items: center; gap: 5px; width: auto; }
.company-site #hud-lives .pip { background: none !important; flex: 0 0 6px; width: 6px; height: 6px; margin: 0; background-color: var(--gold) !important; border-radius: 50%; box-shadow: 0 0 6px color-mix(in srgb,var(--gold) 15%,transparent); }
.company-site #hud-lives .pip.lost { background-color: var(--muted) !important; box-shadow: none; }
.company-site #rail { top: auto !important; bottom: calc(var(--footer) + 85px) !important; right: var(--margin) !important; opacity: .8; transform-origin: right bottom; transform: scale(.8); }
.company-site #rail .sor:first-child, .company-site #rail .valaszto { display: none; }
.company-site #tools, .company-site #panel, .company-site #stats, .company-site #hud-fatyol, .company-site #proxy-badge { display: none !important; }
.company-site.tuning .oracle { opacity: 0; pointer-events: none; }
.company-site.tuning #panel { display: flex !important; z-index: 35; }
.company-site #site-workshop-panel { top: 87px; right: var(--margin); width: 296px; padding: 0 0 8px; z-index: 20; }
#site-workshop-panel[hidden] { display: none; }
#site-workshop-panel > a { display: flex; align-items: center; gap: 10px; margin: 0 var(--modal-pad); padding: 12px 0; font-size: 13px; border: 0; border-bottom: 1px solid var(--line); background: transparent; color: var(--paper); text-decoration: none; }
#site-workshop-panel a svg { flex: 0 0 auto; width: 16px; height: 16px; color: var(--gold); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@media (min-width: 1800px) { :root { --margin: 6vw; } }
@media (max-width: 1000px) {
  :root { --margin: 28px; --footer: 198px; }
  .site-header { top: 24px; } .header-actions { gap: 18px; }
  .site-intro h1 { font-size: 54px; } .site-intro { top: 128px; }
  .site-description { font-size: 13px; line-height: 1.7; }
}
@media (max-width: 700px) {
  :root { --margin: 22px; --footer: 244px; }
  .site-header { top: max(19px,env(safe-area-inset-top)); }
  .brand-name { font-size: 8px; letter-spacing: .06em; } .company-brand { --divider-space: 10px; }
  .header-actions { gap: 12px; } .quiet-button { font-size: 10px !important; }
  .site-intro { top: 108px; right: var(--margin); } .eyebrow { font-size: 8px; letter-spacing: .17em; }
  .site-intro h1 { font-size: clamp(37px,9vw,55px); line-height: 1.05; } .site-description { font-size: 12px; margin: 15px 0 13px; }
  .service-line { font-size: 9px; gap: 12px; }
  .company-site #hud { bottom: calc(var(--footer) + 14px) !important; gap: 22px; }
  .company-site #hud .cell .v { font-size: 21px; }
  .company-site #rail { display: none; }
  .company-footer { padding-top: 12px; padding-bottom: max(10px,env(safe-area-inset-bottom)); }
  .company-details { grid-template-columns: 1.1fr 1fr; gap: 8px 10px; margin-top: 10px; } .company-details dt { font-size: 8px; margin-bottom: 3px; } .company-details dd { font-size: 10px; }
  .company-details > div:last-child { grid-column: 1/-1; }
  .company-details > div:nth-child(3) { position: absolute; right: 0; top: 38px; }
  .company-details > div:nth-child(2) { grid-column: 1; }
  .company-site #site-workshop-panel { top: 70px; max-width: calc(100vw - 44px); }
}
@media (max-height: 720px) and (min-width: 701px) { .site-intro { top: 105px; } .site-intro h1 { font-size: 52px; } .site-description { margin: 17px 0 13px; } }
@media (max-height: 740px) and (max-width: 700px) { .site-intro { top: 86px; } .site-intro h1 { font-size: 37px; } .site-description { font-size: 11px; margin: 10px 0; } .service-line { font-size: 8px; } }
@media (max-height: 500px) and (min-width: 701px) { :root { --footer: 82px; } .site-header { top: 14px; } .brand-name { font-size: 9px; } .site-intro { top: 86px; } .site-intro h1 { font-size: 34px; } .eyebrow { display: none; } .site-description { font-size: 11px; margin: 10px 0; } .service-line { font-size: 9px; } .company-footer { padding: 10px 0; } .company-details { margin-top: 9px; } .company-site #hud { bottom: calc(var(--footer) + 12px) !important; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  .world-silhouette.is-game-focused .site-intro { transition-delay: 0s; }
  .world-silhouette.is-game-focused .site-intro,
  .world-silhouette.is-game-focused .site-intro * { visibility: hidden; pointer-events: none; }
}

/* A honlap kerete a teljes mozgó világ és időjárás fölött ül. */
.company-site [hidden] { display: none !important; }
.brand-name { font-size: 12px; letter-spacing: .04em; line-height: 1.35; }
.brand-name > span { display: block; white-space: nowrap; }
.header-actions { gap: 10px; }
.quiet-button { min-height: 44px; min-width: 44px; font-size: 13px !important; }
.developer-actions { display: flex; align-items: center; gap: 14px; padding-left: 14px; margin-left: 4px; border-left: 1px solid var(--line); }
.site-control { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 44px; padding: 10px 15px; border-radius: 9px; font-size: 14px !important; font-weight: 500 !important; line-height: 1.3; transition: background .18s,border-color .18s,box-shadow .18s,transform .18s; }
.control-icon { flex: 0 0 auto; width: 18px; height: 18px; }
#site-sound { min-width: 118px; white-space: nowrap; }
.company-footer { left: 0; right: 0; z-index: 10; min-height: 0; display: grid; grid-template-columns: minmax(0,1fr) auto; grid-template-areas: 'name privacy' 'details details'; gap: 22px 28px; align-items: center; padding: 26px max(var(--margin),env(safe-area-inset-right)) max(28px,env(safe-area-inset-bottom)) max(var(--margin),env(safe-area-inset-left)); border-top: 1px solid var(--line); }
.company-details { grid-area: details; display: grid; grid-template-columns: 1.1fr .65fr .8fr 1.8fr; gap: 16px 28px; margin: 0; }
.company-details > div { min-width: 0; }
.company-details dt { margin-bottom: 6px; font-size: 12px; line-height: 1.3; }
.company-details > div:nth-child(3) { position: static; }
.company-details > div:last-child { grid-column: auto; }
.company-details a { text-underline-offset: 4px; transition: color .18s; }
#cookie-settings { grid-area: privacy; justify-self: end; appearance: none; min-height: 24px; padding: 3px 0; border: 0; border-radius: 0; background: none; box-shadow: none; color: var(--muted); font-size: 12px; font-weight: 400; line-height: 1.5; text-align: left; text-decoration: underline; text-underline-offset: 4px; transition: color .18s,text-decoration-color .18s; }
.cookie-actions { display: flex; flex-wrap: wrap; gap: 10px; }
/* Közös ablakstílus: a Tájékoztató, a Műhely, az Élő hangolás és az arany előnézet
   ellenőrzőpanelei ugyanazt a felületet (a lábléc színe), fejlécet, bezárógombot és
   gombokat használják. Új ablak ezekből épül, nem saját felületből. */
.modal { box-sizing: border-box; color: var(--paper); background: var(--surface); border: 1px solid color-mix(in srgb, var(--gold) 30%, transparent); border-radius: 12px; box-shadow: 0 24px 80px color-mix(in srgb,var(--shadow) 60%,transparent); }
.modal-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px var(--modal-pad); border-bottom: 1px solid var(--line); }
.modal-eyebrow { display: flex; align-items: center; gap: 10px; margin: 0 0 6px; font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--gold); }
.modal-eyebrow::before { content: ''; width: 22px; height: 1px; background: currentColor; }
.modal-title { margin: 0; font-size: 19px; font-weight: 500; letter-spacing: -.025em; line-height: 1.25; }
.modal-close { flex: 0 0 auto; display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 1px solid var(--line); border-radius: 8px; background: none; color: var(--paper); cursor: pointer; transition: color .18s,border-color .18s; }
.modal-close svg { width: 18px; height: 18px; }
.modal-close:hover { color: var(--pink); border-color: var(--pink); }
.modal-button { min-height: 40px; padding: 9px 16px; border: 1px solid var(--line); border-radius: 8px; background: none; color: var(--paper); cursor: pointer; transition: color .18s,border-color .18s,background .18s; }
.modal-button[aria-pressed="true"] { color: var(--gold); border-color: var(--gold); }
.modal-button:hover { color: var(--pink); border-color: var(--pink); }
.modal-button.is-primary { color: var(--surface); background: var(--gold); border-color: var(--gold); }
/* A `.company-site button { font: inherit }` a betűméretet is örökölteti (mérve: 16 px a
   Tájékoztatóban, 12 px az ellenőrzőpanelen); azonos erősséggel, később írjuk felül. */
button.modal-close { font-size: 22px; line-height: 1; }
button.modal-button { font-size: 14px; font-weight: 500; line-height: 1.4; }
#cookie-dialog { padding: 0; margin: auto; width: min(760px,calc(100vw - 48px)); max-width: none; max-height: min(86dvh,880px); overflow: hidden; user-select: text; }
/* A tájékoztató föl-le úszik: befelé és kifelé is CSS-animáció, a JS csak a záró osztályt
   teszi rá, és megvárja a mozdulat végét. (A `cookie-up` névre 2026-09-16-ig egyetlen
   képkockakészlet sem tartozott a lapon, tehát a nyitás valójában nem mozgott — mérve.) */
#cookie-dialog[open] { display: flex; flex-direction: column; animation: cookie-up 240ms cubic-bezier(.2,.7,.2,1) both; }
#cookie-dialog[open].is-closing { animation: cookie-down 180ms ease-in both; }
@keyframes cookie-up { from { opacity: 0; transform: translateY(36px); } }
@keyframes cookie-down { to { opacity: 0; transform: translateY(36px); } }
#cookie-dialog::backdrop { background: color-mix(in srgb,var(--surface) 72%,transparent); backdrop-filter: blur(8px); }
.cookie-heading { flex: 0 0 auto; }
.cookie-heading-copy { min-width: 0; }
.cookie-heading-actions { display: flex; align-items: center; gap: 16px; flex-shrink: 0; }
.cookie-document { flex: 1 1 auto; min-height: 0; padding: 8px var(--modal-pad) 28px; overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; scroll-padding-block: 20px; font-size: 15px; line-height: 1.7; color: var(--text-soft); overflow-wrap: anywhere; }
.cookie-document:focus-visible { outline-offset: -5px; }
#cookie-intro { padding: 18px 20px; border: 1px solid color-mix(in srgb,var(--gold) 15%,transparent); border-left: 2px solid var(--gold); border-radius: 0 10px 10px 0; background: color-mix(in srgb,var(--gold) 3%,transparent); color: var(--paper); }
.cookie-document h3 { display: flex; align-items: baseline; gap: 12px; margin: 24px 0 8px; padding-top: 18px; border-top: 1px solid var(--line); font-size: 18px; font-weight: 500; line-height: 1.4; color: var(--gold); }
.cookie-document { counter-reset: privacy-section; }
.cookie-document h3::before { counter-increment: privacy-section; content: counter(privacy-section,decimal-leading-zero); flex-shrink: 0; font: 12px ui-monospace,monospace; color: var(--muted); }
.cookie-document p { margin: 10px 0; }
.cookie-document a { color: var(--gold); text-underline-offset: 4px; text-decoration-color: color-mix(in srgb,var(--gold) 38%,transparent); }
.cookie-document a:hover { color: var(--pink); text-decoration-color: var(--pink); }
.cookie-document .cookie-date { margin: 24px 0 0; font-size: 13px; color: var(--muted); }
/* Az üzemeltető adatai a lábléc cégadataihoz hasonló, címkézett kártyán. */
.cookie-operator { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px 24px; margin: 28px 0 0; padding: 20px 22px; border: 1px solid var(--line); border-radius: 10px; background: color-mix(in srgb, var(--paper) 3%, transparent); }
.cookie-operator dt { margin: 0 0 4px; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.cookie-operator dd { display: flex; flex-direction: column; gap: 2px; margin: 0; font-size: 15px; line-height: 1.5; color: var(--paper); }
.cookie-operator a { width: fit-content; }
/* A tájékoztató görgetősávja a felület színén ül: a sín nem látszik, csak a halvány fogantyú. */
.cookie-document { scrollbar-width: thin; scrollbar-color: var(--muted) var(--surface); }
.cookie-document::-webkit-scrollbar { width: 8px; }
.cookie-document::-webkit-scrollbar-track { background: var(--surface); border-radius: 8px; }
.cookie-document::-webkit-scrollbar-thumb { background: var(--muted); border: 2px solid var(--surface); border-radius: 8px; }
.cookie-document::-webkit-scrollbar-thumb:hover { background: var(--gold); }
.cookie-decision { flex: 0 0 auto; padding: 16px var(--modal-pad) 20px; border-top: 1px solid var(--line); }
.cookie-decision .cookie-actions { display: grid; grid-template-columns: 1fr 1fr; }
#cookie-status { margin: 0 0 14px; font-size: 14px; line-height: 1.5; color: var(--text-soft); }
#cookie-status[data-state="enabled"] { color: var(--gold); }
@media (max-width: 1000px) {
  .company-details { grid-template-columns: 1.25fr .8fr 1fr; gap: 14px 22px; }
  .company-details > div:last-child { grid-column: 1 / -1; }
  .company-footer { padding-top: 20px; padding-bottom: max(20px,env(safe-area-inset-bottom)); }
}
@media (max-width: 700px) {
  :root { --margin: 18px; --modal-pad: 16px; }
  .brand-name { font-size: 10px; }
  .header-actions { gap: 6px; }
  .quiet-button { font-size: 12px !important; }
  .site-header { gap: 10px; align-items: flex-start; }
  .header-actions { flex-wrap: wrap; justify-content: flex-end; }
  .site-control { gap: 7px; padding: 10px; }
  #site-sound { min-width: 0; }
  .developer-actions { flex-basis: 100%; justify-content: flex-end; border-left: 0; padding-left: 0; margin: 0; gap: 12px; }
  .company-footer { grid-template-columns: minmax(0,1fr); grid-template-areas: 'name' 'details' 'privacy'; gap: 14px; padding-top: 20px; padding-bottom: max(16px,env(safe-area-inset-bottom)); }
  #cookie-settings { justify-self: start; }
  .company-details { grid-template-columns: minmax(0,1.3fr) minmax(0,1fr); gap: 10px 16px; }
  .company-details dt { font-size: 12px; margin-bottom: 4px; }
  .company-details dd { font-size: 13px; }
  .company-details > div:nth-child(2) { grid-column: 2; grid-row: 1; }
  .company-details > div:nth-child(3) { grid-column: 2; grid-row: 2; }
  .company-details > div:first-child { grid-row: 1 / 3; }
  .company-details > div:last-child { grid-column: 1 / -1; }
  #cookie-dialog { width: calc(100vw - 20px); max-height: calc(100dvh - 20px); }
  .modal-head { gap: 12px; }
  .modal-title { font-size: 17px; }
  .modal-button { padding: 10px 12px; }
  .cookie-heading-actions { flex-direction: column-reverse; gap: 4px; }
  .cookie-document { padding-top: 4px; padding-bottom: 24px; }
  #cookie-intro { padding: 14px; }
  .cookie-operator { grid-template-columns: minmax(0,1fr); padding: 16px; }
  .cookie-decision { padding-bottom: max(18px,env(safe-area-inset-bottom)); }
  #cookie-status { margin-bottom: 12px; }
}
@media (max-width: 380px) {
  #site-sound { min-width: 44px; }
  #site-sound-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
@media (max-width: 700px) and (max-height: 640px) {
  .site-description, .service-line, .eyebrow { display: none; }
  .site-intro h1 { font-size: 30px; }
  .company-footer { gap: 10px; padding-top: 12px; padding-bottom: max(12px,env(safe-area-inset-bottom)); }
  .modal-head { padding-block: 10px; }
  .modal-eyebrow { display: none; }
}
@media (max-height: 500px) and (min-width: 701px) {
  .company-footer { gap: 12px; padding-top: 12px; padding-bottom: max(12px,env(safe-area-inset-bottom)); }
  .company-details { grid-template-columns: 1.1fr .7fr .9fr 1.65fr; gap: 12px; }
  .company-details > div:last-child { grid-column: auto; }
  .company-details dd { font-size: 13px; }
  .brand-name { font-size: 10px; }
  #cookie-dialog { max-height: calc(100dvh - 24px); }
  .modal-head { padding-block: 10px; }
  .modal-eyebrow { display: none; }
  .cookie-decision { padding-block: 12px; }
}
/* Csökkentett mozgásnál a tájékoztató NEM mozog, és nem is 0,01 ms-ig: a JS a `finished`-re
   vár, és így nincs mire várnia — a nyitás és a zárás azonnal végigfut. (A sáv ugyanezt a
   szabályt a SAJÁT szabályai UTÁN kapja meg, különben az azonos erősségű `.is-leaving`
   nyerne: két egyforma súlyú szabály közül a későbbi dönt.) */
@media (prefers-reduced-motion: reduce) {
  #cookie-dialog[open], #cookie-dialog[open].is-closing { animation: none; }
}

/* A helyi fejlesztői vezérlők a honlap anyagait és ritmusát követik. */
.developer-actions { display: none; gap: 4px; align-items: center; }
.developer-actions:has(button:not([hidden])) { display: flex; }
.developer-actions .quiet-button { display: inline-flex; align-items: center; gap: 10px; padding: 0 12px; border: 1px solid transparent; border-radius: 5px; white-space: nowrap; }
.developer-actions .quiet-button[hidden] { display: none; }
.developer-actions .quiet-button span { margin: 0; color: inherit; }
.developer-actions .quiet-button > [aria-hidden] { color: var(--gold); }
.developer-actions .quiet-button[aria-expanded=true] { color: var(--gold); border-color: var(--line); background: color-mix(in srgb,var(--surface) 80%,transparent); }
.developer-actions .quiet-button:hover { color: var(--pink); border-color: var(--line); background: color-mix(in srgb,var(--surface) 80%,transparent); }
.company-site #tuner { z-index: 30; top: 16px; right: 12px; bottom: 12px; width: 452px; max-width: calc(100vw - 24px); padding: 0; gap: 0; overflow: hidden; color-scheme: dark; }
.company-site #tuner-body { padding: 6px var(--modal-pad) 10px; gap: 6px; overflow: hidden; }
.company-site #tuner select { background: var(--surface); color: var(--paper); border: 1px solid var(--line); border-radius: 5px; padding: 3px 7px; min-height: 28px; font-size: 12px; }
.company-site #tuner option { background: var(--surface); color: var(--paper); }
.company-site #tuner .tuner-buttons { gap: 4px; }
.company-site #tuner .tuner-buttons button { min-width: 30px; min-height: 30px; border-radius: 5px; background: color-mix(in srgb,var(--paper) 3%,transparent); color: var(--text-soft); border-color: var(--line); }
.company-site #tuner .tuner-buttons button:hover { color: var(--gold); border-color: var(--gold); }
.company-site #tuner .tuner-groups { overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--muted) transparent; padding-right: 8px; margin-right: -8px; }
.company-site #tuner details { padding: 0; border-color: var(--line); }
.company-site #tuner summary { display: flex; align-items: center; gap: 8px; min-height: 34px; padding: 5px 0; box-sizing: border-box; font-size: 13px; font-weight: 500; letter-spacing: 0; color: var(--text-soft); }
.company-site #tuner summary::before { font-size: 12px; color: var(--muted); }
.company-site #tuner details[open] > summary { color: var(--gold); }
.company-site #tuner .tuner-row:not(.tuner-fejlec) { display: grid; grid-template-columns: minmax(136px, 1.2fr) minmax(65px, 1fr) 54px; align-items: center; min-height: 31px; gap: 8px; margin: 0; }
.company-site #tuner .tuner-row label { grid-column: auto; min-width: 0; font-size: 12px; line-height: 1.25; color: var(--text-soft); }
.company-site #tuner input[type=range] { margin: 0; width: 100%; min-height: 24px; accent-color: var(--gold); }
.company-site #tuner output { width: auto; padding: 4px; border-radius: 4px; background: color-mix(in srgb,var(--surface) 33%,transparent); color: var(--gold); font-size: 12px; }
.company-site #tuner .tuner-fejlec { flex-wrap: wrap; margin: 6px 0; }
.company-site #tuner .tuner-nev { color: var(--paper); }
.company-site #tuner .tuner-info { color: var(--muted); }
.company-site #tuner .tuner-jel { background: var(--gold); color: var(--surface); }
/* A rövid sorokban a kapcsoló és a választó ugyanazt az oszlopot használja. */
.company-site #tuner .tuner-toggle input { grid-column: 2 / -1; justify-self: end; }
/* Kiírásos kapcsoló: a kapcsoló a 2., az élő kiírás a 3. oszlopba kerül. */
.company-site #tuner .tuner-toggle:has(output) input { grid-column: 2; }
.company-site #tuner .tuner-select select { grid-column: 2 / -1; width: 100%; min-width: 0; }
.company-site #tuner input[type=checkbox] { appearance: none; box-sizing: border-box; width: 34px; height: 20px; margin: 4px 0; border: 1px solid var(--muted); border-radius: 12px; background: color-mix(in srgb,var(--paper) 12%,var(--surface)); cursor: pointer; position: relative; }
.company-site #tuner input[type=checkbox]::before { content: ''; position: absolute; width: 12px; height: 12px; top: 3px; left: 3px; border-radius: 50%; background: var(--text-soft); transition: transform .12s; }
.company-site #tuner input[type=checkbox]:checked { background: var(--gold); border-color: var(--gold); }
.company-site #tuner input[type=checkbox]:checked::before { transform: translateX(14px); background: var(--surface); }
.company-site #tuner input:focus-visible, .company-site #tuner select:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.company-site #tuner .tuner-row:last-child { margin-bottom: 6px; }
.company-site #site-workshop-panel { max-height: calc(100dvh - var(--footer) - 110px); overflow-y: auto; }
.company-site.tuning #panel { position: static; flex-shrink: 0; justify-content: flex-start; padding: 4px 0 12px; gap: 7px; border: 0; background: none; }
.company-site #panel button { min-width: 36px; min-height: 36px; border: 1px solid var(--line); border-radius: 5px; background: color-mix(in srgb,var(--paper) 3%,transparent); color: var(--text-soft); }
.company-site #panel button:hover { color: var(--gold); border-color: var(--gold); }
.tuner-heading-copy { min-width: 0; margin-right: auto; }
.tuner-heading-actions { flex: 0 0 auto; flex-wrap: nowrap; padding: 0; border: 0; }
.tuner-heading-actions button,
.tuner-language-button { width: 30px; height: 30px; padding: 0; }
.tuner-heading-actions button svg,
.tuner-language-button svg { width: 16px; height: 16px; }
.tuner-language-button { position: relative; display: grid; place-items: center; flex: 0 0 30px; overflow: hidden; border: 1px solid var(--line); border-radius: 5px; background: color-mix(in srgb,var(--paper) 3%,transparent); color: var(--text-soft); cursor: pointer; }
.tuner-language-button:hover,
.tuner-language-button:focus-within { color: var(--gold); border-color: var(--gold); }
.company-site #tuner .tuner-language-button select { position: absolute; inset: 0; width: 100%; min-height: 0; padding: 0; opacity: 0; cursor: pointer; }
.tuner-animation-test #panel { flex-wrap: wrap; }
@media (max-width: 700px) {
  .development .developer-actions { position: absolute; top: 51px; right: 0; gap: 4px; }
  .development .site-header { gap: 4px; }
  .development .header-actions { flex-wrap: nowrap; }
  .developer-actions .quiet-button { min-height: 36px; padding: 0 10px; background: color-mix(in srgb,var(--surface) 60%,transparent); border-color: var(--line); }
  .development .site-intro { top: 132px; }
  .company-site #tuner { top: max(8px,env(safe-area-inset-top)); bottom: max(8px,env(safe-area-inset-bottom)); right: 8px; width: calc(100vw - 16px); max-width: none; }
  .company-site #tuner-body { padding-bottom: 8px; }
  .company-site #tuner .tuner-buttons button { min-width: 30px; min-height: 30px; }
  .company-site #tuner select { min-height: 34px; }
  .company-site #tuner .tuner-row:not(.tuner-fejlec) { grid-template-columns: minmax(119px,1.2fr) minmax(45px,1fr) 48px; gap: 6px; min-height: 36px; }
  .company-site #tuner summary { min-height: 38px; }
  .company-site #tuner input[type=range] { min-height: 32px; }
  .company-site #site-workshop-panel { top: 116px; right: 12px; max-width: calc(100vw - 24px); max-height: calc(100dvh - 128px); }
  .company-site.tuning #panel { padding: 4px 0 12px; }
  .company-site #panel button { min-width: 40px; min-height: 40px; }
}
@media (max-width: 360px) {
  .development .header-actions .site-control { font-size: 12px !important; padding: 10px 8px; gap: 5px; }
  .company-site #tuner .tuner-buttons { gap: 5px; }
  .company-site #tuner .tuner-buttons button { min-width: 28px; min-height: 28px; }
  .company-site.tuning #panel { gap: 6px; }
  .company-site #panel button { min-width: 36px; }
}
@media (max-height: 500px) and (min-width: 701px) {
  .company-site #tuner { top: 8px; bottom: 8px; }
  .company-site #tuner-body { padding-top: 10px; gap: 8px; }
  .company-site #site-workshop-panel { top: 70px; max-height: calc(100dvh - 82px); }
}

/* Letisztult honlap-HUD: ikonvezérlők, könnyű Orákulum és rendezett cégadatok. */
.header-actions { gap: 10px; }
.action-cluster { display: flex; }
.action-cluster,
.developer-actions {
  align-items: center;
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: color-mix(in srgb,var(--surface) 30%,transparent);
  box-shadow: inset 0 1px 0 color-mix(in srgb,var(--paper) 2.5%,transparent);
  backdrop-filter: blur(12px);
}
.developer-actions {
  order: -1;
  margin: 0;
}
.developer-actions:has(button:not([hidden])) { display: flex; }
.icon-button,
.developer-actions .icon-button {
  position: relative;
  display: grid;
  place-items: center;
  width: 36px;
  min-width: 36px;
  height: 36px;
  min-height: 36px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  box-shadow: none;
  color: color-mix(in srgb, var(--paper) 86%, transparent);
  backdrop-filter: none;
  transition: color .18s,background .18s,transform .18s;
}
#site-sound { width: 36px; min-width: 36px; }
.icon-button svg { width: 19px; height: 19px; color: currentColor; stroke-width: 1.55; }
.icon-button[aria-expanded="true"],
#site-sound[aria-pressed="true"] {
  color: var(--gold);
  background: color-mix(in srgb,var(--gold) 10%,transparent);
}
/* A kattintható elemek hovere a márka rózsaszíne (a logójel pontja); az arany a bekapcsolt állapoté. */
.icon-button:hover,
.icon-button:focus-visible,
#site-sound:hover,
#site-sound:focus-visible {
  color: var(--pink);
  background: color-mix(in srgb, var(--pink) 10%, transparent);
}
.icon-button:active { transform: translateY(1px); }
.icon-button:focus-visible { outline-offset: 3px; }
/* A hang-, a nyelv- és a zászlógombok EGYSÉGESEK: mind ugyanaz az `icon-button`,
   háttér, keret, árnyék és elmosás nélkül ülnek a tájon, és a csoportjuk sem
   rajzol felületet alájuk. Az állapotot a szín viszi: rózsaszín a hover, arany
   a bekapcsolt / a most futó nyelv. */
#site-sound, #site-sound:hover, #site-sound:focus-visible, #site-sound[aria-pressed],
#site-language, #site-language:hover, #site-language:focus-visible, #site-language[aria-expanded],
.language-menu .icon-button, .language-menu .icon-button:hover,
.language-menu .icon-button:focus-visible, .language-menu .icon-button[aria-pressed] { background: none; border: 0; box-shadow: none; backdrop-filter: none; }
.game-actions .action-cluster:has(#site-sound) { background: none; border: 0; box-shadow: none; backdrop-filter: none; }
/* Nyelvválasztó: a földgömbből JOBBRA nyílik ki a zászlósor.
   A kinyílás KLIPPEL fut (`clip-path`), nem `scaleX`-szel: a vízszintes skálázás
   a zászlókat is összenyomná, és a sáv csíkokká mosódna. A zászlók ezen felül
   lépcsőzetesen úsznak be (`--i` a sorszámuk, a site.js írja). */
.language-control { position: relative; display: flex; align-items: center; }
.language-menu {
  /* Az alsó éle a gomb alsó éléhez igazodik, így a tördelt sorok FÖLFELÉ nőnek. */
  position: absolute; left: 100%; bottom: 0;
  z-index: 6; display: flex; flex-wrap: wrap-reverse; align-items: center; justify-content: flex-start;
  gap: 2px; margin-left: 2px; padding: 0;
  /* `width: max-content` KELL: abszolút pozicionálva a tartalmazó blokk a 36 px-es
     földgömb, ezért a zsugorító szélesség nullára esne, és a 14 zászló egyetlen
     függőleges oszlopba tördelődne (mérve). Keskeny lapon a `max-width` tördeli
     a sort, és `wrap-reverse` miatt FÖLFELÉ nő, nem a lábléc fölé. */
  width: max-content;
  max-width: min(540px,max(128px,calc(100vw - 118px)));
  /* Nincs saját felülete: a zászlók ugyanúgy a tájon ülnek, mint a hanggomb. */
  border: 0; background: none; box-shadow: none;
  clip-path: inset(0 100% 0 0);
  opacity: 0; pointer-events: none;
  transition: clip-path .34s cubic-bezier(.22,1,.36,1),opacity .12s linear;
}
.language-control.is-open .language-menu { clip-path: inset(0 0 0 0); opacity: 1; pointer-events: auto; }
/* A zászlógomb dobozát az `icon-button` adja — itt csak a beúszás és a zászló
   állapota marad. A keret a ZÁSZLÓN ül, nem a gombon: a kép színét a hover és a
   kiválasztás nem tudja jelezni, a körberajzolt vonal viszont igen. */
.language-menu .icon-button { flex: 0 0 auto; opacity: 0; translate: -8px 0; transition: opacity .2s ease,translate .2s ease; }
.language-control.is-open .language-menu .icon-button { opacity: 1; translate: none; transition-delay: calc(70ms + var(--i) * 22ms); }
.language-menu .icon-button svg { display: block; width: 22px; height: 15px; border-radius: 2px; opacity: .58; box-shadow: 0 0 0 1px color-mix(in srgb,var(--paper) 20%,transparent); transition: opacity .18s,box-shadow .18s; }
.language-menu .icon-button:hover svg, .language-menu .icon-button:focus-visible svg { opacity: 1; box-shadow: 0 0 0 1.5px var(--pink); }
.language-menu .icon-button[aria-pressed="true"] svg { opacity: 1; box-shadow: 0 0 0 1.5px var(--gold); }
/* A zászlósor JOBBRA nyílik, pont a fejlesztői gombok és az FPS-mérő fölé.
   Amíg nyitva van, azok elhalványulnak — nem a sor alatt kandikálnak ki.
   `visibility`, nem `display`: így a sor helye nem ugrik el a be- és kikapcsoláskor. */
.game-actions .developer-actions,
.game-actions #stats.fps-meter { transition: opacity .2s ease,visibility 0s; }
.game-actions:has(.language-control.is-open) .developer-actions,
.game-actions:has(.language-control.is-open) #stats.fps-meter {
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .2s ease,visibility 0s linear .2s;
}
/* Keskeny lapon a sor TÖRDEL, és a második-harmadik sora a HUD számaiba fut bele.
   A sor 14 × 36 px + 13 × 2 px = 530 px; a bal szélétől (118 px) számolva 648 px
   alatt kezd tördelni — ez alatt a HUD is elhalványul, amíg a sor nyitva van.
   Szélesebb lapon egyetlen sor fér ki, ott nincs mit elrejteni. */
@media (max-width: 647px) {
  .company-site:has(.language-control.is-open) #hud { opacity: 0; visibility: hidden; }
}
@media (prefers-reduced-motion: reduce) {
  .language-menu, .language-menu .icon-button,
  .game-actions .developer-actions, .game-actions #stats.fps-meter { transition-duration: .01ms; transition-delay: 0s; }
}
.site-tooltip {
  position: fixed;
  inset: auto;
  z-index: 100;
  margin: 0;
  width: max-content;
  max-width: min(240px,calc(100vw - 24px));
  padding: 7px 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: color-mix(in srgb,var(--surface) 96%,transparent);
  box-shadow: 0 4px 16px color-mix(in srgb,var(--shadow) 20%,transparent);
  color: var(--paper);
  font: 400 11px/1.4 'Avenir Next','Segoe UI',sans-serif;
  letter-spacing: .01em;
  text-align: start;
  text-transform: none;
  white-space: normal;
  overflow-wrap: break-word;
  pointer-events: auto;
  cursor: default;
  opacity: 0;
  transition: opacity .14s ease;
}
.site-tooltip[data-open] { opacity: 1; }
.site-tooltip::backdrop { background: transparent; pointer-events: none; }
#site-sound[aria-pressed="false"] .sound-waves,
#site-sound[aria-pressed="true"] .sound-muted { display: none; }

.company-footer {
  left: 0;
  right: 0;
  grid-template-columns: minmax(0,1fr) 24px;
  grid-template-areas: 'details privacy';
  gap: 24px;
  align-items: start;
  padding: 32px max(var(--margin),env(safe-area-inset-right)) max(32px,env(safe-area-inset-bottom)) max(var(--margin),env(safe-area-inset-left));
  border-top-color: var(--line-faint);
  background: var(--surface);
  color: var(--text-soft);
}
.company-details {
  grid-template-columns: repeat(3,max-content);
  justify-content: start;
  gap: clamp(28px,4vw,64px);
  padding-top: 1px;
}
.company-details > div { position: static; grid-column: auto; grid-row: auto; }
.company-details dt { margin-bottom: 4px; color: var(--muted); font-size: 8px; letter-spacing: .09em; text-transform: uppercase; }
.company-details dd { display: flex; flex-direction: column; gap: 5px; color: var(--text-soft); font-size: 12px; line-height: 1.55; }
.company-details [data-company="address"],
.company-details [data-company="email"] { white-space: nowrap; overflow-wrap: normal; }
#cookie-settings {
  grid-area: auto; justify-self: auto; align-self: auto;
  position: absolute; right: max(var(--margin),env(safe-area-inset-right)); top: 50%; bottom: auto; transform: translateY(-50%);
  display: grid; place-items: center; margin: 0; padding: 0;
  width: 24px; min-width: 24px; height: 24px; min-height: 24px;
  border: 0; border-radius: 0; background: none; color: var(--muted);
  transition: color .18s;
}
#cookie-settings svg { width: 14px; height: 14px; }
#cookie-settings:hover, #cookie-settings:focus-visible { color: var(--pink); background: none; }
#cookie-settings:focus-visible { outline: 1px solid var(--gold); outline-offset: 2px; }
.company-footer a:hover, .company-footer a:focus-visible { color: var(--pink); }
.company-footer a:hover,
.company-footer a:focus-visible,
#cookie-settings,
#cookie-settings:hover { text-decoration: none; }
/* A süti-döntés a lábléc felső sávja, a lábléc anyagából és betűivel. A lábléc fölé
   simul, így a lábléc saját magassága — amiből a játék a pályát számolja — nem
   változik; a lábléc fölötti elemeket a --footer emeli a sáv fölé (site.js). */
/* A sáv ARANY, nem a lábléc színe: ez az első dolog, amiről a látogatónak
   döntenie kell, tehát el kell ütnie a lábléctől. A világosabb arany a
   `--gold` és a `--paper` keveréke — nyers szín itt nem állhat (site.test.mjs). */
#cookie-banner {
  --banner-gold: color-mix(in srgb,var(--gold) 72%,var(--paper));
  position: absolute; left: 0; right: 0; bottom: 100%;
  display: grid; grid-template-columns: minmax(0,1fr) auto; grid-template-areas: 'title actions' 'text actions';
  align-items: center; gap: 6px clamp(24px,4vw,64px);
  padding: 22px max(var(--margin),env(safe-area-inset-right)) 20px max(var(--margin),env(safe-area-inset-left));
  border-top: 2px solid color-mix(in srgb,var(--banner-gold) 55%,var(--paper));
  background: linear-gradient(to top,color-mix(in srgb,var(--banner-gold) 88%,var(--surface)),var(--banner-gold));
  box-shadow: 0 -14px 40px color-mix(in srgb,var(--gold) 28%,transparent);
}
/* A világos aranyon a szöveg és a keret a FELÜLET színe, nem a papíré. */
/* A sáv CÍME cím, nem mezőfelirat. A lábléc 8 px-es, ritkított nagybetűs `dt` stílusa
   ott jó, ahol egy adat FÖLÉ ír nevet (Cég, Helyszín); itt viszont ez a mondat vezeti be
   a döntést, tehát nagyobb és sötétebb, mint a magyarázó szöveg alatta. */
#cookie-banner h2 { grid-area: title; margin: 0; color: var(--surface); font-size: 15px; font-weight: 650; line-height: 1.35; letter-spacing: -.01em; }
#cookie-banner p { grid-area: text; margin: 0; color: color-mix(in srgb,var(--surface) 88%,var(--banner-gold)); font-size: 13.5px; font-weight: 500; line-height: 1.55; }
#cookie-banner .cookie-actions { grid-area: actions; flex-wrap: nowrap; gap: 10px; }
/* A Tájékoztató is RENDES gomb, nem aláhúzott hivatkozás. */
#cookie-banner .cookie-actions button { flex: 0 0 auto; min-height: 38px; padding: 9px 18px; border: 1px solid color-mix(in srgb,var(--surface) 42%,transparent); border-radius: 7px; background: none; color: var(--surface); font-size: 13px; font-weight: 500; line-height: 1.4; white-space: nowrap; text-decoration: none; transition: color .18s,border-color .18s,background .18s,box-shadow .18s; }
#cookie-banner .cookie-actions button:hover { background: color-mix(in srgb,var(--surface) 12%,transparent); border-color: var(--surface); }
#cookie-banner .cookie-actions button:focus-visible { outline: 2px solid var(--surface); outline-offset: 3px; }
/* A Megjegyezheti a javasolt válasz: a világos sávon SÖTÉT, kitöltött gomb.
   A kiválasztó a `.cookie-actions`-t is viszi, különben a fenti alapszabály
   (egy osztállyal több) specificitásban legyőzné, és a kitöltés elmaradna. */
#cookie-banner .cookie-actions [data-cookie-choice="allow"] { color: var(--banner-gold); background: var(--surface); border-color: var(--surface); font-weight: 650; box-shadow: 0 2px 10px color-mix(in srgb,var(--shadow) 26%,transparent); }
#cookie-banner .cookie-actions [data-cookie-choice="allow"]:hover { color: var(--gold); background: color-mix(in srgb,var(--surface) 88%,var(--paper)); border-color: var(--surface); }
/* A sáv LE-FÖL úszik be és ki, CSS-sel: befelé magától indul, amint a sáv megjelenik,
   kifelé a `is-leaving` osztályra. A JS csak az osztályt teszi rá és megvárja a végét.
   (2026-09-16-ig az info gomb közepébe zsugorodott össze — az a mozdulat egy gombra
   mutatott, amit közben el is rejtünk, tehát semmit nem magyarázott meg.)
   Amíg kint van, a lábléc info gombja nem látszik: egy döntéshez egy belépő. */
#cookie-banner { animation: cookie-banner-in 300ms cubic-bezier(.22,1,.36,1) both; }
#cookie-banner.is-leaving { animation: cookie-banner-out 300ms cubic-bezier(.22,1,.36,1) both; }
@keyframes cookie-banner-in { from { opacity: 0; transform: translateY(22px); } }
@keyframes cookie-banner-out { to { opacity: 0; transform: translateY(22px); } }
@media (prefers-reduced-motion: reduce) { #cookie-banner, #cookie-banner.is-leaving { animation: none; } }
.company-footer.has-cookie-banner #cookie-settings { visibility: hidden; opacity: 0; }
#cookie-settings { transition: color .18s,opacity .22s ease; }

@media (max-width: 1000px) {
  .company-footer {
    grid-template-columns: minmax(0,1fr) 24px;
    grid-template-areas: 'details privacy';
    gap: 24px;
  }
  .company-details { grid-template-columns: repeat(3,max-content); gap: 20px; }
  .company-details dd { font-size: 11px; }
  .company-details > div:first-child,
  .company-details > div:nth-child(2),
  .company-details > div:nth-child(3),
  .company-details > div:last-child { grid-column: auto; grid-row: auto; }
  #cookie-settings { justify-self: end; }
}
@media (max-width: 700px) {
  body.company-site::before { background: linear-gradient(to bottom,color-mix(in srgb,var(--surface) 75%,transparent) 0,color-mix(in srgb,var(--surface) 44%,transparent) 70px,color-mix(in srgb,var(--surface) 15%,transparent) 140px,transparent 230px); }
  body.company-site::after { background: radial-gradient(ellipse 105vw 350px at 10vw 230px,color-mix(in srgb,var(--surface) 74%,transparent) 0%,color-mix(in srgb,var(--surface) 56%,transparent) 35%,color-mix(in srgb,var(--surface) 22%,transparent) 65%,transparent 100%); }
  .site-header { align-items: center; }
  .header-actions { flex-wrap: nowrap; }
  .development .developer-actions { position: static; }
  .action-cluster,
  .developer-actions { padding: 2px; }
  .developer-actions { flex-basis: auto; }
  .icon-button,
  .developer-actions .icon-button { width: 34px; min-width: 34px; height: 34px; min-height: 34px; }
  .development .site-intro { top: 108px; }
  .company-footer { grid-template-columns: minmax(0,1fr); grid-template-areas: 'details'; gap: 0; padding-top: 24px; padding-bottom: max(24px,env(safe-area-inset-bottom)); }
  .company-details { grid-template-columns: minmax(0,1fr); gap: 20px; }
  .company-details dd { font-size: 12px; }
  .company-details > div:first-child, .company-details > div:nth-child(2), .company-details > div:last-child { grid-column: auto; }
  #cookie-banner { grid-template-columns: minmax(0,1fr); grid-template-areas: 'title' 'text' 'actions'; padding-top: 20px; }
  #cookie-banner .cookie-actions { display: grid; grid-template-columns: 1fr 1fr auto; margin-top: 8px; }
  #cookie-banner .cookie-actions button { min-height: 40px; padding-inline: 8px; white-space: normal; }
}
@media (max-width: 470px) {
  .brand-name { display: none; }
  .company-brand { gap: 0; }
  .header-actions { gap: 4px; }
}
/* Kis képernyőn az Orákulum az összesítő fölött is elérhető marad. */
@media (max-width: 700px), (max-height: 500px) {
  .company-site.run-summary-open .oracle {
    top: auto;
    bottom: calc(var(--footer) + var(--run-summary-height, 0px) + 12px);
    max-height: max(60px,calc(100dvh - var(--footer) - var(--run-summary-height, 0px) - 90px));
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--muted) var(--surface);
  }
}

/* Betöltés (index.html #site-loader): a lábléc színével (--surface) festett lap takar mindent, amíg
   a világ, az első képkocka, a feliratok, a márkabetű és a logó el nem készül — ekkor adja a main.js
   az `is-loaded`-et —, aztán egyetlen áttűnéssel jelenik meg minden, és a main.js kiveszi a lapot.
   A logójel késve úszik be, hogy gyors betöltésnél ne villanjon fel. Csökkentett mozgásnál álló jel,
   áttűnés nélkül. */
#site-loader { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; background: var(--surface); transition: opacity .6s ease; }
#site-loader .brand-mark { opacity: 0; animation: site-loader-mark .5s ease .3s forwards; }
html.is-loaded #site-loader { opacity: 0; pointer-events: none; }
@keyframes site-loader-mark { to { opacity: 1; } }

/* Mobil keret: álló és rövid fekvő nézet, közvetlen reszponzív stílusokkal. */
@media (max-width: 700px), (max-width: 1100px) and (max-height: 500px) {
html {
  --mobile-footer-font: 11px; --mobile-header-gap: 12px;
  /* A hero címének és felső sorának betűméretét a site.js méri a szöveg szélességéből, és a
     `.site-intro`-ra írja (`--mobile-hero-font`, `--mobile-eyebrow-font`): a cím a hero teljes
     szélességét, a felső sor a 80%-át tölti ki. Az itteni érték a mérés előtti tartalék. */
  --mobile-hero-font: clamp(22px,6.667vw,26px); --mobile-body-font: 12px;
  --mobile-column-gap: 18px; --mobile-oracle-share: .44;
  --mobile-footer-pad: 10px; --mobile-footer-gap: 5px;
  --margin: 18px;
  --mobile-header-top: max(16px,env(safe-area-inset-top));
  --mobile-header-height: 44px;
  /* A kérdésmező és a hero teteje egy vonalban, a fejléc alatt. */
  --mobile-question-top: calc(var(--mobile-header-top) + var(--mobile-header-height) + var(--mobile-header-gap,12px));
  --mobile-left: max(var(--margin),env(safe-area-inset-left));
  --mobile-right: max(var(--margin),env(safe-area-inset-right));
  --mobile-content-width: calc(100vw - var(--mobile-left) - var(--mobile-right) - var(--mobile-column-gap,18px));
}
html .company-site .site-header {
  top: var(--mobile-header-top); left: var(--mobile-left); right: var(--mobile-right); align-items: center;
}
html .company-site .company-brand { --divider-space: 12px; }
html .company-site .site-header .brand-mark {
  width: var(--mobile-header-height); height: var(--mobile-header-height); flex-basis: var(--mobile-header-height);
}
html .company-site .brand-name {
  display: block; font-size: 10px; line-height: 1.35; letter-spacing: .035em;
}
html .company-site .oracle {
  --sky-top: var(--mobile-question-top);
  --sky-column: calc(var(--mobile-content-width) * var(--mobile-oracle-share,.44));
}
/* A kérdésmező a többi mobil vezérlő magasságán (36 px), alatta szűk réssel: így a „Kérdezz!" és
   az első bekezdés között alig több a hely, mint két bekezdés között. A folyam felső halványuló
   sávja ugyanakkora, mint a rés, és negatív margóval pont abba húzódik fel, így nem takarja a mezőt. */
html .company-site #oracle-form {
  min-height: 36px; margin-bottom: 6px; padding-inline: 0;
}
html .company-site .oracle-stream { --sky-top-fade: 6px; }
/* A „Kérdezz!" és a beírt kérdés is 16 px: ennél kisebb betűjű mezőbe koppintva az iOS Safari
   ránagyít a lapra. */
html .company-site #oracle-input { font-size: 16px; padding-block: 5px; }
html .company-site #oracle-send {
  width: 36px; min-width: 36px; height: 36px; margin-right: 0; font-size: 26px;
}
html .company-site .site-intro {
  top: var(--mobile-question-top); width: calc(var(--mobile-content-width) * (1 - var(--mobile-oracle-share,.44)));
  left: var(--mobile-left); right: auto; max-height: none; overflow: visible;
}
/* A cím és a felső sor a saját szövegük szélességét veszik fel (ezt méri a site.js), nem tördelnek. */
html .company-site .site-intro h1 {
  width: max-content; font-size: var(--mobile-hero-font,26px); line-height: 1.12; letter-spacing: -.045em;
}
html .company-site .site-description {
  font-size: var(--mobile-body-font,12px); line-height: 1.5; margin: 14px 0;
}
html .company-site .site-description br { display: none; }
html .company-site .site-description span + br + span::before { content: ' '; }
html .company-site .eyebrow { width: max-content; font-size: var(--mobile-eyebrow-font,7px); letter-spacing: .065em; gap: 6px; }
html .company-site .eyebrow-rule { width: 10px; flex-shrink: 0; }
html .company-site .service-line { flex-wrap: wrap; flex-direction: row; gap: 6px; font-size: 9px; }
html .company-site .service-line button { width: max-content; padding: 5px 8px; }
/* Az Orákulum szövege a leírás méretén, a bekezdések között szűk réssel. */
html .company-site #chat { gap: 10px; padding-inline: 0; }
html .company-site #chat .uzenet {
  font-size: var(--mobile-body-font,12px); line-height: 1.55;
}
html .company-site #chat .uzenet.user-message {
  font-size: var(--mobile-body-font,12px);
}
html .company-site .company-footer {
  grid-template-columns: minmax(0,1fr); grid-template-areas: 'details'; gap: 0;
  padding-top: var(--mobile-footer-pad,10px);
  padding-bottom: max(var(--mobile-footer-pad,10px),env(safe-area-inset-bottom));
}
html .company-site .company-details {
  grid-template-columns: minmax(0,1fr); gap: var(--mobile-footer-gap,5px); padding: 0; margin: 0;
}
html .company-site .company-details dt {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
/* A tételek között pötty, ugyanúgy, mint a „Hungary · Budapest"-ben. A pötty az előző tétel végén
   ül, két nem törő szóköz között: tördeléskor a sor végén marad, és a sor csak tételhatáron törik. */
html .company-site .company-details dd {
  flex-direction: row; flex-wrap: wrap; gap: 2px 0;
  font-size: var(--mobile-footer-font,11px); line-height: 1.45;
}
html .company-site .company-details dd > span:not(:last-child)::after { content: '\a0·\a0'; }
html .company-site .company-details > div:first-child dd { padding-inline-end: 38px; }
html .company-site .company-details [data-company="name"] { color: var(--paper); }
html .company-site .company-details [data-company="taxNumber"] { color: var(--muted); }
html .company-site .company-details [data-company="address"],
html .company-site .company-details [data-company="email"] { white-space: normal; overflow-wrap: anywhere; }
html .company-site #cookie-settings {
  top: max(4px,calc(var(--mobile-footer-pad,10px) - 6px)); transform: none;
  width: 32px; min-width: 32px; height: 32px; min-height: 32px;
}
html .company-site #cookie-settings svg { width: 14px; height: 14px; }
html .company-site .game-actions { gap: 6px; }
html .company-site #hud { right: var(--mobile-right) !important; }
html .company-site .game-actions .icon-button {
  width: 36px; min-width: 36px; height: 36px; min-height: 36px;
}
html .company-site.development #stats.fps-meter { display: none !important; }
html .company-site.development #hud {
  bottom: calc(var(--footer) + 14px) !important;
}
@media (max-width: 340px) {
  /* A négy fejlesztői vezérlő mellé itt már nem fér az eredménysor. */
  html .company-site.development #hud {
    bottom: calc(var(--footer) + 60px) !important;
  }
}
@media (max-height: 500px) {
  html { --mobile-header-top: max(10px,env(safe-area-inset-top)); --mobile-header-height: 36px; }
  html .company-site .brand-name { font-size: 9px; }
  html .company-site #oracle-form { margin-bottom: 0; }
  /* Fekvő telefonon a hero ~430 px széles: kitöltve a cím kilógna a képből. (A felső sor itt rejtett.) */
  html .company-site .site-intro h1 { font-size: min(var(--mobile-hero-font,26px),24px); }
  html .company-site .site-description { margin: 8px 0; }
  html .company-site .service-line { display: none; }
  html .company-site .company-details { grid-template-columns: minmax(0,1.25fr) minmax(0,.8fr) minmax(0,1.35fr); gap: 16px; }
  html .company-site .company-details > div:first-child dd { padding-inline-end: 0; }
  html .company-site .company-details > div:last-child { padding-inline-end: 32px; }
}

}