/* ════════════════════════════════════════════════════════════
   09-media-3d.css

   Foto placeholder (.ph), gear showcase, figurina a 3D arena vcetne pruchodu
   v prvni osobe. POZOR na poradi: pravidla pro .ph/.ph-chip musi stat ZA .ph.

   Cast verejneho stylu. Soubory se nactou v poradi podle nazvu
   (`assets.PUBLIC_CSS`) a kaskada zavisi na tom poradi - nemenit ho
   a nove pravidlo psat do souboru, kam patri obsahove.
   ════════════════════════════════════════════════════════════ */

/* ════ FOTO PLACEHOLDER ════════════════════════════
   Vymenis za fotku: nahrad <div class="ph-fill"></div>
   za <img class="ph-fill" src="..." alt="..."> (note se skryje sam). */
/* Kolo 5 (13. 9.): plocha placeholderu je pozadi stranky, ne „Neon OFF".
   Modra deska pod 3D arenou (`.arena-photo` je taky `.ph`) byla presne to
   „modry pozadi u ty mapy", ktere ma pryc — a stejna deska svitila i pod
   kazdou chybejici fotkou. Mrizka a dve tlumena svetla zustavaji, ta modra
   plocha pod nimi ne. */
.ph { position: relative; overflow: hidden; border-radius: var(--radius-lg); background: var(--bg); }
.ph-fill {
  position: absolute; inset: 0;
  background:
    radial-gradient(120% 120% at 12% 8%, var(--accent-dim), transparent 55%),
    radial-gradient(120% 120% at 92% 96%, var(--accent-2-dim), transparent 55%),
    repeating-linear-gradient(0deg, rgba(255,255,255,.035) 0 1px, transparent 1px 27px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.035) 0 1px, transparent 1px 27px),
    var(--bg);
}
.ph-fill::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 30px; height: 30px; transform: translate(-50%, -65%);
  border: 2px solid var(--faint); border-radius: 50%;
  box-shadow: 0 0 0 6px rgba(255,255,255,.03);
}
/* `inset: 0` samo obrázek neroztáhne — u nahrazovaného prvku (<img>) zůstane
   `width/height: auto` na vlastní velikosti obrázku a přebývající offset se
   zahodí, takže se přilepí do levého horního rohu (ikony módů seděly v rohu,
   fotky galerie byly oříznuté zleva shora). Rozměry musí být explicitní, teprve
   pak má `object-fit`/`object-position` co centrovat. */
