/* Opravy vzhledu nad styly hry. Načítá se po style.css (scripts/apply-site.mjs). */

/* Štítek hráče na tahu: atribut hidden musí vyhrát nad display:block (sólo hra ho nemá ukazovat). */
.hole-info .active-player[hidden] { display: none; }
/* Tmavý stín z .hole-info pod tmavým textem rozmazával písmo. */
.hole-info .active-player { text-shadow: none; }

/* Název hřiště: panel jako ukazatel větru místo textu se září přímo na 3D scéně. */
.weather {
  background: #fffffff0;
  padding: 8px 14px 8px 10px;
  border-radius: 7px;
  box-shadow: var(--panel-shadow);
  text-shadow: none;
  color: var(--ink);
  gap: 10px;
}
.weather .sun { font-size: 22px; line-height: 1; }
.weather small { color: var(--muted); }

/* Popisky šipek směru: záporný okraj je lepil k tlačítkům. Krajní popisky vystředěné pod tlačítky 44 px. */
.aim-ticks { margin-top: 6px; padding-inline: 0; }
.aim-ticks span:first-child,
.aim-ticks span:last-child { flex: 0 0 44px; text-align: center; }

/* Pravý sloupec HUD: vítr, mapa a pohled mají šířku řady tlačítek a jednotné mezery.
   Mapa drží poměr plátna 180 x 220, jinak by se kresba jamky deformovala. */
:root {
  --hud-btn: 44px;
  --rail-gap: 10px;
  --rail-w: calc(var(--hud-btn) * 3 + 8px * 2);
  --rail-right: max(var(--space-edge), env(safe-area-inset-right));
  --wind-top: 112px;
  --wind-h: 52px;
}
.wind {
  right: var(--rail-right);
  top: var(--wind-top);
  width: var(--rail-w);
  height: var(--wind-h);
  box-sizing: border-box;
  padding: 0 14px;
}
.map-wrap {
  right: var(--rail-right);
  top: calc(var(--wind-top) + var(--wind-h) + var(--rail-gap));
  width: var(--rail-w);
  flex-direction: row;
  align-items: flex-end;
  justify-content: flex-end;
  gap: 8px;
}
#map {
  width: calc(var(--rail-w) - var(--hud-btn) - 8px);
  height: auto;
  aspect-ratio: 180 / 220;
  border-radius: 12px;
}
.camera-button { flex: 0 0 var(--hud-btn); }

/* Nízký desktop: mapa je skrytá, tlačítko pohledu zůstává pod větrem. */
@media (max-height: 670px) and (min-width: 701px) {
  :root { --wind-top: 92px; }
}

/* Telefon na výšku: sloupec pod hlavičkou včetně výřezu displeje. */
@media (max-width: 700px) {
  :root {
    --rail-gap: 8px;
    --rail-w: calc(var(--hud-btn) * 3 + 6px * 2);
    --wind-top: calc(max(14px, env(safe-area-inset-top)) + var(--hud-btn) + 8px);
    --wind-h: 48px;
  }
  .wind { padding: 0 12px; }
  .hole-info {
    top: var(--wind-top);
    max-width: calc(100% - var(--space-edge) * 2 - var(--rail-w) - 12px);
  }
}

/* Telefon naležato: mapa skrytá, pohled vlevo od větru ve stejné výšce. */
@media (max-height: 500px) and (min-width: 500px) {
  :root { --wind-top: 67px; --wind-h: var(--hud-btn); }
  .map-wrap {
    top: var(--wind-top);
    width: auto;
    right: calc(var(--rail-right) + var(--rail-w) + 8px);
  }
}

/* Značka v hlavičce: OPEN stejně jako na úvodní obrazovce. */
.brand small {
  font-family: 'Manrope', sans-serif;
  font-weight: 800;
  font-size: 15px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--brand-navy);
}

/* Hláška: pozici a šířku počítá hud-layout.js podle volného místa mezi panely. */
#toast { text-align: center; text-wrap: balance; pointer-events: none; z-index: 4; }
/* Prvek, který na dobu hlášky ustoupí (hud-layout.js). Visibility až po doznění průhlednosti. */
.shot-label, .map-wrap, .hole-info { transition: opacity .2s, visibility 0s; }
.shot-label.toast-yield, .map-wrap.toast-yield, .hole-info.toast-yield { opacity: 0; visibility: hidden; transition: opacity .2s, visibility 0s .2s; }
/* Velmi nízké displeje (telefon naležato): kompaktnější hláška, aby se vešla mezi hlavičku a ovládání. */
@media (max-height: 360px) {
  #toast { font-size: 13px; line-height: 1.35; padding: 8px 14px; }
}

