/* Az égbe írt beszélgetés és a pálya bal alsó vezérlői. */
/* Ég → égi szöveg → a teljes játék → a kezelőfelület.
   A játék vászna átengedi az egérmutatót az olvasható HTML-sorokhoz. */
.company-site > canvas.sky-background { z-index: 0; }
.company-site > canvas.game-scene { z-index: 3; pointer-events: none; }
.company-site.tuning > canvas.game-scene { pointer-events: auto; }
body.company-site::before { z-index: 1; }
/* A rezgés képkockánként állítja a translate-et. A csökkentett mozgás globális
   transition-duration szabálya se indítson rá utólagos átmenetet. Az EGYETLEN
   átmeneti tulajdonság az opacity: keskeny lapon a nyitott zászlósor alatt a
   HUD elhalványul (site.css), és az nem lehet villanás. */
.company-site #hud { transition-property: opacity; transition-duration: .2s; transition-timing-function: ease; }
.company-site .game-actions {
  top: auto; right: auto; left: max(var(--margin),env(safe-area-inset-left));
  bottom: calc(var(--footer) + 20px);
  display: flex; flex-wrap: nowrap; gap: 10px; align-items: center;
  transition: bottom .35s ease;
}
.company-site.run-summary-open .game-actions { bottom: calc(var(--footer) + var(--run-summary-height,0px) + 14px); }
.company-site .game-actions .developer-actions { position: static; flex-basis: auto; order: 1; }
.company-site.development #stats.fps-meter {
  display: grid !important; grid-template-columns: 3ch 3ch 5ch; gap: 8px;
  position: static; order: 2; flex: 0 0 auto; direction: ltr;
  margin: 0; padding: 5px 7px; min-height: 36px;
  border: 1px solid transparent; border-radius: 6px; background: none;
  font: 500 12px/1 ui-monospace,monospace; font-variant-numeric: tabular-nums;
  color: var(--gold); opacity: .9; white-space: nowrap; pointer-events: auto; cursor: pointer;
}
.fps-meter-label { display: block; margin-bottom: 4px; font-size: 8px; letter-spacing: .02em; opacity: .65; }
.fps-meter-value { display: block; }
.company-site.development #stats.fps-meter:hover { background: color-mix(in srgb,var(--surface) 50%,transparent); }
.company-site.development #stats.fps-meter:focus-visible {
  outline: 1px solid var(--gold); outline-offset: 2px;
}
@media (max-width: 480px) {
  /* Dev módban a mérő is az alsó sorban van; az élet/pont fölötte fér el. */
  .company-site.development #hud { bottom: calc(var(--footer) + 68px) !important; }
}
.company-site #site-workshop-panel {
  top: auto; right: auto; left: max(var(--margin),env(safe-area-inset-left));
  bottom: calc(var(--footer) + 76px); max-height: calc(100dvh - var(--footer) - 100px); overflow-y: auto;
}
.company-site.run-summary-open #site-workshop-panel { bottom: calc(var(--footer) + var(--run-summary-height,0px) + 70px); }
.company-site .oracle {
  --sky-top: max(28px,env(safe-area-inset-top));
  --sky-column: min(28vw,390px);
  position: absolute; z-index: auto;
  top: var(--sky-top); bottom: auto; left: auto; right: max(var(--margin),env(safe-area-inset-right));
  /* Az oszlop alja az a vonal, ahol a táj már teljesen takarja (main.js, --scene-landscape-top). */
  width: var(--sky-column); height: max(130px,calc(var(--scene-landscape-top,58dvh) - var(--sky-top)));
  max-height: calc(100dvh - var(--footer) - var(--sky-top) - 70px);
  padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; backdrop-filter: none;
  display: flex; flex-direction: column; overflow: visible; transition: none;
  pointer-events: none;
}
.company-site.run-summary-open .oracle {
  top: var(--sky-top); bottom: auto;
  max-height: max(64px,calc(100dvh - var(--footer) - var(--run-summary-height,0px) - var(--sky-top) - 14px));
  overflow: visible;
}
.company-site.tuning .oracle * { pointer-events: none; }
.company-site #oracle-form {
  position: relative; z-index: 2; isolation: isolate; flex: 0 0 auto; pointer-events: auto;
  display: flex; align-items: center; min-height: 44px; margin: 0 0 20px;
  border: 0; padding: 0 9px;
}
.company-site #oracle-form::after {
  content: ''; position: absolute; left: 9px; right: 9px; bottom: 0; height: 1px;
  background: linear-gradient(90deg,transparent,color-mix(in srgb,var(--gold) 65%,transparent),transparent);
  opacity: 0; transition: opacity .25s;
}
.company-site #oracle-form:focus-within::after { opacity: 1; }
/* A beírt szöveg ugyanaz, mint a saját üzenet az Orákulum-folyamban: arany,
   `Avenir Next`, .015em ritkítás — csak nagyobb (16 px a 13 helyett), mert ide
   írni kell, nem csak olvasni. */
