* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #0e2147; font-family: "Segoe UI", Roboto, Arial, sans-serif; color: #e9eef7; }
canvas { display: block; }
.hidden { display: none !important; }
kbd { display: inline-block; padding: 1px 6px; border: 1px solid #e3a21b; border-radius: 4px; color: #ffcc55; font: 600 12px monospace; background: rgba(0,0,0,.4); }

#hud { position: fixed; inset: 0; pointer-events: none; }
#location { position: absolute; top: 16px; left: 18px; padding: 6px 14px; background: rgba(10,16,30,.65); border-left: 4px solid #e3a21b; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; font-size: 14px; }
#crosshair { position: absolute; left: 50%; top: 50%; width: 6px; height: 6px; margin: -3px; border-radius: 50%; background: rgba(255,255,255,.85); box-shadow: 0 0 4px #000; }
#prompt { position: absolute; left: 50%; top: calc(50% + 34px); transform: translateX(-50%); padding: 6px 12px; background: rgba(10,16,30,.75); border-radius: 4px; font-size: 15px; }
#toast { position: absolute; left: 50%; top: 70px; transform: translateX(-50%); padding: 8px 18px; background: rgba(227,162,27,.92); color: #111; font-weight: 700; border-radius: 4px; }
#help { position: absolute; left: 18px; bottom: 14px; font-size: 12px; line-height: 1.9; color: #c5d1e6; background: rgba(10,16,30,.55); padding: 8px 12px; border-radius: 4px; }
#spawn-list span { margin-right: 10px; white-space: nowrap; }
#spawn-list b { color: #ffcc55; }

.overlay { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(6,12,28,.55); backdrop-filter: blur(2px); }
#start { backdrop-filter: none; background: linear-gradient(90deg, rgba(6,12,28,.85) 0%, rgba(6,12,28,.35) 60%, rgba(6,12,28,0) 100%); justify-content: flex-start; padding-left: 6vw; }
.panel { max-width: 560px; padding: 28px 32px; background: rgba(12,20,38,.88); border: 1px solid #2c3f63; border-top: 4px solid #e3a21b; border-radius: 6px; box-shadow: 0 10px 40px rgba(0,0,0,.5); }
.panel.wide { max-width: 920px; max-height: 86vh; overflow: auto; }
.eyebrow { color: #e3a21b; text-transform: uppercase; letter-spacing: .12em; font-size: 12px; margin: 0; }
h1 { font-size: 46px; margin: 6px 0 12px; letter-spacing: .02em; }
h1 span { color: #e3a21b; }
h2 { margin-top: 0; color: #ffcc55; }
h3 { color: #e3a21b; margin-bottom: 6px; }
.small { font-size: 12px; color: #9fb0cc; }
.buttons { display: flex; gap: 10px; flex-wrap: wrap; margin: 18px 0 8px; }
button { cursor: pointer; padding: 10px 18px; font: 600 14px inherit; font-family: inherit; color: #e9eef7; background: #22324f; border: 1px solid #3c5480; border-radius: 4px; }
button:hover { background: #2d4268; }
button.primary { background: #e3a21b; color: #111; border-color: #e3a21b; }
button.primary:hover { background: #f2b53a; }
table { width: 100%; border-collapse: collapse; font-size: 13px; }
th, td { text-align: left; padding: 5px 8px; border-bottom: 1px solid #2c3f63; vertical-align: top; }
th { color: #9fb0cc; font-weight: 600; }
#info-body img { width: 100%; border-radius: 4px; margin: 8px 0; }

#flight { position: absolute; right: 18px; bottom: 14px; width: 390px; font-size: 13px; background: rgba(8,14,26,.72); border: 1px solid #2c3f63; border-top: 3px solid #43f0c8; border-radius: 4px; padding: 10px 14px; color: #cfe9e2; font-family: "Consolas", "DejaVu Sans Mono", monospace; }
.fl-title { color: #43f0c8; font-weight: 700; letter-spacing: .08em; margin-bottom: 6px; }
#fl-status { color: #ffcc55; }
#fl-grid { display: grid; grid-template-columns: auto 1fr; gap: 2px 12px; }
#fl-grid .k { color: #7f97b8; }
#fl-grid .warn { color: #ff7a5c; }
#fl-grid .ok { color: #7dff9c; }
#fl-hint { margin: 8px 0 6px; color: #ffcc55; min-height: 1.2em; }
.fl-keys { font-family: "Segoe UI", Roboto, Arial, sans-serif; font-size: 11px; line-height: 1.9; color: #9fb0cc; border-top: 1px solid #22324f; padding-top: 4px; }
#nav-marker { position: absolute; left: 0; top: 0; transform: translate(-50%, -50%); text-align: center; }
#nav-marker .ring { width: 26px; height: 26px; margin: 0 auto; border: 2px solid #43f0c8; transform: rotate(45deg); box-shadow: 0 0 6px #43f0c8; }
#nav-marker .label { margin-top: 6px; font: 600 12px monospace; color: #43f0c8; text-shadow: 0 0 3px #000; white-space: nowrap; }
#nav-marker.edge .ring { border-color: #ffcc55; box-shadow: 0 0 6px #ffcc55; }
#nav-marker.edge .label { color: #ffcc55; }
body.seated #help { display: none; }