html, body {
  margin: 0;
  padding: 0;
  overflow: hidden;
  background: #111;
  font-family: Arial, sans-serif;
  touch-action: none;
}

body {
  position: fixed;
  inset: 0;
}

#loading-screen {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
}

#loading-screen.hidden {
  display: none;
}

#loading-progress {
  color: #f3f8ff;
  font: 400 clamp(72px, 18vw, 180px)/1 "Bangers", cursive;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.6);
}

body.main-menu-open #controls,
body.main-menu-open #hud-panel,
body.main-menu-open #phase-shift-pop,
body.main-menu-open #score-hud {
  opacity: 0;
  pointer-events: none;
}

body.main-menu-open #version {
  opacity: 0.62;
  pointer-events: none;
}

canvas {
  display: block;
  width: 100vw;
  height: var(--app-height, 100dvh);
}

#version {
  position: fixed;
  right: 12px;
  bottom: calc(8px + env(safe-area-inset-bottom));
  color: rgba(226, 240, 255, 0.88);
  opacity: 0;
  font: 400 12px/1 "Bangers", cursive;
  letter-spacing: 0.03em;
  z-index: 61;
  user-select: none;
  transition: opacity 180ms ease;
}

#hud-panel {
  position: fixed;
  top: 12px;
  left: 0;
  width: 280px;
  height: 124px;
  z-index: 15;
  pointer-events: none;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 8px;
  padding: 0;
}

#hud-menu-btn {
  position: fixed;
  top: 10px;
  right: 10px;
  width: 34px;
  height: 34px;
  border-radius: 9px;
  border: 2px solid rgba(103, 108, 111, 0.9);
  background: linear-gradient(180deg, rgba(83, 87, 91, 0.96), rgba(58, 61, 65, 0.96));
  color: #efe6d1;
  font: 900 20px/1 "Segoe UI Symbol", "Arial Unicode MS", sans-serif;
  text-shadow: 0 1px 0 rgba(26, 28, 31, 0.7);
  pointer-events: auto;
  cursor: pointer;
  box-shadow:
    inset 0 1px 0 rgba(205, 210, 214, 0.34),
    inset 0 -1px 0 rgba(24, 28, 33, 0.42);
}

#hud-menu-btn:hover,
#hud-menu-btn:focus-visible {
  outline: none;
  border-color: rgba(133, 188, 149, 0.94);
  box-shadow:
    inset 0 1px 0 rgba(205, 210, 214, 0.34),
    inset 0 -1px 0 rgba(24, 28, 33, 0.42),
    0 0 0 3px rgba(126, 217, 162, 0.2);
}

#hud-menu-btn:active {
  transform: translateY(1px);
}

#hud-floor-value {
  order: 2;
  display: none;
  text-align: center;
  font: 400 28px/1 "Bangers", cursive;
  color: #f4e6c8;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-shadow:
    -1px -1px 0 rgba(53, 35, 20, 0.72),
    1px -1px 0 rgba(53, 35, 20, 0.72),
    -1px 1px 0 rgba(53, 35, 20, 0.72),
    1px 1px 0 rgba(53, 35, 20, 0.72);
  transform-origin: center center;
}

#hud-speed-bar {
  order: 1;
  width: 80%;
  align-self: center;
  height: 42px;
  border-radius: 12px;
  border: 2px solid rgba(198, 170, 118, 0.62);
  background: rgba(18, 14, 10, 0.92);
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
  margin-bottom: 0;
  box-shadow: inset 0 0 0 1px rgba(255, 233, 182, 0.14);
  flex-shrink: 0;
}

#hud-speed-fill {
  position: absolute;
  left: 3px;
  top: 3px;
  bottom: 3px;
  width: 0%;
  max-width: calc(100% - 6px);
  border-radius: 8px;
  background: linear-gradient(90deg, #5fd08a 0%, #9eea76 52%, #ffcb63 100%);
  box-shadow:
    0 0 12px rgba(186, 239, 126, 0.45),
    inset 0 0 0 1px rgba(255, 247, 220, 0.36);
  transition: width 90ms linear;
  z-index: 1;
}

#hud-speed-label {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #f4e8c9;
  font: 400 26px/1 "Bangers", cursive;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-shadow:
    -1px -1px 0 rgba(35, 24, 14, 0.76),
    1px -1px 0 rgba(35, 24, 14, 0.76),
    -1px 1px 0 rgba(35, 24, 14, 0.76),
    1px 1px 0 rgba(35, 24, 14, 0.76);
  pointer-events: none;
  z-index: 2;
}

#hud-streak-feed {
  order: 3;
  width: 100%;
  min-height: 24px;
  margin-top: 0;
  text-align: center;
  color: #f0e4c8;
  font: 400 21px/1.1 "Bangers", cursive;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  opacity: 0.96;
  flex-shrink: 0;
}

