/* Wspólna skorupa gry: nagłówek, HUD, przyciski, sterowanie dotykowe i fokus.
   Arkusz jest kopiowany przez tools/build.py do katalogu każdej gry własnej.
   Gra linkuje go przed swoim style.css i nadpisuje --accent oraz --accent-hover
   kolorami ze swojego manifest.json. Tokeny kolorów i promieni mają te same
   wartości co apps/portal/portal.css; pilnuje tego test w tests/smoke.test.mjs. */

:root {
  /* Typografia */
  --font-sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* Powierzchnie i obramowania */
  --bg: #101521;
  --surface: #1b2131;
  --surface-sunken: #181d2c;
  --border: #30374a;

  /* Akcent gry - nadpisywany w style.css kolorami z manifestu */
  --accent: #bda4ff;
  --accent-hover: #d3c2ff;
  --on-accent: #191326;

  /* Skala tekstu: kontrast na tle strony 16.2 / 16.2 / 9.5 / 7.6 / 6.2 */
  --text: #eef1ff;
  --text-bright: #fff;
  --text-secondary: #b5bbcf;
  --text-tertiary: #9ea7bb;
  --text-muted: #8d96ab;

  /* Promienie narożników */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-pill: 999px;

  /* Ruch i fokus */
  --lift: transform .2s;
  --focus: #f7cf71;

  /* Wymiary skorupy - gra nadpisuje --shell-main pod swoją planszę */
  --shell-main: 880px;
  --tap: 44px;
}

* { box-sizing: border-box }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 16px var(--font-sans);
}

/* Nagłówek: powrót do katalogu, tytuł gry, przyciski sterujące */
header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  max-width: var(--shell-main);
  margin: auto;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
}

header a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  padding: 0 4px;
  color: var(--text-secondary);
  font-size: 13px;
  text-decoration: none;
}

header a:hover { color: var(--text-bright) }

header h1, header strong, header > span {
  margin: 0;
  font-size: 19px;
  font-weight: 850;
  letter-spacing: 1.5px;
}

main {
  max-width: var(--shell-main);
  margin: 20px auto;
  padding: 0 16px;
  text-align: center;
}

/* Przyciski: domyślnie akcent gry, przełączniki na powierzchni */
button {
  min-height: var(--tap);
  padding: 10px 15px;
  border: 0;
  border-radius: var(--radius-md);
  background: var(--accent);
  color: var(--on-accent);
  font: inherit;
  font-weight: 800;
  cursor: pointer;
  transition: var(--lift);
}

button:hover:not(:disabled) { background: var(--accent-hover) }
button:disabled { opacity: .83; cursor: default }

button[aria-pressed] {
  background: var(--surface);
  color: var(--text);
}

button[aria-pressed="true"] {
  background: var(--accent);
  color: var(--on-accent);
}

/* Pasek wyniku */
.hud {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin: 16px 0;
}

.hud div {
  padding: 8px 16px;
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 800;
}

.hud strong {
  display: block;
  font-size: 22px;
  color: var(--text-bright);
}

/* Komunikaty i podpowiedzi */
[aria-live], [role="status"] {
  min-height: 24px;
  color: var(--text-tertiary);
}

.hint {
  color: var(--text-muted);
  font-size: 12px;
}

/* Sterowanie dotykowe - rozmiar i kolor klawiszy; układ zostaje w grze */
.dpad button {
  min-width: var(--tap);
  padding: 10px 14px;
  background: var(--surface);
  color: var(--text);
  font-size: 20px;
}

.dpad button:hover:not(:disabled) { background: var(--border) }

a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* Telefon w poziomie: nagłówek i HUD zabierają minimum wysokości */
@media (max-height: 520px) and (orientation: landscape) {
  header { padding: 4px 16px }
  header a { min-height: 36px }
  main { margin: 6px auto }
  .hud { margin: 6px 0 }
  .hud div { padding: 4px 14px }
  .hud strong { font-size: 18px }
  .hint { display: none }
}