.game-screen {
  width: 100%;
  max-width: 500px;
  margin: 32px auto;
}
.game-hud {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
}
.timer {
  font: 600 50px/1.2 var(--mono);
  letter-spacing: -3px;
  color: var(--yellow);
  font-variant-numeric: tabular-nums;
}
.timer small {
  font-size: 28px;
  letter-spacing: -2px;
  color: #a59157;
}
.timer-block .eyebrow {
  font-size: 10px;
  letter-spacing: 1px;
}
.hud-stats {
  display: flex;
  gap: 25px;
}
.hud-stats > div {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.hud-stats > div > span {
  color: var(--muted);
  font-size: 12px;
}
.hud-stats b {
  font: 26px var(--mono);
}
.hud-stats small {
  font-size: 14px;
  color: #818978;
}
.round-progress {
  display: flex;
  gap: 6px;
  margin: 15px 0 27px;
}
.round-progress > span {
  height: 4px;
  flex: 1;
  background: #3b4236;
}
.round-progress > .current {
  background: #80713b;
}
.round-progress > .done {
  background: var(--yellow);
}
.module-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.module-heading h2 {
  font-size: 29px;
  letter-spacing: -0.6px;
  margin-top: 4px;
}
.module-heading .eyebrow {
  font-size: 10px;
  letter-spacing: 1.8px;
}
.module-id {
  font: 45px var(--mono);
  color: #424b3a;
}
.module-instruction {
  font-size: 14px;
  color: #b7bcad;
  line-height: 1.6;
  margin: 8px 0 18px;
}
.play-console {
  position: relative;
  background: linear-gradient(140deg, #2c3229aa, #20251faa);
  border: 1px solid #48513e;
  padding: 22px;
  min-height: 375px;
}
.console-corner {
  position: absolute;
  width: 8px;
  height: 8px;
  border-color: #9ba884;
  border-style: solid;
  pointer-events: none;
}
.cc1 {
  left: -1px;
  top: -1px;
  border-width: 1px 0 0 1px;
}
.cc2 {
  right: -1px;
  top: -1px;
  border-width: 1px 1px 0 0;
}
.cc3 {
  left: -1px;
  bottom: -1px;
  border-width: 0 0 1px 1px;
}
.cc4 {
  right: -1px;
  bottom: -1px;
  border-width: 0 1px 1px 0;
}
#module-root {
  position: relative;
}
#pass-stamp {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  gap: 14px;
  background: #161d15a6;
  backdrop-filter: blur(2px);
  font: 700 21px var(--mono);
  color: var(--yellow);
  pointer-events: none;
}
.module-passed #pass-stamp {
  display: flex;
}
.module-passed #pass-stamp b {
  border: 1px solid var(--yellow);
  padding: 7px;
}
.radio-bubble {
  min-height: 79px;
  display: flex;
  gap: 13px;
  padding: 15px 0;
  align-items: flex-start;
}
.radio-avatar {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  background: #343a2d;
  color: #aebc98;
  border: 1px solid #4a553e;
  flex-shrink: 0;
}
.radio-avatar .icon {
  width: 18px;
  height: 18px;
}
.radio-bubble > div {
  min-width: 0;
}
.radio-bubble > div > span {
  font-size: 11px;
  color: var(--yellow);
  display: block;
  margin: 1px 0 5px;
}
.radio-bubble i {
  color: #777f6e;
  font: 10px var(--mono);
  margin-left: 8px;
}
.radio-bubble p {
  font-size: 14px;
  line-height: 1.5;
  color: #c6ccbb;
}
.radio-error p,
.radio-error > div > span {
  color: var(--red);
}
.radio-error .radio-avatar {
  color: var(--red);
  border-color: #925044;
}
.game-bottom {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font: 10px var(--mono);
  color: #8b947c;
  border-top: 1px solid var(--line);
  padding-top: 14px;
}
.game-bottom span:first-child {
  color: #b99c52;
}
.critical .timer,
.critical .timer small {
  color: var(--red);
  animation: warningPulse 0.7s infinite alternate;
}
.critical .round-progress > .current {
  background: var(--red);
}
.instruction-tag {
  font-size: 14px;
  color: #ebcf76;
  line-height: 1.6;
  background: #d8b4430a;
  border-left: 2px solid #b99c49;
  padding: 8px 10px;
}
.module-aside {
  font-size: 13px;
  color: #a6ad99;
  line-height: 1.6;
  margin: 13px 0;
}
.shake {
  animation: shake 0.28s linear;
}
.boom-flash:after {
  content: "";
  position: fixed;
  z-index: 30;
  inset: 0;
  background: #ff3c26;
  pointer-events: none;
  animation: boomFlash 0.55s ease-out both;
}
.boom-flash #app {
  animation: shake 0.35s linear;
}
.incorrect {
  border-color: #9f5f52 !important;
  background-color: #593b3055 !important;
  color: var(--red) !important;
}
.correct {
  border-color: var(--yellow) !important;
  color: var(--yellow) !important;
}
.password-unit > .unit-top {
  font-size: 10px;
  margin-bottom: 10px;
}
.code-display {
  border: 1px solid #809565;
  background:
    repeating-linear-gradient(0deg, #20301b0d 0 1px, transparent 1px 3px),
    #a9b57b;
  color: #293c20;
  box-shadow: inset 0 2px 10px #293c2066;
  padding: 14px 16px;
}
.screen-caption {
  display: block;
  font-size: 12px;
}
.code-display > b {
  display: block;
  font: 600 34px/1.55 var(--mono);
  letter-spacing: -1.8px;
  white-space: nowrap;
}
.screen-foot {
  display: flex;
  gap: 5px;
  font: 10px var(--mono);
}
.screen-foot i {
  margin-left: auto;
}
.screen-foot em {
  font-style: normal;
}
.trap-sticker {
  font-size: 12px;
  color: #aab396;
  padding: 12px 0 10px;
}
.password-unit .instruction-tag {
  font-size: 12px;
  padding: 7px 8px;
  margin-bottom: 14px;
}
.keypad {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.key {
  height: 52px;
  border: 1px solid #59634e;
  border-bottom: 3px solid #121a0f;
  background: linear-gradient(#3b4434, #30392b);
  font: 22px var(--mono);
  border-radius: 3px;
  box-shadow: 0 1px 0 #69745a40 inset;
}
.key:hover {
  background: #45513b;
}
.key:active {
  border-bottom-width: 1px;
  background: #556348;
}
.confirm-key {
  background: var(--yellow);
  color: #2b321c;
  font: 700 15px var(--sans);
  border-color: #dcb547;
  border-bottom-color: #9f7e25;
}
.confirm-key:hover {
  background: #f5d371;
}
.hold-unit {
  text-align: center;
  padding: 5px 0;
}
.hold-unit > .eyebrow {
  font-size: 10px;
}
.hold-orbit {
  --progress: 0%;
  width: 224px;
  height: 224px;
  border-radius: 50%;
  margin: 20px auto 17px;
  padding: 11px;
  background: conic-gradient(
    var(--yellow) var(--progress),
    #48513d var(--progress)
  );
  position: relative;
  display: grid;
  place-items: center;
  border: 5px solid #252c20;
}
.hold-orbit:before {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background: #242d1e;
}
.hold-button {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 174px;
  height: 174px;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 20%, #525f42, #313b29);
  border: 2px solid #6f7e5e;
  border-bottom: 7px solid #121d0d;
  box-shadow:
    0 7px 15px #0006,
    inset 0 1px 2px #a8b59155;
  touch-action: none;
  -webkit-touch-callout: none;
  overflow: hidden;
}
.hold-button > .icon {
  width: 39px;
  height: 39px;
  color: var(--yellow);
}
.hold-button > b {
  font-size: 22px;
}
.hold-button > span {
  font: 10px var(--mono);
  letter-spacing: 0.8px;
  color: #a8b394;
}
.hold-button.holding {
  transform: translateY(5px);
  border-bottom-width: 2px;
  background: #596341;
  box-shadow: 0 0 25px #dac35522;
}
.hold-meter {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.hold-meter > b {
  font: 36px var(--mono);
  color: var(--yellow);
}
.hold-meter > b > span {
  font-size: 18px;
  margin-left: 3px;
}
.hold-meter > span {
  font-size: 12px;
  color: #b2bda0;
}
.progress-track {
  height: 7px;
  background: #141c0f;
  margin-bottom: 16px;
  overflow: hidden;
}
.progress-track > div {
  height: 100%;
  background: var(--yellow);
  width: 0;
}
.hold-unit .instruction-tag {
  text-align: left;
}
.replacement-button {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.35;
  pointer-events: none;
}
.wire-unit {
  padding: 4px 0;
}
.wire-unit strong {
  font-size: 20px;
  white-space: nowrap;
}
.wire-bank {
  display: grid;
  gap: 14px;
  padding: 9px 0 15px;
}
.wire {
  display: flex;
  align-items: center;
  gap: 13px;
  border: 1px solid #4d5843;
  background: #192014;
  height: 61px;
  padding: 8px;
  position: relative;
}
.wire-terminal {
  font: 11px var(--mono);
  color: #adb997;
  border: 1px solid #5a654f;
  background: #343e2b;
  padding: 9px 5px;
}
.wire-span {
  position: relative;
  display: flex;
  flex: 1;
  height: 12px;
  filter: drop-shadow(0 3px 1px #050a02);
}
.wire-span > i {
  position: relative;
  flex: 1;
  background: var(--wire);
  border-top: 3px solid #ffffff40;
  border-bottom: 3px solid #0005;
  transition: transform 0.24s;
  transform-origin: left center;
}
.wire-span > i + i {
  transform-origin: right center;
}
.wire-span > b {
  display: none;
  position: absolute;
  left: 50%;
  top: -6px;
  transform: translateX(-50%);
  font-size: 22px;
  color: #e9e9d7;
}
.wire-name {
  font-size: 14px;
  color: var(--wire);
  padding: 8px;
}
.wire.cut .wire-span > i:first-child {
  transform: rotate(9deg) scaleX(0.83);
}
.wire.cut .wire-span > i:nth-child(2) {
  transform: rotate(-9deg) scaleX(0.83);
}
.wire.cut .wire-span > b {
  display: block;
}
.wire.cut {
  opacity: 0.66;
}
.wire.correct {
  opacity: 1;
}
.wire-legend {
  display: flex;
  justify-content: space-between;
  font: 9px var(--mono);
  color: #919d80;
  border-top: 1px solid #49533e;
  padding-top: 10px;
}
.inventory-heading {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 13px;
  color: #b3bda4;
  margin: 0 0 17px;
}
.inventory-heading > span + span {
  font: 10px var(--mono);
  color: #82916e;
}
.tools-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 18px;
}
.tool-card {
  position: relative;
  min-width: 0;
  height: 139px;
  border: 1px solid #536047;
  background: linear-gradient(150deg, #35422b, #232d1d);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
}
.tool-card:hover {
  background: #3c4a31;
  border-color: #9daa83;
}
.tool-card > small {
  position: absolute;
  left: 7px;
  top: 7px;
  font: 9px var(--mono);
  color: #849574;
}
.tool-graphic {
  height: 52px;
  display: grid;
  place-items: center;
  color: #c5d0b2;
}
.tool-graphic > .icon {
  width: 47px;
  height: 47px;
  stroke-width: 1.3;
}
.tool-card > b {
  font-size: 14px;
  font-weight: 500;
}
.tool-image {
  width: 52px;
  height: 52px;
  object-fit: contain;
}
.has-image > .icon {
  display: none;
}
.tool-card:disabled {
  opacity: 0.65;
}
.smoke-status {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
}
.smoke-status .led {
  background: var(--yellow);
  box-shadow: 0 0 10px #f1c64b55;
}
.smoke-status > b {
  font-size: 14px;
  font-weight: 500;
  color: var(--yellow);
}
.smoke-field {
  position: relative;
  border: 1px solid #5c684c;
  overflow: hidden;
  background:
    repeating-linear-gradient(0deg, transparent 0 22px, #00000012 22px 23px),
    #303d26;
  margin-bottom: 17px;
}
.smoke-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 9px;
  padding: 16px;
  position: relative;
  z-index: 2;
}
.smoke-cell {
  height: 82px;
  border: 1px solid #66755488;
  background: #2b3729b3;
  display: grid;
  place-items: center;
  color: #7d8f69;
  font: 19px var(--mono);
  border-radius: 2px;
}
.smoke-cell > .icon {
  width: 33px;
  height: 33px;
}
.smoke-cell.target-cell {
  background: #e8c34e;
  color: #30371f;
  border-color: #ffdf7a;
  box-shadow: 0 0 25px #ebcb5144;
}
.smoke-cell:disabled {
  opacity: 1;
}
.site-mark {
  position: absolute;
  font: 700 160px var(--sans);
  color: #75826435;
  z-index: 0;
  right: -2px;
  bottom: -23px;
  transform: rotate(-12deg);
}
.smoke-cloud {
  pointer-events: none;
  position: absolute;
  z-index: 3;
  inset: -35%;
  opacity: 0;
  transition: opacity 0.65s;
  background:
    radial-gradient(ellipse at 20% 30%, #c3c3bcd6, transparent 45%),
    radial-gradient(ellipse at 73% 70%, #d1d0c29e, transparent 45%),
    radial-gradient(ellipse at 55% 20%, #a5aaa0b3, transparent 60%),
    radial-gradient(ellipse at 35% 80%, #b3b2a3bf, transparent 45%);
  filter: blur(14px);
}
.covered .smoke-cloud {
  opacity: 0.85;
  animation: smokeDrift 6s ease-in-out infinite alternate;
}
.smoke-texture {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.65;
}
.covered .smoke-cell {
  border-color: #8a96745c;
}
.smoke-unit .instruction-tag {
  font-size: 13px;
}
.result-screen {
  max-width: 500px;
  margin: 35px auto;
  text-align: center;
}
.result-top {
  display: flex;
  justify-content: space-between;
  font: 10px var(--mono);
  letter-spacing: 1px;
  color: #99a589;
  border-bottom: 1px solid var(--line);
  padding-bottom: 14px;
}
.result-emblem {
  width: 104px;
  height: 104px;
  margin: 34px auto 26px;
  display: grid;
  place-items: center;
  background: #eac3460c;
  border: 1px solid #9a8d47;
  transform: rotate(45deg);
}
.result-emblem .icon {
  width: 60px;
  height: 60px;
  transform: rotate(-45deg);
  stroke-width: 1.2;
  color: var(--yellow);
}
.result-screen > .eyebrow {
  font-size: 10px;
  letter-spacing: 2px;
  color: #b8a968;
}
.result-screen h1 {
  font-size: 55px;
  font-weight: 900;
  letter-spacing: -2px;
  margin: 15px 0;
}
.result-subtitle {
  font-size: 14px;
  color: #adb8a0;
  line-height: 1.7;
}
.rank-card {
  margin: 29px 0 0;
  border: 1px solid #566248;
  background: #303c2444;
  padding: 22px 15px;
  position: relative;
}
.rank-card:before {
  content: "";
  position: absolute;
  top: -1px;
  left: 35%;
  right: 35%;
  height: 2px;
  background: var(--yellow);
}
.rank-card > span {
  font-size: 12px;
  color: #a5b393;
  display: block;
}
.rank-card > b {
  font-size: 23px;
  color: var(--yellow);
  display: block;
  margin: 12px 0;
}
.rank-card > small {
  font: 9px var(--mono);
  letter-spacing: 1px;
  color: #8d9c7c;
}
.result-stats {
  display: flex;
  justify-content: space-between;
  margin: 23px 0 27px;
}
.result-stats > div {
  flex: 1;
  border-right: 1px solid #48563c;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.result-stats > div:last-child {
  border: 0;
}
.result-stats span {
  color: #9cab8b;
  font-size: 12px;
}
.result-stats b {
  font: 27px var(--mono);
}
.result-stats small {
  font: 13px var(--mono);
  color: #859973;
  margin-left: 3px;
}
.result-actions {
  display: grid;
  gap: 10px;
}
.result-footnote {
  font-size: 12px;
  color: #92a080;
  margin-top: 20px;
  line-height: 1.7;
}
.defeat .result-emblem {
  border-color: #ba6752;
  background: #5b312933;
}
.defeat .result-emblem .icon,
.defeat h1,
.defeat .rank-card > b,
.defeat > .eyebrow {
  color: var(--red);
}
.defeat h1 {
  font: 900 74px/1 var(--sans);
  font-style: italic;
  letter-spacing: -4px;
}
.defeat h1 > span {
  color: #f7a193;
}
.defeat .rank-card:before {
  background: var(--red);
}
.defeat .rank-card {
  background: #4d302322;
  border-color: #725141;
}
@keyframes warningPulse {
  to {
    opacity: 0.6;
  }
}
@keyframes shake {
  20%,
  60% {
    transform: translateX(-4px);
  }
  40%,
  80% {
    transform: translateX(4px);
  }
}
@keyframes boomFlash {
  0% {
    opacity: 0.5;
  }
  100% {
    opacity: 0;
  }
}
@keyframes smokeDrift {
  from {
    transform: translate(-3%, 2%) rotate(-4deg);
  }
  to {
    transform: translate(4%, -3%) rotate(6deg);
  }
}
@media (max-width: 760px) {
  .game-screen {
    margin: 20px auto 23px;
  }
  .timer {
    font-size: 43px;
  }
  .timer small {
    font-size: 25px;
  }
  .hud-stats {
    gap: 20px;
  }
  .hud-stats b {
    font-size: 23px;
  }
  .round-progress {
    margin: 10px 0 19px;
  }
  .module-heading h2 {
    font-size: 26px;
  }
  .module-id {
    font-size: 37px;
  }
  .module-instruction {
    margin: 7px 0 15px;
    font-size: 13px;
  }
  .play-console {
    padding: 17px;
    min-height: 354px;
  }
  .code-display {
    padding: 12px;
  }
  .code-display > b {
    font-size: 32px;
  }
  .key {
    height: 48px;
  }
  .radio-bubble {
    min-height: 77px;
    padding: 14px 0;
  }
  .radio-bubble p {
    font-size: 13px;
  }
  .game-bottom {
    font-size: 9px;
  }
  .hold-orbit {
    width: 210px;
    height: 210px;
    margin-top: 14px;
    margin-bottom: 13px;
  }
  .hold-button {
    width: 164px;
    height: 164px;
  }
  .tool-card {
    height: 127px;
  }
  .tools-grid {
    gap: 8px;
  }
  .tool-card > b {
    font-size: 13px;
  }
  .tool-graphic > .icon {
    width: 43px;
    height: 43px;
  }
  .wire {
    height: 59px;
  }
  .wire-bank {
    gap: 13px;
  }
  .smoke-grid {
    padding: 12px;
    gap: 8px;
  }
  .smoke-cell {
    height: 78px;
  }
  .result-screen {
    margin: 22px auto 30px;
  }
  .result-emblem {
    width: 86px;
    height: 86px;
    margin: 31px auto 25px;
  }
  .result-emblem .icon {
    width: 51px;
    height: 51px;
  }
  .result-screen h1 {
    font-size: 45px;
  }
  .defeat h1 {
    font-size: 68px;
  }
  .rank-card {
    margin-top: 23px;
    padding: 19px 12px;
  }
  .rank-card > b {
    font-size: 21px;
  }
  .result-stats b {
    font-size: 24px;
  }
}
@media (max-width: 370px) {
  .play-console {
    padding: 13px;
    min-height: 332px;
  }
  .module-instruction {
    font-size: 12px;
  }
  .code-display > b {
    font-size: 28px;
  }
  .password-unit .instruction-tag {
    font-size: 11px;
  }
  .key {
    height: 45px;
  }
  .keypad {
    gap: 6px;
  }
  .timer {
    font-size: 39px;
  }
  .hud-stats {
    gap: 16px;
  }
  .hud-stats b {
    font-size: 21px;
  }
  .tool-card {
    height: 116px;
  }
  .tool-card > b {
    font-size: 12px;
  }
  .wire-unit .instruction-tag {
    font-size: 13px;
  }
  .wire-bank {
    gap: 10px;
  }
  .wire {
    height: 56px;
  }
  .smoke-cell {
    height: 73px;
  }
  .smoke-grid {
    gap: 7px;
    padding: 9px;
  }
  .game-bottom {
    font-size: 8px;
  }
  .hold-orbit {
    width: 194px;
    height: 194px;
  }
  .hold-button {
    width: 151px;
    height: 151px;
  }
  .hold-button > b {
    font-size: 20px;
  }
  .radio-bubble p {
    font-size: 12px;
  }
}