:root{
  --ink:#1A0F30;
  --night:#140B2E;
  --sky:#241546;
  --violet:#3A2465;
  --wall:#573A8C;
  --lawn:#2C5A3B;
  --cream:#F2E3C4;
  --cream-hi:#FFF4D8;
  --amber:#FFCE5C;
  --spill:#F09A3E;
  --orange:#F4741F;
  --orange-d:#B94A12;
  --gold:#FFC23C;
  --magenta:#D64F8F;
  --teal:#39B7C9;
  --mint:#7CE6A8;
  --font-display:'Press Start 2P', monospace;
  --panel-shadow:6px 6px 0 var(--ink);
}
*{box-sizing:border-box;}
html,body{height:100%;margin:0;padding:0;overflow:hidden;background:var(--night);}
body{
  font-family:'Silkscreen',monospace;
  color:var(--cream);
  -webkit-font-smoothing:none;
  text-rendering:geometricPrecision;
  user-select:none;
  -webkit-user-select:none;
  -webkit-tap-highlight-color:transparent;
  touch-action:none;
}
img{image-rendering:pixelated;image-rendering:crisp-edges;}
button{font:inherit;color:inherit;background:none;border:0;padding:0;margin:0;cursor:pointer;}
button:focus-visible{outline:3px solid var(--mint);outline-offset:3px;}
.hidden{display:none !important;}

#game{position:fixed;inset:0;z-index:0;background:var(--night);}
#game canvas{display:block;width:100% !important;height:100% !important;image-rendering:pixelated;}
#ui{position:fixed;inset:0;z-index:2;pointer-events:none;}

/* ---------- HUD ---------- */
#hud{position:absolute;inset:0;}
.hud-left{position:absolute;top:clamp(8px,1.6vh,18px);left:clamp(8px,1.6vw,20px);display:flex;flex-direction:column;gap:8px;pointer-events:none;}
.panel{
  background:var(--cream);
  color:var(--ink);
  border:3px solid var(--ink);
  box-shadow:inset 0 0 0 2px var(--cream-hi), var(--panel-shadow);
  image-rendering:pixelated;
}
.candy-panel{
  display:flex;align-items:center;gap:clamp(4px,0.8vw,10px);
  padding:5px 10px 6px 6px;
  width:clamp(170px,22vw,246px);
  min-height:clamp(58px,7vw,84px);
}
.candy-panel.jolt{animation:jolt 240ms steps(3,end);}
@keyframes jolt{0%,100%{transform:translateY(0)}35%{transform:translateY(-4px)}70%{transform:translateY(1px)}}
.candy-panel .jar{height:clamp(38px,5.2vw,64px);width:auto;flex:none;}
.candy-meta{display:flex;flex-direction:column;min-width:0;flex:1;}
.eyebrow{font-family:var(--font-display);font-size:clamp(6px,0.68vw,9px);letter-spacing:0;opacity:.72;line-height:1.4;}
#candy-count{
  font-family:var(--font-display);
  font-size:clamp(20px,2.9vw,36px);
  line-height:1.25;
  color:var(--ink);
  text-shadow:3px 3px 0 var(--gold);
  font-variant-numeric:tabular-nums;
  letter-spacing:-1px;
  white-space:nowrap;
}
.progress-panel{
  width:clamp(182px,23vw,252px);
  padding:6px 9px 8px;
}
.progress-top{display:flex;justify-content:space-between;align-items:baseline;gap:6px;margin-bottom:4px;}
#houses-text{font-family:var(--font-display);font-size:clamp(8px,1vw,12px);color:var(--ink);white-space:nowrap;}
.house-row{display:grid;grid-template-columns:repeat(15, 12px);gap:1px;justify-content:start;}
.house-row img{width:12px;height:12px;display:block;}
.hud-right{
  position:absolute;top:clamp(8px,1.6vh,18px);right:clamp(8px,1.6vw,20px);
  display:flex;flex-direction:column;align-items:center;gap:8px;pointer-events:none;
}
.icon-btn{
  pointer-events:auto;
  width:clamp(46px,4.8vw,64px);
  height:clamp(46px,4.8vw,64px);
  background:var(--cream);
  border:3px solid var(--ink);
  box-shadow:inset 0 0 0 2px var(--cream-hi), 5px 5px 0 var(--ink);
  display:grid;place-items:center;
  padding:4px;
}
.icon-btn img{width:100%;height:100%;object-fit:contain;}
.icon-btn:active{transform:translate(3px,3px);box-shadow:inset 0 0 0 2px var(--cream-hi),2px 2px 0 var(--ink);}
.icon-btn.small{
  width:clamp(32px,3.2vw,42px);height:clamp(32px,3.2vw,42px);
  font-family:var(--font-display);font-size:clamp(11px,1.2vw,15px);color:var(--ink);
  box-shadow:inset 0 0 0 2px var(--cream-hi), 4px 4px 0 var(--ink);
}
.hint{
  position:absolute;left:50%;bottom:12px;transform:translateX(-50%);
  font-family:'Silkscreen',monospace;font-size:clamp(8px,0.9vw,11px);
  color:var(--cream);background:rgba(20,11,46,.7);
  padding:5px 9px;border:2px solid var(--ink);
  box-shadow:3px 3px 0 var(--ink);
  white-space:nowrap;pointer-events:none;opacity:1;transition:opacity .6s steps(4,end);
}
.hint.faded{opacity:0;}

