web/game.css

/* Modular Mind: Boss Fight -- dark-souls-ish UI */
* { box-sizing: border-box; }
#mm-root {
  --bg:#0d0b10; --panel:#15121b; --edge:#2a2436; --ink:#e8e2d6; --dim:#8a8198;
  --hp:#a01b1b; --hpe:#d23b2f; --php:#c8a24a; --stam:#3a8f5a; --accent:#caa15a;
  font-family: "Trebuchet MS", system-ui, sans-serif;
  color: var(--ink); display:flex; gap:14px; flex-wrap:wrap;
  justify-content:center; align-items:flex-start; padding:8px;
  background: radial-gradient(circle at 50% 0%, #1a1622, #0d0b10 70%);
  border:1px solid var(--edge); border-radius:10px; user-select:none;
}
#mm-stage { position:relative; }
#mm-canvas {
  display:block; background:#000; border:1px solid var(--edge); border-radius:6px;
  image-rendering: pixelated; image-rendering: crisp-edges;
  width:720px; max-width:92vw; height:auto;
}
/* health bars overlaid on the stage */
.mm-bars { position:absolute; left:0; right:0; top:10px; padding:0 18px;
  display:flex; flex-direction:column; gap:8px; pointer-events:none; }
.mm-bar-row { display:flex; align-items:center; gap:8px; }
.mm-bar-label { width:96px; font-size:12px; letter-spacing:1px; color:var(--dim);
  text-transform:uppercase; text-shadow:0 1px 2px #000; }
.mm-bar { flex:1; height:14px; background:#06040a; border:1px solid #000;
  box-shadow:inset 0 0 0 1px #2a2436; position:relative; overflow:hidden; }
.mm-bar > i { position:absolute; left:0; top:0; bottom:0; display:block;
  transition: width .12s linear; }
.mm-fill-boss  > i { background:linear-gradient(#d23b2f,#7e1414); }
.mm-fill-php   > i { background:linear-gradient(#e3c06a,#9c7a2e); }
.mm-fill-stam  > i { background:linear-gradient(#4fae74,#256b41); height:8px; top:3px; }
.mm-fill-shield > i { background:linear-gradient(#bff0ff,#3aa6d6); height:8px; top:3px;
  box-shadow:0 0 6px rgba(95,217,255,.7); }
#mm-shield-row { transition:opacity .4s; }
.mm-boss-name { text-align:center; font-size:13px; letter-spacing:3px;
  color:var(--hpe); text-transform:uppercase; margin-bottom:2px; text-shadow:0 1px 3px #000;}

#mm-mute { position:absolute; top:10px; right:12px; z-index:5; width:34px; height:34px;
  border-radius:6px; border:1px solid var(--edge); background:rgba(13,11,16,.7);
  color:var(--ink); font-size:16px; cursor:pointer; line-height:1; }
#mm-mute:hover { border-color:var(--accent); }

/* centre overlay messages (YOU DIED / VICTORY / start) */
#mm-overlay { position:absolute; inset:0; display:flex; flex-direction:column;
  align-items:center; justify-content:center; text-align:center; gap:14px;
  background:rgba(4,3,7,.55); backdrop-filter:blur(1px); cursor:pointer; }
#mm-overlay.hidden { display:none; }
#mm-big { font-size:52px; letter-spacing:8px; font-weight:bold;
  text-shadow:0 2px 18px #000; }
#mm-big.died { color:#9a1b1b; }
#mm-big.win  { color:#caa15a; }
#mm-sub { color:var(--ink); font-size:15px; max-width:520px; line-height:1.5; }
#mm-start-btn { padding:10px 22px; background:#1d1726; color:var(--accent);
  border:1px solid var(--accent); border-radius:6px; font-size:16px; cursor:pointer;
  letter-spacing:2px; text-transform:uppercase; }
#mm-start-btn:hover { background:#2a2136; }
.mm-diff { display:flex; align-items:center; gap:8px; flex-wrap:wrap; justify-content:center; }
.mm-diff-label { font-size:12px; color:var(--dim); letter-spacing:1px; text-transform:uppercase; }
.mm-diff-btn { display:flex; flex-direction:column; align-items:center; gap:1px;
  padding:6px 14px; background:#161019; color:var(--dim); border:1px solid var(--edge);
  border-radius:6px; cursor:pointer; font-size:14px; letter-spacing:1px; min-width:84px; }
.mm-diff-btn small { font-size:9px; opacity:.7; letter-spacing:.5px; }
.mm-diff-btn:hover { border-color:var(--accent); color:var(--ink); }
.mm-diff-btn.mm-diff-on { background:#2a1f12; color:var(--accent); border-color:var(--accent);
  box-shadow:0 0 8px rgba(202,161,90,.35); }
.mm-keys { color:var(--dim); font-size:12.5px; line-height:1.9; }
.mm-keys b { color:var(--ink); background:#241d30; padding:1px 7px; border-radius:4px;
  border:1px solid var(--edge); }

/* ---------- Modular Mind telemetry panel ---------- */
#mm-panel { width:330px; max-width:92vw; background:var(--panel);
  border:1px solid var(--edge); border-radius:8px; padding:12px 13px; }
#mm-panel h3 { margin:0 0 2px; font-size:14px; letter-spacing:2px; color:var(--accent);
  text-transform:uppercase; }
#mm-panel .mm-tag { font-size:11px; color:var(--dim); margin-bottom:10px; }
.mm-decision { display:flex; align-items:center; justify-content:space-between;
  background:#0e0b14; border:1px solid var(--edge); border-radius:6px;
  padding:7px 10px; margin-bottom:10px; }
.mm-decision .lbl { font-size:11px; color:var(--dim); letter-spacing:1px; }
.mm-decision .act { font-size:20px; font-weight:bold; letter-spacing:2px; color:#fff; }
.mm-phase { font-size:11px; padding:2px 8px; border-radius:10px; border:1px solid var(--edge);}
.mm-phase.p1 { color:#7fb2e6; } .mm-phase.p2 { color:#e6705f; border-color:#7e1414;
  background:#1c0e0e; }

.mm-sec-title { font-size:11px; color:var(--dim); letter-spacing:1px;
  text-transform:uppercase; margin:12px 0 6px; }
.mm-spec { margin-bottom:7px; }
.mm-spec .top { display:flex; justify-content:space-between; align-items:baseline; }
.mm-spec .nm { font-size:12.5px; }
.mm-spec .nm .dot { display:inline-block; width:8px; height:8px; border-radius:50%;
  margin-right:6px; vertical-align:middle; }
.mm-spec .owns { font-size:10px; color:var(--dim); margin-left:5px; }
.mm-spec .mod-tag { font-size:9px; color:#e67e22; border:1px solid #5a3a16;
  padding:0 5px; border-radius:8px; margin-left:5px; }
.mm-spec .val { font-size:11px; color:var(--dim); font-variant-numeric:tabular-nums; }
.mm-spec .track { height:7px; background:#06040a; border:1px solid #000; margin-top:3px;
  border-radius:3px; overflow:hidden; }
.mm-spec .track > i { display:block; height:100%; transition:width .15s; }
.mm-spec.win .nm { color:#fff; font-weight:bold; }
.mm-spec.win .track { box-shadow:0 0 6px rgba(202,161,90,.6); }

.mm-latent { display:flex; gap:2px; align-items:flex-end; height:34px; margin-top:4px;
  background:#0e0b14; border:1px solid var(--edge); border-radius:4px; padding:3px; }
.mm-latent > i { flex:1; background:linear-gradient(#caa15a,#5a4422); border-radius:1px;
  min-height:1px; transition:height .15s; }
.mm-flow { font-size:10.5px; color:var(--dim); margin-top:8px; line-height:1.5; }
.mm-flow b { color:var(--accent); }
.mm-note { font-size:10px; color:#6f6880; margin-top:10px; border-top:1px solid var(--edge);
  padding-top:8px; line-height:1.5; }