#score-hud {
  position: fixed;
  left: 50%;
  bottom: calc(8px + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  z-index: 16;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 220px;
}

#score-pending-value {
  color: #f7e9c5;
  font: 400 33px/1 "Bangers", cursive;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-shadow:
    -1px -1px 0 rgba(35, 24, 14, 0.74),
    1px -1px 0 rgba(35, 24, 14, 0.74),
    -1px 1px 0 rgba(35, 24, 14, 0.74),
    1px 1px 0 rgba(35, 24, 14, 0.74);
  transform-origin: center center;
}

#score-total-value {
  margin-top: 4px;
  color: #ffecc0;
  font: 400 66px/1 "Bangers", cursive;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-shadow:
    -1px -1px 0 rgba(36, 24, 12, 0.76),
    1px -1px 0 rgba(36, 24, 12, 0.76),
    -1px 1px 0 rgba(36, 24, 12, 0.76),
    1px 1px 0 rgba(36, 24, 12, 0.76),
    0 0 10px rgba(255, 214, 132, 0.22);
  transform-origin: center center;
}

#phase-shift-pop {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -54%) scale(0.94);
  z-index: 32;
  min-width: min(420px, 90vw);
  max-width: 92vw;
  border-radius: 14px;
  border: 2px solid rgba(115, 102, 82, 0.9);
  background:
    linear-gradient(180deg, rgba(44, 37, 27, 0.94), rgba(32, 27, 20, 0.94)),
    repeating-linear-gradient(
      90deg,
      rgba(63, 48, 34, 0.2) 0,
      rgba(63, 48, 34, 0.2) 8px,
      rgba(50, 40, 28, 0.12) 8px,
      rgba(50, 40, 28, 0.12) 16px
    );
  box-shadow:
    0 14px 30px rgba(0, 0, 0, 0.4),
    inset 0 0 0 1px rgba(191, 172, 141, 0.22);
  padding: 10px 16px 12px;
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 220ms ease, transform 280ms cubic-bezier(0.2, 0.9, 0.2, 1);
}

#phase-shift-pop.active {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

#phase-shift-title {
  color: #f3dfb8;
  font: 400 clamp(28px, 6vw, 38px)/1 "Bangers", cursive;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-shadow: 0 4px 10px rgba(0, 0, 0, 0.35);
}

#phase-shift-subtitle {
  margin-top: 4px;
  color: rgba(243, 230, 203, 0.9);
  font: 400 clamp(16px, 3.5vw, 22px)/1 "Bangers", cursive;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

#phase-shift-stats {
  margin-top: 8px;
  color: rgba(238, 230, 214, 0.92);
  font: 400 clamp(14px, 2.9vw, 18px)/1.15 "Bangers", cursive;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  white-space: pre-line;
}

#phase-shift-countdown {
  margin-top: 8px;
  color: #ffe8b5;
  font: 400 clamp(38px, 8vw, 52px)/1 "Bangers", cursive;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-shadow: 0 6px 14px rgba(0, 0, 0, 0.36);
}

#controls {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: calc(var(--app-height, 100dvh) * 0.40);
  display: flex;
  gap: 0;
  padding-bottom: env(safe-area-inset-bottom);
  z-index: 20;
  pointer-events: auto;
  background: transparent;
  border-top: 0;
}

.touch-zone {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 22px;
  color: rgba(232, 243, 255, 0.26);
  font: 400 28px/1 "Bangers", cursive;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border: 0;
  background: transparent;
  user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  touch-action: none;
  text-shadow: none;
  transition: opacity 260ms ease;
}

.touch-zone-jump {
  width: 40%;
  border-right: 1px dashed rgba(188, 220, 246, 0.35);
}

.touch-zone-move {
  width: 60%;
}

.touch-zone:active {
  color: rgba(232, 243, 255, 0.72);
}

#controls.controls-hint-hidden {
  background: transparent;
  border-top-color: transparent;
}

#controls.controls-hint-hidden .touch-zone {
  opacity: 0;
}

@media (orientation: landscape) {
  #controls {
    display: none;
  }
}

#main-menu {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px;
  background:
    radial-gradient(circle at 50% 20%, rgba(22, 38, 27, 0.28), rgba(12, 14, 18, 0.68) 72%),
    rgba(9, 10, 14, 0.5);
  backdrop-filter: blur(7px) saturate(0.82);
}

#main-menu.hidden {
  display: none;
}

#main-menu .hidden {
  display: none;
}

