/* ============================================ CROSS HOTBAR — controller HUD (FFXIV model) ============================================ Active only under #game.pad-mode (display-only flag written by gamepadInput.js; routing is owned by its MENU/WORLD arbiter, never by this class). The SAME 24 .action-slot buttons re-arrange into two 4-button diamonds (d-pad left, face buttons right); the three 8-slot sets overlap on the same grid cells and swap by visibility/opacity (compositor-safe; zero layout change on set switch). Every cooldown sweep, cast ring, queue flash, and refusal flash keeps pointing at the same buttons — no combat-feedback wiring changes. Set-to-slot map (gamepadCore.js slotForButton): set 1 (LT) = slots 1-8 set 2 (RT) = slots 9-16 set 3 (LT+RT) = slots 17-24 (hidden until the chord is held) Within a set: d-pad up/right/down/left = first four slots, face top/right/bottom/left = last four. Placeholder styling per ROADMAP 2.13 — Phase 5 owns the pretty pass. */ /* --- Grid frame --- */ #game.pad-mode #action-block { display: grid; grid-template-columns: repeat(3, var(--size-slot)) var(--gui-padding) repeat(3, var(--size-slot)); grid-template-rows: repeat(3, var(--size-slot)); gap: var(--gui-padding-sm); background: var(--bg-panel-alpha); padding: var(--gui-padding); } /* The two bars dissolve into the grid: their 24 buttons become the grid items. Bar chrome (flex, padding, background) intentionally drops. */ #game.pad-mode #action-bar, #game.pad-mode #action-bar-2 { display: contents; } /* Bar 2 must join the grid even when the user never enabled it (the chord set lives there). Wins over ui.css's #action-bar-2 display:none by specificity (0,1,2 vs 0,0,1). */ /* The sprint timer SVG parks as a direct child of #action-bar between relocations; under display:contents it would become a stray grid item. */ #game.pad-mode #action-bar > #sprint-timer-svg { display: none; } /* --- Armed-set indicator (small label above the cross) --- */ #game.pad-mode #action-block::before { content: ''; position: absolute; top: -1.4em; left: 50%; transform: translateX(-50%); font-family: var(--font-numbers); font-size: var(--action-key-size); color: var(--text-muted); } #game.pad-mode[data-pad-set="1"] #action-block::before { content: 'LT'; } #game.pad-mode[data-pad-set="2"] #action-block::before { content: 'RT'; } #game.pad-mode[data-pad-set="3"] #action-block::before { content: 'LT+RT'; } /* --- Diamond placement (grid areas by position within the set) --- */ /* d-pad diamond: up, right, down, left = set slots 1-4 */ #game.pad-mode .action-slot[data-slot="1"], #game.pad-mode .action-slot[data-slot="9"], #game.pad-mode .action-slot[data-slot="17"] { grid-area: 1 / 2; } #game.pad-mode .action-slot[data-slot="2"], #game.pad-mode .action-slot[data-slot="10"], #game.pad-mode .action-slot[data-slot="18"] { grid-area: 2 / 3; } #game.pad-mode .action-slot[data-slot="3"], #game.pad-mode .action-slot[data-slot="11"], #game.pad-mode .action-slot[data-slot="19"] { grid-area: 3 / 2; } #game.pad-mode .action-slot[data-slot="4"], #game.pad-mode .action-slot[data-slot="12"], #game.pad-mode .action-slot[data-slot="20"] { grid-area: 2 / 1; } /* face diamond: top, right, bottom, left = set slots 5-8 */ #game.pad-mode .action-slot[data-slot="5"], #game.pad-mode .action-slot[data-slot="13"], #game.pad-mode .action-slot[data-slot="21"] { grid-area: 1 / 6; } #game.pad-mode .action-slot[data-slot="6"], #game.pad-mode .action-slot[data-slot="14"], #game.pad-mode .action-slot[data-slot="22"] { grid-area: 2 / 7; } #game.pad-mode .action-slot[data-slot="7"], #game.pad-mode .action-slot[data-slot="15"], #game.pad-mode .action-slot[data-slot="23"] { grid-area: 3 / 6; } #game.pad-mode .action-slot[data-slot="8"], #game.pad-mode .action-slot[data-slot="16"], #game.pad-mode .action-slot[data-slot="24"] { grid-area: 2 / 5; } /* --- Set visibility (the three sets overlap; one shows at a time) --- visibility removes hidden sets from hit-testing and keyboard focus; opacity rides .action-slot's existing transition. */ /* [data-slot] scoping: only the 24 real bar slots participate. Synthetic .action-slot elements (the animation warm-up holder in game.js) carry no data-slot and stay untouched. */ #game.pad-mode .action-slot[data-slot] { visibility: hidden; opacity: 0; } /* Nothing armed: set 1 previews, dimmed. Our choice for a readable idle state (FFXIV shows the last-used side, not a dimmed set-1 specifically). */ #game.pad-mode[data-pad-set="0"] .action-slot[data-slot="1"], #game.pad-mode[data-pad-set="0"] .action-slot[data-slot="2"], #game.pad-mode[data-pad-set="0"] .action-slot[data-slot="3"], #game.pad-mode[data-pad-set="0"] .action-slot[data-slot="4"], #game.pad-mode[data-pad-set="0"] .action-slot[data-slot="5"], #game.pad-mode[data-pad-set="0"] .action-slot[data-slot="6"], #game.pad-mode[data-pad-set="0"] .action-slot[data-slot="7"], #game.pad-mode[data-pad-set="0"] .action-slot[data-slot="8"], #game.pad-mode:not([data-pad-set]) .action-slot[data-slot="1"], #game.pad-mode:not([data-pad-set]) .action-slot[data-slot="2"], #game.pad-mode:not([data-pad-set]) .action-slot[data-slot="3"], #game.pad-mode:not([data-pad-set]) .action-slot[data-slot="4"], #game.pad-mode:not([data-pad-set]) .action-slot[data-slot="5"], #game.pad-mode:not([data-pad-set]) .action-slot[data-slot="6"], #game.pad-mode:not([data-pad-set]) .action-slot[data-slot="7"], #game.pad-mode:not([data-pad-set]) .action-slot[data-slot="8"] { visibility: visible; opacity: 0.45; } /* LT armed: set 1 at full strength. */ #game.pad-mode[data-pad-set="1"] .action-slot[data-slot="1"], #game.pad-mode[data-pad-set="1"] .action-slot[data-slot="2"], #game.pad-mode[data-pad-set="1"] .action-slot[data-slot="3"], #game.pad-mode[data-pad-set="1"] .action-slot[data-slot="4"], #game.pad-mode[data-pad-set="1"] .action-slot[data-slot="5"], #game.pad-mode[data-pad-set="1"] .action-slot[data-slot="6"], #game.pad-mode[data-pad-set="1"] .action-slot[data-slot="7"], #game.pad-mode[data-pad-set="1"] .action-slot[data-slot="8"] { visibility: visible; opacity: 1; } /* RT armed: set 2. */ #game.pad-mode[data-pad-set="2"] .action-slot[data-slot="9"], #game.pad-mode[data-pad-set="2"] .action-slot[data-slot="10"], #game.pad-mode[data-pad-set="2"] .action-slot[data-slot="11"], #game.pad-mode[data-pad-set="2"] .action-slot[data-slot="12"], #game.pad-mode[data-pad-set="2"] .action-slot[data-slot="13"], #game.pad-mode[data-pad-set="2"] .action-slot[data-slot="14"], #game.pad-mode[data-pad-set="2"] .action-slot[data-slot="15"], #game.pad-mode[data-pad-set="2"] .action-slot[data-slot="16"] { visibility: visible; opacity: 1; } /* Chord (LT+RT): set 3 — hidden until the chord is held. This maps to FFXIV's "Expanded Hold" access (hold one trigger, press the other, to reach a third set), verified against AkhMorning's 7.x controller guide. FFXIV's Expanded gives an 8-slot set exactly as ours does; its separate WXHB (double-tap) path is the deferred double-tap feature, not this. Also the ship-default answer to taste checkpoint Q3. */ #game.pad-mode[data-pad-set="3"] .action-slot[data-slot="17"], #game.pad-mode[data-pad-set="3"] .action-slot[data-slot="18"], #game.pad-mode[data-pad-set="3"] .action-slot[data-slot="19"], #game.pad-mode[data-pad-set="3"] .action-slot[data-slot="20"], #game.pad-mode[data-pad-set="3"] .action-slot[data-slot="21"], #game.pad-mode[data-pad-set="3"] .action-slot[data-slot="22"], #game.pad-mode[data-pad-set="3"] .action-slot[data-slot="23"], #game.pad-mode[data-pad-set="3"] .action-slot[data-slot="24"] { visibility: visible; opacity: 1; } /* --- Button glyphs (replace keyboard key hints) --- The .slot-key span keeps its box; its text zeroes out and the glyph renders via ::after (both existing .action-slot pseudo-elements are taken by state overlays — .disabled::after, .out-of-range::before). */ #game.pad-mode .slot-key { font-size: 0; } #game.pad-mode .slot-key::after { font-size: var(--action-key-size); } /* d-pad glyphs, flavor-independent (set slots 1-4) */ #game.pad-mode .action-slot[data-slot="1"] .slot-key::after, #game.pad-mode .action-slot[data-slot="9"] .slot-key::after, #game.pad-mode .action-slot[data-slot="17"] .slot-key::after { content: '▲'; } #game.pad-mode .action-slot[data-slot="2"] .slot-key::after, #game.pad-mode .action-slot[data-slot="10"] .slot-key::after, #game.pad-mode .action-slot[data-slot="18"] .slot-key::after { content: '▶'; } #game.pad-mode .action-slot[data-slot="3"] .slot-key::after, #game.pad-mode .action-slot[data-slot="11"] .slot-key::after, #game.pad-mode .action-slot[data-slot="19"] .slot-key::after { content: '▼'; } #game.pad-mode .action-slot[data-slot="4"] .slot-key::after, #game.pad-mode .action-slot[data-slot="12"] .slot-key::after, #game.pad-mode .action-slot[data-slot="20"] .slot-key::after { content: '◀'; } /* face glyphs — Xbox letters (default flavor, and the generic fallback) */ #game.pad-mode .action-slot[data-slot="5"] .slot-key::after, #game.pad-mode .action-slot[data-slot="13"] .slot-key::after, #game.pad-mode .action-slot[data-slot="21"] .slot-key::after { content: 'Y'; } #game.pad-mode .action-slot[data-slot="6"] .slot-key::after, #game.pad-mode .action-slot[data-slot="14"] .slot-key::after, #game.pad-mode .action-slot[data-slot="22"] .slot-key::after { content: 'B'; } #game.pad-mode .action-slot[data-slot="7"] .slot-key::after, #game.pad-mode .action-slot[data-slot="15"] .slot-key::after, #game.pad-mode .action-slot[data-slot="23"] .slot-key::after { content: 'A'; } #game.pad-mode .action-slot[data-slot="8"] .slot-key::after, #game.pad-mode .action-slot[data-slot="16"] .slot-key::after, #game.pad-mode .action-slot[data-slot="24"] .slot-key::after { content: 'X'; } /* face glyphs — PlayStation shapes (data-pad-prompts="ps" wins by the extra attribute selector's specificity) */ #game.pad-mode[data-pad-prompts="ps"] .action-slot[data-slot="5"] .slot-key::after, #game.pad-mode[data-pad-prompts="ps"] .action-slot[data-slot="13"] .slot-key::after, #game.pad-mode[data-pad-prompts="ps"] .action-slot[data-slot="21"] .slot-key::after { content: '△'; } #game.pad-mode[data-pad-prompts="ps"] .action-slot[data-slot="6"] .slot-key::after, #game.pad-mode[data-pad-prompts="ps"] .action-slot[data-slot="14"] .slot-key::after, #game.pad-mode[data-pad-prompts="ps"] .action-slot[data-slot="22"] .slot-key::after { content: '○'; } #game.pad-mode[data-pad-prompts="ps"] .action-slot[data-slot="7"] .slot-key::after, #game.pad-mode[data-pad-prompts="ps"] .action-slot[data-slot="15"] .slot-key::after, #game.pad-mode[data-pad-prompts="ps"] .action-slot[data-slot="23"] .slot-key::after { content: '✕'; } #game.pad-mode[data-pad-prompts="ps"] .action-slot[data-slot="8"] .slot-key::after, #game.pad-mode[data-pad-prompts="ps"] .action-slot[data-slot="16"] .slot-key::after, #game.pad-mode[data-pad-prompts="ps"] .action-slot[data-slot="24"] .slot-key::after { content: '□'; } /* Empty slots keep their glyph visible in pad-mode (ui.css sets visibility:hidden on .empty-slot .slot-key; the physical button still exists on the pad, so its hint should too). `inherit`, NOT `visible`: visibility on a descendant OVERRIDES a hidden ancestor, so `visible` here would float the glyphs of empty slots in HIDDEN sets over the cross. Inherit follows the slot's own set visibility. */ #game.pad-mode .empty-slot .slot-key { visibility: inherit; }