:root{
  --ink:#1a1026;
  --purple:#3b1d63;
  --purple2:#5a2c8f;
  --orange:#ff8a1f;
  --orange2:#ffb347;
  --green:#8bd450;
  --bone:#f4ead5;
  --shadow:0 6px 0 rgba(0,0,0,.35), 0 10px 24px rgba(0,0,0,.45);
  --font:"Trebuchet MS","Comic Sans MS","Segoe UI",system-ui,-apple-system,sans-serif;
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{
  margin:0;padding:0;width:100%;height:100%;overflow:hidden;background:#0b0714;
  font-family:var(--font);color:var(--bone);
  overscroll-behavior:none;user-select:none;-webkit-user-select:none;
}
body{position:fixed;inset:0;}

#stage{position:absolute;inset:0;overflow:hidden;background:#0b0714;}
#game{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none;}

.hidden{display:none !important;}

.toast{
  position:absolute;left:50%;top:max(14px, env(safe-area-inset-top));transform:translateX(-50%) translateY(-8px);
  z-index:90;max-width:min(92vw,560px);text-align:center;
  background:rgba(20,10,35,.94);color:#ffe9c9;border:2px solid rgba(255,180,90,.55);
  padding:12px 18px;border-radius:14px;font-size:clamp(13px,2.2vw,17px);line-height:1.35;
  box-shadow:0 8px 24px rgba(0,0,0,.6);opacity:0;pointer-events:none;
  transition:opacity .3s ease, transform .3s ease;
}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0);}


.screen{position:absolute;inset:0;z-index:20;}
.overlay{
  position:absolute;inset:0;z-index:40;display:flex;align-items:center;justify-content:center;
  background:rgba(10,5,20,.72);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);
  padding:16px;
}

