* { box-sizing: border-box; margin: 0; padding: 0; }

/* ── Startscreen ─────────────────────────────────────── */
#start-screen {
  position: fixed;
  inset: 0;
  background: #0f0f1e;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 20;
}
#start-screen.hidden { display: none; }

#start-box {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 48px;
}

#start-title {
  font-size: 44px;
  font-weight: bold;
  letter-spacing: 4px;
  line-height: 1.35;
  color: #e8e8ff;
  text-shadow: 0 0 32px rgba(80,120,255,0.55), 0 0 8px rgba(80,120,255,0.3);
}

#name-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

#name-label {
  font-size: 10px;
  letter-spacing: 3px;
  color: #6677aa;
}

#player-name-input {
  background: #13132a;
  border: 1.5px solid #2e3060;
  border-radius: 6px;
  color: #c8d0ff;
  font-family: 'Courier New', monospace;
  font-size: 15px;
  letter-spacing: 2px;
  text-align: center;
  padding: 8px 20px;
  width: 220px;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
#player-name-input::placeholder { color: #3a3d6a; }
#player-name-input:focus {
  border-color: #5066cc;
  box-shadow: 0 0 10px rgba(80,102,204,0.35);
}

#name-error-msg {
  font-size: 9px;
  letter-spacing: 2px;
  color: #ff4444;
  height: 13px;
  opacity: 0;
  transition: opacity 0.15s;
}
#name-error-msg.visible { opacity: 1; }

@keyframes inputFlashRed {
  0%   { border-color: #2e3060; box-shadow: none; }
  20%  { border-color: #ff3333; box-shadow: 0 0 16px rgba(255,50,50,0.7); }
  50%  { border-color: #cc1111; box-shadow: 0 0 6px rgba(255,50,50,0.3); }
  75%  { border-color: #ff3333; box-shadow: 0 0 14px rgba(255,50,50,0.65); }
  100% { border-color: #2e3060; box-shadow: none; }
}
.name-error #player-name-input {
  animation: inputFlashRed 0.65s ease forwards;
}
.name-error #name-label { color: #ff4444; transition: color 0.1s; }

@keyframes screenFlashRed {
  0%   { opacity: 0; }
  18%  { opacity: 1; }
  45%  { opacity: 0.35; }
  65%  { opacity: 0.85; }
  100% { opacity: 0; }
}
#name-flash-overlay {
  position: fixed;
  inset: 0;
  background: rgba(220, 30, 30, 0.38);
  pointer-events: none;
  z-index: 999;
  opacity: 0;
}
#name-flash-overlay.flashing {
  animation: screenFlashRed 0.65s ease forwards;
}

.start-buttons {
  display: flex;
  gap: 24px;
}
.start-buttons button {
  font-size: 14px;
  padding: 14px 40px;
  letter-spacing: 2px;
  min-width: 190px;
}

/* ── Mörser-Gefecht Button (Startscreen) ─────────────── */
.btn-mortar-entry {
  font-size: 13px;
  padding: 10px 36px;
  letter-spacing: 3px;
  color: #ffcc66;
  border-color: #664400;
  background: #1a1000;
}
.btn-mortar-entry:hover { color: #ffdd88; border-color: #aa7700; background: #221500; }

/* ── Overlay-Buttons (nebeneinander) ─────────────────── */
.overlay-buttons {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
}

body {
  background: #0f0f1e;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 100vh;
  font-family: 'Courier New', monospace;
  color: #ddd;
  user-select: none;
}

/* ── HUD ──────────────────────────────────────────── */
#hud {
  width: 960px;
  max-width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 16px;
  background: #0a0a18;
  border-bottom: 2px solid #2a2a44;
  gap: 12px;
}

.team-panel {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 220px;
}

.team-name {
  font-size: 11px;
  font-weight: bold;
  letter-spacing: 2px;
}

.team-a .team-name { color: #5599ff; }
.team-b .team-name { color: #ff5555; }

.hp-bars { display: flex; flex-direction: column; gap: 3px; }

.hp-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

.player-tag {
  font-size: 10px;
  color: #888;
  width: 16px;
  flex-shrink: 0;
}

.bar-wrap {
  flex: 1;
  height: 8px;
  background: #1a1a2e;
  border-radius: 2px;
  overflow: hidden;
  border: 1px solid #333;
}

.bar-fill {
  height: 100%;
  width: 100%;
  background: #33cc44;
  transition: width 0.1s, background 0.2s;
  border-radius: 2px;
}

.hp-num {
  font-size: 11px;
  width: 26px;
  text-align: right;
  color: #aaa;
}

.controls-hint {
  font-size: 10px;
  color: #555;
  margin-top: 2px;
}

.hud-center {
  text-align: center;
  flex-shrink: 0;
}

button {
  background: #1e1e38;
  color: #aaa;
  border: 1px solid #3a3a5e;
  padding: 6px 14px;
  cursor: pointer;
  font-family: inherit;
  font-size: 11px;
  border-radius: 3px;
  letter-spacing: 1px;
  transition: background 0.15s, color 0.15s;
}
button:hover { background: #2a2a4a; color: #ddd; border-color: #5566aa; }
button:active { background: #333358; }

/* ── Canvas ───────────────────────────────────────── */
#gameCanvas {
  display: block;
  max-width: 100%;
  image-rendering: pixelated;
}

/* ── Overlay ──────────────────────────────────────── */
#overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.65);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
}

#overlay.hidden { display: none; }

#win-box {
  background: #0a0a18;
  border: 2px solid #3a3a5e;
  padding: 48px 72px;
  text-align: center;
  border-radius: 6px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.6);
}

#win-text {
  font-size: 28px;
  font-weight: bold;
  letter-spacing: 3px;
  margin-bottom: 24px;
}

#win-text.blue { color: #5599ff; }
#win-text.red  { color: #ff5555; }

#restart-btn {
  font-size: 13px;
  padding: 10px 28px;
  letter-spacing: 2px;
}

