/* HORNET BAY — HUD & menu styling. Amiga-inspired chrome. */
* { margin:0; padding:0; box-sizing:border-box; }
html,body { width:100%; height:100%; overflow:hidden; background:#000;
  font-family:"Courier New", ui-monospace, monospace; color:#cfe8ff;
  -webkit-user-select:none; user-select:none; }
canvas { position:fixed; inset:0; width:100%; height:100%; display:block;
  image-rendering:pixelated; image-rendering:crisp-edges; }
#hud { z-index:5; pointer-events:none; }
#gl  { z-index:1; }

.hidden { display:none !important; }
.overlay { position:fixed; inset:0; z-index:20; display:flex; flex-direction:column;
  align-items:center; justify-content:center; background:radial-gradient(ellipse at 50% 30%, #0a1a3a 0%, #030810 70%);
  overflow:hidden; }
#menu { background:radial-gradient(ellipse at 50% 30%, rgba(10,26,58,0.42) 0%, rgba(3,8,16,0.66) 70%); }

/* ------- title ------- */
.stars { position:absolute; inset:0; pointer-events:none; opacity:.5;
  background-image:
    radial-gradient(1px 1px at 20% 30%, #fff, transparent),
    radial-gradient(1px 1px at 40% 70%, #9cf, transparent),
    radial-gradient(2px 2px at 65% 20%, #fff, transparent),
    radial-gradient(1px 1px at 80% 55%, #9cf, transparent),
    radial-gradient(1px 1px at 10% 80%, #fff, transparent),
    radial-gradient(2px 2px at 90% 85%, #fff, transparent),
    radial-gradient(1px 1px at 55% 45%, #fff, transparent),
    radial-gradient(1px 1px at 33% 12%, #9cf, transparent);
  background-repeat:repeat; background-size:640px 640px; }
.title-block { text-align:center; margin-bottom:34px; z-index:1; }
.title-top { font-size:11px; letter-spacing:4px; color:#5f86b8; margin-bottom:14px; }
.game-title { font-size:64px; line-height:.95; letter-spacing:6px; color:#fff;
  text-shadow:0 0 18px #2f7dff, 0 0 60px #1a3c8f; font-weight:700; font-style:italic; }
.game-title span { color:#ffb437; text-shadow:0 0 18px #b45f00, 0 0 60px #7a3800; }
.title-sub { margin-top:14px; font-size:12px; letter-spacing:5px; color:#7fa8d8; }

.menu-mode-title { font-size:15px; letter-spacing:4px; color:#ffd75e; margin-bottom:10px; z-index:1;
  text-shadow:0 0 10px #8f6a00; }
.menu-mode-title:empty { display:none; }
.menu-list { display:flex; flex-direction:column; gap:8px; z-index:1; min-width:420px; max-height:52vh; overflow-y:auto; padding:4px; }
.mbtn { font-family:inherit; font-size:15px; letter-spacing:2px; text-align:left;
  background:linear-gradient(90deg, rgba(20,50,110,.85), rgba(8,18,40,.85));
  color:#cfe8ff; border:1px solid #2f5f9f; padding:10px 18px; cursor:pointer;
  transition:all .12s; position:relative; }
.mbtn:hover:not(:disabled) { background:linear-gradient(90deg, #ffb437, #d98a12); color:#081020; border-color:#ffd580; }
.mbtn:disabled { opacity:.32; cursor:default; }
.mbtn .tag { float:right; font-size:11px; color:#ffb437; margin-left:24px; }
.mbtn:hover:not(:disabled) .tag { color:#081020; }
.mbtn.center { text-align:center; }
.menu-footer { margin-top:30px; text-align:center; z-index:1; }
#pilot-record { font-size:12px; color:#7fa8d8; letter-spacing:1px; margin-bottom:10px; }
.hint { font-size:11px; letter-spacing:2px; color:#46648c; }

/* ------- briefing / debrief ------- */
.brief-box { width:min(760px, 92vw); max-height:88vh; overflow-y:auto; background:rgba(4,12,28,.92);
  border:1px solid #2f5f9f; box-shadow:0 0 40px rgba(30,90,200,.35) inset, 0 0 60px rgba(0,0,0,.8);
  padding:34px 40px; z-index:1; }
.brief-box.wide { width:min(860px,94vw); }
.brief-head { display:flex; justify-content:space-between; font-size:11px; letter-spacing:3px; color:#5f86b8; margin-bottom:10px; }
.brief-class { color:#ff5b4d; }
.brief-box h2 { font-size:26px; letter-spacing:3px; color:#ffb437; margin-bottom:16px; font-style:italic; }
#brief-body { font-size:14px; line-height:1.75; color:#c8dcf5; white-space:pre-wrap; }
#brief-loadout { margin-top:18px; font-size:12px; color:#7fd8a8; letter-spacing:1px; line-height:1.7; }
.brief-buttons { display:flex; gap:12px; margin-top:26px; }
.brief-buttons .mbtn { text-align:center; flex:1; }
#debrief-body { font-size:14px; line-height:1.8; color:#c8dcf5; white-space:pre-wrap; }
#debrief-title.good { color:#7fd8a8; }
#debrief-title.bad { color:#ff5b4d; }

.ctl-grid { display:grid; grid-template-columns:170px 1fr; gap:7px 22px; font-size:13px; line-height:1.5; color:#c8dcf5; }
.ctl-grid b { color:#ffb437; }

.pause-inner { text-align:center; }
.pause-inner h2 { font-size:40px; letter-spacing:10px; color:#ffb437; margin-bottom:26px; font-style:italic; }
.pause-inner .menu-list { min-width:340px; }

#manual-btn { position:fixed; top:8px; right:10px; z-index:18; background:rgba(0,22,10,0.55);
  color:#39d353; border:1px solid #2a6a3a; font:bold 12px "Courier New",monospace;
  letter-spacing:1px; padding:4px 10px; cursor:pointer; border-radius:2px; }
#manual-btn:hover { background:rgba(12,55,28,0.85); }
#manual-btn.hidden { display:none; }
#controls { z-index:25; }   /* manual reads above the PAUSED card */
#flash { position:fixed; inset:0; z-index:15; pointer-events:none; background:#fff; opacity:0; transition:opacity .1s; }
#errbox { position:fixed; left:8px; bottom:8px; z-index:99; color:#ff6b5d; font-size:11px;
  max-width:60vw; pointer-events:none; white-space:pre-wrap; }
::-webkit-scrollbar { width:8px; } ::-webkit-scrollbar-thumb { background:#2f5f9f; }
::-webkit-scrollbar-track { background:#0a1830; }