/* NEON COIL FAMILY ARENA — szklany HUD w oprawie "dark neon".
   Wzorzec: Gemini_Generated_Image_pfmmbbpfmmbbpfmm.jpeg (makieta, NIE wchodzi do paczki).

   ZASADA TEGO PLIKU: zmienia WYGLĄD, nie układ. Pozycje i rozmiary paneli stoją
   w index.html i mierzy je browser.test.cjs (nic nie nachodzi na nic przy 320,
   412, 844 i 1280 px). Dlatego obramowania mają te same grubości co dotąd, a
   neonowa rama i ścięte rogi są rysowane pseudo-elementami, które nie zmieniają
   pudełka. Ładowany PO arkuszu z index.html, więc przy tej samej wadze wygrywa.
   Rozmiary fontów zostają w media queries index.html — tu tylko krój i kolor. */

:root {
  --font: "Avenir Next", "Segoe UI", Roboto, "Helvetica Neue", system-ui, sans-serif;
  --ink: #eef6ff; --muted: #8ea6d8; --line: #9fd8ff38;
  --lime: #5ee7ff; --mint: #ff5ad9; --gold: #ffd84a;
  --neon-a: #5ee7ff; --neon-b: #ff5ad9;
  --glass: linear-gradient(160deg, #ffffff1f, #ffffff08 45%, #ffffff04);
  --glass-deep: linear-gradient(160deg, #1b2863eb, #0a0f2ef0 60%, #160a36eb);
  --frame: linear-gradient(135deg, var(--neon-a), #c9d6ea 34%, #5d6a87 56%, var(--neon-b));
  --cut10: polygon(10px 0, calc(100% - 10px) 0, 100% 10px, 100% calc(100% - 10px), calc(100% - 10px) 100%, 10px 100%, 0 calc(100% - 10px), 0 10px);
  --cut8: polygon(8.5px 0, calc(100% - 8.5px) 0, 100% 8.5px, 100% calc(100% - 8.5px), calc(100% - 8.5px) 100%, 8.5px 100%, 0 calc(100% - 8.5px), 0 8.5px);
  --cut16: polygon(16px 0, calc(100% - 16px) 0, 100% 16px, 100% calc(100% - 16px), calc(100% - 16px) 100%, 16px 100%, 0 calc(100% - 16px), 0 16px);
  --cut15: polygon(15px 0, calc(100% - 15px) 0, 100% 15px, 100% calc(100% - 15px), calc(100% - 15px) 100%, 15px 100%, 0 calc(100% - 15px), 0 15px);
}
body[data-palette="aurora"] { --lime: #5ee7ff; --mint: #ff5ad9; --gold: #ffd84a; --neon-a: #5ee7ff; --neon-b: #ff5ad9; }
body[data-palette="garden"] { --lime: #57ffb4; --mint: #d8ff5a; --gold: #ffe45c; --neon-a: #57ffb4; --neon-b: #d8ff5a; }
body[data-palette="ember"] { --lime: #ffb14a; --mint: #ff4f7a; --gold: #ffd84a; --neon-a: #ffb14a; --neon-b: #ff4f7a; }

html, body { font-family: var(--font); background: #060919; }
body, body[data-palette="aurora"] { background-image: radial-gradient(circle at 50% 35%, #131c4a, #060919 68%); }
body[data-palette="garden"] { background-image: radial-gradient(circle at 50% 35%, #0b2f33, #031110 68%); }
body[data-palette="ember"] { background-image: radial-gradient(circle at 50% 35%, #34111f, #0f0409 68%); }
.shell:before { background: radial-gradient(ellipse at 50% 46%, transparent 58%, #02030c8c 100%), linear-gradient(#ffffff06, transparent 18% 82%, #00000059); }

/* Tytuł jak na wzorcu: NEON w pierwszym kolorze, reszta w drugim, ARENA pod spodem. */
.brand { text-shadow: none; }
.brand > div { max-width: min(340px, calc(100vw - 250px)); }
.brand b { font-family: var(--font); font-weight: 900; letter-spacing: .05em; text-transform: uppercase; color: var(--neon-b); text-shadow: 0 0 6px color-mix(in srgb, var(--neon-b) 70%, transparent), 0 0 18px color-mix(in srgb, var(--neon-b) 35%, transparent); }
.brand b span { color: var(--neon-a); text-shadow: 0 0 6px color-mix(in srgb, var(--neon-a) 70%, transparent), 0 0 18px color-mix(in srgb, var(--neon-a) 35%, transparent); }
.brand small { font-family: var(--font); font-weight: 800; letter-spacing: .42em; text-transform: uppercase; color: #e3f6ff; text-shadow: 0 0 10px color-mix(in srgb, var(--neon-a) 55%, transparent); }
body[data-palette] .brand img { filter: drop-shadow(0 0 9px color-mix(in srgb, var(--neon-a) 45%, transparent)) drop-shadow(0 6px 12px #0009); }
body[data-palette="garden"] .brand img { filter: hue-rotate(-50deg) drop-shadow(0 0 9px #57ffb466) drop-shadow(0 6px 12px #0009); }
body[data-palette="ember"] .brand img { filter: hue-rotate(200deg) saturate(1.2) drop-shadow(0 0 9px #ffb14a66) drop-shadow(0 6px 12px #0009); }
@media (max-width: 520px) { .brand b { letter-spacing: .03em; } }

/* Przyciski ikon: matowe szkło z jasną krawędzią. */
.icon { border-color: #ffffff2e; border-radius: 12px; background: var(--glass); color: #eaf6ff; box-shadow: 0 8px 22px #0007, inset 0 1px #ffffff33, 0 0 14px color-mix(in srgb, var(--neon-a) 14%, transparent); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.theme-icon:before { background: conic-gradient(#57ffb4 0 33%, #5ee7ff 0 66%, #ffb14a 0); box-shadow: inset 0 0 0 3px #0a0f2e, 0 0 10px #5ee7ff66; }

/* Panel wyniku i tablica rywali: szkło ze ściętymi rogami w neonowej ramie. */
.scorebox, .board, .draft-box, .result { position: relative; isolation: isolate; }
.scorebox { border-left-color: transparent; background: none; box-shadow: none; clip-path: var(--cut10); backdrop-filter: blur(10px) saturate(140%); -webkit-backdrop-filter: blur(10px) saturate(140%); }
.scorebox:before, .scorebox:after, .board:before, .board:after, .draft-box:before, .draft-box:after, .result:before, .result:after { content: ""; position: absolute; z-index: -1; pointer-events: none; }
.scorebox:before { inset: 0 0 0 -3px; background: var(--frame); clip-path: var(--cut10); }
.scorebox:after { inset: 1.5px 1.5px 1.5px -1.5px; background: var(--glass-deep); opacity: .9; clip-path: var(--cut8); }
.scorebox b { font-family: var(--font); font-weight: 900; color: #fff; text-shadow: 0 0 12px color-mix(in srgb, var(--neon-a) 55%, transparent); }
.board { border-color: transparent; background: none; clip-path: var(--cut10); backdrop-filter: blur(10px) saturate(140%); -webkit-backdrop-filter: blur(10px) saturate(140%); }
.board:before { inset: -1px; background: var(--frame); clip-path: var(--cut10); }
.board:after { inset: .5px; background: var(--glass-deep); opacity: .88; clip-path: var(--cut8); }
.board-row { color: #bccbeb; font-family: var(--font); }
.board-row u { color: #7088c2; font-family: var(--font); }
.board-row b { color: #fff; font-family: var(--font); font-weight: 800; font-variant-numeric: tabular-nums; }
.board-row i { box-shadow: 0 0 0 1px #0009, 0 0 6px #ffffff33; }
.board-row.me { background: #5ee7ff24; background: linear-gradient(90deg, color-mix(in srgb, var(--lime) 26%, transparent), color-mix(in srgb, var(--lime) 4%, transparent)); }
.board-row.hunt { background: linear-gradient(90deg, #ff5a8a38, #ff5a8a08); }
#pace { color: #8ea6d8; font-family: var(--font); }
#pace.ahead { color: var(--lime); text-shadow: 0 0 12px var(--lime); }

/* Małe kafle: szkło z zaokrągleniem, bez ramy — rama jest dla paneli głównych. */
.mini, .streak, .combat-key, .family-status { background: var(--glass); border-color: #ffffff26; border-radius: 10px; box-shadow: inset 0 1px #ffffff2e, 0 6px 18px #0006; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
/* nowrap: krój bezszeryfowy jest szerszy od monospace, a "1 / 6" łamane na dwie
   linie podnosiło kafel i spychało klucz walki (zmierzone przy 412 i 844 px). */
.mini b, .streak b { font-family: var(--font); font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; letter-spacing: -.02em; color: #f2f8ff; }
.combat-key b { color: var(--lime); }
.head { background: radial-gradient(circle at 35% 30%, #effcff, var(--lime) 55%, #1d3f99); }
.body-line { border-color: var(--lime); }
.combo { color: #8ea6d8; font-family: var(--font); }
.combo.hot { color: #fff; text-shadow: 0 0 10px var(--mint), 0 0 24px var(--mint); }
.feed div { background: #0b1233cc; border-right-color: var(--mint); border-radius: 6px 0 0 6px; color: #dbe7ff; font-family: var(--font); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.feed .bright { color: #fff; border-color: var(--gold); text-shadow: 0 0 10px var(--mint); }

/* Cele rundy: pierścień postępu w kolorze motywu na szklanym dysku. */
.quest { background: conic-gradient(var(--lime) var(--p), #ffffff17 var(--p)); box-shadow: 0 8px 22px #0008, 0 0 16px color-mix(in srgb, var(--lime) 18%, transparent); }
.quest:before { background: radial-gradient(circle at 40% 30%, #1f2d6d, #0a0f2e 72%); box-shadow: inset 0 1px #ffffff26; }
.quest b { background: #0b1233; color: #e8f2ff; font-family: var(--font); box-shadow: inset 0 0 0 1px #ffffff26; }
.quest.done { box-shadow: 0 0 24px var(--lime); }
.family-child b.on { background: #ff6f9f; box-shadow: 0 0 6px #ff6f9f; }

/* BOOST: szklana kula z neonowym pierścieniem; wciśnięty zmienia kolor pierścienia. */
.boost { border-color: color-mix(in srgb, var(--neon-a) 60%, transparent); background: radial-gradient(circle at 36% 26%, #ffffff6b, transparent 34%), radial-gradient(circle at 50% 62%, #26358a, #0b1033 72%); color: #fff; box-shadow: 0 10px 28px #000a, 0 0 22px color-mix(in srgb, var(--neon-a) 30%, transparent), inset 0 0 18px color-mix(in srgb, var(--neon-a) 22%, transparent); }
.boost:before { background: linear-gradient(180deg, #ffffff, var(--lime)); }
.boost.on { border-color: var(--mint); box-shadow: 0 0 34px var(--mint), inset 0 0 22px color-mix(in srgb, var(--mint) 35%, transparent); filter: brightness(1.15); }
.joystick { border-color: #9fe9ff66; background: radial-gradient(circle, #5ee7ff1a, #0a0f2e99 68%); box-shadow: inset 0 0 25px #5ee7ff33, 0 0 18px #5ee7ff22; }
.joystick i { background: radial-gradient(circle at 35% 30%, #ffffff, var(--lime) 45%, #1d3f99); box-shadow: 0 5px 14px #0008, 0 0 19px var(--lime); }

/* Wybór ewolucji i koniec biegu: duże szklane karty w ramie ze ściętymi rogami. */
.draft, .end { background: #050818d9; }
.draft-box { border-color: transparent; background: none; box-shadow: 0 30px 80px #000c; }
.draft-box:before, .result:before { inset: -1px; background: var(--frame); clip-path: var(--cut16); }
.draft-box:after, .result:after { inset: 1px; background: var(--glass-deep); clip-path: var(--cut15); }
.draft-mark { border-color: var(--lime); border-left-color: transparent; box-shadow: 0 0 22px var(--lime); }
.card { border-color: #ffffff2e; border-radius: 12px; background: linear-gradient(160deg, #1f2d70eb, #0b1033f2); color: var(--ink); box-shadow: 0 8px 22px #0007, inset 0 1px #ffffff33, 0 0 18px color-mix(in srgb, var(--neon-a) 10%, transparent); }
.card em { color: var(--lime); font-family: var(--font); font-weight: 900; text-shadow: 0 0 10px color-mix(in srgb, var(--lime) 60%, transparent); }
.card u { color: #8ea6d8; font-family: var(--font); }
.card span b, .nest-slot b { background: #26325e; }
.result { border-color: transparent; background: none; box-shadow: 0 35px 90px #000c; }
.record { color: var(--lime); font-family: var(--font); font-weight: 800; }
.final { font-family: var(--font); font-weight: 900; color: #fff; text-shadow: 0 0 16px color-mix(in srgb, var(--neon-a) 70%, transparent), 0 0 38px color-mix(in srgb, var(--neon-b) 45%, transparent); }
.result-grid div, .nest-slot { background: var(--glass); border-radius: 10px; box-shadow: inset 0 0 0 1px #ffffff1c; }
.result-grid b { font-family: var(--font); font-weight: 900; font-variant-numeric: tabular-nums; }
.killer { color: #ff9eb4; font-family: var(--font); }
/* .hud-icon ma margin:auto, co w wierszu flex rozpychało ikonę i imię pogromcy na dwa końce karty. */
.killer .hud-icon { margin: 0; }
#chase { color: #8ea6d8; }
.again { border-radius: 12px; background: linear-gradient(90deg, var(--lime), var(--mint)); box-shadow: 0 0 24px color-mix(in srgb, var(--lime) 35%, transparent), inset 0 1px #ffffff88; }
.again i { border-color: #0a0f2e; border-left-color: transparent; }
.again i:after { border-right-color: #0a0f2e; }

/* KARTY NAGRÓD: medalion z ikoną SVG (reward-icons.js), nazwa, jedno zdanie,
   przyrost i znacznik "na zawsze" (gniazdo) albo "ten bieg" (dar). Kolor
   medalionu i ramki mówi o rzadkości daru: zwykły, rzadki, epicki.
   Dawne kształty .d-* z index.html zostają dla serii dni (.streak) — w kartach
   i gnieździe gasimy je, bo ikonę rysuje SVG. */
.draft-title { display: block; margin: -4px 0 12px; text-align: center; font: 900 15px/1.1 var(--font); letter-spacing: .14em; text-transform: uppercase; color: #fff; text-shadow: 0 0 12px color-mix(in srgb, var(--neon-a) 60%, transparent); }
.card { --rar: var(--lime); grid-template-areas: "icon" "name" "desc" "gain" "pips" "mark"; gap: 5px; align-content: start; }
.card.rar-zwykly { --rar: #5ee7ff; } .card.rar-rzadki { --rar: #b77bff; } .card.rar-epicki { --rar: #ffd84a; }
.card.boon { border-color: color-mix(in srgb, var(--rar) 55%, transparent); box-shadow: 0 8px 22px #0007, inset 0 1px #ffffff33, 0 0 22px color-mix(in srgb, var(--rar) 26%, transparent); }
.card.rar-epicki { background: linear-gradient(160deg, #3b2c0eeb, #1a1033f2); }
.card i[class^="d-"], .nest-slot i[class^="d-"] { display: grid; place-items: center; border: 0; clip-path: none; border-radius: 50%; background: radial-gradient(circle at 50% 36%, color-mix(in srgb, var(--rar, var(--lime)) 36%, transparent), transparent 70%), radial-gradient(circle, #111a4c, #070a1c 74%); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--rar, var(--lime)) 70%, transparent), 0 0 16px color-mix(in srgb, var(--rar, var(--lime)) 32%, transparent); }
.card i[class^="d-"]:before, .card i[class^="d-"]:after, .nest-slot i[class^="d-"]:before, .nest-slot i[class^="d-"]:after { content: none; }
.card i svg, .nest-slot i svg { display: block; width: 80%; height: 80%; filter: drop-shadow(0 2px 3px #000b); }
.card i { grid-area: icon; width: 54px; height: 54px; }
.card strong { grid-area: name; font: 900 13px/1.1 var(--font); letter-spacing: .02em; color: #fff; text-align: center; }
.card small { grid-area: desc; font: 600 10.5px/1.25 var(--font); color: #bccbeb; text-align: center; }
.card em { grid-area: gain; }
.card span { grid-area: pips; }
.card mark { grid-area: mark; padding: 2px 8px; border-radius: 999px; font: 900 8.5px/1.45 var(--font); letter-spacing: .12em; text-transform: uppercase; color: #0a0f2e; background: var(--rar); }
.card.evo mark { background: linear-gradient(90deg, var(--lime), var(--mint)); }
.nest-slot { --rar: #5d6a9c; }
.nest-slot i { width: 30px; height: 30px; }
.nest-slot.max { --rar: #ffd84a; box-shadow: inset 0 0 0 1px #ffd84a66, 0 0 12px #ffd84a33; }
@media (max-width: 400px) {
  .card { grid-template-columns: 50px 1fr auto; grid-template-areas: "icon name gain" "icon desc desc" "icon pips mark"; justify-items: start; column-gap: 10px; row-gap: 3px; padding: 10px 12px 10px 22px; }
  .card i { width: 46px; height: 46px; align-self: center; }
  .card strong, .card small { text-align: left; }
  .card mark { justify-self: end; }
}

/* Słaby telefon: rozmycie tła za szkłem jest drogie — zostaje sam kolor szkła. */
body[data-quality="low"] .board, body[data-quality="low"] .streak, body[data-quality="low"] .feed div, body[data-quality="low"] .icon, body[data-quality="low"] .scorebox { backdrop-filter: none; -webkit-backdrop-filter: none; }
body[data-quality="low"] .mini, body[data-quality="low"] .streak, body[data-quality="low"] .combat-key, body[data-quality="low"] .family-status, body[data-quality="low"] .icon { background: #141c4ae6; }