/* ── Builder-Einstiegsknopf (Startscreen) ───────────── */
.builder-entry-row {
  display: flex;
  gap: 12px;
  justify-content: center;
}
.btn-builder-entry {
  font-size: 12px;
  padding: 8px 28px;
  letter-spacing: 2px;
  color: #889;
  border-color: #303050;
}
.btn-builder-entry:hover { color: #aabbff; border-color: #5566aa; }

/* ── Tank-Builder Screen ──────────────────────────────── */
#builder-screen {
  position: fixed;
  inset: 0;
  background: #0f0f1e;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 20;
}
#builder-screen.hidden { display: none; }

#builder-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  background: #0a0a18;
  border: 2px solid #3a3a5e;
  border-radius: 6px;
  padding: 28px 36px;
  box-shadow: 0 8px 40px rgba(0,0,0,0.7);
}

#builder-title {
  font-size: 17px;
  font-weight: bold;
  letter-spacing: 5px;
  color: #ccd0ff;
  text-shadow: 0 0 24px rgba(80,120,255,0.45);
}

#builder-main {
  display: flex;
  gap: 28px;
  align-items: flex-start;
}

.builder-col {
  display: flex;
  flex-direction: column;
  gap: 7px;
  width: 196px;
}

.blabel {
  font-size: 9px;
  letter-spacing: 3px;
  color: #4a4a66;
}

.opt-grid {
  display: grid;
  grid-template-columns: repeat(4, 44px);
  gap: 4px;
}

