/* ==========================================================================
   THE BORING MINING GAME — lunar ISRU drone-swarm sim
   Original fan-made tribute. NASA-flavoured mission-console UI on hard dark.
   ========================================================================== */

:root{
  --bg:#05070c;
  --panel:#0d1420;
  --panel2:#111a29;
  --line:#1e2b3d;
  --fg:#dfe7f2;
  --muted:#7d8ca3;
  --amber:#ffc857;      /* BORE-1, your drone swarm */
  --amber-dim:#8a6b2c;
  --red:#ff5a5a;        /* Helios, the rival colony */
  --ice:#6fd6e8;
  --ore:#d2953f;
  --violet:#b06be0;     /* crawlers */
  --ok:#5fd48a;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,"Roboto Mono",monospace;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:var(--bg); color:var(--fg);
  font:14px/1.5 var(--mono);
  -webkit-font-smoothing:antialiased;
  display:flex; align-items:center; justify-content:center;
  min-height:100vh; padding:16px;
  background-image:
    radial-gradient(1200px 600px at 70% -10%, #101a2b 0%, transparent 60%),
    radial-gradient(800px 500px at 10% 110%, #0b1420 0%, transparent 60%);
}

#app{width:100%; max-width:1340px}

/* ---------- screens ---------- */
.screen{display:none}
.screen.active{display:block; animation:fade .25s ease}
@keyframes fade{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}

.panel{
  border:1px solid var(--line); background:linear-gradient(180deg,var(--panel2),var(--panel));
  border-radius:10px; padding:26px 28px;
  box-shadow:0 18px 50px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.03);
}

h1{
  margin:0; font-size:clamp(28px,6vw,52px); letter-spacing:.14em; font-weight:800;
  color:var(--amber);
  text-shadow:0 0 22px rgba(255,200,87,.28);
}
h2{margin:0 0 4px; font-size:15px; letter-spacing:.26em; color:var(--muted); font-weight:600}
h3{margin:22px 0 8px; font-size:13px; letter-spacing:.2em; color:var(--amber); font-weight:700}
p{margin:10px 0; color:#b9c6d8}
.dim{color:var(--muted)}
small{color:var(--muted)}
a{color:var(--ice)}

.tagline{margin:14px 0 20px; max-width:62ch}

/* ---------- buttons ---------- */
.btn{
  font:600 13px/1 var(--mono); letter-spacing:.14em;
  color:var(--fg); background:var(--panel2);
  border:1px solid var(--line); border-radius:7px;
  padding:12px 18px; cursor:pointer; transition:.14s;
}
.btn:hover{border-color:var(--amber-dim); color:var(--amber); transform:translateY(-1px)}
.btn:active{transform:none}
.btn.big{background:linear-gradient(180deg,#2a2210,#1a1509); border-color:var(--amber-dim); color:var(--amber)}
.btn.big:hover{box-shadow:0 0 18px rgba(255,200,87,.18)}
.row{display:flex; gap:10px; flex-wrap:wrap; margin-top:18px}

/* ---------- difficulty picker ---------- */
.opts{display:flex; gap:10px; flex-wrap:wrap; margin-top:8px}
.opt{
  flex:1 1 180px; text-align:left; padding:12px 14px;
  border:1px solid var(--line); border-radius:8px; background:var(--panel);
  cursor:pointer; transition:.14s;
}
.opt:hover{border-color:var(--amber-dim)}
.opt.sel{border-color:var(--amber); background:#1b1608}
.opt b{display:block; color:var(--amber); letter-spacing:.12em; font-size:12px}
.opt span{color:var(--muted); font-size:12px}

/* ---------- game shell ---------- */
#screen-game.active{display:flex; flex-direction:column; gap:8px}

.hud{
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  border:1px solid var(--line); background:var(--panel); border-radius:8px;
  padding:8px 12px; font-size:12px;
}
.stat{display:flex; align-items:center; gap:6px; white-space:nowrap}
.stat .k{color:var(--muted); letter-spacing:.1em}
.stat .v{font-weight:700; min-width:2ch}
.v.ore{color:var(--ore)} .v.ice{color:var(--ice)}
.v.pow{color:var(--ok)} .v.amb{color:var(--amber)} .v.red{color:var(--red)}
.v.ok{color:var(--ok)}
.spacer{flex:1}

.minibtn{
  font:700 11px/1 var(--mono); letter-spacing:.1em;
  color:var(--muted); background:var(--panel2);
  border:1px solid var(--line); border-radius:6px;
  padding:7px 10px; cursor:pointer; transition:.14s; white-space:nowrap;
}
.minibtn:hover{border-color:var(--amber-dim); color:var(--amber)}
.minibtn.on{color:#05070c; background:var(--amber); border-color:var(--amber)}

select.dial{
  font:700 11px/1 var(--mono); color:var(--fg);
  background:var(--panel2); border:1px solid var(--line);
  border-radius:6px; padding:6px 8px; cursor:pointer;
}
select.dial:hover{border-color:var(--amber-dim)}

.bar{width:92px; height:8px; border:1px solid var(--line); border-radius:4px; overflow:hidden; background:#0a1017}
.bar i{display:block; height:100%; width:50%; background:var(--amber); transition:width .25s}
.bar.foe i{background:var(--red)}
.bar.pw i{background:var(--ok)}
.bar.hp i{background:var(--ice)}

.stage{position:relative; border:1px solid var(--line); border-radius:8px; overflow:hidden; background:#03050a}
#view{display:block; width:100%; height:auto; image-rendering:pixelated; cursor:crosshair}

#mini{
  position:absolute; right:10px; top:10px; width:228px; height:135px;
  border:1px solid var(--line); border-radius:5px; background:rgba(5,7,12,.82);
  image-rendering:pixelated;
}

#ticker{
  position:absolute; left:10px; bottom:10px; max-width:60%;
  font-size:11px; line-height:1.7; color:var(--muted); pointer-events:none;
  text-shadow:0 1px 3px #000;
}
#ticker b{color:var(--amber); font-weight:600}
#ticker .warn{color:var(--red)}
#ticker .good{color:var(--ok)}

#banner{
  position:absolute; inset:0; display:none; place-items:center;
  background:rgba(5,7,12,.72); backdrop-filter:blur(2px);
  text-align:center; padding:24px;
}
#banner.on{display:grid}
#banner h1{font-size:clamp(22px,4vw,40px)}

.keys{
  display:flex; gap:12px; flex-wrap:wrap; justify-content:center;
  font-size:11px; color:var(--muted);
  border:1px solid var(--line); background:var(--panel); border-radius:8px; padding:8px 12px;
}
.keys kbd{
  background:var(--panel2); border:1px solid var(--line); border-bottom-width:2px;
  border-radius:4px; padding:2px 6px; color:var(--fg); font:600 11px var(--mono);
}

/* ---------- help ---------- */
.help-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:18px 28px}
.help-grid ul{margin:6px 0; padding-left:18px; color:#b9c6d8}
.help-grid li{margin:4px 0}
.swatch{display:inline-block; width:10px; height:10px; border-radius:2px; margin-right:6px; vertical-align:-1px}

.footnote{margin-top:22px; font-size:11px; color:var(--muted); line-height:1.7}

@media (max-width:640px){
  .panel{padding:18px}
  #mini{width:140px; height:83px}
  .hud{font-size:11px; gap:9px}
}

/* ---------- league table ---------- */
.tablewrap{overflow-x:auto; margin:14px 0 6px; border:1px solid var(--line); border-radius:8px}
table.league{border-collapse:collapse; width:100%; font-size:11.5px; min-width:720px}
table.league th{
  text-align:left; padding:10px 12px; font-size:10px; letter-spacing:.16em;
  color:var(--muted); font-weight:700; background:var(--panel2);
  border-bottom:1px solid var(--line); white-space:nowrap;
}
table.league td{padding:9px 12px; border-bottom:1px solid #131c29; white-space:nowrap; color:#b9c6d8}
table.league tbody tr:last-child td{border-bottom:0}
table.league tbody tr:hover{background:rgba(255,255,255,.02)}
table.league td.rank{color:var(--muted); font-weight:700}
table.league td.score{color:var(--amber); font-weight:800; font-size:12.5px}
table.league td.w{color:var(--ok); font-weight:700}
table.league td.l{color:var(--red); font-weight:700}
table.league td.dt{color:var(--muted)}
table.league .ag{color:var(--ice); font-weight:700}
table.league tr.me td{background:rgba(255,200,87,.09)}
table.league tr.me td.rank{box-shadow:inset 3px 0 0 var(--amber)}

.scoreline{display:inline-block; margin-top:10px; font-size:12px; letter-spacing:.08em; color:var(--muted)}
.scoreline b{color:var(--amber)}
.scoreline .pb{color:var(--ok)}

/* ---------- pointer / touch ---------- */
#view{touch-action:none}          /* the view never scrolls under a finger */
#mini{touch-action:none; cursor:crosshair}

#touchpad{
  position:absolute; left:0; right:0; bottom:0; display:none;
  gap:8px; padding:10px 12px; justify-content:center; flex-wrap:wrap;
  background:linear-gradient(180deg,transparent,rgba(5,7,12,.82));
}
#touchpad.on{display:flex}
.stage.touch #ticker{bottom:74px}      /* keep the log clear of the pad */
.tbtn{
  font:700 12px/1 var(--mono); letter-spacing:.1em;
  color:var(--amber); background:rgba(26,21,9,.92);
  border:1px solid rgba(255,200,87,.45); border-radius:9px;
  padding:15px 16px; min-width:74px; min-height:46px; cursor:pointer;
  touch-action:manipulation; -webkit-user-select:none; user-select:none;
  transition:.1s;
}
.tbtn:active,.tbtn.down{background:var(--amber); color:#05070c; transform:translateY(1px)}
.tbtn.hold{min-width:96px; border-color:var(--amber)}

/* ---------- key bindings editor ---------- */
.bindgroup{margin:14px 0 4px}
.bindgroup h4{
  margin:0 0 8px; font:700 10px/1 var(--mono); letter-spacing:.24em;
  color:var(--muted); text-transform:uppercase;
}
.bindlist{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(258px,1fr)); gap:8px;
}
.bindrow{
  display:flex; align-items:center; gap:10px;
  border:1px solid var(--line); border-radius:8px;
  padding:9px 12px; background:var(--panel);
}
.bindrow .nm{flex:1; font-size:12px; color:#b9c6d8}
.keycap{
  font:700 11px/1 var(--mono); letter-spacing:.06em;
  color:var(--fg); background:var(--panel2);
  border:1px solid var(--line); border-bottom-width:2px; border-radius:5px;
  padding:7px 11px; min-width:48px; text-align:center; cursor:pointer; transition:.12s;
}
.keycap:hover{border-color:var(--amber-dim); color:var(--amber)}
.keycap.cap{
  background:var(--amber); color:#05070c; border-color:var(--amber);
  animation:capture .9s ease-in-out infinite;
}
.keycap.none{color:var(--muted); font-style:italic}
@keyframes capture{0%,100%{opacity:1}50%{opacity:.55}}

@media (max-width:640px){
  .bindlist{grid-template-columns:1fr}
  .tbtn{padding:12px 12px; min-width:62px; font-size:11px}
}