:root {
  --bg: #07060c;
  --gold: #ffd24a;
  --gold-2: #ffe9a0;
  --ink: #f6f1e8;
  --dim: #9a9388;
  --poop: #6b3a1f;
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-t: env(safe-area-inset-top, 0px);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body {
  height: 100%;
  background: #05030a;
  color: var(--ink);
  font-family: Outfit, system-ui, sans-serif;
  overflow: hidden;
  touch-action: none;
  user-select: none;
}
button { font-family: inherit; cursor: pointer; }
a { color: var(--gold); }

#stars { position: fixed; inset: 0; z-index: 0; }
.mandala {
  position: fixed; left: 50%; top: 46%;
  transform: translate(-50%, -50%);
  width: min(92vw, 720px);
  opacity: .22;
  mix-blend-mode: screen;
  pointer-events: none;
  z-index: 1;
  animation: mandalaSpin 80s linear infinite;
  mask-image: radial-gradient(circle, #000 40%, transparent 72%);
}
@keyframes mandalaSpin { to { transform: translate(-50%,-50%) rotate(360deg); } }
.fx-vignette, .fx-grain {
  position: fixed; inset: 0; pointer-events: none; z-index: 8;
}
.fx-vignette {
  background:
    radial-gradient(ellipse at 50% 110%, rgba(140,70,20,.18), transparent 42%),
    radial-gradient(ellipse at center, transparent 50%, rgba(0,0,0,.72) 100%);
}
.fx-grain {
  opacity: .1;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='.5'/></svg>");
}

body.shake .well-frame { animation: shake .35s linear; }
@keyframes shake {
  10%,90% { transform: translateX(-3px); }
  20%,80% { transform: translateX(5px); }
  30%,50%,70% { transform: translateX(-7px); }
  40%,60% { transform: translateX(7px); }
}

.hud {
  position: relative; z-index: 20;
  padding: calc(10px + var(--safe-t)) 14px 8px;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
.hud-brand { display: flex; flex-direction: column; }
.kicker { font-size: 10px; letter-spacing: .28em; color: var(--gold); font-weight: 800; }
.hud-brand strong { font-family: Cinzel, serif; font-size: 14px; letter-spacing: .08em; }
.hud-stats { display: flex; gap: 16px; }
.stat { text-align: center; }
.stat em { display: block; font-style: normal; font-size: 9px; letter-spacing: .16em; color: var(--dim); }
.stat b { font-family: Bebas Neue, sans-serif; font-size: 26px; color: var(--gold-2); line-height: 1; }
.hud-actions { display: flex; gap: 6px; }
.icon-btn, .text-btn {
  height: 34px; border: 1px solid rgba(255,210,74,.35);
  background: rgba(255,255,255,.04); color: var(--gold); backdrop-filter: blur(8px);
}
.icon-btn { width: 34px; border-radius: 50%; }
.text-btn { padding: 0 10px; border-radius: 999px; font-size: 10px; letter-spacing: .14em; font-weight: 800; }

.stage {
  position: relative; z-index: 5;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 10px;
  height: calc(100% - 148px - var(--safe-t) - var(--safe-b));
  padding: 0 10px;
}
.panel { display: flex; flex-direction: column; gap: 12px; align-items: center; }
.left-panel { align-items: flex-end; }
.right-panel { align-items: flex-start; }
.mini {
  background: rgba(8,6,14,.62);
  border: 1px solid rgba(255,210,74,.22);
  border-radius: 16px;
  padding: 8px;
  text-align: center;
  backdrop-filter: blur(10px);
}
.mini span { display: block; font-size: 10px; letter-spacing: .2em; color: var(--gold); margin-bottom: 4px; }
.legend {
  max-width: 140px;
  font-size: 11px; color: var(--dim); line-height: 1.45;
}
.rabbit-box { width: 108px; text-align: center; }
.rabbit-hit {
  width: 108px; height: 128px; padding: 0; border: 0;
  border-radius: 16px; overflow: hidden;
  border: 1px solid rgba(255,210,74,.35);
  background: #12080c;
}
.rabbit-hit img { width: 100%; height: 100%; object-fit: cover; object-position: center 18%; }
.rabbit-hit:active { transform: scale(.97) rotate(-2deg); }
.rabbit-box.mad .rabbit-hit { animation: mad .35s ease; }
@keyframes mad {
  25% { transform: translateX(-4px) rotate(-3deg); }
  75% { transform: translateX(4px) rotate(3deg); }
}
.rabbit-bubble {
  margin-top: 6px;
  font-size: 11px; line-height: 1.3;
  background: rgba(10,8,16,.8);
  border: 1px solid rgba(255,210,74,.25);
  border-radius: 8px; padding: 6px 7px;
}

.well-wrap { display: flex; justify-content: center; }
.well-frame {
  position: relative;
  padding: 8px;
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(40,24,10,.55), rgba(10,8,16,.85));
  border: 1px solid rgba(255,210,74,.38);
  box-shadow:
    0 0 0 1px rgba(255,255,255,.04) inset,
    0 20px 60px rgba(0,0,0,.45),
    0 0 80px rgba(255,180,40,.08);
}
#board {
  display: block;
  width: min(42vh, 300px);
  height: min(84vh, 600px);
  background: rgba(0,0,0,.45);
  border-radius: 10px;
}
.flash {
  position: absolute; inset: 8px; border-radius: 10px; pointer-events: none;
  background: #ffe9a0; opacity: 0; mix-blend-mode: screen;
}
.slam {
  position: absolute; left: 50%; top: 38%;
  transform: translate(-50%,-50%);
  font-family: Cinzel, serif;
  font-size: clamp(18px, 4vw, 28px);
  letter-spacing: .08em;
  color: #fff6d0;
  text-shadow: 0 0 22px #ffd24a, 0 4px 0 #000;
  opacity: 0;
  pointer-events: none;
  text-align: center;
  width: 90%;
}
.slam.go { animation: slam 900ms ease-out forwards; }
@keyframes slam {
  0% { opacity: 0; transform: translate(-50%,-40%) scale(.7); }
  18% { opacity: 1; transform: translate(-50%,-50%) scale(1.08); }
  100% { opacity: 0; transform: translate(-50%,-70%) scale(1); }
}

.pad {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
  display: flex; justify-content: center; gap: 8px;
  padding: 8px 10px calc(12px + var(--safe-b));
  background: linear-gradient(to top, rgba(5,3,10,.92), transparent);
}
.pad button {
  min-width: 56px; height: 52px;
  border-radius: 14px;
  border: 1px solid rgba(255,210,74,.28);
  background: rgba(255,255,255,.06);
  color: var(--gold-2);
  font-family: Bebas Neue, sans-serif;
  font-size: 22px;
  letter-spacing: .06em;
}
.pad button[data-act="drop"] { min-width: 84px; background: linear-gradient(180deg,#ffe36a,#e2a800); color: #1a1204; }

/* PC: tasti a schermo via, il pozzo usa tutta l'altezza */
@media (hover: hover) and (pointer: fine) {
  .pad { display: none; }
  .stage {
    height: calc(100% - 78px - var(--safe-t));
    padding-bottom: 12px;
  }
  #board {
    width: min(46vh, 320px);
    height: min(92vh, 640px);
  }
}

.overlay {
  position: fixed; inset: 0; z-index: 40;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
  text-align: center;
  padding: 24px 18px calc(20px + var(--safe-b));
  background:
    radial-gradient(ellipse at 50% 18%, rgba(255,210,74,.12), transparent 42%),
    rgba(4,2,10,.86);
  backdrop-filter: blur(16px);
}
.overlay.hidden { display: none; }
.boot-rabbit {
  position: absolute; top: -2%; left: 50%; transform: translateX(-50%);
  width: min(380px, 70vw); height: min(48vh, 480px);
  object-fit: contain; object-position: top;
  mix-blend-mode: lighten; opacity: .5; pointer-events: none;
  mask-image: linear-gradient(#000 58%, transparent 92%);
}
.boot-panel { position: relative; z-index: 2; max-width: 460px; }
.boot-kicker { font-size: 11px; letter-spacing: .26em; color: var(--gold); margin-bottom: 10px; }
.boot h1, .overlay h2 {
  font-family: Cinzel, serif; font-weight: 900;
  font-size: clamp(34px, 10vw, 64px); line-height: .9;
}
.boot h1 span {
  background: linear-gradient(180deg,#fff6d0,#ffd24a 45%,#c48900);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.sub, .overlay p { color: var(--dim); margin: 12px 0 16px; line-height: 1.45; }
.boot ul { list-style: none; font-size: 13px; line-height: 1.85; margin-bottom: 18px; }
.cta {
  border: 0; border-radius: 999px;
  padding: 14px 28px;
  background: linear-gradient(180deg,#ffe36a,#e2a800);
  color: #1a1204;
  font-family: Bebas Neue, sans-serif;
  font-size: 26px; letter-spacing: .14em;
}
.cta.sm { font-size: 20px; padding: 12px 22px; }
.ghost {
  margin-top: 10px; background: transparent;
  border: 1px solid rgba(255,210,74,.35); color: var(--gold);
  border-radius: 999px; padding: 10px 18px; letter-spacing: .1em; font-size: 12px;
}
.legal { margin-top: 12px; font-size: 11px; color: #6a645c; }
.boot-foot {
  width: min(520px, 100%); margin-top: 18px;
  display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap;
  font-size: 12px; position: relative; z-index: 3;
}
.boot-foot a { text-decoration: none; border-bottom: 1px solid rgba(255,210,74,.3); padding-bottom: 2px; }
.credits { color: #c4b8a4; border-color: rgba(196,184,164,.35) !important; }

.fail-rabbit {
  width: 96px; height: 96px; object-fit: cover; object-position: center 18%;
  border-radius: 50%; border: 1px solid rgba(255,210,74,.4);
  margin-bottom: 10px;
}
.fail-stats { display: flex; gap: 16px; margin-bottom: 16px; font-size: 12px; color: var(--dim); }
.fail-stats b { display: block; font-family: Bebas Neue, sans-serif; font-size: 22px; color: var(--gold-2); }

@media (max-width: 720px) {
  .legend { display: none; }
  .left-panel, .right-panel { transform: scale(.92); transform-origin: top center; }
  .rabbit-box { width: 78px; }
  .rabbit-hit { width: 78px; height: 94px; }
  #hold, #next { width: 84px; height: 84px; }
  #board { width: min(46vw, 280px); height: min(92vw, 560px); }
}