:root {
  --acid: #c8ff91;
  --acid-hot: #e6ffcf;
  --acid-dim: #6f9d5d;
  --red: #ff543b;
  --red-deep: #801f18;
  --ink: #edf5ec;
  --muted: #89978d;
  --panel: rgba(7, 12, 9, 0.82);
  --line: rgba(218, 255, 224, 0.16);
}

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: #050807;
  color: var(--ink);
  font-family: "Microsoft YaHei UI", "Noto Sans SC", Arial, sans-serif;
  user-select: none;
}

button {
  color: inherit;
  font: inherit;
}

kbd {
  color: #d8e7d8;
  font-family: Consolas, "SFMono-Regular", monospace;
}

#game {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #050807;
}

#viewport,
#viewport canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

#viewport canvas {
  cursor: crosshair;
}

#vignette,
#scanlines,
#grain,
#damage-flash,
#speed-lines {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

#vignette {
  z-index: 3;
  background:
    radial-gradient(circle at center, transparent 46%, rgba(0, 0, 0, 0.42) 100%),
    linear-gradient(180deg, rgba(4, 8, 5, 0.2), transparent 18%, transparent 80%, rgba(4, 7, 5, 0.26));
}

#scanlines {
  z-index: 4;
  opacity: 0.08;
  background: repeating-linear-gradient(0deg, transparent 0 3px, rgba(0, 0, 0, 0.24) 3px 4px);
}

#grain {
  z-index: 4;
  opacity: 0.032;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 140 140' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.86' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain-shift 0.24s steps(2) infinite;
}

@keyframes grain-shift {
  0% { transform: translate(0, 0); }
  25% { transform: translate(-1%, 1%); }
  50% { transform: translate(1%, -1%); }
  75% { transform: translate(1%, 1%); }
}

#damage-flash {
  z-index: 8;
  opacity: 0;
  box-shadow: inset 0 0 16vw 5vw rgba(156, 17, 9, 0.74);
}

#damage-flash.hit {
  animation: hurt 0.48s ease-out;
}

@keyframes hurt {
  0% { opacity: 1; }
  100% { opacity: 0; }
}

#speed-lines {
  z-index: 5;
  opacity: 0;
  background:
    repeating-conic-gradient(from 0deg at 50% 50%, transparent 0deg 9deg, rgba(205, 255, 194, 0.09) 9.2deg 9.5deg, transparent 9.8deg 18deg);
  mask-image: radial-gradient(circle, transparent 0 20%, #000 70%);
  transition: opacity 0.2s;
}

#speed-lines.active {
  opacity: 0.7;
  animation: radial-speed 0.22s linear infinite;
}

@keyframes radial-speed {
  to { transform: scale(1.07) rotate(2deg); }
}

#hud {
  position: absolute;
  inset: 0;
  z-index: 10;
  pointer-events: none;
  transition: opacity 0.25s, visibility 0.25s;
}

