:root{
  --bg1:#1b0033; --bg2:#40126b; --bg3:#8a2be2;
  --overlay: rgba(0,0,0,.78);
  --radius:18px; --fade:220ms; --pop:160ms;
  --neon:#ff2bf2;
  --text:#ffffff;
  --title-font: "Bungee","Ranchers", Impact, system-ui, sans-serif;
}

/* <-- fix: make the HTML hidden attribute actually hide elements */
[hidden]{ display:none !important; }

html,body{height:100%;margin:0}
body{
  display:grid; place-items:center;
  background: linear-gradient(130deg,var(--bg1),var(--bg2),var(--bg3));
  background-size: 240% 240%;
  animation: bgShift 18s ease-in-out infinite;
  cursor: url(/TacoInvaders/sauce-bottle.png) 20 20, auto; /* custom cursor */
  color: var(--text);
  font-family: var(--title-font);
}
body.bellhole{
  --bg1:#021e2a; --bg2:#044a42; --bg3:#11a97f;
  --neon:#a7ff4b;
  animation: bgShift 14s ease-in-out infinite;
}
body.bellhole .btn,
body.bellhole .hud-pill,
body.bellhole .hud-btn,
body.bellhole .order{
  border:1px solid rgba(17,169,127,.4);
}
@keyframes bgShift{
  0%{background-position:0% 50%}
  50%{background-position:100% 50%}
  100%{background-position:0% 50%}
}

/* Wrapper to position gamepad */
.hero-wrap{
  position:relative;
  display:inline-block;
}
.hero-wrap img{ filter: drop-shadow(0 0 6px rgba(0,0,0,.5)); }
/* Optional: Codex added drop-shadow to images inside the hero wrapper */
.hero-wrap img { filter: drop-shadow(0 0 6px rgba(0,0,0,.5)); }

/* Hidden hotspot over bell constellation */
.bell-hotspot{
  position:absolute;
  top:18%; left:78%;
  transform:translate(-50%,-50%);
  width:20%; height:20%;
  border-radius:50%;
  background:transparent; border:0; padding:0; cursor:pointer;
}
.bell-hotspot:focus-visible{ outline:2px solid #fff; }

/* Big hero image */
#hero{
  display:block;
  max-width: calc(100vw - clamp(24px, 6vmin, 48px) * 2);
  max-height: calc(100vh - clamp(24px, 6vmin, 48px) * 2);
  height:auto; width:auto; border-radius:var(--radius);
  box-shadow:0 18px 48px rgba(0,0,0,.55);
  user-select:none; cursor: pointer;
  transition: transform .08s ease-out, box-shadow .12s ease-out, filter var(--fade) ease, opacity var(--fade) ease;
  position:relative; z-index:2;
}
#hero:active{ transform: scale(.99); box-shadow:0 8px 28px rgba(0,0,0,.55); }

/* Peek row of icons */
.peek-row{
  position:absolute;
  bottom:calc(env(safe-area-inset-bottom) - clamp(24px,6vmin,48px));
  left:calc(clamp(12px,4vmin,24px) + env(safe-area-inset-left));
  z-index:1;
  display:flex;
  gap:clamp(8px,2vmin,16px);
}
.peek-icon{
  width:clamp(60px,15vmin,110px);
  opacity:0; pointer-events:none; cursor:pointer;
  transition: opacity var(--pop) ease, transform .25s ease;
  background:transparent; border:0; padding:0;
  transform: translateY(0) rotate(var(--icon-rot,0deg));
}
.peek-icon svg{ width:100%; height:100%; }
.peek-icon.revealed{ opacity:1; pointer-events:auto; }
/* Retint dock icons when visiting the green bellhole world */
body.bellhole #gamepad{
  filter:drop-shadow(0 0 6px rgba(0,0,0,.5)) hue-rotate(90deg) saturate(1.4) brightness(1.1);
}
body.bellhole #oracleIcon,
body.bellhole #rouletteIcon{
  filter:drop-shadow(0 0 6px rgba(0,0,0,.5)) hue-rotate(90deg) saturate(1.4) brightness(1.1);
}
body.bellhole #bellholeIcon{
  filter:drop-shadow(0 0 6px rgba(0,0,0,.5)) hue-rotate(180deg) saturate(1.3) brightness(1.1);
}