.opt-item {
  width: 44px;
  height: 44px;
  background: #14142a;
  border: 2px solid #252540;
  border-radius: 3px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  transition: border-color 0.1s;
}
.opt-item img {
  width: 38px;
  height: 38px;
  image-rendering: pixelated;
  pointer-events: none;
}
.opt-item:hover { border-color: #5566aa; }
.opt-item.sel   { border-color: #88aaff; background: #1a1e3e; box-shadow: 0 0 8px rgba(100,150,255,0.3); }

.swatch-row { display: flex; gap: 6px; }
.swatch {
  width: 26px;
  height: 26px;
  border-radius: 3px;
  border: 2px solid #252540;
  cursor: pointer;
  transition: border-color 0.1s, transform 0.1s;
}
.swatch:hover { border-color: #aaa; transform: scale(1.12); }
.swatch.sel   { border-color: #fff; }

.var-row { display: flex; gap: 5px; }
.var-btn {
  font-size: 9px;
  padding: 4px 14px;
  letter-spacing: 1px;
}
.var-btn.sel { background: #202044; color: #dde; border-color: #5566aa; }

#builder-preview-col {
  display: flex;
  flex-direction: column;
  align-items: center;
}

#preview-canvas {
  border-radius: 50%;
  border: 2px solid #2a2a44;
  background: #12121f;
}

#builder-tracks {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
}

#track-grid {
  grid-template-columns: repeat(8, 30px);
}
#track-grid .opt-item {
  width: 30px;
  height: 30px;
}
#track-grid .opt-item img {
  width: 26px;
  height: 26px;
}

#builder-done {
  font-size: 13px;
  padding: 10px 52px;
  letter-spacing: 2px;
}

/* ── Map-Selection Screen ─────────────────────────────── */
#map-select-screen {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.88);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 15;
}
#map-select-screen.hidden { display: none; }

#map-select-box {
  background: #0a0a18;
  border: 2px solid #3a3a5e;
  border-radius: 8px;
  padding: 36px 44px;
  text-align: center;
  max-width: 720px;
  width: 95%;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 8px 40px rgba(0,0,0,0.7);
}

#map-select-title {
  font-size: 19px;
  font-weight: bold;
  letter-spacing: 5px;
  color: #ccd0ff;
  text-shadow: 0 0 24px rgba(80,120,255,0.5);
  margin-bottom: 8px;
}

#map-select-hint {
  font-size: 10px;
  color: #445;
  letter-spacing: 1px;
  margin-bottom: 26px;
  line-height: 1.65;
}

#map-cards {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
  margin-bottom: 20px;
}

.map-cards-divider {
  width: 100%;
  text-align: center;
  font-size: 9px;
  letter-spacing: 3px;
  color: #445;
  margin: 4px 0 2px;
}

.map-card {
  width: 172px;
  background: #10101e;
  border: 2px solid #252540;
  border-radius: 6px;
  padding: 10px;
  cursor: pointer;
  transition: border-color 0.15s, transform 0.12s, box-shadow 0.15s;
}
.map-card:hover:not(.voted) { border-color: #5566aa; transform: translateY(-3px); }
.map-card.voted {
  border-color: #88aaff;
  background: #141430;
  box-shadow: 0 0 18px rgba(100,150,255,0.28);
  cursor: default;
}
.map-card.opponent-voted { border-color: #ff9944; box-shadow: 0 0 14px rgba(255,140,40,0.22); }
.map-card.voted.opponent-voted { border-color: #88aaff; }

.map-preview {
  width: 100%;
  height: 76px;
  border-radius: 4px;
  margin-bottom: 9px;
  position: relative;
  overflow: hidden;
}

.mp-wall { position: absolute; }

.retro-preview {
  background: #4a7a35;
  background-image:
    repeating-linear-gradient(0deg,  transparent, transparent 11px, rgba(0,0,0,0.10) 11px, rgba(0,0,0,0.10) 12px),
    repeating-linear-gradient(90deg, transparent, transparent 11px, rgba(0,0,0,0.10) 11px, rgba(0,0,0,0.10) 12px);
}
.retro-preview .mp-wall {
  background: #7a7a7a;
  border-top: 2px solid #a8a8a8;
  border-left: 2px solid #a8a8a8;
}

.western-preview {
  background: #c49a55;
  background-image:
    repeating-linear-gradient(0deg,  transparent, transparent 11px, rgba(0,0,0,0.07) 11px, rgba(0,0,0,0.07) 12px),
    repeating-linear-gradient(90deg, transparent, transparent 11px, rgba(0,0,0,0.07) 11px, rgba(0,0,0,0.07) 12px);
}
.western-preview .mp-wall {
  background: #8b5e3c;
  border-top: 2px solid #c49060;
  border-left: 2px solid #c49060;
}

.cyber-preview {
  background: #06060f;
  background-image:
    repeating-linear-gradient(0deg,  transparent, transparent 11px, rgba(0,200,255,0.13) 11px, rgba(0,200,255,0.13) 12px),
    repeating-linear-gradient(90deg, transparent, transparent 11px, rgba(0,200,255,0.13) 11px, rgba(0,200,255,0.13) 12px);
}
.cyber-preview .mp-wall {
  background: #0b2535;
  border-top: 2px solid #00bbdd;
  border-left: 2px solid #00bbdd;
  box-shadow: 0 0 6px rgba(0,200,255,0.45);
}

.map-name {
  font-size: 11px;
  font-weight: bold;
  letter-spacing: 3px;
  color: #ccd;
  margin-bottom: 5px;
}

.map-desc {
  font-size: 9px;
  color: #445;
  line-height: 1.55;
  letter-spacing: 0.5px;
}

#map-vote-status {
  font-size: 11px;
  color: #556;
  letter-spacing: 2px;
}

#map-opponent-vote {
  font-size: 10px;
  color: #ff9944;
  letter-spacing: 1px;
  margin-top: 5px;
}
#map-opponent-vote.hidden { display: none; }

/* ── Karten-Auswahl Screen (vor SP/MP) ──────────────────────────────── */
#map-choice-screen {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.90);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 18;
  overflow-y: auto;
  padding: 20px;
}
#map-choice-screen.hidden { display: none; }