.hidden,
.hidden-menu {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

.player-vitals {
  position: absolute;
  top: 27px;
  left: 28px;
  display: flex;
  gap: 13px;
  width: 365px;
  filter: drop-shadow(0 12px 22px #000);
}

.bio-mark {
  position: relative;
  display: grid;
  place-items: center;
  width: 60px;
  height: 60px;
  flex: 0 0 60px;
  color: var(--acid-hot);
  font: 900 12px Consolas, monospace;
  letter-spacing: 1px;
  text-shadow: 0 0 12px var(--acid);
}

.bio-mark::before,
.bio-mark::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid rgba(204, 255, 170, 0.45);
  border-radius: 50%;
}

.bio-mark::after {
  inset: 9px;
  border-style: dashed;
  opacity: 0.55;
}

.bio-spin {
  position: absolute;
  inset: -4px;
  border: 2px solid transparent;
  border-top-color: var(--acid);
  border-bottom-color: rgba(200, 255, 145, 0.22);
  border-radius: 50%;
  animation: spin 5s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.vital-main {
  flex: 1;
  padding: 5px 18px 12px 10px;
  background: linear-gradient(90deg, rgba(5, 11, 7, 0.93), rgba(7, 14, 9, 0.54) 76%, transparent);
  border-left: 2px solid var(--acid);
  clip-path: polygon(0 0, 100% 0, calc(100% - 20px) 100%, 0 100%);
}

.vital-line {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 5px;
  color: #c8d4ca;
  font-size: 10px;
  letter-spacing: 2px;
}

.vital-line b {
  color: #f2f8f1;
  font: 700 12px Consolas, monospace;
}

.bar {
  position: relative;
  overflow: hidden;
  transform: skewX(-13deg);
  background: rgba(255, 255, 255, 0.075);
}

.health-bar {
  height: 9px;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.health-bar i {
  display: block;
  width: 100%;
  height: 100%;
  background:
    repeating-linear-gradient(90deg, transparent 0 25px, rgba(0, 0, 0, 0.18) 25px 27px),
    linear-gradient(90deg, #7f231a, #dd4031 60%, #ff6f53);
  box-shadow: 0 0 14px rgba(255, 71, 51, 0.45);
  transition: width 0.12s;
}

.health-bar b {
  position: absolute;
  top: 0;
  width: 2px;
  height: 100%;
  background: #fff5df;
  box-shadow: 0 0 8px #fff;
  transition: left 0.4s;
}

.sub-bars {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 9px;
}

.biomass-group {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  color: #839087;
  font-size: 8px;
  letter-spacing: 1px;
}

.biomass-bar {
  flex: 1;
  height: 4px;
}

.biomass-bar i {
  display: block;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, #548d46, var(--acid));
  box-shadow: 0 0 9px rgba(198, 255, 150, 0.5);
}

.sub-bars > strong {
  color: var(--acid);
  font: 10px Consolas, monospace;
}

.alert-panel {
  position: absolute;
  top: 26px;
  right: 33px;
  width: 205px;
  padding: 5px 0 12px 20px;
  background: linear-gradient(90deg, transparent, rgba(6, 11, 8, 0.72));
  border-right: 1px solid rgba(255, 255, 255, 0.15);
}

.alert-copy {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 9px;
  font-size: 9px;
  letter-spacing: 2px;
}

.alert-copy span { color: #879289; }
.alert-copy b { color: var(--acid); }

.heat-cells {
  display: flex;
  justify-content: flex-end;
  gap: 5px;
}

.heat-cells i {
  width: 26px;
  height: 4px;
  transform: skewX(-25deg);
  background: rgba(255, 255, 255, 0.1);
}

.heat-cells i.lit {
  background: var(--red);
  box-shadow: 0 0 10px rgba(255, 74, 47, 0.7);
}

.disguise-panel {
  position: absolute;
  top: 92px;
  right: 33px;
  width: 205px;
  padding: 10px 12px 11px 18px;
  background: linear-gradient(90deg, transparent, rgba(5, 11, 7, 0.84));
  border-right: 1px solid rgba(200, 255, 145, 0.34);
  transition: opacity 0.25s, border-color 0.25s;
}

.disguise-panel.dormant {
  opacity: 0.48;
  border-right-color: rgba(255, 255, 255, 0.12);
}

.disguise-panel.active {
  border-right-color: var(--acid);
  filter: drop-shadow(0 0 12px rgba(200, 255, 145, 0.12));
}

.disguise-panel.danger {
  border-right-color: var(--red);
}

.disguise-head,
.suspicion-line {
  display: flex;
  align-items: center;
  gap: 7px;
  color: #7f8d83;
  font: 7px Consolas, monospace;
  letter-spacing: 1.2px;
}

.disguise-head b {
  margin-left: auto;
  color: #8f9a91;
  font-weight: 500;
}

.disguise-panel.active .disguise-head b {
  color: var(--acid);
}

.disguise-panel.danger .disguise-head b {
  color: var(--red);
}

.disguise-eye {
  position: relative;
  width: 17px;
  height: 9px;
  border: 1px solid #7f8d83;
  border-radius: 50%;
}

.disguise-eye::after {
  content: "";
  position: absolute;
  left: 6px;
  top: 2px;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: currentColor;
}

.disguise-panel.active .disguise-eye {
  border-color: var(--acid);
  color: var(--acid);
}

.disguise-body {
  display: flex;
  flex-direction: column;
  margin: 8px 0 7px;
}

.disguise-body strong {
  color: #d7e2d8;
  font-size: 10px;
  letter-spacing: 1px;
}

.disguise-body span {
  margin-top: 3px;
  color: #6f7c72;
  font-size: 7px;
}

.disguise-meter,
.suspicion-meter {
  height: 3px;
  background: rgba(255, 255, 255, 0.08);
}

.disguise-meter i,
.suspicion-meter i {
  display: block;
  width: 0;
  height: 100%;
  background: var(--acid);
  transition: width 0.18s;
}

.suspicion-line {
  margin-top: 7px;
}

.suspicion-line b {
  margin-left: auto;
  color: #9ba79e;
  font-weight: 400;
}

.suspicion-meter {
  margin-top: 4px;
}

.suspicion-meter i {
  width: 0;
  background: linear-gradient(90deg, #d2b250, var(--red));
}

#mission-card {
  position: absolute;
  top: 117px;
  left: 28px;
  width: 330px;
  padding: 16px 21px 15px;
  background:
    linear-gradient(100deg, rgba(5, 11, 7, 0.9), rgba(5, 12, 8, 0.58) 75%, transparent);
  border-left: 1px solid rgba(202, 255, 160, 0.55);
  filter: drop-shadow(0 8px 20px rgba(0, 0, 0, 0.45));
}

.mission-head {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #89958c;
  font: 8px Consolas, monospace;
  letter-spacing: 2px;
}

.mission-head i {
  width: 6px;
  height: 6px;
  transform: rotate(45deg);
  background: var(--acid);
  box-shadow: 0 0 9px var(--acid);
}

.mission-head b {
  margin-left: auto;
  color: rgba(255, 255, 255, 0.22);
  font: 22px Impact, sans-serif;
}

#mission-title {
  margin: 9px 0 4px;
  color: #f2f7f2;
  font-size: 22px;
  letter-spacing: 3px;
  line-height: 1.2;
}

#mission-desc {
  margin: 0;
  color: #9ba79f;
  font-size: 10px;
  line-height: 1.7;
}

.mission-bar {
  height: 3px;
  margin-top: 12px;
  background: rgba(255, 255, 255, 0.08);
}

.mission-bar i {
  display: block;
  width: 0;
  height: 100%;
  background: var(--acid);
  box-shadow: 0 0 8px rgba(200, 255, 145, 0.6);
  transition: width 0.4s;
}

.mission-meta {
  display: flex;
  justify-content: space-between;
  margin-top: 6px;
  color: #7e8a81;
  font: 8px Consolas, monospace;
}

.mission-meta b {
  color: #b8c4ba;
  font-weight: 400;
}

.critical-panel {
  position: absolute;
  left: 50%;
  bottom: 26px;
  width: min(410px, 35vw);
  transform: translateX(-50%);
}

.critical-text {
  display: flex;
  justify-content: space-between;
  margin-bottom: 6px;
  color: #9aa79e;
  font-size: 8px;
  letter-spacing: 3px;
}

.critical-text b {
  color: #ff8975;
  font: 10px Consolas, monospace;
}

.critical-bar {
  position: relative;
  height: 5px;
  background: rgba(255, 255, 255, 0.08);
  clip-path: polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%);
}

.critical-bar i {
  display: block;
  width: 0;
  height: 100%;
  background: linear-gradient(90deg, #712219, #d94532, #ff9e82);
  box-shadow: 0 0 12px rgba(255, 79, 53, 0.45);
  transition: width 0.2s;
}

#critical-ready {
  position: absolute;
  right: 14px;
  top: 7px;
  color: rgba(255, 255, 255, 0.2);
  font: 8px Consolas, monospace;
  white-space: nowrap;
}

.critical-panel.ready #critical-ready {
  color: #ff9c87;
  animation: pulse-text 0.7s ease-in-out infinite alternate;
}

@keyframes pulse-text {
  to { opacity: 0.35; }
}

.form-panel {
  position: absolute;
  left: 28px;
  bottom: 24px;
  display: flex;
  align-items: flex-end;
  gap: 9px;
  pointer-events: auto;
}

.form-current {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 57px;
  padding: 8px 13px;
  background: linear-gradient(100deg, rgba(8, 14, 10, 0.92), rgba(8, 14, 10, 0.45));
  border-left: 2px solid var(--acid);
}

.form-current kbd {
  color: var(--acid);
  font-size: 9px;
}

.form-current div {
  display: flex;
  flex-direction: column;
}

.form-current span {
  color: #77847b;
  font-size: 7px;
  letter-spacing: 2px;
}

.form-current b {
  margin-top: 3px;
  color: #f0f6ef;
  font-size: 13px;
  letter-spacing: 2px;
}

.form-list {
  display: flex;
  gap: 5px;
}

.form {
  position: relative;
  display: grid;
  place-items: center;
  width: 52px;
  height: 58px;
  padding: 4px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(6, 12, 8, 0.75);
  clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px);
  cursor: pointer;
  transition: 0.15s;
}