.peek-icon.revealed:hover,
.peek-icon.revealed:focus,
.peek-icon.revealed:active{
  animation: padBounce .45s forwards;
}

/* Dock icon wave animation */
@keyframes dockWave{
  0%{ transform: translateY(0) rotate(var(--icon-rot,0deg)); }
  60%{ transform: translateY(clamp(22px,5.5vmin,44px)) rotate(var(--icon-rot,0deg)); }
  80%{ transform: translateY(clamp(15px,3.75vmin,30px)) rotate(var(--icon-rot,0deg)); }
  100%{ transform: translateY(0) rotate(var(--icon-rot,0deg)); }
}

@media (prefers-reduced-motion: reduce) {
  .peek-icon{ animation: none !important; }
}

@keyframes padBounce{
  0%{ transform: translateY(0) rotate(var(--icon-rot,0deg)); }
  60%{ transform: translateY(clamp(22px,5.5vmin,44px)) rotate(var(--icon-rot,0deg)); }
  80%{ transform: translateY(clamp(15px,3.75vmin,30px)) rotate(var(--icon-rot,0deg)); }
  100%{ transform: translateY(clamp(18px,4.5vmin,36px)) rotate(var(--icon-rot,0deg)); }
}

#oracleIcon,
#rouletteIcon{
  --icon-rot: 180deg;
}

/* Hover wobble */
#hero:hover{ animation: wobble 900ms ease-in-out; }
@keyframes wobble{
  0%{transform: rotate(0) scale(1)}
  15%{transform: rotate(-2deg) scale(1.02)}
  30%{transform: rotate(2deg) scale(1.02)}
  45%{transform: rotate(-1.5deg)}
  60%{transform: rotate(1.5deg)}
  75%{transform: rotate(-.5deg)}
  100%{transform: rotate(0) scale(1)}
}

/* Dim/blur hero when a modal is open */
.blurred #hero{ filter: blur(2px) brightness(.75); }

/* Video modal */
.modal{
  position:fixed; inset:0; background:var(--overlay);
  display:grid; place-items:center; z-index:9999; padding:3vmin;
  backdrop-filter: blur(2px);
  opacity:0; visibility:hidden;
  transition: opacity var(--fade) ease, visibility var(--fade) step-end;
}
.modal.open{ opacity:1; visibility:visible; transition: opacity var(--fade) ease, visibility 0s linear; }
.player{
  width:min(1200px,92vw); aspect-ratio:16/9; background:#000;
  border-radius:var(--radius); overflow:hidden;
  box-shadow:0 18px 64px rgba(0,0,0,.65); position:relative;
  transform: scale(.98); opacity:0;
}
.modal.open .player{ animation: popIn var(--pop) ease-out forwards; }
@keyframes popIn{ from{transform:scale(.98);opacity:0} to{transform:scale(1);opacity:1} }

/* Oracle modal */
  .oracle-card{
    width:min(500px,calc(100vw - 32px));
    box-sizing:border-box;
    background:linear-gradient(130deg,var(--bg1),var(--bg2));
    color:var(--text);
    border-radius:var(--radius);
    padding:24px;
    box-shadow:0 18px 48px rgba(0,0,0,.55);
    position:relative;
    transform:scale(.98); opacity:0;
    display:flex; flex-direction:column; align-items:center; gap:16px;
  }
