.paleto-thermite-stage {
  --thermite-gold: #e4a91f;
  --thermite-yellow: #e8b624;
  --thermite-orange: #f08a27;
  --thermite-red: #e4563d;
  z-index: 55;
  background: radial-gradient(ellipse at 50% 42%, #291d16 0, #15130f 52%, #080d0a 100%);
}
.app.is-practice-mode .game-nav { z-index: 60; }
.paleto-thermite-failure-overlay { z-index: 90; }
.paleto-vault-drill-stage { z-index: 55; }
.paleto-vault-drill-practice-complete { z-index: 90; background: rgba(2, 15, 7, .93); }
.paleto-vault-drill-practice-complete .card { border-color: var(--green); box-shadow: 0 0 0 2px #48db8240, 0 0 56px #48db8230; }
.paleto-vault-drill-practice-complete .card::before { display: block; margin-bottom: 4px; padding: 9px 12px; border: 1px solid var(--green); background: #123b25; color: var(--bright); font-size: 12px; font-weight: 800; letter-spacing: .18em; content: "PRACTICE"; }
.paleto-vault-drill-practice-complete .go { background: #62ff91; }
.paleto-vault-drill-stage .vault-drill-pin-bank { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.paleto-vault-box-readout { width: min(100%, 720px); justify-self: center; margin-bottom: -9px; color: #9ebca5; font: 750 18px/1 ui-monospace, SFMono-Regular, Consolas, monospace; letter-spacing: .13em; text-align: right; white-space: nowrap; transform: translateY(-4px); }
.paleto-vault-drill-stage .vault-drill-machine.is-box-transitioning::after,
.paleto-vault-drill-stage .vault-drill-machine.is-box-open-final::after { content: "BOX " attr(data-box-transition) " OPEN"; }
.paleto-thermite-main {
  width: min(100%, 470px);
  grid-template-rows: minmax(0, 1fr) auto;
  gap: 12px;
  padding: 12px 0;
  zoom: 1.15;
}
.paleto-thermite-workarea {
  width: min(100%, 470px);
  height: fit-content;
  align-self: center;
  display: grid;
  align-content: center;
  gap: 11px;
  margin: 0 auto;
  padding: 14px 16.5px 16px;
  border: 1px solid rgba(0, 0, 0, .72);
  border-radius: 4px;
  background: rgba(5, 7, 8, .66);
  box-shadow: 0 8px 20px #0006;
}
.paleto-thermite-burn-panel {
  position: relative;
  height: 86px;
  padding: 0;
  overflow: hidden;
  border-radius: 0;
  background: #000;
  box-shadow: none;
}
.paleto-thermite-fuse {
  position: absolute;
  inset: 9px 5% 8px;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.paleto-thermite-fuse::before {
  position: absolute;
  z-index: 3;
  top: 50%;
  left: var(--thermite-line-start, calc(5% + 3px));
  width: var(--thermite-line-width, 0);
  transform: translateY(-50%);
  border-top: 1px dashed #222a2e;
  content: "";
  pointer-events: none;
}
.paleto-thermite-fuse-cap {
  position: absolute;
  z-index: 4;
  top: 7%;
  bottom: 7%;
  width: 5%;
  background: linear-gradient(90deg, #252b2f, #2b3236 50%, #252b2f);
}
.paleto-thermite-fuse-cap.is-left { left: 0; }
.paleto-thermite-fuse-cap.is-right { right: 0; }
.paleto-thermite-fuse-remaining {
  position: absolute;
  top: 18%;
  bottom: 18%;
  z-index: 1;
  border: 0;
  background: linear-gradient(180deg, #4a555b 0 18%, #3c454b 19% 82%, #343d42 83%);
  box-shadow: none;
  transition: left .05s linear, width .05s linear;
}
.paleto-thermite-fuse-burned {
  position: absolute;
  top: 18%;
  bottom: 18%;
  left: 5%;
  z-index: 2;
  background: rgba(145, 47, 35, .18);
  transition: width .05s linear;
}
.paleto-thermite-fuse-edge {
  position: absolute;
  z-index: 5;
  top: 11%;
  bottom: 11%;
  width: 3.3px;
  background: #c56622;
  transform: translateX(0);
  transition: left .05s linear, width .65s ease, transform .65s ease, background-color .65s ease, opacity .45s ease;
}
.paleto-thermite-fuse-edge.has-burned {
  width: 13.2px;
  transform: translateX(calc(3.3px - 100%));
}
.paleto-thermite-fuse-edge.is-burning {
  background-color: #bd914c;
  opacity: .4;
}
.paleto-thermite-fuse-sparks {
  position: absolute;
  z-index: 3;
  top: 50%;
  left: var(--thermite-line-start, calc(5% + 3px));
  width: 0;
  height: 0;
  pointer-events: none;
}
.paleto-thermite-fuse-spark {
  position: absolute;
  top: -2px;
  left: -2px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #ffe09a;
  opacity: 0;
}
.paleto-thermite-fuse-sparks.is-burning .paleto-thermite-fuse-spark {
  animation-name: thermite-spark-flight;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}
.paleto-thermite-fuse-sparks.is-burning .spark-a { --spark-end-x: -29px; --spark-end-y: -13px; animation-duration: .53s; animation-delay: .07s; }
.paleto-thermite-fuse-sparks.is-burning .spark-b { --spark-end-x: -36px; --spark-end-y: 15px; animation-duration: .65s; animation-delay: .29s; }
.paleto-thermite-fuse-sparks.is-burning .spark-c { --spark-end-x: -43px; --spark-end-y: -4px; animation-duration: .72s; animation-delay: .16s; }
.paleto-thermite-fuse-sparks.is-burning .spark-d { --spark-end-x: -25px; --spark-end-y: 18px; animation-duration: .51s; animation-delay: .38s; }
.paleto-thermite-fuse-sparks.is-burning .spark-e { --spark-end-x: -39px; --spark-end-y: -17px; animation-duration: .71s; animation-delay: .23s; }
@keyframes thermite-spark-flight {
  0% { transform: translate(0, 0) scale(.4); opacity: 0; }
  15% { opacity: .95; }
  45% { opacity: 1; }
  100% { transform: translate(var(--spark-end-x), var(--spark-end-y)) scale(.15); opacity: 0; }
}
.paleto-thermite-burn-readout {
  position: absolute;
  z-index: 5;
  bottom: 2px;
  left: 8px;
  display: flex;
  align-items: baseline;
  gap: 3px;
  color: #eff2ef;
  font: 800 25px/.9 'Barlow Condensed', 'Arial Narrow', sans-serif;
  letter-spacing: -.035em;
  text-shadow: 0 1px 2px #000;
}
.paleto-thermite-burn-readout small {
  color: #a4adae;
  font: 800 9px ui-monospace, SFMono-Regular, Consolas, monospace;
  letter-spacing: .16em;
}
.paleto-thermite-action-state {
  position: absolute;
  z-index: 6;
  top: 7px;
  right: 16px;
  color: var(--thermite-yellow);
  font: 750 8px ui-monospace, SFMono-Regular, Consolas, monospace;
  letter-spacing: .12em;
  white-space: nowrap;
}
.paleto-thermite-action-state[hidden] { display: none; }
.paleto-thermite-lane {
  --thermite-target-size: clamp(22px, 6.05vw, 25.3px);
  --thermite-target-x: 12%;
  --thermite-target-y: 50%;
  position: relative;
  display: block;
  width: 100%;
  height: 37px;
  overflow: hidden;
  padding: 0;
  border: 0;
  border-radius: 2px;
  background: #000;
  color: inherit;
  box-shadow: none;
  appearance: none;
  -webkit-appearance: none;
  cursor: crosshair;
  touch-action: manipulation;
  user-select: none;
}
.paleto-thermite-lane:focus-visible { outline: 1px solid #f1c65d; outline-offset: 2px; }
.paleto-thermite-lane:hover,
.paleto-thermite-lane:active { background: #000; box-shadow: none; }
.paleto-thermite-lane::before {
  position: absolute;
  z-index: 1;
  top: 50%;
  right: 0;
  left: 0;
  transform: translateY(-50%);
  border-top: 1px solid #3b4546;
  content: "";
  pointer-events: none;
}
.paleto-thermite-lane::after {
  position: absolute;
  z-index: 0;
  top: var(--thermite-target-y);
  left: var(--thermite-target-x);
  width: calc(var(--thermite-target-size) + 11.8px);
  height: calc(var(--thermite-target-size) + 3px);
  transform: translate(-50%, -50%);
  border-radius: 1px;
  background: rgba(191, 116, 25, .28);
  content: "";
  pointer-events: none;
}
.paleto-thermite-hit-zone {
  position: absolute;
  z-index: 3;
  top: var(--thermite-target-y);
  left: var(--thermite-target-x);
  width: var(--thermite-target-size);
  height: var(--thermite-target-size);
  transform: translate(-50%, -50%);
  border: 2px solid #969fa1;
  border-radius: 50%;
  background: transparent;
  box-shadow: none;
  filter: none;
  pointer-events: none;
}
.paleto-thermite-hit-zone.is-hit { border-color: #43c978; background: transparent; box-shadow: none; }
.paleto-thermite-hit-zone.is-miss { border-color: #e44c4b; background: transparent; box-shadow: none; }
.paleto-thermite-note-layer { position: absolute; z-index: 2; inset: 0; pointer-events: none; }
.paleto-thermite-note {
  position: absolute;
  top: 50%;
  width: 6.6px;
  height: 56%;
  transform: translate(-50%, -50%);
  border: 1px solid #8e6010;
  border-radius: 1px;
  background: linear-gradient(90deg, #bc7912, #f4bd28 45%, #d18b13);
  box-shadow: 0 0 6px #e9a91e35;
  will-change: left;
}
.paleto-thermite-meters {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 13.2px;
  padding: 8px 0 2px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.paleto-thermite-meter { min-width: 0; }
.paleto-thermite-meter-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 5px;
  color: #9aa5a5;
  font: 750 9px ui-monospace, SFMono-Regular, Consolas, monospace;
  letter-spacing: .16em;
}
.paleto-thermite-meter-label strong { color: #e7ebea; font-size: 12px; letter-spacing: 0; }
.paleto-thermite-meter-track {
  height: 21px;
  overflow: hidden;
  border: 1px solid #3c4443;
  background: #050809;
  box-shadow: inset 0 1px 3px #000;
}
.paleto-thermite-meter-track > span {
  display: block;
  width: 0;
  height: 100%;
  background: linear-gradient(90deg, #cf7b1c, #f4a238 72%, #eb5636);
  box-shadow: inset 0 1px #ffd27d65;
  transition: width .12s linear, background-color .15s ease;
}
#paleto-thermite-mixture-bar {
  background: linear-gradient(90deg, #d3a51d, #ecc334);
  transition: width .05s linear;
}
#paleto-thermite-heat-meter.is-warning .paleto-thermite-meter-label,
#paleto-thermite-heat-meter.is-warning .paleto-thermite-meter-label strong,
#paleto-thermite-mixture-meter.is-warning .paleto-thermite-meter-label,
#paleto-thermite-mixture-meter.is-warning .paleto-thermite-meter-label strong { color: #ed584c; }
#paleto-thermite-heat-meter.is-warning .paleto-thermite-meter-track > span { background: linear-gradient(90deg, #e59426, #ed532f); }
#paleto-thermite-mixture-meter.is-warning .paleto-thermite-meter-track > span { background: linear-gradient(90deg, #b9322c, #ed584c); }
.paleto-thermite-footer { --thermite-divider-start: -25%; --thermite-divider-width: 150%; position: relative; width: min(100%, 407px); margin: 0 auto; border-top-color: transparent; }
.paleto-thermite-footer::before { position: absolute; top: -1px; left: var(--thermite-divider-start); width: var(--thermite-divider-width); border-top: 1px solid #1b3927; content: ""; pointer-events: none; }
.paleto-thermite-footer .vault-drill-controls { margin-right: auto; margin-left: var(--thermite-divider-start); justify-content: flex-start; color: #9d9e91; zoom: .869565; }
.paleto-thermite-tamp { --refill-accent: #f2bd45; z-index: 20; background: rgba(2, 6, 7, .72); backdrop-filter: blur(2px); }
@media (max-width: 600px) {
  .paleto-thermite-main { padding: 11px 0; zoom: 1; }
  .paleto-thermite-workarea { gap: 11px; }
  .paleto-thermite-meters { gap: 11px; padding: 8px 0 2px; }
  .paleto-thermite-meter-label { font-size: 8px; letter-spacing: .1em; }
  .paleto-thermite-meter-track { height: 21px; }
  .paleto-thermite-footer .vault-drill-controls { gap: 8px; flex-wrap: wrap; zoom: 1; }
  .paleto-thermite-footer { --thermite-divider-start: 0%; --thermite-divider-width: 100%; }
}