/* vault stage: canvas + tools + hud */

.vaultstage {
  position: relative;
  border: 1px solid var(--line, rgba(255,255,255,0.10));
  background: radial-gradient(60% 50% at 50% 26%, rgba(255,255,255,0.05), transparent 70%), #060606;
  margin: 30px 0 14px;
  overflow: hidden;
}

.vaultstage canvas { display: block; max-width: 100%; cursor: crosshair; touch-action: manipulation; }

.toolbar {
  position: absolute;
  top: 14px;
  left: 14px;
  display: flex;
  gap: 1px;
  background: rgba(255,255,255,0.09);
  border: 1px solid rgba(255,255,255,0.12);
}

.tool {
  display: flex;
  align-items: center;
  gap: 9px;
  background: rgba(6,6,6,0.88);
  border: 0;
  padding: 11px 15px;
  cursor: pointer;
  font-family: 'IBM Plex Mono', ui-monospace, Menlo, monospace;
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.6);
  transition: background 0.18s ease, color 0.18s ease;
}

.tool:hover { color: #fff; background: rgba(255,255,255,0.06); }
.tool.on { background: #fff; color: #000; }
.tool em { font-style: normal; opacity: 0.5; font-size: 9px; }
.tool.on em { opacity: 0.6; }

.tool .sw { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.tool .sw.ex { background: #ffa53c; box-shadow: 0 0 9px rgba(255,165,60,0.9); }
.tool .sw.co { background: #8ecbff; box-shadow: 0 0 9px rgba(142,203,255,0.9); }
.tool .sw.rm { background: #ff007a; box-shadow: 0 0 9px rgba(255,0,122,0.9); }

.vhud {
  position: absolute;
  left: 14px;
  bottom: 14px;
  display: flex;
  flex-wrap: wrap;
  gap: 1px;
  background: rgba(255,255,255,0.09);
  border: 1px solid rgba(255,255,255,0.12);
}

.vhud .vh { background: rgba(6,6,6,0.88); padding: 10px 15px; min-width: 104px; }

.vhud span {
  display: block;
  font-family: 'IBM Plex Mono', ui-monospace, Menlo, monospace;
  font-size: 8.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.34);
  margin-bottom: 5px;
}

.vhud b {
  font-family: 'IBM Plex Mono', ui-monospace, Menlo, monospace;
  font-size: 13px;
  font-weight: 400;
  color: #fff;
}

.vbtns {
  position: absolute;
  right: 14px;
  bottom: 14px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.vbtns .mini { margin-top: 0; }
.mini[disabled] { opacity: 0.35; cursor: not-allowed; }

/* the mini button also lives on the landing page, define it locally too */
.vaultstage .mini,
.vbtns .mini {
  padding: 9px 14px;
  font-family: 'IBM Plex Mono', ui-monospace, Menlo, monospace;
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #fff;
  background: rgba(6,6,6,0.88);
  border: 1px solid rgba(255,255,255,0.24);
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}

.vaultstage .mini:hover:not([disabled]),
.vbtns .mini:hover:not([disabled]) { background: #fff; color: #000; }

/* heat band table */
.bands {
  width: 100%;
  border-collapse: collapse;
  margin: 26px 0;
  font-size: 14.5px;
}

.bands th {
  text-align: left;
  font-family: 'IBM Plex Mono', ui-monospace, Menlo, monospace;
  font-size: 9px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.34);
  padding: 0 16px 12px 0;
  border-bottom: 1px solid rgba(255,255,255,0.1);
  font-weight: 400;
}

.bands td {
  padding: 15px 16px 15px 0;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.62);
}

.bands td:nth-child(2) {
  font-family: 'IBM Plex Mono', ui-monospace, Menlo, monospace;
  color: #fff;
}

.bands .dot {
  display: inline-block;
  width: 9px; height: 9px;
  border-radius: 50%;
  margin-right: 10px;
  vertical-align: middle;
}

.bands .dot.cool { background: #7f7f7f; }
.bands .dot.warm { background: #ffc879; box-shadow: 0 0 8px rgba(255,200,120,0.6); }
.bands .dot.hot  { background: #ff9430; box-shadow: 0 0 10px rgba(255,148,48,0.7); }
.bands .dot.over { background: #ff5a0a; box-shadow: 0 0 12px rgba(255,90,10,0.85); }

@media (max-width: 900px) {
  .toolbar, .vhud, .vbtns {
    position: static;
    margin: 0;
    border-left: 0;
    border-right: 0;
    border-bottom: 0;
  }
  .toolbar { flex-wrap: wrap; border-top: 1px solid rgba(255,255,255,0.12); }
  .tool { flex: 1 1 auto; justify-content: center; padding: 13px 10px; }
  .vhud { flex-wrap: wrap; border-top: 1px solid rgba(255,255,255,0.12); }
  .vhud .vh { flex: 1 1 45%; min-width: 0; }
  .vbtns { padding: 12px; gap: 8px; border-top: 1px solid rgba(255,255,255,0.12); }
  .vbtns .mini { flex: 1 1 auto; }
}

@media (max-width: 480px) {
  .tool { font-size: 9px; letter-spacing: 0.1em; gap: 6px; }
  .tool em { display: none; }
  .vhud .vh { padding: 9px 12px; }
  .vhud b { font-size: 12px; }
  .bands { font-size: 13px; }
  .bands td { padding: 12px 10px 12px 0; }
  .bands th { padding-right: 10px; }
}