/* ---------- Barvy HUD (témata) ----------
   --hc  hlavní barva displejů (azurová), --ha  akcent (zlatá/jantarová), --hc-hi / --hc-wh  světlejší odstíny.
   body.theme-kokpit = modrošedý kokpit: tlumenější ocelově modré displeje a jantarové kontrolky. */
:root { --hc: #7DF9FF; --ha: #FFD66B; --hc-hi: #CFFBFF; --hc-wh: #E8FEFF; --panel-ink: rgba(5, 8, 15, .6); }
body.theme-kokpit { --hc: #63C3D9; --ha: #F0B54A; --hc-hi: #A8DDE9; --hc-wh: #D2ECF2; --panel-ink: rgba(8, 18, 24, .72); }
/* Hra LHC na celou obrazovku. Záměrně jen tmavý vzhled: hraje se ve vesmíru. */
html, body.game-page { height: 100%; }
body.game-page { margin: 0; padding: 0; overflow: hidden; background: #03050A; color: #E6E9F2; }
.fs { position: fixed; inset: 0; overflow: hidden; }
.fs canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; cursor: grab; }
.fs canvas:active { cursor: grabbing; }

.gbar { position: absolute; top: 0; left: 0; right: 0; display: flex; flex-direction: row; justify-content: space-between; align-items: center; gap: 10px 16px; flex-wrap: wrap;
  padding: calc(10px + env(safe-area-inset-top, 0px)) 16px 10px; background: linear-gradient(#03050Acc, #03050A00); pointer-events: none; }
.gbar > * { pointer-events: auto; }
.gbrand { display: flex; align-items: center; gap: 10px; }
.gbrand h1 { font-family: var(--display); font-size: clamp(16px, 2.2vw, 22px); font-weight: 750; margin: 0; color: #F1F5F9; letter-spacing: -0.01em; white-space: nowrap; }
.gback { color: #9AA6BF; text-decoration: none; font-size: 18px; padding: 4px 8px; border-radius: 8px; }
.gback:hover { color: #fff; background: #ffffff14; }
.glogo { display: inline-grid; place-items: center; }
.glogo svg { display: block; }
.gactions { display: flex; gap: 6px; flex-wrap: wrap; }
.gbtn { font: 500 13px var(--body); color: #E6E9F2; background: #0E1422cc; border: 1px solid #2A3654; border-radius: 8px; padding: 7px 12px; cursor: pointer; backdrop-filter: blur(6px); }
.gbtn:hover { border-color: #7B93FF; }
.gbtn[aria-expanded="true"] { border-color: #7B93FF; background: #1D2440cc; }
.gbtn.primary { background: linear-gradient(90deg, #48DBFB, #A29BFE, #F368E0); color: #0B0E13; border: 0; font-weight: 600; }
.gbtn:focus-visible { outline: 2px solid #7B93FF; outline-offset: 2px; }

.ghud { position: absolute; left: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); display: flex; flex-direction: column; gap: 6px; pointer-events: none; }
.gperf { position: absolute; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); display: flex; gap: 6px; pointer-events: none; }
.ghint { position: absolute; left: 50%; transform: translateX(-50%); bottom: calc(18px + env(safe-area-inset-bottom, 0px)); font-family: var(--mono); font-size: 11px; color: #7C88A3; pointer-events: none; white-space: nowrap; }
.fs .pill { background: #0A0F1Acc; border: 1px solid #1C2640; }
.fs .toast { top: auto; bottom: calc(96px + env(safe-area-inset-bottom, 0px)); }

.gpanel { position: absolute; right: 16px; top: 64px; width: 300px; max-width: calc(100vw - 32px); max-height: calc(100% - 140px); overflow: auto;
  display: flex; flex-direction: column; gap: 10px; padding: 14px; border-radius: 12px; background: #0A0F1Ae0; border: 1px solid #1C2640; backdrop-filter: blur(8px); }
.gpanel .eyebrow { color: #8B97B3; }
.gpanel .recipes li.on { background: #1D2440; }
.gpanel .recipes .op, .gpanel .recipes .nm, .gpanel .legend { color: #8B97B3; }
.gpanel .check { color: #C9D1E3; }
.gpanel details { border-top: 1px solid #1C2640; padding-top: 8px; }
.gpanel summary { cursor: pointer; font-size: 13px; font-weight: 600; color: #C9D1E3; }
.gpanel .howto { margin-top: 8px; color: #AEB8CE; font-size: 13px; }
.gpanel[hidden] { display: none !important; }

.fs .over-card { background: #0E1422; color: #E6E9F2; border-color: #2A3654; }
.fs .over-card p { color: #9AA6BF; }

@media (max-width: 760px) {
  .ghint { display: none; }
  .gpanel { top: auto; bottom: calc(96px + env(safe-area-inset-bottom, 0px)); max-height: 45%; }
  .gbrand h1 .lhc-name { display: none; }
}

/* ---------- Kokpit ---------- */
.fs canvas { z-index: 0; }
.cockpit { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; overflow: visible; }
.gbar, .ghud, .gperf, .ghint, .gpanel, .toast, .status, .over { z-index: 2; }
.ck-strut { fill: none; stroke: var(--hc); stroke-opacity: .16; stroke-width: 1.5; }
.ck-console { fill: #05080F; fill-opacity: .55; stroke: var(--hc); stroke-opacity: .35; stroke-width: 1.5; }
.ck-halo { fill: #03070D; fill-opacity: .55; stroke: var(--hc); stroke-opacity: .75; stroke-width: 1.6; }
.ck-base { fill: #050C14; fill-opacity: .9; stroke: var(--hc-hi); stroke-opacity: .9; stroke-width: 2; }
.ck-clamp { fill: #0A1A26; stroke: var(--hc); stroke-opacity: .7; stroke-width: 1; }
.ck-base2 { fill: none; stroke: var(--hc); stroke-opacity: .6; stroke-width: 1; stroke-dasharray: 4 4; }
.ck-hub { fill: #061018; stroke: var(--hc-hi); stroke-width: 2; }
.ck-hub-dot { fill: var(--ha); }
.ck-tube { fill: #04121A; fill-opacity: .9; stroke: var(--hc-hi); stroke-width: 2; stroke-linejoin: round; }
.ck-core { fill: none; stroke: var(--hc); stroke-opacity: .35; stroke-width: 1; stroke-dasharray: 6 4; }
.ck-rib { fill: none; stroke: var(--ha); stroke-opacity: .85; stroke-width: 1.6; }
.ck-muzzle { fill: #04121A; stroke: var(--ha); stroke-width: 1.8; }
.ck-flash { fill: var(--hc-wh); opacity: 0; filter: drop-shadow(0 0 6px var(--hc)) drop-shadow(0 0 14px var(--hc)); }
.ck-cannon { filter: drop-shadow(0 0 4px color-mix(in srgb, var(--hc) 35%, transparent)); }
.ck-cross { --tc: var(--hc); }
.ck-cross circle, .ck-cross path { fill: none; stroke: var(--hc-hi); stroke-width: 2; stroke-opacity: 1; filter: drop-shadow(0 0 3px #03050A); }
.ck-cross.locked .brk { stroke: var(--tc, var(--hc)); }
.ck-cross .dot { fill: var(--hc); stroke: none; }
.ck-cross .brk { stroke-opacity: .5; }
.ck-cross.locked .brk { stroke-opacity: 1; stroke-width: 2; }
.ck-target { fill: #E6F9FF; font: 500 12px var(--mono); text-anchor: middle; paint-order: stroke; stroke: #03050A; stroke-width: 4px; }

/* nabití děl a nabíjení fotony */
.ck-charge-bg { fill: none; stroke: var(--hc); stroke-opacity: .12; stroke-width: 4; }
.ck-charge { fill: none; stroke: var(--hc); stroke-width: 4; stroke-linecap: round; stroke-dasharray: 0 100; transition: stroke-dasharray .25s ease-out; filter: drop-shadow(0 0 4px var(--hc)); }
.cockpit.empty .ck-tube, .cockpit.empty .ck-muzzle { stroke-opacity: .35; }
.cockpit.empty .ck-cannon { filter: none; }
.ck-cannon.charged .ck-base { animation: ck-charged .5s ease-out; }
@keyframes ck-charged { 0% { fill: var(--hc); fill-opacity: .55; } 100% { fill: #070B14; fill-opacity: .8; } }
.ck-photon { fill: #F2FEFF; filter: drop-shadow(0 0 5px var(--hc)) drop-shadow(0 0 12px var(--hc)); }
.ck-photon-trail { fill: none; stroke: var(--hc); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 6px var(--hc)); }
/* ---------- Odpalovací modul (launcher.js): kruh pro děla + katapult jako jedna součást ---------- */
.lc { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; overflow: visible; --pull: 0; }
.lc-hit { position: absolute; z-index: 3; border-radius: 50%; touch-action: none; user-select: none; -webkit-user-select: none; outline: none; }
.lc-hit-ring { cursor: grab; }
.lc-hit-cradle { cursor: grab; }
.lc-hit-cradle.disabled { cursor: not-allowed; }
.lc-hit:active { cursor: grabbing; }
.lc-hit:focus-visible { box-shadow: 0 0 0 2px #03050A, 0 0 0 4px var(--hc); }
/* --- odpalovací modul: styl „HUD stanice“ (dvojité azurové linky, oranžové akcenty, zkosené panely) --- */
.lc-pan { fill: #03070D; fill-opacity: .62; stroke: var(--hc); stroke-opacity: .75; stroke-width: calc(1.6px * var(--s, 1)); filter: drop-shadow(0 0 6px color-mix(in srgb, var(--hc) 35%, transparent)); }
.lc-pan-i { fill: none; stroke: var(--hc); stroke-opacity: .28; stroke-width: 1; }
.lc-pan-grid { fill: none; stroke: var(--hc); stroke-opacity: .12; stroke-width: 1; }
.lc-pan-mark { fill: none; stroke: var(--hc); stroke-opacity: .8; stroke-width: calc(2.4px * var(--s, 1)); }
.lc-tab { fill: #03070D; fill-opacity: .85; stroke: var(--hc); stroke-opacity: .85; stroke-width: calc(1.6px * var(--s, 1)); }
.lc.narrow .lc-tab { display: none; }

.lc-tube-o { fill: none; stroke: #03070D; stroke-opacity: .85; stroke-linecap: round; stroke-linejoin: round; }
.lc-tube { fill: none; stroke: var(--hc-hi); stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 5px var(--hc)); }
.lc-tube-c { fill: none; stroke: #04121A; stroke-linecap: round; stroke-linejoin: round; }
.lc-axis { fill: none; stroke: var(--hc); stroke-opacity: .45; stroke-width: 1.2; stroke-dasharray: 5 4; }
.lc-node-halo { fill: #03070D; fill-opacity: .8; stroke: var(--hc); stroke-opacity: .35; stroke-width: 1; }
.lc-node { fill: #061018; stroke: var(--hc-hi); stroke-width: calc(2.6px * var(--s, 1)); filter: drop-shadow(0 0 5px var(--hc)); }
.lc-node-dot { fill: var(--ha); filter: drop-shadow(0 0 4px var(--ha)); }
.lc-node-dot.lc-tip { fill: #FFF6D8; }

.lc-strut-o { fill: none; stroke: #03070D; stroke-opacity: .7; stroke-linecap: round; }
.lc-strut { fill: none; stroke: var(--hc); stroke-opacity: .9; stroke-linecap: round; filter: drop-shadow(0 0 4px color-mix(in srgb, var(--hc) 60%, transparent)); }
.lc-wing-inner { fill: none; stroke: var(--hc); stroke-opacity: .4; stroke-width: 1.2; }
.lc-tick { stroke: var(--ha); stroke-opacity: .35; stroke-width: calc(1.6px * var(--s, 1)); stroke-linecap: butt; }
.lc-tick.major { stroke-width: calc(2.4px * var(--s, 1)); }
.lc-tick.on { stroke-opacity: 1; filter: drop-shadow(0 0 3px var(--ha)); }
.lc.zone .lc-tick.on { stroke: var(--hc); filter: drop-shadow(0 0 3px var(--hc)); }

.lc-bez-fill { fill: none; stroke: #03070D; stroke-opacity: .88; }
.lc-bez-o { fill: none; stroke: var(--hc); stroke-opacity: .8; stroke-width: calc(2px * var(--s, 1)); filter: drop-shadow(0 0 8px color-mix(in srgb, var(--hc) 45%, transparent)); }
.lc-bez-i { fill: none; stroke: var(--hc); stroke-opacity: .55; stroke-width: 1.2; }
.lc-disc { stroke: var(--hc-hi); stroke-opacity: .85; stroke-width: calc(2px * var(--s, 1)); filter: drop-shadow(0 0 10px color-mix(in srgb, var(--hc) 35%, transparent)); transition: stroke-opacity .15s; }
.lc.aiming .lc-disc { stroke: #FFFFFF; stroke-opacity: 1; filter: drop-shadow(0 0 16px color-mix(in srgb, var(--hc) 60%, transparent)); }
.lc.aiming .lc-bez-o { stroke-opacity: 1; }
.lc-segment { fill: #0A2230; fill-opacity: .9; stroke: var(--hc); stroke-opacity: .35; stroke-width: 1; }
.lc-segment.on { fill: var(--hc); fill-opacity: .85; stroke-opacity: 1; filter: drop-shadow(0 0 5px var(--hc)); }
.lc-clamp { fill: #0A1A26; stroke: var(--hc); stroke-opacity: .5; stroke-width: 1; }
.lc-oarc { fill: none; stroke: var(--ha); stroke-width: calc(2.4px * var(--s, 1)); stroke-linecap: butt; opacity: .9; }
.lc-oarc-t { stroke-dasharray: 3 3; opacity: .7; }
.lc-xh { fill: none; stroke: var(--hc); stroke-opacity: .45; stroke-width: 1; stroke-dasharray: 6 4; }
.lc-brk { fill: none; stroke: var(--hc-wh); stroke-opacity: .7; stroke-width: 1.5; }
.lc-tgt { fill: none; stroke: var(--hc); stroke-opacity: .55; stroke-width: 1.4; }
.lc-tgt-2 { stroke-opacity: .85; }
.lc-inner { fill: none; stroke: var(--hc); stroke-opacity: .5; stroke-dasharray: 4 4; }
.lc-knob circle, .lc-knob path { fill: none; stroke: var(--hc-wh); stroke-width: 2; filter: drop-shadow(0 0 4px var(--hc)); }
.lc-knob .lc-knob-dot { fill: var(--hc); stroke: none; }
.lc.aiming .lc-knob circle, .lc.aiming .lc-knob path { stroke: #FFFFFF; filter: drop-shadow(0 0 7px var(--hc)); }
.lc.edge .lc-knob circle, .lc.edge .lc-knob path { stroke: var(--ha); filter: drop-shadow(0 0 8px var(--ha)); }
.lc-map circle { opacity: .9; }
.lc-map circle.target { stroke: #FFFFFF; stroke-width: 1.5; opacity: 1; }
.lc-map-well { fill: #000; stroke: var(--ha); stroke-width: 1.2; stroke-opacity: .8; }
.lc.empty .lc-disc { stroke-opacity: .45; filter: none; }

.lc-status-box { fill: #03070D; fill-opacity: .85; stroke: var(--hc); stroke-opacity: .75; stroke-width: calc(1.5px * var(--s, 1)); }
.lc-status-bar { fill: none; stroke: var(--ha); stroke-width: calc(2px * var(--s, 1)); }
.lc-status { fill: var(--hc); font: 700 calc(11px * var(--s, 1)) var(--mono); letter-spacing: .08em; text-anchor: end; }
.lc.empty .lc-status { fill: var(--ha); }

.lc-med-o { fill: #03070D; fill-opacity: .7; stroke: var(--ha); stroke-opacity: .45; stroke-width: 1.2; }
.lc-med-r { fill: none; stroke: var(--ha); stroke-width: 2.6; filter: drop-shadow(0 0 6px color-mix(in srgb, var(--ha) 70%, transparent)); }
.lc-cradle { fill: none; stroke: var(--ha); stroke-opacity: .6; stroke-dasharray: 5 4; animation: lc-cradle 2.4s ease-in-out infinite; }
@keyframes lc-cradle { 50% { stroke-opacity: .15; } }
.lc.slinging .lc-cradle { animation: none; stroke-opacity: .7; }
.lc.disabled .lc-med { opacity: .35; }
.lc-band { stroke: #FFE2A8; stroke-linecap: round; opacity: .95; }
.lc.slinging .lc-band { stroke: color-mix(in srgb, #FFE2A8, #FF8A2A calc(var(--pull) * 100%)); }

.lc-coin-body { fill: #2A1F08; stroke: var(--ha); stroke-width: 2.5; filter: drop-shadow(0 0 6px color-mix(in srgb, var(--ha) 60%, transparent)); }
.lc-coin-rim { fill: none; stroke: var(--ha); stroke-opacity: .6; stroke-dasharray: 2 3; }
.lc-coin-num { fill: #FFE7A8; font: 700 14px var(--mono); text-anchor: middle; }
.lc-coin.poly .lc-coin-body { fill: #0B1322; stroke: var(--ammo, var(--ha)); filter: drop-shadow(0 0 6px var(--ammo, var(--ha))); }
.lc-coin-shape { fill: none; stroke: var(--ammo, var(--ha)); stroke-width: 1.3; stroke-linejoin: round; stroke-linecap: round; }
.lc-coin.poly .lc-coin-num { font-size: 10px; fill: #FFFFFF; paint-order: stroke; stroke: #05080F; stroke-width: 3px; transform: translate(9px, 9px); }
.lc.reloading .lc-coin, .lc.reloading .lc-band { opacity: 0; }
.lc-coin.reload { animation: lc-reload .35s ease-out; }
@keyframes lc-reload { from { opacity: 0; transform-box: fill-box; } }
.lc.disabled .lc-coin, .lc.disabled .lc-band, .lc.disabled .lc-fork { opacity: .3; }

.lc-limit .lc-zone, .lc-limit path:not(.lc-tab) { transition: opacity .15s; }
.lc-limit path.lc-line-u, .lc-limit path.lc-line-l { fill: none; stroke-width: calc(2px * var(--s, 1)); stroke-dasharray: 10 6; opacity: .75; }
.lc.slinging .lc-line-u, .lc.slinging .lc-line-l, .lc.zone .lc-line-u, .lc.zone .lc-line-l { opacity: 1 !important; }
.lc-line-u { stroke: var(--ha); filter: drop-shadow(0 0 3px color-mix(in srgb, var(--ha) 60%, transparent)); }
.lc-line-l { stroke: var(--hc); stroke-opacity: .9; }
.lc-limit .lc-zone { fill: var(--hc); fill-opacity: .04; stroke: none; }
.lc.zone .lc-limit .lc-zone { fill-opacity: calc(.06 + var(--charge, 0) * .18); }
.lc-limit text { font: 700 calc(11px * var(--s, 1)) var(--mono); letter-spacing: .1em; }
.lc.narrow .lc-limit text { display: none; }
.lc-text-u { fill: var(--ha); }
.lc-text-l { fill: var(--hc); }
.lc.zone .lc-text-l { fill: var(--hc-wh); }
.lc.zone .lc-coin-body { stroke: color-mix(in srgb, var(--ha), var(--hc) calc(var(--charge, 0) * 100%)); fill: color-mix(in srgb, #2A1F08, #0E3B44 calc(var(--charge, 0) * 100%)); filter: drop-shadow(0 0 calc(6px + var(--charge, 0) * 12px) var(--hc)); }
.lc.zone .lc-band { stroke: #FF8A2A; }
.lc-orb { fill: #F2FEFF; opacity: 0; filter: drop-shadow(0 0 6px var(--hc)) drop-shadow(0 0 16px var(--hc)); }
.lc-orb.flash { animation: lc-orb .5s ease-out; }
@keyframes lc-orb { 0% { opacity: 1; r: 8; } 100% { opacity: 0; r: 30; } }
.lc.burst .lc-disc { animation: lc-burst .45s ease-out; }
@keyframes lc-burst { 0% { stroke: #FFFFFF; stroke-opacity: 1; filter: drop-shadow(0 0 22px var(--hc)); } }
.lc.dry { animation: lc-dry .35s; }
@keyframes lc-dry { 20%, 60% { translate: -6px 0; } 40%, 80% { translate: 6px 0; } }
.fs .ghint { bottom: calc(196px + env(safe-area-inset-bottom, 0px)); }

@media (max-width: 760px) {
  .ghud { bottom: calc(150px + env(safe-area-inset-bottom, 0px)); }
  .gperf { display: none; }
}
@media (prefers-reduced-motion: reduce) { .ck-charge, .lc-coin { transition: none; } .lc.dry, .lc.burst .lc-disc, .lc-orb.flash, .lc-coin.reload, .lc-cradle, .ck-cannon.charged .ck-base { animation: none; } }
/* v kokpitu: stav hry nahoře uprostřed, rohy patří dělům */
.fs .ghud { left: 50%; right: auto; bottom: auto; top: calc(58px + env(safe-area-inset-top, 0px)); transform: translateX(-50%); flex-direction: row; flex-wrap: wrap; justify-content: center; width: max-content; max-width: calc(100vw - 32px); }
.fs .ghud .hud-row { justify-content: center; }
.fs .gperf { right: 50%; transform: translateX(50%); bottom: auto; top: calc(96px + env(safe-area-inset-top, 0px)); opacity: .7; }
.fs .ghint { display: none; }
/* hlášky nahoře pod stavem hry, dole je odpalovací modul */
.fs .toast { top: calc(136px + env(safe-area-inset-top, 0px)); bottom: auto; }
.gpanel { z-index: 4; }
@media (max-width: 760px) { .fs .ghud { top: calc(96px + env(safe-area-inset-top, 0px)); } }
@media (max-width: 760px) { .fs .ghud .pill.next, .fs .ghud .pill:has(#best) { display: none; } .fs .ghud { top: calc(104px + env(safe-area-inset-top, 0px)); } }

/* ---------- Nastavení ---------- */
.gbtn-icon { display: inline-flex; align-items: center; gap: 6px; }
.gbtn-icon svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
.gsettings { position: absolute; top: 0; right: 0; bottom: 0; width: 360px; max-width: 100vw; z-index: 5; display: flex; flex-direction: column;
  background: #070B14f2; border-left: 1px solid #1C2640; backdrop-filter: blur(10px); box-shadow: -20px 0 50px -20px #000;
  padding-top: env(safe-area-inset-top, 0px); animation: st-in .22s ease-out; }
@keyframes st-in { from { transform: translateX(24px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .gsettings { animation: none; } }
.st-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px 10px; border-bottom: 1px solid #1C2640; }
.st-head h2 { margin: 0; font: 750 20px var(--display); color: #F1F5F9; letter-spacing: -0.01em; }
.st-close { width: 34px; height: 34px; padding: 0; display: grid; place-items: center; font-size: 15px; }
.st-body { overflow: auto; padding: 6px 16px calc(20px + env(safe-area-inset-bottom, 0px)); display: flex; flex-direction: column; gap: 6px; }
.st-group { display: flex; flex-direction: column; gap: 12px; padding: 14px 0; border-bottom: 1px solid #141C30; }
.st-group h3 { margin: 0; font: 500 11px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--hc); }
.st-note, .st-hint { margin: 0; font-size: 12px; color: #7C88A3; }
.st-row { display: grid; grid-template-columns: 1fr auto; gap: 6px 10px; align-items: center; }
.st-row label { font-size: 13.5px; color: #D6DDEB; }
.st-row output { font: 500 12px var(--mono); color: var(--ha); font-variant-numeric: tabular-nums; min-width: 60px; text-align: right; }
.st-row input[type=range] { grid-column: 1 / -1; width: 100%; margin: 0; height: 22px; background: transparent; -webkit-appearance: none; appearance: none; --p: 50%; }
.st-row input[type=range]::-webkit-slider-runnable-track { height: 4px; border-radius: 2px; background: linear-gradient(90deg, var(--hc) var(--p), #1C2640 var(--p)); }
.st-row input[type=range]::-moz-range-track { height: 4px; border-radius: 2px; background: #1C2640; }
.st-row input[type=range]::-moz-range-progress { height: 4px; border-radius: 2px; background: var(--hc); }
.st-row input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; margin-top: -7px; border-radius: 50%; background: var(--hc-wh); border: 2px solid var(--hc); box-shadow: 0 0 10px color-mix(in srgb, var(--hc) 53%, transparent); }
.st-row input[type=range]::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: var(--hc-wh); border: 2px solid var(--hc); box-shadow: 0 0 10px color-mix(in srgb, var(--hc) 53%, transparent); }
.st-row input[type=range]:focus-visible { outline: 2px solid var(--hc); outline-offset: 2px; border-radius: 4px; }
.st-toggle input { -webkit-appearance: none; appearance: none; width: 40px; height: 22px; border-radius: 11px; background: #1C2640; position: relative; cursor: pointer; transition: background .15s; margin: 0; }
.st-toggle input::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #9AA6BF; transition: transform .15s, background .15s; }
.st-toggle input:checked { background: color-mix(in srgb, var(--hc) 33%, transparent); }
.st-toggle input:checked::after { transform: translateX(18px); background: var(--hc-wh); box-shadow: 0 0 8px var(--hc); }
.st-toggle input:focus-visible { outline: 2px solid var(--hc); outline-offset: 2px; }
.st-hint { grid-column: 1 / -1; }
.st-reset { margin-top: 14px; align-self: flex-start; }
@media (max-width: 760px) { .gsettings { width: 100vw; border-left: 0; } .gbtn-icon { font-size: 0; gap: 0; padding: 7px 9px; } .gbtn-icon svg { width: 18px; height: 18px; } }

/* ---------- Editor tvaru plochy ---------- */
.pe { display: flex; flex-direction: column; gap: 6px; }
.pe-svg { width: 100%; height: auto; display: block; background: #0A1020; border: 1px solid #1C2640; border-radius: 8px; touch-action: none; user-select: none; }
.pe-grid line { stroke: #1A2440; stroke-width: 1; }
.pe-lbl { fill: #5E6A86; font: 9px var(--mono); }
.pe-axis { stroke: var(--ha); stroke-width: 1.2; stroke-dasharray: 4 4; }
.pe-hole { stroke: var(--ha); stroke-opacity: .45; stroke-width: 1; }
.pe-fill { fill: #1A3C8C; fill-opacity: .25; }
.pe-curve { fill: none; stroke: #4FD6C8; stroke-width: 2.2; stroke-linejoin: round; }
.pe-pt { fill: #0A1020; stroke: var(--hc); stroke-width: 2.4; cursor: grab; }
.pe-pt:hover, .pe-pt.sel { fill: color-mix(in srgb, var(--hc) 20%, transparent); stroke: var(--hc-wh); }
.pe-pt:focus-visible { outline: none; stroke: var(--ha); }
.pe-pt.fixed { stroke-dasharray: 3 2; }
.pe-horizon { cursor: ns-resize; }
.pe-horizon line { stroke: #FF7A45; stroke-width: 1.8; stroke-dasharray: 6 4; }
.pe-hz-hit { fill: transparent; }
.pe-hz-lbl { fill: #FF9A6E; font: 9.5px var(--mono); pointer-events: none; }
.pe-readout { font: 11px var(--mono); color: var(--ha); min-height: 14px; }

/* ---------- Radar (radar.js): minimapa vlevo od odpalovacího modulu, kreslí se celá do canvasu ve stylu modulu ---------- */
.hud-radar { position: absolute; z-index: 2; pointer-events: none; }
.fs .hud-radar canvas { position: relative; inset: auto; display: block; z-index: auto; cursor: default; touch-action: auto; }

/* nastavení: táhlo s více body (rozdělení pravděpodobností) */
.st-split { display: block; }
.st-split-track { position: relative; height: 14px; margin: 12px 8px 8px; border-radius: 7px; background: #0B1322; touch-action: none; }
.st-split-seg { position: absolute; top: 0; bottom: 0; opacity: .8; }
.st-split-seg:first-child { border-radius: 7px 0 0 7px; }
.st-split-seg.last { border-radius: 0 7px 7px 0; }
.st-split-handle { position: absolute; top: 50%; width: 18px; height: 24px; margin: -12px 0 0 -9px; border-radius: 5px; background: var(--hc-wh); border: 2px solid #05080F; box-shadow: 0 0 0 1px var(--hc), 0 0 8px color-mix(in srgb, var(--hc) 60%, transparent); cursor: ew-resize; }
.st-split-handle.drag, .st-split-handle:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--ha), 0 0 12px color-mix(in srgb, var(--ha) 70%, transparent); }
.st-split-legend { display: flex; flex-wrap: wrap; gap: 4px 12px; font: 500 11px var(--mono); color: #CBD5E1; }
.st-split-legend i { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 5px; vertical-align: 0; }
.st-split-legend b { color: var(--ha); font-weight: 600; }

/* ---------- Zásobník (magazine.js): vpravo od odpalovacího modulu, styl jako radar ---------- */
.hud-mag { position: absolute; z-index: 2; pointer-events: none; }
.fs .hud-mag canvas { position: relative; inset: auto; display: block; z-index: auto; cursor: default; touch-action: auto; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Tokeny (tokens.js): sloupec u pravého okraje ---------- */
.hud-tokens { position: absolute; z-index: 2; pointer-events: none; }
.hud-census { position: absolute; z-index: 2; pointer-events: none; }
.fs .hud-census canvas { position: relative; inset: auto; display: block; z-index: auto; cursor: default; touch-action: auto; }
.fs .hud-tokens canvas { position: relative; inset: auto; display: block; z-index: auto; cursor: default; touch-action: auto; }
/* na náboj v praku nejsou tokeny */
.lc.broke .lc-coin { opacity: .45; filter: grayscale(.7); }

/* záblesk přes obrazovku při vzniku trhlin */
.rift-flash { position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0;
  background: radial-gradient(ellipse at 50% 55%, rgba(255, 255, 255, .55), rgba(180, 92, 255, .25) 45%, rgba(255, 106, 42, 0) 75%); }
.rift-flash.on { animation: rift-flash .7s ease-out; }
@keyframes rift-flash { 0% { opacity: 1; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .rift-flash.on { animation-duration: .2s; } }

/* tlačítko hudby: trojúhelník = přehrát, čtverec = zastavit */
#b-music svg { fill: currentColor; stroke: none; }
#b-music .ic-stop { display: none; }
#b-music.playing .ic-play { display: none; }
#b-music.playing .ic-stop { display: inline; }
#b-music.playing { border-color: var(--hc); color: var(--hc-hi); }
#b-music.err { opacity: .5; }

/* tlačítko opravy segmentu pod sloupcem tokenů (styl HUD panelů) */
.tok-repair { pointer-events: auto; display: flex; flex-direction: column; align-items: center; gap: 1px; width: 100%; height: 62px; margin-top: 8px;
  font: 700 12px var(--mono); letter-spacing: .1em; color: #05080F; cursor: pointer;
  background: linear-gradient(180deg, var(--hc-hi), var(--hc)); border: 0; justify-content: center;
  clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px);
  filter: drop-shadow(0 0 8px color-mix(in srgb, var(--hc) 60%, transparent)); }
.tok-repair span { font-size: 9px; font-weight: 600; }
.tok-repair i { font-style: normal; font-size: 9px; font-weight: 600; opacity: .75; }
.tok-repair:hover:not(:disabled) { background: linear-gradient(180deg, #FFFFFF, #9FFCFF); }
.tok-repair:active:not(:disabled) { transform: translateY(1px); }
.tok-repair:focus-visible { outline: 2px solid var(--ha); outline-offset: 3px; }
.tok-repair:disabled { cursor: not-allowed; color: color-mix(in srgb, var(--hc) 55%, transparent); background: rgba(5, 8, 15, .7); filter: none; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--hc) 35%, transparent); }
.tok-repair.busy { animation: tok-busy .6s ease-in-out infinite alternate; }
@keyframes tok-busy { to { filter: drop-shadow(0 0 14px var(--hc)); } }

/* editor profilu: obrys tělesa 32 na ose hrdla a jeho poloměr */
.pe-obj { fill: color-mix(in srgb, var(--oc) 22%, transparent); stroke: var(--oc); stroke-width: 1.5; pointer-events: none; }
.pe-obj-r { stroke: var(--oc); stroke-width: 1; stroke-dasharray: 3 3; opacity: .7; pointer-events: none; }
.pe-obj-lbl { fill: var(--oc); font: 700 10px var(--mono); pointer-events: none; }
.pe-zoom-bg { fill: #05080F; stroke: #2A3654; }
.pe-zoom-fill { fill: #13204A; opacity: .8; }
.pe-zoom-curve { fill: none; stroke: #5EEAD4; stroke-width: 1.5; }
.pe-zoom-lid { stroke: var(--ha); stroke-width: 1.5; stroke-dasharray: 3 2; }
.pe-zoom-note { fill: var(--oc); font: 600 8.5px var(--mono); pointer-events: none; }

/* nastavení po sekcích (akordeon) */
.st-group.st-acc { padding: 0; gap: 0; }
.st-sec-head { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 13px 2px; background: none; border: 0; cursor: pointer;
  font: 500 11px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: #9AA6C2; text-align: left; }
.st-sec-head:hover { color: var(--hc-hi); }
.st-sec-head:focus-visible { outline: 2px solid var(--hc); outline-offset: 2px; border-radius: 4px; }
.st-sec-head svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.6; transition: transform .2s; }
.st-acc.open .st-sec-head { color: var(--hc); }
.st-acc.open .st-sec-head svg { transform: rotate(180deg); }
.st-content { display: flex; flex-direction: column; gap: 12px; padding: 2px 0 16px; }
@media (prefers-reduced-motion: reduce) { .st-sec-head svg { transition: none; } }

/* ---------- DEGEN MODE (degen.js): přepínač nad opravou a panel NEAR peněženky ---------- */
.tok-degen { margin-top: 8px; }
.degen-btn { pointer-events: auto; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; width: 100%; height: 42px;
  font: 700 10px var(--mono); letter-spacing: .1em; cursor: pointer; color: var(--ha); background: rgba(5, 8, 15, .75);
  border: 0; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ha) 50%, transparent);
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px); }
.degen-btn span { font-size: 12px; color: #94A3B8; }
.degen-btn:hover { box-shadow: inset 0 0 0 1px var(--ha); }
.degen-btn:focus-visible { outline: 2px solid var(--ha); outline-offset: 3px; }
.degen-btn.on { color: #05080F; background: linear-gradient(180deg, #FFE7A8, #FF9A2E); box-shadow: none; filter: drop-shadow(0 0 8px rgba(255, 154, 46, .7)); }
.degen-btn.on span { color: #05080F; }
.degen-panel { position: fixed; z-index: 6; width: 240px; padding: 12px 14px; color: #E6E9F2; font: 500 12px var(--body);
  background: rgba(5, 8, 15, .92); border: 1px solid color-mix(in srgb, var(--ha) 60%, transparent);
  clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px);
  filter: drop-shadow(0 0 10px rgba(255, 154, 46, .35)); }
.dg-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 8px; font: 700 13px var(--mono); letter-spacing: .12em; color: var(--ha); }
.dg-net { font-size: 9px; padding: 2px 6px; border: 1px solid #7CFFB2; color: #7CFFB2; }
.dg-body > div { margin: 4px 0; overflow-wrap: anywhere; }
.dg-label { display: block; font: 600 9px var(--mono); letter-spacing: .1em; color: #7C88A3; }
.dg-id { color: var(--hc); font-family: var(--mono); }
.dg-near, .dg-ftv { font: 700 16px var(--mono); color: #FFFFFF; }
.dg-note { margin: 8px 0 0; font-size: 11px; color: #7C88A3; }
.dg-actions { display: flex; gap: 6px; margin-top: 10px; }
.dg-actions button { flex: 1; font: 600 11px var(--mono); letter-spacing: .06em; padding: 8px; cursor: pointer; border: 0; color: #05080F; background: linear-gradient(180deg, #FFE7A8, #FF9A2E); }
.dg-actions .dg-disconnect { color: var(--ha); background: transparent; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ha) 50%, transparent); }
.dg-actions button:focus-visible { outline: 2px solid var(--hc); outline-offset: 2px; }

/* ---------- Placená verze (paywall.js) ---------- */
.pw-backdrop { position: fixed; inset: 0; z-index: 20; display: grid; place-items: center; padding: 16px; background: rgba(2, 4, 10, .66); backdrop-filter: blur(3px); }
.pw { position: relative; width: min(420px, 100%); padding: 22px 22px 18px; color: #E6E9F2; font: 500 13px var(--body);
  background: linear-gradient(170deg, rgba(14, 20, 34, .97), rgba(5, 8, 15, .97)); border: 1px solid color-mix(in srgb, var(--ha) 60%, transparent);
  clip-path: polygon(18px 0, 100% 0, 100% calc(100% - 18px), calc(100% - 18px) 100%, 0 100%, 0 18px);
  filter: drop-shadow(0 0 18px rgba(255, 154, 46, .3)); }
.pw-x { position: absolute; top: 10px; right: 12px; border: 0; background: none; color: #94A3B8; font-size: 16px; cursor: pointer; }
.pw-x:hover { color: #FFF; }
.pw-kicker { font: 700 10px var(--mono); letter-spacing: .16em; color: var(--ha); }
.pw h2 { margin: 4px 0 8px; font: 750 22px var(--display, var(--body)); color: #F1F5F9; }
.pw p { margin: 0 0 12px; color: #A9B4CC; line-height: 1.45; }
.pw-price { margin: 4px 0 14px; font-family: var(--mono); color: var(--ha); }
.pw-price b { font-size: 30px; color: #FFF; }
.pw-price em { font-style: normal; font-size: 10px; padding: 2px 6px; margin-left: 6px; border: 1px solid #7CFFB2; color: #7CFFB2; vertical-align: 4px; }
.pw-opts { display: flex; flex-direction: column; gap: 8px; }
.pw-opts button { font: 700 12px var(--mono); letter-spacing: .06em; padding: 12px; border: 0; cursor: pointer; }
.pw-near { color: #05080F; background: linear-gradient(180deg, #FFE7A8, #FF9A2E); }
.pw-play { color: var(--hc-hi); background: transparent; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--hc) 50%, transparent); }
.pw-opts button:disabled { opacity: .45; cursor: not-allowed; }
.pw-opts button:focus-visible, .pw-x:focus-visible { outline: 2px solid var(--hc); outline-offset: 2px; }
.pw-status { min-height: 1.2em; margin: 10px 0 4px !important; color: var(--hc) !important; }
.pw-status.err { color: #FFB86B !important; }
.pw-fine { font-size: 11px; color: #64748B !important; margin: 0 !important; overflow-wrap: anywhere; }

/* ---------- Bot (bot.js): panel vlevo ---------- */
.bot-panel { position: absolute; z-index: 4; left: 10px; top: 170px; width: 230px; padding: 12px 14px; color: #E6E9F2; font: 500 12px var(--body);
  background: rgba(5, 8, 15, .88); border: 1px solid color-mix(in srgb, var(--hc) 50%, transparent);
  clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px); }
.bot-panel.running { border-color: #7CFFB2; }
.bot-head { display: flex; justify-content: space-between; align-items: baseline; font: 700 12px var(--mono); letter-spacing: .12em; color: var(--hc); }
.bot-run { font-size: 9px; padding: 2px 6px; border: 1px solid #64748B; color: #94A3B8; }
.bot-panel.running .bot-run { border-color: #7CFFB2; color: #7CFFB2; }
.bot-status { margin: 6px 0 8px; min-height: 1.3em; font: 500 11px var(--mono); color: var(--ha); }
.bot-row { display: flex; align-items: center; gap: 6px; margin: 6px 0; font-size: 12px; }
.bot-row select { background: #0B1322; color: #E6E9F2; border: 1px solid #2A3654; padding: 2px 4px; }
.bot-toggle { flex: 1; font: 700 12px var(--mono); padding: 9px; border: 0; cursor: pointer; color: #05080F; background: linear-gradient(180deg, var(--hc-hi), var(--hc)); }
.bot-panel.running .bot-toggle { background: linear-gradient(180deg, #FFE7A8, #FF9A2E); }
.bot-btns button { flex: 1; font: 600 10px var(--mono); padding: 6px; cursor: pointer; color: var(--hc-hi); background: transparent; border: 1px solid color-mix(in srgb, var(--hc) 40%, transparent); }
.bot-stats dl { display: grid; grid-template-columns: auto auto; gap: 2px 10px; margin: 8px 0 4px; font: 500 11px var(--mono); }
.bot-stats dt { color: #7C88A3; } .bot-stats dd { margin: 0; color: #FFF; text-align: right; }
.bot-stats ul { margin: 4px 0 0; padding-left: 16px; font: 500 10.5px var(--mono); color: #A9B4CC; }
.bot-stats em { color: #FFB86B; font-style: normal; }
.bot-stats p { margin: 6px 0; color: #7C88A3; }
.bot-panel button:focus-visible, .bot-panel select:focus-visible, .bot-panel input:focus-visible { outline: 2px solid var(--ha); outline-offset: 2px; }
@media (max-width: 760px) { .bot-panel { top: 210px; width: 200px; } }

/* ---------- Téma „kokpit“: modrošedá kabina (masivní rám, displeje, jantarové kontrolky) ---------- */
.ckf-body { stroke: none; }
.ckf-edge { fill: none; stroke: #2E5566; stroke-width: 1.4; stroke-opacity: .9; }
.ckf-amber { fill: var(--ha); filter: drop-shadow(0 0 4px var(--ha)); }
.ckf-teal { fill: var(--hc); filter: drop-shadow(0 0 4px var(--hc)); }
.ckf-lamp { fill: #CFE6EE; opacity: .85; }
.ckf-screen { fill: #0F3442; stroke: color-mix(in srgb, var(--hc) 70%, transparent); stroke-width: 1; }
.ckf-scrline { stroke: var(--hc); stroke-width: 1.4; opacity: .75; }
/* barevné ladění 3D scény: tlumené barvy, ocelově modrý nádech, opar a vinětace */
.scene-grade { position: absolute; inset: 0; z-index: 0; pointer-events: none; display: none; }
body.theme-kokpit .scene-grade { display: block;
  background:
    radial-gradient(ellipse at 50% 45%, transparent 45%, rgba(3, 8, 12, .55) 100%),
    linear-gradient(180deg, rgba(120, 160, 180, .16), rgba(40, 80, 100, .06) 45%, rgba(5, 12, 16, .25)); }
body.theme-kokpit .fs > canvas#c { filter: saturate(.62) hue-rotate(-8deg) brightness(.93) contrast(1.06); }
/* horní lišta a panely v tónu kabiny */
body.theme-kokpit .gbtn { background: rgba(10, 22, 30, .82); border-color: #24414E; color: #CFE3EA; }
body.theme-kokpit .gbtn:hover, body.theme-kokpit .gbtn[aria-expanded="true"] { border-color: var(--hc); background: rgba(16, 36, 46, .9); }
body.theme-kokpit .fs .pill { background: rgba(10, 22, 30, .78); border-color: #24414E; }
/* SVG přechody modulu podle tématu */
#lc-arm stop:first-child, #lc-disc stop:first-child { stop-color: var(--hc); }
#lc-arm stop:last-child { stop-color: var(--ha); }
.ckf-edge2 { fill: none; stroke: #1B3542; stroke-width: 1; stroke-dasharray: 2 6; }
.ckf-strip { fill: none; stroke: var(--ha); stroke-width: 4; stroke-linecap: round; filter: drop-shadow(0 0 6px var(--ha)) drop-shadow(0 0 14px color-mix(in srgb, var(--ha) 60%, transparent)); opacity: .9; }
/* úzký displej: zkrácená tlačítka v liště, aby se vešla na jeden řádek */
@media (max-width: 520px) {
  #b-fs, #b-panel { font-size: 0; padding: 7px 10px; }
  #b-fs::after { content: '⛶'; font-size: 15px; }
  #b-panel::after { content: '☰'; font-size: 14px; }
}
/* obtížnost: pevné parametry (EASY/MEDIUM/HARD) a výběr ze seznamu */
.st-locked .st-sec-head span, .st-locked > h3 { color: #9AA6BF; }
.st-locked-note { color: var(--ha); }
.st-fixed { opacity: .55; }
.st-fixed input, .st-fixed select { cursor: not-allowed; }
.st-select { font: 500 12.5px var(--mono); color: #E6E9F2; background: #0B1322; border: 1px solid #24314D; border-radius: 8px; padding: 6px 8px; }
.st-select:focus-visible { outline: 2px solid var(--hc); outline-offset: 2px; }
.pill.mode b { color: var(--ha); letter-spacing: .06em; }
/* AI aréna ve hře: panel s průběhem bota / benchmarku */
.arena-panel { --ac: #7DF9FF; position: absolute; left: 14px; top: 116px; z-index: 30; width: min(320px, calc(100% - 28px)); padding: 12px 14px;
  border-radius: 12px; background: rgba(6, 10, 18, .88); border: 1px solid color-mix(in srgb, var(--ac) 50%, transparent);
  box-shadow: 0 0 24px color-mix(in srgb, var(--ac) 20%, transparent); font: 500 11.5px/1.5 var(--mono); color: #CBD5E1; backdrop-filter: blur(4px); }
.arena-panel .ar-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.arena-panel .ar-head i { width: 9px; height: 9px; border-radius: 50%; background: var(--ac); box-shadow: 0 0 8px var(--ac); }
.arena-panel .ar-head b { font: 700 13px var(--mono); color: #FFF; }
.arena-panel .ar-mode { margin-left: auto; font-size: 9.5px; letter-spacing: .12em; color: var(--ac); }
.arena-panel .ar-line { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.arena-panel .ar-act { color: #8C98B3; }
.arena-panel .ar-bar { height: 4px; margin: 8px 0; border-radius: 2px; background: #1C2640; overflow: hidden; }
.arena-panel .ar-bar span { display: block; height: 100%; width: 0; background: var(--ac); transition: width .3s; }
.arena-panel .ar-btns { display: flex; gap: 8px; align-items: center; }
.arena-panel .ar-btns a, .arena-panel .ar-btns button { font: 700 10.5px var(--mono); letter-spacing: .06em; padding: 6px 10px; border-radius: 7px; cursor: pointer; text-decoration: none;
  color: var(--ac); background: transparent; border: 1px solid color-mix(in srgb, var(--ac) 50%, transparent); }
.arena-panel .ar-result { margin-top: 8px; padding-top: 8px; border-top: 1px solid #1C2640; color: #E6E9F2; }
.arena-panel .ar-result b { color: #FFD66B; }
.arena-panel .ar-result ul { margin: 4px 0 0; padding-left: 16px; color: #A9B4CC; }
.arena-panel.err { border-color: #FFB86B; }
/* DEMO: hra v náhledu na úvodní obrazovce (play/?demo=1 v iframe) – jen plocha, děla a prak, bez HUD a bez vstupu */
body.demo .gbar, body.demo .ghud, body.demo .ghint, body.demo .gperf, body.demo .toast, body.demo .status,
body.demo .gpanel, body.demo .gsettings, body.demo .over, body.demo .hud-radar, body.demo .hud-mag,
body.demo .bot-panel, body.demo .arena-panel, body.demo .pw-backdrop,
body.demo .degen-panel, body.demo .degen-btn, body.demo .tok-degen, body.demo .tok-repair { display: none !important; }   /* sloupec tokenů zůstává */
body.demo, body.demo * { pointer-events: none !important; cursor: default !important; }
/* kompaktní děla (mobil, náhled): jen hlaveň z rohu, bez kruhových základen a oblouků nabití */
.ck-pivot { display: none; fill: #070B14; fill-opacity: .85; stroke: var(--hc); stroke-opacity: .6; stroke-width: 1.5; }
.cockpit.compact .ck-pivot { display: inline; }
.cockpit.compact .ck-base, .cockpit.compact .ck-base2, .cockpit.compact .ck-halo, .cockpit.compact .ck-clamp, .cockpit.compact .ck-hub, .cockpit.compact .ck-hub-dot, .cockpit.compact .ck-charge-bg, .cockpit.compact .ck-charge { display: none; }
.tok-repair i { white-space: nowrap; letter-spacing: 0; }

/* ---------- jazyk: bloky jen pro jeden jazyk, přepínač CZ | EN ---------- */
html[lang="en"] [data-lang="cs"], html:not([lang="en"]) [data-lang="en"] { display: none !important; }
.lang-switch { display: inline-flex; gap: 2px; padding: 2px; border: 1px solid rgba(125, 249, 255, .3); border-radius: 999px; background: rgba(5, 8, 15, .6); }
.lang-switch button { font: 700 10px var(--mono, monospace); letter-spacing: .1em; padding: 4px 9px; border: 0; border-radius: 999px; cursor: pointer; color: #8C98B3; background: transparent; }
.lang-switch button[aria-pressed="true"] { color: #05080F; background: #7DF9FF; }
.lang-switch button:hover:not([aria-pressed="true"]) { color: #E6F9FF; }
.lang-switch button:focus-visible { outline: 2px solid #FFD66B; outline-offset: 1px; }
.shell { position: relative; }
.shell > .lang-switch { position: absolute; top: 14px; right: 16px; z-index: 5; }
@media (max-width: 860px) { .shell > .lang-switch { top: 8px; right: 10px; } }

/* hra: přepínač jazyka v liště; na úzkém displeji jen v panelu Nastavení (v liště by odsunul tlačítka přes HUD) */
.st-head .st-lang { margin-left: auto; margin-right: 10px; }
@media (max-width: 760px) { .gactions .lang-switch { display: none; } }
@media (min-width: 761px) { .st-head .st-lang { display: none; } }

/* ==========================================================================
   Styl „HUD stanice“ (podle nového praku): zkosené rohy vlevo nahoře a vpravo dole,
   tenká svítící azurová hrana (i na zkosení), tmavý průsvitný podklad, krátká oranžová značka v rohu.
   --c = velikost zkosení, --bc = barva hrany, --bg = podklad.
   ========================================================================== */
:root { --st-bg: rgba(3, 7, 13, .84); --st-edge: color-mix(in srgb, var(--hc) 70%, transparent); }
body.game-page .gbtn, body.game-page .fs .pill, body.game-page .gpanel, body.game-page .fs .over-card, body.game-page .fs .toast,
body.game-page .degen-panel, body.game-page .lang-switch {
  --c: 8px; --bc: var(--st-edge); --bg: var(--st-bg);
  border: 1px solid var(--bc); border-radius: 0; background-origin: border-box;
  background:
    linear-gradient(135deg, transparent calc(var(--c) * .7071 - .8px), var(--bc) 0 calc(var(--c) * .7071 + .6px), transparent 0),
    linear-gradient(315deg, transparent calc(var(--c) * .7071 - .8px), var(--bc) 0 calc(var(--c) * .7071 + .6px), transparent 0),
    var(--bg);
  clip-path: polygon(var(--c) 0, 100% 0, 100% calc(100% - var(--c)), calc(100% - var(--c)) 100%, 0 100%, 0 var(--c));
  box-shadow: inset 0 0 14px color-mix(in srgb, var(--hc) 10%, transparent);
}
/* tlačítka v liště: neonový mono popisek */
body.game-page .gbtn { font: 600 11.5px var(--mono); letter-spacing: .07em; text-transform: uppercase; color: var(--hc-wh); padding: 8px 12px; backdrop-filter: blur(6px); }
body.game-page .gbtn:hover, body.game-page .gbtn[aria-expanded="true"] { --bc: var(--hc-hi); --bg: rgba(10, 34, 48, .9); color: #FFFFFF; }
body.game-page .gbtn[aria-expanded="true"] { box-shadow: inset 0 -2px 0 var(--ha), inset 0 0 16px color-mix(in srgb, var(--hc) 22%, transparent); }
body.game-page .gbtn.primary { --bc: var(--ha); --bg: linear-gradient(180deg, #FFE7A8, #FFB03A); color: #05080F; }
body.game-page .gbtn.primary:hover { --bg: linear-gradient(180deg, #FFF3D0, #FFC25E); color: #05080F; }
body.game-page .gbtn-icon svg { stroke: var(--hc); }
#b-music.playing { --bc: var(--ha); color: var(--ha); }
/* lišta stavu hry */
body.game-page .fs .pill { --c: 6px; --bc: color-mix(in srgb, var(--hc) 40%, transparent); --bg: rgba(3, 7, 13, .78); font-size: 11.5px; letter-spacing: .03em; color: #CFE7EE; padding: 5px 9px; }
body.game-page .fs .pill b { color: #FFFFFF; }
body.game-page .fs .pill.mode, body.game-page .fs .pill.goal { --bc: color-mix(in srgb, var(--ha) 55%, transparent); }
body.game-page .lang-switch { --c: 6px; padding: 2px; }
body.game-page .lang-switch button { border-radius: 0; clip-path: polygon(4px 0, 100% 0, 100% calc(100% - 4px), calc(100% - 4px) 100%, 0 100%, 0 4px); }
body.game-page .lang-switch button[aria-pressed="true"] { background: var(--hc); }
/* panel Recepty / nápověda */
body.game-page .gpanel { --c: 14px; --bg: rgba(3, 7, 13, .9); padding: 18px 16px 16px; }
body.game-page .gpanel::before { content: ''; position: absolute; left: 22px; top: 0; width: 32px; height: 2px; background: var(--ha); }
body.game-page .gpanel .eyebrow { color: var(--ha); font-family: var(--mono); letter-spacing: .12em; }
body.game-page .gpanel details { border-top-color: color-mix(in srgb, var(--hc) 25%, transparent); }
body.game-page .gpanel .recipes li.on { background: rgba(10, 34, 48, .9); box-shadow: inset 2px 0 0 var(--hc); }
/* konec hry a hlášky */
body.game-page .fs .over { background: rgba(2, 5, 9, .62); }
body.game-page .fs .over-card { --c: 18px; --bg: rgba(3, 7, 13, .94); padding: 24px 26px 22px; position: relative; }
body.game-page .fs .over-card::before { content: ''; position: absolute; left: 26px; top: 0; width: 40px; height: 2px; background: var(--ha); }
body.game-page .fs .over-card h2, body.game-page .fs .over-card h3 { font-family: var(--mono); text-transform: uppercase; letter-spacing: .1em; color: var(--hc-hi); }
body.game-page .fs .over-card dt { font: 600 11px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: #8FB4C0; }
body.game-page .fs .over-card dd { font-family: var(--mono); color: #FFFFFF; }
body.game-page .fs .toast { --c: 8px; --bc: var(--ha); font-family: var(--mono); color: #FFF3D0; }
body.game-page .degen-panel { --c: 14px; --bc: color-mix(in srgb, var(--ha) 70%, transparent); filter: none; }

/* nastavení: vysouvací panel se zkoseným levým horním rohem a hlavičkou jako štítek PLNÝ NÁTAH */
body.game-page .gsettings { background: rgba(3, 7, 13, .95); border-left: 1px solid var(--st-edge); box-shadow: -20px 0 50px -20px #000, inset 1px 0 0 color-mix(in srgb, var(--hc) 25%, transparent);
  clip-path: polygon(18px 0, 100% 0, 100% 100%, 0 100%, 0 18px); }
body.game-page .gsettings::before { content: ''; position: absolute; left: 0; top: 0; width: 26px; height: 26px; pointer-events: none;
  background: linear-gradient(135deg, transparent 12px, var(--hc) 12px 13.4px, transparent 13.4px); }
body.game-page .st-head { border-bottom: 1px solid color-mix(in srgb, var(--hc) 35%, transparent); position: relative; padding: 16px 16px 12px 24px; }
body.game-page .st-head::after { content: ''; position: absolute; left: 24px; bottom: -1px; width: 36px; height: 2px; background: var(--ha); }
body.game-page .st-head h2 { font: 700 15px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--hc-wh); text-shadow: 0 0 10px color-mix(in srgb, var(--hc) 45%, transparent); }
body.game-page .st-group { border-bottom-color: color-mix(in srgb, var(--hc) 14%, transparent); }
body.game-page .st-sec-head { color: #8FB4C0; }
body.game-page .st-acc.open .st-sec-head { color: var(--ha); }
body.game-page .st-acc.open .st-sec-head::before { content: ''; display: inline-block; width: 3px; height: 12px; margin-right: 8px; background: var(--ha); vertical-align: -2px; }
body.game-page .st-row input[type=range]::-webkit-slider-runnable-track { height: 4px; border-radius: 0; background: linear-gradient(90deg, var(--hc) var(--p), rgba(125, 249, 255, .14) var(--p)); }
body.game-page .st-row input[type=range]::-moz-range-track { border-radius: 0; background: rgba(125, 249, 255, .14); }
body.game-page .st-row input[type=range]::-moz-range-progress { height: 4px; background: var(--hc); }
body.game-page .st-row input[type=range]::-webkit-slider-thumb { border-radius: 50%; background: radial-gradient(circle, var(--ha) 0 3px, #061018 3.6px); border: 2px solid var(--hc-hi); }
body.game-page .st-row input[type=range]::-moz-range-thumb { background: radial-gradient(circle, var(--ha) 0 3px, #061018 3.6px); border: 2px solid var(--hc-hi); }
/* úzký displej: tlačítka v liště menší, ikonová bez popisku (jako dřív) */
@media (max-width: 760px) {
  body.game-page .gbtn { font-size: 10.5px; letter-spacing: .04em; padding: 7px 9px; }
  body.game-page .gbtn-icon { font-size: 0; gap: 0; }
}
@media (max-width: 520px) { body.game-page #b-fs, body.game-page #b-panel { font-size: 0; padding: 7px 10px; } }
.arena-panel .ar-btns { flex-wrap: wrap; }
/* stav hry, výkon a hlášky pod skutečnou výškou horní lišty (ta se na tabletu na výšku zalomí) */
.fs .ghud { top: calc(var(--gbar-b, 58px) + 4px) !important; }
.fs .gperf { top: calc(var(--hud-b, 96px) + 4px) !important; }
.fs .toast { top: calc(var(--hud-b, 96px) + 40px) !important; }

/* ---------- Minimalizace HUD panelů (hudmin.js): pomlčka nahoře, lišta dole / jazýček u okraje ---------- */
.hud-min { position: absolute; z-index: 3; top: 5px; width: 24px; height: 16px; padding: 0; border: 0; background: transparent; cursor: pointer; pointer-events: auto; }
.hud-min::before { content: ''; position: absolute; left: 6px; right: 6px; top: 7px; height: 2px; border-radius: 1px; background: var(--hc, #7DF9FF); box-shadow: 0 0 6px var(--hc, #7DF9FF); }
.hud-min:hover::before, .hud-min:focus-visible::before { background: #FFFFFF; box-shadow: 0 0 9px var(--hc, #7DF9FF); }
.hud-min:focus-visible { outline: 1px solid var(--ha, #FFD66B); outline-offset: 1px; }
.hud-radar .hud-min { right: 18px; top: 4px; }
.hud-mag .hud-min { left: 18px; top: 4px; }
.hud-tokens .hud-min { right: 12px; top: 3px; }
.hud-census .hud-min { left: 12px; top: 6px; }
.hud-tab { display: none; pointer-events: auto; cursor: pointer; align-items: center; justify-content: center; gap: 7px; padding: 0;
  font: 700 10px var(--mono, monospace); letter-spacing: .14em; color: var(--ha, #FFD66B);
  background: linear-gradient(135deg, transparent 6px, color-mix(in srgb, var(--hc, #7DF9FF) 70%, transparent) 6px 7.4px, transparent 7.4px), rgba(3, 7, 13, .82);
  border: 1px solid color-mix(in srgb, var(--hc, #7DF9FF) 70%, transparent);
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
  box-shadow: inset 0 0 12px color-mix(in srgb, var(--hc, #7DF9FF) 12%, transparent); }
.hud-tab:hover, .hud-tab:focus-visible { color: #FFFFFF; background-color: rgba(10, 34, 48, .9); outline: none; }
.hud-tab i { width: 7px; height: 7px; border: solid var(--hc, #7DF9FF); border-width: 2px 2px 0 0; flex: none; }
.hud-is-min > canvas { display: none !important; }
.hud-is-min > .hud-min { display: none; }
.hud-is-min > .hud-tab { display: flex; }
/* spodní panely: lišta u spodní hrany */
.hud-side-bottom > .hud-tab { width: 100%; height: 26px; }
.hud-side-bottom > .hud-tab i { transform: rotate(-45deg) translate(-1px, 1px); }
/* boční panely: svislý jazýček u okraje */
.hud-side-left > .hud-tab, .hud-side-right > .hud-tab { flex-direction: column; width: 26px; height: 150px; }
.hud-side-left > .hud-tab span, .hud-side-right > .hud-tab span { writing-mode: vertical-rl; text-orientation: mixed; }
.hud-side-left > .hud-tab { margin-left: -10px; }
.hud-side-left > .hud-tab i { transform: rotate(45deg) translate(-1px, 1px); }
.hud-side-right > .hud-tab { margin-left: auto; margin-right: -10px; }
.hud-side-right > .hud-tab i { transform: rotate(-135deg) translate(-1px, 1px); }
body.demo .hud-min, body.demo .hud-tab { display: none !important; }

/* ---------- Řez černou dírou (section.js): vlevo od radaru u spodní hrany ---------- */
.hud-section { position: absolute; z-index: 2; pointer-events: none; }
.fs .hud-section canvas { position: relative; inset: auto; display: block; z-index: auto; cursor: default; touch-action: auto; }
.hud-section .hud-min { right: 18px; top: 4px; }
body.demo .hud-section { display: none !important; }

/* ---------- Stav hry (statuspanel.js): vpravo od zásobníku; místo štítků nahoře a FPS ---------- */
.hud-status { position: absolute; z-index: 2; pointer-events: none; }
.fs .hud-status canvas { position: relative; inset: auto; display: block; z-index: auto; cursor: default; touch-action: auto; }
.hud-status .hud-min { left: 18px; top: 4px; }
body.hud-status-on .ghud, body.hud-status-on .gperf { display: none !important; }
.hs-toggle { position: absolute; left: 13px; right: 13px; bottom: 11px; height: 20px; display: flex; align-items: center; justify-content: space-between; gap: 6px;
  padding: 0 8px; pointer-events: auto; cursor: pointer; font: 600 8.5px var(--mono, monospace); letter-spacing: .1em; color: color-mix(in srgb, var(--hc, #7DF9FF) 85%, #fff);
  background: rgba(3, 7, 13, .7); border: 1px solid color-mix(in srgb, var(--hc, #7DF9FF) 45%, transparent);
  clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px); }
.hs-toggle b { font-weight: 700; color: #94A3B8; }
.hs-toggle.on b { color: #7CFFB2; text-shadow: 0 0 6px rgba(124, 255, 178, .6); }
.hs-toggle:hover, .hs-toggle:focus-visible { background: rgba(10, 34, 48, .9); outline: none; border-color: var(--hc, #7DF9FF); }
.hud-is-min > .hs-toggle { display: none; }
body.demo .hud-status { display: none !important; }

/* ---------- Značka hry v horní liště: jako na úvodní obrazovce (zelený dvacetistěn, Quansistor.games presents, LIGHT HEDRON COLLIDER) ---------- */
.gemblem { position: relative; flex: none; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; margin: 0 4px 0 2px;
  border: 1px solid rgba(124, 255, 178, .35); background: radial-gradient(circle, rgba(124, 255, 178, .12), rgba(5, 8, 15, .2) 70%);
  box-shadow: 0 0 14px rgba(124, 255, 178, .16), inset 0 0 10px rgba(124, 255, 178, .12); }
.gemblem::after { content: ''; position: absolute; inset: -5px; border-radius: 50%; border: 1px dashed rgba(124, 255, 178, .35); animation: g-orbit 40s linear infinite; }
@keyframes g-orbit { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .gemblem::after { animation: none; } }
.gico { width: 80%; height: 80%; display: block; filter: drop-shadow(0 0 5px rgba(124, 255, 178, .55)); }
.gtitle { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.gkicker { margin: 0; font: 500 9.5px var(--mono); letter-spacing: .22em; color: #8C98B3; white-space: nowrap; }
.gkicker a { color: #7DF9FF; text-decoration: none; }
.gkicker a:hover, .gkicker a:focus-visible { text-decoration: underline; text-underline-offset: 2px; }
.qs-mark { display: inline-block; height: 13px; aspect-ratio: 421 / 60; vertical-align: -2px; margin-right: 1px; background: currentColor;
  -webkit-mask: url(../img/quansistor-wordmark.png) left center / contain no-repeat; mask: url(../img/quansistor-wordmark.png) left center / contain no-repeat; }
.gbrand h1.gt { font: 500 clamp(15px, 1.6vw, 25px)/1.05 var(--mono); letter-spacing: .14em; color: #EAF6FA; white-space: nowrap;
  text-shadow: 0 0 12px rgba(125, 249, 255, .35), 0 0 2px rgba(255, 255, 255, .6); }
.gt-short { display: none; }
@media (max-width: 760px) {
  .gkicker { display: none; }
  .gt-full { display: none; }
  .gt-short { display: inline; }
  .gemblem { width: 32px; height: 32px; }
}