.company-site #oracle-input {
  padding: 10px 0; font: 400 16px/1.65 'Avenir Next','Segoe UI',sans-serif;
  letter-spacing: .015em; color: var(--gold);
  background: none; text-shadow: 0 1px 9px var(--surface);
}
.company-site #oracle-input::placeholder { color: var(--paper); opacity: .72; }
.company-site #oracle-send {
  display: grid; place-items: center; width: 44px; height: 44px; min-width: 44px;
  margin-right: -9px; border: 0; border-radius: 0; background: none; color: var(--gold);
  font-size: 30px; opacity: .9; transition: opacity .2s;
}
.company-site #oracle-send:hover, .company-site #oracle-form:focus-within #oracle-send { opacity: 1; }
.company-site #oracle-send:hover { color: var(--pink); }
.company-site #oracle-form[aria-busy="true"] #oracle-send { animation: sky-thinking 1.3s ease-in-out infinite alternate; }
/* A szolgáltatás-gomb gépelése végén az Enter „lenyomódik”. */
.company-site #oracle-send.is-pressed { opacity: 1; animation: sky-enter-press .24s ease-out; }
@keyframes sky-enter-press {
  40% { transform: scale(.8); text-shadow: 0 0 14px var(--gold); }
  100% { transform: scale(1); text-shadow: none; }
}
.oracle-stream {
  --sky-scroll-thumb: transparent;
  --sky-fade-depth: clamp(64px,18vh,150px);
  --sky-top-fade: 10px;
  position: relative; z-index: 2; isolation: isolate; flex: 1 1 auto; min-height: 0;
  margin: calc(-1 * var(--sky-top-fade)) -16px 0; padding: var(--sky-top-fade) 16px 0;
  overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; overflow-anchor: none;
  scrollbar-width: thin; scrollbar-gutter: stable; scrollbar-color: var(--sky-scroll-thumb) transparent;
  /* Alul a táj előtt halványul el, felül a beviteli sor alatt egy vékony sávban; a teljes előzmény megmarad.
     A felső sáv a belső margóban ül, így a legfelső sort nem halványítja, amíg a lista a tetején áll. */
  mask-image: linear-gradient(to bottom,transparent 0,#000 var(--sky-top-fade),#000 max(45%,calc(100% - var(--sky-fade-depth))),transparent 100%);
  pointer-events: auto;
}
.oracle-stream:hover, .oracle-stream:focus-visible { --sky-scroll-thumb: color-mix(in srgb,var(--gold) 26%,transparent); }
.oracle-stream::-webkit-scrollbar { width: 3px; background: transparent; }
.oracle-stream::-webkit-scrollbar-thumb { background: var(--sky-scroll-thumb); border-radius: 2px; }
@supports selector(::-webkit-scrollbar) {
  /* A szabványos thin szélesség ne írja felül a pontos, 3 px-es sávot. */
  .oracle-stream { scrollbar-width: auto; scrollbar-color: auto; }
}
.oracle-stream:not(:has(.uzenet)) { pointer-events: none; }
.company-site #chat {
  position: relative; inset: auto; display: flex; flex-direction: column; gap: 22px;
  width: auto; max-height: none;
  /* A legrégebbi üzenet is teljesen felgörgethető a halványuló sáv fölé. */
  margin: 0; padding: 0 9px calc(var(--sky-fade-depth) + 16px); overflow: visible; user-select: text;
  mask-image: none;
}
.company-site #chat:empty { display: none; }
.company-site #chat .uzenet {
  position: relative; inset: auto; flex: 0 0 auto; width: auto;
  margin: 0; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none;
  color: var(--paper); font: 400 16px/1.65 Georgia,'Times New Roman',serif;
  letter-spacing: .008em; overflow-wrap: anywhere; white-space: pre-wrap;
  /* Betűnkénti árnyék: a szöveg mögött nincs külön sötétítő fátyol. */
  text-shadow: 0 1px 3px color-mix(in srgb,var(--surface) 70%,transparent);
  animation: sky-appear 1.2s ease-out backwards;
  /* Új üzenetre a már látható sorok a RÉGI helyükről csúsznak az újra. Ez átmenet, nem
     animáció: a fenti `sky-appear` az `animation` helyét foglalja, és egy második animáció
     hozzáírása azt is újraindítaná. A távolságot a JS méri (csak az elrendezés tudja),
     onnan idáig már a böngésző hozza vissza — `sky-chat.js`, `preserveReading`. */
  transition: transform .54s cubic-bezier(.22,.68,.16,1);
}
.company-site #chat .uzenet.sky-shift { transform: translateY(var(--sky-shift,0px)); transition: none; }
.company-site #chat .uzenet:nth-child(n) { opacity: 1; }
.company-site #chat .uzenet.user-message {
  padding: 0; border: 0; color: var(--gold); font: 400 13px/1.65 'Avenir Next','Segoe UI',sans-serif;
  letter-spacing: .015em;
}
.company-site #chat .uzenet.error-message { color: var(--error); }
.company-site #chat .uzenet.oracle-message { animation: none; }
.company-site #chat .sky-particles {
  position: absolute; left: -16px; top: -16px;
  pointer-events: none; user-select: none;
}
.company-site #chat .sky-reveal {
  /* A szavak saját fényükből állnak össze; a sortörés és a sorok helye állandó. */
  animation: sky-materialize 1.45s cubic-bezier(.22,.61,.36,1) var(--sky-delay,0ms) backwards;
}
@keyframes sky-materialize {
  0% { opacity: 0; color: transparent; text-shadow: 0 0 6px color-mix(in srgb,var(--sky-glow) 0%,transparent); }
  24% { opacity: .35; color: var(--paper); text-shadow: 0 0 5px color-mix(in srgb,var(--sky-glow) 38%,transparent); }
  52% { opacity: 1; color: var(--sky-glow-core); text-shadow: 0 0 7px color-mix(in srgb,var(--sky-glow) 40%,transparent); }
  100% { opacity: 1; color: inherit; text-shadow: 0 1px 3px color-mix(in srgb,var(--surface) 70%,transparent); }
}
@keyframes sky-appear { from { opacity: 0; filter: blur(5px); } to { filter: blur(0); } }
@keyframes sky-thinking { to { opacity: .2; } }
@media (max-width: 1000px) {
  .company-site .oracle { --sky-column: 30vw; }
}
@media (max-width: 700px) {
  .company-site .oracle { --sky-top: max(19px,env(safe-area-inset-top)); --sky-column: 49vw; }
  .company-site #oracle-form { margin-bottom: 16px; padding-inline: 4px; }
  .company-site #oracle-input { font-size: 16px; }
  .company-site #oracle-send { width: 36px; min-width: 36px; font-size: 26px; }
  .company-site #chat .uzenet { font-size: 15px; line-height: 1.6; }
  .company-site #chat .uzenet.user-message { font-size: 12px; }
  .company-site .site-intro { width: 40vw; right: auto; top: 106px; }
  .company-site .site-intro h1 { font-size: clamp(22px,5.5vw,38px); line-height: 1.15; }
  .company-site .site-description { font-size: 11px; line-height: 1.6; }
  .company-site .site-description br { display: none; }
  .company-site .site-description span + br + span::before { content: ' '; }
  .company-site .eyebrow { font-size: 7px; letter-spacing: .08em; gap: 7px; }
  .company-site .eyebrow-rule { width: 12px; flex-shrink: 0; }
  .company-site .service-line { flex-direction: column; gap: 5px; font-size: 9px; }
  .company-site .service-line button { width: max-content; padding: 3px 8px; }
  .company-site .game-actions { bottom: calc(var(--footer) + 14px); gap: 6px; }
  .company-site.run-summary-open .game-actions { bottom: calc(var(--footer) + var(--run-summary-height,0px) + 10px); }
  .company-site .game-actions .icon-button { width: 36px; min-width: 36px; height: 36px; min-height: 36px; }
}
@media (max-height: 500px) {
  .company-site .oracle { --sky-top: 12px; }
  .company-site #oracle-form { margin-bottom: 8px; }
  .company-site #chat .uzenet { font-size: 14px; line-height: 1.55; }
  .company-site .site-intro { max-height: calc(100dvh - var(--footer) - 156px); overflow: hidden; }
  .company-site .service-line { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .company-site #chat .sky-particles { display: none; }
  .company-site #chat .uzenet, .company-site #chat .sky-reveal, .company-site #oracle-form[aria-busy="true"] #oracle-send, .company-site #oracle-send.is-pressed { animation: none; transition: none; }
}