:root {
  --ink: #17100b;
  --paper: #f4d594;
  --dust: #c57c38;
  --gold: #ffc75a;
  --red: #d33d26;
  --glass: rgba(21, 12, 8, 0.72);
  --line: rgba(255, 222, 158, 0.24);
}

* { box-sizing: border-box; }

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: #120c08;
  color: #ffe9b6;
  font-family: Manrope, sans-serif;
  touch-action: none;
}

#game {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  cursor: crosshair;
  background: #160e08;
}

#vignette {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  background:
    radial-gradient(ellipse 70% 62% at 50% 44%, transparent 55%, rgba(24, 10, 4, 0.68)),
    linear-gradient(180deg, rgba(255, 186, 74, 0.08), rgba(30, 10, 2, 0.12));
}

#brand {
  position: fixed;
  top: 18px;
  left: 20px;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 12px;
  user-select: none;
}

.seal {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border: 2px solid #ffe0a0;
  border-radius: 6px;
  background: linear-gradient(180deg, #4b2514, #a55422);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .35);
  font-family: Rye, serif;
  color: #ffd875;
  font-size: 18px;
}

#brand strong {
  display: block;
  font-family: Rye, serif;
  font-size: 21px;
  letter-spacing: .04em;
  line-height: 1;
  text-shadow: 0 2px 0 #2c130b;
}

#brand span,
#hint,
.stat span,
.score span,
.weapon-title span,
#reloadText,
#modalKicker {
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .22em;
  text-transform: uppercase;
}

#brand span { color: rgba(255, 232, 184, .68); }

#editorLink {
  position: fixed;
  left: 20px;
  top: 74px;
  z-index: 4;
  padding: 8px 11px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: rgba(21, 12, 8, .6);
  color: rgba(255, 232, 184, .8);
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .18em;
  text-decoration: none;
  backdrop-filter: blur(10px);
}

#editorLink:hover { color: #fff2c7; border-color: rgba(255, 232, 184, .6); }

#pauseBtn,
#helpBtn,
#musicBtn {
  position: fixed;
  z-index: 4;
  width: 38px;
  height: 34px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: rgba(21, 12, 8, .6);
  color: rgba(255, 232, 184, .8);
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
  backdrop-filter: blur(10px);
}

#pauseBtn { left: 20px; top: 124px; }
#helpBtn { left: 66px; top: 124px; font-size: 15px; }
#musicBtn {
  left: 112px; top: 124px;
  width: auto; min-width: 78px;
  padding: 0 12px;
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 15px;
}
#musicBtn .music-note {
  font-style: normal;
  font-size: 16px;
  color: #ffd875;
  animation: musicPulse 1.4s ease-in-out infinite;
}
#musicBtn .music-label {
  font-family: "JetBrains Mono", monospace;
  font-size: 9px;
  letter-spacing: .16em;
  color: rgba(255, 232, 184, .7);
}
@keyframes musicPulse {
  0%, 100% { transform: scale(1); text-shadow: 0 0 8px rgba(255, 216, 117, .5); }
  50% { transform: scale(1.18); text-shadow: 0 0 14px rgba(255, 216, 117, .9); }
}
#musicBtn.off .music-note { animation: none; color: rgba(255, 232, 184, .3); text-shadow: none; }
#musicBtn.off .music-label { text-decoration: line-through; color: rgba(255, 232, 184, .3); }
#musicBtn.off { border-color: rgba(255, 232, 184, .12); }
#pauseBtn:hover, #helpBtn:hover, #musicBtn:hover { color: #fff2c7; border-color: rgba(255, 232, 184, .6); }

