/* v1.9 gamepad: focus ring, world cursor, radial order menu, button glyphs, hints. Only visible while a controller is in use (body.gp-active). */
:root { --gp-a: #6CC24A; --gp-b: #E0533D; --gp-x: #3D8FE0; --gp-y: #F2B544; }
body.gp-ps { --gp-a: #7FA7E8; --gp-b: #E0533D; --gp-x: #D88BC8; --gp-y: #4FD0A0; }

/* glyphs */
.gp-g { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0; margin-right: 5px; border-radius: 50%; background: #1A241D; border: 1.5px solid var(--muted); color: #F3F6F2; font-family: var(--mono); font-size: 10px; font-weight: 500; line-height: 1; letter-spacing: 0; vertical-align: -4px; }
.gp-g.wide { border-radius: 5px; padding: 0 4px; font-size: 9px; margin-right: 3px; }
.gp-g.gp-start.wide, .gp-g.gp-back.wide { font-size: 8px; }
.gp-g.gp-a { border-color: var(--gp-a); color: var(--gp-a); } .gp-g.gp-b { border-color: var(--gp-b); color: var(--gp-b); }
.gp-g.gp-x { border-color: var(--gp-x); color: var(--gp-x); } .gp-g.gp-y { border-color: var(--gp-y); color: var(--gp-y); }

/* focus ring for menus, dialogs and the HUD */
body.gp-active .gp-focus { outline: 2px solid var(--green) !important; outline-offset: 2px; box-shadow: 0 0 0 5px rgba(124, 255, 154, 0.16), 0 0 22px rgba(124, 255, 154, 0.28); position: relative; z-index: 2; }
body.gp-active .menu button.gp-focus { background: var(--sel); border-left-color: var(--green); color: #F3F6F2; outline-offset: -2px; }
body.gp-active .gp-press { transform: scale(0.97); filter: brightness(1.25); }
body.gp-active button, body.gp-active a { transition: transform 0.08s, filter 0.08s; }

/* controller glyphs replace keyboard hints */
body.gp-active #guide-do kbd, body.gp-active #guide-go kbd, body.gp-active .cmd kbd, body.gp-active #cmd-status span:last-child { display: none; }
body.gp-active #guide-do::after, body.gp-active #guide-go::after, body.gp-active #go::after, body.gp-active [id$="-back"]::after {
  display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; margin-left: 8px; border-radius: 50%; border: 1.5px solid currentColor; font-family: var(--mono); font-size: 10px; font-weight: 500; line-height: 1; letter-spacing: 0; vertical-align: 1px; }
body.gp-active.gp-xbox #guide-do::after { content: 'X'; } body.gp-active.gp-ps #guide-do::after { content: '□'; }
body.gp-active.gp-xbox #guide-go::after, body.gp-active.gp-xbox #go::after { content: 'Y'; } body.gp-active.gp-ps #guide-go::after, body.gp-active.gp-ps #go::after { content: '△'; }
body.gp-active.gp-xbox [id$="-back"]::after { content: 'B'; } body.gp-active.gp-ps [id$="-back"]::after { content: '○'; }

/* world cursor */
#gp-cursor { position: absolute; left: 0; top: 0; z-index: 2; width: 0; height: 0; pointer-events: none; will-change: transform; }
body:not(.gp-active) #gp-cursor, #gp-cursor.off, body.cinematic #gp-cursor { display: none; }
#gp-cursor i { position: absolute; left: -17px; top: -17px; width: 34px; height: 34px; border: 2px solid rgba(124, 255, 154, 0.9); border-radius: 50%; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.6), 0 0 14px rgba(124, 255, 154, 0.35); transition: transform 0.12s, border-color 0.12s; }
#gp-cursor i::before, #gp-cursor i::after { content: ''; position: absolute; background: rgba(124, 255, 154, 0.9); }
#gp-cursor i::before { left: 50%; top: -7px; bottom: -7px; width: 2px; margin-left: -1px; -webkit-mask: linear-gradient(#000 0 7px, transparent 7px calc(100% - 7px), #000 calc(100% - 7px)); mask: linear-gradient(#000 0 7px, transparent 7px calc(100% - 7px), #000 calc(100% - 7px)); }
#gp-cursor i::after { top: 50%; left: -7px; right: -7px; height: 2px; margin-top: -1px; -webkit-mask: linear-gradient(90deg, #000 0 7px, transparent 7px calc(100% - 7px), #000 calc(100% - 7px)); mask: linear-gradient(90deg, #000 0 7px, transparent 7px calc(100% - 7px), #000 calc(100% - 7px)); }
#gp-cursor b { position: absolute; left: -2px; top: -2px; width: 4px; height: 4px; border-radius: 50%; background: #F3F6F2; }
#gp-cursor.on-target i { transform: scale(0.78); border-color: var(--amber); box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.6), 0 0 16px rgba(242, 181, 68, 0.5); }
#gp-cursor.on-target i::before, #gp-cursor.on-target i::after { background: var(--amber); }

/* radial order menu */
#gp-radial { --r: min(150px, 30vmin); position: absolute; inset: 0; z-index: 30; display: none; pointer-events: none; }
#gp-radial.show { display: block; animation: gp-pop 0.12s ease-out; }
@keyframes gp-pop { from { opacity: 0; transform: scale(0.92); } to { opacity: 1; transform: scale(1); } }
#gp-radial .gp-ring { position: absolute; left: 50%; top: 50%; width: calc(var(--r) * 2 + 120px); height: calc(var(--r) * 2 + 120px); transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(circle, rgba(7, 10, 8, 0.94) 0 34%, rgba(7, 10, 8, 0.86) 35% 68%, rgba(7, 10, 8, 0) 71%); border: 1px solid rgba(124, 255, 154, 0.12); }
#gp-radial .gp-slice { position: absolute; left: 50%; top: 50%; width: 96px; height: 58px; transform: translate(calc(var(--px) * var(--r) - 50%), calc(var(--py) * var(--r) - 50%)); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; border: 1px solid #243326; background: rgba(13, 18, 16, 0.96); color: #B4C0B6; font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.1em; text-align: center; line-height: 1.15; transition: transform 0.08s, background 0.08s; }
#gp-radial .gp-slice span { max-width: 90px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#gp-radial .gp-slice.on { border-color: #2E7A47; color: var(--green); }
#gp-radial .gp-slice.off { opacity: 0.38; }
#gp-radial .gp-slice.sel { background: var(--green); border-color: var(--green); color: #0B0F0C; transform: translate(calc(var(--px) * var(--r) - 50%), calc(var(--py) * var(--r) - 50%)) scale(1.12); box-shadow: 0 0 24px rgba(124, 255, 154, 0.45); }
#gp-radial .gp-slice.sel.off { background: #3E4F42; border-color: #3E4F42; color: #E6EBE4; box-shadow: none; opacity: 0.8; }
#gp-radial .gp-hub { position: absolute; left: 50%; top: 50%; width: 132px; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; }
#gp-radial .gp-hub b { font-family: var(--display); font-weight: 700; font-size: 20px; letter-spacing: 0.1em; color: #F3F6F2; line-height: 1.05; }
#gp-radial .gp-hub span { font-family: var(--mono); font-size: 9px; letter-spacing: 0.12em; color: var(--muted); }
@media (max-width: 520px), (max-height: 520px) { #gp-radial .gp-slice { width: 74px; height: 48px; font-size: 8px; } #gp-radial .gp-slice svg { width: 17px; height: 17px; } #gp-radial .gp-hub b { font-size: 16px; } #gp-radial .gp-ring { width: calc(var(--r) * 2 + 90px); height: calc(var(--r) * 2 + 90px); } }

/* hint strip */
#gp-hints { position: fixed; z-index: 15; left: 50%; bottom: 10px; transform: translateX(-50%); display: none; align-items: center; gap: 14px; max-width: calc(100% - 24px); padding: 6px 12px; background: rgba(7, 10, 8, 0.9); border: 1px solid var(--line2); font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em; color: #B4C0B6; white-space: nowrap; overflow: hidden; pointer-events: none; }
#gp-hints.show { display: flex; }
#gp-hints.mission { position: absolute; z-index: 1; left: 258px; bottom: 92px; transform: none; display: none; grid-template-columns: auto auto; column-gap: 16px; row-gap: 5px; padding: 8px 12px; max-width: none; }
#gp-hints.mission.show { display: grid; }
#gp-hints .gp-tag { padding: 1px 6px; background: var(--green); color: #0B0F0C; }
body.cinematic #gp-hints.mission { display: none; }
@media (max-width: 900px), (pointer: coarse) and (max-width: 1100px) { #gp-hints { font-size: 9px; gap: 10px; } #gp-hints .gp-long { display: none; } #gp-hints.mission { left: auto; right: 8px; bottom: 84px; grid-template-columns: auto; padding: 5px 8px; } }

/* connect toast */
#gp-connect { position: fixed; z-index: 65; top: 14px; right: 14px; display: flex; align-items: center; gap: 12px; padding: 10px 14px; background: rgba(7, 10, 8, 0.96); border: 1px solid var(--green); color: var(--green); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5); transform: translateY(-140%); opacity: 0; transition: transform 0.3s ease, opacity 0.3s ease; pointer-events: none; max-width: calc(100% - 28px); }
#gp-connect.show { transform: none; opacity: 1; }
#gp-connect.off { border-color: var(--muted); color: var(--muted); }
#gp-connect div { display: flex; flex-direction: column; gap: 4px; }
#gp-connect b { font-family: var(--display); font-weight: 700; font-size: 16px; letter-spacing: 0.12em; color: #F3F6F2; }
#gp-connect span { font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em; color: #B4C0B6; }