/*
 * Guesslandia — komponens-stílusok. Minden szín, méret és sugár token (tokens.css).
 * Kiindulás: design/system/components/bundle.css (a gl- osztályok változatlanok),
 * a Google Fonts import nélkül (G-51); a betűk: fonts/fonts.css. Az oldal alapstílusa: layout.css.
 * A bundle.css-en túli kiegészítések a fájl végén vannak.
 */
.gl-stack { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-4); }
.gl-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); padding: var(--space-4); }
.gl-num { font-family: var(--font-mono); font-weight: 600; font-variant-numeric: tabular-nums; }
.gl-overline { display: flex; align-items: center; gap: var(--space-2); font: 700 12px/16px var(--font-display); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-muted); }
.gl-overline::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--coral); }
.gl-icon { width: 20px; height: 20px; flex-shrink: 0; }

/* Fókusz */
.gl-btn:focus-visible, .gl-choice:focus-visible, .gl-field input:focus-visible, .gl-iconbtn:focus-visible, .gl-drag:focus-visible {
  outline: 2px solid var(--focus-ring); outline-offset: 2px;
}

/* Gomb */
.gl-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); height: var(--control-h); padding: 0 var(--space-6); border: 0; border-radius: var(--radius-md); font: 800 17px/20px var(--font-display); cursor: pointer; text-decoration: none; box-sizing: border-box; }
.gl-btn--primary { background: var(--coral); color: var(--on-coral); }
.gl-btn--secondary { background: var(--surface-inverse); color: var(--on-inverse); }
.gl-btn--outline { background: transparent; color: var(--ink); border: 2px solid var(--ink); }
.gl-btn--ghost { background: transparent; color: var(--ink); height: var(--tap-min); padding: 0 var(--space-3); font-weight: 700; font-size: 15px; }
.gl-btn--block { width: 100%; }
.gl-btn[disabled] { background: var(--line); color: var(--ink-disabled); border-color: var(--line); cursor: not-allowed; }
.gl-iconbtn { display: inline-flex; align-items: center; justify-content: center; width: var(--tap-min); height: var(--tap-min); border-radius: var(--radius-sm); border: 2px solid var(--line-control); background: var(--surface-raised); color: var(--ink); cursor: pointer; }

/* Mező */
.gl-field { display: flex; flex-direction: column; gap: var(--space-2); }
.gl-field label { font-weight: 700; font-size: 14px; line-height: 20px; }
.gl-field input { height: var(--control-h); border: 2px solid var(--line-control); border-radius: var(--radius-md); padding: 0 var(--space-4); font: 16px var(--font-body); color: var(--ink); background: var(--surface-raised); box-sizing: border-box; }
.gl-field input::placeholder { color: var(--ink-muted); }
.gl-field .gl-help { font-size: 14px; line-height: 20px; color: var(--ink-muted); }
.gl-field--error input { border-color: var(--wrong); }
.gl-field--error .gl-help { color: var(--wrong); display: flex; gap: var(--space-1); align-items: center; }

/* Automatikus kiegészítés */
.gl-suggest { list-style: none; margin: 0; padding: var(--space-2); border-radius: var(--radius-md); background: var(--surface-raised); box-shadow: var(--shadow-lift); border: 1px solid var(--line); }
.gl-suggest li { display: flex; align-items: center; min-height: var(--tap-min); padding: 0 var(--space-3); border-radius: var(--radius-sm); }
.gl-suggest li[aria-selected="true"] { background: var(--surface-sunken); }
.gl-suggest mark { background: none; color: inherit; font-weight: 700; }
.gl-suggest .gl-used { color: var(--ink-disabled); }

/* Választható opció (F03–F13) */
.gl-choice { display: flex; align-items: center; gap: var(--space-3); min-height: var(--control-h); width: 100%; padding: 0 var(--space-4); border: 2px solid var(--line-control); border-radius: var(--radius-md); background: var(--surface-raised); color: var(--ink); font: 400 16px/24px var(--font-body); text-align: left; cursor: pointer; box-sizing: border-box; }
.gl-choice .gl-num { margin-left: auto; }
.gl-choice--selected { border-color: var(--sky); box-shadow: inset 0 0 0 1px var(--sky); }
.gl-choice--correct { background: var(--correct-soft); border-color: var(--correct); font-weight: 700; }
.gl-choice--correct .gl-mark { background: var(--correct); color: var(--on-correct); }
.gl-choice--wrong { background: var(--wrong-soft); border-color: var(--wrong); color: var(--ink); text-decoration: line-through; text-decoration-thickness: 2px; cursor: not-allowed; }
.gl-choice--wrong .gl-mark { background: var(--wrong); color: var(--on-wrong); }
.gl-choice--missed { border-style: dashed; border-color: var(--correct); }
.gl-choice--locked { cursor: default; }
.gl-mark { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; flex-shrink: 0; }
.gl-anchor { display: flex; align-items: center; gap: var(--space-3); min-height: 48px; padding: 0 var(--space-4); border: 2px dashed var(--anchor-line); border-radius: var(--radius-md); background: var(--anchor); color: var(--ink-muted); font-size: 14px; }
.gl-anchor .gl-num { margin-left: auto; color: var(--ink-muted); }