.form:hover {
  transform: translateY(-3px);
  background: rgba(30, 45, 31, 0.8);
}

.form.active {
  border-color: rgba(210, 255, 178, 0.65);
  background: linear-gradient(180deg, rgba(119, 168, 85, 0.3), rgba(6, 13, 8, 0.88));
  box-shadow: inset 0 -2px var(--acid);
}

.form kbd {
  position: absolute;
  top: 4px;
  left: 5px;
  color: rgba(255, 255, 255, 0.38);
  font-size: 8px;
}

.form small {
  position: absolute;
  bottom: 4px;
  color: #9ba79d;
  font-size: 7px;
  letter-spacing: 1px;
}

.form-icon {
  width: 28px;
  height: 28px;
  margin-top: -7px;
  background: #9cb99f;
}

.active .form-icon { background: var(--acid-hot); }
.claw { clip-path: polygon(5% 77%, 37% 0, 48% 4%, 38% 57%, 64% 2%, 73% 8%, 58% 63%, 93% 23%, 100% 30%, 45% 95%, 30% 79%, 12% 100%); }
.blade { clip-path: polygon(3% 84%, 68% 5%, 97% 2%, 40% 57%, 76% 51%, 64% 76%, 29% 82%, 12% 100%); }
.whip { background: transparent; border: 4px solid #9cb99f; border-left-color: transparent; border-top-color: transparent; border-radius: 0 0 80% 0; transform: rotate(-38deg) skew(15deg); filter: drop-shadow(7px -6px 0 #9cb99f); }
.hammer { clip-path: polygon(32% 0, 69% 0, 72% 60%, 100% 62%, 92% 84%, 59% 82%, 62% 100%, 38% 100%, 41% 82%, 8% 84%, 0 62%, 28% 60%); }

.power-panel {
  position: absolute;
  right: 30px;
  bottom: 24px;
  display: flex;
  gap: 6px;
  pointer-events: auto;
}

.power {
  position: relative;
  display: grid;
  place-items: center;
  width: 66px;
  height: 63px;
  padding: 4px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.11);
  background: rgba(6, 12, 8, 0.82);
  clip-path: polygon(7px 0, 100% 0, 100% calc(100% - 7px), calc(100% - 7px) 100%, 0 100%, 0 7px);
  cursor: pointer;
}