#map-choice-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  max-width: 660px;
  width: 100%;
}

#mc-title {
  font-size: 19px;
  font-weight: bold;
  letter-spacing: 5px;
  color: #ccd0ff;
  text-shadow: 0 0 24px rgba(80,120,255,0.45);
}

#mc-random-btn {
  font-size: 14px;
  padding: 14px 0;
  letter-spacing: 3px;
  color: #ccd0ff;
  border-color: #3a3a5e;
  width: 100%;
  max-width: 400px;
}
#mc-random-btn:hover { color: #eef; border-color: #6677cc; background: #151530; }

#mc-divider {
  font-size: 9px;
  letter-spacing: 3px;
  color: #334;
  width: 100%;
  text-align: center;
}

#mc-saves-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 10px;
  width: 100%;
}

.mc-save-card {
  background: #0a0a18;
  border: 2px solid #252540;
  border-radius: 6px;
  padding: 8px;
  cursor: pointer;
  transition: border-color 0.15s, transform 0.12s;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
}
.mc-save-card:hover { border-color: #5566aa; transform: translateY(-2px); }

.mc-save-card canvas {
  border-radius: 3px;
  border: 1px solid #2a2a44;
  image-rendering: pixelated;
  width: 100%;
  display: block;
}

.mc-save-card .mc-name {
  font-size: 10px;
  font-weight: bold;
  letter-spacing: 1.5px;
  color: #ccd;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
}

.mc-save-card .mc-theme {
  font-size: 8px;
  letter-spacing: 2px;
  color: #445;
}

#mc-saves-empty {
  font-size: 10px;
  color: #334;
  letter-spacing: 1.5px;
  line-height: 1.7;
  padding: 16px 0;
  text-align: center;
}
#mc-saves-empty.hidden { display: none; }

#mc-back-btn {
  font-size: 11px;
  padding: 7px 20px;
  letter-spacing: 2px;
}

/* ── Map-Builder Screen ──────────────────────────────────────────────── */
#map-builder-screen {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.93);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 20;
  overflow-y: auto;
  padding: 16px;
}
#map-builder-screen.hidden { display: none; }

#map-builder-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: 100%;
  max-width: 760px;
}

#mb-title {
  font-size: 19px;
  font-weight: bold;
  letter-spacing: 5px;
  color: #ccd0ff;
  text-shadow: 0 0 24px rgba(80,120,255,0.45);
}

#mb-hint {
  font-size: 9px;
  color: #445;
  letter-spacing: 1px;
}

#mb-theme-row {
  display: flex;
  gap: 8px;
}