#main-menu-shell {
  width: min(540px, 94vw);
  max-height: calc(var(--app-height, 100dvh) - 28px);
  overflow-y: auto;
  border-radius: 20px;
  padding: 16px 16px 20px;
  border: 2px solid rgba(104, 90, 70, 0.85);
  background:
    linear-gradient(180deg, rgba(46, 38, 28, 0.96), rgba(34, 28, 20, 0.96)),
    repeating-linear-gradient(
      90deg,
      rgba(63, 48, 34, 0.22) 0,
      rgba(63, 48, 34, 0.22) 8px,
      rgba(50, 40, 28, 0.12) 8px,
      rgba(50, 40, 28, 0.12) 17px
    );
  box-shadow:
    0 26px 64px rgba(0, 0, 0, 0.54),
    inset 0 0 0 1.5px rgba(190, 172, 143, 0.3),
    inset 0 22px 26px rgba(255, 232, 191, 0.06);
  position: relative;
}

#main-menu-shell::before,
#main-menu-shell::after {
  content: "";
  position: absolute;
  width: 34px;
  height: 34px;
  border: 2px solid rgba(112, 116, 119, 0.85);
  background: linear-gradient(135deg, rgba(84, 88, 92, 0.9), rgba(50, 54, 57, 0.9));
  box-shadow: inset 0 0 0 1px rgba(161, 166, 170, 0.35);
}

#main-menu-shell::before {
  top: 8px;
  left: 8px;
  clip-path: polygon(0 0, 100% 0, 0 100%);
}

#main-menu-shell::after {
  right: 8px;
  bottom: 8px;
  clip-path: polygon(100% 0, 100% 100%, 0 100%);
}

#main-menu-logo {
  margin: 2px 28px 14px;
  min-height: 66px;
  border: 2px solid rgba(104, 109, 112, 0.92);
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(66, 70, 73, 0.95), rgba(44, 47, 50, 0.95));
  color: #efe6cc;
  font: 800 clamp(32px, 8vw, 56px)/1 "Palatino Linotype", "Book Antiqua", serif;
  letter-spacing: 0.05em;
  text-align: center;
  display: grid;
  place-items: center;
  text-shadow: 0 2px 0 rgba(26, 28, 30, 0.6), 0 9px 16px rgba(0, 0, 0, 0.35);
  box-shadow:
    inset 0 1px 0 rgba(226, 231, 235, 0.34),
    inset 0 -2px 0 rgba(23, 26, 30, 0.44);
  position: relative;
}

#main-menu-logo::before,
#main-menu-logo::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 10px;
  height: 10px;
  margin-top: -5px;
  border-radius: 50%;
  border: 1px solid rgba(130, 133, 136, 0.9);
  background: radial-gradient(circle at 30% 30%, rgba(192, 198, 205, 0.85), rgba(84, 88, 92, 0.92));
  box-shadow: inset 0 0 0 1px rgba(58, 62, 66, 0.5);
}

#main-menu-logo::before {
  left: 10px;
}

#main-menu-logo::after {
  right: 10px;
}

#main-menu-hero {
  height: 108px;
  margin: 0 16px 14px;
  border-radius: 12px;
  border: 1px solid rgba(113, 104, 89, 0.88);
  background:
    radial-gradient(circle at 20% 48%, rgba(128, 221, 165, 0.42), transparent 30%),
    radial-gradient(circle at 79% 30%, rgba(133, 147, 168, 0.28), transparent 36%),
    linear-gradient(180deg, rgba(63, 76, 91, 0.7), rgba(33, 40, 49, 0.85));
  box-shadow:
    inset 0 0 0 1px rgba(203, 188, 157, 0.18),
    inset 0 -14px 18px rgba(0, 0, 0, 0.34);
  position: relative;
}

#main-menu-hero::before,
#main-menu-hero::after {
  content: "";
  position: absolute;
  border-radius: 999px;
}

#main-menu-hero::before {
  width: 66px;
  height: 36px;
  left: 18%;
  bottom: 24%;
  background: radial-gradient(circle at 40% 35%, rgba(189, 255, 218, 0.7), rgba(93, 201, 142, 0.3) 70%, transparent 100%);
}

#main-menu-hero::after {
  width: 120px;
  height: 7px;
  left: calc(18% - 28px);
  bottom: 16%;
  background: radial-gradient(circle, rgba(127, 224, 169, 0.58), rgba(127, 224, 169, 0));
  filter: blur(1.2px);
}

#main-menu-actions {
  display: grid;
  gap: 10px;
  padding: 0 10px;
}

#main-menu-actions button,
#menu-settings-back-btn {
  min-height: 62px;
  border-radius: 11px;
  border: 2px solid rgba(96, 76, 54, 0.86);
  background:
    linear-gradient(180deg, rgba(138, 103, 64, 0.95), rgba(99, 72, 45, 0.95)),
    repeating-linear-gradient(
      90deg,
      rgba(75, 52, 30, 0.2) 0,
      rgba(75, 52, 30, 0.2) 7px,
      rgba(108, 80, 52, 0.2) 7px,
      rgba(108, 80, 52, 0.2) 14px
    );
  color: #f0e6d0;
  font: 800 clamp(22px, 5.7vw, 30px)/1 "Book Antiqua", "Palatino Linotype", serif;
  letter-spacing: 0.03em;
  text-shadow: 0 1px 0 rgba(36, 22, 11, 0.7);
  box-shadow:
    inset 0 1px 0 rgba(238, 214, 172, 0.28),
    inset 0 -2px 0 rgba(52, 32, 18, 0.45),
    0 4px 0 rgba(52, 33, 19, 0.7);
  cursor: pointer;
}

