/* 02-hud-and-responsive.css — panel placement, radar, economy, weapons,
   and the title tableau. Intentionally overrides base rules where noted.
   DarkOrbit layout: economy top-left, radar top-right, ship bottom-left,
   weapons/status bottom-right, radar is a square grid. */

/* Economy / pilot panel — top left */
#pilotPanel { top: max(34px, calc(env(safe-area-inset-top) + 16px)); left: max(20px, env(safe-area-inset-left)); width: 212px; }
.creditRow { display: flex; gap: 10px; padding: 8px 10px; border-bottom: 1px solid var(--line); }
.credit { display: flex; align-items: center; gap: 6px; }
.credit .cred { display: inline-block; width: 10px; height: 10px; border-radius: 2px; flex: none; }
.credit .credits { background: var(--gold); box-shadow: 0 0 6px var(--gold); }
.credit .uri { background: var(--uri); box-shadow: 0 0 6px var(--uri); transform: rotate(45deg); }
.credit b { color: var(--hud); font-family: "Arial Narrow", Impact, sans-serif; font-size: 18px; font-weight: 900; }
.credit span { color: var(--hud-dim); font-size: 8px; }
#xpReadout { position: static; height: auto; padding: 7px 10px; transform: none; background: none; }
#xpReadout span { position: static; color: var(--hud-dim); font: 700 7px Consolas, monospace; letter-spacing: .14em; display: block; margin-bottom: 4px; }
#xpReadout span b { color: var(--green); }
#xpReadout i { display: block; height: 4px; width: 0; background: linear-gradient(90deg, var(--green), var(--cyan)); box-shadow: 0 0 6px var(--green); transition: width .2s; }
#resourceRow { display: flex; justify-content: space-between; gap: 6px; padding: 7px 10px; }
.res { display: flex; align-items: center; gap: 5px; }
.res i { display: inline-block; width: 8px; height: 8px; border-radius: 1px; }
.res b { color: var(--hud); font-size: 12px; }
.res span { color: var(--hud-dim); font-size: 7px; }

/* Ship / drive panel — bottom left */
#flightPanel { bottom: max(20px, env(safe-area-inset-bottom)); left: max(20px, env(safe-area-inset-left)); width: 232px; }

/* Weapons / status panel — bottom right */
#telemetryPanel { bottom: max(20px, env(safe-area-inset-bottom)); right: max(20px, env(safe-area-inset-right)); width: 232px; }
.weaponRow { display: grid; grid-template-columns: repeat(3,1fr); gap: 1px; padding: 0; border-bottom: 1px solid var(--line); }
.weapon { padding: 8px 6px; text-align: center; background: rgba(10,18,34,.4); }
.weapon + .weapon { border-left: 1px solid var(--line); }
.weapon span { display: block; color: var(--hud-dim); font-size: 7px; letter-spacing: .12em; }
.weapon b { color: var(--gold); font-family: "Arial Narrow", Impact, sans-serif; font-size: 20px; }
.metricPair { display: grid; grid-template-columns: 1fr 1fr; }
.metric { padding: 7px 10px; }
.metric + .metric { border-left: 1px solid var(--line); }
.metric .value { font-size: 18px; }

/* Radar — top right, square grid */
#galaxyMap {
    position: absolute; top: max(34px, calc(env(safe-area-inset-top) + 16px)); right: max(20px, env(safe-area-inset-right));
    width: 168px; padding: 7px; border: 1px solid rgba(25,200,255,.4);
    background: var(--panel); color: var(--hud); font: 800 7px Consolas, monospace; letter-spacing: .1em;
    clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
    pointer-events: none;
}
.mapHeader { display: flex; justify-content: space-between; padding-bottom: 5px; color: var(--cyan); }
.mapHeader b { color: var(--gold); }
#mapField { position: relative; height: 150px; overflow: hidden; border: 1px solid rgba(25,200,255,.2); background: radial-gradient(circle at center, rgba(12,30,60,.5), rgba(2,4,12,.95)); }
#mapGrid { position: absolute; inset: 0; opacity: .4; background: repeating-linear-gradient(0deg, transparent 0 18px, rgba(25,200,255,.22) 18px 19px), repeating-linear-gradient(90deg, transparent 0 18px, rgba(25,200,255,.22) 18px 19px); }
/* Player arrow — center */
#mapPlayer { position: absolute; z-index: 3; left: 50%; top: 50%; width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 11px solid var(--cyan); filter: drop-shadow(0 0 5px var(--cyan)); transform: translate(-50%,-50%); }
/* Aggregate hostile dot */
#mapAliens { position: absolute; z-index: 2; left: 50%; top: 50%; width: 7px; height: 7px; background: var(--red); transform: translate(-50%,-50%); box-shadow: 0 0 6px var(--red); transition: transform .12s; }
/* Boss marker */
#mapBoss { position: absolute; z-index: 2; left: 50%; top: 50%; width: 10px; height: 10px; background: var(--orange); transform: translate(-50%,-50%) rotate(45deg); box-shadow: 0 0 8px var(--orange); opacity: 0; }
/* Home base — green square */
#mapStation { position: absolute; z-index: 2; left: 50%; top: 50%; width: 9px; height: 9px; background: var(--green); transform: translate(-50%,-50%); box-shadow: 0 0 7px var(--green); }
/* Portal — cyan ring */
#mapPortal { position: absolute; z-index: 2; left: 50%; top: 50%; width: 11px; height: 11px; border: 2px solid var(--cyan); border-radius: 50%; transform: translate(-50%,-50%); box-shadow: 0 0 7px var(--cyan); }
#mapTarget { padding-top: 6px; overflow: hidden; color: rgba(207,230,255,.72); font-size: 6px; white-space: nowrap; text-overflow: ellipsis; }

