/* ==========================================================================
   OVLADAČ + NÁPOVĚDY TLAČÍTEK (inputhints.js, padnav.js). Načítá se PO hud.css, bere jeho proměnné.
   - .kc = klávesa v rámečku (i myš LMB / RMB), .gk = glyf tlačítka ovladače (Xbox / PlayStation);
     velikost z okolního písma (em) → sedí v HUDu, hláškách i panelech;
   - #pad-ring = kroužek fokusu menu, #pad-menu nabídka akcí, #pad-set nastavení, #pad-wheel kolečko zbraní,
     #pad-help nápověda se schématem (v #help místo kláves, když se hraje ovladačem).
   ========================================================================== */
.kc, .gk {
  display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; vertical-align: middle;
  min-width: 1.75em; height: 1.75em; padding: 0 .42em; margin: 0 .12em; font: 800 .82em/1 var(--hud-font, system-ui, sans-serif);
  color: #fff; white-space: nowrap; font-style: normal; text-shadow: none; position: relative; top: -.06em;
}
.kc { border-radius: .36em; border: 1.5px solid rgba(255, 255, 255, .85); border-bottom-width: 3px; background: rgba(255, 255, 255, .1); }
.kc-mouse { width: 1.3em; min-width: 1.3em; height: 1.85em; padding: 0; border-radius: .6em .6em .7em .7em; border-bottom-width: 1.5px; overflow: hidden; }
.kc-mouse i { position: absolute; top: 0; width: 50%; height: 45%; border-bottom: 1.5px solid rgba(255, 255, 255, .85); box-sizing: border-box; left: 0; border-right: 1.5px solid rgba(255, 255, 255, .85); }
.kc-mouse.kc-l i { background: var(--hud-accent, #ffc53d); }
.kc-mouse.kc-r i { left: 50%; border-right: 0; border-left: 1.5px solid rgba(255, 255, 255, .85); background: var(--hud-accent, #ffc53d); }
.gk { border-radius: .5em; background: #2b3038; border: 1.5px solid rgba(255, 255, 255, .55); }
.gk-plus { margin: 0 .05em; font-weight: 800; opacity: .8; }
.gk-face { border-radius: 50%; width: 1.75em; padding: 0; border-width: 2px; background: #14171c; }
.gk-face.gk-a { color: #6ee07a; border-color: #49c256; } .gk-face.gk-b { color: #ff6b63; border-color: #e5463d; }
.gk-face.gk-x { color: #6db3ff; border-color: #3d8fe8; } .gk-face.gk-y { color: #ffd257; border-color: #e9b320; }
.gk-face.gk-ps { font-size: .9em; }
.gk-face.gk-ps.gk-a { color: #8fb4ff; border-color: #6c93e8; } .gk-face.gk-ps.gk-b { color: #ff7d7d; border-color: #e85c5c; }
.gk-face.gk-ps.gk-x { color: #f0a3d8; border-color: #d87fbd; } .gk-face.gk-ps.gk-y { color: #7fe0c4; border-color: #4fc3a1; }
.gk-bump { border-radius: .7em .7em .3em .3em; min-width: 2.3em; }
.gk-trig { border-radius: .35em .35em .9em .9em; min-width: 2.1em; height: 1.9em; border-bottom-width: 3px; }
.gk-sys { border-radius: 1em; min-width: 2em; font-size: .78em; height: 1.7em; }
.gk-sys.gk-ps { font-size: .52em; letter-spacing: .04em; height: 2.3em; padding: 0 .7em; }
/* Xbox View: dva překrývající se obdélníčky */
.gk-back.gk-xbox i { position: relative; width: .8em; height: .62em; border: 1.5px solid #fff; border-radius: .12em; margin: -.2em .25em 0 0; }
.gk-back.gk-xbox i::after { content: ""; position: absolute; left: .28em; top: .22em; width: .8em; height: .62em; border: 1.5px solid #fff; border-radius: .12em; background: #2b3038; box-sizing: border-box; }
.gk-stick { border-radius: 50%; width: 1.9em; height: 1.9em; padding: 0; background: radial-gradient(circle, #6b7482 0 48%, #14171c 52% 100%); border: 2px solid rgba(255, 255, 255, .85); font-size: .78em; }
.gk-stick i { display: none; }
.gk-stick.gk-click { box-shadow: 0 0 0 2px var(--hud-accent, #ffc53d); border-color: var(--hud-accent, #ffc53d); }
.gk-stick.gk-click::after { content: "↓"; position: absolute; right: -.5em; bottom: -.45em; font-size: .8em; color: var(--hud-accent, #ffc53d); }
/* D-pad: kříž, zvýrazněný směr */
.gk-dpad { width: 1.8em; min-width: 1.8em; height: 1.8em; padding: 0; border: 0; background: none; }
.gk-dpad::before, .gk-dpad::after { content: ""; position: absolute; background: #3a404a; border-radius: .14em; box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .5); }
.gk-dpad::before { left: 34%; right: 34%; top: 0; bottom: 0; }
.gk-dpad::after { top: 34%; bottom: 34%; left: 0; right: 0; }
.gk-dpad i { position: absolute; z-index: 1; background: var(--hud-accent, #ffc53d); border-radius: .1em; }
.gk-d-dpad i { display: none; }
.gk-d-up i { left: 34%; right: 34%; top: 0; height: 36%; } .gk-d-down i { left: 34%; right: 34%; bottom: 0; height: 36%; }
.gk-d-left i { top: 34%; bottom: 34%; left: 0; width: 36%; } .gk-d-right i { top: 34%; bottom: 34%; right: 0; width: 36%; }

/* kontextová akce: glyf místo klávesy (stejné místo jako .k) */
#act-hint .gk, #act-hint .kc, #bail-hint .gk { font-size: calc(var(--hud-u) * 1.7); margin: 0; top: 0; }
#hud-toasts .ht-tx .gk, #hud-toasts .ht-tx .kc { font-size: .78em; }
/* hraje se ovladačem: žádné „klikni pro návrat do hry", dotyková / myší nápověda pryč */
body[data-input="pad"] #resume-hint { display: none !important; }

/* ---------- kroužek fokusu ---------- */
#pad-ring {
  position: fixed; z-index: 100000; pointer-events: none; box-sizing: border-box; border: 3px solid var(--hud-accent, #ffc53d);
  box-shadow: 0 0 0 2px rgba(0, 0, 0, .65), 0 0 18px 2px rgba(255, 197, 61, .55), inset 0 0 0 1px rgba(0, 0, 0, .5);
  transition: left .08s, top .08s, width .08s, height .08s; animation: pad-ring 1.4s ease-in-out infinite;
}
#pad-ring.hidden, #pad-wheel.hidden, .pad-panel.hidden { display: none; }
@keyframes pad-ring { 50% { box-shadow: 0 0 0 2px rgba(0, 0, 0, .65), 0 0 26px 6px rgba(255, 197, 61, .75), inset 0 0 0 1px rgba(0, 0, 0, .5); } }
body:not([data-input="pad"]) #pad-ring { display: none; }
body[data-input="pad"] .pad-focus { filter: brightness(1.18); }

/* ---------- nabídka akcí, nastavení ---------- */
.pad-panel {
  position: fixed; inset: 0; z-index: 9500; display: flex; align-items: center; justify-content: center;
  background: rgba(6, 8, 12, .78); font-family: var(--hud-font, system-ui, sans-serif); color: var(--hud-text, #f4f6f9);
}
.pad-box {
  background: #10141b; border: 1px solid var(--hud-line, rgba(255, 255, 255, .13)); border-radius: 14px;
  padding: 18px 20px; width: min(760px, 94vw); max-height: 92vh; overflow-y: auto; box-shadow: 0 18px 60px rgba(0, 0, 0, .55);
}
.pad-title { font-weight: 800; font-size: 20px; letter-spacing: .04em; margin-bottom: 12px; }
.pad-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px; }
.pad-list button, .pad-tog, .pad-back, .pad-row button {
  font: 600 15px/1.2 var(--hud-font, system-ui, sans-serif); color: #fff; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 9px; padding: 10px 12px; cursor: pointer; text-align: left;
}
.pad-list button { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 44px; }
.pad-list button i { font-style: normal; flex: none; opacity: .95; }
.pad-list button:hover, .pad-tog:hover, .pad-back:hover, .pad-row button:hover, .pad-panel .pad-focus { background: rgba(255, 197, 61, .22); border-color: var(--hud-accent, #ffc53d); }
.pad-foot, .pad-note { margin-top: 12px; font-size: 13px; color: var(--hud-dim, rgba(228, 234, 243, .68)); }
.pad-rows { display: grid; gap: 8px; }
.pad-row { display: grid; grid-template-columns: 1fr 44px 70px 44px; align-items: center; gap: 8px; font-size: 15px; }
.pad-row b { text-align: center; font-variant-numeric: tabular-nums; }
.pad-row button { text-align: center; padding: 8px 0; font-size: 18px; }
.pad-back { margin-top: 14px; width: 100%; text-align: center; background: rgba(255, 197, 61, .18); }

/* ---------- kolečko zbraní ---------- */
#pad-wheel { position: fixed; left: 50%; top: 50%; width: 0; height: 0; z-index: 9400; pointer-events: none; font-family: var(--hud-font, system-ui, sans-serif); color: #fff; --r: min(26vh, 230px); }
#pad-wheel::before { content: ""; position: absolute; left: calc(var(--r) * -1.45); top: calc(var(--r) * -1.45); width: calc(var(--r) * 2.9); height: calc(var(--r) * 2.9); border-radius: 50%;
  background: radial-gradient(circle, rgba(8, 10, 14, 0) 0 28%, rgba(8, 10, 14, .72) 30% 100%); }
.pw-it {
  position: absolute; width: calc(var(--r) * .62); height: calc(var(--r) * .5); margin: calc(var(--r) * -.25) 0 0 calc(var(--r) * -.31);
  left: calc(var(--x) * var(--r)); top: calc(var(--y) * var(--r)); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  border-radius: 12px; background: rgba(255, 255, 255, .07); border: 2px solid rgba(255, 255, 255, .18); text-align: center; transition: transform .08s;
}
.pw-it svg { width: 78%; height: 46%; }
.pw-it small { font-size: calc(var(--r) * .058); font-weight: 600; opacity: .9; line-height: 1.1; max-width: 96%; overflow: hidden; }
.pw-it.act { border-color: rgba(255, 255, 255, .6); }
.pw-it.sel { background: rgba(255, 197, 61, .3); border-color: var(--hud-accent, #ffc53d); transform: scale(1.14); }
.pw-center { position: absolute; left: calc(var(--r) * -.45); top: calc(var(--r) * -.2); width: calc(var(--r) * .9); text-align: center; display: flex; flex-direction: column; gap: 6px; align-items: center; text-shadow: 0 1px 3px #000; }
.pw-center b { font-size: calc(var(--r) * .085); } .pw-center small { font-size: calc(var(--r) * .062); opacity: .85; }

/* ---------- nápověda: schéma + tabulka ---------- */
#pad-help { display: none; text-align: left; }
body[data-input="pad"] #pad-help { display: block; }
body[data-input="pad"] #help .keys { display: none; }
.ph-top { display: flex; gap: 22px; align-items: center; flex-wrap: wrap; margin-bottom: 14px; }
.ph-info { display: flex; flex-direction: column; gap: 6px; flex: 1; min-width: 240px; font-size: 14px; line-height: 1.45; }
.ph-info b { font-size: 18px; }
.pad-schema { position: relative; width: 300px; height: 190px; flex: none; color: rgba(255, 255, 255, .55); font-size: 13px; }
.pad-schema svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.ps-at { position: absolute; transform: translate(-50%, 0); }
.ph-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 6px 26px; }
.ph-col h3 { margin: 6px 0 6px; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; opacity: .7; }
.ph-row { display: flex; align-items: center; gap: 10px; padding: 3px 0; font-size: 14px; line-height: 1.25; }
.ph-b { flex: none; min-width: 86px; text-align: right; }

/* úvodní nápověda při ovladači: „JEDEME!" pořád na očích (dlouhá tabulka se roluje pravou páčkou) */
body[data-input="pad"] #help #start-btn { position: sticky; bottom: 6px; z-index: 2; box-shadow: 0 -10px 24px 8px rgba(10, 14, 22, .9); }
#bail-hint .kc, #act-hint .kc { min-width: calc(var(--hud-u) * 3); height: calc(var(--hud-u) * 3); }
#fsd-ind .gk, #fsd-ind .kc { font-size: .8em; margin-left: .3em; }
.mv-hint .gk, .tr-keys .gk, .tr-next .gk { font-size: .78em; }