.power:hover {
  border-color: rgba(200, 255, 145, 0.45);
}

.power.active {
  border-color: rgba(200, 255, 145, 0.7);
  background: linear-gradient(180deg, rgba(111, 154, 83, 0.26), rgba(6, 12, 8, 0.9));
  box-shadow: inset 0 -2px var(--acid), 0 0 16px rgba(200, 255, 145, 0.12);
}

.power.active .power-icon {
  background: var(--acid-hot);
}

.power kbd {
  position: absolute;
  top: 4px;
  left: 5px;
  color: rgba(255, 255, 255, 0.42);
  font-size: 8px;
}

.power b {
  position: absolute;
  bottom: 4px;
  color: #9da9a0;
  font-size: 8px;
  font-weight: 500;
  letter-spacing: 1px;
}

.power-icon {
  width: 25px;
  height: 27px;
  margin-top: -5px;
  background: #89a48d;
}

.tendril { clip-path: polygon(12% 100%, 16% 47%, 35% 58%, 38% 3%, 49% 0, 53% 52%, 68% 33%, 73% 54%, 88% 18%, 96% 23%, 78% 67%, 100% 63%, 88% 100%); }
.disguise { border: 2px solid #89a48d; border-radius: 50% 50% 38% 38%; background: radial-gradient(circle at 35% 40%, transparent 0 13%, #89a48d 14% 22%, transparent 23% 36%, #89a48d 37% 44%, transparent 45%); }
.devastator { clip-path: polygon(7% 100%, 18% 38%, 37% 55%, 43% 0, 57% 55%, 83% 29%, 93% 100%); }

.power .cooldown {
  position: absolute;
  inset: 0;
  transform: translateY(100%);
  background: rgba(0, 0, 0, 0.7);
  border-top: 1px solid rgba(255, 255, 255, 0.28);
  pointer-events: none;
}

.power.locked {
  filter: grayscale(1) brightness(0.52);
}

#radar-panel {
  position: absolute;
  right: 30px;
  bottom: 106px;
  width: 185px;
  filter: drop-shadow(0 10px 20px #000);
}

.district-line {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 6px;
  padding-bottom: 5px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}

.district-line span {
  color: #76837a;
  font: 7px Consolas, monospace;
  letter-spacing: 1px;
}

.district-line b {
  color: #dbe7dd;
  font-size: 13px;
  letter-spacing: 3px;
}

.radar-shell {
  position: relative;
  width: 185px;
  height: 185px;
}

.radar {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border: 1px solid rgba(203, 235, 205, 0.23);
  border-radius: 50%;
  background: #06100a;
}

#radar-map {
  width: 100%;
  height: 100%;
}

.radar-sweep {
  position: absolute;
  inset: 50% 0 0;
  transform-origin: top;
  background: conic-gradient(from 0deg, rgba(196, 255, 156, 0.18), transparent 72deg);
  animation: radar-turn 4s linear infinite;
}

@keyframes radar-turn {
  to { transform: rotate(360deg); }
}

.radar-n {
  position: absolute;
  top: 7px;
  left: 50%;
  color: rgba(255, 255, 255, 0.45);
  font: 7px Consolas, monospace;
  transform: translateX(-50%);
}

.compass-ring {
  position: absolute;
  inset: -6px;
  border: 1px dashed rgba(255, 255, 255, 0.09);
  border-radius: 50%;
  pointer-events: none;
}

.compass-ring i {
  position: absolute;
  left: 50%;
  top: -2px;
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-bottom: 8px solid var(--acid);
  transform-origin: 50% 98px;
}

.radar-coords {
  margin-top: 6px;
  color: rgba(210, 226, 210, 0.38);
  font: 7px Consolas, monospace;
  letter-spacing: 1px;
  text-align: right;
}

#form-hint {
  position: absolute;
  left: 50%;
  bottom: 80px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 10px;
  transform: translateX(-50%);
  color: rgba(220, 236, 220, 0.44);
  font-size: 8px;
  letter-spacing: 1px;
}

#form-hint kbd {
  padding: 3px 5px;
  border: 1px solid rgba(255, 255, 255, 0.13);
  font-size: 7px;
}

#target-prompt {
  position: absolute;
  left: 50%;
  top: 58%;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 16px 8px 9px;
  transform: translateX(-50%);
  background: rgba(5, 10, 7, 0.9);
  border: 1px solid rgba(202, 255, 160, 0.35);
  transition: opacity 0.12s;
}

