/* Kenney Fonts (CC0) */
@font-face{font-family:"Kenney Future";src:url(./assets/fonts/KenneyFuture.ttf) format("truetype");font-display:swap}
@font-face{font-family:"Kenney Future Narrow";src:url(./assets/fonts/KenneyFutureNarrow.ttf) format("truetype");font-display:swap}
/* Dinosaur Chomp — layers on top of /styles.css */
body::after{display:none}                   /* the 3D jungle has its own ground */
html,body{overflow:hidden;touch-action:none;overscroll-behavior:none}
[hidden]{display:none !important}

.stage{position:fixed;inset:0}
.stage canvas{display:block;width:100%;height:100%}

/* ----- HUD ----- */
.hud{position:fixed;top:max(12px,env(safe-area-inset-top));left:12px;display:flex;gap:10px;pointer-events:none;flex-wrap:wrap;max-width:calc(100vw - 210px)}
.score-box{
  background:var(--cream);border-radius:22px;padding:.2em .8em;text-align:center;
  box-shadow:0 5px 0 rgba(16,26,61,.25);min-width:5.5em;
}
.score-box .label{display:block;font-size:.95rem;font-weight:800;opacity:.65}
.score-box b,.results b,.combo b,.meter-label{font-family:"Kenney Future Narrow","Kenney Future","Baloo 2",system-ui,sans-serif}
.score-box b{display:block;font-size:clamp(1.8rem,5vw,2.6rem);line-height:1}
.score-box.best{background:var(--sun)}
.score-box.time{background:var(--ice)}
.score-box.pop{animation:pop .3s}

