/* Game · sdílená sada pro editory: lišta, knoby, čipy, dialog Sloty. Jen logické vlastnosti (RTL); knob a miniatury se nezrcadlí. Čitelnost před efektem:
   žádné animace mimo krátký přechod barvy při hnutí prvkem, žádné filtry přes plochu, stíny jen na prvku, který uživatel právě drží. */

/* lišta nad plátnem editoru */
.gk-bar{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;padding:7px 10px;border-block-end:1px solid var(--line,rgba(110,160,230,.35));background:linear-gradient(180deg,rgba(14,24,44,.92),rgba(9,15,29,.92))}
.gk-bar .gk-sp{flex:1 1 8px}
.gk-grp{display:inline-flex;align-items:center;gap:4px;padding:3px 6px;border:1px solid var(--line,rgba(110,160,230,.35));border-radius:999px;background:rgba(7,12,24,.6)}
.gk-grp>.gk-cap{font-size:11px;color:var(--mute,#8ea7c4);padding-inline:4px 2px;white-space:nowrap}
.gk-bar select{inline-size:auto;margin:0;padding:5px 8px;border-radius:999px;font-size:13px;max-inline-size:210px}

/* čipy */
.gk-chip{font:inherit;font-size:12.5px;line-height:1.2;padding:4px 10px;border-radius:999px;border:1px solid var(--line,rgba(110,160,230,.35));background:rgba(11,19,32,.9);color:var(--mute,#8ea7c4);cursor:pointer;white-space:nowrap}
.gk-chip:hover{color:var(--ink,#e6f1ff);border-color:var(--mute,#8ea7c4)}
.gk-chip.on{color:#fff;font-weight:700;border-color:var(--grp,#ffb454);background:color-mix(in srgb,var(--grp,#ffb454) 26%,#0b1320)}
.gk-chip.on::before{content:"✓ ";opacity:.85}
.gk-chip:focus-visible,.gk-kd:focus-visible,.gk-tool:focus-visible,.gk-slot .btn:focus-visible{outline:2px solid #fff;outline-offset:2px}
.gk-chip.slot{font-weight:600;color:var(--ink,#e6f1ff)}

/* knoby */
.gk-knob{display:inline-flex;flex-direction:column;align-items:center;gap:1px;inline-size:calc(var(--ks,56px) + 26px);text-align:center;user-select:none}
.gk-kd{inline-size:var(--ks,56px);block-size:var(--ks,56px);border-radius:50%;cursor:ns-resize;touch-action:none;outline:none}
.gk-kd svg{inline-size:100%;block-size:100%;display:block;overflow:visible}
.gk-trk,.gk-arc{fill:none;stroke-width:5;stroke-linecap:round}
.gk-trk{stroke:rgba(120,160,230,.22)}
.gk-arc{stroke:var(--kc,#ffb454);transition:stroke .12s}
.gk-cap{fill:#0b1424;stroke:rgba(150,185,235,.45);stroke-width:1.5}
.gk-ptr{stroke:#fff;stroke-width:3;stroke-linecap:round}
.gk-kd:hover .gk-cap{stroke:rgba(190,215,255,.8)}
.gk-knob.on .gk-arc{stroke:#fff}
.gk-knob.on .gk-kd{box-shadow:0 0 0 3px color-mix(in srgb,var(--kc,#ffb454) 35%,transparent)}
.gk-kv{font:600 12.5px/1.2 ui-monospace,Menlo,Consolas,monospace;color:var(--ink,#e6f1ff);min-block-size:1.2em;unicode-bidi:isolate}
.gk-kl{font-size:11.5px;line-height:1.2;color:var(--mute,#8ea7c4);max-inline-size:100%;overflow-wrap:anywhere}
.gk-rack{display:flex;flex-wrap:wrap;gap:6px 4px;align-items:flex-start;padding:8px 6px;border:1px solid var(--line,rgba(110,160,230,.35));border-radius:12px;background:rgba(8,14,28,.72)}
.gk-rack>h4{flex:1 0 100%;margin:0 0 2px;font-size:12px;font-weight:600;color:var(--mute,#8ea7c4);letter-spacing:.02em}

/* plovoucí paleta nástrojů */
.gk-dock{position:absolute;inset-block-start:10px;inset-inline-start:10px;z-index:3;display:flex;flex-direction:column;gap:4px;padding:6px;border:1px solid var(--line,rgba(110,160,230,.35));border-radius:12px;background:rgba(8,14,28,.9)}
.gk-dock hr{inline-size:100%;border:0;border-block-start:1px solid var(--line,rgba(110,160,230,.35));margin:2px 0}
.gk-tool{inline-size:38px;block-size:34px;padding:0;margin:0;display:grid;place-items:center;font-size:16px;border-radius:9px;border:1px solid transparent;background:transparent;color:var(--ink,#e6f1ff);cursor:pointer;position:relative}
.gk-tool:hover{border-color:var(--mute,#8ea7c4)}
.gk-tool.on{border-color:var(--grp,#ffb454);background:color-mix(in srgb,var(--grp,#ffb454) 24%,#0b1320)}
.gk-tool kbd{position:absolute;inset-block-end:0;inset-inline-end:2px;font:700 8.5px/1 ui-monospace,monospace;color:var(--mute,#8ea7c4)}
.gk-tool:disabled{opacity:.35;cursor:default}

/* dialog Sloty */
.gm-card.gm-wide{inline-size:min(900px,100%)}
.gk-slots{display:flex;flex-direction:column;gap:8px}
.gk-sl-namebox{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--mute,#8ea7c4)}
.gk-sl-namebox input{flex:1 1 auto;background:#0a1016;color:var(--ink,#e6f1ff);border:1px solid var(--line,rgba(110,160,230,.35));border-radius:8px;padding:6px 9px;font:inherit}
.gk-sl-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(158px,1fr));gap:8px}
.gk-slot{display:flex;flex-direction:column;gap:3px;padding:7px 8px 8px;border:1px solid var(--line,rgba(110,160,230,.35));border-radius:11px;background:rgba(10,17,32,.92);min-inline-size:0}
.gk-slot.cur{border-color:var(--grp,#ffb454);box-shadow:0 0 0 1px var(--grp,#ffb454)}
.gk-slot.empty{background:rgba(7,12,24,.5);border-style:dashed}
.gk-slot header{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--mute,#8ea7c4)}
.gk-slot header b{color:var(--ink,#e6f1ff);font-size:13px}
.gk-sl-cur{margin-inline-start:auto;font-size:10.5px;color:#06110c;background:var(--grp,#ffb454);border-radius:999px;padding:0 7px;font-weight:700}
.gk-sl-hud{margin-inline-start:auto;font-size:11px}.gk-sl-cur+.gk-sl-hud{margin-inline-start:0}
.gk-sl-th{inline-size:100%;aspect-ratio:8/5;display:grid;place-items:center;background:#070c18;border:1px solid rgba(110,160,230,.2);border-radius:6px;overflow:hidden;color:var(--mute,#8ea7c4);direction:ltr}
.gk-sl-th img{inline-size:100%;block-size:100%;object-fit:contain;image-rendering:pixelated}
.gk-sl-nm{font-weight:600;font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gk-slot.empty .gk-sl-nm{color:var(--mute,#8ea7c4);font-weight:400}
.gk-sl-meta{font-size:11px;color:var(--mute,#8ea7c4);min-block-size:1.3em}
.gk-sl-act{display:flex;gap:4px;flex-wrap:wrap}
.gk-sl-act .btn{flex:1 1 0;margin:0;padding:5px 6px;min-inline-size:34px;font-size:14px}
.gk-sl-act .btn.warn,.gk-sl-clone .btn.warn{background:#4a1b24;border-color:#ff5470;font-size:12px}
.gk-sl-clone{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;gap:4px;padding:6px 8px;border:1px dashed var(--grp,#ffb454);border-radius:10px;font-size:12.5px}
.gk-sl-clone .btn{margin:0;padding:4px 9px;font-size:12.5px}
.gk-slot .gk-sl-clone{grid-column:auto}
.gk-sl-clone .busy{border-color:#ff9a3c}
.gk-sl-tools{display:flex;gap:6px;flex-wrap:wrap}
.gk-sl-tools .btn{margin:0}
.gk-sl-status{min-block-size:1.6em;font-size:13px;padding:2px 2px}
.gk-sl-status.ok{color:#2ff5c2}.gk-sl-status.bad{color:#ff5470}.gk-sl-status.warn{color:#ffc14d}

.gk-grp [role=radio].on::before{content:none}
/* výběr hry: plné (neprůhledné) pozadí. Průhledné pozadí select neprovede do rozbaleného seznamu, ten se pak kreslí bílý a světlé písmo v něm zmizí */
.gml-head select{max-inline-size:190px;inline-size:190px;border:0;background-color:#0b1320;color:var(--ink,#e6f1ff);padding:4px 6px}
@media (min-width:1560px){.gml-head{flex-wrap:nowrap}}   /* s tlačítky Sloty a Exportovat se lišta vejde do jednoho řádku až na širokém okně; jinak se zalomí */

/* Pixel Forge: dock s nástroji a pruh barev přes plátno (jen v režimu Kresba) */
.pf-ov{position:absolute;inset:0;pointer-events:none;z-index:3}
.pf-ov>*{pointer-events:auto}
.pf-dock{align-items:center;max-block-size:calc(100% - 20px);overflow-y:auto;overflow-x:hidden;scrollbar-width:thin}
.pf-dock[hidden],.pf-palbar[hidden]{display:none}
.pf-sizek{padding-block-start:4px}
.pf-sizek .gk-knob{inline-size:calc(var(--ks,34px) + 20px)}
.pf-palbar{position:absolute;inset-block-end:10px;display:flex;align-items:center;gap:8px;padding:5px 8px;border:1px solid var(--line,rgba(110,160,230,.35));border-radius:12px;background:rgba(8,14,28,.9);box-sizing:border-box;min-inline-size:0}
.pf-cursw{flex:0 0 auto;inline-size:26px;block-size:22px;border-radius:6px;border:2px solid #fff}
.pf-palstrip{display:flex;gap:3px;overflow-x:auto;overflow-y:hidden;padding:3px 2px;scrollbar-width:thin;flex:1 1 auto;min-inline-size:0}
.pf-palstrip .pf-sw{flex:0 0 auto;inline-size:20px;block-size:20px}

/* dialog Exportovat do jednoho souboru (gx-export-ui.js) */
.gk-exp{display:grid;gap:10px}
.gk-exp-var{display:grid;gap:8px}
.gk-exp-opt{display:flex;gap:10px;align-items:flex-start;padding:8px 10px;border:1px solid var(--line,rgba(110,160,230,.35));border-radius:10px;cursor:pointer}
.gk-exp-opt:has(input:checked){border-color:var(--grp,#ffb454);background:rgba(255,180,84,.08)}
.gk-exp-opt input{margin-block-start:4px}
.gk-exp-lang{display:flex;gap:10px;align-items:center;flex-wrap:wrap}

/* dialog 🎮 Ovládání (game-controls-ui.js): popisky A/B, tabulka kláves, gamepady. Čitelnost před efektem: plné barvy, jen krátký přechod barvy. */
.gk-ctl{display:grid;gap:12px}
.gk-ctl-sec{display:grid;gap:8px;padding:10px 12px;border:1px solid var(--line,rgba(110,160,230,.35));border-radius:12px;background:rgba(8,14,28,.55)}
.gk-ctl-sec h3{margin:0;font-size:14px}
.gk-ctl-lab{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:8px}
.gk-ctl-lab label{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--mute,#8ea7c4)}
.gk-ctl-lab label b{display:grid;place-items:center;inline-size:28px;block-size:28px;border-radius:8px;background:var(--grp,#ffb454);color:#06110c;font-size:15px}
.gk-ctl-lab input{flex:1 1 auto;min-inline-size:0;background:#0a1016;color:var(--ink,#e6f1ff);border:1px solid var(--line,rgba(110,160,230,.35));border-radius:8px;padding:6px 9px;font:inherit}
.gk-ctl-keys{display:grid;grid-template-columns:auto repeat(6,minmax(52px,1fr));gap:5px;align-items:center;overflow-x:auto}
.gk-ctl-keys .h{text-align:center;font-weight:700;color:var(--mute,#8ea7c4)}
.gk-ctl-keys .pl{font-size:13px;white-space:nowrap;padding-inline-end:6px}
.gk-ctl-key{font:inherit;font-size:13px;min-block-size:34px;padding:4px 6px;border-radius:8px;border:1px solid var(--line,rgba(110,160,230,.35));background:#0b1320;color:var(--ink,#e6f1ff);cursor:pointer;white-space:nowrap;transition:background-color .1s,border-color .1s}
.gk-ctl-key:hover{border-color:var(--ink,#e6f1ff)}
.gk-ctl-key.on{background:var(--grp,#ffb454);color:#06110c;border-color:var(--grp,#ffb454);font-weight:700}
.gk-ctl-key.hit{background:#1f5f4c;border-color:#2ff5c2;color:#fff}
.gk-ctl-key:focus-visible,.gk-ctl-lab input:focus-visible{outline:2px solid #fff;outline-offset:2px}
.gk-ctl-row{display:flex;gap:6px;flex-wrap:wrap}.gk-ctl-row .btn{margin:0}.gk-ctl-row .btn.on{border-color:var(--grp,#ffb454)}
.gk-ctl-pad{margin:0;font-size:13px}.gk-ctl-held{color:#2ff5c2;font-weight:600}
.gk-ctl-learn{margin:0;font-size:13px;font-weight:700;color:var(--grp,#ffb454)}
.gk-ctl-status{min-block-size:1.6em;font-size:13px}
.gk-ctl-status.ok{color:#2ff5c2}.gk-ctl-status.warn{color:#ffc14d}.gk-ctl-status.ev{color:var(--grp,#ffb454)}

/* dialog Nová hra (glive-new.js): karty „od čeho začít“ */
.gk-new{display:grid;gap:12px}
.gk-new-sec{display:grid;gap:8px}
.gk-new-sec h3{margin:0;font-size:14px}
.gk-new-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:8px}
.gk-new-card{display:grid;gap:3px;text-align:start;font:inherit;padding:9px 11px;border-radius:12px;border:1px solid var(--line,rgba(110,160,230,.35));background:#0b1320;color:var(--ink,#e6f1ff);cursor:pointer;transition:border-color .1s,background-color .1s}
.gk-new-card:hover{border-color:var(--ink,#e6f1ff)}
.gk-new-card[aria-pressed=true]{border-color:var(--grp,#ffb454);background:color-mix(in srgb,var(--grp,#ffb454) 20%,#0b1320);box-shadow:0 0 0 2px color-mix(in srgb,var(--grp,#ffb454) 40%,transparent)}
.gk-new-card[aria-pressed=true] .gk-new-t::before{content:"✓ "}
.gk-new-card:focus-visible{outline:2px solid #fff;outline-offset:2px}
.gk-new-t{font-weight:700;font-size:13.5px}
.gk-new-d{font-size:11.5px;color:var(--mute,#8ea7c4);line-height:1.35}
.gk-new-namebox{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--mute,#8ea7c4)}
.gk-new-namebox input{flex:1 1 auto;background:#0a1016;color:var(--ink,#e6f1ff);border:1px solid var(--line,rgba(110,160,230,.35));border-radius:8px;padding:6px 9px;font:inherit}
.gk-new-foot{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.gk-new-foot .btn{margin:0}
.gk-new-status{min-block-size:1.6em;font-size:13px}
.gk-new-status.bad{color:#ff5470}.gk-new-status.warn{color:#ffc14d}.gk-new-status.ok{color:#2ff5c2}