*, *::before, *::after { box-sizing: border-box; }

:root {
  --sand: #f0d9a4;
  --sand-dark: #c9a870;
  --jungle: #123a24;
  --jungle-dark: #07180f;
  --orange: #ff8b1f;
  --orange-dark: #b4500a;
  --wood: #7d4a22;
  --wood-light: #b3763c;
  --sky: #7fd4ff;
}

html, body {
  margin: 0;
  height: 100%;
  background: #05100a;
  color: #fff;
  font-family: "Trebuchet MS", "Segoe UI", system-ui, sans-serif;
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
}

#app { position: relative; width: 100%; height: 100%; }

.screen {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
}
.screen.is-active { display: flex; }

.bg-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

.menu-wrap {
  position: relative;
  z-index: 2;
  text-align: center;
  padding: 24px;
  user-select: none;
}

.logo {
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 0.85;
  margin-bottom: 44px;
  animation: logo-bob 4s ease-in-out infinite;
  filter: drop-shadow(0 8px 0 rgba(0, 0, 0, 0.45));
}
.logo-crash {
  font: 900 clamp(46px, 11vw, 104px) / 1 "Arial Black", Impact, system-ui, sans-serif;
  letter-spacing: 0.06em;
  color: #ffd23f;
  -webkit-text-stroke: 4px #6b2a00;
  text-shadow: 0 4px 0 #6b2a00, 0 8px 0 rgba(0, 0, 0, 0.35);
  transform: skewX(-6deg);
}
.logo-bandicoot {
  margin-top: 8px;
  font: 900 clamp(22px, 5.2vw, 50px) / 1 "Arial Black", Impact, system-ui, sans-serif;
  letter-spacing: 0.34em;
  color: #ff7a1a;
  -webkit-text-stroke: 3px #5c1d00;
  text-shadow: 0 3px 0 #5c1d00;
  transform: skewX(-6deg);
}
@keyframes logo-bob {
  0%, 100% { transform: translateY(0) rotate(-0.4deg); }
  50% { transform: translateY(-10px) rotate(0.4deg); }
}

.menu-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; justify-content: center; }