#target-prompt kbd {
  display: grid;
  place-items: center;
  width: 29px;
  height: 29px;
  border: 1px solid var(--acid);
  background: rgba(190, 255, 150, 0.1);
  color: var(--acid);
}

#target-prompt div {
  display: flex;
  flex-direction: column;
}

#target-prompt b {
  color: #f1f7f0;
  font-size: 10px;
  letter-spacing: 1px;
}

#target-prompt span {
  color: #819087;
  font-size: 8px;
}

#boss-hud {
  position: absolute;
  top: 91px;
  left: 50%;
  width: min(480px, 42vw);
  transform: translateX(-50%);
  text-align: center;
  pointer-events: none;
}

#boss-hud span {
  color: #dc6d5c;
  font: 8px Consolas, monospace;
  letter-spacing: 4px;
}

#boss-hud h2 {
  margin: 4px 0 8px;
  color: #f1e8e4;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 4px;
}

.boss-bar {
  height: 5px;
  transform: skewX(-20deg);
  background: rgba(255, 255, 255, 0.1);
}

.boss-bar i {
  display: block;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, #671916, #ef4732);
  box-shadow: 0 0 13px rgba(255, 60, 40, 0.6);
  transition: width 0.18s;
}

#reticle {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 34px;
  height: 34px;
  transform: translate(-50%, -50%);
  transition: transform 0.12s;
}

#reticle i {
  position: absolute;
  background: rgba(229, 248, 227, 0.62);
}

#reticle i:nth-child(1) { left: 16px; top: 0; width: 1px; height: 8px; }
#reticle i:nth-child(2) { right: 0; top: 16px; width: 8px; height: 1px; }
#reticle i:nth-child(3) { left: 16px; bottom: 0; width: 1px; height: 8px; }
#reticle i:nth-child(4) { left: 0; top: 16px; width: 8px; height: 1px; }
#reticle span {
  position: absolute;
  left: 16px;
  top: 16px;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: var(--acid);
  box-shadow: 0 0 6px var(--acid);
}

#reticle.target i {
  background: var(--acid);
  box-shadow: 0 0 7px var(--acid);
}

#reticle.target {
  transform: translate(-50%, -50%) scale(0.76) rotate(45deg);
}

#objective-marker {
  position: absolute;
  z-index: 2;
  pointer-events: none;
  transform: translate(-50%, -100%);
  text-align: center;
}

#objective-marker i {
  display: block;
  width: 18px;
  height: 18px;
  margin: auto;
  transform: rotate(45deg);
  border: 1px solid var(--acid);
  background: rgba(196, 255, 150, 0.12);
  box-shadow: 0 0 15px rgba(196, 255, 150, 0.25);
}

#objective-marker b {
  display: block;
  margin-top: 8px;
  color: var(--acid);
  font: 8px Consolas, monospace;
  letter-spacing: 1px;
}

#callout {
  position: absolute;
  left: 50%;
  top: 28%;
  color: var(--acid-hot);
  font: italic 900 min(4vw, 52px) Impact, "Arial Narrow", sans-serif;
  letter-spacing: 5px;
  opacity: 0;
  transform: translate(-50%, 12px) skewX(-7deg);
  text-shadow: 3px 3px 0 #152119, 0 0 30px rgba(201, 255, 161, 0.35);
  pointer-events: none;
  white-space: nowrap;
}

#callout.show {
  animation: callout 1.2s ease-out both;
}

@keyframes callout {
  0% { opacity: 0; transform: translate(-50%, 24px) scale(0.8) skewX(-7deg); }
  14% { opacity: 1; transform: translate(-50%, 0) scale(1.05) skewX(-7deg); }
  68% { opacity: 1; transform: translate(-50%, 0) scale(1) skewX(-7deg); }
  100% { opacity: 0; transform: translate(-50%, -24px) scale(0.97) skewX(-7deg); }
}

#toast {
  position: absolute;
  top: 22%;
  left: 50%;
  min-width: 340px;
  padding: 10px 25px;
  transform: translateX(-50%);
  background: linear-gradient(90deg, transparent, rgba(5, 11, 7, 0.93) 25%, rgba(5, 11, 7, 0.93) 75%, transparent);
  text-align: center;
}

#toast span {
  color: var(--acid);
  font: 8px Consolas, monospace;
  letter-spacing: 4px;
}

#toast b {
  display: block;
  margin-top: 4px;
  color: #edf5ed;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 2px;
}

#toast.show {
  animation: toast 3.2s both;
}

@keyframes toast {
  0% { opacity: 0; transform: translate(-50%, 12px); }
  10%, 82% { opacity: 1; transform: translate(-50%, 0); }
  100% { opacity: 0; transform: translate(-50%, -12px); }
}

#radio {
  position: absolute;
  top: 205px;
  right: 34px;
  display: flex;
  gap: 10px;
  width: 285px;
  padding: 11px 14px;
  background: linear-gradient(90deg, transparent, rgba(5, 11, 7, 0.92));
  border-right: 1px solid rgba(198, 255, 155, 0.36);
}