/* Visszajelzés */
.gl-feedback { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-4); border-radius: var(--radius-lg); font-weight: 700; }
.gl-feedback--correct { background: var(--correct); color: var(--on-correct); }
.gl-feedback--partial { background: var(--partial); color: var(--on-partial); }
.gl-feedback--wrong { background: var(--wrong); color: var(--on-wrong); }
.gl-feedback .gl-pts { margin-left: auto; font-family: var(--font-mono); font-size: 22px; }

/* Tipp-sor (F01) */
.gl-guess { display: grid; grid-template-columns: minmax(0,1fr) auto 32px auto; align-items: center; gap: var(--space-3); min-height: 48px; padding: 0 var(--space-4); border-radius: var(--radius-md); background: var(--surface-raised); border: 1px solid var(--line); }
.gl-guess--hit { background: var(--correct-soft); border-color: var(--correct); }
.gl-guess .gl-dir { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; background: var(--surface-sunken); color: var(--ink); }

/* Állapotjelvény */
.gl-badge { display: inline-flex; align-items: center; gap: var(--space-1); height: 28px; padding: 0 var(--space-2); border-radius: var(--radius-sm); font: 700 13px/16px var(--font-body); }
.gl-badge--correct { background: var(--correct-soft); color: var(--correct); }
.gl-badge--partial { background: var(--partial-soft); color: var(--partial-ink); }
.gl-badge--wrong { background: var(--wrong-soft); color: var(--wrong); }
.gl-badge--neutral { background: var(--surface-sunken); color: var(--ink-muted); }
.gl-badge--info { background: var(--surface-sunken); color: var(--sky); }

/* Kártya, színpad */
.gl-card { background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--space-4); }
.gl-stage { border-radius: var(--radius-lg); background-color: var(--surface-sunken); background-image: radial-gradient(var(--shape-neighbor) 1.5px, transparent 1.5px); background-size: 18px 18px; display: flex; align-items: center; justify-content: center; }

/* Húzható kártya (F08, F10) */
.gl-drag { display: flex; align-items: center; gap: var(--space-3); min-height: 60px; padding: 0 var(--space-2) 0 var(--space-3); border-radius: var(--radius-md); background: var(--surface-raised); border: 2px solid var(--line-control); box-shadow: var(--shadow-card); }
.gl-drag--lifted { box-shadow: var(--shadow-lift); border-color: var(--sky); transform: rotate(-1.5deg); }
.gl-drag .gl-grip { color: var(--ink-muted); }
.gl-drag .gl-pos { font: 600 15px var(--font-mono); color: var(--ink-muted); width: 20px; }

/* Toast */
.gl-toast { display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-3) var(--space-4); border-radius: var(--radius-pill); background: var(--surface-inverse); color: var(--on-inverse); font-weight: 700; box-shadow: var(--shadow-lift); }

/* Táblázat (admin) */
.gl-table { width: 100%; border-collapse: collapse; font-size: 14px; line-height: 20px; }
.gl-table th { text-align: left; font: 600 12px/16px var(--font-body); color: var(--ink-muted); padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--line); }
.gl-table td { padding: var(--space-3); border-bottom: 1px solid var(--line); }
.gl-table td.gl-num { text-align: right; }

/* ------------------------------------------------------------------------
 * Kiegészítések a bundle.css-hez (U02)
 * ---------------------------------------------------------------------- */

/* Ikongomb keret nélkül (fejléc, kezdőképernyő témakapcsolója) */
.gl-iconbtn--ghost { border-color: transparent; background: transparent; border-radius: 10px; }

/* A link formájú gomb ne kapjon aláhúzást és linkszínt */
a.gl-btn--outline, a.gl-btn--ghost { color: var(--ink); }
a.gl-btn--primary { color: var(--on-coral); }
a.gl-btn--secondary { color: var(--on-inverse); }

/* Témakapcsoló: világosban a hold (sötétre vált), sötétben a nap (világosra vált) */
.gl-theme-toggle__to-dark { display: inline-flex; }
.gl-theme-toggle__to-light { display: none; }
:root[data-theme="dark"] .gl-theme-toggle__to-dark { display: none; }
:root[data-theme="dark"] .gl-theme-toggle__to-light { display: inline-flex; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .gl-theme-toggle__to-dark { display: none; }
  :root:not([data-theme="light"]) .gl-theme-toggle__to-light { display: inline-flex; }
}