.rotate-wall {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  place-items: center;
  padding: 24px;
  background: radial-gradient(ellipse at center, #24140a 0%, #0d0704 80%);
  color: #ffe9b6;
  text-align: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity .2s, visibility .2s;
  pointer-events: none;
}
.rotate-wall.show { opacity: 1; visibility: visible; pointer-events: auto; }
.rotate-box { display: grid; gap: 14px; place-items: center; max-width: 320px; }
.rotate-icon { color: #ffd875; animation: rotWiggle 2.2s ease-in-out infinite; }
@keyframes rotWiggle {
  0%, 100% { transform: rotate(-8deg); }
  50% { transform: rotate(78deg); }
}
.rotate-box h2 {
  margin: 6px 0 0;
  font-family: Rye, serif;
  font-size: 26px;
  letter-spacing: .02em;
  color: #fff1be;
  text-shadow: 0 3px 0 #2b1208;
}
.rotate-box p {
  margin: 0;
  color: rgba(255, 232, 184, .72);
  font-size: 13px;
  line-height: 1.5;
}

.help-overlay {
  position: fixed;
  inset: 0;
  z-index: 30;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(16, 8, 4, .78);
  backdrop-filter: blur(12px);
  opacity: 0;
  visibility: hidden;
  transition: opacity .25s, visibility .25s;
}
.help-overlay.show { opacity: 1; visibility: visible; }

.help-modal {
  width: min(480px, 100%);
  padding: 28px 26px 22px;
  border: 1px solid rgba(255, 232, 184, .28);
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(73, 35, 18, .92), rgba(24, 12, 7, .96)), #2b170d;
  box-shadow: 0 30px 90px rgba(0, 0, 0, .48);
  text-align: center;
}
.help-kicker {
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .22em;
  color: var(--gold);
}
.help-modal h3 {
  margin: 10px 0 18px;
  font-family: Rye, serif;
  font-size: 30px;
  letter-spacing: .02em;
  color: #fff1be;
  text-shadow: 0 3px 0 #2b1208;
}
.help-body {
  display: grid;
  gap: 10px;
  margin: 0 0 20px;
  text-align: left;
}
.help-row {
  display: grid;
  grid-template-columns: 130px 1fr;
  align-items: baseline;
  gap: 12px;
  padding: 8px 12px;
  border: 1px solid rgba(255, 232, 184, .14);
  border-radius: 6px;
  background: rgba(0, 0, 0, .22);
}
.help-row kbd {
  display: inline-block;
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .12em;
  color: #ffd875;
  text-transform: uppercase;
}
.help-row span {
  color: rgba(255, 232, 184, .8);
  font-size: 13px;
  line-height: 1.35;
}
.help-credit {
  margin-top: 6px;
  padding: 8px 4px 0;
  font-family: "JetBrains Mono", monospace;
  font-size: 9px;
  letter-spacing: .1em;
  color: rgba(255, 232, 184, .5);
  text-align: center;
  border-top: 1px dashed rgba(255, 232, 184, .18);
}

#helpClose {
  border: 0;
  border-radius: 8px;
  padding: 12px 26px;
  min-width: 160px;
  background: linear-gradient(180deg, #ffe09b, #ca792e);
  color: #1d0e06;
  font-family: "JetBrains Mono", monospace;
  font-weight: 900;
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 16px 34px rgba(0, 0, 0, .32);
}

#bossBar {
  position: fixed;
  left: 50%;
  top: 12px;
  z-index: 7;
  transform: translate(-50%, -20px);
  width: min(560px, calc(100vw - 40px));
  padding: 10px 14px 12px;
  border: 1px solid rgba(255, 90, 30, 0.6);
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(72, 12, 4, .85), rgba(24, 6, 4, .92));
  box-shadow: 0 18px 44px rgba(0, 0, 0, .5), 0 0 32px rgba(255, 90, 30, .25);
  opacity: 0;
  visibility: hidden;
  transition: opacity .35s, transform .35s, visibility .35s;
}
#bossBar.show { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.bossBar-label {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
  color: #ffddb0;
}
.bossBar-label span {
  font-family: Rye, serif;
  font-size: 16px;
  letter-spacing: .05em;
  color: #ff8a4c;
  text-shadow: 0 2px 0 #2b1208;
}
.bossBar-label b {
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  color: #ffd875;
}
.bossBar-track {
  height: 14px;
  border-radius: 3px;
  background: rgba(20, 8, 4, .8);
  overflow: hidden;
  border: 1px solid rgba(255, 90, 30, .4);
}
.bossBar-track i {
  display: block;
  height: 100%;
  width: 100%;
  background: linear-gradient(90deg, #ff2a10, #ffb547, #fff2b0);
  box-shadow: inset 0 0 12px rgba(255, 220, 130, .5);
  transition: width .22s ease;
}

#toast {
  position: fixed;
  left: 50%;
  top: 84px;
  z-index: 6;
  transform: translate(-50%, -8px);
  max-width: calc(100vw - 40px);
  padding: 11px 20px;
  border: 1px solid rgba(255, 199, 90, .45);
  border-radius: 8px;
  background: rgba(30, 15, 7, .82);
  color: #ffe9b6;
  font-family: Rye, serif;
  font-size: 17px;
  letter-spacing: .03em;
  text-align: center;
  backdrop-filter: blur(10px);
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s, transform .3s, visibility .3s;
  pointer-events: none;
}

