:root {
  --bg: #17130f;
  --panel: #251e18;
  --panel2: #33281f;
  --text: #fff5e7;
  --muted: #cdbca4;
  --accent: #ffb347;
  --good: #64d37b;
  --bad: #ff6b6b;
  --shadow: rgba(0,0,0,.35);
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
body {
  margin: 0;
  min-height: 100svh;
  background: #17130f;
  color: var(--text);
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  display: flex;
  align-items: stretch;
  justify-content: center;
  padding: env(safe-area-inset-top) 14px env(safe-area-inset-bottom);
}
.caveBackdrop {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  background:
    linear-gradient(rgba(20,15,11,.32), rgba(20,15,11,.72)),
    url("assets/cave-paintings.svg") center / cover no-repeat,
    radial-gradient(circle at 20% 0%, #4b3425, var(--bg) 48%);
}
.caveBackdrop::before {
  content: "";
  position: absolute;
  inset: -12%;
  background:
    radial-gradient(ellipse at 15% 35%, rgba(0,0,0,.36) 0 13%, transparent 34%),
    radial-gradient(ellipse at 90% 65%, rgba(0,0,0,.42) 0 16%, transparent 38%);
  animation: caveShadows 14s ease-in-out infinite alternate;
}
.caveBackdrop::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -38vh;
  width: min(900px, 150vw);
  height: 90vh;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(255,139,42,.42), rgba(218,76,20,.13) 38%, transparent 70%);
  transform: translateX(-50%);
  mix-blend-mode: screen;
  animation: firelight 4.5s ease-in-out infinite alternate;
}
main { position: relative; z-index: 1; width: min(560px, 100%); display: flex; flex-direction: column; gap: 14px; padding: 14px 0; }
.card {
  background: linear-gradient(180deg, var(--panel), #1f1914);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 24px;
  box-shadow: 0 18px 40px var(--shadow);
  padding: 18px;
}
h1, h2, p { margin: 0; }
h1 { font-size: clamp(28px, 8vw, 42px); line-height: 1; }
h2 { font-size: 20px; color: var(--accent); }
p { color: var(--muted); line-height: 1.45; }
.setupHero { display: grid; grid-template-columns: 1fr minmax(120px, 42%); gap: 12px; align-items: center; }
.setupClub { width: 100%; transform: rotate(-8deg); filter: drop-shadow(0 12px 10px rgba(0,0,0,.35)); }
.row { display: flex; gap: 10px; align-items: center; }
.between { justify-content: space-between; }
.grid { display: grid; gap: 10px; }
.scores { grid-template-columns: 1fr 1fr; }
.scoreBox {
  background: var(--panel2);
  border-radius: 18px;
  padding: 12px;
  border: 2px solid transparent;
}
.scoreBox.active { border-color: var(--accent); }
.scoreName { color: var(--muted); font-size: 14px; }
.scoreValue { font-size: 34px; font-weight: 900; }
button, input, select {
  width: 100%;
  border: 0;
  border-radius: 18px;
  padding: 15px 16px;
  font: inherit;
  font-weight: 800;
}
button { color: #241407; background: var(--accent); cursor: pointer; box-shadow: 0 8px 0 #a86618; }
button:active { transform: translateY(4px); box-shadow: 0 4px 0 #a86618; }
button.secondary { background: #594638; color: var(--text); box-shadow: 0 8px 0 #30261f; }
button.good { background: var(--good); box-shadow: 0 8px 0 #2a7f3d; }
button.bad { background: var(--bad); box-shadow: 0 8px 0 #9b2e2e; color: #fff; }
input, select { background: #120f0c; color: var(--text); border: 1px solid rgba(255,255,255,.12); font-weight: 650; }
label { color: var(--muted); font-size: 14px; font-weight: 750; display: grid; gap: 6px; }
.word {
  min-height: 210px;
  display: grid;
  place-items: center;
  text-align: center;
  background: #fff1d6;
  color: #2a170a;
  border-radius: 26px;
  padding: 22px;
  box-shadow: inset 0 -10px 0 rgba(0,0,0,.09);
  user-select: none;
}
.word span { font-size: clamp(40px, 12vw, 70px); font-weight: 1000; letter-spacing: -.04em; }
.timer { font-size: clamp(44px, 14vw, 82px); font-weight: 1000; line-height: 1; }
.phase { color: var(--accent); font-weight: 900; text-transform: uppercase; letter-spacing: .08em; font-size: 13px; }
.hidden { display: none !important; }
.tiny { font-size: 13px; }
.actions { grid-template-columns: 1fr 1fr; }
.full { grid-column: 1 / -1; }
.shake { animation: shake .35s ease-in-out; }
.modeOptions { grid-template-columns: 1fr 1fr; }
.modeOption {
  display: grid;
  gap: 5px;
  padding: 14px;
  border: 2px solid transparent;
  border-radius: 18px;
  background: var(--panel2);
  color: var(--text);
  box-shadow: none;
  text-align: left;
}
.modeOption.active { border-color: var(--accent); background: #443326; }
.modeOption strong { font-size: 17px; }
.modeOption span { color: var(--muted); font-size: 12px; font-weight: 650; }
.modeOption:active { transform: none; box-shadow: none; }
.photoSetup { gap: 12px; }
.photoGrid { grid-template-columns: 1fr 1fr; }
.photoPicker {
  display: grid;
  gap: 8px;
  padding: 12px;
  border-radius: 18px;
  background: var(--panel2);
  text-align: center;
}
.photoPreview {
  width: 88px;
  height: 88px;
  margin: auto;
  border: 3px solid var(--accent);
  border-radius: 50%;
  background: #120f0c;
  object-fit: cover;
}
.photoPicker button { padding: 10px; font-size: 13px; box-shadow: 0 5px 0 #a86618; }
.soundSetup { gap: 12px; }
.soundGrid { grid-template-columns: 1fr 1fr; }
.soundPicker {
  display: grid;
  gap: 8px;
  padding: 12px;
  border-radius: 18px;
  background: var(--panel2);
}
.soundPicker.recording { outline: 2px solid var(--bad); }
.soundStatus { min-height: 34px; color: var(--muted); font-size: 12px; font-weight: 650; }
.soundActions { grid-template-columns: 1fr 1fr; }
.soundActions button { padding: 10px 8px; font-size: 12px; box-shadow: 0 5px 0 #a86618; }
.soundActions button:first-child { grid-column: 1 / -1; }
.soundActions button.secondary { box-shadow: 0 5px 0 #30261f; }
.soundActions button:disabled { cursor: default; opacity: .45; transform: none; box-shadow: none; }
.soundError { color: var(--bad); }
.cameraOverlay {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: grid;
  place-items: center;
  padding: 16px;
  background: rgba(0,0,0,.82);
}
.cameraCard { width: min(480px, 100%); }
.cameraPreview { width: 100%; max-height: 58svh; border-radius: 20px; background: #000; object-fit: cover; transform: scaleX(-1); }
.cameraActions { grid-template-columns: 1fr 1fr; }
.clubOverlay {
  position: fixed;
  inset: 0;
  z-index: 10;
  display: grid;
  place-items: center;
  background: rgba(23, 19, 15, .72);
  pointer-events: none;
}
.effectStage { position: relative; width: min(520px, 100vw); height: min(520px, 100svh); }
.effectPhoto {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 1;
  width: min(230px, 58vw);
  aspect-ratio: 1;
  border: 8px solid #fff1d6;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 18px 50px rgba(0,0,0,.55);
  transform: translate(-50%, -50%);
}
.effectFallback { position: absolute; z-index: 1; left: 50%; top: 50%; width: min(190px, 48vw); aspect-ratio: 1; transform: translate(-50%, -50%); display: grid; place-items: center; border: 8px solid #fff1d6; border-radius: 50%; background: #d98b52; font-size: min(105px, 27vw); box-shadow: 0 18px 50px rgba(0,0,0,.55); }
.clubEffect { position: absolute; left: 50%; top: 50%; z-index: 4; width: min(330px, 78vw); transform-origin: 12% 75%; opacity: 0; }
.clubCaption { position: absolute; left: 50%; top: 50%; z-index: 6; font-size: clamp(32px, 11vw, 64px); font-weight: 1000; line-height: .85; color: var(--accent); text-align: center; white-space: pre-line; text-shadow: 0 5px 0 #6f3b0e; opacity: 0; }
.effectBurst, .effectRing, .effectDust, .effectStars, .effectCombo { position: absolute; pointer-events: none; opacity: 0; }
.effectBurst { left: 50%; top: 50%; z-index: 2; width: min(300px, 72vw); aspect-ratio: 1; background: #ffe56b; clip-path: polygon(50% 0,60% 31%,83% 8%,75% 39%,100% 42%,77% 56%,94% 84%,65% 69%,60% 100%,47% 72%,22% 96%,32% 63%,0 55%,29% 43%,9% 17%,40% 32%); }
.effectRing { left: 50%; top: 50%; z-index: 3; width: 80px; aspect-ratio: 1; border: 12px solid #fff1d6; border-radius: 50%; }
.effectDust { z-index: 5; left: 10%; right: 10%; bottom: 18%; height: 80px; border-radius: 50%; background: radial-gradient(ellipse, #c19772 0 25%, transparent 26%), radial-gradient(ellipse at 25% 70%, #8e694e 0 24%, transparent 25%), radial-gradient(ellipse at 75% 65%, #b78b67 0 24%, transparent 25%); }
.effectStars { left: 50%; top: 20%; z-index: 5; color: #ffe56b; font-size: clamp(28px, 9vw, 52px); font-weight: 1000; letter-spacing: 15px; white-space: nowrap; }
.effectStars::before { content: "★ ✦ ★"; }
.effectCombo { inset: 0; z-index: 5; }
.effectCombo::before, .effectCombo::after { position: absolute; color: #fff1d6; font-size: clamp(27px, 8vw, 42px); font-weight: 1000; text-shadow: 0 4px #6f3b0e; }
.effectCombo::before { content: "BOP!"; left: 8%; top: 25%; transform: rotate(-12deg); }
.effectCombo::after { content: "BAM!"; right: 7%; top: 38%; transform: rotate(10deg); }
@keyframes shake { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-7px)} 75%{transform:translateX(7px)} }
.effect-classic .clubEffect { animation: classicClub 2s ease-out both; }
.effect-classic .effectTarget { animation: classicTarget 2s ease-out both; }
.effect-classic .clubCaption { animation: classicCaption 2s ease-out both; }
.effect-classic .effectRing { animation: effectRing 2s ease-out both; }
.effect-comic .clubEffect { animation: comicClub 2s ease-out both; }
.effect-comic .effectTarget { animation: comicTarget 2s ease-out both; }
.effect-comic .clubCaption { animation: comicCaption 2s ease-out both; color: #ff6b6b; }
.effect-comic .effectBurst { animation: effectBurst 2s ease-out both; }
.effect-smash { animation: smashStage 2s ease-out both; }
.effect-smash .clubEffect { animation: smashClub 2s ease-out both; }
.effect-smash .effectTarget { animation: smashTarget 2s ease-out both; }
.effect-smash .clubCaption { animation: smashCaption 2s ease-out both; }
.effect-smash .effectDust { animation: effectDust 2s ease-out both; }
.effect-dizzy .clubEffect { animation: dizzyClub 2s ease-out both; }
.effect-dizzy .effectTarget { animation: dizzyTarget 2s ease-out both; }
.effect-dizzy .clubCaption { animation: dizzyCaption 2s ease-out both; }
.effect-dizzy .effectStars { animation: effectStars 2s ease-in-out both; }
.effect-pinball .clubEffect { animation: pinballClub 2s ease-out both; }
.effect-pinball .effectTarget { animation: pinballTarget 2s ease-out both; }
.effect-pinball .clubCaption { animation: pinballCaption 2s ease-out both; }
.effect-pinball .effectRing { animation: pinballRing 2s ease-out both; }
.effect-combo .clubEffect { animation: comboClub 2s linear both; }
.effect-combo .effectTarget { animation: comboTarget 2s linear both; }
.effect-combo .clubCaption { animation: comboCaption 2s ease-out both; color: #ffe56b; }
.effect-combo .effectBurst { animation: comboBurst 2s ease-out both; }
.effect-combo .effectCombo { animation: comboWords 2s linear both; }
@keyframes classicClub { 0%,15%{opacity:0;transform:translate(120px,-190px) rotate(80deg)} 20%{opacity:1} 42%{opacity:1;transform:translate(-150px,-70px) rotate(-28deg)} 55%,100%{opacity:0;transform:translate(-165px,-55px) rotate(-20deg)} }
@keyframes classicTarget { 0%,38%,100%{transform:translate(-50%,-50%)} 45%{transform:translate(-50%,-45%) rotate(-8deg) scale(1.18,.72)} 65%{transform:translate(-50%,-52%) rotate(4deg) scale(.94,1.08)} }
@keyframes classicCaption { 0%,38%{opacity:0;transform:translate(-50%,-50%) scale(.2)} 48%,72%{opacity:1;transform:translate(-50%,-185%) scale(1.2) rotate(-5deg)} 100%{opacity:0;transform:translate(-50%,-220%) scale(.8)} }
@keyframes effectRing { 0%,39%{opacity:0;transform:translate(-50%,-50%) scale(.2)} 47%{opacity:1} 75%,100%{opacity:0;transform:translate(-50%,-50%) scale(5)} }
@keyframes comicClub { 0%,13%{opacity:0;transform:translate(145px,-150px) rotate(100deg)} 18%{opacity:1} 40%{opacity:1;transform:translate(-150px,-65px) rotate(-35deg)} 53%,100%{opacity:0;transform:translate(-165px,-50px) rotate(-25deg)} }
@keyframes comicTarget { 0%,37%,100%{transform:translate(-50%,-50%)} 45%{transform:translate(-50%,-50%) rotate(-14deg) scale(.8,1.18)} 65%{transform:translate(-50%,-50%) rotate(7deg) scale(1.07,.94)} }
@keyframes comicCaption { 0%,36%{opacity:0;transform:translate(-50%,-50%) scale(.1) rotate(-18deg)} 48%,76%{opacity:1;transform:translate(-50%,-180%) scale(1.15) rotate(-6deg)} 100%{opacity:0;transform:translate(-50%,-215%) scale(.7)} }
@keyframes effectBurst { 0%,36%{opacity:0;transform:translate(-50%,-50%) scale(.1)} 47%{opacity:1;transform:translate(-50%,-50%) scale(1.25) rotate(12deg)} 100%{opacity:0;transform:translate(-50%,-50%) scale(1.6) rotate(25deg)} }
@keyframes smashStage { 0%,38%,60%,100%{transform:translate(0)} 42%{transform:translate(-9px,6px)} 46%{transform:translate(8px,-5px)} 50%{transform:translate(-5px,3px)} }
@keyframes smashClub { 0%,14%{opacity:0;transform:translate(-160px,-250px) rotate(-70deg)} 19%{opacity:1} 42%{opacity:1;transform:translate(-150px,-70px) rotate(3deg)} 55%,100%{opacity:0;transform:translate(-150px,-55px) rotate(6deg)} }
@keyframes smashTarget { 0%,38%,100%{transform:translate(-50%,-50%)} 45%{transform:translate(-50%,-28%) scale(1.2,.55)} 67%{transform:translate(-50%,-49%) scale(.97,1.04)} }
@keyframes smashCaption { 0%,39%{opacity:0;transform:translate(-50%,-50%) scale(2)} 48%,72%{opacity:1;transform:translate(-50%,-190%) scale(1)} 100%{opacity:0;transform:translate(-50%,-220%)} }
@keyframes effectDust { 0%,39%{opacity:0;transform:translateY(50px) scale(.6)} 50%{opacity:1;transform:translateY(0) scale(1.2)} 100%{opacity:0;transform:translateY(-35px) scale(1.5)} }
@keyframes dizzyClub { 0%,14%{opacity:0;transform:translate(-300px,-100px) rotate(-100deg)} 19%{opacity:1} 40%{opacity:1;transform:translate(-145px,-70px) rotate(15deg)} 55%,100%{opacity:0;transform:translate(100px,-130px) rotate(100deg)} }
@keyframes dizzyTarget { 0%,38%,100%{transform:translate(-50%,-50%)} 47%{transform:translate(-50%,-50%) rotate(17deg)} 60%{transform:translate(-50%,-50%) rotate(-12deg)} 73%{transform:translate(-50%,-50%) rotate(7deg)} 86%{transform:translate(-50%,-50%) rotate(-3deg)} }
@keyframes dizzyCaption { 0%,37%{opacity:0;transform:translate(-50%,-50%) scale(.2)} 48%,66%{opacity:1;transform:translate(-50%,-190%) rotate(8deg)} 100%{opacity:0;transform:translate(-50%,-225%) rotate(-7deg)} }
@keyframes effectStars { 0%,39%{opacity:0;transform:translateX(-50%) rotate(0) scale(.5)} 50%,84%{opacity:1} 90%{transform:translateX(-50%) rotate(350deg) scale(1)} 100%{opacity:0;transform:translateX(-50%) rotate(430deg)} }
@keyframes pinballClub { 0%,12%{opacity:0;transform:translate(145px,-160px) rotate(100deg)} 18%{opacity:1} 32%{opacity:1;transform:translate(-145px,-70px) rotate(-30deg)} 44%,100%{opacity:0;transform:translate(-160px,-60px) rotate(-20deg)} }
@keyframes pinballTarget { 0%,29%{transform:translate(-50%,-50%)} 39%{transform:translate(35%,-105%) rotate(22deg) scale(.72)} 53%{transform:translate(-145%,5%) rotate(-20deg) scale(.68)} 68%{transform:translate(5%,-20%) rotate(14deg) scale(.78)} 82%{transform:translate(-90%,-75%) rotate(-8deg) scale(.9)} 100%{transform:translate(-50%,-50%)} }
@keyframes pinballCaption { 0%,29%{opacity:0;transform:translate(-50%,-50%) scale(.2)} 40%{opacity:1;transform:translate(40%,-210%) rotate(10deg)} 57%{transform:translate(-180%,10%) rotate(-9deg)} 78%{transform:translate(-20%,-180%) rotate(5deg)} 100%{opacity:0;transform:translate(-50%,-220%)} }
@keyframes pinballRing { 0%,28%{opacity:0;transform:translate(-50%,-50%) scale(.2)} 40%{opacity:1;transform:translate(50%,-90%) scale(1)} 75%{opacity:.7;transform:translate(-150%,45%) scale(1.8)} 100%{opacity:0;transform:translate(-50%,-50%) scale(3)} }
@keyframes comboClub { 0%,6%{opacity:0;transform:translate(140px,-150px) rotate(90deg)} 10%,21%{opacity:1;transform:translate(-145px,-70px) rotate(-28deg)} 25%{opacity:0} 31%{opacity:1;transform:translate(-290px,-110px) rotate(-100deg)} 44%{opacity:1;transform:translate(-135px,-75px) rotate(15deg)} 49%{opacity:0} 56%{opacity:1;transform:translate(130px,-220px) rotate(75deg) scale(1.15)} 72%{opacity:1;transform:translate(-160px,-70px) rotate(-32deg) scale(1.15)} 82%,100%{opacity:0} }
@keyframes comboTarget { 0%,19%,35%,57%,100%{transform:translate(-50%,-50%)} 24%{transform:translate(-58%,-50%) rotate(-9deg)} 47%{transform:translate(-42%,-50%) rotate(10deg)} 73%{transform:translate(-50%,-43%) scale(1.18,.68)} 86%{transform:translate(-50%,-53%) scale(.94,1.06)} }
@keyframes comboCaption { 0%,65%{opacity:0;transform:translate(-50%,-50%) scale(.1)} 75%,88%{opacity:1;transform:translate(-50%,-190%) scale(1.15) rotate(-5deg)} 100%{opacity:0;transform:translate(-50%,-225%) scale(.8)} }
@keyframes comboBurst { 0%,67%{opacity:0;transform:translate(-50%,-50%) scale(.1)} 76%{opacity:1;transform:translate(-50%,-50%) scale(1.3) rotate(14deg)} 100%{opacity:0;transform:translate(-50%,-50%) scale(1.7) rotate(25deg)} }
@keyframes comboWords { 0%,18%{opacity:0} 22%,30%{opacity:1} 34%,41%{opacity:0} 45%,53%{opacity:1} 57%,100%{opacity:0} }
@keyframes firelight { 0%{opacity:.65;transform:translateX(-51%) scale(.94)} 45%{opacity:1} 100%{opacity:.78;transform:translateX(-48%) scale(1.08)} }
@keyframes caveShadows { 0%{transform:translate3d(-2%,0,0) scale(1)} 100%{transform:translate3d(3%,-1%,0) scale(1.06)} }
@media (prefers-reduced-motion: reduce) {
  .effectStage, .effectStage * { animation-duration: .35s !important; }
  .caveBackdrop::before, .caveBackdrop::after { animation: none; }
}
@media (max-width: 430px) {
  .soundGrid { grid-template-columns: 1fr; }
}