.meters{position:fixed;top:calc(max(12px,env(safe-area-inset-top)) + 86px);left:12px;display:grid;gap:8px;pointer-events:none}
.meter{display:flex;align-items:center;gap:6px;font-size:1.4rem}
.meter-bar{width:clamp(130px,30vw,240px);height:18px;background:var(--cream);border-radius:10px;overflow:hidden;box-shadow:0 3px 0 rgba(16,26,61,.25)}
.meter-fill{height:100%;width:0;transition:width .15s}
.meter-label{font-size:.95rem;font-weight:800;color:var(--navy);background:var(--cream);border-radius:10px;padding:0 .5em}
.heat .meter-fill{background:linear-gradient(90deg,var(--sun),var(--orange))}
.heat.is-hot .meter-fill{background:#e0452a;animation:hot .4s infinite alternate}
.grow .meter-fill{background:#8e5bd6}
.grow.pop{animation:pop .5s}
@keyframes hot{to{opacity:.45}}
@keyframes pop{0%{transform:scale(1)}40%{transform:scale(1.25)}100%{transform:scale(1)}}

.combo{position:fixed;top:calc(max(12px,env(safe-area-inset-top)) + 150px);left:12px;display:grid;justify-items:start;pointer-events:none;
  color:var(--cream);text-shadow:0 3px 0 var(--navy),0 0 10px rgba(16,26,61,.5)}
.combo b{font-size:clamp(2.4rem,7vw,3.6rem);line-height:1;color:var(--sun)}
.combo span{font-weight:800;font-size:1.1rem}
.combo.pop{animation:combo .35s}
@keyframes combo{0%{transform:scale(1) rotate(0)}35%{transform:scale(1.5) rotate(-8deg)}100%{transform:scale(1)}}

.boss-damage{position:fixed;transform:translate(-50%,-100%);pointer-events:none;font-weight:800;
  font-family:"Kenney Future","Baloo 2",system-ui,sans-serif;text-shadow:0 4px 0 var(--navy),0 0 14px rgba(0,0,0,.4)}
.boss-damage b{display:block;font-size:inherit}
.boss-damage.hit b{animation:hit .18s}
@keyframes hit{0%{transform:scale(1.35) rotate(-6deg)}100%{transform:scale(1)}}

.pad-badge{
  position:fixed;bottom:max(12px,env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);
  background:var(--navy);color:var(--cream);border-radius:16px;padding:.3em .8em;
  font-weight:800;font-size:1rem;opacity:.85;pointer-events:none;
}
.toast{position:fixed;top:32%;left:50%;transform:translateX(-50%);background:var(--navy);color:var(--cream);
  font-size:clamp(1.3rem,4vw,2rem);font-weight:800;padding:.3em 1em;border-radius:24px;pointer-events:none;
  max-width:92vw;text-align:center}

/* ----- corner buttons: mute, home, full screen ----- */
.corner-btns{position:fixed;top:max(12px,env(safe-area-inset-top));right:12px;display:flex;gap:10px;z-index:5}
.btn.tiny{
  display:grid;place-items:center;width:1.6em;
  font-size:clamp(1.6rem,5vw,2.4rem);padding:.22em 0;line-height:1;
  border-radius:22px;text-decoration:none;
}
.btn.tiny img{width:1em;height:1em;filter:brightness(0) saturate(100%) invert(9%) sepia(35%) saturate(2400%) hue-rotate(215deg)}
.btn.tiny .fs-icon{width:1em;height:1em;color:var(--navy)}
.fs-out,.icon-off{display:none}
.btn.tiny.is-full .fs-in{display:none}
.btn.tiny.is-full .fs-out{display:inline}
#btn-mute.is-muted .icon-on{display:none}
#btn-mute.is-muted .icon-off{display:inline}

/* ----- Kenney UI Pack buttons + panels ----- */
.ui-btn{
  display:inline-grid;place-items:center;min-width:8em;padding:.5em 1.2em .7em;
  font:800 1.6rem "Kenney Future","Baloo 2","Trebuchet MS",system-ui,sans-serif;color:#fff;
  text-shadow:0 2px 0 rgba(0,0,0,.3);text-decoration:none;cursor:pointer;
  background:none;border:0;border-style:solid;border-width:14px 14px 18px;
  border-image:url(./assets/ui/button-green.png) 14 14 18 fill stretch;
}
.ui-btn.blue{border-image-source:url(./assets/ui/button-blue.png)}
.ui-btn.yellow{border-image-source:url(./assets/ui/button-yellow.png);color:var(--navy);text-shadow:none}
.ui-btn.small{font-size:1rem;min-width:0}
.ui-btn:active{transform:translateY(3px)}
.ui-btn:disabled{opacity:.6;cursor:default}

.overlay{position:fixed;inset:0;display:grid;place-items:center;padding:16px;overflow:auto;
  background:rgba(16,26,61,.3);z-index:6}
.card-panel{
  max-width:580px;width:100%;text-align:center;color:var(--navy);
  padding:clamp(14px,3vw,26px);
  border-style:solid;border-width:16px;border-image:url(./assets/ui/panel.png) 16 fill stretch;
  filter:drop-shadow(0 10px 18px rgba(16,26,61,.35));
}
.how{margin:0 auto .6em;border-collapse:collapse;font-size:clamp(.9rem,2.6vw,1.1rem);text-align:left}
.how th,.how td{padding:.05em .6em;vertical-align:middle}
.how td:first-child{font-weight:800}
.how img,.continue-hint img{width:34px;height:34px;vertical-align:middle;margin-right:2px;background:var(--navy);border-radius:10px;padding:2px}
.touch-hint{margin:.2em 0 .8em;opacity:.75}
.back{margin:.8em 0 0}
.over-title{font-size:clamp(2rem,6vw,3rem);margin:.1em 0}
.over-btns{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:.6em}
.new-best{font-size:1.4rem;font-weight:800;color:var(--orange);margin:.2em 0}
.results{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin:.4em 0}
.results div{background:var(--ice);border-radius:18px;padding:.3em .9em;display:grid}
.results span{font-size:.9rem;font-weight:800;opacity:.7}
.results b{font-size:2.2rem;line-height:1.1}
.continue-hint{margin:.8em 0 0;opacity:.8}
.continue-hint img{width:28px;height:28px}

/* ----- on-screen touch controls (Kenney Mobile Controls) ----- */
.touch-controls{display:none}
body.touch .touch-controls{
  display:flex;justify-content:space-between;align-items:flex-end;
  position:fixed;left:0;right:0;bottom:max(14px,env(safe-area-inset-bottom));padding:0 14px;z-index:3;pointer-events:none;
}
.touch-left,.touch-right{display:flex;gap:12px;align-items:flex-end}
.touch-btn{
  pointer-events:auto;width:84px;height:84px;border:0;padding:0;display:grid;place-items:center;align-content:center;
  background:url(./assets/touch/button_circle.png) center/contain no-repeat;opacity:.85;touch-action:none;
  color:var(--cream);font-weight:800;font-size:.8rem;text-shadow:0 2px 0 var(--navy);
}
.touch-btn img{width:40px;height:40px}
.touch-btn b{font-size:2.4rem;line-height:1}
.touch-btn.big{width:118px;height:118px}
.touch-btn.is-held,.touch-btn.tap{opacity:1;transform:scale(.92)}
.fight-btn{
  position:fixed;left:50%;bottom:max(24px,env(safe-area-inset-bottom));transform:translateX(-50%);z-index:4;
  width:160px;height:160px;border:0;border-radius:50%;background:#e0452a;color:#fff;
  display:grid;place-items:center;align-content:center;font:800 1.6rem "Kenney Future","Baloo 2",system-ui,sans-serif;
  box-shadow:0 8px 0 #8f2410,0 0 0 6px var(--cream);touch-action:none;cursor:pointer;animation:throb .6s infinite alternate;
}
.fight-btn img{width:60px;height:60px;filter:brightness(0) invert(1)}
.fight-btn:active{transform:translateX(-50%) translateY(6px);box-shadow:0 2px 0 #8f2410,0 0 0 6px var(--cream)}
@keyframes throb{to{scale:1.06}}
body.touch .fight-btn{bottom:calc(max(14px,env(safe-area-inset-bottom)) + 130px)}

/* ----- white/orange flash transitions ----- */
.flash{position:fixed;inset:0;z-index:5;pointer-events:none;background:radial-gradient(circle,#fff6d0,#ff9a3c)}
.flash.quick{animation:flashq .35s forwards}
.flash.cover{animation:fadein .45s forwards}
.flash.lava{background:radial-gradient(circle,#ff7a00,#3a0c00)}
.flash.black{background:#000}
.flash.black.cover{animation:fadein var(--fade,.6s) forwards}
.flash.fade{animation:fadeout .5s forwards}
@keyframes flashq{0%{opacity:.9}100%{opacity:0}}
@keyframes fadein{from{opacity:0}to{opacity:1}}
@keyframes fadeout{from{opacity:1}to{opacity:0}}

/* floating points over the cake */
.float-pts{position:fixed;transform:translate(-50%,-50%);pointer-events:none;z-index:4;
  font:800 2rem "Kenney Future","Baloo 2",system-ui,sans-serif;color:var(--sun);text-shadow:0 3px 0 var(--navy);
  animation:floatup .9s ease-out forwards}
@keyframes floatup{from{opacity:1;margin-top:0}to{opacity:0;margin-top:-70px}}