/* Aktivní políčko: obíhající linka v barvách hry (navy a zelená) místo zlatého obrysu. */
@property --ring-angle { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
@keyframes ring-spin { to { --ring-angle: 360deg; } }
:root {
  --ring-colors: #092857, #28672f, #49943c, #a6d58f, #49943c, #28672f, #092857;
  --ring-speed: 2.4s;
}
/* Jméno hráče: silnější rámeček, o 1 px menší odsazení, takže text zůstane na místě. */
.player-names input:focus {
  outline: none;
  border: 2px solid transparent;
  padding: 7px;
  background:
    linear-gradient(#fff, #fff) padding-box,
    conic-gradient(from var(--ring-angle), var(--ring-colors)) border-box;
  box-shadow: 0 0 0 4px #49943c1f;
  animation: ring-spin var(--ring-speed) linear infinite;
}
/* Výběry (hřiště, odpaliště, handicap): linka vně tlačítka, bez posunu obsahu. */
.golf-select-trigger { position: relative; }
.golf-select-trigger:focus-visible { outline: none; }
.golf-select-trigger:focus-visible::before,
.golf-select-trigger[aria-expanded="true"]::before {
  content: '';
  position: absolute;
  inset: -3px;
  padding: 2px;
  border-radius: 8px;
  background: conic-gradient(from var(--ring-angle), var(--ring-colors));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  animation: ring-spin var(--ring-speed) linear infinite;
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  .player-names input:focus,
  .golf-select-trigger:focus-visible::before,
  .golf-select-trigger[aria-expanded="true"]::before { animation: none; }
}

/* Záložky kroků: hra po přepnutí přesouvá fokus na záložku (pro čtečky). Bez obrysu,
   pro klávesnici jen jemný kroužek kolem čísla kroku. */
.setup-steps [data-setup-step]:focus-visible { outline: none; }
.setup-steps [data-setup-step]:focus-visible > span { box-shadow: 0 0 0 3px #49943c59; }

/* Fokus z klávesnice v barvách hry místo zlaté. */
:root { --focus: #49943c; }

/* SVG ikony místo textových symbolů (ui-icons.js). */
.ui-icon { width: 1em; height: 1em; vertical-align: -.14em; flex: none; overflow: visible; }
.icon-button > .ui-icon, .camera-button > .ui-icon, .aim-row button > .ui-icon { display: block; margin: auto; width: 22px; height: 22px; }
.icon-button:not(.sound-trigger), .camera-button { display: grid; place-items: center; }
/* Šipka u tlačítka zvuku zůstává malá vedle reproduktoru. */
.sound-trigger .sound-chevron > .ui-icon { width: 12px; height: 12px; display: block; }
.aim-row button > .ui-icon { width: 24px; height: 24px; }
#wind-arrow { display: inline-grid; place-items: center; line-height: 1; }
#wind-arrow > .ui-icon { width: 26px; height: 26px; stroke-width: 2.1; color: var(--ink); }
.weather .sun > .ui-icon { width: 22px; height: 22px; display: block; }
@media (max-width: 700px) {
  #wind-arrow > .ui-icon { width: 22px; height: 22px; }
}

/* Patička na telefonu (dva řádky): bez zbytečných mezer. Pozici panelu nad ní počítá hud-layout.js. */
@media (max-width: 560px) {
  .game-footer .footer-help-links button { min-height: 40px; }
  .game-footer .studio-credit { height: 32px; }
  .game-footer .studio-credit a { min-height: 32px; }
  .has-game-footer #intro, .has-game-footer #result { padding-bottom: calc(84px + var(--safe-bottom)); }
}

/* Tlačítko pohledu na celé hřiště pod mapou, zarovnané doprava. Na desktopu a tabletu
   má mapa šířku celého sloupce; na telefonu zůstává užší. */
.map-wrap { flex-direction: column-reverse; align-items: flex-end; justify-content: flex-start; }
#map { width: var(--rail-w); }
@media (max-width: 700px) {
  #map { width: calc(var(--rail-w) - var(--hud-btn) - 8px); }
}
/* Nízký telefon: pod mapou by tlačítko narazilo do ovládání, zůstává vedle mapy. */
@media (max-width: 700px) and (max-height: 600px) {
  .map-wrap { flex-direction: row; align-items: flex-end; }
}
/* Telefon naležato: mapa skrytá, tlačítko vlevo od větru (beze změny). */
@media (max-height: 500px) and (min-width: 500px) {
  .map-wrap { flex-direction: row; }
}