/* StreetQuest */
.defuse { width: min(480px, 100%); display: grid; gap: 14px; }
.bomb { display: grid; gap: 10px; justify-items: center; padding: 14px; border-radius: 18px; background: #1c2230; border: 1px solid var(--line); }
.bomb .fuse { font-family: var(--f-display); font-size: 34px; color: #ff4d4d; letter-spacing: .04em; text-shadow: 0 0 14px rgba(255,77,77,.5); }
.bomb .seq { min-height: 34px; display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; align-items: center; }
.bomb .seq b { padding: 4px 10px; border-radius: 999px; font-family: var(--f-mono); font-size: 13px; background: color-mix(in srgb, var(--w) 25%, transparent); border: 2px solid var(--w); }
.bomb .seq em { color: var(--muted); }
.wires { display: grid; gap: 8px; }
.wire { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px; min-height: 44px; padding: 6px 12px; border: 1px solid var(--line); border-radius: 12px; background: rgba(255,255,255,.04); }
.wire i { height: 10px; border-radius: 5px; background: var(--w); box-shadow: 0 2px 0 rgba(0,0,0,.35); }
.wire span { font-family: var(--f-mono); font-size: 12px; color: var(--muted); min-width: 52px; text-align: right; }
.wire.cut i { background: linear-gradient(90deg, var(--w) 0 44%, transparent 44% 56%, var(--w) 56%); }
.wire.cut { opacity: .5; }
.range { width: 100%; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; padding: 12px; border-radius: 16px; background: #a9744f; }
.pane {
  aspect-ratio: 4 / 5; padding: 0; border: 4px solid #e9dcc6; border-radius: 6px 6px 2px 2px; font-size: clamp(24px, 8vw, 36px);
  background: linear-gradient(#22324d, #101b31); transition: transform .08s;
}
.pane.up { animation: pop2 .12s; }
.pane.foe { background: linear-gradient(#5a2230, #2a1018); }
.pane.civ { background: linear-gradient(#2f5a3c, #183020); }
.range-foot { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.ammo { font-family: var(--f-mono); color: var(--pc); letter-spacing: 2px; min-width: 100px; }
.hunt { width: min(360px, 100%); display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 3px; padding: 6px; border-radius: 14px; background: #4a505c; }
.blk { aspect-ratio: 1; padding: 0; border: 0; border-radius: 4px; background: #8a9a7a; font-size: clamp(12px, 3.5vw, 16px); }
.blk:hover:not(.scanned) { outline: 2px solid var(--pc); }
.blk.hot { background: #ff4d4d; }
.blk.warm { background: #ff9f1c; }
.blk.cool { background: #5eb9ff; }
.blk.cold { background: #2a4a7a; }
.blk.found { background: #ffc53d; box-shadow: 0 0 0 3px #fff; }
.hunt-key { display: flex; gap: 10px; font-size: 12px; font-family: var(--f-mono); }
.hunt-key span::before { content: ""; display: inline-block; width: 10px; height: 10px; margin-right: 4px; border-radius: 2px; vertical-align: -1px; }
.hunt-key .hot::before { background: #ff4d4d; }
.hunt-key .warm::before { background: #ff9f1c; }
.hunt-key .cool::before { background: #5eb9ff; }
.hunt-key .cold::before { background: #2a4a7a; }