#help { position: absolute; left: 50%; bottom: max(20px, env(safe-area-inset-bottom)); transform: translateX(-50%); display: none; color: var(--hud-dim); font-size: 8px; line-height: 1.8; text-align: center; max-width: 90vw; }
#help .help-cat { color: var(--cyan); font-weight: 900; margin-right: 5px; letter-spacing: .08em; }
#help b { color: var(--gold); }

/* Mobile controls */
#mobileControls { display: none; position: fixed; inset: 0; z-index: 9; pointer-events: none; }
#stickZone { position: absolute; left: 0; bottom: 0; width: 58vw; height: 50vh; pointer-events: auto; touch-action: none; }
#stickBase { position: absolute; left: 92px; bottom: 42px; width: 126px; height: 126px; transform: translate(-50%,0); border: 1px solid rgba(120,170,230,.42); border-radius: 50%; background: rgba(6,12,24,.4); box-shadow: inset 0 0 0 9px rgba(120,170,230,.04); opacity: .75; }
#stickBase.active { opacity: 1; }
#stickBase::before, #stickBase::after { content: ""; position: absolute; background: rgba(120,170,230,.18); }
#stickBase::before { left: 50%; top: 10px; bottom: 10px; width: 1px; }
#stickBase::after { left: 10px; right: 10px; top: 50%; height: 1px; }
#stickKnob { position: absolute; left: 50%; top: 50%; width: 49px; height: 49px; transform: translate(-50%,-50%); border: 2px solid var(--cyan); border-radius: 50%; background: var(--blue); box-shadow: 0 5px 15px rgba(0,0,0,.4); will-change: transform; }
.mobileButton { position: absolute; min-width: 0; padding: 0; border: 1px solid rgba(120,170,230,.48); border-radius: 50%; background: rgba(6,12,24,.6); color: var(--hud); font: 800 10px Consolas, monospace; pointer-events: auto; touch-action: none; }
.mobileButton.pressed { color: #04101a; background: var(--gold); }
#gunButton { right: max(20px, env(safe-area-inset-right)); bottom: max(22px, env(safe-area-inset-bottom)); width: 84px; height: 84px; color: var(--green); border-color: var(--green); }
#missileButton { right: max(31px, env(safe-area-inset-right)); bottom: calc(max(22px, env(safe-area-inset-bottom)) + 98px); width: 60px; height: 60px; color: var(--gold); border-color: var(--gold); }
#boostButton { right: calc(max(20px, env(safe-area-inset-right)) + 96px); bottom: max(22px, env(safe-area-inset-bottom)); width: 72px; height: 72px; color: var(--cyan); border-color: var(--cyan); }
#cameraButton { right: calc(max(20px, env(safe-area-inset-right)) + 105px); bottom: calc(max(22px, env(safe-area-inset-bottom)) + 84px); width: 54px; height: 54px; }
#throttleUp, #throttleDown { right: calc(max(20px, env(safe-area-inset-right)) + 174px); width: 50px; height: 50px; font-size: 20px; }
#throttleUp { bottom: calc(max(22px, env(safe-area-inset-bottom)) + 55px); }
#throttleDown { bottom: max(22px, env(safe-area-inset-bottom)); }
#flareButton { right: calc(max(20px, env(safe-area-inset-right)) + 170px); bottom: calc(max(22px, env(safe-area-inset-bottom)) + 118px); width: 58px; height: 58px; color: var(--orange); border-color: var(--orange); }
#posterButton { right: max(22px, env(safe-area-inset-right)); top: max(210px, calc(env(safe-area-inset-top) + 194px)); width: 52px; height: 52px; color: var(--hud); }

/* Poster panel */
#posterPanel { display: none; position: fixed; z-index: 30; inset: 0; pointer-events: none; font: 800 10px Consolas, monospace; letter-spacing: .16em; }
#posterPanel::before, #posterPanel::after { content: ""; position: absolute; left: 4vw; right: 4vw; height: 1px; background: rgba(207,230,255,.6); }
#posterPanel::before { top: 5vh; } #posterPanel::after { bottom: 5vh; }
#posterTitle { position: absolute; left: 5vw; top: calc(5vh + 12px); color: var(--hud); font: italic 900 clamp(26px,5vw,64px) "Arial Narrow", Impact, sans-serif; letter-spacing: -.04em; text-shadow: 4px 5px 0 rgba(25,200,255,.3); }
#posterControls { position: absolute; right: 5vw; bottom: calc(5vh + 13px); display: flex; gap: 8px; pointer-events: auto; }
#posterControls button { padding: 9px 12px; border: 1px solid var(--cyan); color: var(--hud); background: var(--panel); cursor: pointer; }
body.poster-mode #hud, body.poster-mode #mobileControls, body.poster-mode #vignette, body.poster-mode #speedHaze, body.poster-mode #damageFlash { display: none; }
body.poster-mode #posterPanel { display: block; }
body.poster-mode[data-poster-frame="cinema"] #posterPanel { box-shadow: inset 0 10vh 0 rgba(2,4,12,.85), inset 0 -10vh 0 rgba(2,4,12,.85); }
body.launch-mode #mobileControls { opacity: 0; visibility: hidden; }

/* Hide HUD chrome during the title tableau. */
body.intro-mode #hud, body.intro-mode #mobileControls, body.intro-mode #vignette, body.intro-mode #speedHaze, body.intro-mode #damageFlash, body.intro-mode #sunBloom { opacity: 0; visibility: hidden; }

/* Intro topline */
.introTopline { position: absolute; z-index: 3; left: max(6vw, env(safe-area-inset-left)); right: max(5vw, env(safe-area-inset-right)); top: max(24px, env(safe-area-inset-top)); display: flex !important; align-items: center; justify-content: space-between; padding-top: 10px; border-top: 2px solid var(--cyan); color: var(--hud); font: 800 9px Consolas, monospace; letter-spacing: .18em; }
.introTopline b { margin-right: 9px; color: var(--cyan); font-weight: 900; }
.introTopline span:last-child { margin-left: auto; color: var(--gold); }

/* Prominent Hull + Shield status bar — segmented, glowing, thumb-safe. */
#shipStatus {
    position: absolute; left: 50%; bottom: max(58px, calc(env(safe-area-inset-bottom) + 40px));
    transform: translateX(-50%);
    width: min(420px, 60vw);
    display: flex; flex-direction: column; gap: 6px;
    padding: 9px 12px;
    background: var(--panel);
    border: 1px solid var(--line);
    clip-path: polygon(12px 0, calc(100% - 12px) 0, 100% 50%, calc(100% - 12px) 100%, 12px 100%, 0 50%);
    backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px);
}
.ssRow { display: grid; grid-template-columns: 52px 1fr 34px; align-items: center; gap: 9px; }
.ssName { color: var(--hud-dim); font: 900 8px Consolas, monospace; letter-spacing: .16em; }
.ssRow b { color: var(--hud); font: 900 14px "Arial Narrow", Impact, sans-serif; text-align: right; font-variant-numeric: tabular-nums; }
.ssTrack { position: relative; height: 11px; background: rgba(120,170,230,.12); border: 1px solid rgba(120,170,230,.22); overflow: hidden; }
/* Segment ticks etched over the fill. */
.ssTrack::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, transparent 0 calc(10% - 1px), rgba(2,4,12,.65) calc(10% - 1px) 10%); pointer-events: none; }
.ssTrack > i { display: block; height: 100%; width: 100%; transition: width .14s linear; }
.ssHull .ssTrack > i { background: linear-gradient(90deg, #ff5a3a, var(--red)); box-shadow: 0 0 8px var(--red); }
.ssShield .ssTrack > i { background: linear-gradient(90deg, #6fe6ff, var(--cyan)); box-shadow: 0 0 8px var(--cyan); }
.ssHull b { color: var(--red); }
.ssShield b { color: var(--cyan); }
/* Weapon readout: no track, value spans the remaining columns right-aligned. */
.ssWeapon { grid-template-columns: 52px 1fr; }
.ssWeapon b { color: var(--green); text-align: right; letter-spacing: .03em; }
#shipStatus[data-state="damaged"] .ssHull .ssTrack > i { background: linear-gradient(90deg, #ff8a1e, var(--orange)); box-shadow: 0 0 8px var(--orange); }
#shipStatus[data-state="critical"] { animation: ssPulse 1s ease-in-out infinite; border-color: var(--red); }
#shipStatus[data-state="critical"] .ssHull b { color: #fff; }
@keyframes ssPulse { 0%,100% { box-shadow: 0 0 0 rgba(255,58,58,0); } 50% { box-shadow: 0 0 22px rgba(255,58,58,.45); } }

/* Floating combat damage numbers. */
#dmgLayer { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.dmgNum { position: absolute; left: 0; top: 0; will-change: transform, opacity; font: 900 17px "Arial Narrow", Impact, sans-serif; letter-spacing: .02em; text-shadow: 0 2px 5px rgba(0,0,0,.85), 0 0 8px rgba(0,0,0,.5); white-space: nowrap; }
.dmgNum.dealt { color: var(--green); text-shadow: 0 2px 5px rgba(0,0,0,.85), 0 0 10px rgba(70,227,106,.6); }
.dmgNum.boss { color: var(--gold); font-size: 22px; text-shadow: 0 2px 5px rgba(0,0,0,.85), 0 0 12px rgba(255,203,51,.7); }
.dmgNum.taken { color: var(--red); text-shadow: 0 2px 5px rgba(0,0,0,.85), 0 0 10px rgba(255,58,58,.6); }

/* Responsive */
@media (pointer: coarse), (max-width: 760px) {
    #mobileControls { display: block; }
    #help { display: block; }
    #pilotPanel { top: max(10px, env(safe-area-inset-top)); left: max(10px, env(safe-area-inset-left)); width: 168px; transform: scale(.78); transform-origin: top left; }
    #galaxyMap { top: max(10px, env(safe-area-inset-top)); right: max(10px, env(safe-area-inset-right)); width: 132px; transform: scale(.82); transform-origin: top right; }
    #galaxyMap #mapField { height: 116px; }
    #combatStatus { top: max(10px, env(safe-area-inset-top)); gap: 9px; padding-inline: 9px; transform: translateX(-50%) scale(.86); }
    #combatHint { top: max(46px, calc(env(safe-area-inset-top) + 30px)); max-width: 92vw; overflow: hidden; text-overflow: ellipsis; transform: translateX(-50%) scale(.9); }
    /* Bottom info panels collide with the joystick (left) and fire buttons
       (right). On touch screens they are hidden; the thumb-safe top stack
       (#shipStatus) and ammo counts on the fire buttons take over. */
    #flightPanel, #telemetryPanel, #flightState { display: none; }
    #shipStatus { bottom: auto; top: max(86px, calc(env(safe-area-inset-top) + 70px)); width: min(280px, 82vw); transform: translateX(-50%); }
    #shipStatus .ssRow b { font-size: 16px; }
    .dmgNum { font-size: 16px; }
    .dmgNum.boss { font-size: 20px; }
    /* Fire buttons carry their own ammo counts on mobile. */
    .mobileButton { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; line-height: 1.1; gap: 1px; }
    .mbLabel { font-size: 8px; letter-spacing: .08em; opacity: .82; }
    .mbCount { font-size: 15px; font-weight: 900; }
    #help { bottom: max(12px, env(safe-area-inset-bottom)); font-size: 7px; }
    #overlay { align-items: flex-start; background: rgba(2,4,12,.92); }
    .controls { grid-template-columns: repeat(2,1fr); }
    .shipGrid { grid-template-columns: 1fr; }
}
@media (max-width: 430px) {
    #pilotPanel { transform: scale(.62); }
    #galaxyMap { transform: scale(.66); }
    #centerHud { transform: translate(-50%,-50%) scale(.78); }
    h1 { font-size: clamp(46px, 16vw, 72px); }
    #stickBase { left: 78px; bottom: 30px; width: 112px; height: 112px; }
}
@media (max-height: 540px) {
    #pilotPanel, #galaxyMap { transform: scale(.6); }
    #combatHint { display: none; }
    #shipStatus { top: max(64px, env(safe-area-inset-top)); }
    .controls { margin: 8px 0 14px; }
}
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; } }