#toast.show {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}

.hud-panel {
  position: fixed;
  z-index: 4;
  display: grid;
  gap: 8px;
  padding: 13px 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--glass);
  backdrop-filter: blur(12px);
  box-shadow: 0 18px 44px rgba(0, 0, 0, .28);
}

#healthPanel {
  left: 20px;
  bottom: 20px;
  width: min(330px, calc(100vw - 40px));
}

#progressPanel {
  top: 18px;
  right: 20px;
  min-width: 230px;
}

#weaponPanel {
  right: 20px;
  bottom: 20px;
  min-width: 230px;
}

.stat {
  display: grid;
  grid-template-columns: 42px 1fr 42px;
  align-items: center;
  gap: 10px;
}

.track {
  height: 8px;
  overflow: hidden;
  border-radius: 99px;
  background: rgba(255, 232, 184, .16);
}

.track i {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #e33822, #ffc65b);
  transition: width .18s ease;
}

.stat b,
.score b,
.weapon-title b {
  color: #fff2c7;
  font-family: "JetBrains Mono", monospace;
  font-size: 13px;
  text-align: right;
}

.score {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding-top: 7px;
  border-top: 1px dashed rgba(255, 232, 184, .18);
}

.score:first-child { border-top: 0; padding-top: 0; }

.weapon-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

#ammoChambers {
  display: grid;
  grid-template-columns: repeat(6, 20px);
  justify-content: space-between;
  gap: 8px;
  padding: 8px 0 4px;
}

.chamber {
  width: 20px;
  height: 20px;
  border: 1px solid rgba(255, 232, 184, .36);
  border-radius: 50%;
  background: radial-gradient(circle at 45% 38%, #fff0ad 0 18%, #d18a31 20% 48%, #4b2411 52% 100%);
  box-shadow: inset 0 0 0 2px rgba(30, 14, 6, .45), 0 6px 14px rgba(0, 0, 0, .22);
}

.chamber.empty {
  background: radial-gradient(circle at 50% 50%, rgba(255, 232, 184, .12) 0 32%, rgba(18, 10, 6, .7) 35% 100%);
  box-shadow: inset 0 0 0 2px rgba(0, 0, 0, .35);
}

#reloadText {
  min-height: 14px;
  color: rgba(255, 232, 184, .72);
  text-align: right;
}

#weaponPanel.reloading {
  border-color: rgba(255, 199, 90, .62);
  box-shadow: 0 18px 44px rgba(0, 0, 0, .28), 0 0 24px rgba(255, 183, 72, .16);
}

#mobileControls {
  position: fixed;
  inset: auto 0 0;
  z-index: 5;
  display: none;
  justify-content: space-between;
  align-items: flex-end;
  padding: 0 24px 24px;
  pointer-events: none;
}

#stick,
#mobileButtons {
  pointer-events: auto;
  touch-action: none;
}

#mobileButtons {
  display: flex;
  align-items: flex-end;
  gap: 14px;
}

#reloadBtn {
  width: 54px;
  height: 54px;
  border: 1px solid rgba(255, 232, 184, .35);
  border-radius: 50%;
  background: rgba(21, 12, 8, .55);
  color: #ffd875;
  font-family: "JetBrains Mono", monospace;
  font-size: 15px;
  font-weight: 900;
  backdrop-filter: blur(10px);
}

#stick {
  position: relative;
  width: 118px;
  height: 118px;
  border: 1px solid rgba(255, 232, 184, .28);
  border-radius: 50%;
  background: rgba(21, 12, 8, .48);
  backdrop-filter: blur(10px);
}

#stick i {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 44px;
  height: 44px;
  margin: -22px 0 0 -22px;
  border-radius: 50%;
  background: #ffd875;
  box-shadow: 0 8px 28px rgba(0, 0, 0, .35);
}

#shootBtn,
#startBtn {
  border: 0;
  border-radius: 8px;
  background: linear-gradient(180deg, #ffe09b, #ca792e);
  color: #1d0e06;
  font-family: "JetBrains Mono", monospace;
  font-weight: 900;
  letter-spacing: .18em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 16px 34px rgba(0, 0, 0, .32);
}

#shootBtn {
  width: 98px;
  height: 98px;
  border-radius: 50%;
  font-size: 12px;
}

#overlay {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(16, 8, 4, .72);
  backdrop-filter: blur(12px);
  opacity: 0;
  visibility: hidden;
  transition: opacity .25s, visibility .25s;
}