.modal.open .oracle-card{ animation: popIn var(--pop) ease-out forwards; }
  .fortune-text{
    background:url(/sauce_packet.png) center/contain no-repeat;
    min-height:200px; width:100%;
    display:flex; flex-wrap:wrap; align-content:center;
    align-items:center; justify-content:center; gap:.25em;
    align-items:center; justify-content:center;
    text-align:center; font:700 clamp(18px,3vw,24px)/1.3 var(--title-font); color:var(--text);
    padding:20px; overflow-wrap: normal; word-break: keep-all;
    padding:20px; overflow-wrap:anywhere;
  }
.fortune-text.shake{ animation: shake .4s; }
@keyframes shake{
  0%,100%{transform:rotate(0)}
  25%{transform:rotate(-2deg)}
  75%{transform:rotate(2deg)}
}
.oracle-buttons{ display:flex; gap:12px; }
.sauce-burst{
  position:absolute; top:50%; left:50%;
  width:80px; transform:translate(-50%,-50%);
  pointer-events:none; animation: burst .6s forwards;
}
@keyframes burst{ to{ transform:translate(-50%,-50%) scale(2); opacity:0; } }

/* fortune text wave/typing effect */
.fortune-char{
  display:inline-block;
  opacity:0; transform:translateY(10px);
  animation:charWave .5s forwards;
  animation-delay:calc(var(--i)*.05s);
}
.fortune-word{
  display:inline-flex;
}
@keyframes charWave{
  0%{opacity:0; transform:translateY(10px);}
  50%{opacity:1; transform:translateY(-6px);}
  100%{opacity:1; transform:translateY(0);}
}

/* Roulette modal */
  .roulette-card{
    width:min(500px,90vw);
    max-height:90vh;
    overflow-y:auto;
    background:linear-gradient(130deg,var(--bg1),var(--bg2));
    color:var(--text);
    border-radius:var(--radius);
    padding:24px; box-shadow:0 18px 48px rgba(0,0,0,.55);
    position:relative; transform:scale(.98); opacity:0;
    display:flex; flex-direction:column; align-items:center; gap:16px;
  }
.modal.open .roulette-card{ animation: popIn var(--pop) ease-out forwards; }
.wheel-wrap{ position:relative; width:min(260px,80vw); transition:width .45s ease-in-out; }
.wheel-wrap.shrunk{ width:min(82px,25vw); }
.wheel-wrap{ position:relative; width:min(260px,80vw); transition:width .3s ease; }
.wheel-wrap.shrunk{ width:min(110px,33vw); }
.wheel-wrap{ position:relative; width:min(260px,80vw); }
#rouletteWheel{ width:100%; height:auto; display:block; cursor:pointer; }
.roulette-result{ text-align:center; }
.roulette-result img{ width:clamp(140px,25vw,200px); height:auto; object-fit:contain; }
.roulette-result h3{ font-size:clamp(22px,4vw,30px); }
.roulette-result p{ font-size:clamp(16px,2.5vw,20px); }
.roulette-buttons{ display:flex; gap:12px; }
.roulette-log{ font-size:clamp(12px,1.8vw,14px); opacity:.8; text-align:center; }

@media (max-width:480px){
  .roulette-card{ width:90vw; padding:16px; }
}

@media (prefers-reduced-motion: reduce){
  .peek-icon:hover,
  .peek-icon:focus,
  .peek-icon:active{ animation:none; }
  #rouletteWheel{ transition:none !important; }
  .bellhole-portal{ animation:none; }
}