img.ph-fill { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.ph-note {
  position: absolute; left: 0; right: 0; bottom: .8rem; text-align: center;
  font: 500 .68rem/1 var(--font); letter-spacing: .1em; text-transform: uppercase;
  color: var(--faint); z-index: 1;
}
.ph:has(img.ph-fill) .ph-fill::after,
.ph:has(img.ph-fill) .ph-note { display: none; }

/* ════ GEAR SHOWCASE (vesta/zbraň, /co-je-lasergame) ═══
   Velký produktový výjev jako hero phaser: model uprostred,
   dýchající glow + staticke prstence vzadu, HUD-chipy s fakty kolem.
   Canvas sedi na ph-fill pozadi; az model dojede, gear-ready
   schova ikonku/note (ph-fill gradient jako pozadi zustava). */
.gear-showcase {
  display: flex; gap: clamp(2rem, 5vw, 4rem);
  align-items: center; margin-top: 3rem;
}
.gear-showcase + .gear-showcase { margin-top: clamp(3.5rem, 8vw, 6rem); }
.gear-showcase.rev { flex-direction: row-reverse; }
.gear-showcase .gear-stage { flex: 1.1 1 0; min-width: 0; }
.gear-showcase .gear-showcase-copy { flex: 0.9 1 0; min-width: 0; }
.gear-showcase-copy h3 { font-family: var(--font-head); font-size: 1.4rem; font-weight: 600; letter-spacing: -.015em; color: var(--text); margin: 0 0 .6rem; }
.gear-showcase-copy > p:not(.feat-label) { font-size: 1rem; color: var(--muted); line-height: 1.65; max-width: 44ch; margin: 0; }

/* ZADNY `overflow: hidden` na scene. Zar ramecku (`filter: drop-shadow`) lezi
   VNE prvku a orez by ji ustrihl — stejne pravidlo jako u `.event-card`.
   Orez si dela vnitrni plocha vieweru (`.gear-photo`, `.arena-photo`), ktera
   ho potrebuje kvuli canvasu. */
.gear-stage {
  position: relative; display: flex; align-items: center; justify-content: center;
  min-height: 380px; border-radius: var(--radius-lg);
  /* Kolo 5 (13. 9.): bez vlastni plochy, jen zarici obrys. Se stinem taky
     konec — pod pruhlednym panelem by z nej byl tmavy flek na pozadi. */
  background: transparent;
}
.gear-glow {
  position: absolute; width: 68%; aspect-ratio: 1; z-index: 0;
  /* Kolo 5 (13. 9.): zare pod vybavou BYLA MODRA (`--info`), tedy presne to,
     co ma ze vseho zmizet — a druha barevna zare vedle zelene stejne rusi
     obe (viz manual). Prvek zustava kvuli rozvrzeni, plochu uz nekresli. */
  background: none;
  filter: blur(26px);
}
.gear-ring {
  position: absolute; width: 250px; max-width: 68%; aspect-ratio: 1; z-index: 0;
  border: 1px dashed var(--accent-border); border-radius: 50%;
}
.gear-ring-2 { width: 190px; border-style: dotted; border-color: var(--accent-2-border); }
.gear-hud { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
/* Ve scene s neonovym rameckem stoji stitky (`.ph-tl` apod. maji `left: 0`
   / `right: 0`) presne na hrane — tedy POD linkou ramecku, ktera se kresli
   navrch (z-index 5), a stitek vypada jako do ni narazeny. HUD proto zacina
   za linkou a kus od ni, na vsech oramovanych scenach stejne. */
.neon-frame--open > .gear-hud { inset: calc(var(--frame-w) + .6rem); }
.gear-fact { font-size: .64rem; }

/* touch-action: pan-y — svisle tažení patří scrollu stránky, ne modelu.
   S `none` se přes viewer (půl obrazovky na mobilu) nedalo scrollovat dál. */
.gear-photo { position: absolute; inset: 0; z-index: 2; touch-action: pan-y; cursor: grab; background: transparent; }
.gear-photo:active { cursor: grabbing; }
.gear-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; z-index: 1; }
.gear-photo.gear-ready .ph-fill::after,
.gear-photo.gear-ready .ph-note { display: none; }
.gear-hint { opacity: 0; transition: opacity var(--d-hover) var(--ease-out); }
.gear-stage:has(.gear-ready) .gear-hint { opacity: 1; }

@media (max-width: 980px) { .gear-stage { min-height: 300px; } }

/* Vesta nahoře, zbraň dole — kompaktní pár v teaseru (na rozdíl od
   .gear-showcase to nemá doprovodný text, jen dva menší viewery). */
.gear-stack { display: flex; flex-direction: column; gap: clamp(1rem, 2.4vw, 1.5rem); }
.gear-stack .gear-stage { min-height: 230px; }
@media (max-width: 980px) { .gear-stack .gear-stage { min-height: 260px; } }

/* Figurína s vestou a phaserem (homepage #laserforce-teaser) — stojící postava
   potřebuje na výšku víc místa než samotná vesta. touch-action: pan-y (ne none
   jako u .gear-photo): svislý scroll musí přes tak velkou plochu na mobilu projít,
   otáčení bere jen vodorovné tažení. */
/* Kolo 4 (7. 9.): jen homepage teaser bez vlastni plochy - `.gear-stage`
   je sdileny s /co-je-lasergame, kde plocha zustava (designer ji tam
   nevidel). `--figure` je modifikator, ktery pouziva jen homepage. */
.gear-stage--figure { min-height: 540px; background: transparent; box-shadow: none; }
.figure-photo.is-dragging { cursor: grabbing; }
.figure-photo:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
@media (max-width: 980px) { .gear-stage--figure { min-height: 440px; } }

/* Poznamka k poradi: tenhle blok MUSI stat za `.ph` vys, ne u ostatnich
   .arena-* pravidel. `.ph` nastavuje position: relative a ma stejnou
   specificitu, takze kdyz stoji pozdeji, prebije inset: 0 u .arena-photo
   a viewer dostane nulovou vysku (canvas 1x1, v karte prazdno). */
/* ── 3D aréna (homepage náhled + /arena) ────────────
   Model je procedurální (arena_rig.js), takže na rozdíl od gear vieweru není
   co načítat a .gear-ready padne prakticky hned. Ploché SVG schéma zůstává
   v kartě jako záloha pro no-WebGL / úsporný režim a mizí až ve chvíli, kdy
   viewer opravdu naběhl — proto :has(), ne třída na rodiči z JS. */
.arena-stage--3d {
  position: relative; display: flex; align-items: center; justify-content: center;
  padding: 0; min-height: 420px; overflow: hidden;
}
.arena-stage--3d:has(.gear-ready) .arena-map { display: none; }
.arena-stage--3d .arena-map { position: relative; z-index: 1; padding: clamp(1.25rem, 2.4vw, 2rem); }

/* touch-action: pan-y — svislé tažení patří scrollu stránky, ne modelu.
   Stejné pravidlo jako u .gear-photo: viewer zabírá na mobilu půl obrazovky. */
.arena-photo {
  position: absolute; inset: 0; z-index: 2;
  touch-action: pan-y; cursor: grab; background: transparent;
}
.arena-photo.is-dragging { cursor: grabbing; }
.arena-photo:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.arena-photo.gear-ready .ph-fill::after,
.arena-photo.gear-ready .ph-note { display: none; }
.arena-stage--3d:has(.gear-ready) .gear-hint,
.arena-viewer:has(.gear-ready) .gear-hint { opacity: 1; }
@media (max-width: 980px) { .arena-stage--3d { min-height: 340px; } }

/* Velký viewer na /arena — stejný prvek, jen dostane víc místa.
   Kolo 8 (23. 9.): dostal NEONOVY RAMECEK jako ostatni 3D sceny
   (`.gear-stage`, homepage nahled) — designer: „tady chybi ramecek". Proto
   tu neni `border` (prebil by ramecek, 09 stoji v kaskade za 02-primitives)
   ani `overflow: hidden` (ustrihl by zar, ktera lezi vne prvku). Orez si
   dela `.arena-photo` samo — je to `.ph` s `overflow: hidden` a zaoblenim. */
.arena-viewer {
  position: relative; display: flex; align-items: center; justify-content: center;
  min-height: 560px; border-radius: var(--radius-lg);
  /* Kolo 5 (13. 9.): plocha pryc. */
  background: transparent;
}
@media (max-width: 980px) { .arena-viewer { min-height: 400px; } }

.arena-filters { display: flex; flex-wrap: wrap; gap: .6rem; margin: 1.1rem 0 .8rem; }
.arena-chip {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .45rem .95rem; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--line-strong); background: var(--surface);
  color: var(--muted); font: inherit; font-size: .88rem;
  transition: color var(--d-hover) var(--ease-out), border-color var(--d-hover) var(--ease-out),
              background var(--d-hover) var(--ease-out);
}
.arena-chip:hover { color: var(--text); border-color: var(--accent-border); }
/* Stav drží aria-pressed, ne extra třída — jeden zdroj pravdy pro odečítač i CSS. */
.arena-chip[aria-pressed="true"] {
  color: var(--accent-ink); background: var(--accent); border-color: var(--accent);
}
.arena-chip .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--team-blue); }