#overlay.show {
  opacity: 1;
  visibility: visible;
}

.modal {
  width: min(520px, 100%);
  padding: 34px 30px 30px;
  border: 1px solid rgba(255, 232, 184, .28);
  border-radius: 10px;
  background:
    linear-gradient(180deg, rgba(73, 35, 18, .9), rgba(24, 12, 7, .94)),
    #2b170d;
  box-shadow: 0 30px 90px rgba(0, 0, 0, .48);
  text-align: center;
}

#modalKicker { color: var(--gold); }

.modal h1 {
  margin: 14px 0 12px;
  font-family: Rye, serif;
  font-size: clamp(32px, 7vw, 54px);
  line-height: 1;
  letter-spacing: .02em;
  color: #fff1be;
  text-shadow: 0 3px 0 #2b1208;
}

.modal p {
  margin: 0 auto 24px;
  max-width: 390px;
  color: rgba(255, 232, 184, .76);
  font-size: 15px;
  line-height: 1.55;
}

#startBtn {
  min-width: 190px;
  padding: 15px 26px;
  font-size: 13px;
}

#modalStats {
  display: flex;
  justify-content: center;
  gap: 26px;
  margin: 0 0 24px;
  padding: 14px 10px;
  border: 1px dashed rgba(255, 232, 184, .3);
  border-radius: 8px;
}

#modalStats div { display: grid; gap: 4px; }

#modalStats span {
  font-family: "JetBrains Mono", monospace;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .2em;
  color: rgba(255, 232, 184, .6);
}

#modalStats b {
  font-family: Rye, serif;
  font-size: 22px;
  color: #ffd875;
}

@media (max-width: 760px), (pointer: coarse) {
  #brand { top: 10px; left: 12px; gap: 8px; }
  #brand div:not(.seal) { display: none; }
  .seal { width: 34px; height: 34px; font-size: 15px; }
  #editorLink { display: none; }
  #pauseBtn, #helpBtn, #musicBtn { top: 56px; height: 30px; font-size: 11px; }
  #pauseBtn { left: 12px; width: 34px; }
  #helpBtn { left: 52px; width: 34px; font-size: 14px; }
  #musicBtn { left: 92px; min-width: 66px; padding: 0 8px; }
  #musicBtn .music-note { font-size: 13px; }
  #musicBtn .music-label { font-size: 8px; }

  .help-row { grid-template-columns: 100px 1fr; }
  .help-modal h3 { font-size: 24px; }

  /* Компактный HUD */
  #progressPanel {
    top: 10px; right: 12px; min-width: 0;
    padding: 6px 10px; gap: 4px;
    font-size: 11px;
  }
  #progressPanel .score { padding-top: 4px; gap: 12px; }
  #progressPanel .score span,
  #progressPanel .weapon-title span { font-size: 8px; letter-spacing: .16em; }
  #progressPanel .score b { font-size: 11px; }

  #healthPanel {
    left: 12px; right: 12px; bottom: 148px; width: auto;
    padding: 6px 10px;
  }
  #healthPanel .stat { grid-template-columns: 26px 1fr 30px; gap: 6px; }
  #healthPanel .stat span { font-size: 8px; }
  #healthPanel .track { height: 6px; }
  #healthPanel .stat b { font-size: 11px; }

  #weaponPanel {
    right: 12px; bottom: 184px; min-width: 0;
    padding: 6px 10px; gap: 4px;
  }
  .weapon-title { gap: 8px; }
  .weapon-title span { font-size: 8px; }
  .weapon-title b { font-size: 11px; }
  #ammoChambers { grid-template-columns: repeat(6, 12px); gap: 5px; padding: 4px 0 2px; }
  .chamber { width: 12px; height: 12px; }
  #reloadText { min-height: 10px; font-size: 9px; }

  #bossBar { top: 10px; width: min(300px, calc(100vw - 140px)); padding: 4px 10px 6px; }
  .bossBar-label span { font-size: 12px; }
  .bossBar-label b { font-size: 10px; }
  .bossBar-track { height: 10px; }

  #mobileControls { display: flex; padding: 0 16px 16px; }
  #stick { width: 96px; height: 96px; }
  #stick i { width: 36px; height: 36px; margin: -18px 0 0 -18px; }
  #shootBtn { width: 82px; height: 82px; font-size: 11px; }
  #reloadBtn { width: 46px; height: 46px; font-size: 13px; }

  #toast { top: auto; bottom: 132px; font-size: 14px; padding: 8px 14px; }
}