.mb-theme-btn {
  font-size: 10px;
  padding: 5px 16px;
  letter-spacing: 2px;
}
.mb-theme-btn.sel {
  background: #1a1e3e;
  color: #dde;
  border-color: #5566aa;
  box-shadow: 0 0 8px rgba(100,150,255,0.25);
}

#mb-canvas-wrap {
  border: 2px solid #2a2a44;
  border-radius: 3px;
  overflow: hidden;
  max-width: 100%;
  line-height: 0;
}

#mapBuilderCanvas {
  display: block;
  max-width: 100%;
  image-rendering: pixelated;
  cursor: crosshair;
}

#mb-btn-row {
  display: flex;
  gap: 8px;
  width: 100%;
  align-items: center;
}

.mb-spacer { flex: 1; }

#mb-play-btn {
  font-size: 12px;
  padding: 8px 24px;
  letter-spacing: 2px;
  color: #88ffaa;
  border-color: #336644;
}
#mb-play-btn:hover { color: #aaffcc; border-color: #55aa77; background: #0e2018; }

#mb-save-btn, #mb-saves-btn {
  color: #99aaff;
  border-color: #2a3a6a;
}
#mb-save-btn:hover, #mb-saves-btn:hover { color: #bbccff; border-color: #4455aa; background: #10132a; }

/* ── Map-Builder: Speichern-Dialog ──────────────────────────────────────── */
#mb-save-dialog {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.72);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 22;
}
#mb-save-dialog.hidden { display: none; }

#mb-save-dialog-box {
  background: #0a0a18;
  border: 2px solid #3a3a5e;
  border-radius: 6px;
  padding: 28px 36px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: center;
  box-shadow: 0 8px 32px rgba(0,0,0,0.8);
  min-width: 280px;
}

#mb-save-dialog-title {
  font-size: 13px;
  font-weight: bold;
  letter-spacing: 4px;
  color: #ccd0ff;
}

#mb-save-name-input {
  background: #12122a;
  border: 1px solid #3a3a5e;
  color: #dde;
  font-family: inherit;
  font-size: 12px;
  padding: 8px 14px;
  border-radius: 3px;
  letter-spacing: 1px;
  width: 100%;
  outline: none;
}
#mb-save-name-input:focus { border-color: #5566aa; }

.mb-save-dialog-btns { display: flex; gap: 10px; }

/* ── Map-Builder: Gespeicherte Karten ───────────────────────────────────── */
#mb-saves-screen {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.93);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  z-index: 21;
  overflow-y: auto;
  padding: 24px 16px;
}
#mb-saves-screen.hidden { display: none; }

#mb-saves-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  width: 100%;
  max-width: 760px;
}

#mb-saves-title {
  font-size: 19px;
  font-weight: bold;
  letter-spacing: 5px;
  color: #ccd0ff;
  text-shadow: 0 0 24px rgba(80,120,255,0.45);
}

#mb-saves-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
}

.mb-save-card {
  display: flex;
  gap: 14px;
  align-items: center;
  background: #0a0a18;
  border: 2px solid #252540;
  border-radius: 6px;
  padding: 10px 14px;
  transition: border-color 0.15s;
}
.mb-save-card:hover { border-color: #3a3a6e; }

.mb-save-preview {
  flex-shrink: 0;
  border-radius: 3px;
  border: 1px solid #2a2a44;
  image-rendering: pixelated;
}

.mb-save-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
}

.mb-save-name {
  font-size: 13px;
  font-weight: bold;
  letter-spacing: 2px;
  color: #ccd;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mb-save-theme {
  font-size: 9px;
  letter-spacing: 2px;
  color: #445;
}

.mb-save-actions {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex-shrink: 0;
}