.radio-wave {
  width: 3px;
  background: repeating-linear-gradient(0deg, var(--acid) 0 2px, transparent 2px 5px);
  animation: radio-noise 0.38s steps(2) infinite;
}

@keyframes radio-noise {
  50% { opacity: 0.35; }
}

#radio b {
  color: #7f8d83;
  font-size: 8px;
  letter-spacing: 2px;
}

#radio p {
  margin: 5px 0 0;
  color: #cad6cc;
  font-size: 9px;
  line-height: 1.7;
}

#radio.show {
  animation: radio 6s both;
}

@keyframes radio {
  0% { opacity: 0; transform: translateX(18px); }
  7%, 84% { opacity: 1; transform: translateX(0); }
  100% { opacity: 0; transform: translateX(12px); }
}

#top-actions {
  position: absolute;
  top: 91px;
  left: 28px;
  display: flex;
  gap: 4px;
  pointer-events: auto;
}

#top-actions button {
  display: grid;
  place-items: center;
  width: 29px;
  height: 24px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(4, 9, 5, 0.6);
  color: #68756c;
  font: 10px Consolas, monospace;
  cursor: pointer;
}

#top-actions button:hover {
  color: var(--acid);
  border-color: rgba(200, 255, 145, 0.3);
}

#language-button {
  width: 42px;
  color: var(--acid);
  font-family: "Microsoft YaHei UI", Consolas, monospace;
  letter-spacing: 0;
  white-space: nowrap;
}

.screen {
  position: absolute;
  inset: 0;
  z-index: 30;
  display: grid;
  place-items: center;
  transition: opacity 0.35s, visibility 0.35s;
}

#start-screen {
  overflow: hidden;
  background:
    linear-gradient(90deg, rgba(2, 6, 4, 0.95) 0%, rgba(2, 6, 4, 0.72) 38%, rgba(2, 6, 4, 0.16) 74%, rgba(2, 6, 4, 0.64) 100%),
    radial-gradient(circle at 69% 43%, rgba(126, 154, 75, 0.16), transparent 18%);
  backdrop-filter: blur(1.5px);
}

#start-screen::before {
  content: "";
  position: absolute;
  inset: -10%;
  opacity: 0.42;
  background:
    linear-gradient(67deg, transparent 42%, rgba(151, 182, 130, 0.1) 42.1%, transparent 42.35%),
    linear-gradient(-10deg, transparent 48%, rgba(200, 223, 190, 0.06) 48.1%, transparent 48.35%),
    repeating-linear-gradient(90deg, transparent 0 84px, rgba(255, 255, 255, 0.018) 85px),
    repeating-linear-gradient(0deg, transparent 0 84px, rgba(255, 255, 255, 0.014) 85px);
  transform: rotate(-4deg) scale(1.12);
}

#start-screen::after {
  content: "XII";
  position: absolute;
  right: -3vw;
  bottom: -25vh;
  color: rgba(215, 241, 200, 0.025);
  font: 78vh Impact, sans-serif;
  letter-spacing: -0.1em;
}

.title-air {
  position: absolute;
  left: 0;
  top: 0;
  width: 8px;
  height: 100%;
  background: var(--acid);
  box-shadow: 10px 0 0 rgba(200, 255, 145, 0.12), 0 0 48px rgba(200, 255, 145, 0.25);
  opacity: 0.45;
}

.title-frame {
  position: relative;
  z-index: 2;
  width: min(780px, 78vw);
  margin-left: -8vw;
}

.title-index {
  position: absolute;
  left: -64px;
  top: 8px;
  color: rgba(210, 235, 211, 0.3);
  font: 8px Consolas, monospace;
  letter-spacing: 2px;
  transform: rotate(-90deg);
}

.title-mark {
  display: flex;
  gap: 5px;
  width: 120px;
  margin-bottom: 22px;
}

.title-mark span {
  width: 37px;
  height: 4px;
  transform: skewX(-34deg);
  background: var(--acid);
}

.title-mark span:nth-child(2) { opacity: 0.55; }
.title-mark span:nth-child(3) { width: 17px; opacity: 0.25; }

.eyebrow {
  margin: 0 0 13px;
  color: var(--acid);
  font: 9px Consolas, monospace;
  letter-spacing: 5px;
}

h1 {
  margin: 0;
  color: #edf5ed;
  font-size: clamp(74px, 10vw, 145px);
  font-weight: 1000;
  line-height: 0.77;
  letter-spacing: -0.09em;
  text-shadow: 0 15px 60px rgba(0, 0, 0, 0.8);
}

h1 span {
  display: block;
  margin: 23px 0 0 0.15em;
  color: transparent;
  font-size: 0.57em;
  letter-spacing: 0.16em;
  -webkit-text-stroke: 1px rgba(222, 241, 222, 0.66);
}

.title-sub {
  display: flex;
  align-items: center;
  gap: 13px;
  width: 445px;
  max-width: 90%;
  margin: 28px 0;
}

.title-sub i {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, var(--acid), transparent);
}

