/* Controller-first menus (menu-nav.js): the focus ring after a gamepad move, the button glyphs in every
   [data-hint] label, the contextual hint bar over dialogs and the pause, and the on-screen keyboard.
   Colours, radii, shadows and motion come from the :root tokens in styles.css. */

/* Focus: a thick gold ring with a red glow once the pad is in use (keyboard focus-visible keeps each module's own ring). */
html[data-input="gamepad"] :is(button,a[href],input,select,textarea,summary,[tabindex]:not(canvas)):focus{outline:3px solid var(--focus)!important;outline-offset:3px!important;box-shadow:0 0 0 7px var(--red-glow),var(--shadow-1)!important;z-index:1}
/* A steady highlight stays readable while the player considers a choice. */
html[data-input="gamepad"] .cp-card:has(.cp-club:focus){border-color:var(--gold);box-shadow:inset 5px 0 0 var(--gold),0 0 0 2px var(--gold);background:linear-gradient(125deg,#ffd65c18,var(--graphite))}
html[data-input="gamepad"] .cp-card:has(.cp-club:focus) .cp-eyebrow{color:var(--gold)}
html[data-input="gamepad"] .cp-hint{display:flex;font-size:12px;color:var(--ink-2);gap:6px 12px}
html[data-input="gamepad"] .cp-hint kbd{font-size:12px}
html[data-input="gamepad"] .fm-hints{font-size:12px;line-height:1.5;gap:8px 16px}
html[data-input="gamepad"] #settingsDialog :is(.settings-toggle,.settings-field,.settings-volume):focus-within{background:#ffd65c14;box-shadow:0 0 0 8px #ffd65c14;color:var(--ink)}
/* A control scrolled into view in a dialog clears its sticky tab bars and footers. */
dialog :is(button,a[href],input,select,textarea,summary,[tabindex]){scroll-margin-block:80px}

/* Glyphs: a keycap in front of each hint label. */
.nav-glyph{display:inline-flex;align-items:center;justify-content:center;min-width:1.9em;height:1.9em;padding:0 .45em;margin-right:.5em;border:1px solid var(--edge-strong);border-radius:var(--r-sm);background:var(--graphite);box-shadow:inset 0 -2px 0 var(--well);color:var(--ink);font:700 1em/1 var(--tv-font);letter-spacing:.02em;white-space:nowrap;vertical-align:middle}
.nav-glyph[data-family="xbox"],.nav-glyph[data-family="playstation"]{border-radius:var(--r-pill);min-width:1.9em}
[data-hint="page"]>.nav-glyph,[data-hint="start"]>.nav-glyph,[data-hint="step"]>.nav-glyph,[data-hint="move"]>.nav-glyph{border-radius:var(--r-sm)}
[data-hint="confirm"]>.nav-glyph[data-family="xbox"]{color:var(--ok)}
[data-hint="back"]>.nav-glyph[data-family="xbox"],[data-hint="back"]>.nav-glyph[data-family="playstation"]{color:var(--red-hi)}
[data-hint="x"]>.nav-glyph[data-family="xbox"],[data-hint="confirm"]>.nav-glyph[data-family="playstation"]{color:var(--blue)}
[data-hint="y"]>.nav-glyph[data-family="xbox"],[data-hint="x"]>.nav-glyph[data-family="playstation"]{color:var(--gold)}
[data-hint="y"]>.nav-glyph[data-family="playstation"]{color:var(--ok)}
[data-hint-missing]{display:none!important}
/* Touch: no controller legend at all. */
html[data-input="touch"] :is(.fm-hints,.ht-hints){display:none!important}
.fm-hints .fm-hint,.ht-hints span{display:inline-flex;align-items:center;white-space:nowrap}
.fm-lobby-hints{justify-content:center;margin:12px 0 0;color:var(--muted);font:600 11px/1.3 var(--tv-font);letter-spacing:.05em;text-transform:uppercase}

/* Contextual hint bar (a manual popover, so it stays above the newest modal dialog). */
.nav-hintbar{position:fixed;inset:auto 0 max(12px,env(safe-area-inset-bottom)) 0;margin:0 auto;width:max-content;max-width:calc(100vw - 24px);display:flex;flex-wrap:wrap;justify-content:center;gap:6px 16px;padding:8px 16px;border:1px solid var(--edge-strong);border-radius:var(--r-pill);background:var(--glass);box-shadow:var(--shadow-2);color:var(--ink-2);font:600 12px/1.2 var(--tv-font);letter-spacing:.04em;text-transform:uppercase;pointer-events:none;overflow:visible}
.nav-hintbar .nav-hint{display:inline-flex;align-items:center;white-space:nowrap}
.nav-hintbar[popover]:not(:popover-open){display:none}
.nav-hintbar .nav-glyph{font-size:12px}
.nav-glyph[data-family="generic"]{font-size:.88em;letter-spacing:0}
@media (min-height:521px){html[data-nav-hintbar] dialog[open]:not(.nav-keyboard){bottom:60px;max-height:calc(100svh - 72px)!important}}
@media (max-width:600px){.nav-hintbar{gap:4px 10px;padding:6px 12px;font-size:11px}.nav-hintbar [data-hint="move"]{display:none}}
@media (max-width:600px) and (min-height:521px){html[data-nav-hintbar] dialog[open]:not(.nav-keyboard){bottom:84px;max-height:calc(100svh - 92px)!important}}
/* Landscape phones: no room to spare under a dialog, so the dialog keeps the whole height and the bar stays off. */
@media (max-height:520px){.nav-hintbar{display:none!important}}

/* Controller option picker: large rows, current value marked, cancel never commits. */
.nav-choice{box-sizing:border-box;width:min(520px,calc(100vw - 28px));max-height:calc(100svh - 100px);padding:24px;border:1px solid var(--edge-strong);border-radius:var(--r-lg);background:var(--panel-grad);color:var(--ink);box-shadow:var(--shadow-3);font-family:var(--ui-font);overflow:hidden}
.nav-choice[open]{display:grid;grid-template-rows:auto minmax(0,1fr) auto;gap:18px}
.nav-choice::backdrop{background:#000b}
.nav-choice h2{margin:0;font:800 24px/1.2 var(--tv-font);overflow-wrap:anywhere}
.nav-choice-list{display:flex;flex-direction:column;gap:10px;overflow:auto;padding:9px;overscroll-behavior:contain}
.nav-choice-option{position:relative;flex:none;min-height:54px;padding:14px 40px 14px 16px;border:1px solid var(--edge-strong);border-radius:var(--r-sm);background:var(--graphite);color:var(--ink);font:700 17px/1.3 var(--tv-font);text-align:left;white-space:normal;overflow-wrap:anywhere}
.nav-choice-option[aria-pressed="true"]::after{content:'✓';position:absolute;right:16px;top:16px;color:var(--gold)}
.nav-choice-option:focus{background:#ffd65c20}
.nav-choice-option small{display:block;margin-top:4px;font-size:12px;color:var(--muted)}
.nav-choice-cancel{justify-self:end;min-height:44px;padding:8px 16px;font:700 14px/1.2 var(--tv-font)}
@media(max-width:600px){.nav-choice{padding:16px;gap:12px}.nav-choice h2{font-size:21px}}
@media(max-height:520px){.nav-choice{max-height:calc(100svh - 24px);padding:12px}.nav-choice[open]{gap:8px}.nav-choice-option{min-height:44px;padding-block:10px}.nav-choice h2{font-size:19px}}

/* On-screen keyboard for text fields reached with a controller. */
.nav-keyboard{width:min(600px,calc(100vw - 16px));max-height:calc(100svh - 16px);overflow:auto;padding:18px 18px 14px;border:1px solid var(--edge-strong);border-radius:var(--r-lg);background:var(--panel-grad);color:var(--ink);box-shadow:var(--shadow-3);font-family:var(--ui-font)}
.nav-keyboard::backdrop{background:#000000b3}
.nav-keyboard header{display:flex;flex-direction:column;gap:4px;margin-bottom:10px}
.nav-kb-eyebrow{color:var(--gold);font:700 10px/1.4 var(--tv-font);letter-spacing:.2em}
.nav-keyboard h2{margin:0;font:700 22px/1.15 var(--tv-font);letter-spacing:.02em;overflow-wrap:anywhere}
.nav-kb-value{display:flex;align-items:center;min-height:52px;padding:10px 14px;margin-bottom:12px;border-radius:var(--r-sm);background:var(--well);box-shadow:inset 0 -3px 0 var(--red);font:700 24px/1.2 var(--tv-font);letter-spacing:.12em;overflow-wrap:anywhere}
.nav-kb-value[data-empty="true"]::after{content:"_";color:var(--dim);animation:none}
.nav-kb-keys{display:flex;flex-direction:column;gap:6px}
.nav-kb-row{display:flex;gap:6px;justify-content:center}
.nav-kb-key{flex:1 1 0;min-width:0;max-width:52px;min-height:44px;padding:0;font:700 18px/1 var(--tv-font);text-transform:none}
.nav-kb-actions{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end;margin-top:12px}
.nav-kb-action,.nav-kb-done{min-height:44px;padding:0 16px;font:700 13px/1 var(--tv-font);letter-spacing:.06em;text-transform:uppercase}
.nav-kb-action[aria-pressed="true"]{border-color:var(--gold);color:var(--gold)}
.nav-kb-done{background:var(--primary);border-color:var(--gold);color:var(--ink)}
.nav-kb-legend{display:flex;flex-wrap:wrap;gap:6px 14px;margin:12px 0 0;color:var(--muted);font:600 11px/1.3 var(--tv-font);letter-spacing:.05em;text-transform:uppercase}
.nav-kb-legend .nav-hint{display:inline-flex;align-items:center}
html[data-input="touch"] .nav-kb-legend{display:none}
@media (max-height:480px){.nav-keyboard{padding:10px 12px}.nav-keyboard header{flex-direction:row;align-items:baseline;gap:10px;margin-bottom:6px}.nav-keyboard h2{font-size:16px}.nav-kb-value{min-height:40px;padding:6px 12px;margin-bottom:8px;font-size:18px}.nav-kb-keys,.nav-kb-row{gap:4px}.nav-kb-key{min-height:36px;font-size:15px}.nav-kb-actions{margin-top:8px}.nav-kb-action,.nav-kb-done{min-height:36px}.nav-kb-legend{display:none}}
@media (max-width:420px){.nav-keyboard{padding:14px 10px 12px}.nav-kb-keys,.nav-kb-row{gap:4px}.nav-kb-action,.nav-kb-done{flex:1 1 auto;padding:0 10px}}