/* ======================================
   Honey Island Defense v2 — Style
   ====================================== */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
:root{
  --honey-gold:#FFD700;--honey-amber:#DAA520;--honey-light:#FFF8DC;--honey-warm:#ffecd2;
  --ocean-deep:#0e4d6b;--ocean-mid:#1a6b8a;--sky-blue:#87CEEB;
  --bg:#87CEEB;
}
html,body{width:100%;height:100dvh;overflow:hidden;touch-action:none;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;background:var(--bg);position:fixed;inset:0}
#game-container{position:fixed;inset:0;z-index:1;width:100%;height:100%}

/* ═══ Title Screen ═══ */
#title-screen{position:fixed;inset:0;z-index:50;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#0a3a52 0%,#145a7a 40%,#0e4d6b 100%);opacity:0;pointer-events:none;transition:opacity .5s ease}
#title-screen.visible{opacity:1;pointer-events:auto}
.title-inner{text-align:center;animation:titleFloat 3s ease-in-out infinite}
@keyframes titleFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
.title-donut-emoji{font-size:5rem;filter:drop-shadow(0 0 20px rgba(255,215,0,.6));animation:honeySway 3s ease-in-out infinite;margin-bottom:1rem}
@keyframes honeySway{0%,100%{transform:scale(1) rotate(-5deg)}50%{transform:scale(1.08) rotate(5deg)}}
.title-logo{font-family:'Outfit',sans-serif;font-size:3.5rem;font-weight:900;color:var(--honey-gold);text-shadow:0 0 20px rgba(255,215,0,.6),0 0 60px rgba(255,215,0,.3),0 4px 0 #b8860b,0 8px 0 #8B6914;letter-spacing:.1em;line-height:1.1;margin-bottom:1rem}
.title-sub{font-family:'Outfit',sans-serif;font-size:1.1rem;font-weight:600;color:var(--honey-warm);letter-spacing:.2em;opacity:.8;margin-bottom:.5rem}
.title-highscore{font-family:'Outfit',sans-serif;font-size:.8rem;color:var(--honey-amber);letter-spacing:.1em;opacity:.6;margin-bottom:2rem}
.title-start-btn{font-family:'Outfit',sans-serif;font-size:1.1rem;font-weight:800;letter-spacing:.2em;padding:1rem 3rem;border:3px solid var(--honey-gold);border-radius:50px;background:linear-gradient(135deg,rgba(255,215,0,.25),rgba(218,165,32,.15));color:var(--honey-gold);cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;transition:all .3s ease;box-shadow:0 0 20px rgba(255,215,0,.2);animation:startPulse 2s ease-in-out infinite}
@keyframes startPulse{0%,100%{box-shadow:0 0 20px rgba(255,215,0,.2)}50%{box-shadow:0 0 35px rgba(255,215,0,.4)}}
.title-start-btn:active{transform:scale(.95);background:linear-gradient(135deg,rgba(255,215,0,.4),rgba(218,165,32,.3))}

/* ═══ In-Game HUD ═══ */
#game-hud{display:none;position:fixed;inset:0;z-index:15;pointer-events:none}
body.game-active #game-hud{display:block}
.hud-top{position:absolute;top:calc(12px + env(safe-area-inset-top,0px));left:50%;transform:translateX(-50%);display:flex;gap:2rem;align-items:flex-start}
.hud-score-box,.hud-time-box{text-align:center}
.hud-label{display:block;font-family:'Outfit',sans-serif;font-size:.55rem;font-weight:600;color:rgba(255,255,255,.6);letter-spacing:.15em;text-shadow:0 1px 3px rgba(0,0,0,.5)}
.hud-value{display:block;font-family:'Outfit',sans-serif;font-size:1.4rem;font-weight:900;color:#fff;text-shadow:0 0 10px rgba(255,215,0,.5),0 2px 4px rgba(0,0,0,.5)}
.hud-score-box .hud-value{color:var(--honey-gold)}
/* Timer bar */
.hud-timer-wrap{position:absolute;top:calc(58px + env(safe-area-inset-top,0px));left:50%;transform:translateX(-50%);width:200px;height:6px;background:rgba(0,0,0,.3);border-radius:3px;overflow:hidden}
.hud-timer-bar{height:100%;width:100%;background:linear-gradient(90deg,#ff4444,var(--honey-amber),var(--honey-gold));border-radius:3px;transition:width .3s linear;box-shadow:0 0 6px rgba(255,215,0,.4)}
/* Honey HP */
.hud-honey-wrap{position:absolute;top:calc(70px + env(safe-area-inset-top,0px));left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:4px}
.hud-honey-label{font-size:.8rem;text-shadow:0 1px 2px rgba(0,0,0,.5)}
.hud-honey-bar{width:100px;height:5px;background:rgba(0,0,0,.3);border-radius:3px;overflow:hidden}
.hud-honey-fill{height:100%;width:100%;background:var(--honey-gold);border-radius:3px;transition:width .3s ease}
/* Bottom controls */
.hud-bottom{position:absolute;bottom:calc(20px + env(safe-area-inset-bottom,0px));left:50%;transform:translateX(-50%);display:flex;gap:12px;align-items:center;pointer-events:auto}
.hud-donuts{font-family:'Outfit',sans-serif;font-size:.85rem;font-weight:700;color:var(--honey-gold);text-shadow:0 0 8px rgba(255,215,0,.4),0 2px 3px rgba(0,0,0,.4);pointer-events:none}

/* Score popups */
.score-popup{position:fixed;z-index:200;font-family:'Outfit',sans-serif;font-weight:900;font-size:1.3rem;color:#FFD700;text-shadow:0 2px 4px rgba(0,0,0,.6),0 0 10px rgba(255,215,0,.4);pointer-events:none;animation:popupFloat .9s ease-out forwards;transform:translateX(-50%)}
@keyframes popupFloat{0%{opacity:1;transform:translateX(-50%) translateY(0) scale(1.3)}100%{opacity:0;transform:translateX(-50%) translateY(-70px) scale(.7)}}
/* Damage flash */
.damage-flash{position:fixed;inset:0;z-index:150;background:radial-gradient(ellipse at center,transparent 40%,rgba(255,0,0,.35) 100%);pointer-events:none;animation:dmgFlash .4s ease-out forwards}
@keyframes dmgFlash{0%{opacity:1}100%{opacity:0}}

body.game-active{background:var(--sky-blue)!important}

/* ═══ Game Result Screen ═══ */
#game-result{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;background:rgba(14,77,107,.95);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);opacity:0;pointer-events:none;transition:opacity .5s ease}
#game-result.visible{opacity:1;pointer-events:auto}
.result-inner{text-align:center;max-width:380px;width:90%;max-height:calc(100dvh - 40px);overflow-y:auto;-webkit-overflow-scrolling:touch;padding:24px 20px}
.result-title{font-family:'Outfit',sans-serif;font-size:2.5rem;font-weight:900;color:var(--honey-gold);text-shadow:0 0 20px rgba(255,215,0,.6);letter-spacing:.15em;margin-bottom:1.5rem}
.result-score-main{margin-bottom:1.5rem}
.result-score-label{display:block;font-family:'Outfit',sans-serif;font-size:.65rem;font-weight:600;color:var(--honey-amber);letter-spacing:.2em;opacity:.7;margin-bottom:.3rem}
.result-score-value{display:block;font-family:'Outfit',sans-serif;font-size:3.5rem;font-weight:900;color:var(--honey-gold);text-shadow:0 0 20px rgba(255,215,0,.5)}
.result-score-sub{display:block;font-family:'Outfit',sans-serif;font-size:.7rem;color:rgba(255,248,220,.5);margin-top:.2rem}
.result-rank{font-family:'Outfit',sans-serif;font-size:1.3rem;font-weight:800;color:#4ade80;text-shadow:0 0 15px rgba(74,222,128,.5);margin:.8rem 0;animation:newRec .6s ease}
.hud-bees{color:#ff6b6b!important;text-shadow:0 0 10px rgba(255,107,107,.5),0 2px 4px rgba(0,0,0,.5)!important}
.lb-perfect .lb-card-pts{color:#4ade80!important;text-shadow:0 0 8px rgba(74,222,128,.4)}
.result-stats{display:flex;gap:1rem;justify-content:center;margin-bottom:1.2rem}
.result-stat{display:flex;flex-direction:column;align-items:center;background:rgba(255,255,255,.05);border-radius:12px;padding:10px 16px;min-width:80px}
.result-stat-icon{font-size:1.2rem;margin-bottom:2px}
.result-stat-val{font-family:'Outfit',sans-serif;font-size:1.4rem;font-weight:800;color:var(--honey-light)}
.result-stat-lbl{font-family:'Outfit',sans-serif;font-size:.55rem;color:rgba(255,248,220,.4);letter-spacing:.08em}
.result-new{font-family:'Outfit',sans-serif;font-size:1rem;font-weight:700;color:var(--honey-gold);text-shadow:0 0 15px rgba(255,215,0,.5);margin-bottom:.5rem;animation:newRec .6s ease}
@keyframes newRec{0%{transform:scale(.3);opacity:0}60%{transform:scale(1.3)}100%{transform:scale(1);opacity:1}}
.result-best{font-family:'Outfit',sans-serif;font-size:.7rem;color:rgba(255,248,220,.4);letter-spacing:.1em;margin-bottom:1.2rem}
.result-buttons{display:flex;gap:.8rem;justify-content:center;flex-wrap:wrap}
.result-btn{font-family:'Outfit',sans-serif;font-size:.85rem;font-weight:700;letter-spacing:.12em;padding:.7rem 1.8rem;border:2px solid var(--honey-gold);border-radius:50px;background:linear-gradient(135deg,rgba(255,215,0,.2),rgba(218,165,32,.1));color:var(--honey-gold);cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;transition:all .2s ease;text-shadow:0 0 8px rgba(255,215,0,.4);box-shadow:0 0 12px rgba(255,215,0,.12)}
.result-btn:active{transform:scale(.95);background:linear-gradient(135deg,rgba(255,215,0,.35),rgba(218,165,32,.2))}
.result-btn-exit{border-color:rgba(255,248,220,.2);background:transparent;color:rgba(255,248,220,.5);text-shadow:none;box-shadow:none}
.result-btn-rank{border-color:var(--honey-gold);background:rgba(255,215,0,.12)}

/* ═══ Exit Button ═══ */
.game-exit-btn{display:none;position:fixed;top:calc(12px + env(safe-area-inset-top,0px));left:calc(12px + env(safe-area-inset-left,0px));z-index:20;width:40px;height:40px;border:2px solid rgba(255,248,220,.3);border-radius:50%;background:rgba(14,77,107,.6);color:rgba(255,248,220,.7);font-size:1rem;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;backdrop-filter:blur(4px);transition:all .2s ease}
body.game-active .game-exit-btn{display:flex;align-items:center;justify-content:center}
.game-exit-btn:active{background:rgba(255,215,0,.3);border-color:var(--honey-gold);color:var(--honey-gold)}

/* ═══ Leaderboard Panel — Card Style ═══ */
#leaderboard-panel{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;background:rgba(14,77,107,.97);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);opacity:0;pointer-events:none;transition:opacity .4s ease;padding:env(safe-area-inset-top,16px) 0 env(safe-area-inset-bottom,16px) 0}
#leaderboard-panel.visible{opacity:1;pointer-events:auto}
.lb-inner{width:92%;max-width:380px;max-height:calc(100dvh - 48px);overflow-y:auto;-webkit-overflow-scrolling:touch;padding:20px 0}
.lb-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:1rem;padding:0 4px}
.lb-title{font-family:'Outfit',sans-serif;font-size:1.2rem;font-weight:900;color:var(--honey-gold);text-shadow:0 0 12px rgba(255,215,0,.5)}
.lb-close-btn{width:40px;height:40px;border:2px solid rgba(255,248,220,.25);border-radius:50%;background:rgba(255,248,220,.05);color:rgba(255,248,220,.7);font-size:1rem;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;transition:all .2s ease;display:flex;align-items:center;justify-content:center}
.lb-close-btn:active{background:rgba(255,248,220,.15);color:#fff}
.lb-tabs{display:flex;gap:6px;margin-bottom:1rem}
.lb-tab{flex:1;min-height:40px;display:flex;align-items:center;justify-content:center;border:1.5px solid rgba(255,215,0,.3);border-radius:20px;background:transparent;color:rgba(255,215,0,.5);font-family:'Outfit',sans-serif;font-size:.7rem;font-weight:700;letter-spacing:.1em;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;transition:all .2s ease}
.lb-tab.active{background:rgba(255,215,0,.15);color:var(--honey-gold);border-color:var(--honey-gold)}
/* Card-style ranking */
.lb-list{display:flex;flex-direction:column;gap:8px}
.lb-loading{text-align:center;padding:20px;color:rgba(255,255,255,.4);font-family:'Outfit',sans-serif;font-size:.8rem}
.lb-card{display:flex;align-items:center;gap:10px;padding:10px 12px;background:rgba(255,255,255,.04);border-radius:12px;border:1px solid rgba(255,255,255,.06);transition:background .2s ease}
.lb-card.lb-top{background:rgba(255,215,0,.06);border-color:rgba(255,215,0,.12)}
.lb-card.lb-me{background:rgba(255,215,0,.12);border-color:rgba(255,215,0,.25)}
.lb-card-rank{font-size:1.1rem;font-weight:700;color:rgba(255,248,220,.5);min-width:28px;text-align:center;font-family:'Outfit',sans-serif}
.lb-rank-1{color:#ffd700;text-shadow:0 0 8px rgba(255,215,0,.5);font-size:1.3rem}
.lb-rank-2{color:#c0c0c0;text-shadow:0 0 6px rgba(192,192,192,.4);font-size:1.2rem}
.lb-rank-3{color:#cd7f32;text-shadow:0 0 6px rgba(205,127,50,.4);font-size:1.2rem}
.lb-card-info{flex:1;display:flex;flex-direction:column;min-width:0}
.lb-card-name{font-family:'Outfit',sans-serif;font-size:.85rem;font-weight:700;color:var(--honey-light);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lb-card-date{font-family:'Outfit',sans-serif;font-size:.5rem;color:rgba(255,248,220,.3)}
.lb-card-score{text-align:right;display:flex;flex-direction:column;align-items:flex-end}
.lb-card-pts{font-family:'Outfit',sans-serif;font-size:1.2rem;font-weight:800;color:var(--honey-gold)}
.lb-card-sub{font-family:'Outfit',sans-serif;font-size:.5rem;color:rgba(255,248,220,.4)}
.lb-me .lb-card-name{color:var(--honey-gold)}

/* Name Input */
#lb-name-input-area{display:none;margin:1rem 0;padding:1rem;border:1px solid rgba(255,215,0,.3);border-radius:16px;background:rgba(255,215,0,.06)}
#lb-name-input-area.visible{display:block;animation:fadeSlideIn .4s ease}
@keyframes fadeSlideIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
.lb-qualify{font-family:'Outfit',sans-serif;font-size:.7rem;font-weight:700;color:var(--honey-gold);text-shadow:0 0 8px rgba(255,215,0,.4);margin-bottom:.6rem;text-align:center}
.lb-input-row{display:flex;flex-direction:column;gap:8px}
#lb-name{width:100%;padding:10px 14px;border:2px solid rgba(255,215,0,.3);border-radius:12px;background:rgba(0,0,0,.4);color:var(--honey-light);font-family:'Outfit',sans-serif;font-size:.9rem;outline:none;transition:border-color .2s ease;-webkit-appearance:none;appearance:none;min-height:44px}
#lb-name:focus{border-color:var(--honey-gold);box-shadow:0 0 12px rgba(255,215,0,.25)}
#lb-name::placeholder{color:rgba(255,248,220,.25);font-size:.7rem}
#lb-name.shake{animation:inputShake .4s ease}
@keyframes inputShake{0%,100%{transform:translateX(0)}25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
.lb-submit{width:100%!important;padding:12px 16px!important;font-size:.85rem!important;font-weight:800!important;white-space:nowrap;min-height:44px;border-radius:12px!important;background:linear-gradient(135deg,rgba(255,215,0,.3),rgba(218,165,32,.2))!important}

/* ═══ Leaderboard scroll fix ═══ */
.lb-list{max-height:calc(100dvh - 200px);overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;padding-bottom:env(safe-area-inset-bottom,16px)}

/* ═══ Mobile Responsive ═══ */
@media (max-width:480px){
  /* HUD */
  .hud-top{gap:1rem}
  .hud-label{font-size:.5rem}
  .hud-value{font-size:1.1rem}
  .hud-timer-wrap{width:140px;height:5px}
  .hud-honey-wrap{top:calc(62px + env(safe-area-inset-top,0px))}
  .hud-honey-bar{width:70px;height:4px}
  .hud-honey-label{font-size:.7rem}
  .hud-gauge{width:70px;height:8px}
  .hud-blast-btn{font-size:.6rem;padding:6px 12px;min-height:36px}
  /* Result */
  .result-inner{padding:16px 12px}
  .result-title{font-size:1.8rem;margin-bottom:1rem}
  .result-score-value{font-size:2.5rem}
  .result-stats{gap:.5rem}
  .result-stat{padding:8px 10px;min-width:60px}
  .result-stat-icon{font-size:1rem}
  .result-stat-val{font-size:1.1rem}
  .result-stat-lbl{font-size:.45rem}
  .result-new{font-size:.85rem}
  .result-best{font-size:.6rem;margin-bottom:.8rem}
  .result-buttons{gap:.5rem}
  .result-btn{font-size:.7rem;padding:.5rem 1.2rem;letter-spacing:.08em}
  /* Name input */
  #lb-name-input-area{margin:.6rem 0;padding:.8rem}
  .lb-qualify{font-size:.6rem}
  #lb-name{font-size:.8rem;padding:8px 12px;min-height:40px}
  #lb-name::placeholder{font-size:.6rem}
  .lb-submit{min-height:40px!important;font-size:.75rem!important}
  /* Leaderboard */
  .lb-inner{width:95%;padding:12px 0}
  .lb-title{font-size:1rem}
  .lb-close-btn{width:36px;height:36px;font-size:.85rem}
  .lb-tab{font-size:.6rem;min-height:36px;border-radius:16px}
  .lb-card{padding:8px 10px;gap:8px;border-radius:10px}
  .lb-card-rank{font-size:.95rem;min-width:24px}
  .lb-rank-1{font-size:1.1rem}
  .lb-rank-2,.lb-rank-3{font-size:1rem}
  .lb-card-name{font-size:.75rem}
  .lb-card-date{font-size:.45rem}
  .lb-card-pts{font-size:1rem}
  .lb-card-sub{font-size:.4rem}
  .lb-list{max-height:calc(100dvh - 180px)}
}
@media (max-width:360px){
  .hud-value{font-size:.9rem}
  .hud-timer-wrap{width:110px}
  .result-title{font-size:1.5rem}
  .result-score-value{font-size:2rem}
  .result-btn{padding:.4rem 1rem;font-size:.6rem}
  .result-stats{flex-wrap:wrap}
  .lb-card-name{font-size:.65rem}
  .lb-card-pts{font-size:.85rem}
}