/* ---------------- MENU ---------------- */
.menu-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.menu-shade{
  position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(80% 74% at 0% 100%, rgba(8,4,16,.78) 0%, rgba(8,4,16,.42) 38%, rgba(8,4,16,0) 72%);
}
.menu-content{
  position:absolute;inset:0;display:flex;flex-direction:column;align-items:flex-start;
  justify-content:flex-end;text-align:left;padding:clamp(14px,3vw,40px);
  padding-bottom:max(18px, env(safe-area-inset-bottom));
  padding-left:max(clamp(14px,3vw,40px), env(safe-area-inset-left));
  gap:10px;
}
.menu-title{
  margin:0;font-size:clamp(30px,7vw,74px);line-height:1;letter-spacing:1px;
  color:var(--bone);
  text-shadow:0 3px 0 #6a2b00,0 0 18px rgba(255,138,31,.65),0 6px 18px rgba(0,0,0,.7);
}
.menu-title span{display:block;font-size:.42em;color:var(--orange2);letter-spacing:6px;text-transform:uppercase;}
.menu-tag{margin:0;font-size:clamp(13px,2.2vw,20px);color:#ffe9c9;text-shadow:0 2px 6px rgba(0,0,0,.9);max-width:min(86vw,520px);}
.menu-buttons{display:flex;flex-direction:column;align-items:flex-start;gap:10px;margin-top:6px;width:auto;}
.menu-row{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-start;}

/* ---------------- BUTTONS ---------------- */
.btn{
  font-family:var(--font);font-weight:700;cursor:pointer;border:none;border-radius:16px;
  padding:14px 26px;font-size:clamp(16px,2.4vw,22px);
  color:#3a1b00;background:linear-gradient(180deg,var(--orange2),var(--orange));
  box-shadow:0 5px 0 #b4530a, 0 8px 18px rgba(0,0,0,.5);
  transition:transform .08s ease, filter .15s ease;
  min-width:min(70vw,260px);
}
.btn:hover{filter:brightness(1.08);}
.btn:active{transform:translateY(3px);box-shadow:0 2px 0 #b4530a,0 4px 10px rgba(0,0,0,.5);}
.btn-big{font-size:clamp(22px,4.4vw,40px);padding:18px 46px;letter-spacing:2px;border-radius:22px;
  background:linear-gradient(180deg,#ffd36b,var(--orange));box-shadow:0 7px 0 #b4530a,0 12px 26px rgba(0,0,0,.55);}
.btn-small{font-size:clamp(13px,2vw,16px);padding:10px 18px;min-width:0;border-radius:12px;background:linear-gradient(180deg,#6f4bd8,#4b2aa0);color:#fff;box-shadow:0 4px 0 #2c1666,0 6px 14px rgba(0,0,0,.45);}
.btn-ghost{background:transparent;color:#ffd9a8;box-shadow:none;border:2px solid rgba(255,217,168,.4);min-width:0;font-size:clamp(13px,2vw,16px);padding:9px 18px;}
.btn-ghost:hover{background:rgba(255,217,168,.12);}

.icon-btn{
  width:44px;height:44px;border-radius:12px;border:none;cursor:pointer;font-size:16px;
  background:rgba(30,15,55,.75);color:#ffe9c9;box-shadow:0 3px 0 rgba(0,0,0,.4);line-height:1;
}
.icon-btn:active{transform:translateY(2px);}

/* ---------------- HUD ---------------- */
#hud{position:absolute;inset:0;z-index:25;pointer-events:none;font-weight:700;}
.hud-top{
  position:absolute;top:0;left:0;right:0;display:flex;align-items:flex-start;justify-content:space-between;
  padding:max(10px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) 10px max(12px,env(safe-area-inset-left));
  gap:10px;
}
.hearts{display:flex;gap:4px;font-size:clamp(20px,3.4vw,30px);filter:drop-shadow(0 2px 3px rgba(0,0,0,.8));}
.hearts .h{transition:transform .2s ease,opacity .2s ease;}
.hearts .h.gone{opacity:.28;transform:scale(.8);}
.hud-center{text-align:center;flex:1;min-width:0;}
.hud-place{
  font-size:clamp(15px,2.8vw,26px);color:#fff;text-shadow:0 2px 0 #4a1d7a,0 0 14px rgba(140,80,255,.7);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.hud-sub{font-size:clamp(11px,1.9vw,15px);color:#ffd9a8;text-shadow:0 2px 4px #000;}
.hud-right{display:flex;align-items:center;gap:10px;}
.candy{
  font-size:clamp(15px,2.6vw,24px);background:rgba(30,15,55,.75);padding:8px 14px;border-radius:14px;
  color:#ffd76b;box-shadow:0 3px 0 rgba(0,0,0,.4);
}
#hud .icon-btn{pointer-events:auto;}

.hint{
  position:absolute;left:50%;bottom:max(14px,env(safe-area-inset-bottom));transform:translateX(-50%);
  background:rgba(20,10,35,.72);padding:9px 18px;border-radius:14px;font-size:clamp(12px,2vw,16px);
  color:#ffe9c9;white-space:nowrap;text-shadow:0 2px 4px #000;transition:opacity .5s ease;
}
.banner{
  position:absolute;left:50%;top:38%;transform:translate(-50%,-50%);
  font-size:clamp(28px,6.5vw,64px);color:#fff;text-align:center;line-height:1.05;
  text-shadow:0 4px 0 #6a2b00,0 0 24px rgba(255,138,31,.8),0 8px 22px rgba(0,0,0,.8);
  animation:pop .45s cubic-bezier(.2,1.6,.4,1);pointer-events:none;
}
@keyframes pop{0%{transform:translate(-50%,-50%) scale(.4);opacity:0;}100%{transform:translate(-50%,-50%) scale(1);opacity:1;}}

/* ---------------- PANELS ---------------- */
.panel{
  background:linear-gradient(180deg,#3a1f66,#241040);border:3px solid rgba(255,180,90,.5);
  border-radius:24px;padding:clamp(20px,4vw,40px);text-align:center;max-width:min(92vw,520px);width:100%;
  box-shadow:var(--shadow);display:flex;flex-direction:column;align-items:center;gap:12px;
  animation:pop .35s cubic-bezier(.2,1.6,.4,1);
}
.panel h2{margin:0 0 4px;font-size:clamp(24px,5vw,42px);color:var(--orange2);text-shadow:0 3px 0 #6a2b00,0 0 18px rgba(255,138,31,.6);}
.panel p{margin:0;color:#ffe9c9;font-size:clamp(14px,2.4vw,18px);}
.win-panel{border-color:rgba(255,210,110,.8);}
.win-pumpkin{font-size:clamp(50px,12vw,90px);animation:bob 1.6s ease-in-out infinite;}
@keyframes bob{0%,100%{transform:translateY(0) rotate(-4deg);}50%{transform:translateY(-12px) rotate(4deg);}}
.win-score{color:#ffd76b;font-size:clamp(16px,3vw,22px) !important;}

/* ---------------- LOADING ---------------- */
.loading{background:radial-gradient(circle at 50% 40%,#2a1547,#0b0714 70%);display:flex;align-items:center;justify-content:center;z-index:60;}
.load-inner{text-align:center;display:flex;flex-direction:column;align-items:center;gap:14px;}
.load-pumpkin{font-size:clamp(50px,12vw,90px);animation:bob 1.4s ease-in-out infinite;}
.load-inner h2{margin:0;color:var(--orange2);font-size:clamp(20px,4.5vw,34px);text-shadow:0 3px 0 #6a2b00;}
.load-bar{width:min(70vw,360px);height:16px;border-radius:10px;background:rgba(255,255,255,.12);overflow:hidden;border:2px solid rgba(255,180,90,.35);}
#loadFill{height:100%;width:0%;background:linear-gradient(90deg,var(--orange),var(--orange2));transition:width .2s ease;}
#loadPct{margin:0;color:#ffd9a8;font-size:14px;}

/* ---------------- ROTATE HINT ---------------- */
.rotate{position:absolute;inset:0;z-index:70;display:flex;align-items:center;justify-content:center;background:rgba(8,4,16,.9);padding:20px;}
.rotate-inner{text-align:center;display:flex;flex-direction:column;align-items:center;gap:14px;}
.rotate-icon{font-size:clamp(40px,12vw,80px);animation:rot 2s ease-in-out infinite;}
@keyframes rot{0%,100%{transform:rotate(0);}50%{transform:rotate(90deg);}}
.rotate-inner p{font-size:clamp(15px,3vw,22px);color:#ffe9c9;margin:0;}

/* ---------------- SHORT LANDSCAPE (phones) ---------------- */
@media (max-height:460px){
  .menu-content{gap:6px;padding:10px 12px;padding-bottom:max(10px,env(safe-area-inset-bottom));padding-left:max(12px,env(safe-area-inset-left));}
  .menu-tag{display:none;}
  .menu-buttons{gap:7px;}
  .btn{padding:8px 16px;font-size:clamp(12px,1.9vw,15px);min-width:0;}
  .btn-big{font-size:clamp(16px,3vw,22px);padding:10px 26px;border-radius:16px;}
  .btn-small{padding:8px 12px;}
  .btn-ghost{padding:7px 12px;}
}