/* Close buttons */
.close{
  position:absolute; top:6px; right:6px; width:28px; height:28px;
  background: rgba(0,0,0,.45); color:#fff; border:0; border-radius:50%;
  font:600 16px/1 system-ui,sans-serif; line-height:26px; text-align:center; cursor:pointer; padding:0;
}
.close:hover{ background: rgba(0,0,0,.65); }
.close:focus-visible{ outline:2px solid #fff; outline-offset:2px; }
.close.small{
  width:36px;
  height:36px;
  line-height:34px;
  font-size:20px;
}

/* Taco rain (click-through) */
.taco-rain{
  position:fixed; inset:0; pointer-events:none; z-index: 9998; overflow:hidden;
}
.taco{
  position:absolute; top:-10vh;
  width:clamp(28px,6vmin,64px); height:clamp(28px,6vmin,64px);
  background-image:url(/favicon.png); background-size:cover; opacity:.95;
  filter: drop-shadow(0 4px 6px rgba(0,0,0,.4));
  animation: fall linear forwards;
}
body.bellhole .taco{
  filter: hue-rotate(90deg) drop-shadow(0 4px 6px rgba(0,0,0,.4));
}
@keyframes fall{
  to{ transform: translateY(110vh) rotate(360deg); opacity: 0.9; }
}

/* Bellhole portal */
.bellhole-portal{
  position:absolute;
  top:18%; left:76%;
  width:30%; aspect-ratio:1;
  transform:translate(-50%,-50%) scale(0);
  border-radius:50%;
  background:radial-gradient(circle, rgba(167,255,75,.8), rgba(167,255,75,0) 70%);
  pointer-events:none;
  z-index:3;
  overflow:hidden;
  animation: portalOpen 1.1s ease-out forwards;
}

body.bellhole .bellhole-portal{
  left:78%;
}
.portal-swirl{
  position:absolute;
  top:0; left:0;
  width:100%; height:100%;
  --swirl-scale:1;
  transform: scale(var(--swirl-scale));
  transform-origin:center;
  animation: portalSpin .5s linear infinite;
}
.portal-swirl.green{
  filter: drop-shadow(0 0 8px rgba(167,255,75,.7)) brightness(1.2);
}
.portal-swirl.purple{
  --swirl-scale:.85;
}
@keyframes portalSpin{
  from{ transform: rotate(0deg) scale(var(--swirl-scale)); }
  to{ transform: rotate(360deg) scale(var(--swirl-scale)); }
}

@keyframes portalOpen{
  0%{ transform:translate(-50%,-50%) scale(0); opacity:0; }
  60%{ transform:translate(-50%,-50%) scale(1); opacity:1; }
  100%{ transform:translate(-50%,-50%) scale(1.8); opacity:0; }
}
#hero.sucked,
#hero.emerging{
  animation-duration:1.1s;
  transform-origin:var(--portal-x,76%) var(--portal-y,18%);
}
#hero.sucked{ animation-name: heroSuck; animation-timing-function: ease-in-out; }
#hero.emerging{ animation-name: heroEmerge; animation-timing-function: ease-out; }
#hero.sucked{ animation: heroSuck 1.1s ease-in-out forwards; }

@keyframes heroSuck{
  0%{ transform:scale(1) rotate(0deg); opacity:1; filter:none; }
  70%{ transform:scale(1.25) rotate(180deg); filter:blur(2px); }
  100%{ transform:scale(0) rotate(540deg); opacity:0; filter:blur(6px); }
}

@keyframes heroEmerge{
  0%{ transform:scale(0) rotate(-540deg); opacity:0; filter:blur(6px); }
  30%{ opacity:1; }
  100%{ transform:scale(1) rotate(0deg); opacity:1; filter:none; }
}

/* Neon LIVE badge */
.live{
  position: fixed; top:14px; left:14px; z-index: 10000;
  font: 900 14px/1.1 var(--title-font);
  letter-spacing: 2px; text-transform: uppercase;
  color: #fff; padding: 6px 10px; border-radius: 10px;
  background: rgba(0,0,0,.35);
  box-shadow: 0 0 8px var(--neon), 0 0 16px var(--neon), inset 0 0 8px rgba(255,255,255,.15);
  border: 2px solid rgba(255,255,255,.2);
  text-decoration: none;
  animation: blink 1.4s steps(2,end) infinite, hue 6s linear infinite;
}
.live:hover,
.live:focus,
.live:active{
  text-decoration: none;
}
@keyframes blink{ 50%{ opacity: .35 } }
@keyframes hue{ 0%{ filter: hue-rotate(0deg) } 100%{ filter: hue-rotate(360deg) } }