/* ---------- prompt bubble ---------- */
.prompt{
  position:fixed;left:0;top:0;
  transform:translate(-50%,-100%);
  display:flex;align-items:center;gap:6px;
  background:var(--cream);
  color:var(--ink);
  border:3px solid var(--ink);
  box-shadow:inset 0 0 0 2px var(--cream-hi), 4px 4px 0 var(--ink);
  padding:5px 7px;
  pointer-events:auto;
  max-width:min(78vw,380px);
  z-index:6;
  animation:promptbob 900ms steps(2,end) infinite alternate;
}
@keyframes promptbob{from{translate:0 0}to{translate:0 -3px}}
.keycap{
  flex:none;
  background:var(--sky);color:var(--cream);
  border:2px solid var(--ink);
  padding:4px 5px 3px;
  font-family:'Silkscreen',monospace;font-weight:700;font-size:clamp(8px,0.9vw,11px);
  box-shadow:inset 0 0 0 1px var(--violet);
}
.prompt-label{
  font-family:var(--font-display);
  font-size:clamp(7px,0.8vw,10px);
  line-height:1.55;
  text-shadow:2px 2px 0 rgba(87,58,140,.3);
  white-space:normal;
}

/* ---------- quip ---------- */
.quip{
  position:fixed;left:50%;top:clamp(10px,1.8vh,20px);
  transform:translateX(-50%) translateY(-170%);
  background:var(--cream);color:var(--ink);
  border:3px solid var(--ink);
  box-shadow:inset 0 0 0 2px var(--gold), 5px 5px 0 var(--ink);
  padding:10px 14px;
  font-family:var(--font-display);
  font-size:clamp(8px,0.95vw,12px);
  line-height:1.6;
  text-align:center;
  max-width:min(76vw,720px);
  z-index:7;
  pointer-events:none;
  opacity:0;
  transition:transform 260ms steps(6,end), opacity 160ms steps(2,end);
}
.quip.show{transform:translateX(-50%) translateY(0);opacity:1;}
.quip.hide{transform:translateX(-50%) translateY(-170%);opacity:0;}