/* Logó: jel + szóvédjegy (Sora 800, −0,05em; „landia” coral) */
.gl-logo { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; }
.gl-logo__mark { display: block; flex-shrink: 0; }
.gl-logo__word { font-family: var(--font-display); font-weight: 800; line-height: 1; letter-spacing: -.05em; font-size: 24px; }
.gl-logo__word span { color: var(--coral); }
/* A jel változata a témához: világos alapra „default”, sötét alapra „on-dark” */
.gl-logo__mark-light, .gl-logo__mark-dark { display: contents; }
.gl-logo__mark-dark { display: none; }
[data-theme="dark"] .gl-logo__mark-light { display: none; }
[data-theme="dark"] .gl-logo__mark-dark { display: contents; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .gl-logo__mark-light { display: none; }
  :root:not([data-theme="light"]) .gl-logo__mark-dark { display: contents; }
}
/* Világos szakasz sötét oldalon belül (mintaoldal) */
:root [data-theme="light"] .gl-logo__mark-light { display: contents; }
:root [data-theme="light"] .gl-logo__mark-dark { display: none; }
.gl-logo--lg { gap: 12px; }
.gl-logo--lg .gl-logo__word { font-size: 32px; }
.gl-logo--sm { gap: 8px; }
.gl-logo--sm .gl-logo__word { font-size: 20px; }
.gl-logo--on-dark { background: var(--surface-inverse); padding: 14px 18px; border-radius: var(--radius-lg); }
.gl-logo--on-dark .gl-logo__word { color: var(--on-inverse); }
.gl-logo--on-dark .gl-logo__word span { color: var(--coral); }

/* Toast: alul középen, az elsődleges gombot nem takarja (a fő CTA fölött marad) */
.gl-toast-region { position: fixed; left: 0; right: 0; bottom: calc(var(--control-h) + var(--space-8)); z-index: 50; display: flex; flex-direction: column; align-items: center; gap: var(--space-2); padding: 0 var(--space-4); pointer-events: none; }
.gl-toast-region .gl-toast { pointer-events: auto; max-width: 100%; }
@media (prefers-reduced-motion: no-preference) {
  .gl-toast-region .gl-toast { animation: gl-toast-in 200ms ease-out; }
}
@keyframes gl-toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* Cover: márkaborító (design/system/components/Cover/preview.html) */
.gl-cover { position: relative; height: 288px; overflow: hidden; background: var(--surface); color: var(--ink); border-radius: var(--radius-lg); }
.gl-cover__art { position: absolute; top: 0; left: max(50%, 460px); width: 480px; height: 288px; overflow: hidden; }
.gl-cover__art svg { display: block; width: 480px; height: 288px; }
.gl-cover .navy { fill: var(--surface-inverse); }
.gl-cover .coral { fill: var(--coral); }
.gl-cover .ice { fill: var(--surface-sunken); }
.gl-cover .sky { fill: var(--sky); }
.gl-cover .amber { fill: var(--partial); }
.gl-cover .route { fill: none; stroke-width: 4; stroke-linecap: round; stroke-dasharray: 2 14; }
.gl-cover .route.on-navy { stroke: var(--on-inverse); stroke-opacity: .55; }
.gl-cover .route.on-ground { stroke: var(--sky); }
.gl-cover .stop { fill: var(--surface-raised); stroke: var(--ink); stroke-width: 3; }
.gl-cover .stop.here { fill: var(--coral); stroke: var(--coral-soft); stroke-width: 6; }
.gl-cover__words { position: absolute; left: var(--space-8); bottom: var(--space-8); max-width: 440px; }
.gl-cover__name { margin: 0; font-family: var(--font-display); font-size: 64px; line-height: .92; font-weight: 800; letter-spacing: -.05em; color: var(--ink); }
.gl-cover__name span { color: var(--coral); }
.gl-cover__tag { margin: var(--space-2) 0 0 2px; font-size: 14px; line-height: 20px; color: var(--ink-muted); }
@media (max-width: 599px) {
  .gl-cover__words { left: var(--space-4); right: var(--space-4); bottom: var(--space-4); }
  .gl-cover__name { font-size: 48px; }
}

/* Fókusz a további vezérlőkön is */
a:focus-visible, .gl-logo:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; border-radius: 4px; }

/* Csak képernyőolvasónak */
.gl-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Kódmező (csoportkód, átviteli kód): num stílus, nagybetű (TextField README) */
.gl-field--code input { font: var(--text-num-font); font-size: 18px; letter-spacing: .08em; text-transform: uppercase; font-variant-numeric: tabular-nums; }