/* Order button → Rickroll */
.order{
  position: fixed; right: 16px; bottom: 16px; z-index: 10000;
  font: 700 14px/1 var(--title-font); text-decoration: none;
  color:#000; background: #fff; padding: 12px 16px; border-radius: 999px;
  box-shadow: 0 10px 24px rgba(0,0,0,.35);
  transition: transform .08s ease-out, box-shadow .12s ease-out;
}
.order:hover{ transform: translateY(-1px); box-shadow: 0 14px 28px rgba(0,0,0,.45); }
.order:active{ transform: translateY(0); }

@media (max-width:480px){
  /* Hide Rickroll button when any modal is open on small screens */
  body.lock .order{ display:none; }
  /* Except when the Rickroll modal is open */
  body.lock.rickroll .order{ display:block; }
}

/* Game modal (superimposed over site) */
.game-modal{
  position:fixed; inset:0; background:var(--overlay);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  z-index:10001; padding:2vmin; gap:12px;
  backdrop-filter: blur(2px);
  opacity:0; visibility:hidden;
  transition: opacity var(--fade) ease, visibility var(--fade) step-end;
}
.game-modal.open{ opacity:1; visibility:visible; transition: opacity var(--fade) ease, visibility 0s linear; }
.game-wrap{
  position:relative;
  width:min(1200px,96vw);
  height:min(70vh, calc(96vw * 9/16));
  aspect-ratio:16/9;
  background:#000; border-radius:16px; overflow:hidden;
  box-shadow:0 18px 64px rgba(0,0,0,.65);
}
#gameCanvas{ width:100%; height:100%; display:block; }

/* HUD */
.game-hud{
  position:absolute; top:8px; left:8px; right:8px; z-index:2;
  display:flex; align-items:center; justify-content:space-between; flex-wrap:nowrap;
  gap:clamp(4px,1vw,8px);
  font:600 clamp(10px,2.2vw,14px)/1 system-ui, sans-serif; color:#fff;
  text-shadow:0 2px 6px rgba(0,0,0,.6);
}
.hud-left{ display:flex; gap:clamp(4px,1vw,8px); align-items:center; white-space:nowrap; }
.hud-right{
  display:flex;
  align-items:center;
  gap:clamp(4px,1vw,8px);
  opacity:.9;
  white-space:nowrap;
  padding-right:calc(clamp(4px,1vw,8px) + 40px);
}
.hud-help{ flex:1; white-space:nowrap; }
.hud-btn{
  width:clamp(24px,3vw,28px); height:clamp(24px,3vw,28px); border-radius:50%; border:0;
  background:rgba(0,0,0,.35); color:#fff; font:600 clamp(14px,2.5vw,16px)/1 system-ui,sans-serif;
  line-height:clamp(24px,3vw,28px); text-align:center; cursor:pointer;
}
.hud-btn.info{
  background:transparent;
  border:2px solid #fff;
}
.hud-btn:active{ transform:scale(.95); }
.hud-pill{
  display:inline-block; padding:clamp(4px,0.8vw,6px) clamp(6px,1.4vw,10px); border-radius:999px;
  background: rgba(0,0,0,.35); border:1px solid rgba(255,255,255,.25);
}

/* Base HUD pill already styled. Add multiplier accents */
body.mult-x2 .hud-pill#hudScore { border-color: rgba(255,255,255,.5); }
body.mult-x4 .hud-pill#hudScore { border-color: #4be3ff; box-shadow: 0 0 12px rgba(75,227,255,.25) inset; }
body.mult-x8 .hud-pill#hudScore { border-color: #ff2bf2; box-shadow: 0 0 14px rgba(255,43,242,.28) inset; }

