/* /opt/bmr-digi-sim/static/style.css */
:root{
  --bg:#0b0b0f;
  --panel:#13131a;
  --ink:#f5f5f7;
  --muted:#a8a8b3;
  --accent:#c1121f;
  --accent-2:#6c1b2a;
  --green:#3fb950;
  --yellow:#e5c07b;
}

*{ box-sizing: border-box; }
html,body{ height:100%; margin:0; background:var(--bg); color:var(--ink); font:15px/1.4 ui-monospace,SFMono-Regular,Consolas,monospace; }

header{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 16px; background:linear-gradient(180deg,#121219,#0c0c12);
  border-bottom:1px solid #23232e;
}
h1{ margin:0; font-size:18px; letter-spacing:0.5px; }
.controls button{
  background:var(--accent); color:#fff; border:0; padding:8px 12px; margin-left:8px;
  border-radius:8px; cursor:pointer; font-weight:600;
}
.controls button:nth-child(2){ background:var(--accent-2); }

.layout{
  display:grid;
  grid-template-columns: 1fr 1.1fr; /* board left, console right */
  gap:14px;
  padding:14px;
  height: calc(100vh - 58px);
}

.console-pane{
  background:var(--panel); border:1px solid #23232e; border-radius:12px;
  display:flex; flex-direction:column; min-width: 0;
}
.console{
  padding:12px; overflow:auto; white-space:pre-wrap; flex:1; min-height:0;
}
.console div{ margin:2px 0; }

.prompt-bar{
  border-top:1px solid #23232e; padding:10px; background:#101018;
}
.prompt{ color:var(--yellow); margin-bottom:6px; min-height: 1em; }
.answer-form{ display:flex; gap:8px; }
.answer-form input{
  flex:1; padding:8px 10px; border:1px solid #2d2d3a; border-radius:8px; background:#0b0b12; color:var(--ink);
}
.answer-form button{ padding:8px 12px; border:0; border-radius:8px; background:#2b2b36; color:#dcdce3; }

.board-pane{
  background:var(--panel); border:1px solid #23232e; border-radius:12px;
  padding:12px; display:flex; flex-direction:column; min-width:0;
}
.hud{ display:flex; gap:8px; margin-bottom:8px; flex-wrap:wrap; }
.chip{ background:#1a1a24; border:1px solid #2a2a36; padding:6px 10px; border-radius:999px; color:#d8d8e0; }

.board{ border-collapse:separate; border-spacing:6px; table-layout:fixed; width:100%; }
.board td{
  height:88px; background:#0f0f16; border:1px solid #272737; border-radius:10px; vertical-align:top; position:relative;
  padding:4px;
}
.board td.gap{ background:transparent; border:0; }
.board td.heart{ outline:2px solid #e63946; }
.board td.rift{ outline:2px solid #1f6feb; }
.board td.discovered{ background:#12121a; }

.room-num{
  position:absolute; top:4px; left:6px; font-size:12px; color:var(--muted);
}
.room-name{
  position:absolute; bottom:6px; left:6px; right:6px; font-size:12px; color:#d0d0da; opacity:.9;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

.tokens{ position:absolute; right:6px; bottom:6px; display:flex; gap:6px; }
.token{
  width:22px; height:22px; display:inline-flex; align-items:center; justify-content:center;
  border-radius:999px; border:1px solid #444459; font-weight:700;
}
.token.player{ background:#1b2a41; color:#8ecae6; }
.token.monster{ background:#3a121a; color:#ffb4c2; }

.legend{ margin-top:10px; display:flex; gap:16px; color:#c9c9d4; flex-wrap:wrap; }
.legend .tile{
  display:inline-block; width:14px; height:14px; margin-right:6px; border-radius:3px; vertical-align:middle;
  background:#0f0f16; border:1px solid #272737;
}
.legend .tile.heart{ outline:2px solid #e63946; }
.legend .tile.rift{ outline:2px solid #1f6feb; }
.legend .tile.player{ background:#1b2a41; border-color:#3b4a6b; }
.legend .tile.monster{ background:#3a121a; border-color:#5a1f2a; }