.menu-item {
  position: relative;
  min-width: 320px;
  padding: 12px 46px;
  font: 800 clamp(18px, 2.6vw, 26px) / 1 "Trebuchet MS", system-ui, sans-serif;
  letter-spacing: 0.16em;
  color: #ffe9c0;
  background: linear-gradient(#8a5527, #5d3413);
  border: 4px solid #33210c;
  border-radius: 8px;
  box-shadow: inset 0 3px 0 rgba(255, 255, 255, 0.18), 0 6px 0 rgba(0, 0, 0, 0.4);
  cursor: pointer;
  transition: transform 0.12s ease, color 0.12s ease;
}
.menu-item.is-selected {
  color: #fff;
  transform: scale(1.06);
  background: linear-gradient(#b8722f, #7c451a);
}
.menu-item.is-selected::before {
  content: "";
  position: absolute;
  left: 14px;
  top: 50%;
  width: 20px;
  height: 20px;
  margin-top: -10px;
  border-radius: 60% 60% 55% 55%;
  background: radial-gradient(circle at 35% 30%, #ff6a5a, #b81f16 70%);
  box-shadow: 0 0 0 2px #2c0b06 inset;
  animation: cursor-bob 0.9s ease-in-out infinite;
}
.menu-item.is-selected::after {
  content: "";
  position: absolute;
  right: 14px;
  top: 50%;
  width: 20px;
  height: 20px;
  margin-top: -10px;
  border-radius: 60% 60% 55% 55%;
  background: radial-gradient(circle at 35% 30%, #ff6a5a, #b81f16 70%);
  box-shadow: 0 0 0 2px #2c0b06 inset;
  animation: cursor-bob 0.9s ease-in-out infinite;
}
@keyframes cursor-bob {
  0%, 100% { transform: translateY(-3px); }
  50% { transform: translateY(3px); }
}

.hint { margin-top: 26px; font-size: 14px; letter-spacing: 0.12em; color: #cfe8cf; opacity: 0.75; }

.panel {
  position: relative;
  z-index: 3;
  width: min(440px, 92vw);
  padding: 26px 28px;
  background: rgba(9, 26, 16, 0.94);
  border: 4px solid #2f6b45;
  border-radius: 14px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.5);
}
.panel h2 {
  margin: 0 0 18px;
  font: 900 26px/1 "Arial Black", Impact, sans-serif;
  letter-spacing: 0.2em;
  color: #ffd23f;
  text-align: center;
}
.panel h3 { margin: 22px 0 8px; font-size: 15px; letter-spacing: 0.18em; color: #9fd6ae; }
.panel .row { display: flex; align-items: center; justify-content: space-between; padding: 8px 0; font-weight: 700; letter-spacing: 0.1em; }
.keys { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: 14px; color: #dff0e2; }
.keys b { color: #ffd23f; }

.toggle {
  min-width: 74px;
  padding: 6px 12px;
  font: 800 13px/1 "Trebuchet MS", sans-serif;
  letter-spacing: 0.12em;
  color: #0d2a19;
  background: #ffd23f;
  border: 3px solid #7a5a10;
  border-radius: 6px;
  cursor: pointer;
}
.toggle.is-off { background: #6d8a76; color: #12200f; border-color: #33473a; }

.back, .btn {
  display: block;
  width: 100%;
  margin-top: 18px;
  padding: 12px;
  font: 800 16px/1 "Trebuchet MS", sans-serif;
  letter-spacing: 0.16em;
  color: #fff;
  background: linear-gradient(#3f8f5b, #235c38);
  border: 3px solid #123a24;
  border-radius: 8px;
  cursor: pointer;
}
.back:hover, .btn:hover { filter: brightness(1.12); }

.pass-slots { display: flex; gap: 10px; justify-content: center; }
.pass-slots span {
  width: 56px;
  height: 64px;
  background: repeating-linear-gradient(45deg, #1c4a2e, #1c4a2e 8px, #174027 8px, #174027 16px);
  border: 3px solid #2f6b45;
  border-radius: 8px;
}
.muted { margin: 16px 0 0; font-size: 13px; text-align: center; color: #a9c8b3; }

.stage {
  position: relative;
  width: min(100vw, 1280px);
  aspect-ratio: 16 / 9;
  max-height: 100vh;
  margin: auto;
  background: #000;
  overflow: hidden;
}
#game { width: 100%; height: 100%; display: block; image-rendering: auto; }

.overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(4, 14, 9, 0.72);
  backdrop-filter: blur(2px);
}
.overlay[hidden] { display: none; }

.card {
  width: min(420px, 84%);
  padding: 28px;
  text-align: center;
  background: rgba(10, 30, 19, 0.96);
  border: 4px solid #2f6b45;
  border-radius: 16px;
}
.card h2 {
  margin: 0 0 16px;
  font: 900 28px/1 "Arial Black", Impact, sans-serif;
  letter-spacing: 0.2em;
  color: #ffd23f;
}
.stats { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 6px; font-size: 15px; letter-spacing: 0.08em; }
.stats li span { color: #ffd23f; font-weight: 800; }

.touch { position: absolute; inset: auto 0 0 0; display: none; justify-content: space-between; padding: 12px; gap: 10px; }
.tbtn {
  flex: 1;
  padding: 18px 0;
  font: 800 16px/1 "Trebuchet MS", sans-serif;
  color: #fff;
  background: rgba(255, 255, 255, 0.14);
  border: 2px solid rgba(255, 255, 255, 0.35);
  border-radius: 12px;
  user-select: none;
  touch-action: none;
}
.tbtn:active { background: rgba(255, 255, 255, 0.3); }

@media (pointer: coarse) {
  .touch { display: flex; }
  .hint { display: none; }
}