#main-menu-actions button:hover,
#main-menu-actions button:focus-visible,
#menu-settings-back-btn:hover,
#menu-settings-back-btn:focus-visible,
#menu-hall-back-btn:hover,
#menu-hall-back-btn:focus-visible {
  outline: none;
  border-color: rgba(122, 175, 138, 0.94);
  box-shadow:
    inset 0 1px 0 rgba(238, 214, 172, 0.34),
    inset 0 -2px 0 rgba(52, 32, 18, 0.45),
    0 4px 0 rgba(52, 33, 19, 0.7),
    0 0 0 3px rgba(124, 219, 161, 0.2),
    0 0 16px rgba(124, 219, 161, 0.24);
  transform: translateY(-1px);
}

#main-menu-actions button:active,
#menu-settings-back-btn:active,
#menu-hall-back-btn:active {
  transform: translateY(2px);
  box-shadow:
    inset 0 1px 0 rgba(238, 214, 172, 0.2),
    inset 0 -1px 0 rgba(52, 32, 18, 0.4),
    0 2px 0 rgba(52, 33, 19, 0.7);
}

#main-menu-view-settings {
  padding: 4px 12px 0;
  text-align: center;
}

#main-menu-settings-title {
  color: #efe6cc;
  font: 800 clamp(24px, 6vw, 34px)/1.1 "Palatino Linotype", "Book Antiqua", serif;
  letter-spacing: 0.04em;
  margin-bottom: 12px;
}

#main-menu-settings-list {
  min-height: 120px;
  border: 1px solid rgba(183, 167, 133, 0.44);
  border-radius: 12px;
  margin-bottom: 12px;
  padding: 12px;
  background: linear-gradient(180deg, rgba(67, 53, 38, 0.38), rgba(45, 35, 24, 0.44));
}

#setting-phase-shift-btn {
  width: 100%;
  min-height: 56px;
  border-radius: 10px;
  border: 2px solid rgba(96, 76, 54, 0.86);
  background:
    linear-gradient(180deg, rgba(138, 103, 64, 0.95), rgba(99, 72, 45, 0.95)),
    repeating-linear-gradient(
      90deg,
      rgba(75, 52, 30, 0.2) 0,
      rgba(75, 52, 30, 0.2) 7px,
      rgba(108, 80, 52, 0.2) 7px,
      rgba(108, 80, 52, 0.2) 14px
    );
  color: #f0e6d0;
  font: 800 clamp(16px, 4.3vw, 22px)/1.1 "Book Antiqua", "Palatino Linotype", serif;
  letter-spacing: 0.02em;
  text-shadow: 0 1px 0 rgba(36, 22, 11, 0.7);
  box-shadow:
    inset 0 1px 0 rgba(238, 214, 172, 0.28),
    inset 0 -2px 0 rgba(52, 32, 18, 0.45);
  cursor: pointer;
}

#setting-phase-shift-btn:hover,
#setting-phase-shift-btn:focus-visible {
  outline: none;
  border-color: rgba(122, 175, 138, 0.94);
  box-shadow:
    inset 0 1px 0 rgba(238, 214, 172, 0.34),
    inset 0 -2px 0 rgba(52, 32, 18, 0.45),
    0 0 0 3px rgba(124, 219, 161, 0.2);
}

#setting-phase-shift-btn:active {
  transform: translateY(1px);
}

#setting-phase-shift-help {
  margin-top: 10px;
  color: rgba(240, 229, 206, 0.84);
  font: 700 13px/1.35 "Trebuchet MS", "Segoe UI", sans-serif;
}

#setting-sound-volume-value {
  margin-top: 12px;
  color: rgba(240, 229, 206, 0.92);
  font: 700 14px/1.2 "Trebuchet MS", "Segoe UI", sans-serif;
  letter-spacing: 0.02em;
}

#setting-sound-volume-range {
  width: 100%;
  margin-top: 8px;
  accent-color: #7ccf96;
}

#setting-music-volume-value {
  margin-top: 12px;
  color: rgba(240, 229, 206, 0.92);
  font: 700 14px/1.2 "Trebuchet MS", "Segoe UI", sans-serif;
  letter-spacing: 0.02em;
}

#setting-music-volume-range {
  width: 100%;
  margin-top: 8px;
  accent-color: #7ccf96;
}

