:root {
  --ink: #e9e1cc;
  --dim: #a89d84;
  --panel: rgba(22, 19, 14, 0.72);
  --edge: rgba(224, 176, 64, 0.35);
  --gold: #e0b040;
  --blue: #4aa3ff;
  --red: #ff5a3c;
  --mono: 'Share Tech Mono', ui-monospace, monospace;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #140f0a; color: var(--ink); font-family: var(--mono); }
#view { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }
button { font-family: var(--mono); cursor: pointer; }

/* ---------- HUD ---------- */
#hud { position: fixed; inset: 0; pointer-events: none; display: none; }
body.playing #hud { display: block; }
.panel { background: var(--panel); border: 1px solid var(--edge); border-radius: 4px; }
#damageFlash { position: absolute; inset: 0; background: radial-gradient(ellipse at center, transparent 40%, rgba(200, 20, 10, 0.9)); opacity: 0; }

#statusPanel { position: absolute; top: 12px; left: 12px; padding: 8px 10px; width: 290px; font-size: 13px; }
#statusPanel .row { display: flex; align-items: center; gap: 8px; margin: 3px 0; }
#statusPanel label { width: 58px; color: var(--dim); }
#statusPanel b { width: 38px; text-align: right; font-weight: normal; }
.bar { flex: 1; height: 10px; background: rgba(0, 0, 0, 0.5); border: 1px solid rgba(255, 255, 255, 0.12); position: relative; }
.bar i { position: absolute; left: 0; top: 0; bottom: 0; width: 100%; transition: width 0.1s linear; }
.bar i.hp { background: linear-gradient(90deg, #b8352a, #e6b93f 40%, #6fc24a); background-size: 290px 100%; }
.bar i.main { background: #e0b040; }
.bar i.chain { background: #c9c3b3; }
.missiles { color: #7cc3ff; letter-spacing: 2px; }

#topCenter { position: absolute; top: 12px; left: 50%; transform: translateX(-50%); padding: 6px 16px; text-align: center; }
#money { font-size: 22px; color: #9be07a; }
#income { color: var(--dim); }
#topCenter .sub { font-size: 12px; color: var(--dim); }
#lives { color: var(--gold); letter-spacing: 2px; }

#minimap { position: absolute; top: 12px; right: 12px; width: 200px; height: 200px; border: 1px solid var(--edge); border-radius: 4px; pointer-events: auto; cursor: crosshair; image-rendering: pixelated; }
body.strategy #minimap { width: 280px; height: 280px; }

#msgs { position: absolute; top: 78px; left: 50%; transform: translateX(-50%); text-align: center; font-size: 15px; text-shadow: 0 1px 2px #000, 0 0 6px #000; }
#msgs div { transition: opacity 1s; }
#msgs div.fade { opacity: 0; }

#crosshair { position: absolute; left: 50%; top: 50%; width: 34px; height: 34px; margin: -17px 0 0 -17px; border: 2px solid rgba(255, 255, 255, 0.7); border-radius: 50%; }
#crosshair span { position: absolute; left: 50%; top: 50%; width: 4px; height: 4px; margin: -2px; background: #fff; border-radius: 50%; }
#crosshair.enemy { border-color: var(--red); }
body.strategy #crosshair, body.strategy #lock { display: none !important; }
#lock { position: absolute; width: 46px; height: 46px; margin: -23px 0 0 -23px; border: 2px dashed #7cc3ff; display: none; transform: rotate(45deg); }

#capture { position: absolute; top: 38%; left: 50%; width: 240px; transform: translateX(-50%); text-align: center; display: none; font-size: 13px; color: #9be07a; }
#capture .bar i { background: #9be07a; width: 0; }
#respawn { position: absolute; top: 45%; width: 100%; text-align: center; font-size: 26px; display: none; text-shadow: 0 2px 4px #000; }

#bottom { position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 6px; }
#queue { display: flex; gap: 4px; min-height: 42px; }
.qi { position: relative; width: 40px; height: 40px; background: var(--panel); border: 1px solid var(--edge); border-radius: 3px; overflow: hidden; }
.qi img { width: 100%; height: 100%; }
.qi span { position: absolute; right: 2px; top: 0; font-size: 10px; color: var(--gold); }
.qi i { position: absolute; left: 0; bottom: 0; height: 3px; background: #9be07a; }
#buildRow { display: flex; gap: 6px; pointer-events: auto; }
#lanes { display: flex; align-items: center; gap: 4px; padding: 4px 6px; }
#lanes .lbl { font-size: 10px; color: var(--dim); writing-mode: vertical-rl; transform: rotate(180deg); }
.lane-btn { width: 34px; height: 58px; background: rgba(0, 0, 0, 0.4); border: 1px solid rgba(255, 255, 255, 0.15); color: var(--ink); font-size: 18px; border-radius: 3px; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.lane-btn small { font-size: 9px; color: var(--dim); }
.lane-btn.sel { background: rgba(74, 163, 255, 0.3); border-color: var(--blue); }
#buildBar { display: flex; gap: 3px; padding: 4px; }
.build-btn { position: relative; width: 66px; height: 66px; padding: 0; background: rgba(0, 0, 0, 0.35); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 3px; color: var(--ink); overflow: hidden; }
.build-btn:hover { border-color: var(--gold); background: rgba(224, 176, 64, 0.12); }
.build-btn img { width: 100%; height: 100%; position: absolute; inset: 0; }
.build-btn .k { position: absolute; left: 3px; top: 1px; font-size: 11px; color: var(--gold); }
.build-btn .n { position: absolute; left: 0; right: 0; bottom: 12px; font-size: 9px; text-align: center; text-shadow: 0 0 3px #000; }
.build-btn .c { position: absolute; left: 0; right: 0; bottom: 1px; font-size: 10px; text-align: center; color: #9be07a; text-shadow: 0 0 3px #000; }
.build-btn.poor { opacity: 0.45; }
.build-btn.poor .c { color: var(--red); }
#tip { position: fixed; z-index: 30; max-width: 240px; padding: 6px 8px; font-size: 12px; background: #1b1610; border: 1px solid var(--edge); border-radius: 3px; pointer-events: none; display: none; }

#keys { position: absolute; left: 12px; bottom: 12px; padding: 6px 8px; font-size: 11px; color: var(--dim); line-height: 1.5; }
#keys b, #stratHint b { color: var(--ink); font-weight: normal; }
#stratHint { position: absolute; left: 50%; top: 70px; transform: translateX(-50%); padding: 4px 10px; font-size: 12px; color: var(--dim); display: none; }
body.strategy #stratHint { display: block; }
body.strategy #msgs { top: 100px; }

/* ---------- screens ---------- */
.screen { position: fixed; inset: 0; display: none; align-items: center; justify-content: center; z-index: 10; overflow-y: auto; padding: 16px; }
.screen.show { display: flex; }
#title { background: linear-gradient(rgba(20, 14, 8, 0.72), rgba(20, 14, 8, 0.92)), url('assets/tex/egyptsandwalltexturea.jpg') center / 512px; }
.title-inner { max-width: 880px; width: 100%; text-align: center; }
h1 { font-family: 'Black Ops One', var(--mono); font-weight: normal; font-size: clamp(48px, 11vw, 110px); letter-spacing: 0.08em; margin: 0; color: var(--gold); text-shadow: 0 4px 0 #5a3a10, 0 0 40px rgba(224, 176, 64, 0.3); }
.tag { color: var(--dim); margin: 4px 0 18px; }
.story, .howto { max-width: 720px; margin: 10px auto; line-height: 1.55; font-size: 15px; }
.story { color: #d9ccb0; font-style: italic; }
#levels { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; margin: 22px 0; }
.lvl { text-align: left; padding: 14px; background: var(--panel); border: 1px solid var(--edge); border-radius: 6px; color: var(--ink); min-height: 120px; transition: transform 0.1s, border-color 0.1s; }
.lvl:hover:not(:disabled) { transform: translateY(-2px); border-color: var(--gold); }
.lvl:disabled { opacity: 0.4; cursor: not-allowed; }
.lvl .num { color: var(--gold); font-size: 12px; }
.lvl .nm { font-family: 'Black Ops One', var(--mono); font-size: 20px; margin: 4px 0; }
.lvl .ds { font-size: 12px; color: var(--dim); }
.lvl .done { color: #9be07a; font-size: 12px; }
.opts { display: flex; gap: 22px; justify-content: center; flex-wrap: wrap; color: var(--dim); font-size: 13px; }
.opts input[type=range] { vertical-align: middle; width: 110px; accent-color: var(--gold); }
.credits { margin-top: 18px; font-size: 11px; color: #7d735f; }

.card { max-width: 620px; width: 100%; padding: 26px 28px; background: #1b1610; border: 1px solid var(--edge); border-radius: 8px; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6); }
.card.small { max-width: 340px; text-align: center; }
.card h2 { font-family: 'Black Ops One', var(--mono); font-weight: normal; font-size: 30px; margin: 4px 0 12px; color: var(--gold); }
.kicker { font-size: 12px; color: var(--dim); letter-spacing: 0.2em; }
.card p { line-height: 1.6; }
.goals { padding-left: 18px; color: #cfc4aa; font-size: 13px; line-height: 1.6; }
.btns { display: flex; gap: 10px; justify-content: flex-end; margin-top: 18px; flex-wrap: wrap; }
.btns.col { flex-direction: column; }
.btns button { padding: 10px 22px; font-size: 16px; background: var(--gold); color: #1b1610; border: 0; border-radius: 4px; }
.btns button.ghost { background: transparent; color: var(--ink); border: 1px solid rgba(255, 255, 255, 0.25); }
.btns button:hover { filter: brightness(1.1); }
#pause, #end, #briefing, #loading { background: rgba(10, 8, 5, 0.7); }
#eStats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 10px; }
#eStats div { background: rgba(0, 0, 0, 0.3); padding: 8px; border-radius: 4px; text-align: center; font-size: 11px; color: var(--dim); }
#eStats b { display: block; font-size: 20px; color: var(--ink); font-weight: normal; }

@media (max-width: 900px) {
  #keys { display: none; }
  .build-btn { width: 50px; height: 50px; }
  #statusPanel { width: 220px; }
  #minimap { width: 140px; height: 140px; }
}