.arena-stats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: clamp(.8rem, 2vw, 1.2rem); margin-top: 2rem;
}
/* Karta cisla je panel, takze nese neonovy ramecek (kolo 8) — drive mela
   jen vlasovou linku `--line` jako jediny panel na strance. Bez `border`
   z tehoz duvodu jako `.arena-viewer` vys. `text-box` orizne pulradek nad
   cislem a pod popiskem, jinak by byla mezera nahore i dole vetsi, nez
   ukazuje padding (viz 02-primitives.css). */
.arena-stat {
  border-radius: var(--radius-lg);
  background: transparent; padding: 1.3rem 1.1rem; text-align: center;
  text-box: trim-both cap alphabetic;
}
.arena-stat-n {
  display: block; font-family: var(--font-head); font-weight: 700;
  font-size: clamp(1.5rem, 3.4vw, 2.1rem); letter-spacing: -.02em; color: var(--text);
}
.arena-stat-l { display: block; margin-top: .35rem; font-size: .84rem; color: var(--muted); }
.arena-outro .btn + .btn { margin-left: .6rem; }

/* ── průchod arénou v první osobě ───────────────────
   Stav drží třída .is-walking na [data-arena-scope] (přepíná ji
   arena_viewer.js) — jedna třída na kontejneru přepne popisky, joystick
   i filtry, takže tu není nic, co by se mohlo rozejít. */
.arena-walkbar { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem; margin-top: 1.1rem; }
.arena-walk-note { max-width: 46ch; }
[data-arena-walk] .walk-out,
.is-walking [data-arena-walk] .walk-in { display: none; }
.is-walking [data-arena-walk] .walk-out { display: inline; }
/* Uvnitř arény nedávají filtry zón smysl (dívám se na stěnu z metru). */
.is-walking .arena-filters { opacity: .35; pointer-events: none; }
/* Dve tridy, ne jedna: `.ph-chip` (display: inline-flex) stoji v souboru niz
   a se stejnou specificitou by tenhle `display: none` prebilo. */
.gear-hud .arena-hint-walk { display: none; }
.is-walking .gear-hud .arena-hint-map { display: none; }
.is-walking .gear-hud .arena-hint-walk { display: inline-flex; opacity: 1; }
/* V chůzi je tažení rozhlížení, ne scroll: tady `none` smysl má, protože se
   z režimu vystupuje tlačítkem a Escapem, ne odscrollováním. */
.is-walking .arena-photo { touch-action: none; cursor: crosshair; }

.arena-stick {
  position: absolute; left: 1rem; bottom: 1rem; z-index: 4;
  width: 104px; height: 104px; border-radius: 50%;
  border: 1px solid var(--line-strong); background: rgba(0, 0, 0, .28);
  display: none; touch-action: none;
}
.arena-stick span {
  position: absolute; left: 50%; top: 50%; width: 42px; height: 42px;
  margin: -21px 0 0 -21px; border-radius: 50%;
  background: var(--accent); opacity: .75;
  transform: translate(var(--jx, 0%), var(--jy, 0%));
}
.arena-stick.is-active span { opacity: 1; }
/* Joystick jen tam, kde není myš — na desktopu je od toho WASD. */
@media (pointer: coarse) { .is-walking .arena-stick { display: block; } }