.title-sub i:last-child {
  background: linear-gradient(90deg, transparent, var(--acid));
}

.title-sub b {
  color: rgba(227, 241, 227, 0.52);
  font: 8px Consolas, monospace;
  letter-spacing: 3px;
  white-space: nowrap;
}

.title-copy {
  margin: 0 0 25px;
  color: #a3afa6;
  font-size: 12px;
  line-height: 2;
  letter-spacing: 1px;
}

#start-button {
  position: relative;
  width: 300px;
  padding: 13px 24px 12px;
  overflow: hidden;
  border: 0;
  border-left: 3px solid var(--acid-hot);
  background: linear-gradient(90deg, rgba(151, 212, 111, 0.2), rgba(8, 15, 10, 0.66));
  color: #eff8ee;
  text-align: left;
  cursor: pointer;
  clip-path: polygon(0 0, 100% 0, calc(100% - 18px) 100%, 0 100%);
}

#start-button::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, var(--acid), rgba(200, 255, 145, 0.05));
  transform: translateX(-101%);
  transition: transform 0.35s;
}

#start-button:hover::before {
  transform: translateX(0);
}

#start-button span,
#start-button small {
  position: relative;
  z-index: 1;
  display: block;
}

#start-button span {
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 3px;
}

#start-button small {
  margin-top: 4px;
  color: rgba(231, 247, 229, 0.52);
  font-size: 8px;
  letter-spacing: 1px;
}

#start-button:hover {
  color: #061008;
}

#start-button:hover small {
  color: rgba(5, 13, 7, 0.68);
}

.start-hints {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 20px;
  color: #6d796f;
  font-size: 8px;
}

.start-hints span {
  display: flex;
  align-items: center;
  gap: 5px;
}

.start-hints kbd {
  padding: 3px 5px;
  border: 1px solid rgba(255, 255, 255, 0.13);
  background: rgba(255, 255, 255, 0.025);
  font-size: 7px;
}

.start-side {
  position: absolute;
  right: 41px;
  top: 50%;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  color: rgba(221, 238, 220, 0.3);
  transform: translateY(-50%);
}

.start-side span {
  font: 8px Consolas, monospace;
  letter-spacing: 3px;
}

.start-side b {
  margin: 6px 0 9px;
  color: rgba(255, 100, 72, 0.55);
  font-size: 22px;
  letter-spacing: 5px;
}

.start-side i {
  font: 7px Consolas, monospace;
  letter-spacing: 2px;
}

.controls-button {
  position: absolute;
  right: 31px;
  top: 27px;
  padding: 7px 11px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(3, 8, 5, 0.38);
  color: #7c8a80;
  font-size: 9px;
  letter-spacing: 1px;
  cursor: pointer;
}

.start-language-button {
  position: absolute;
  right: 224px;
  top: 27px;
  min-width: 42px;
  padding: 7px 10px;
  border: 1px solid rgba(200, 255, 145, 0.22);
  background: rgba(3, 8, 5, 0.46);
  color: var(--acid);
  font: 9px Consolas, monospace;
  letter-spacing: 1px;
  cursor: pointer;
}

.start-language-button:hover {
  border-color: rgba(200, 255, 145, 0.55);
  background: rgba(50, 72, 44, 0.42);
}

.controls-button kbd {
  margin-left: 8px;
  font-size: 9px;
}

.best-score,
.version-tag {
  position: absolute;
  bottom: 25px;
  color: rgba(214, 232, 214, 0.32);
  font: 8px Consolas, monospace;
  letter-spacing: 1px;
}

.best-score { left: 30px; }
.version-tag { right: 30px; letter-spacing: 2px; }

html[data-lang="en"] h1 {
  font-family: Impact, "Arial Narrow", sans-serif;
  font-weight: 900;
  font-size: clamp(68px, 8.7vw, 128px);
  line-height: 0.82;
  letter-spacing: 0.015em;
}

html[data-lang="en"] h1 span {
  margin-left: 0.04em;
  font-family: Impact, "Arial Narrow", sans-serif;
  font-style: italic;
  letter-spacing: 0.22em;
}

html[data-lang="en"] #mission-title {
  letter-spacing: 1.2px;
}

html[data-lang="en"] .form small,
html[data-lang="en"] .power b {
  letter-spacing: 0;
}

html[data-lang="en"] .start-hints {
  gap: 13px;
}

html[data-lang="en"] .title-copy {
  max-width: 540px;
}

#loading-screen {
  background: #050907;
}

.load-card {
  width: min(500px, 80vw);
  text-align: center;
}

.load-card h2 {
  margin: 0 0 25px;
  font-size: 30px;
  letter-spacing: 5px;
}

.load-bar {
  height: 3px;
  background: rgba(255, 255, 255, 0.08);
}

.load-bar i {
  display: block;
  width: 5%;
  height: 100%;
  background: var(--acid);
  box-shadow: 0 0 12px rgba(200, 255, 145, 0.6);
  transition: width 0.25s;
}

.load-card p {
  margin-top: 12px;
  color: #748077;
  font: 9px Consolas, monospace;
  letter-spacing: 1px;
}