/* ---------- screens ---------- */
.screen{
  position:fixed;inset:0;
  display:flex;align-items:center;justify-content:center;
  background-color:rgba(20,11,46,.72);
  background-image:url(assets/pixel/dither.png);
  background-size:8px 8px;
  pointer-events:auto;
  z-index:10;
}
.start-screen{background-color:rgba(20,11,46,.18);align-items:stretch;justify-content:flex-start;}
.start-moon{
  position:absolute;top:clamp(12px,3.4vh,44px);right:clamp(14px,15vw,240px);
  width:clamp(96px,13vw,186px);height:auto;image-rendering:pixelated;pointer-events:none;
  filter:drop-shadow(6px 6px 0 #1A0F30);
}
.start-shade{
  position:absolute;inset:0;
  background-image:url(assets/pixel/dither.png);
  background-size:8px 8px;
  background-color:rgba(20,11,46,.16);
  pointer-events:none;
}
.start-inner{
  position:relative;z-index:2;
  width:100%;height:100%;
  display:flex;flex-direction:column;justify-content:space-between;
  padding:clamp(14px,3.4vh,46px) clamp(14px,4.6vw,64px);
  pointer-events:none;
}
.title-block{max-width:min(62%,880px);pointer-events:none;}
.title-line{
  font-family:var(--font-display);
  color:var(--cream);
  font-size:clamp(18px,4.1vw,54px);
  line-height:1.2;
  letter-spacing:-1px;
  text-shadow:
    3px 0 0 var(--orange), -3px 0 0 var(--orange), 0 3px 0 var(--orange), 0 -3px 0 var(--orange),
    7px 7px 0 var(--violet), 11px 11px 0 var(--ink);
  white-space:nowrap;
}
.title-ribbon{
  display:inline-block;margin-top:clamp(8px,1.4vh,16px);
  background:var(--violet);
  border:3px solid var(--ink);
  box-shadow:inset 0 0 0 2px var(--cream), 6px 6px 0 var(--ink);
  padding:clamp(5px,0.8vh,9px) clamp(14px,1.9vw,26px);
}
.title-ribbon span{
  font-family:var(--font-display);
  font-size:clamp(12px,1.75vw,24px);
  color:var(--cream);
  letter-spacing:2px;
}
.tagline{
  display:block;
  width:max-content;
  max-width:100%;
  margin:clamp(10px,1.6vh,18px) 0 0;
  background:rgba(20,11,46,.72);
  padding:4px 8px;
  border:2px solid var(--ink);
  font-family:'Silkscreen',monospace;font-weight:700;
  font-size:clamp(9px,1.05vw,14px);
  color:var(--gold);
  text-shadow:2px 2px 0 var(--ink);
  letter-spacing:0;
}
.start-actions{
  display:flex;flex-direction:column;align-items:flex-start;gap:clamp(6px,1vh,12px);
  pointer-events:none;
}
.big-btn{
  pointer-events:auto;
  width:clamp(150px,15vw,222px);
  height:clamp(54px,6vw,84px);
  background:var(--orange);
  border:4px solid var(--ink);
  box-shadow:inset 0 0 0 3px var(--amber), 0 9px 0 var(--orange-d), 0 9px 0 3px var(--ink);
  color:var(--ink);
  font-family:var(--font-display);
  font-size:clamp(15px,1.8vw,26px);
  text-shadow:2px 2px 0 var(--amber);
  display:grid;place-items:center;
  transition:none;
}
.big-btn:hover{filter:brightness(1.07);}
.big-btn:active:not(:disabled){transform:translateY(6px);box-shadow:inset 0 0 0 3px var(--amber),0 3px 0 var(--orange-d),0 3px 0 3px var(--ink);}
.big-btn:disabled{opacity:.55;cursor:wait;}
.small-line{
  margin:0;font-family:'Silkscreen',monospace;font-size:clamp(8px,0.85vw,11px);
  color:var(--cream);text-shadow:2px 2px 0 var(--ink);
  line-height:1.5;
}
.controls-line{opacity:.82;}
#loading-text{color:var(--gold);}

/* ---------- modals ---------- */
.modal{
  width:min(92vw,560px);
  max-height:92vh;
  display:flex;flex-direction:column;
  box-shadow:inset 0 0 0 2px var(--cream-hi), 8px 8px 0 var(--ink);
}
.panel-head{
  background:var(--cream);color:var(--ink);
  padding:clamp(9px,1.4vh,15px) clamp(10px,1.8vw,18px) clamp(7px,1.1vh,11px);
  border-bottom:3px solid var(--ink);
  text-align:center;
}
.panel-head h2{
  margin:0;font-family:var(--font-display);
  font-size:clamp(11px,1.8vw,21px);line-height:1.45;
  color:var(--ink);
  text-shadow:2px 2px 0 var(--gold);
}
.modal-body{
  background:var(--sky);color:var(--cream);
  padding:clamp(12px,2vh,20px);
  display:flex;flex-direction:column;gap:10px;
  overflow:auto;
}
.menu-btn{
  pointer-events:auto;
  background:var(--violet);color:var(--cream);
  border:3px solid var(--ink);
  box-shadow:inset 0 0 0 2px var(--wall), 5px 5px 0 var(--ink);
  padding:clamp(9px,1.3vh,13px) 12px;
  font-family:var(--font-display);font-size:clamp(9px,1.15vw,13px);
  line-height:1.4;
  text-align:center;
  width:100%;
}
.menu-btn.primary{background:var(--orange);color:var(--ink);box-shadow:inset 0 0 0 2px var(--amber),5px 5px 0 var(--ink);text-shadow:1px 1px 0 var(--amber);}
.menu-btn:active{transform:translate(3px,3px);box-shadow:inset 0 0 0 2px var(--wall),2px 2px 0 var(--ink);}
.menu-btn.primary:active{box-shadow:inset 0 0 0 2px var(--amber),2px 2px 0 var(--ink);}
.modal-help{margin-top:4px;text-align:center;opacity:.85;}
.help-copy{margin:0;font-family:'Silkscreen',monospace;font-size:clamp(9px,1vw,12px);line-height:1.65;color:var(--cream);}
.help-copy b{color:var(--gold);}
.quip-copy{
  margin:0;text-align:center;font-family:var(--font-display);
  font-size:clamp(8px,1.05vw,12px);line-height:1.8;color:var(--cream);
  text-shadow:2px 2px 0 var(--ink);
}
.reward-row{
  display:flex;align-items:center;justify-content:center;gap:10px;
  background:var(--ink);border:2px solid var(--violet);
  padding:10px 12px;
}
.reward-row img{width:33px;height:33px;}
#result-reward-text{font-family:var(--font-display);font-size:clamp(12px,1.8vw,20px);color:var(--gold);text-shadow:2px 2px 0 var(--ink);}
.button-row{display:flex;flex-direction:column;gap:8px;}
.end-stats{display:flex;gap:10px;}
.end-stats>div{flex:1;background:var(--ink);border:2px solid var(--violet);padding:10px;display:flex;flex-direction:column;align-items:center;gap:5px;}
.end-stats b{font-family:var(--font-display);font-size:clamp(13px,2vw,22px);color:var(--gold);text-shadow:2px 2px 0 var(--ink);}
.end-panel .quip-copy{color:var(--gold);}
#end-time{text-align:center;}

/* ---------- touch ---------- */
#touch{position:absolute;inset:0;pointer-events:none;}
.dpad{
  position:absolute;left:clamp(8px,2vw,20px);bottom:clamp(10px,2.4vh,24px);
  width:clamp(112px,17vmin,168px);height:clamp(112px,17vmin,168px);
  display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);
  gap:2px;pointer-events:auto;
}
.dpad-btn{
  background:var(--cream);border:3px solid var(--ink);
  box-shadow:inset 0 0 0 2px var(--cream-hi), 3px 3px 0 var(--ink);
  display:grid;place-items:center;padding:3px;
  touch-action:none;
}
.dpad-btn img{width:70%;height:70%;object-fit:contain;pointer-events:none;filter:brightness(0);}
.dpad-btn.active{transform:translate(2px,2px);box-shadow:inset 0 0 0 2px var(--cream-hi),1px 1px 0 var(--ink);filter:brightness(.9);}
.dpad-btn.up{grid-area:1/2/2/3;}
.dpad-btn.left{grid-area:2/1/3/2;}
.dpad-btn.right{grid-area:2/3/3/4;}
.dpad-btn.down{grid-area:3/2/4/3;}
.action-btn{
  position:absolute;right:clamp(10px,2.2vw,22px);bottom:clamp(16px,3vh,30px);
  width:clamp(58px,10.5vmin,82px);height:clamp(58px,10.5vmin,82px);
  background:var(--orange);border:4px solid var(--ink);
  box-shadow:inset 0 0 0 3px var(--amber), 5px 5px 0 var(--ink);
  color:var(--ink);font-family:var(--font-display);font-size:clamp(15px,2.2vmin,22px);
  display:grid;place-items:center;pointer-events:auto;touch-action:none;
  text-shadow:1px 1px 0 var(--amber);
}
.action-btn.active{transform:translate(3px,3px);box-shadow:inset 0 0 0 3px var(--amber),2px 2px 0 var(--ink);}
.action-btn.pulse{animation:actionpulse 700ms steps(2,end) infinite alternate;}
@keyframes actionpulse{from{filter:brightness(1)}to{filter:brightness(1.25)}}
body.touch #hint{bottom:calc(clamp(112px,17vmin,168px) + 18px);}

