:root{
  --bg-0:#0f0820;
  --bg-1:#1b0f3a;
  --bg-2:#3a0f4a;
  --pink:#ff3d8a;
  --hot:#ff6b35;
  --yellow:#ffd23f;
  --cyan:#3de0ff;
  --ink:#1a0f2e;
  --paper:#fff7e8;
  --text:#fff;
}

*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{overscroll-behavior:none}
body{
  font-family:'Fredoka',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  background:radial-gradient(120% 80% at 50% 0%, var(--bg-2) 0%, var(--bg-1) 40%, var(--bg-0) 80%);
  color:var(--text);
  padding:env(safe-area-inset-top) env(safe-area-inset-right) 0 env(safe-area-inset-left);
  user-select:none;-webkit-user-select:none;
  position:relative;
  touch-action:manipulation;
}
/* The "above the fold" game viewport — fills the screen on first paint. */
.game-area{
  display:flex;flex-direction:column;
  min-height:100dvh;
  position:relative;
}

.bg-glow{
  position:fixed;inset:0;pointer-events:none;z-index:0;
  background:
    radial-gradient(40% 30% at 20% 20%, rgba(255,61,138,.25), transparent 70%),
    radial-gradient(35% 28% at 85% 30%, rgba(61,224,255,.18), transparent 70%),
    radial-gradient(40% 35% at 50% 100%, rgba(255,210,63,.15), transparent 70%);
}

