/* GAME PAGE */
.game-page{padding-top:7rem;padding-bottom:4rem;min-height:100vh;
  background:radial-gradient(120% 120% at 80% 5%,#FBEFD6 0%,#FFFCF6 55%)}
.game-head{text-align:center;max-width:46rem;margin:0 auto 2rem}
.game-head h1{font-size:clamp(2.4rem,5vw,3.6rem);margin:.6rem 0 .8rem}
.game-head h1 em{font-style:italic;color:var(--honey-500)}
.game-head p{color:var(--ink-soft);font-size:1.05rem}

/* HUD */
.hud{display:flex;justify-content:center;flex-wrap:wrap;gap:.8rem;margin-bottom:1rem}
.chip{background:#fff;border-radius:40px;padding:.55rem 1.2rem;display:flex;align-items:center;gap:.5rem;
  box-shadow:0 14px 34px -24px var(--shadow);font-weight:600;font-size:.95rem;color:var(--ink)}
.chip small{font-weight:500;color:var(--ink-soft);font-size:.78rem}
.chip b{color:var(--honey-600);font-size:1.15rem;min-width:1.4rem;text-align:center}

/* LEVELS */
.levels{display:flex;justify-content:center;flex-wrap:wrap;gap:.7rem;margin-bottom:1.2rem}
.level-btn{border:1.5px solid var(--honey-300);background:#fff;color:var(--amber-deep);
  border-radius:40px;padding:.55rem 1.4rem;font-family:var(--sans);font-weight:600;font-size:.92rem;
  cursor:pointer;transition:all .2s ease}
.level-btn:hover{background:var(--honey-50);transform:translateY(-2px)}
.level-btn.sel{background:var(--honey-400);color:#fff;border-color:var(--honey-400);
  box-shadow:0 10px 22px -10px var(--honey-500)}

/* MODE TOGGLE */
.mode-toggle{display:flex;align-items:center;justify-content:center;gap:.8rem;margin-bottom:1.2rem}
.mode-name{font-weight:600;font-size:.92rem;color:var(--ink)}
.mode-name.dim{color:var(--ink-soft);opacity:.55}
.switch{position:relative;display:inline-block;width:54px;height:30px;cursor:pointer}
.switch input{opacity:0;width:0;height:0}
.slider{position:absolute;inset:0;background:var(--honey-300);border-radius:30px;transition:.3s}
.slider::before{content:"";position:absolute;height:22px;width:22px;left:4px;top:4px;background:#fff;border-radius:50%;
  transition:.3s;box-shadow:0 2px 5px rgba(0,0,0,.25)}
.switch input:checked + .slider{background:#8a1212}
.switch input:checked + .slider::before{transform:translateX(24px)}
.switch input:focus-visible + .slider{outline:2px solid var(--ink);outline-offset:2px}

/* BOARD */
.board-wrap{width:min(900px,100%);margin:0 auto}
.board{position:relative;width:100%;aspect-ratio:16/10;border-radius:24px;overflow:hidden;
  background:linear-gradient(170deg,#EAF3E4 0%,#D7E9CB 55%,#C7E0B6 100%);
  box-shadow:0 36px 70px -34px var(--shadow);cursor:none;touch-action:none;user-select:none}
.board .deco{position:absolute;font-size:1.6rem;opacity:.35;pointer-events:none}

.bee{position:absolute;width:46px;height:46px;transform:translate(-50%,-50%);pointer-events:none;
  z-index:5;transition:transform .05s linear;will-change:left,top}
.bee svg{width:100%;height:100%;filter:drop-shadow(0 6px 8px rgba(0,0,0,.18))}

.item{position:absolute;transform:translate(-50%,-50%);display:grid;place-items:center;
  font-size:1.9rem;cursor:pointer;will-change:transform,opacity;z-index:4;
  animation:pop .25s ease backwards}
.item.fading{animation:fade var(--life,2s) linear forwards}
@keyframes pop{from{transform:translate(-50%,-50%) scale(0)}to{transform:translate(-50%,-50%) scale(1)}}
@keyframes fade{0%{opacity:1}70%{opacity:1}100%{opacity:.15;transform:translate(-50%,-50%) scale(.55)}}
.item.caught{animation:caught .4s ease forwards}
@keyframes caught{to{transform:translate(-50%,-50%) scale(1.8);opacity:0}}

.float-pts{position:absolute;transform:translate(-50%,-50%);font-weight:700;font-size:1rem;
  pointer-events:none;z-index:6;animation:rise .8s ease-out forwards}
@keyframes rise{to{transform:translate(-50%,-180%);opacity:0}}

/* GORE */
.gore-fx{position:absolute;inset:0;z-index:3;pointer-events:none;overflow:hidden;opacity:0;transition:opacity .4s}
body.gore .gore-fx{opacity:1}
body.gore .board{background:linear-gradient(170deg,#3a221c 0%,#2a1413 55%,#1c0c0c 100%);
  box-shadow:0 36px 70px -30px rgba(80,0,0,.6),inset 0 0 120px rgba(0,0,0,.55)}
body.gore .deco{opacity:.18;filter:grayscale(.6) brightness(.7)}
body.gore .board::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:radial-gradient(120% 90% at 50% 40%,transparent 55%,rgba(60,0,0,.55) 100%)}
body.gore .game-head em{color:#b3261e}
body.gore .float-pts{text-shadow:0 1px 3px #000}

.stain{position:absolute;transform:translate(-50%,-50%) rotate(var(--rot,0deg));z-index:3;
  pointer-events:none;border-radius:48% 52% 60% 40% / 55% 45% 55% 45%;
  background:radial-gradient(circle at 40% 35%,#b3151a 0%,#7a0d10 55%,#4a0608 100%);
  box-shadow:0 0 10px rgba(120,0,0,.5);opacity:.92;animation:splatIn .25s ease backwards}
@keyframes splatIn{from{transform:translate(-50%,-50%) rotate(var(--rot,0deg)) scale(.2);opacity:0}}
.droplet{position:absolute;width:9px;height:9px;border-radius:50%;background:#9c1015;z-index:4;
  pointer-events:none;animation:fly .6s ease-out forwards}
@keyframes fly{to{transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy)));opacity:0}}

.racket{position:absolute;width:76px;height:76px;transform:translate(-50%,-50%);
  pointer-events:none;z-index:7;display:none;filter:drop-shadow(0 6px 9px rgba(0,0,0,.4))}
.racket svg{width:100%;height:100%}
body.gore .racket{display:block}
body.gore .bee{display:none}
.racket.swing{animation:swing .2s ease}
@keyframes swing{0%{transform:translate(-50%,-50%) rotate(0)}
  35%{transform:translate(-50%,-50%) rotate(-32deg)}100%{transform:translate(-50%,-50%) rotate(0)}}

/* SOUND */
.sound-bar{display:flex;align-items:center;justify-content:center;gap:.8rem;margin-bottom:1.4rem}
.snd-btn{width:42px;height:42px;border-radius:50%;border:1.5px solid var(--honey-300);background:#fff;
  font-size:1.1rem;cursor:pointer;display:grid;place-items:center;line-height:1;
  transition:transform .2s ease,background .2s ease}
.snd-btn:hover{background:var(--honey-50);transform:translateY(-2px)}
.snd-btn.off{opacity:.6}
.vol{-webkit-appearance:none;appearance:none;width:160px;height:6px;border-radius:6px;
  background:var(--honey-200);outline:none;cursor:pointer}
.vol::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:18px;height:18px;border-radius:50%;
  background:var(--honey-400);box-shadow:0 2px 6px var(--shadow);cursor:pointer}
.vol::-moz-range-thumb{width:18px;height:18px;border:0;border-radius:50%;
  background:var(--honey-400);box-shadow:0 2px 6px var(--shadow);cursor:pointer}

/* PAUSE */
.pause-btn{position:absolute;top:12px;right:12px;z-index:8;width:42px;height:42px;border-radius:50%;
  border:0;background:rgba(255,252,246,.92);backdrop-filter:blur(4px);font-size:1rem;cursor:pointer;
  display:none;place-items:center;box-shadow:0 6px 16px -8px var(--shadow);transition:transform .2s ease}
.pause-btn:hover{transform:scale(1.08)}
.pause-actions{display:flex;flex-direction:column;gap:.7rem;align-items:stretch}
.pause-actions .btn{justify-content:center}
.btn-ghost2{background:transparent;color:var(--amber-deep);border:1.5px solid var(--honey-300);box-shadow:none}
.btn-ghost2:hover{background:var(--honey-100);color:var(--amber-deep)}

/* SCORE ENTRY */
.score-entry{display:flex;flex-direction:column;gap:.7rem;align-items:center;margin-bottom:1rem}
.score-entry input{padding:.7rem 1rem;border-radius:12px;border:1.5px solid var(--honey-300);
  font-family:var(--sans);font-size:1rem;text-align:center;width:100%;max-width:15rem;color:var(--ink)}
.score-entry input:focus{outline:2px solid var(--honey-400);border-color:var(--honey-400)}
.score-entry .btn{width:100%;justify-content:center}
.score-entry .btn:disabled{opacity:.7;cursor:default;transform:none}

/* LEADERBOARD */
.lb-section{max-width:34rem;margin:2.6rem auto 0;background:#fff;border-radius:22px;padding:1.7rem 1.8rem;
  box-shadow:0 24px 50px -34px var(--shadow)}
.lb-h{font-size:1.8rem;text-align:center}
.lb-sub{text-align:center;color:var(--honey-600);font-weight:600;font-size:.74rem;letter-spacing:.18em;
  text-transform:uppercase;margin-bottom:1.1rem}
.lb-list{list-style:none;display:flex;flex-direction:column;gap:.5rem}
.lb-list li{display:flex;align-items:center;gap:1rem;padding:.7rem 1rem;border-radius:14px;
  background:var(--honey-50);font-weight:600}
.lb-list li:nth-child(1){background:linear-gradient(90deg,var(--honey-200),var(--honey-100))}
.lb-rank{width:1.8rem;height:1.8rem;border-radius:50%;background:var(--honey-400);color:#fff;
  display:grid;place-items:center;font-size:.9rem;flex:none}
.lb-list li:nth-child(1) .lb-rank{background:var(--honey-500)}
.lb-name{flex:1;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lb-score{color:var(--honey-600);font-size:1.15rem}
.lb-empty{justify-content:center;color:var(--ink-soft);font-weight:500}

body.gore .lb-section{background:#241616;box-shadow:0 24px 50px -30px rgba(80,0,0,.6)}
body.gore .lb-h{color:#f3e4e4}
body.gore .lb-list li{background:#321c1c}
body.gore .lb-list li:nth-child(1){background:linear-gradient(90deg,#5a1f1f,#3a1818)}
body.gore .lb-name{color:#f3e4e4}
body.gore .lb-score{color:#ff9a9a}
body.gore .lb-rank{background:#8a1212}

/* OVERLAY / PANEL / BTN */
.overlay{position:absolute;inset:0;z-index:10;display:grid;place-items:center;text-align:center;
  background:rgba(42,31,18,.55);backdrop-filter:blur(3px);padding:1.5rem;cursor:default}
.overlay.hide{display:none}
.panel{background:var(--cream);border-radius:22px;padding:2rem 2.2rem;max-width:30rem;
  box-shadow:0 30px 60px -30px rgba(0,0,0,.5)}
.panel h2{font-size:2.1rem;margin-bottom:.5rem}
.panel p{color:var(--ink-soft);margin-bottom:1.3rem;font-size:1rem}

.btn{display:inline-flex;align-items:center;gap:.5rem;padding:.9rem 2rem;border-radius:44px;
  font-family:var(--sans);font-weight:600;font-size:1rem;border:0;cursor:pointer;
  background:var(--honey-400);color:#fff;box-shadow:0 14px 30px -12px var(--honey-500);
  transition:transform .25s ease,background .25s}
.btn:hover{transform:translateY(-3px);background:var(--honey-500)}

.rules{max-width:46rem;margin:1.8rem auto 0;text-align:center;color:var(--ink-soft);font-size:.95rem}
.rules b{color:var(--amber-deep)}

.item.svg svg{width:42px;height:42px;display:block;filter:drop-shadow(0 3px 4px rgba(0,0,0,.35))}
.item.big.svg svg{width:60px;height:60px}

@media(max-width:860px){
  .bee{width:40px;height:40px}
  .item{font-size:1.7rem}
}