.sound-btn{
  position:absolute;right:clamp(14px,4.6vw,64px);bottom:clamp(16px,3vh,38px);
  pointer-events:auto;background:var(--cream);color:var(--ink);border:3px solid var(--ink);
  box-shadow:inset 0 0 0 2px var(--cream-hi),4px 4px 0 var(--ink);
  font-family:var(--font-display);font-size:clamp(7px,0.8vw,10px);letter-spacing:0;
  padding:8px 10px;z-index:4;
}
.sound-btn:active{transform:translate(3px,3px);box-shadow:inset 0 0 0 2px var(--cream-hi),1px 1px 0 var(--ink);}
.fly-candy{position:fixed;width:33px;height:33px;image-rendering:pixelated;pointer-events:none;z-index:24;will-change:transform;}
body.minigame #hud .hud-left,body.minigame #hud .hud-right,body.minigame #hint,body.minigame #prompt,body.minigame #quip,body.minigame #touch{display:none !important;}
.fade{
  position:fixed;inset:0;background:var(--night);opacity:0;pointer-events:none;
  transition:opacity 180ms steps(4,end);z-index:30;
}
.fade.on{opacity:1;}

/* ---------- responsive ---------- */
@media (max-width:600px){
  .start-moon{right:6px;top:86px;width:84px;opacity:.92;}
  .title-line{width:fit-content;margin-left:auto;margin-right:auto;background:rgba(20,11,46,.62);padding:3px 7px;}
  .sound-btn{right:10px;bottom:10px;font-size:7px;padding:6px 8px;}
  .start-inner{align-items:center;text-align:center;padding:18px 14px 22px;}
  .title-block{max-width:100%;}
  .title-line{white-space:normal;font-size:clamp(18px,5.5vw,30px);}
  .title-ribbon{margin-top:8px;}
  .tagline{font-size:10px;}
  .start-actions{align-items:center;gap:8px;}
  .big-btn{width:clamp(150px,52vw,210px);height:clamp(54px,13vw,72px);}
  .house-row{grid-template-columns:repeat(15,10px);}
  .house-row img{width:10px;height:10px;}
  .candy-panel{width:172px;min-height:58px;padding:4px 8px 5px 5px;}
  .candy-panel .jar{height:38px;}
  #candy-count{font-size:22px;}
  .progress-panel{width:184px;padding:5px 8px 7px;}
  .icon-btn{width:48px;height:48px;}
  .icon-btn.small{width:34px;height:34px;font-size:11px;}
  .prompt-label{font-size:7px;}
  .quip{top:146px;max-width:86vw;font-size:8px;padding:8px 10px;}
}
@media (max-height:520px) and (orientation:landscape){
  .start-inner{flex-direction:row;align-items:flex-start;justify-content:space-between;gap:18px;padding:14px 22px 18px;}
  .title-block{max-width:64%;}
  .start-actions{align-self:flex-end;}
  .sound-btn{left:22px;right:auto;bottom:12px;}
  .title-line{font-size:clamp(18px,3.4vw,34px);white-space:nowrap;}
  .title-ribbon{margin-top:7px;}
  .tagline{font-size:9px;margin-top:7px;}
  .start-actions{align-items:flex-end;text-align:right;}
  .big-btn{width:clamp(130px,20vw,170px);height:52px;font-size:15px;}
  .controls-line{font-size:8px;}
  .hud-left{top:6px;left:6px;gap:5px;}
  .candy-panel{width:160px;min-height:50px;padding:3px 7px 4px 4px;}
  .candy-panel .jar{height:34px;}
  #candy-count{font-size:19px;}
  .progress-panel{width:168px;padding:4px 7px 5px;}
  .house-row{grid-template-columns:repeat(15,9px);}
  .house-row img{width:9px;height:9px;}
  .hud-right{top:6px;right:6px;gap:5px;}
  .icon-btn{width:44px;height:44px;}
  .icon-btn.small{width:30px;height:30px;font-size:10px;}
  .hint{display:none;}
  .modal{max-height:94vh;}
  .modal-body{padding:10px;}
  .menu-btn{padding:7px 10px;font-size:9px;}
  .quip{top:86px;font-size:8px;}
}
@media (pointer:coarse){
  .hint{display:none;}
}