/* TOPBAR */
.topbar{
  position:relative;z-index:2;
  display:flex;align-items:center;justify-content:space-between;
  padding:10px 14px 4px;gap:10px;
}
.brand{display:flex;align-items:center;gap:10px}
.brand-mark{
  width:34px;height:34px;display:grid;place-items:center;
  color:var(--yellow);
  filter:drop-shadow(0 2px 0 rgba(0,0,0,.4)) drop-shadow(0 0 10px rgba(255,210,63,.6));
  animation:wiggle 3s ease-in-out infinite;
}
.brand-mark svg{width:100%;height:100%}
.brand-name{
  font-family:'Bungee',sans-serif;font-size:clamp(18px,5vw,22px);letter-spacing:1px;
  background:linear-gradient(180deg,#fff 30%, #ffb3d1 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  text-shadow:0 2px 0 rgba(255,61,138,.25);
  white-space:nowrap;
}
/* SCORE BAR — centered, big, prominent */
.score-bar{
  position:relative;z-index:2;
  display:flex;flex-direction:column;align-items:center;
  padding:2px 16px 0;
  text-align:center;
  pointer-events:none;
}
.score-main{
  font-family:'Bungee',sans-serif;
  font-size:clamp(40px, 11vw, 80px);
  line-height:.95;
  color:var(--yellow);
  text-shadow:
    -2px 2px 0 var(--ink),
    0 4px 0 rgba(0,0,0,.45),
    0 0 28px rgba(255,210,63,.45);
  letter-spacing:1px;
  transition:transform .12s ease;
}
.score-main.bump{animation:scoreBump .25s cubic-bezier(.2,1.6,.4,1)}
@keyframes scoreBump{
  0%{transform:scale(1)}
  40%{transform:scale(1.12)}
  100%{transform:scale(1)}
}
.score-best{
  display:inline-flex;align-items:center;gap:6px;
  font-family:'Fredoka',sans-serif;
  font-size:13px;font-weight:600;letter-spacing:2px;
  color:var(--cyan);
  background:rgba(61,224,255,.1);
  border:1px solid rgba(61,224,255,.25);
  border-radius:999px;padding:3px 12px;
  margin-top:6px;
}
.score-best svg{width:12px;height:12px}
.score-best span{color:#fff;font-weight:700}

/* STAGE */
.stage{
  position:relative;z-index:1;
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:4px 16px;min-height:0;
}
/* Desktop / tall screens: stop centering — pull the slap-zone down so the
   picker sits closer to the playing area instead of way at the bottom. */
@media (min-width:720px){
  .stage{justify-content:flex-end;padding-bottom:12px}
}

.slap-zone{
  position:relative;
  width:min(72vw, 56vh, 380px);
  aspect-ratio:1;
  display:grid;place-items:center;cursor:pointer;
  outline:none;
}
.slap-zone:focus-visible .object-wrap{filter:drop-shadow(0 0 0 3px var(--cyan))}

.shadow{
  position:absolute;left:50%;bottom:8%;transform:translateX(-50%);
  width:60%;height:8%;border-radius:50%;
  background:radial-gradient(closest-side, rgba(0,0,0,.55), transparent 70%);
  filter:blur(2px);
  transition:transform .15s ease, opacity .15s ease;
}
.slap-zone.hit .shadow{transform:translateX(-50%) scale(1.15,.8);opacity:.7}

.object-wrap{
  position:relative;width:78%;height:78%;
  display:grid;place-items:center;
  transform-origin:50% 90%;
  filter:drop-shadow(0 18px 24px rgba(0,0,0,.45));
  transition:transform .08s linear;
  will-change:transform;
}
.object-wrap svg{width:100%;height:100%;overflow:visible}

.object-wrap.hit{animation:slapHit .35s cubic-bezier(.2,1.5,.4,1)}
@keyframes slapHit{
  0%{transform:scale(1,1) rotate(0)}
  20%{transform:scale(1.18,.78) rotate(-3deg) translateX(8px)}
  50%{transform:scale(.86,1.14) rotate(2deg) translateX(-4px)}
  75%{transform:scale(1.06,.94) rotate(-1deg)}
  100%{transform:scale(1,1) rotate(0)}
}

/* HAND */
.hand{
  position:absolute;width:42%;height:42%;
  top:-8%;right:-6%;
  transform-origin:80% 90%;
  transform:rotate(40deg) translate(60%,-30%) scale(.6);
  opacity:0;pointer-events:none;
  filter:drop-shadow(0 8px 14px rgba(0,0,0,.5));
}
.hand.swing{animation:swing .35s cubic-bezier(.3,.8,.4,1) forwards}
@keyframes swing{
  0%{transform:rotate(50deg) translate(80%,-50%) scale(.7);opacity:0}
  30%{opacity:1}
  60%{transform:rotate(-20deg) translate(-10%,10%) scale(1.05);opacity:1}
  100%{transform:rotate(-30deg) translate(-30%,40%) scale(.9);opacity:0}
}

/* FX */
.fx-layer{
  position:absolute;inset:0;width:100%;height:100%;
  pointer-events:none;overflow:visible;
}

/* COMBO BANNER */
.combo-banner{
  position:absolute;top:6%;left:50%;transform:translateX(-50%) scale(.5);
  opacity:0;pointer-events:none;
  font-family:'Bungee',sans-serif;
  color:var(--yellow);
  font-size:clamp(40px,9vw,72px);
  text-shadow:
    0 0 0 var(--ink),
    -3px 3px 0 var(--ink),
    0 4px 0 rgba(0,0,0,.5),
    0 0 30px rgba(255,210,63,.6);
  line-height:1;text-align:center;
  z-index:3;
}
.combo-banner .combo-x{font-size:.6em;opacity:.85}
.combo-banner .combo-label{
  font-size:.22em;letter-spacing:6px;color:#fff;margin-top:4px;
  text-shadow:0 2px 0 rgba(0,0,0,.5);
}
.combo-banner.pop{animation:comboPop .7s cubic-bezier(.2,1.6,.4,1) forwards}
@keyframes comboPop{
  0%{transform:translateX(-50%) scale(.4) rotate(-8deg);opacity:0}
  30%{transform:translateX(-50%) scale(1.15) rotate(2deg);opacity:1}
  60%{transform:translateX(-50%) scale(.95) rotate(-1deg);opacity:1}
  100%{transform:translateX(-50%) scale(1.05) rotate(0);opacity:0}
}

.hint{
  margin-top:10px;font-size:12px;letter-spacing:2px;text-transform:uppercase;
  opacity:.5;font-weight:600;
  transition:opacity .3s ease;
  height:14px;
}
.hint.hide{opacity:0}

/* PICKER — capped width forces wrap so every object is on screen, no scroll */
.picker{
  position:relative;z-index:2;
  display:flex;flex-wrap:wrap;gap:6px;justify-content:center;
  padding:6px 12px;
  width:100%;max-width:520px;margin:0 auto;
}
.pick{
  flex:0 0 auto;
  width:44px;height:44px;border-radius:12px;
  background:rgba(255,255,255,.06);
  border:2px solid rgba(255,255,255,.08);
  display:grid;place-items:center;cursor:pointer;
  transition:transform .15s ease, border-color .15s ease, background .15s ease;
  padding:8px;
}
.pick svg{width:100%;height:100%}
.pick:hover{transform:translateY(-2px);background:rgba(255,255,255,.1)}
.pick.active{
  border-color:var(--yellow);
  background:linear-gradient(180deg, rgba(255,210,63,.2), rgba(255,61,138,.15));
  box-shadow:0 6px 20px rgba(255,210,63,.25), inset 0 0 0 1px rgba(255,255,255,.1);
}

/* FOOTER */
.footer{
  position:relative;z-index:2;
  display:flex;gap:10px;justify-content:center;align-items:center;
  padding:8px 16px calc(12px + env(safe-area-inset-bottom));
}
.reset-btn, .sound-btn{
  display:inline-flex;align-items:center;gap:8px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.1);
  color:#fff;
  padding:8px 14px;border-radius:999px;
  font-family:inherit;font-size:13px;font-weight:600;letter-spacing:.5px;
  cursor:pointer;
}
.reset-btn svg, .sound-btn svg{width:16px;height:16px}
.reset-btn:active, .sound-btn:active{transform:scale(.96)}
.sound-btn{padding:8px 10px}

@keyframes wiggle{
  0%,100%{transform:rotate(-6deg)}
  50%{transform:rotate(8deg)}
}

/* SCORE POP */
.score-pop{
  position:absolute;pointer-events:none;
  font-family:'Bungee',sans-serif;
  color:var(--yellow);font-size:36px;
  text-shadow:-2px 2px 0 var(--ink), 0 0 20px rgba(255,210,63,.7);
  animation:scorePop .9s ease-out forwards;
  z-index:4;
}
@keyframes scorePop{
  0%{transform:translate(-50%,0) scale(.5);opacity:0}
  20%{transform:translate(-50%,-10px) scale(1.1);opacity:1}
  100%{transform:translate(-50%,-90px) scale(.9);opacity:0}
}

/* Screen shake on big combos */
.stage.shake{animation:shake .25s linear}
@keyframes shake{
  0%,100%{transform:translate(0,0)}
  20%{transform:translate(-6px,2px)}
  40%{transform:translate(5px,-3px)}
  60%{transform:translate(-4px,3px)}
  80%{transform:translate(3px,-2px)}
}

/* LEADERBOARD BUTTON — prominent CTA in header */
.lb-btn{
  display:inline-flex;align-items:center;gap:7px;
  background:linear-gradient(180deg, #ffd23f 0%, #f0a020 100%);
  border:2px solid #fff;
  color:#1a0f2e;
  border-radius:999px;
  padding:8px 16px 8px 12px;
  font-family:'Bungee',sans-serif;font-size:13px;letter-spacing:1.5px;
  cursor:pointer;
  box-shadow:
    0 4px 0 #a06a08,
    0 8px 18px rgba(255,210,63,.4),
    inset 0 1px 0 rgba(255,255,255,.5);
  transition:transform .12s ease, box-shadow .12s ease;
  animation:lbPulse 2.6s ease-in-out infinite;
}
.lb-btn svg{width:18px;height:18px;stroke-width:2.4}
.lb-btn:hover{transform:translateY(-2px);box-shadow:0 6px 0 #a06a08, 0 10px 22px rgba(255,210,63,.5), inset 0 1px 0 rgba(255,255,255,.5)}
.lb-btn:active{transform:translateY(2px);box-shadow:0 2px 0 #a06a08, 0 4px 10px rgba(255,210,63,.3), inset 0 1px 0 rgba(255,255,255,.5)}
@keyframes lbPulse{
  0%,100%{box-shadow:0 4px 0 #a06a08, 0 8px 18px rgba(255,210,63,.4), inset 0 1px 0 rgba(255,255,255,.5)}
  50%{box-shadow:0 4px 0 #a06a08, 0 8px 26px rgba(255,210,63,.7), inset 0 1px 0 rgba(255,255,255,.5)}
}

@media (max-width:380px){
  .lb-btn span{display:none}
  .lb-btn{padding:8px 10px}
}

/* LEADERBOARD MODAL */
.lb-overlay{
  position:fixed;inset:0;z-index:50;
  background:rgba(5,2,15,.7);backdrop-filter:blur(6px);
  display:flex;align-items:flex-end;justify-content:center;
  padding:0;animation:fadeIn .2s ease;
}
.lb-overlay[hidden]{display:none}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}

.lb-modal{
  background:linear-gradient(180deg, #2a1850 0%, #18083a 100%);
  border:1px solid rgba(255,255,255,.1);
  border-radius:24px 24px 0 0;
  width:100%;max-width:520px;
  max-height:88dvh;display:flex;flex-direction:column;
  padding:14px 16px calc(16px + env(safe-area-inset-bottom));
  box-shadow:0 -20px 60px rgba(0,0,0,.6);
  animation:slideUp .28s cubic-bezier(.2,.9,.3,1);
}
@media (min-width:600px){
  .lb-overlay{align-items:center;padding:24px}
  .lb-modal{border-radius:24px;animation:popIn .28s cubic-bezier(.2,1.4,.4,1)}
}
@keyframes slideUp{from{transform:translateY(100%)}to{transform:translateY(0)}}
@keyframes popIn{from{transform:scale(.85);opacity:0}to{transform:scale(1);opacity:1}}

.lb-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.lb-head h2{
  font-family:'Bungee',sans-serif;font-size:22px;letter-spacing:1.5px;
  color:var(--yellow);
  text-shadow:-2px 2px 0 rgba(0,0,0,.4);
}
.lb-close{
  background:rgba(255,255,255,.08);border:none;color:#fff;
  width:36px;height:36px;border-radius:50%;display:grid;place-items:center;cursor:pointer;
}
.lb-close svg{width:16px;height:16px}
.lb-close:hover{background:rgba(255,61,138,.25)}

.lb-tabs{
  display:flex;gap:6px;
  background:rgba(0,0,0,.25);border-radius:12px;padding:4px;margin-bottom:12px;
}
.lb-tab{
  flex:1;background:transparent;border:none;color:rgba(255,255,255,.55);
  padding:8px 6px;border-radius:9px;cursor:pointer;
  font-family:inherit;font-size:12px;font-weight:600;letter-spacing:.5px;
  transition:all .15s ease;
}
.lb-tab:hover{color:#fff}
.lb-tab.active{
  background:linear-gradient(180deg, var(--pink), #c4286a);
  color:#fff;box-shadow:0 4px 10px rgba(255,61,138,.4);
}

.lb-me{
  display:flex;align-items:center;gap:8px;
  font-size:12px;color:rgba(255,255,255,.65);
  padding:8px 12px;margin-bottom:10px;
  background:rgba(61,224,255,.08);border:1px solid rgba(61,224,255,.2);
  border-radius:10px;
}
.lb-me strong{color:var(--cyan);font-weight:600}
.lb-reroll{
  margin-left:auto;background:rgba(255,255,255,.1);border:none;color:#fff;
  width:26px;height:26px;border-radius:50%;font-size:14px;cursor:pointer;
}
.lb-reroll:hover{background:var(--cyan);color:#0f0820;transform:rotate(180deg);transition:all .3s ease}

.lb-list{
  flex:1;overflow-y:auto;margin:0 -4px;padding:0 4px;
  min-height:240px;
}
.lb-loading, .lb-empty{
  text-align:center;color:rgba(255,255,255,.5);padding:40px 0;font-size:14px;
}

.lb-row{
  display:grid;grid-template-columns:36px 1fr auto;gap:10px;align-items:center;
  padding:10px 12px;margin-bottom:6px;
  background:rgba(255,255,255,.04);border-radius:10px;
  transition:background .15s ease;
}
.lb-row:hover{background:rgba(255,255,255,.07)}
.lb-row.me{
  background:linear-gradient(90deg, rgba(255,210,63,.18), rgba(255,61,138,.08));
  border:1px solid rgba(255,210,63,.3);
}
.lb-rank{
  font-family:'Bungee',sans-serif;font-size:14px;color:rgba(255,255,255,.5);
  text-align:center;
}
.lb-row.gold .lb-rank{color:#ffd23f;font-size:18px}
.lb-row.silver .lb-rank{color:#d4d8e0;font-size:16px}
.lb-row.bronze .lb-rank{color:#cd8d4a;font-size:16px}
.lb-name{font-weight:600;color:#fff;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lb-score{
  font-family:'Bungee',sans-serif;color:var(--yellow);font-size:15px;
  text-shadow:-1px 1px 0 rgba(0,0,0,.3);
}

.lb-foot{
  font-size:11px;color:rgba(255,255,255,.4);
  text-align:center;margin-top:10px;letter-spacing:.5px;
}

/* AD SLOT */
.ad-slot{
  position:relative;z-index:2;
  width:100%;max-width:728px;margin:0 auto;
  padding:6px 16px 10px;min-height:60px;
  display:flex;justify-content:center;
}
.ad-slot ins{min-height:60px;width:100%}

/* SEO CONTENT (crawlable, visually low-key) */
.seo-content{
  position:relative;z-index:2;
  max-width:760px;margin:0 auto;
  padding:24px 18px calc(40px + env(safe-area-inset-bottom));
  color:rgba(255,255,255,.78);
  font-family:'Fredoka',sans-serif;
  line-height:1.55;
}
.seo-content h2{
  font-family:'Bungee',sans-serif;
  font-size:16px;letter-spacing:2px;
  color:#fff;margin:18px 0 8px;
}
.seo-content h2:first-child{margin-top:0}
.seo-content p, .seo-content li{font-size:14px;margin:6px 0}
.seo-content ul{padding-left:20px}
.seo-content strong{color:var(--yellow)}
.seo-content a{color:var(--cyan);text-decoration:none}
.seo-content a:hover{text-decoration:underline}
.seo-content .credits{font-size:11px;opacity:.5;margin-top:18px}

/* Compact on small heights (landscape phone) */
@media (max-height:560px){
  .topbar{padding:6px 14px 2px}
  .brand-name{font-size:18px}
  .score-main{font-size:42px}
  .score-best{font-size:11px;padding:2px 10px}
  .pick{width:38px;height:38px;padding:5px}
  .hint{margin-top:4px;font-size:11px;height:12px}
  .slap-zone{width:min(60vw, 42vh, 320px)}
}

/* Slap zone shrinks on narrow phones so picker + footer always fit */
@media (max-width:480px){
  .slap-zone{width:min(72vw, 44vh, 320px)}
}
@media (max-width:380px){
  .pick{width:40px;height:40px;padding:6px}
  .picker{padding:6px 8px;gap:5px;max-width:100%}
  .slap-zone{width:min(70vw, 42vh, 300px)}
}

/* Small phones (narrow) — tighten the lb button label */
@media (max-width:420px){
  .lb-btn{padding:7px 14px 7px 10px;font-size:12px}
  .lb-btn svg{width:16px;height:16px}
}