* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { width: 100%; height: 100%; overflow: hidden; background: #000; color: #b8d4ff; font-family: "Consolas", "Courier New", monospace; user-select: none; }
#game { position: fixed; inset: 0; }
#game canvas { display: block; }
.hidden { display: none !important; }

#hud { position: fixed; inset: 0; pointer-events: none; }

#crosshair { position: absolute; left: 50%; top: 50%; width: 0; height: 0; transition: opacity .15s; }
#crosshair i { position: absolute; background: rgba(200,225,255,.85); box-shadow: 0 0 3px rgba(0,0,0,.9); }
#crosshair .t, #crosshair .b { width: 2px; height: 8px; left: -1px; }
#crosshair .l, #crosshair .r { width: 8px; height: 2px; top: -1px; }
#crosshair .t { top: calc(-8px - var(--sp, 6px)); }
#crosshair .b { top: var(--sp, 6px); }
#crosshair .l { left: calc(-8px - var(--sp, 6px)); }
#crosshair .r { left: var(--sp, 6px); }

#hitmarker { position: absolute; left: 50%; top: 50%; width: 26px; height: 26px; margin: -13px 0 0 -13px; opacity: 0;
  background:
    linear-gradient(45deg, transparent 45%, #fff 45%, #fff 55%, transparent 55%),
    linear-gradient(-45deg, transparent 45%, #fff 45%, #fff 55%, transparent 55%);
  -webkit-mask: radial-gradient(circle, transparent 5px, #000 6px); mask: radial-gradient(circle, transparent 5px, #000 6px); }
#hitmarker.kill { background:
    linear-gradient(45deg, transparent 43%, #ff3050 43%, #ff3050 57%, transparent 57%),
    linear-gradient(-45deg, transparent 43%, #ff3050 43%, #ff3050 57%, transparent 57%); }

#damage { position: absolute; inset: 0; opacity: 0; background: radial-gradient(ellipse at center, transparent 45%, rgba(160,0,10,.75) 100%); }
#dmgdir { position: absolute; left: 50%; top: 50%; width: 220px; height: 220px; margin: -110px 0 0 -110px; opacity: 0;
  background: radial-gradient(ellipse 30px 14px at 50% 6%, rgba(255,40,40,.9), transparent); }

#scope { position: absolute; inset: 0; display: none; }
#scope.on { display: block; }
#scope .scope-ring { position: absolute; inset: 0;
  background: radial-gradient(circle at center, transparent 0, transparent min(38vh, 38vw), rgba(0,0,0,.6) calc(min(38vh, 38vw) + 2px), #000 calc(min(38vh, 38vw) + 14px)); }
#scope .scope-ring::after { content: ""; position: absolute; left: 50%; top: 50%; width: min(76vh, 76vw); height: min(76vh, 76vw); transform: translate(-50%,-50%);
  border-radius: 50%; box-shadow: inset 0 0 60px 25px rgba(0,0,0,.85), inset 0 0 0 2px rgba(20,20,30,1); }
#scope .scope-h { position: absolute; left: calc(50% - min(38vh,38vw)); width: calc(2 * min(38vh,38vw)); top: 50%; height: 1px; background: linear-gradient(90deg, #000 0 40%, rgba(10,10,10,.8) 40% 48%, transparent 48% 52%, rgba(10,10,10,.8) 52% 60%, #000 60%); }
#scope .scope-v { position: absolute; top: calc(50% - min(38vh,38vw)); height: calc(2 * min(38vh,38vw)); left: 50%; width: 1px; background: linear-gradient(180deg, transparent 0 48%, transparent 52%, rgba(10,10,10,.8) 52% 60%, #000 60%); }
#scope .scope-dot { position: absolute; left: 50%; top: 50%; width: 4px; height: 4px; margin: -2px 0 0 -2px; border-radius: 50%; background: #ff2a55; box-shadow: 0 0 6px #ff2a55; }
#scope .scope-marks { position: absolute; left: 50%; top: 50%; width: 2px; height: 90px; margin-left: -1px; margin-top: 8px;
  background: repeating-linear-gradient(180deg, rgba(0,0,0,.85) 0 1px, transparent 1px 15px); }

#objective { position: absolute; top: 18px; left: 50%; transform: translateX(-50%); text-align: center; min-width: 320px; text-shadow: 0 0 6px rgba(80,140,255,.6); }
.obj-title { font-size: 11px; letter-spacing: 4px; color: #6f95c8; }
#obj-text { font-size: 15px; letter-spacing: 1px; margin: 3px 0 6px; color: #d6e6ff; }
#obj-bar { height: 3px; background: rgba(90,130,200,.25); }
#obj-fill { height: 100%; width: 0; background: linear-gradient(90deg, #6a4bff, #c070ff); box-shadow: 0 0 8px #9a5cff; }

#radar { position: absolute; top: 16px; right: 16px; width: 180px; height: 180px; border-radius: 50%; background: rgba(4,12,26,.55); box-shadow: 0 0 0 1px rgba(90,140,220,.4), inset 0 0 30px rgba(40,90,180,.35); }

#feed { position: absolute; top: 420px; right: 18px; text-align: right; font-size: 13px; }
#feed div { margin-bottom: 4px; color: #cfe0ff; text-shadow: 0 0 4px #000; animation: feed 6s forwards; }
#feed div.bad { color: #ff7a8e; }
#feed div.good { color: #c39bff; }
@keyframes feed { 0% { opacity: 0; transform: translateX(20px);} 5% { opacity: 1; transform: none;} 80% { opacity: 1;} 100% { opacity: 0; } }

#vitals { position: absolute; left: 24px; bottom: 24px; width: 260px; }
#vitals .lbl { font-size: 11px; letter-spacing: 3px; color: #6f95c8; margin-bottom: 4px; }
#hpbar { height: 10px; background: rgba(60,100,170,.25); border: 1px solid rgba(110,160,240,.4); }
#hpfill { height: 100%; width: 100%; background: linear-gradient(90deg, #3d7bff, #8cc4ff); box-shadow: 0 0 10px rgba(80,150,255,.7); transition: width .15s; }
#hpfill.low { background: linear-gradient(90deg, #ff2c4a, #ff7a6b); box-shadow: 0 0 10px rgba(255,60,80,.7); }
#stance { margin-top: 6px; font-size: 11px; letter-spacing: 2px; color: #8fb3e8; height: 14px; }

#weapon { position: absolute; right: 26px; bottom: 22px; text-align: right; }
#wname { font-size: 12px; letter-spacing: 3px; color: #8fb3e8; }
#ammo { font-size: 42px; color: #e3ecff; text-shadow: 0 0 12px rgba(150,110,255,.8); }
#ammo .sep { color: #5a78a8; margin: 0 6px; font-size: 26px; }
#ammo #reserve { font-size: 24px; color: #9bb6e0; }
#nades { font-size: 11px; letter-spacing: 2px; color: #8fb3e8; }
#nades b { color: #e3ecff; }

#score { position: absolute; left: 24px; top: 18px; font-size: 13px; color: #9bb6e0; display: flex; gap: 16px; text-shadow: 0 0 4px #000; }
#score b { color: #fff; }
#fronts { color: #6f95c8; }

#center-msg { position: absolute; left: 0; right: 0; top: 38%; text-align: center; font-size: 30px; letter-spacing: 6px; color: #e8f0ff; text-shadow: 0 0 20px rgba(120,160,255,.9); }
#center-msg small { display: block; font-size: 14px; letter-spacing: 3px; color: #9bb6e0; margin-top: 10px; }
#center-msg.red { color: #ff6a7c; text-shadow: 0 0 20px rgba(255,40,60,.9); }

#menu { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center;
  background: radial-gradient(ellipse 120% 60% at 50% 100%, rgba(30,80,160,.45), rgba(0,0,0,.92) 60%); }
#menu.overlay { background: rgba(0,0,0,.6); }
.menu-inner { max-width: 640px; padding: 24px; text-align: center; }
.year { letter-spacing: 8px; font-size: 13px; color: #6f95c8; }
#menu h1 { font-size: 64px; letter-spacing: 16px; color: #d9e6ff; margin: 6px 0 16px; text-shadow: 0 0 30px rgba(90,150,255,.8); font-weight: 400; }
.lore { color: #9bb6e0; font-size: 14px; line-height: 1.6; margin-bottom: 20px; }
.controls { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 24px; text-align: left; font-size: 13px; color: #9bb6e0; margin: 0 auto 18px; max-width: 600px; }
.controls div { display: flex; gap: 10px; white-space: nowrap; }
.controls b { color: #e3ecff; font-weight: 400; flex: 0 0 130px; }
.tip { color: #c39bff; font-size: 13px; margin-bottom: 22px; }
#start { font-family: inherit; font-size: 18px; letter-spacing: 8px; padding: 14px 44px; color: #e8f0ff; background: rgba(60,40,160,.35);
  border: 1px solid #8a6cff; box-shadow: 0 0 24px rgba(140,90,255,.5), inset 0 0 18px rgba(140,90,255,.3); cursor: pointer; }
#start:hover { background: rgba(110,70,230,.5); }
#start:disabled { opacity: .4; cursor: default; }
#loading { margin-top: 12px; font-size: 12px; color: #6f95c8; height: 14px; }

#perkbar { position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%); display: flex; gap: 8px; }
#perkbar .perk { min-width: 86px; padding: 6px 8px 5px; font-size: 10px; letter-spacing: 1.5px; text-align: center; color: #cfe0ff;
  background: rgba(6,14,28,.6); border: 1px solid rgba(110,160,240,.25); border-bottom: 2px solid var(--c); opacity: .65; }
#perkbar .perk.sel { opacity: 1; background: rgba(20,30,60,.75); box-shadow: 0 0 12px var(--c); }
#perkbar .perk .k { display: block; font-size: 9px; color: #7f9cc8; margin-bottom: 2px; }
#effects { position: absolute; left: 24px; bottom: 90px; font-size: 12px; letter-spacing: 2px; }
#effects div { margin-top: 4px; text-shadow: 0 0 8px currentColor; }
#hint { position: absolute; left: 0; right: 0; bottom: 110px; text-align: center; font-size: 13px; letter-spacing: 2px; color: #9bb6e0; text-shadow: 0 0 6px #000; transition: opacity .6s; }
#jamtint { }

#marks { position: absolute; inset: 0; overflow: hidden; }
.mark { position: absolute; left: 0; top: 0; display: none; white-space: nowrap; }
.mark i { position: absolute; left: -7px; top: -7px; width: 14px; height: 14px; transform: rotate(45deg); border: 2px solid currentColor; box-shadow: 0 0 8px currentColor; }
.mark span { position: absolute; left: 12px; top: -7px; font-size: 11px; letter-spacing: 1px; text-shadow: 0 0 4px #000; }
.mark.enemy { color: #ff3a55; animation: markpulse 0.8s infinite alternate; }
.mark.zone { color: #ffa040; }
.mark.zone i { border-radius: 50%; transform: none; width: 18px; height: 18px; left: -9px; top: -9px; }
.mark.order { color: #9fe0ff; }
.mark.order i { transform: none; }
@keyframes markpulse { from { opacity: 1; } to { opacity: .55; } }
#squad { position: absolute; left: 18px; top: 50%; transform: translateY(-50%); width: 270px; font-size: 11px; color: #9bb6e0; text-shadow: 0 0 4px #000;
  background: linear-gradient(90deg, rgba(4,10,22,.72), rgba(4,10,22,.25)); border-left: 2px solid rgba(110,160,240,.5); padding: 8px 10px 4px; }
#squad .title { font-size: 10px; letter-spacing: 3px; color: #6f95c8; margin-bottom: 6px; }
#squad .act { display: grid; grid-template-columns: 26px 1fr; column-gap: 8px; margin-bottom: 7px; }
#squad kbd { grid-row: span 4; align-self: start; font-family: inherit; font-size: 12px; text-align: center; padding: 3px 0; border: 1px solid rgba(160,190,240,.5); color: #e3ecff; background: rgba(40,60,100,.35); }
#squad .nm { color: #d6e6ff; letter-spacing: 1.5px; font-size: 10.5px; }
#squad .st { font-size: 11px; margin-top: 1px; }
#squad .hint { font-size: 9.5px; color: #587aa8; margin-top: 1px; }
#squad .ready .st { color: #7fe0a8; }
#squad .active .st { color: #ffb86a; }
#squad .active kbd { border-color: #ffb86a; box-shadow: 0 0 8px rgba(255,160,80,.5); }
#squad .cd .st { color: #7f8fa8; }
#squad .bar { height: 3px; margin-top: 3px; background: rgba(90,120,170,.25); }
#squad .bar i { display: block; height: 100%; background: #6fe0a0; }
#squad .bar.cd i { background: #8a9ab8; }
#squad .bar.orange i { background: #ffa040; }
#squad .pips { display: flex; gap: 2px; margin-top: 3px; height: 4px; }
#squad .pips b { display: block; height: 4px; background: #6fb0ff; box-shadow: 0 0 5px #4f8fe0; }
#tacmap { position: absolute; left: 50%; top: 5vh; transform: translateX(-50%); display: none; border: 1px solid rgba(110,160,240,.5); box-shadow: 0 0 40px rgba(0,0,0,.8); }
#tacmap.on { display: block; }

#difficulty { display: flex; justify-content: center; align-items: center; gap: 8px; margin-bottom: 18px; font-size: 12px; letter-spacing: 3px; color: #6f95c8; }
#difficulty span { margin-right: 6px; }
#difficulty button { font-family: inherit; font-size: 12px; letter-spacing: 3px; padding: 7px 14px; color: #9bb6e0; background: rgba(20,30,60,.4); border: 1px solid rgba(110,160,240,.35); cursor: pointer; }
#difficulty button.on { color: #fff; border-color: #8a6cff; background: rgba(90,60,200,.45); box-shadow: 0 0 12px rgba(140,90,255,.5); }
#difficulty.locked button:not(.on) { display: none; }
#difficulty.locked button { cursor: default; }

/* ---- test panel (²) ---- */
#debug { position: fixed; top: 0; right: 0; bottom: 0; width: 400px; z-index: 50; display: none; overflow-y: auto; background: rgba(4,8,16,.94);
  border-left: 1px solid #3a5a9a; font-size: 12px; color: #cfe0ff; padding: 10px 12px 40px; }
#debug.on { display: block; }
#debug .dbg-head { font-size: 13px; letter-spacing: 3px; color: #ffb86a; margin-bottom: 8px; }
#debug .dbg-head span { float: right; font-size: 10px; color: #6f95c8; letter-spacing: 1px; }
#debug .dbg-info { font-family: inherit; font-size: 11px; color: #9fd0ff; background: rgba(20,40,80,.35); padding: 6px 8px; white-space: pre-wrap; margin-bottom: 8px; }
#debug .dbg-sec { margin-bottom: 10px; }
#debug .dbg-title { font-size: 11px; letter-spacing: 3px; color: #6f95c8; border-bottom: 1px solid rgba(110,160,240,.3); margin-bottom: 5px; padding-bottom: 2px; }
#debug .dbg-items { display: flex; flex-wrap: wrap; gap: 4px; }
#debug button { font-family: inherit; font-size: 11px; padding: 4px 7px; color: #dfe8ff; background: rgba(40,60,110,.45); border: 1px solid rgba(110,160,240,.35); cursor: pointer; }
#debug button:hover { background: rgba(70,100,180,.6); }
#debug button.on { border-color: #7fe0a8; color: #7fe0a8; }
#debug button.ok { background: rgba(60,160,100,.6); }
#debug button.err { border-color: #ff5a6e; color: #ff5a6e; }
#debug .dbg-slider { display: flex; align-items: center; gap: 6px; width: 100%; }
#debug .dbg-slider input { flex: 1; }

#skynet { position: absolute; top: 84px; left: 50%; transform: translateX(-50%); display: none; font-size: 12px; letter-spacing: 3px; padding: 3px 12px;
  border: 1px solid; background: rgba(4,10,20,.55); text-shadow: 0 0 6px currentColor; }
#skynet.hunt { animation: hunt .5s infinite alternate; }
@keyframes hunt { from { opacity: 1; box-shadow: 0 0 14px rgba(255,40,60,.7); } to { opacity: .55; box-shadow: none; } }

/* ---- campaign UI ---- */
#objectives { position: absolute; top: 206px; right: 16px; width: 300px; display: none; font-size: 12px; color: #cfe0ff; text-shadow: 0 0 4px #000;
  background: linear-gradient(270deg, rgba(4,10,22,.7), rgba(4,10,22,.2)); border-right: 2px solid rgba(255,208,96,.6); padding: 8px 10px; text-align: right; }
#objectives .o-main { font-size: 12px; letter-spacing: 2.5px; color: #ffd060; margin-bottom: 5px; }
#objectives .o-timer { font-size: 12px; letter-spacing: 1px; color: #9fd0ff; margin-bottom: 5px; }
#objectives .o-timer b { font-size: 16px; color: #fff; }
#objectives .o-timer.warn b { color: #ff5a6e; }
#objectives .o-line { margin: 2px 0; }
#objectives .o-line span { display: inline-block; width: 16px; }
#objectives .o-line.done { color: #6fe0a0; }
#objectives .o-line.cur { color: #fff; }
#objectives .o-line.todo { color: #7f95b8; }
#objectives .o-line.fail { color: #ff6a7c; text-decoration: line-through; }
#objectives .o-line.info { color: #6f95c8; font-size: 11px; }
#radio { position: absolute; left: 50%; bottom: 150px; transform: translateX(-50%); max-width: 720px; padding: 6px 14px; font-size: 13px; color: #d6e6ff; background: rgba(4,10,22,.7);
  border-left: 3px solid #6fb0ff; opacity: 0; transition: opacity .4s; text-align: left; }
#radio.on { opacity: 1; }
#radio b { color: #6fb0ff; letter-spacing: 2px; margin-right: 8px; font-weight: 400; }
#radio.bad { border-color: #ff5a6e; } #radio.bad b { color: #ff5a6e; }
#radio.good { border-color: #6fe0a0; } #radio.good b { color: #6fe0a0; }
#radio.event { border-color: #ffd060; } #radio.event b { color: #ffd060; }
#prompt { position: absolute; left: 50%; top: 58%; transform: translateX(-50%); display: none; font-size: 13px; color: #e8f0ff; text-shadow: 0 0 5px #000;
  background: rgba(4,10,22,.6); padding: 5px 12px 7px; border: 1px solid rgba(160,190,240,.35); min-width: 220px; text-align: center; }
#prompt b { display: inline-block; padding: 0 5px; border: 1px solid #ffd060; color: #ffd060; margin-right: 6px; font-weight: 400; }
#prompt small { color: #8fa8d0; }
#prompt i { display: block; height: 3px; margin-top: 5px; background: #ffd060; box-shadow: 0 0 6px #ffd060; }
.mark.objm i { transform: none; border: none; box-shadow: none; font-style: normal; font-size: 16px; left: -8px; top: -11px; width: auto; height: auto; text-shadow: 0 0 8px currentColor; }
.mark.objm.edge { opacity: .6; }
/* planning */
#planning, #briefing, #endscreen { position: fixed; inset: 0; z-index: 40; display: none; background: rgba(2,6,14,.94); color: #cfe0ff; font-size: 12px; overflow-y: auto; padding: 18px 26px; }
#planning.on, #briefing.on, #endscreen.on { display: block; }
.pl-head { font-size: 18px; letter-spacing: 4px; color: #ffd060; margin-bottom: 12px; }
.pl-head span { font-size: 11px; letter-spacing: 1px; color: #6f95c8; margin-left: 16px; }
.pl-grid { display: grid; grid-template-columns: minmax(420px, 1fr) minmax(460px, 1.15fr); gap: 20px; }
.pl-title { font-size: 11px; letter-spacing: 3px; color: #6f95c8; margin: 12px 0 6px; border-bottom: 1px solid rgba(110,160,240,.25); padding-bottom: 3px; }
.pl-title small { letter-spacing: 1px; color: #587aa8; margin-left: 8px; }
.pl-mission { padding: 10px 12px; border: 1px solid rgba(110,160,240,.3); margin-bottom: 8px; cursor: pointer; background: rgba(20,30,60,.35); }
.pl-mission.sel { border-color: #ffd060; box-shadow: 0 0 12px rgba(255,208,96,.25); }
.pl-mission b { font-size: 14px; color: #fff; letter-spacing: 1px; }
.pl-mission p { margin: 5px 0; color: #b8cce8; line-height: 1.45; }
.pl-kv { margin-top: 3px; } .pl-kv span { color: #6f95c8; margin-right: 8px; } .pl-kv.bad { color: #ff8a98; }
.pl-kv em, .pl-team em { font-style: normal; padding: 1px 5px; border: 1px solid rgba(160,190,240,.3); margin-right: 3px; }
.pl-kv em.have { border-color: #6fe0a0; color: #6fe0a0; }
.pl-map { width: 100%; border: 1px solid rgba(110,160,240,.3); margin-top: 6px; }
.pl-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.pl-card { display: flex; gap: 8px; padding: 6px 8px; border: 1px solid rgba(110,160,240,.25); cursor: pointer; background: rgba(20,30,60,.3); }
.pl-card:hover { border-color: rgba(160,190,240,.6); }
.pl-card.sel { border-color: #7fe0ff; background: rgba(40,90,140,.4); box-shadow: 0 0 10px rgba(127,224,255,.25); }
.pl-card.have { border-color: rgba(111,224,160,.5); opacity: .75; cursor: default; }
.pl-card.na { opacity: .6; }
.pl-card .pl-ic { font-size: 20px; }
.pl-card b { color: #fff; } .pl-card i { color: #6fe0a0; font-style: normal; font-size: 10px; }
.pl-card p { margin: 2px 0; line-height: 1.35; color: #a8bcd8; font-size: 11px; }
.pl-card p.good { color: #7fe0a8; } .pl-card p.bad { color: #ff9aa6; } .pl-card p.dim { color: #6f85a8; }
.pl-card p.req { color: #ff9aa6; } .pl-card p.req.ok { color: #7fe0a8; }
.pl-plan { margin: 4px 0 0 18px; }
.pl-plan li { margin: 3px 0; padding: 3px 6px; background: rgba(40,60,110,.3); }
.pl-plan li span { float: right; }
.pl-plan li button { font-family: inherit; font-size: 10px; margin-left: 3px; background: transparent; color: #9fb4e0; border: 1px solid rgba(160,190,240,.3); cursor: pointer; }
.pl-plan li.pl-main { background: rgba(255,208,96,.12); color: #ffd060; }
.pl-btns { margin-top: 14px; display: flex; gap: 10px; justify-content: flex-end; }
.pl-btns button { font-family: inherit; font-size: 14px; letter-spacing: 4px; padding: 10px 24px; cursor: pointer; color: #e8f0ff; }
.pl-go { background: rgba(60,40,160,.5); border: 1px solid #8a6cff; box-shadow: 0 0 16px rgba(140,90,255,.4); }
.pl-cancel { background: transparent; border: 1px solid rgba(160,190,240,.35); }
#fade { position: fixed; inset: 0; background: #fff; opacity: 0; pointer-events: none; z-index: 30; }
#letterbox { position: fixed; inset: 0; pointer-events: none; z-index: 29; }
#letterbox i { position: absolute; left: 0; right: 0; height: 0; background: #000; transition: height 1.5s; }
#letterbox i:first-child { top: 0; } #letterbox i:last-child { bottom: 0; }
#letterbox.on i { height: 11vh; }

/* final briefing */
.br-grid { display: grid; grid-template-columns: minmax(360px, 1fr) minmax(420px, 1.1fr); gap: 22px; }
.br-row { display: grid; grid-template-columns: 22px 190px 1fr; gap: 6px; align-items: baseline; padding: 4px 6px; border-bottom: 1px solid rgba(110,160,240,.1); color: #6a7d99; }
.br-row span { color: #b04a4a; }
.br-row.ok { color: #cfe0ff; }
.br-row.ok span { color: #6fe0a0; }
.br-row em { font-style: normal; font-size: 11px; color: #7f95b8; }
@media (max-width: 900px) { .br-grid { grid-template-columns: 1fr; } }

/* end screen */
#endscreen { background: radial-gradient(ellipse at 50% 30%, rgba(40,30,20,.9), rgba(2,4,8,.97)); }
.es-wrap { max-width: 720px; margin: 5vh auto; text-align: center; }
.es-wrap h1 { font-size: 44px; letter-spacing: 12px; margin: 0; color: #ffd9a0; font-weight: 300; }
.es-wrap.lose h1 { color: #ff6a5a; }
.es-sub { color: #9fb2cf; letter-spacing: 2px; margin: 8px 0 22px; }
.es-grade { display: inline-block; font-size: 84px; line-height: 1; color: #ffd060; border: 2px solid rgba(255,208,96,.5); width: 120px; padding: 10px 0 6px; margin-bottom: 20px; }
.es-grade small { display: block; font-size: 11px; letter-spacing: 4px; color: #b89a60; }
.es-grade.gS { color: #fff4c0; text-shadow: 0 0 18px #ffb040; }
.es-grade.gC { color: #b0a080; }
.es-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 26px; text-align: left; margin: 0 auto 20px; }
.es-row { display: flex; justify-content: space-between; border-bottom: 1px solid rgba(160,180,220,.12); padding: 5px 2px; color: #9fb2cf; }
.es-row b { color: #e8f0ff; font-weight: 500; }
.es-medals { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-bottom: 24px; }
.es-medal { width: 120px; padding: 8px; border: 1px solid rgba(255,208,96,.3); background: rgba(255,208,96,.05); }
.es-medal i { display: block; font-style: normal; font-size: 24px; }
.es-medal b { display: block; color: #ffd060; font-size: 12px; margin: 3px 0; }
.es-medal small { color: #9f9a8a; font-size: 10px; }
#es-new { font: inherit; letter-spacing: 4px; padding: 12px 34px; background: rgba(255,208,96,.12); color: #ffd060; border: 1px solid #ffd060; cursor: pointer; }
#es-new:hover { background: rgba(255,208,96,.28); }
@media (max-width: 600px) { .es-grid { grid-template-columns: 1fr; } .es-wrap h1 { font-size: 30px; letter-spacing: 6px; } }

/* cinematic title */
#cineTitle { position: fixed; left: 0; right: 0; top: 40%; text-align: center; z-index: 31; pointer-events: none; opacity: 0; transition: opacity 2.5s; color: #fff3de; }
#cineTitle.on { opacity: 1; }
#cineTitle b { display: block; font-size: 46px; font-weight: 300; letter-spacing: 16px; text-shadow: 0 0 30px rgba(255,190,120,.6); }
#cineTitle small { display: block; margin-top: 14px; font-size: 14px; letter-spacing: 4px; color: #d8c8b0; }

/* ---- planning (simplified) ---- */
.pn-wrap { max-width: 980px; margin: 0 auto; padding-bottom: 90px; }
.pn-kicker { font-size: 12px; letter-spacing: 4px; color: #8fb0dc; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.pn-kicker small { letter-spacing: 1px; color: #587aa8; font-size: 11px; }
.pn-pips { display: inline-flex; gap: 5px; align-items: center; }
.pn-pips b { width: 22px; height: 6px; background: rgba(110,150,210,.25); }
.pn-pips b.done { background: #6fe0a0; } .pn-pips b.cur { background: #ffd060; box-shadow: 0 0 8px #ffd060; }
.pn-pips b.final { width: auto; height: auto; background: none; color: #ff6a5a; font-weight: 400; font-size: 12px; }
.pn-title { font-size: 40px; letter-spacing: 6px; color: #ffd060; margin: 10px 0 6px; text-transform: uppercase; font-weight: 300; }
.pn-brief { font-size: 14px; line-height: 1.5; color: #d6e4ff; max-width: 820px; }
.pn-stakes { display: flex; gap: 22px; margin-top: 8px; font-size: 11.5px; flex-wrap: wrap; }
.pn-stakes .ok { color: #6fe0a0; } .pn-stakes .ko { color: #ff8a7a; }
.pn-choice { display: flex; gap: 8px; align-items: center; margin-top: 10px; }
.pn-choice button { font: inherit; letter-spacing: 2px; padding: 6px 14px; background: rgba(40,60,100,.3); color: #9fb8e0; border: 1px solid rgba(110,150,210,.4); cursor: pointer; }
.pn-choice button.sel { color: #ffd060; border-color: #ffd060; background: rgba(255,208,96,.1); }
.pn-choice small { color: #587aa8; }
.pn-sec { font-size: 11px; letter-spacing: 4px; color: #6f95c8; margin: 22px 0 8px; border-bottom: 1px solid rgba(110,160,240,.25); padding-bottom: 4px; }
.pn-sec small { letter-spacing: 1px; color: #587aa8; margin-left: 10px; }
.pn-gauges { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.pg-n { font-size: 12px; color: #cfe0ff; letter-spacing: 1px; margin-bottom: 5px; }
.pg-bar { position: relative; height: 12px; background: rgba(110,150,210,.15); }
.pg-bar i { position: absolute; left: 0; top: 0; bottom: 0; transition: width .4s; }
.pg-bar s { position: absolute; top: -2px; bottom: -2px; animation: pgflash 1.2s ease-out forwards; }
.pg-bar s.up { background: rgba(111,224,160,.8); } .pg-bar s.dn { background: rgba(255,106,90,.8); }
@keyframes pgflash { from { opacity: 1; } to { opacity: 0; } }
.pg-v { font-size: 20px; margin-top: 4px; }
.pg-v small { font-size: 12px; margin-left: 8px; }
small.up, em.up { color: #6fe0a0; } small.dn, em.dn { color: #ff8a7a; }
.pn-group { font-size: 12px; color: #cfe0ff; margin: 12px 0 6px; letter-spacing: 1px; }
.pn-group small { color: #587aa8; margin-left: 8px; }
.pn-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 6px; }
.pn-card { display: grid; grid-template-columns: 30px 1fr 22px; gap: 8px; padding: 7px 9px; background: rgba(20,32,56,.55); border: 1px solid rgba(110,150,210,.2); cursor: pointer; }
.pn-card:hover { border-color: rgba(160,200,255,.6); }
.pn-card.sel { border-color: #ffd060; background: rgba(255,208,96,.09); }
.pn-card.na { opacity: .45; }
.pn-ic { font-size: 20px; }
.pn-body b { color: #e6efff; font-weight: 500; font-size: 12.5px; }
.pn-body p { margin: 2px 0 0; font-size: 11px; color: #9fb4d6; }
.pn-body p.dim { color: #62789c; font-size: 10.5px; }
.pn-body p.why { color: #ff8a7a; }
.pn-chips { display: flex; flex-wrap: wrap; gap: 4px 8px; margin-top: 3px; }
.pn-chips em { font-style: normal; font-size: 10.5px; }
.pn-tick { font-size: 16px; color: #ffd060; text-align: center; }
.pn-foot { position: fixed; left: 0; right: 0; bottom: 0; padding: 10px 26px; background: rgba(2,6,14,.97); border-top: 1px solid rgba(110,160,240,.3); display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.pn-steps { font-size: 12px; color: #cfe0ff; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.pn-steps i { color: #587aa8; font-style: normal; }
.pn-steps .m { color: #ffd060; }
.pn-btns { display: flex; gap: 10px; }
@media (max-width: 760px) { .pn-gauges { grid-template-columns: 1fr; } .pn-title { font-size: 28px; } }

/* ---- guide ---- */
#guide { position: absolute; top: 116px; left: 50%; transform: translateX(-50%); display: none; align-items: center; gap: 12px; padding: 7px 16px; max-width: 70vw;
  background: rgba(4,10,22,.72); border: 1px solid rgba(255,208,96,.55); color: #fff3d0; font-size: 14px; letter-spacing: .5px; text-shadow: 0 0 6px #000; }
#guide i { font-style: normal; color: #ffd060; display: inline-block; font-size: 14px; transition: transform .15s; }
#guide b { font-weight: 500; }
#guide span { color: #ffd060; font-size: 13px; }
#gpop { position: fixed; left: 50%; top: 25%; transform: translateX(-50%); z-index: 35; min-width: 420px; max-width: 640px; padding: 14px 22px 16px; display: none;
  background: rgba(3,8,18,.9); border: 1px solid rgba(255,208,96,.6); box-shadow: 0 0 40px rgba(255,190,80,.15); color: #e8f0ff; pointer-events: none; }
#gpop.on { display: block; animation: gpin .25s ease-out; }
@keyframes gpin { from { opacity: 0; transform: translateX(-50%) scaleY(.2); } to { opacity: 1; transform: translateX(-50%) scaleY(1); } }
#gpop.modal { top: 22%; pointer-events: auto; padding: 22px 30px; min-width: 520px; }
#gpop .gp-tag { font-size: 11px; letter-spacing: 4px; color: #ffd060; }
#gpop .gp-title { font-size: 34px; letter-spacing: 5px; color: #ffd060; text-transform: uppercase; margin: 6px 0 8px; font-weight: 300; min-height: 40px; }
#gpop .gp-text { font-size: 14px; line-height: 1.5; color: #d6e4ff; min-height: 21px; }
#gpop .gp-step { font-size: 18px; color: #fff; margin-top: 6px; min-height: 24px; }
#gpop .gp-hint { font-size: 12px; color: #9fb4d6; margin-top: 5px; min-height: 16px; }
#gpop .gp-first { margin-top: 16px; padding: 10px 12px; border-left: 3px solid #ffd060; background: rgba(255,208,96,.07); }
#gpop .gp-first span { display: block; font-size: 10px; letter-spacing: 3px; color: #ffd060; }
#gpop .gp-first b { display: block; font-size: 17px; font-weight: 500; margin: 4px 0; min-height: 22px; }
#gpop .gp-first small { color: #9fb4d6; }
#gpop button { margin-top: 16px; font: inherit; letter-spacing: 3px; padding: 8px 28px; background: rgba(255,208,96,.14); color: #ffd060; border: 1px solid #ffd060; cursor: pointer; }
#gpop button small { color: #b89a60; letter-spacing: 1px; }
.mark.guide { z-index: 3; }
.mark.guide i { font-size: 24px; color: #ffd060; text-shadow: 0 0 10px rgba(255,200,80,.9); display: inline-block; animation: gpulse 1.1s infinite; }
.mark.guide span { color: #ffe9a8; font-size: 12px; }
@keyframes gpulse { 50% { opacity: .55; } }
.mark.minor { opacity: .7; }
.mark.minor i { font-size: 12px; }

/* compact tactical panel */
#squad { top: auto; bottom: 96px; transform: none; width: auto; }
#squad .act { display: flex; align-items: center; gap: 7px; margin-bottom: 3px; }
#squad kbd { font-size: 10.5px; padding: 1px 5px; min-width: 12px; grid-row: auto; }
#squad .nm { font-size: 10.5px; letter-spacing: 1px; color: #9fb6da; }
#squad .st { font-size: 10.5px; margin: 0; }
#squad .pips { margin: 0; }
#objectives { top: 206px; width: 260px; }
.mark.guide.edge { opacity: 1; }
.pn-btns button { font: inherit; padding: 9px 24px; letter-spacing: 3px; color: #e8f0ff; cursor: pointer; }
.pn-card.inc { border-color: rgba(255,208,96,.55); border-style: dashed; }
#effects { left: 300px; bottom: 24px; }
#tbar { position: absolute; top: 158px; left: 50%; transform: translateX(-50%); display: none; align-items: center; gap: 10px; font-size: 12px; letter-spacing: 2px; color: #ffb0a0; text-shadow: 0 0 4px #000; }
#tbar .tb-bar { width: 240px; height: 8px; background: rgba(255,80,60,.18); border: 1px solid rgba(255,120,100,.5); }
#tbar .tb-bar i { display: block; height: 100%; background: linear-gradient(90deg, #ff5a3a, #ffa060); transition: width .15s; }
#tbar.hit .tb-bar { border-color: #fff; box-shadow: 0 0 10px rgba(255,200,160,.8); }
#tbar.dead { color: #6fe0a0; }
#tbar span { min-width: 64px; }
#gpop.big { min-width: 520px; padding: 18px 28px; }
#gpop.big .gp-title { font-size: 30px; }
#gpop.ok { border-color: #6fe0a0; } #gpop.ok .gp-tag, #gpop.ok .gp-title { color: #6fe0a0; }
#gpop.ko { border-color: #ff6a5a; } #gpop.ko .gp-tag, #gpop.ko .gp-title { color: #ff6a5a; }
#gpop .gp-prep { margin-top: 12px; font-size: 13px; color: #ffd060; }
#gpop.info { border-color: #7fd0ff; } #gpop.info .gp-tag { color: #7fd0ff; }
.pl-map { width: 100%; max-width: 900px; border: 1px solid rgba(110,160,240,.25); margin-top: 6px; }
.pn-legend { display: flex; flex-wrap: wrap; gap: 16px; font-size: 11px; margin-top: 4px; }
.pn-sites { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 6px; font-size: 11.5px; color: #9fe0ff; }
.pn-sites em { font-style: normal; }
#phase { position: absolute; top: 150px; left: 50%; transform: translateX(-50%); display: none; padding: 4px 14px; font-size: 13px; letter-spacing: 3px; text-shadow: 0 0 6px #000; }
#phase.scout { color: #ffb040; border: 1px solid #ffb040; background: rgba(40,20,0,.5); animation: gpulse .8s infinite; }
#phase.wave { color: #ff4a5e; border: 1px solid #ff4a5e; background: rgba(40,0,6,.5); }
#phase.ebb { color: #9fd0ff; border: 1px solid rgba(159,208,255,.6); }
#tbar { top: 186px !important; }
#stealthInd { position: absolute; left: 50%; bottom: 196px; transform: translateX(-50%); display: none; padding: 5px 16px; font-size: 12px; letter-spacing: 3px; color: #7fe0a8; border: 1px solid rgba(127,224,168,.7); background: rgba(0,20,10,.55); animation: stealthBlink 1.4s infinite; }
@keyframes stealthBlink { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
.pm-wrap { display: flex; gap: 24px; height: calc(100vh - 40px); }
.pm-map { flex: 0 0 auto; height: 100%; }
.pm-canvas { height: 100%; width: auto; box-shadow: 0 10px 40px rgba(0,0,0,.8); transform: rotate(-1deg); }
.pm-side { flex: 1; min-width: 280px; overflow-y: auto; }
.pm-note { font-size: 13px; line-height: 1.5; color: #cfe0ff; margin: 8px 0 4px; }
.pm-cards { display: grid; grid-template-columns: 1fr; gap: 5px; }
#phase.blind { color: #7fe0a8; border: 1px solid rgba(127,224,168,.6); background: rgba(0,20,10,.45); }
#gtip { position: absolute; right: 18px; bottom: 150px; width: 300px; padding: 8px 12px; font-size: 11.5px; color: #cfe6ff; background: rgba(4,12,24,.72); border-left: 2px solid #7fd0ff; opacity: 0; transform: translateX(20px); transition: opacity .4s, transform .4s; pointer-events: none; }
#gtip.on { opacity: 1; transform: none; }
#gtip b { display: block; font-size: 10px; letter-spacing: 2px; color: #7fd0ff; font-weight: 400; margin-bottom: 3px; }
#gtip span { display: block; }
#gtip small { display: block; color: #8fa8c8; margin-top: 3px; font-size: 10.5px; }
#hkAlert { position: absolute; top: 200px; left: 50%; transform: translateX(-50%); display: none; text-align: center; padding: 12px 34px 10px; background: rgba(60,0,6,.78); border: 2px solid #ff3a4a; box-shadow: 0 0 30px rgba(255,40,60,.45); color: #fff; animation: hkblink 1s infinite; pointer-events: none; }
#hkAlert.on { display: block; }
#hkAlert b { display: block; font-size: 32px; letter-spacing: 6px; color: #ff4a58; font-weight: 700; text-shadow: 0 0 12px rgba(255,40,60,.8); }
#hkAlert span { display: block; font-size: 16px; margin-top: 4px; letter-spacing: 1px; }
#hkAlert i { display: block; font-style: normal; font-size: 13px; color: #ffb0b0; margin-top: 3px; }
@keyframes hkblink { 50% { border-color: rgba(255,58,74,.35); box-shadow: 0 0 10px rgba(255,40,60,.2); } }
#phase.scout { display: none !important; }