#setting-wall-grid-value {
  margin-top: 12px;
  color: rgba(240, 229, 206, 0.92);
  font: 700 14px/1.2 "Trebuchet MS", "Segoe UI", sans-serif;
  letter-spacing: 0.02em;
}

#setting-wall-grid-range {
  width: 100%;
  margin-top: 8px;
  accent-color: #7ccf96;
}

@media (max-width: 560px) {
  #main-menu {
    padding: 10px;
  }

  #main-menu-shell {
    width: 96vw;
    padding: 12px 10px 14px;
    border-radius: 16px;
  }

  #main-menu-logo {
    margin: 0 10px 10px;
    min-height: 58px;
  }

  #main-menu-hero {
    margin: 0 8px 10px;
    height: 96px;
  }

  #main-menu-actions button,
  #menu-settings-back-btn {
    min-height: 70px;
  }
}

#game-over-panel {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(10, 11, 14, 0.62);
  backdrop-filter: blur(3px);
}

#game-over-panel.hidden {
  display: none;
}

#game-over-card {
  width: min(420px, 92vw);
  min-height: 400px;
  border: 2px solid rgba(110, 95, 74, 0.9);
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(46, 38, 28, 0.96), rgba(33, 27, 20, 0.96)),
    repeating-linear-gradient(
      90deg,
      rgba(63, 49, 34, 0.22) 0,
      rgba(63, 49, 34, 0.22) 8px,
      rgba(50, 40, 28, 0.12) 8px,
      rgba(50, 40, 28, 0.12) 17px
    );
  box-shadow:
    0 24px 56px rgba(0, 0, 0, 0.45),
    inset 0 0 0 1.5px rgba(190, 172, 143, 0.26),
    inset 0 18px 20px rgba(255, 232, 191, 0.05);
  padding: 18px 16px 14px;
  display: flex;
  flex-direction: column;
  position: relative;
}

#game-over-card::before,
#game-over-card::after {
  content: "";
  position: absolute;
  width: 28px;
  height: 28px;
  border: 2px solid rgba(112, 116, 119, 0.88);
  background: linear-gradient(135deg, rgba(84, 88, 92, 0.9), rgba(50, 54, 57, 0.9));
}

#game-over-card::before {
  top: 8px;
  left: 8px;
  clip-path: polygon(0 0, 100% 0, 0 100%);
}

#game-over-card::after {
  right: 8px;
  bottom: 8px;
  clip-path: polygon(100% 0, 100% 100%, 0 100%);
}

#game-over-title {
  font-weight: 900;
  font-size: clamp(28px, 7vw, 42px);
  color: #f2dfb8;
  text-align: center;
  margin-bottom: 14px;
  text-shadow: 0 8px 20px rgba(0, 0, 0, 0.42);
  opacity: 1;
  transform: scale(1) translateY(0);
}

#game-over-title.title-intro {
  animation: titleSlamIn 860ms cubic-bezier(0.2, 0.9, 0.2, 1.1) forwards;
}

@keyframes titleSlamIn {
  0% {
    opacity: 0;
    transform: scale(2.7) translateY(-32px);
    filter: blur(6px);
  }
  60% {
    opacity: 1;
    transform: scale(0.92) translateY(2px);
    filter: blur(0);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
    filter: blur(0);
  }
}

#result-sequence {
  display: grid;
  grid-template-rows: repeat(3, minmax(34px, 1fr));
  gap: 8px;
  margin-bottom: 10px;
}

.result-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  min-height: 34px;
}

.result-label {
  color: rgba(240, 229, 206, 0.9);
  font-size: 13px;
  letter-spacing: 0.04em;
}

.result-value {
  color: #f7eac8;
  font-weight: 800;
  font-size: 18px;
}

#score-counter {
  text-align: center;
  color: #f5e8c6;
  font-size: clamp(34px, 9vw, 56px);
  font-weight: 900;
  letter-spacing: 0.03em;
  margin-top: auto;
  margin-bottom: 12px;
  text-shadow: 0 6px 14px rgba(0, 0, 0, 0.38);
}

#score-counter.final-burst {
  animation: finalBurst 360ms cubic-bezier(0.17, 0.84, 0.26, 1.2);
}

@keyframes finalBurst {
  0% { transform: scale(0.82); filter: blur(2px); }
  58% { transform: scale(1.16); filter: blur(0); }
  100% { transform: scale(1); filter: blur(0); }
}

#result-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

#result-actions button {
  border: 0;
  border-radius: 10px;
  min-height: 46px;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
}

#restart-btn,
#exit-btn {
  border: 1px solid rgba(167, 214, 242, 0.58);
  background: linear-gradient(180deg, rgba(21, 53, 85, 0.96), rgba(15, 39, 66, 0.96));
  color: #f3f9ff;
}