/* Optionally tint the SCORE text slightly for 4x/8x */
body.mult-x4 #hudScore { color: #baf2ff; }
body.mult-x8 #hudScore { color: #ffd6ff; }

/* Touch controls (shown on small/touch devices) */
.touch-controls{
  display:flex;
  justify-content:space-between;
  width:90%;
  max-width:420px;
  margin:8px auto 0;
}
.touch-btn{
  width:56px; height:56px; border-radius:50%; border:0;
  background:rgba(0,0,0,.4); color:#fff; font:700 20px/1 system-ui,sans-serif;
}
.touch-btn:active{ transform:scale(.96); }

/* Info overlay */
.game-info{
  position:absolute; inset:0; background:rgba(0,0,0,.6); z-index:3;
  display:grid; place-items:center;
}
.info-card{
  background:#111; padding:16px; border-radius:16px; max-width:90%; width:320px;
  color:#fff; font:600 14px/1.4 system-ui,sans-serif; position:relative;
}
.info-card h2{ margin-top:0; text-align:center; font-size:20px; }
.info-card p{ margin:0 0 8px; }

/* End overlay */
.game-end{
  position:absolute; inset:0; background:rgba(0,0,0,.6); z-index:3;
  display:grid; place-items:center;
}
.end-card{
  width:min(720px,92%); border-radius:16px; padding:22px 18px;
  background: rgba(15,15,20,.9);
  border: 1px solid rgba(255,255,255,.2);
  box-shadow: 0 18px 60px rgba(0,0,0,.6);
  text-align:center;
  max-height:90vh;
  display:flex;
  flex-direction:column;
  overflow:hidden;
}
/* End overlay headline uses the same font as the canvas splash */
.end-rotator{
  min-height:clamp(48px,12vw,72px); display:grid; place-items:center;
  font: 900 clamp(20px,5vw,34px)/1.2 var(--title-font); letter-spacing: .5px;
  animation: neon 2.8s ease-in-out infinite;
  flex-shrink:0;
}
@keyframes neon{
  0%,100%{ text-shadow: 0 0 10px #ff2bf2, 0 0 20px #ff2bf2, 0 0 40px #66f7ff; }
  50%{ text-shadow: 0 0 18px #66f7ff, 0 0 36px #ff2bf2, 0 0 60px #ff2bf2; }
}
.end-buttons{ display:flex; justify-content:center; gap:10px; margin-top:24px; flex-shrink:0; }
.btn{
  appearance:none; border:0; border-radius:10px; padding:10px 14px; cursor:pointer;
  font:700 14px/1 var(--title-font); color:#111; background:#fff;
  box-shadow:0 8px 22px rgba(0,0,0,.35);
}
.btn:hover{ transform: translateY(-1px); }
.btn.ghost{ background: transparent; color:#fff; border:1px solid rgba(255,255,255,.4); }

.score-form{
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:16px;
  margin-top:20px;
  align-items:center;
  flex-shrink:0;
}
.score-form .round-score{
  flex-basis:100%;
  text-align:center;
  color:#fff;
  font:700 16px/1 system-ui,sans-serif;
}
.score-form input{
  width:70px;
  text-transform:uppercase;
  text-align:center;
  padding:6px;
  border-radius:6px;
  border:0;
  font:700 16px/1 system-ui,sans-serif;
  background:#ffe066;
  color:#111;
}
#btnSubmitScore{
  background:var(--neon);
  color:#fff;
}
.hud-mult{ color:#ff0; border-color:rgba(255,255,0,.7); }
.leaderboard{ list-style:none; padding:0; margin:10px auto 0; max-width:240px; overflow-y:auto; flex:1 1 auto; }
.leaderboard li{ display:flex; justify-content:space-between; gap:1.5rem; color:#fff; font:700 14px/1.4 system-ui,sans-serif; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  *{ animation: none !important; transition: none !important; }
  .taco{ animation-duration: 0s !important; }
}