#pause-screen {
  background: rgba(2, 5, 3, 0.69);
  backdrop-filter: blur(6px);
}

.pause-card,
.end-card {
  width: min(440px, 88vw);
  padding: 37px;
  background: linear-gradient(145deg, rgba(16, 26, 19, 0.97), rgba(4, 9, 6, 0.98));
  border-top: 1px solid rgba(200, 255, 145, 0.55);
  border-bottom: 1px solid rgba(200, 255, 145, 0.12);
  box-shadow: 0 35px 100px #000;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 22px), calc(100% - 22px) 100%, 0 100%);
}

.pause-card h2,
.end-card h2,
.controls-card h2 {
  margin: 0 0 24px;
  color: #f0f6f0;
  font-size: 27px;
  letter-spacing: 3px;
}

.menu-button {
  display: flex;
  justify-content: space-between;
  width: 100%;
  margin-top: 8px;
  padding: 13px 15px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.024);
  color: #aab7ad;
  font-size: 11px;
  letter-spacing: 1px;
  text-align: left;
  cursor: pointer;
}

.menu-button:hover {
  border-color: rgba(200, 255, 145, 0.35);
  color: #eef6ee;
  background: rgba(200, 255, 145, 0.06);
}

.menu-button.primary {
  border-left: 2px solid var(--acid);
  background: linear-gradient(90deg, rgba(200, 255, 145, 0.12), transparent);
}

.menu-button kbd {
  color: #667269;
  font-size: 8px;
}

.pause-controls {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 25px;
  color: #707c73;
  font-size: 8px;
}

.pause-controls kbd {
  display: inline-block;
  min-width: 34px;
  color: #a7b4aa;
}

#controls-screen {
  background: rgba(2, 5, 3, 0.84);
  backdrop-filter: blur(9px);
}

.controls-card {
  width: min(980px, 92vw);
  max-height: 92vh;
  overflow: auto;
  padding: 34px;
  background: linear-gradient(135deg, rgba(14, 24, 17, 0.98), rgba(4, 9, 6, 0.98));
  border: 1px solid rgba(200, 255, 145, 0.16);
}

.control-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 18px;
}

.control-grid article {
  display: grid;
  grid-template-columns: 86px 1fr;
  gap: 4px 12px;
  align-items: center;
  padding: 13px;
  border-left: 1px solid rgba(200, 255, 145, 0.15);
  background: rgba(255, 255, 255, 0.025);
}

.control-grid kbd {
  grid-row: 1 / 3;
  color: var(--acid);
  font-size: 9px;
}

.control-grid b {
  color: #d1dcd2;
  font-size: 10px;
  letter-spacing: 1px;
}

.control-grid span {
  color: #727f75;
  font-size: 8px;
  line-height: 1.6;
}

#death-screen,
#victory-screen {
  background:
    radial-gradient(circle, transparent, rgba(25, 3, 1, 0.82)),
    rgba(2, 5, 3, 0.73);
  backdrop-filter: blur(4px);
}

.end-card {
  border-top-color: var(--red);
}

.victory {
  border-top-color: var(--acid);
}

.victory-copy {
  margin: -10px 0 18px;
  color: #93a097;
  font-size: 10px;
  line-height: 1.9;
}

.end-stats {
  margin: 8px 0 20px;
  padding: 12px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  color: #87948a;
  font: 9px/1.8 Consolas, monospace;
  letter-spacing: 1px;
}

#lock-tip {
  position: absolute;
  left: 50%;
  bottom: 115px;
  z-index: 26;
  padding: 8px 14px;
  transform: translateX(-50%);
  background: rgba(3, 7, 4, 0.8);
  color: #99a69d;
  font-size: 9px;
  letter-spacing: 1px;
}

#mobile-warning {
  display: none;
  position: absolute;
  z-index: 40;
  left: 50%;
  bottom: 18px;
  padding: 7px 14px;
  transform: translateX(-50%);
  background: rgba(2, 6, 3, 0.82);
  color: #9ca99f;
  font-size: 9px;
  white-space: nowrap;
}

@media (max-width: 1020px) {
  .player-vitals { left: 15px; top: 15px; width: 300px; }
  #mission-card { left: 15px; top: 98px; width: 280px; }
  #top-actions { left: 15px; top: 81px; }
  .alert-panel { right: 15px; top: 15px; width: 170px; }
  #radar-panel { right: 15px; bottom: 100px; width: 145px; }
  .radar-shell { width: 145px; height: 145px; }
  .compass-ring i { transform-origin: 50% 78px; }
  .form-panel { left: 15px; bottom: 15px; }
  .form-current { display: none; }
  .power-panel { right: 15px; bottom: 15px; }
  .power { width: 55px; height: 58px; }
  .critical-panel { width: 260px; bottom: 82px; }
  .control-grid { grid-template-columns: 1fr; max-height: 55vh; overflow: auto; }
}

@media (pointer: coarse) {
  #mobile-warning { display: block; }
  #start-button { pointer-events: auto; }
}