#restart-btn {
  background:
    linear-gradient(180deg, rgba(138, 103, 64, 0.95), rgba(99, 72, 45, 0.95)),
    repeating-linear-gradient(
      90deg,
      rgba(75, 52, 30, 0.2) 0,
      rgba(75, 52, 30, 0.2) 7px,
      rgba(108, 80, 52, 0.2) 7px,
      rgba(108, 80, 52, 0.2) 14px
    );
  color: #f0e6d0;
  border: 2px solid rgba(96, 76, 54, 0.86);
  box-shadow:
    inset 0 1px 0 rgba(238, 214, 172, 0.28),
    inset 0 -2px 0 rgba(52, 32, 18, 0.45);
}

#exit-btn {
  background:
    linear-gradient(180deg, rgba(83, 87, 91, 0.96), rgba(58, 61, 65, 0.96));
  color: #efe6d0;
  border: 2px solid rgba(103, 108, 111, 0.9);
  box-shadow:
    inset 0 1px 0 rgba(205, 210, 214, 0.34),
    inset 0 -2px 0 rgba(24, 28, 33, 0.42);
}

#result-actions button:hover,
#result-actions button:focus-visible {
  outline: none;
  border-color: rgba(133, 188, 149, 0.94);
  box-shadow:
    inset 0 1px 0 rgba(238, 214, 172, 0.34),
    inset 0 -2px 0 rgba(52, 32, 18, 0.45),
    0 0 0 3px rgba(124, 219, 161, 0.2);
}

#result-actions button:active {
  transform: translateY(1px);
}

/* SLIME */

#slime-entity{
 position:fixed;
 left:0;
 top:0;
 width:26px;
 height:26px;
 pointer-events:none;
 transform-origin:center bottom;
 z-index:12;
 display:block;
 will-change: transform, left, top, width, height, filter;
 filter:
   drop-shadow(0 6px 10px rgba(12, 44, 28, 0.34))
   drop-shadow(0 0 10px rgba(145, 255, 196, 0.22));
}

.slime-core{
 position:absolute;
 inset:0;
 background: radial-gradient(circle at 40% 35%, rgba(190,255,220,0.85), rgba(120,230,170,0.55) 45%, rgba(80,200,140,0.35) 70%, rgba(50,160,110,0.2));
 border-radius:45% 55% 50% 50%;
 filter: blur(0.2px);
}

.slime-shine{
 position:absolute;
 width:60%;
 height:45%;
 left:18%;
 top:12%;
 background: radial-gradient(circle, rgba(255,255,255,0.55), rgba(255,255,255,0.0));
 border-radius:50%;
}

.slime-eyes{
 position:absolute;
 width:60%;
 height:35%;
 left:20%;
 top:35%;
 display:flex;
 justify-content:space-between;
}

.eye{
 width:6px;
 height:6px;
 background: rgba(20,40,30,0.45);
 border-radius:50%;
}

/* SLIME VISUAL OVERRIDES v4 */

.slime-core{
 position:absolute;
 inset:0;
 background:
  radial-gradient(ellipse at 50% 54%, rgba(138,244,181,.72) 0%, rgba(120,230,166,.58) 34%, rgba(90,208,146,.38) 60%, rgba(70,180,125,.22) 82%, rgba(60,160,114,.14) 100%),
  radial-gradient(circle at 34% 18%, rgba(255,255,255,.38), transparent 22%),
  radial-gradient(circle at 64% 66%, rgba(255,255,255,.10), transparent 18%),
  linear-gradient(180deg, rgba(168,255,206,.36), rgba(98,232,156,.24) 50%, rgba(30,122,78,.18) 78%, rgba(10,58,38,.16));
 border-radius:44% 44% 30% 30% / 72% 72% 28% 28%;
 box-shadow:
   inset 0 1px 0 rgba(255,255,255,.20),
   inset 0 -3px 6px rgba(0,0,0,.14),
   0 0 0 1px rgba(172,255,207,.36),
   0 0 0 2px rgba(20,80,51,.16);
 backdrop-filter: blur(1.2px);
 -webkit-backdrop-filter: blur(1.2px);
 overflow:hidden;
}

.slime-core::before{
 content:"";
 position:absolute;
 inset:14% 12% 18% 12%;
 border-radius:inherit;
 background:radial-gradient(ellipse at 50% 48%, rgba(176,255,201,.14), rgba(32,110,74,.08) 68%, rgba(18,72,45,.04));
 filter:blur(4px);
 opacity:.90;
}

.slime-core::after{
 content:"";
 position:absolute;
 left:10%;
 right:10%;
 bottom:5%;
 height:22%;
 border-radius:999px;
 background:linear-gradient(180deg, rgba(8,53,33,0), rgba(8,53,33,.20));
 filter:blur(3px);
 opacity:.88;
}

