:root {
  --ink: #06090d;
  --panel: rgba(7, 12, 17, 0.82);
  --panel-strong: rgba(5, 8, 12, 0.94);
  --line: rgba(183, 211, 224, 0.2);
  --mist: #d7edf3;
  --steel: #75d6ff;
  --iron: #5d8cff;
  --pewter: #d4d8de;
  --tin: #f6ce76;
  --danger: #d6464c;
  --success: #9fd9b0;
  --stamina: #67dfb6;
  --momentum: #d8eef4;
  --text: #eef4f5;
  --muted: #9aa8ac;
}

* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; background: var(--ink); color: var(--text); font-family: Inter, Arial, system-ui, sans-serif; }
button, kbd { font: inherit; }
button { border: 0; }
#game-shell, #game-canvas { position: fixed; inset: 0; width: 100%; height: 100%; }
#game-canvas { display: block; outline: none; cursor: default; background: radial-gradient(circle at 50% 20%, #17202a, #05080b 72%); }
.hidden { display: none !important; }

.screen { position: fixed; inset: 0; z-index: 40; display: none; place-items: center; padding: 24px; background: radial-gradient(circle at 50% 35%, rgba(28, 42, 52, 0.66), rgba(3, 6, 9, 0.96) 70%); backdrop-filter: blur(8px); }
.screen.active { display: grid; }
.screen.above { z-index: 80; }
.screen-card { position: relative; width: min(860px, 100%); padding: 46px 52px 34px; text-align: center; border: 1px solid rgba(180, 219, 232, .28); background: linear-gradient(150deg, rgba(8, 13, 18, .95), rgba(13, 23, 29, .88)); box-shadow: 0 30px 90px rgba(0,0,0,.65), inset 0 1px rgba(255,255,255,.04); overflow: hidden; }
.screen-card::before, .screen-card::after { content: ""; position: absolute; width: 190px; height: 1px; top: 25px; background: linear-gradient(90deg, transparent, rgba(143, 211, 232, .45)); }
.screen-card::before { left: -15px; }
.screen-card::after { right: -15px; transform: scaleX(-1); }
.compact-card { width: min(500px, 100%); padding: 44px; }
.unofficial, .eyebrow { font-size: 11px; letter-spacing: .34em; color: #9fc9d4; text-transform: uppercase; font-weight: 700; }
h1 { margin: 10px 0 18px; font-family: Cinzel, Georgia, serif; font-weight: 600; line-height: .87; letter-spacing: .03em; text-shadow: 0 3px 24px rgba(97,184,213,.16); }
h1 span { display: block; font-size: clamp(48px, 9vw, 98px); color: #edf4f4; }
h1 em { display: block; margin-top: 16px; font-size: clamp(16px, 3vw, 28px); font-style: normal; letter-spacing: .28em; color: #88b7c3; }
.compact-card h2 { margin: 12px 0; font-family: Cinzel, Georgia, serif; font-size: 40px; letter-spacing: .08em; }
.lead { width: min(650px, 100%); margin: 0 auto 26px; color: #b8c5c8; font-size: 16px; line-height: 1.7; }
.primary-button, .secondary-button { min-width: 230px; margin: 6px; padding: 15px 24px; letter-spacing: .15em; font-weight: 800; font-size: 12px; text-transform: uppercase; cursor: pointer; transition: transform .18s, border-color .18s, background .18s; }
.primary-button { color: #061017; background: linear-gradient(180deg, #bdeaf4, #73b6c8); box-shadow: 0 8px 30px rgba(92,177,203,.22); }
.secondary-button { color: #cddadd; border: 1px solid rgba(205,225,232,.28); background: rgba(255,255,255,.035); }
.primary-button:hover, .secondary-button:hover { transform: translateY(-2px); }
.control-columns { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin: 32px 0 22px; text-align: left; }
.control-columns > div { padding: 15px 17px; border: 1px solid rgba(180,211,219,.13); background: rgba(255,255,255,.025); }
.control-columns h2 { margin: 0 0 8px; color: #dbe8ea; font-family: Cinzel, Georgia, serif; font-size: 13px; letter-spacing: .12em; }
.control-columns p { margin: 0; color: #8e9ca0; font-size: 12px; line-height: 1.8; }
kbd { display: inline-block; min-width: 22px; padding: 2px 5px; border: 1px solid rgba(181,208,215,.28); border-bottom-color: rgba(181,208,215,.5); border-radius: 3px; color: #deebed; background: rgba(255,255,255,.07); font-size: 10px; font-weight: 700; line-height: 1.25; text-align: center; box-shadow: 0 2px 0 rgba(0,0,0,.4); }
.fine-print { margin: 0; color: #657479; font-size: 10px; letter-spacing: .03em; }
.ash-layer { position: absolute; inset: 0; opacity: .18; background-image: radial-gradient(circle, #fff 0 1px, transparent 1.2px); background-size: 23px 31px; animation: ashFall 16s linear infinite; }
@keyframes ashFall { from { background-position: 0 -200px; } to { background-position: 80px 300px; } }

#loading-screen { background: #05080b; }
.loader-mark { width: 70px; height: 70px; display: grid; place-items: center; border: 1px solid #80b4c1; color: #bde4eb; font-family: Cinzel, serif; font-size: 34px; transform: rotate(45deg); }
.loader-mark::first-letter { transform: rotate(-45deg); }
.loading-bar { width: 220px; height: 2px; margin-top: 28px; background: #172027; overflow: hidden; }
.loading-bar div { width: 55%; height: 100%; background: #8dc7d5; animation: load 1.1s ease-in-out infinite alternate; }
#loading-screen p { color: #70858c; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; }
@keyframes load { from { transform: translateX(-100%); } to { transform: translateX(180%); } }

#hud { position: fixed; inset: 0; z-index: 20; pointer-events: none; user-select: none; }
.panel { border: 1px solid var(--line); background: linear-gradient(145deg, rgba(5,9,13,.88), rgba(12,20,25,.7)); box-shadow: 0 10px 35px rgba(0,0,0,.32), inset 0 1px rgba(255,255,255,.025); backdrop-filter: blur(7px); }
#top-left { position: absolute; top: max(18px, env(safe-area-inset-top)); left: max(18px, env(safe-area-inset-left)); width: 310px; }
.status-panel { padding: 14px; }
.identity-row { display: flex; align-items: center; gap: 11px; padding-bottom: 11px; margin-bottom: 10px; border-bottom: 1px solid rgba(255,255,255,.08); }
.vin-mark { width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid rgba(162,215,230,.43); transform: rotate(45deg); color: #bce9f0; font-family: Cinzel, serif; font-size: 19px; }
.identity-row strong, .identity-row small { display: block; }
.identity-row strong { font-family: Cinzel, Georgia, serif; font-size: 14px; letter-spacing: .15em; }
.identity-row small { margin-top: 2px; color: #70858c; font-size: 9px; letter-spacing: .2em; text-transform: uppercase; }
.meter { display: grid; grid-template-columns: 52px 1fr 28px; align-items: center; gap: 7px; min-height: 17px; }
.meter .label { color: #a7b4b8; font-size: 9px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.meter .track { height: 5px; background: rgba(255,255,255,.08); overflow: hidden; }
.meter .fill { width: 100%; height: 100%; transform-origin: left; transition: transform .12s linear; }
.meter .value { color: #7e8f94; font-size: 9px; text-align: right; }
.health { margin-bottom: 9px; }
.health .fill { background: linear-gradient(90deg, #7b1f29, #de5861); }
.steel .fill { background: var(--steel); box-shadow: 0 0 8px rgba(117,214,255,.45); }
.iron .fill { background: var(--iron); box-shadow: 0 0 8px rgba(93,140,255,.45); }
.pewter .fill { background: var(--pewter); }
.tin .fill { background: var(--tin); }
.metal-grid { display: grid; gap: 4px; }
.ammo-row { display: flex; align-items: center; gap: 8px; margin-top: 10px; padding-top: 9px; border-top: 1px solid rgba(255,255,255,.07); color: #92a2a6; font-size: 10px; }
.ammo-row strong { color: #e6f0f1; font-size: 13px; }
#mute-indicator { margin-left: auto; color: #64757a; }

#mission-panel { position: absolute; top: max(18px, env(safe-area-inset-top)); left: 50%; width: min(360px, 36vw); padding: 11px 15px; transform: translateX(-50%); text-align: center; }
#objective-text { margin-top: 5px; color: #dbe7e9; font-size: 12px; }
#objective-progress { margin-top: 3px; color: #7caabb; font-size: 11px; font-weight: 700; }
#boss-panel { position: absolute; top: 86px; left: 50%; width: min(540px, 55vw); padding: 10px 14px; transform: translateX(-50%); text-align: center; }
.boss-title { margin-bottom: 7px; color: #d7c2c2; font-family: Cinzel, serif; font-size: 11px; letter-spacing: .25em; }
.boss-track { height: 7px; background: rgba(255,255,255,.08); }
#boss-fill { width: 100%; height: 100%; transform-origin: left; background: linear-gradient(90deg, #5e1217, #d84950); }

#crosshair { position: absolute; top: 50%; left: 50%; width: 34px; height: 34px; transform: translate(-50%, -50%); opacity: .68; }
#crosshair i { position: absolute; display: block; background: rgba(218,240,245,.82); box-shadow: 0 0 4px rgba(116,205,230,.55); }
#crosshair i:nth-child(1), #crosshair i:nth-child(2) { top: 16px; width: 7px; height: 1px; }
#crosshair i:nth-child(1) { left: 1px; } #crosshair i:nth-child(2) { right: 1px; }
#crosshair i:nth-child(3), #crosshair i:nth-child(4) { left: 16px; width: 1px; height: 7px; }
#crosshair i:nth-child(3) { top: 1px; } #crosshair i:nth-child(4) { bottom: 1px; }
#crosshair b { position: absolute; top: 14px; left: 14px; width: 6px; height: 6px; border: 1px solid rgba(218,240,245,.78); border-radius: 50%; }
#crosshair.targeted i { background: var(--steel); }
#crosshair.targeted b { border-color: var(--steel); box-shadow: 0 0 8px var(--steel); }

#target-info { position: absolute; top: calc(50% + 28px); left: 50%; display: flex; gap: 8px; transform: translateX(-50%); color: #7fd5f3; font-size: 9px; font-weight: 700; letter-spacing: .1em; text-shadow: 0 1px 5px #000; }
#target-distance { color: #a5b8be; }
#interaction { position: absolute; bottom: 18%; left: 50%; display: flex; align-items: center; gap: 10px; padding: 9px 13px; transform: translateX(-50%); border: 1px solid rgba(165,218,230,.28); background: rgba(3,7,10,.78); font-size: 11px; }
#tutorial-toast { position: absolute; bottom: 26%; left: 50%; width: min(480px, 80vw); padding: 13px 17px; transform: translateX(-50%); border-left: 2px solid #8ec8d6; color: #c7d5d8; background: rgba(5,9,12,.88); font-size: 12px; line-height: 1.5; text-align: center; }
#notification { position: absolute; top: 32%; left: 50%; min-width: 280px; transform: translate(-50%, -50%); color: #dcebed; font-family: Cinzel, serif; font-size: 16px; letter-spacing: .1em; text-align: center; text-shadow: 0 2px 14px #000; opacity: 0; transition: opacity .2s, transform .2s; }
#notification.show { opacity: 1; transform: translate(-50%, -56%); }
#damage-vignette, #ability-flash { position: absolute; inset: 0; opacity: 0; transition: opacity .2s; }
#damage-vignette { box-shadow: inset 0 0 100px 28px rgba(175, 20, 29, .75); }
#ability-flash { background: radial-gradient(circle, transparent 25%, rgba(76,180,222,.22)); }

#bottom-help { position: absolute; right: max(18px, env(safe-area-inset-right)); bottom: max(18px, env(safe-area-inset-bottom)); display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px 13px; max-width: 610px; padding: 8px 11px; color: #839397; font-size: 9px; }
#bottom-help span { white-space: nowrap; }
#minimap { position: absolute; top: max(18px, env(safe-area-inset-top)); right: max(18px, env(safe-area-inset-right)); width: 190px; height: 190px; border: 1px solid var(--line); background: rgba(4,8,11,.72); box-shadow: 0 10px 30px rgba(0,0,0,.25); }
.end-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 24px 0; }
.end-stats div { padding: 13px 8px; border: 1px solid rgba(255,255,255,.08); background: rgba(255,255,255,.025); }
.end-stats strong, .end-stats span { display: block; }
.end-stats strong { font-family: Cinzel, serif; font-size: 19px; }
.end-stats span { margin-top: 3px; color: #708187; font-size: 9px; letter-spacing: .08em; text-transform: uppercase; }

@media (max-width: 800px) {
  .screen-card { padding: 34px 22px 25px; }
  .control-columns { grid-template-columns: 1fr; gap: 7px; }
  .control-columns > div { padding: 9px 12px; }
  #top-left { width: 250px; }
  #minimap { width: 128px; height: 128px; }
  #mission-panel { top: 160px; width: 260px; }
  #bottom-help { display: none; }
}

@media (max-width: 560px) {
  #top-left { transform: scale(.82); transform-origin: top left; }
  #minimap { transform: scale(.72); transform-origin: top right; }
  #mission-panel { top: 128px; width: 230px; transform: translateX(-50%) scale(.85); }
  h1 span { font-size: 44px; }
  h1 em { letter-spacing: .15em; }
  .fine-print { display: none; }
}

/* Enhanced Edition HUD and presentation */
.stamina { margin: 0 0 9px; }
.stamina .fill { background: linear-gradient(90deg, #2f8d72, var(--stamina)); box-shadow: 0 0 9px rgba(103, 223, 182, .4); }
.stamina .fill.exhausted { background: linear-gradient(90deg, #6d2027, #d85159); box-shadow: 0 0 10px rgba(216, 81, 89, .5); }
.momentum-row { display: grid; grid-template-columns: 52px 1fr 38px; align-items: center; gap: 7px; min-height: 18px; margin: 0 0 9px; padding-bottom: 9px; border-bottom: 1px solid rgba(255,255,255,.07); }
.momentum-row .label { color: #a7b4b8; font-size: 9px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.momentum-track { height: 4px; overflow: hidden; background: rgba(255,255,255,.08); }
#momentum-fill { width: 100%; height: 100%; transform: scaleX(0); transform-origin: left; background: linear-gradient(90deg, #597e8a, var(--momentum)); box-shadow: 0 0 8px rgba(216,238,244,.35); transition: transform .12s linear; }
#momentum-value { color: #b6cbd0; font-size: 9px; font-weight: 700; text-align: right; }

#combo-display { position: absolute; top: 23%; left: 50%; z-index: 7; transform: translate(-50%, -50%) scale(.72); color: #f1fbff; font-family: Cinzel, Georgia, serif; font-size: clamp(24px, 4vw, 44px); font-weight: 700; letter-spacing: .06em; text-shadow: 0 0 12px rgba(92,190,225,.82), 0 3px 14px #000; opacity: 0; transition: opacity .12s, transform .16s cubic-bezier(.2,.9,.25,1.25); }
#combo-display.show { transform: translate(-50%, -50%) scale(1); opacity: 1; }

#enemy-intro { --enemy-color: #ffffff; --spot-x: 50%; --spot-y: 45%; position: fixed; inset: 0; z-index: 55; display: none; pointer-events: none; }
#enemy-intro.active { display: block; }
.enemy-intro-dim { position: absolute; inset: 0; background: radial-gradient(circle 122px at var(--spot-x) var(--spot-y), transparent 0 43%, rgba(0,0,0,.12) 58%, rgba(0,0,0,.78) 73%, rgba(0,0,0,.96) 100%); backdrop-filter: saturate(.34); }
.enemy-intro-card { position: absolute; left: 50%; bottom: max(8vh, 58px); width: min(520px, calc(100vw - 38px)); padding: 20px 28px 18px; transform: translateX(-50%); border: 1px solid color-mix(in srgb, var(--enemy-color) 72%, white 8%); border-top: 3px solid var(--enemy-color); background: linear-gradient(145deg, rgba(4,7,10,.96), rgba(10,16,20,.93)); box-shadow: 0 24px 70px rgba(0,0,0,.7), 0 0 26px color-mix(in srgb, var(--enemy-color) 24%, transparent); text-align: center; }
.enemy-intro-card h2 { margin: 8px 0 7px; color: var(--enemy-color); font-family: Cinzel, Georgia, serif; font-size: clamp(28px, 5vw, 46px); letter-spacing: .11em; text-shadow: 0 0 16px color-mix(in srgb, var(--enemy-color) 55%, transparent); }
.enemy-intro-card p { margin: 0 auto 12px; color: #d6e0e2; font-size: 14px; line-height: 1.55; }
#enemy-intro-color { display: inline-block; margin-bottom: 12px; padding: 5px 9px; border: 1px solid color-mix(in srgb, var(--enemy-color) 55%, transparent); color: var(--enemy-color); font-size: 10px; font-weight: 800; letter-spacing: .15em; }
.enemy-intro-card small { display: block; color: #718188; font-size: 9px; letter-spacing: .16em; }

#cinematic-bars { position: fixed; inset: 0; z-index: 50; display: none; overflow: hidden; pointer-events: none; }
#cinematic-bars.active { display: block; }
#cinematic-bars i, #cinematic-bars b { position: absolute; left: 0; width: 100%; height: 12.5vh; background: #020304; box-shadow: 0 0 34px rgba(0,0,0,.9); animation: cinematicBarIn .42s ease-out both; }
#cinematic-bars i { top: 0; transform-origin: top; }
#cinematic-bars b { bottom: 0; transform-origin: bottom; }
@keyframes cinematicBarIn { from { transform: scaleY(0); } to { transform: scaleY(1); } }
#hud.cinematic #top-left,
#hud.cinematic #mission-panel,
#hud.cinematic #boss-panel,
#hud.cinematic #interaction,
#hud.cinematic #tutorial-toast,
#hud.cinematic #notification,
#hud.cinematic #bottom-help,
#hud.cinematic #minimap,
#hud.cinematic #combo-display { opacity: 0 !important; }

@media (max-height: 700px) {
  .title-card { max-height: calc(100vh - 28px); overflow: auto; }
  .control-columns { margin: 20px 0 14px; }
  .enemy-intro-card { bottom: 28px; }
}

@media (max-width: 560px) {
  .enemy-intro-card { padding: 17px 18px 15px; }
  .enemy-intro-dim { background: radial-gradient(circle 92px at var(--spot-x) var(--spot-y), transparent 0 42%, rgba(0,0,0,.18) 58%, rgba(0,0,0,.84) 74%, rgba(0,0,0,.97) 100%); }
}
.title-card { overflow-x: hidden; }


/* Runtime control panel */
.control-panel { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 18px; pointer-events: auto; background: radial-gradient(circle at 50% 20%, rgba(22,39,48,.7), rgba(2,5,8,.96) 72%); backdrop-filter: blur(10px); }
.control-panel-card { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; width: min(1080px, 100%); max-height: min(92vh, 940px); border: 1px solid rgba(152,211,226,.35); background: linear-gradient(155deg, rgba(5,10,14,.985), rgba(10,19,24,.965)); box-shadow: 0 36px 120px rgba(0,0,0,.8), inset 0 1px rgba(255,255,255,.05); }
.control-panel-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; padding: 23px 26px 19px; border-bottom: 1px solid rgba(175,217,228,.16); }
.control-panel-header h2 { margin: 7px 0 4px; color: #e7f3f5; font-family: Cinzel, Georgia, serif; font-size: clamp(24px, 4vw, 38px); letter-spacing: .11em; }
.control-panel-header p { margin: 0; color: #819398; font-size: 11px; line-height: 1.5; }
.control-icon-button { flex: 0 0 auto; width: 42px; height: 42px; border: 1px solid rgba(180,218,228,.25); color: #dbecee; background: rgba(255,255,255,.035); font-size: 27px; line-height: 1; cursor: pointer; transition: background .16s, border-color .16s, transform .16s; }
.control-icon-button:hover { transform: translateY(-1px); border-color: rgba(180,218,228,.55); background: rgba(127,199,218,.12); }
.control-panel-scroll { min-height: 0; padding: 18px 24px 24px; overflow: auto; scrollbar-color: #476c76 #0a1115; }
.control-section { margin: 0 0 18px; border: 1px solid rgba(162,203,214,.13); background: rgba(255,255,255,.018); }
.control-section:last-child { margin-bottom: 0; }
.control-section h3 { margin: 0; padding: 12px 15px; border-bottom: 1px solid rgba(162,203,214,.12); color: #bfe1e8; background: rgba(107,175,194,.045); font-family: Cinzel, Georgia, serif; font-size: 12px; letter-spacing: .13em; text-transform: uppercase; }
.control-section-copy { margin: 0; padding: 10px 15px 5px; color: #6f8389; font-size: 10px; line-height: 1.5; }
.control-table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.control-table th, .control-table td { padding: 9px 14px; border-bottom: 1px solid rgba(255,255,255,.055); vertical-align: middle; }
.control-table tr:last-child th, .control-table tr:last-child td { border-bottom: 0; }
.control-table th { width: 31%; color: #cbdadd; font-size: 11px; font-weight: 700; letter-spacing: .025em; text-align: left; }
.control-table td:nth-child(2) { width: 165px; }
.control-table .control-note { width: auto; color: #667a80; font-size: 10px; line-height: 1.35; }
.control-number { width: 132px; max-width: 100%; height: 34px; padding: 6px 9px; border: 1px solid rgba(150,201,214,.24); outline: 0; color: #e8f4f5; background: rgba(0,0,0,.34); font: 700 12px/1.2 ui-monospace, SFMono-Regular, Consolas, monospace; text-align: right; transition: border-color .15s, box-shadow .15s; }
.control-number:focus { border-color: rgba(108,210,237,.74); box-shadow: 0 0 0 2px rgba(73,166,191,.16); }
.control-toggle { display: inline-flex; align-items: center; gap: 9px; min-width: 132px; cursor: pointer; }
.control-toggle input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.control-toggle::before { content: ""; width: 36px; height: 18px; border: 1px solid rgba(150,201,214,.3); background: #35161b; box-shadow: inset 0 0 0 5px #11191d; transition: background .16s, box-shadow .16s; }
.control-toggle:has(input:checked)::before { background: #54c7b0; box-shadow: inset 18px 0 0 0 #d4fff5, inset 0 0 0 2px #1b4f45; }
.control-toggle span { color: #8ca0a5; font: 800 10px/1 ui-monospace, SFMono-Regular, Consolas, monospace; letter-spacing: .08em; }
.orb-swatch, .enemy-swatch { display: inline-block; margin-right: 8px; vertical-align: -1px; box-shadow: 0 0 8px currentColor; }
.orb-swatch { border-radius: 50%; color: #ff4050; background: currentColor; }
.orb-swatch.small { width: 7px; height: 7px; }
.orb-swatch.medium { width: 10px; height: 10px; }
.orb-swatch.large { width: 13px; height: 13px; }
.enemy-swatch { width: 9px; height: 9px; background: currentColor; }
.enemy-swatch.soldier { color: #9aa3a7; }
.enemy-swatch.coinshot { color: #49c66c; }
.enemy-swatch.lurcher { color: #4389ea; }
.enemy-swatch.pewterarm { color: #de4048; }
.enemy-swatch.tineye { color: #f0c94f; }
.enemy-swatch.inquisitor { color: #e44951; }
.active-enemy-table-wrap { max-height: 280px; overflow: auto; }
.active-enemy-table { table-layout: auto; }
.active-enemy-table thead { position: sticky; top: 0; z-index: 1; background: #0a1217; }
.active-enemy-table thead th { width: auto; color: #71868d; font-size: 9px; letter-spacing: .11em; text-transform: uppercase; }
.active-enemy-table td { color: #9babb0; font-size: 10px; }
.active-enemy-table td:first-child { width: 64px; color: #65777c; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; }
.active-enemy-table td:nth-child(3) { width: 170px; }
.active-enemy-table td:last-child { width: 110px; color: #75888e; text-align: right; }
.active-enemy-name { display: inline-flex; align-items: center; gap: 7px; color: #d2e0e2; font-weight: 700; }
.active-enemy-empty { padding: 24px !important; color: #63767c !important; text-align: center; }
.control-panel-footer { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 24px; border-top: 1px solid rgba(175,217,228,.16); background: rgba(0,0,0,.18); }
#control-status { color: #6e888f; font: 800 9px/1.3 ui-monospace, SFMono-Regular, Consolas, monospace; letter-spacing: .11em; }
.control-action { min-width: 150px; margin: 0 0 0 7px; padding: 11px 17px; }

@media (max-width: 760px) {
  .control-panel { padding: 0; }
  .control-panel-card { width: 100%; max-height: 100vh; min-height: 100vh; border: 0; }
  .control-panel-header { padding: 17px 16px 14px; }
  .control-panel-scroll { padding: 13px 12px 18px; }
  .control-table { table-layout: auto; }
  .control-table th, .control-table td { padding: 9px 9px; }
  .control-table th { width: 43%; }
  .control-table td:nth-child(2) { width: 118px; }
  .control-table .control-note { display: none; }
  .control-number { width: 106px; }
  .control-panel-footer { padding: 11px 12px; }
  #control-status { display: none; }
  .control-action { min-width: 112px; padding: 10px 12px; }
}

/* Free Camera Map Edition */
#enemy-intro { display: none !important; }

#objective-compass {
  position: absolute;
  top: 92px;
  left: 50%;
  display: grid;
  grid-template-columns: 34px auto;
  align-items: center;
  gap: 8px;
  min-width: 164px;
  padding: 7px 12px;
  transform: translateX(-50%);
  color: #bedbe2;
  text-align: left;
}
#objective-arrow {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  color: #9fe9fb;
  font-size: 21px;
  text-shadow: 0 0 12px rgba(105, 215, 242, .78);
  transform-origin: 50% 50%;
  transition: transform .08s linear;
}
#objective-distance {
  color: #a7c2c9;
  font: 800 9px/1.3 ui-monospace, SFMono-Regular, Consolas, monospace;
  letter-spacing: .1em;
  white-space: nowrap;
}

#map-legend {
  position: absolute;
  top: 218px;
  right: max(18px, env(safe-area-inset-right));
  display: grid;
  grid-template-columns: repeat(2, auto);
  gap: 5px 10px;
  width: 190px;
  padding: 8px 9px;
  color: #839397;
  font-size: 8px;
  letter-spacing: .04em;
  text-transform: uppercase;
}
#map-legend span { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.map-key { width: 8px; height: 8px; display: inline-block; box-shadow: 0 0 5px currentColor; }
.map-key.ramp { color: #ef2218; background: currentColor; }
.map-key.upper { color: #4a5055; background: currentColor; }
.map-key.plaza { color: #12a6df; background: currentColor; }
.map-key.plate { color: #f270db; background: currentColor; }

.enemy-guide {
  position: fixed;
  inset: 0;
  z-index: 96;
  display: grid;
  place-items: center;
  padding: 18px;
  pointer-events: auto;
  background: radial-gradient(circle at 50% 24%, rgba(26, 42, 51, .77), rgba(2, 5, 8, .97) 74%);
  backdrop-filter: blur(11px) saturate(.66);
}
.enemy-guide-card {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  width: min(1040px, 100%);
  max-height: min(92vh, 880px);
  border: 1px solid rgba(164, 212, 225, .34);
  background: linear-gradient(155deg, rgba(5, 10, 14, .985), rgba(10, 18, 23, .97));
  box-shadow: 0 36px 120px rgba(0, 0, 0, .86), inset 0 1px rgba(255, 255, 255, .05);
  overflow: hidden;
}
.enemy-guide-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 26px;
  padding: 24px 27px 19px;
  border-bottom: 1px solid rgba(175, 217, 228, .16);
}
.enemy-guide-header h2 {
  margin: 7px 0 5px;
  color: #e7f3f5;
  font-family: Cinzel, Georgia, serif;
  font-size: clamp(24px, 4vw, 38px);
  letter-spacing: .11em;
}
.enemy-guide-header p {
  max-width: 760px;
  margin: 0;
  color: #819398;
  font-size: 11px;
  line-height: 1.55;
}
.enemy-guide-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  min-height: 0;
  padding: 20px 24px;
  overflow: auto;
  scrollbar-color: #476c76 #0a1115;
}
.enemy-guide-item {
  --enemy-card: #aeb7ba;
  position: relative;
  min-height: 148px;
  padding: 17px 17px 15px;
  border: 1px solid color-mix(in srgb, var(--enemy-card) 42%, rgba(255,255,255,.06));
  border-top: 3px solid var(--enemy-card);
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--enemy-card) 8%, rgba(255,255,255,.015)), rgba(255,255,255,.012)),
    rgba(0,0,0,.16);
  box-shadow: inset 0 1px rgba(255,255,255,.025), 0 9px 28px rgba(0,0,0,.18);
}
.enemy-guide-item::after {
  content: "";
  position: absolute;
  right: 12px;
  bottom: 12px;
  width: 28px;
  height: 28px;
  border: 1px solid color-mix(in srgb, var(--enemy-card) 50%, transparent);
  transform: rotate(45deg);
  opacity: .28;
  box-shadow: 0 0 15px color-mix(in srgb, var(--enemy-card) 45%, transparent);
}
.enemy-guide-item.soldier { --enemy-card: #9aa3a7; }
.enemy-guide-item.coinshot { --enemy-card: #49c66c; }
.enemy-guide-item.lurcher { --enemy-card: #4389ea; }
.enemy-guide-item.pewterarm { --enemy-card: #de4048; }
.enemy-guide-item.tineye { --enemy-card: #f0c94f; }
.enemy-guide-item.inquisitor { --enemy-card: #d72f3b; }
.enemy-guide-name { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.enemy-guide-name span {
  color: var(--enemy-card);
  font-family: Cinzel, Georgia, serif;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .08em;
  text-shadow: 0 0 12px color-mix(in srgb, var(--enemy-card) 42%, transparent);
}
.enemy-guide-name b {
  padding: 4px 6px;
  border: 1px solid color-mix(in srgb, var(--enemy-card) 52%, transparent);
  color: var(--enemy-card);
  font-size: 8px;
  letter-spacing: .1em;
}
.enemy-guide-item p {
  position: relative;
  z-index: 1;
  max-width: 92%;
  margin: 13px 0 0;
  color: #aab9bd;
  font-size: 11px;
  line-height: 1.58;
}
.enemy-guide-item kbd { border-color: color-mix(in srgb, var(--enemy-card) 45%, transparent); }
.enemy-guide-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 14px 24px;
  border-top: 1px solid rgba(175, 217, 228, .16);
  color: #70858b;
  background: rgba(0, 0, 0, .18);
  font-size: 10px;
}
.enemy-guide-footer .primary-button { min-width: 220px; margin: 0; padding: 12px 18px; }

#hud.cinematic #objective-compass,
#hud.cinematic #map-legend { opacity: 0 !important; }

@media (max-width: 900px) {
  .enemy-guide-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #map-legend { width: 128px; top: 154px; grid-template-columns: 1fr; }
}

@media (max-width: 800px) {
  #objective-compass { top: 221px; transform: translateX(-50%) scale(.88); }
  #map-legend { display: none; }
}

@media (max-width: 640px) {
  .enemy-guide { padding: 0; }
  .enemy-guide-card { width: 100%; min-height: 100vh; max-height: 100vh; border: 0; }
  .enemy-guide-header { padding: 17px 16px 14px; }
  .enemy-guide-header p { display: none; }
  .enemy-guide-grid { grid-template-columns: 1fr; gap: 9px; padding: 12px; }
  .enemy-guide-item { min-height: 116px; padding: 14px; }
  .enemy-guide-footer { padding: 10px 12px; }
  .enemy-guide-footer span { display: none; }
  .enemy-guide-footer .primary-button { width: 100%; min-width: 0; }
  #objective-compass { top: 190px; min-width: 145px; transform: translateX(-50%) scale(.78); }
}

#hud:has(#boss-panel:not(.hidden)) #objective-compass { top: 143px; }
@media (max-width: 800px) {
  #hud:has(#boss-panel:not(.hidden)) #objective-compass { top: 267px; }
}

/* V5 developer cheat tools */
.control-cheats-section { border-color: rgba(235, 188, 80, .24); }
.control-cheats-section h3 { color: #f3d58a; background: rgba(214, 158, 45, .07); }
.cheat-toggle-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding: 12px 14px 15px; }
.cheat-toggle { display: flex; align-items: flex-start; gap: 10px; min-height: 58px; padding: 10px 11px; border: 1px solid rgba(255,255,255,.075); background: rgba(255,255,255,.022); cursor: pointer; transition: border-color .16s, background .16s; }
.cheat-toggle:hover { border-color: rgba(239, 205, 124, .32); background: rgba(229, 176, 65, .05); }
.cheat-toggle input { flex: 0 0 auto; width: 17px; height: 17px; margin: 2px 0 0; accent-color: #e5b64f; }
.cheat-toggle span, .cheat-toggle b, .cheat-toggle small { display: block; }
.cheat-toggle b { color: #dfeaed; font-size: 11px; letter-spacing: .025em; }
.cheat-toggle small { margin-top: 4px; color: #788b90; font-size: 9px; line-height: 1.35; }
.cheat-toggle:has(input:checked) { border-color: rgba(235, 188, 80, .48); background: rgba(219, 157, 40, .085); box-shadow: inset 3px 0 #e0ad3d; }
.cheat-number-table { border-top: 1px solid rgba(255,255,255,.065); }
.cheat-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; padding: 14px; }
.cheat-actions button, .cheat-spawn-row button { min-height: 38px; padding: 8px 10px; border: 1px solid rgba(159, 205, 217, .2); color: #d6e5e8; background: rgba(91, 154, 171, .075); font-size: 9px; font-weight: 800; letter-spacing: .065em; text-transform: uppercase; cursor: pointer; transition: background .15s, border-color .15s, transform .15s; }
.cheat-actions button:hover, .cheat-spawn-row button:hover { transform: translateY(-1px); border-color: rgba(188, 225, 234, .48); background: rgba(101, 181, 202, .14); }
.cheat-actions button[data-cheat-action="kill-enemies"], .cheat-actions button[data-cheat-action="kill-boss"] { border-color: rgba(221, 82, 91, .28); background: rgba(180, 45, 53, .075); }
.cheat-spawn-row { display: grid; grid-template-columns: auto minmax(160px, 1fr) minmax(180px, auto); align-items: center; gap: 10px; padding: 0 14px 15px; }
.cheat-spawn-row label { color: #a9babf; font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.cheat-spawn-row select { min-height: 38px; padding: 7px 10px; border: 1px solid rgba(159,205,217,.2); color: #deeaec; background: #0b1419; }
.debug-overlay { position: fixed; z-index: 35; left: 18px; bottom: 18px; width: min(340px, calc(100vw - 36px)); padding: 11px 13px; border: 1px solid rgba(235,188,80,.34); color: #e7edf0; background: rgba(3,7,9,.88); box-shadow: 0 12px 36px rgba(0,0,0,.45); font: 11px/1.55 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; pointer-events: none; white-space: pre-line; }
.debug-overlay strong { color: #f2cf78; }
@media (max-width: 760px) {
  .cheat-toggle-grid { grid-template-columns: 1fr; }
  .cheat-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cheat-spawn-row { grid-template-columns: 1fr; }
}