.mb-save-load-btn {
  font-size: 10px;
  padding: 5px 16px;
  letter-spacing: 1px;
  color: #88ffaa;
  border-color: #336644;
}
.mb-save-load-btn:hover { color: #aaffcc; border-color: #55aa77; background: #0e2018; }

.mb-save-del-btn {
  font-size: 10px;
  padding: 5px 16px;
  letter-spacing: 1px;
  color: #ff8888;
  border-color: #441a1a;
}
.mb-save-del-btn:hover { color: #ffaaaa; border-color: #774444; background: #200a0a; }

#mb-saves-empty {
  font-size: 11px;
  color: #334;
  letter-spacing: 2px;
  padding: 48px 0;
}
#mb-saves-empty.hidden { display: none; }

#mb-saves-close-btn {
  font-size: 11px;
  padding: 8px 22px;
  letter-spacing: 2px;
}

/* ── Menu Crosshair Cursor ────────────────────────────────────────────── */
#start-screen,
#builder-screen,
#map-select-screen,
#map-builder-screen,
#mb-saves-screen,
#map-choice-screen,
#overlay:not(.hidden) {
  cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'><circle cx='16' cy='16' r='12' fill='none' stroke='%23ffffff' stroke-width='1.5' opacity='0.85'/><line x1='16' y1='4' x2='16' y2='12' stroke='%23ffffff' stroke-width='1.5' opacity='0.85'/><line x1='16' y1='20' x2='16' y2='28' stroke='%23ffffff' stroke-width='1.5' opacity='0.85'/><line x1='4' y1='16' x2='12' y2='16' stroke='%23ffffff' stroke-width='1.5' opacity='0.85'/><line x1='20' y1='16' x2='28' y2='16' stroke='%23ffffff' stroke-width='1.5' opacity='0.85'/><circle cx='16' cy='16' r='2' fill='%23ff4444' opacity='0.9'/></svg>") 16 16, crosshair;
}

#start-screen button,
#builder-screen button,
#map-select-screen button,
#map-builder-screen button,
#mb-saves-screen button,
#map-choice-screen button,
#overlay button,
.map-card {
  cursor: inherit;
}

#mapBuilderCanvas { cursor: crosshair; }

/* ── Menu Bullet Hole Effect ──────────────────────────────────────────── */
.menu-bullet-hole {
  position: fixed;
  pointer-events: none;
  z-index: 9999;
  width: 32px;
  height: 32px;
  transform: translate(-50%, -50%);
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'><line x1='16' y1='16' x2='2' y2='1' stroke='%23999999' opacity='0.55' stroke-width='1'/><line x1='16' y1='16' x2='30' y2='3' stroke='%23999999' opacity='0.4' stroke-width='0.8'/><line x1='16' y1='16' x2='31' y2='16' stroke='%23999999' opacity='0.55' stroke-width='1'/><line x1='16' y1='16' x2='27' y2='29' stroke='%23999999' opacity='0.4' stroke-width='0.8'/><line x1='16' y1='16' x2='7' y2='31' stroke='%23999999' opacity='0.55' stroke-width='1'/><line x1='16' y1='16' x2='1' y2='23' stroke='%23999999' opacity='0.4' stroke-width='0.8'/><circle cx='16' cy='16' r='7' fill='%23111111' stroke='%23666666' stroke-width='1'/><circle cx='16' cy='16' r='4.5' fill='%23050505'/><circle cx='16' cy='16' r='2.5' fill='%23000000'/><circle cx='13.5' cy='13.5' r='0.9' fill='%23ffffff' opacity='0.18'/></svg>") no-repeat center/contain;
}

@keyframes menu-hole-pop {
  0%   { transform: translate(-50%, -50%) scale(0.1); opacity: 0; }
  25%  { transform: translate(-50%, -50%) scale(1.2); opacity: 1; }
  40%  { transform: translate(-50%, -50%) scale(0.95); opacity: 1; }
  55%  { transform: translate(-50%, -50%) scale(1.05); opacity: 1; }
  70%  { transform: translate(-50%, -50%) scale(1);   opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(1);   opacity: 1; }
}

.menu-bullet-flash {
  position: fixed;
  pointer-events: none;
  z-index: 9999;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: radial-gradient(circle, #ffffff 15%, #ffee55 50%, transparent 80%);
  transform-origin: center;
  transform: translate(-50%, -50%);
}

@keyframes menu-flash {
  0%   { transform: translate(-50%, -50%) scale(0.3); opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(2.8); opacity: 0; }
}