.slime-shine{
 position:absolute;
 left:18%;
 top:12%;
 width:28%;
 height:13%;
 border-radius:999px;
 background:rgba(255,255,255,.25);
 filter:blur(1px);
 opacity:.78;
}

.slime-eyes{
 position:absolute;
 width:34%;
 height:18%;
 left:33%;
 top:45%;
 filter:none;
 opacity:.98;
}

.eye{
 position:absolute;
 width:26%;
 height:100%;
 border-radius:52% 52% 70% 70% / 40% 40% 60% 60%;
 background:linear-gradient(180deg, rgba(22,76,54,.34), rgba(8,25,17,.44));
 box-shadow:
   0 0 0 1px rgba(186,255,209,.22),
   0 0 4px rgba(12,38,26,.24);
}
.eye-left{left:12%}
.eye-right{right:12%}

.slime-burst-layer{
 position:absolute;
 inset:0;
 pointer-events:none;
 overflow:visible;
}

.slime-chunk{
 position:absolute;
 border-radius:46% 54% 58% 42% / 52% 48% 56% 44%;
 background:
   radial-gradient(circle at 34% 22%, rgba(255,255,255,.28), transparent 28%),
   linear-gradient(180deg, rgba(166,255,206,.56), rgba(102,236,160,.34) 56%, rgba(24,100,64,.20));
 box-shadow:
   inset 0 1px 0 rgba(255,255,255,.20),
   0 0 0 1px rgba(170,255,206,.26),
   0 0 8px rgba(122,255,188,.22);
 transform-origin:center center;
}

.slime-chunk.eye-chunk{
 border-radius:50%;
 background: radial-gradient(circle at 36% 30%, rgba(140,210,175,.26), rgba(18,46,34,.94) 72%);
 box-shadow:
   0 0 0 1px rgba(170,255,210,.16),
   0 0 6px rgba(120,255,190,.20);
}

/* SIMPLE UI PASS (temporary) */

#main-menu {
  background: rgba(7, 18, 32, 0.58);
  backdrop-filter: blur(8px);
}

#main-menu-shell {
  width: min(520px, 94vw);
  border-radius: 16px;
  border: 1px solid rgba(154, 201, 233, 0.48);
  background: linear-gradient(180deg, rgba(16, 36, 61, 0.94), rgba(25, 61, 96, 0.9));
  box-shadow: 0 24px 48px rgba(5, 10, 20, 0.5);
  padding: 16px 14px 18px;
}

#main-menu-shell::before,
#main-menu-shell::after,
#main-menu-logo::before,
#main-menu-logo::after {
  display: none;
}

#main-menu-logo {
  margin: 0 0 16px;
  border: 0;
  border-radius: 12px;
  min-height: 72px;
  padding: 14px 18px 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(8, 20, 34, 0.45);
  color: #f3f9ff;
  font: 400 clamp(42px, 9vw, 66px)/1 "Bangers", cursive;
  letter-spacing: 0.06em;
  text-shadow: 0 3px 0 rgba(7, 13, 21, 0.7), 0 0 14px rgba(151, 209, 255, 0.22);
  box-shadow: inset 0 0 0 1px rgba(167, 214, 242, 0.3);
}

#main-menu-hero {
  display: none;
}

#main-menu-actions {
  padding: 0;
  gap: 10px;
}

#main-menu-actions button,
#menu-settings-back-btn,
#menu-hall-back-btn,
#setting-phase-shift-btn {
  min-height: 58px;
  border-radius: 10px;
  border: 1px solid rgba(169, 215, 242, 0.56);
  background: linear-gradient(180deg, rgba(23, 55, 88, 0.96), rgba(16, 42, 70, 0.96));
  color: #f3f8ff;
  font: 400 clamp(28px, 6vw, 40px)/1 "Bangers", cursive;
  letter-spacing: 0.05em;
  text-shadow: 0 2px 0 rgba(6, 14, 23, 0.7);
  box-shadow: inset 0 1px 0 rgba(219, 241, 255, 0.2);
}

#main-menu-actions button:hover,
#main-menu-actions button:focus-visible,
#menu-settings-back-btn:hover,
#menu-settings-back-btn:focus-visible,
#menu-hall-back-btn:hover,
#menu-hall-back-btn:focus-visible,
#setting-phase-shift-btn:hover,
#setting-phase-shift-btn:focus-visible {
  border-color: rgba(200, 233, 255, 0.82);
  box-shadow:
    inset 0 1px 0 rgba(219, 241, 255, 0.26),
    0 0 0 2px rgba(180, 223, 255, 0.22);
  transform: translateY(-1px);
}

#main-menu-settings-title {
  color: #ecf6ff;
  font: 400 clamp(34px, 7vw, 48px)/1 "Bangers", cursive;
  margin-bottom: 10px;
  letter-spacing: 0.05em;
}

#main-menu-settings-list {
  border: 1px solid rgba(149, 197, 228, 0.45);
  background: rgba(9, 26, 43, 0.38);
}

#main-menu-view-hall {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

#hall-of-fame-list {
  border: 1px solid rgba(149, 197, 228, 0.45);
  background: rgba(9, 26, 43, 0.38);
  border-radius: 10px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.hall-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 34px;
  border-radius: 8px;
  border: 1px solid rgba(160, 208, 236, 0.28);
  background: rgba(8, 20, 33, 0.36);
  padding: 4px 10px;
}

.hall-label {
  color: rgba(226, 244, 255, 0.9);
  font: 400 22px/1 "Bangers", cursive;
  letter-spacing: 0.03em;
}

.hall-value {
  color: #f8feff;
  font: 400 24px/1 "Bangers", cursive;
  letter-spacing: 0.04em;
}

#setting-phase-shift-help {
  color: rgba(228, 244, 255, 0.88);
  font: 400 18px/1.1 "Bangers", cursive;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

#setting-sound-volume-value {
  margin-top: 12px;
  color: rgba(228, 244, 255, 0.94);
  font: 400 22px/1 "Bangers", cursive;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

#setting-sound-volume-range {
  margin-top: 8px;
}

#setting-music-volume-value {
  margin-top: 12px;
  color: rgba(228, 244, 255, 0.94);
  font: 400 22px/1 "Bangers", cursive;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

#setting-music-volume-range {
  margin-top: 8px;
}

#setting-wall-grid-value {
  margin-top: 12px;
  color: rgba(228, 244, 255, 0.94);
  font: 400 22px/1 "Bangers", cursive;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

#setting-wall-grid-range {
  margin-top: 8px;
}

#game-over-panel {
  background: rgba(7, 16, 28, 0.66);
  backdrop-filter: blur(6px);
}

#game-over-card {
  width: min(440px, 92vw);
  border-radius: 16px;
  border: 1px solid rgba(158, 205, 238, 0.5);
  background: linear-gradient(180deg, rgba(14, 35, 57, 0.95), rgba(20, 52, 82, 0.92));
  box-shadow: 0 24px 52px rgba(5, 12, 24, 0.6);
  padding: 16px 14px 14px;
}

#game-over-card::before,
#game-over-card::after {
  display: none;
}

#game-over-title {
  color: #f1f8ff;
  font: 400 clamp(54px, 11vw, 84px)/0.95 "Bangers", cursive;
  letter-spacing: 0.05em;
  margin-bottom: 10px;
  padding: 10px 0 12px;
  text-align: center;
  text-shadow: 0 4px 0 rgba(9, 17, 28, 0.72), 0 0 14px rgba(165, 216, 255, 0.2);
}

#result-breakdown {
  display: grid;
  gap: 8px;
  margin-bottom: 8px;
  justify-items: center;
  text-align: center;
  width: 100%;
}

.result-breakdown-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  width: min(360px, 92%);
  column-gap: 12px;
  opacity: 0;
  transform: scale(0.84);
  transition: transform 160ms cubic-bezier(0.2, 0.9, 0.2, 1.08), opacity 130ms ease;
}

.result-breakdown-row.show {
  opacity: 1;
  transform: scale(1);
}

.result-label {
  color: rgba(234, 247, 255, 0.9);
  font: 400 26px/1 "Bangers", cursive;
  letter-spacing: 0.05em;
  text-align: right;
  justify-self: end;
}

.result-value {
  color: #f6fcff;
  font: 400 30px/1 "Bangers", cursive;
  letter-spacing: 0.04em;
  text-align: left;
  justify-self: start;
}

#score-counter {
  color: #f7fcff;
  font: 400 clamp(72px, 14vw, 118px)/0.9 "Bangers", cursive;
  letter-spacing: 0.05em;
  margin-bottom: 10px;
  padding: 14px 0 18px;
  text-align: center;
  opacity: 0;
  transform: scale(0.82);
}

#score-counter.show {
  opacity: 1;
  transform: scale(1);
}

#result-actions button {
  min-height: 50px;
  border-radius: 10px;
  border: 1px solid rgba(167, 214, 242, 0.58);
  background: linear-gradient(180deg, rgba(21, 53, 85, 0.96), rgba(15, 39, 66, 0.96));
  color: #f3f9ff;
  font: 400 34px/1 "Bangers", cursive;
  letter-spacing: 0.05em;
  box-shadow: inset 0 1px 0 rgba(214, 238, 255, 0.2);
}

#result-actions button:hover,
#result-actions button:focus-visible {
  border-color: rgba(198, 232, 255, 0.8);
  box-shadow:
    inset 0 1px 0 rgba(214, 238, 255, 0.24),
    0 0 0 2px rgba(165, 213, 245, 0.2);
}