/* ZOOMIES! style.css — PART 3 "Presentation".
   Full-bleed canvas yard, HUD pinned to the top edge, overlays centred over the play field.
   Deliberately single-look (sunny backyard + collar-red ink), so there are no dark-mode blocks;
   every surface sets an explicit background. */
:root{
  --ink:#1c2433;
  --paper:#fff6e6;
  --collar:#e5483a;
  --ball:#d6ef3f;
  --sun:#ffd23f;
  --hot:#ff9b3d;
  --lawn:#4f9a3e;
  --mud:#7a4a26;
  --water:#59b7e8;
  --sky:#9fd8ff;
  --display:'Lilita One','Arial Black','Arial Rounded MT Bold',Impact,system-ui,sans-serif;
  --body:'Rubik',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --rainbow:linear-gradient(90deg,#ff5a5a,#ffd23f,#5be37d,#59b7e8,#c77dff,#ff5a5a);
  color-scheme:light;
}
*{box-sizing:border-box;}
[hidden]{display:none!important;}
html,body{height:100%;margin:0;overflow:hidden;background:var(--lawn);color:var(--ink);font-family:var(--body);-webkit-tap-highlight-color:transparent;}
canvas#game{position:fixed;inset:0;display:block;touch-action:none;background:#3f7a33;}
button{font-family:var(--body);cursor:pointer;color:var(--ink);}
button:focus-visible{outline:3px solid var(--sun);outline-offset:3px;}

/* ---------------------------------------------------------------- HUD
   Three things only: the Zoom meter (hero, top-left), the countdown (centre), critters bonked (right).
   The meter is a number, a bar and the paws; level/XP rides as a thin line under the bar. */
#hud{position:fixed;left:0;right:0;top:0;padding:calc(env(safe-area-inset-top,0px) + 10px) 16px 0;display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:14px;align-items:start;pointer-events:none;user-select:none;-webkit-user-select:none;}
.meter{justify-self:start;width:100%;max-width:340px;min-width:0;padding:6px 10px 7px;border-radius:14px;background:rgba(28,36,51,.42);border:3px solid rgba(28,36,51,.55);transform-origin:20% 50%;}
.meter.pop{animation:meterPop .45s cubic-bezier(.3,1.6,.5,1);}
.meter.hit{animation:meterHit .35s linear;}
@keyframes meterPop{0%{transform:scale(1)}35%{transform:scale(1.07) rotate(-1deg)}100%{transform:scale(1)}}
@keyframes meterHit{0%,100%{transform:translateX(0)}20%{transform:translateX(-6px)}40%{transform:translateX(5px)}60%{transform:translateX(-3px)}80%{transform:translateX(2px)}}
.meter-top{display:flex;align-items:center;gap:7px;min-width:0;line-height:1;}
.mlabel{font-weight:800;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--paper);text-shadow:0 1px 0 var(--ink);}
#znum{font-family:var(--display);font-weight:400;font-size:28px;color:var(--paper);-webkit-text-stroke:5px var(--ink);paint-order:stroke fill;font-variant-numeric:tabular-nums;min-width:2.1ch;text-align:right;}
.meter[data-st="3"] #znum{animation:rainbowText .35s linear infinite;}
.meter[data-st="f"] #znum{color:var(--sky);}
.mph{margin-left:auto;font-weight:800;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--paper);text-shadow:0 1px 0 var(--ink);white-space:nowrap;}
.mph b{font-family:var(--display);font-weight:400;font-size:18px;letter-spacing:0;font-variant-numeric:tabular-nums;display:inline-block;min-width:2ch;text-align:right;}
#flops{display:flex;gap:3px;align-items:center;margin-left:auto;}
.paw{display:block;width:19px;height:19px;
  background:
    radial-gradient(ellipse 34% 28% at 50% 70%,var(--paper) 96%,transparent 100%),
    radial-gradient(circle at 20% 38%,var(--paper) 13%,transparent 15%),
    radial-gradient(circle at 40% 18%,var(--paper) 12%,transparent 14%),
    radial-gradient(circle at 62% 18%,var(--paper) 12%,transparent 14%),
    radial-gradient(circle at 81% 38%,var(--paper) 13%,transparent 15%);
  filter:drop-shadow(1.5px 0 0 var(--ink)) drop-shadow(-1.5px 0 0 var(--ink)) drop-shadow(0 1.5px 0 var(--ink)) drop-shadow(0 -1.5px 0 var(--ink));}
.paw.gone{opacity:.28;filter:grayscale(1) drop-shadow(0 0 1px var(--ink));}
.paw.lost{animation:pawLost .7s ease-out;}
@keyframes pawLost{0%{transform:scale(1.8) rotate(0);opacity:1}60%{transform:scale(.8) rotate(200deg)}100%{transform:scale(1) rotate(360deg)}}

.zbar{--zs:1s;--zc:var(--ball);position:relative;height:24px;margin-top:6px;background:rgba(28,36,51,.85);border:3px solid var(--ink);border-radius:13px;overflow:hidden;box-shadow:0 3px 0 var(--ink);}
#zchip,#zfill{position:absolute;top:0;bottom:0;left:0;width:50%;}
#zchip{background:var(--paper);opacity:.9;}
#zfill{background:var(--zc);transition:width .08s linear;}
#zfill::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(115deg,rgba(255,255,255,.28) 0 10px,transparent 10px 22px);background-size:48px 100%;animation:stripes var(--zs) linear infinite;}
#zfill::after{content:"";position:absolute;left:0;right:0;top:2px;height:5px;border-radius:4px;background:rgba(255,255,255,.4);}
#zcap{position:absolute;top:0;bottom:0;left:90%;right:0;background:repeating-linear-gradient(45deg,rgba(28,36,51,.85) 0 4px,rgba(159,216,255,.6) 4px 8px);border-left:3px solid var(--ink);}
@keyframes stripes{to{background-position:48px 0}}
.zbar.s0{--zc:var(--sun);}
.zbar.s1{--zc:var(--ball);}
.zbar.s2{--zc:var(--hot);}
.zbar.s3 #zfill{background:var(--rainbow);background-size:200% 100%;animation:rainbowSlide .5s linear infinite;}
.zbar.low{--zc:var(--collar);animation:lowPulse .5s ease-in-out infinite;}
.zbar.flop{--zc:var(--sky);}
@keyframes rainbowSlide{to{background-position:-200% 0}}
@keyframes lowPulse{50%{border-color:var(--collar);box-shadow:0 3px 0 var(--ink),0 0 0 3px rgba(229,72,58,.55)}}
.zbar .tick{position:absolute;top:0;bottom:0;width:3px;margin-left:-1.5px;background:var(--ink);opacity:.75;}
.zstate{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-family:var(--display);font-size:15px;line-height:1;letter-spacing:.04em;color:var(--paper);-webkit-text-stroke:4px var(--ink);paint-order:stroke fill;white-space:nowrap;opacity:0;transition:opacity .15s;}
.zstate.on{opacity:1;}
.xprow{display:flex;align-items:center;gap:7px;margin-top:5px;}
#hudLvl{font-family:var(--display);font-size:12px;line-height:1;color:#a8f0b0;text-shadow:0 1px 0 var(--ink);white-space:nowrap;}
#hudLvl.pop{animation:meterPop .5s cubic-bezier(.3,1.6,.5,1);}
.xpbar{flex:1;height:6px;background:rgba(28,36,51,.75);border-radius:4px;overflow:hidden;}
#xpfill{height:100%;width:0;background:linear-gradient(90deg,#4fcf6a,#a8f0b0);transition:width .15s ease-out;}
.clock{display:flex;flex-direction:column;align-items:center;line-height:1;padding-top:2px;}
#timer{font-family:var(--display);font-size:42px;color:var(--paper);-webkit-text-stroke:7px var(--ink);paint-order:stroke fill;text-shadow:0 4px 0 var(--ink);line-height:1;font-variant-numeric:tabular-nums;letter-spacing:.02em;}
#timer.final{color:var(--sun);}
#timer.last{color:var(--hot);animation:wobble .5s ease-in-out infinite;}
.goal{margin-top:3px;font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--ink);background:var(--hot);border:2px solid var(--ink);border-radius:999px;padding:2px 8px 1px;white-space:nowrap;}
.side{justify-self:end;display:flex;align-items:center;padding-top:6px;}
.kills{display:flex;align-items:center;gap:6px;}
.kicon{display:block;width:24px;height:24px;border-radius:50%;background:#ff5a4a;border:3px solid var(--ink);box-shadow:0 2px 0 var(--ink);position:relative;}
.kicon::before,.kicon::after{content:"";position:absolute;left:50%;top:50%;width:13px;height:3px;margin:-1.5px 0 0 -6.5px;background:var(--paper);border-radius:2px;transform:rotate(45deg);}
.kicon::after{transform:rotate(-45deg);}
#sub{font-family:var(--display);font-weight:400;font-size:30px;line-height:1;color:var(--paper);-webkit-text-stroke:6px var(--ink);paint-order:stroke fill;font-variant-numeric:tabular-nums;}
@keyframes wobble{0%,100%{transform:rotate(-2deg)}50%{transform:rotate(2deg) scale(1.04)}}
@keyframes rainbowText{0%{color:#ff5a5a}25%{color:#ffd23f}50%{color:#5be37d}75%{color:#59b7e8}100%{color:#ff5a5a}}

/* boss: one thin line (name + bar) at the bottom on desktop, under the HUD on phones */
#boss{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(env(safe-area-inset-bottom,0px) + 18px);width:min(420px,calc(100% - 32px));pointer-events:none;display:flex;align-items:center;gap:8px;animation:bossIn .5s cubic-bezier(.3,1.5,.5,1);}
@keyframes bossIn{from{transform:translate(-50%,40px);opacity:0}}
#boss .bname{flex:none;font-family:var(--display);font-size:15px;line-height:1;color:#d6f0ff;-webkit-text-stroke:4px var(--ink);paint-order:stroke fill;letter-spacing:.03em;white-space:nowrap;}
.bbar{position:relative;flex:1;height:12px;border:3px solid var(--ink);border-radius:8px;background:rgba(28,36,51,.8);overflow:hidden;}
#bosschip,#bossfill{position:absolute;top:0;bottom:0;left:0;width:100%;}
#bosschip{background:var(--paper);}
#bossfill{background:repeating-linear-gradient(115deg,#7cc8ff 0 8px,var(--water) 8px 16px);transition:width .1s linear;}

/* banner: the one voice for announcements. A short line in the band under the clock (render.js sets --band
   from the HUD's real height), never over the middle of the screen where Biscuit runs. */
#banner{position:fixed;left:0;right:0;top:var(--band,96px);text-align:center;font-family:var(--display);font-size:clamp(26px,3.6vw,42px);line-height:1;color:var(--paper);-webkit-text-stroke:6px var(--ink);paint-order:stroke fill;text-shadow:0 3px 0 var(--ink);pointer-events:none;opacity:0;padding:0 16px;text-wrap:balance;}
#banner small{display:block;margin-top:5px;font-family:var(--body);font-weight:800;font-size:13px;letter-spacing:.04em;line-height:1.2;-webkit-text-stroke:0;text-shadow:0 1px 0 var(--ink),1px 0 0 var(--ink),-1px 0 0 var(--ink),0 -1px 0 var(--ink);color:var(--paper);white-space:normal;}
#banner.sm{font-size:clamp(20px,2.6vw,28px);-webkit-text-stroke-width:5px;}
#banner.go{animation:pop 1.6s ease-out forwards;}
#banner.b-go{color:var(--ball);}
#banner.b-flop{color:var(--sky);animation-name:flopPop;}
#banner.b-water{color:#bfe7ff;}
#banner.b-evo{color:#ffe98a;animation-duration:2.2s;}
#banner.b-danger{color:#ff8a7a;animation-name:dangerPop;}
#banner.b-super{color:var(--sun);animation:superPop 1.4s ease-out forwards,rainbowText .3s linear infinite;}
@keyframes pop{0%{opacity:0;transform:translateY(-10px) scale(.7)}12%{opacity:1;transform:scale(1.08)}22%{transform:scale(1)}80%{opacity:1}100%{opacity:0;transform:translateY(-8px)}}
@keyframes flopPop{0%{opacity:0;transform:translateY(-30px)}15%{opacity:1;transform:translateY(4px) scaleY(.8)}25%{transform:none}80%{opacity:1}100%{opacity:0}}
@keyframes dangerPop{0%{opacity:0;transform:scale(1.4)}10%{opacity:1;transform:scale(1)}14%,22%{transform:translateX(-5px)}18%,26%{transform:translateX(5px)}30%{transform:none}80%{opacity:1}100%{opacity:0}}
@keyframes superPop{0%{opacity:0;transform:scale(.4) rotate(-8deg)}12%{opacity:1;transform:scale(1.15) rotate(3deg)}24%,85%{opacity:1;transform:none}100%{opacity:0;transform:scale(1.15)}}

/* ---------------------------------------------------------------- overlays */
.overlay{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;padding:24px 16px;background:rgba(28,36,51,.55);overflow-y:auto;overscroll-behavior:contain;}
.overlay>.panel{margin:auto;}
.panel{position:relative;background:var(--paper);border:4px solid var(--ink);border-radius:24px;box-shadow:0 10px 0 var(--ink);padding:26px 24px;width:min(560px,100%);animation:panelIn .35s cubic-bezier(.3,1.4,.5,1);}
@keyframes panelIn{from{transform:translateY(30px) scale(.94);opacity:0}}
.panel h1{font-family:var(--display);font-weight:400;font-size:clamp(50px,14.5vw,88px);line-height:.9;margin:6px 0 2px;color:var(--collar);letter-spacing:.01em;transform:rotate(-3deg);white-space:nowrap;}
.logo span{display:inline-block;-webkit-text-stroke:9px var(--ink);paint-order:stroke fill;text-shadow:0 6px 0 var(--ink);animation:hop 1.1s ease-in-out infinite;}
.logo span:nth-child(2){animation-delay:.07s}.logo span:nth-child(3){animation-delay:.14s}.logo span:nth-child(4){animation-delay:.21s}
.logo span:nth-child(5){animation-delay:.28s}.logo span:nth-child(6){animation-delay:.35s}.logo span:nth-child(7){animation-delay:.42s}
.logo span:nth-child(8){animation-delay:.49s;color:var(--sun);}
@keyframes hop{0%,60%,100%{transform:translateY(0)}30%{transform:translateY(-10px) rotate(-4deg)}}
.panel h2{font-family:var(--display);font-weight:400;font-size:clamp(34px,8vw,50px);line-height:1.05;margin:0 0 6px;color:var(--collar);-webkit-text-stroke:6px var(--ink);paint-order:stroke fill;text-shadow:0 3px 0 var(--ink);text-wrap:balance;letter-spacing:.02em;}
.panel p{margin:10px 0;line-height:1.5;font-size:15px;max-width:60ch;}
.tag:empty{display:none;}
.tag{display:inline-block;font-weight:800;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--paper);background:var(--mud);border-radius:999px;padding:4px 10px;}
.controls{display:grid;grid-template-columns:auto 1fr;gap:8px 14px;margin:16px 0 20px;font-size:14px;align-items:baseline;}
kbd{font-family:var(--body);font-weight:800;font-size:12px;background:var(--ink);color:var(--paper);border-radius:7px;padding:4px 8px;white-space:nowrap;box-shadow:0 2px 0 rgba(28,36,51,.35);}
.big{font-family:var(--display);font-size:26px;letter-spacing:.03em;background:var(--collar);color:var(--paper);border:4px solid var(--ink);border-radius:16px;padding:12px 28px;box-shadow:0 6px 0 var(--ink);text-shadow:0 2px 0 var(--ink);transition:transform .08s,box-shadow .08s;}
.big:hover{transform:translateY(-2px) rotate(-1deg);box-shadow:0 8px 0 var(--ink);}
.big:active{transform:translateY(4px);box-shadow:0 2px 0 var(--ink);}
#startbtn{animation:nudge 1.6s ease-in-out infinite;}
@keyframes nudge{0%,70%,100%{transform:none}78%{transform:rotate(-3deg) scale(1.04)}86%{transform:rotate(3deg) scale(1.04)}}

/* title: Biscuit runs laps on the open side of the screen (render.js reads the panel position) */
#title{background:linear-gradient(90deg,rgba(28,36,51,0) 0%,rgba(28,36,51,.15) 40%,rgba(28,36,51,.55) 100%);}
@media (min-width:980px){#title{justify-content:flex-end;padding-right:max(48px,6vw);}#title>.panel{margin:auto 0;}}
@media (max-width:979px){#title{background:rgba(28,36,51,.45);}}

/* level-up cards (DOM built by combat.js) */
#levelup .panel{text-align:left;}
.cards{display:grid;gap:12px;margin-top:14px;}
.card{display:grid;grid-template-columns:56px 1fr;gap:12px;align-items:center;text-align:left;background:#fff;border:3px solid var(--ink);border-radius:16px;padding:12px 14px;box-shadow:0 5px 0 var(--ink);color:var(--ink);animation:cardIn .4s cubic-bezier(.3,1.5,.5,1) backwards;transition:transform .1s,background .1s;}
.card:nth-child(2){animation-delay:.07s}.card:nth-child(3){animation-delay:.14s}
@keyframes cardIn{from{opacity:0;transform:translateY(24px) rotate(-2deg)}}
.card:hover,.card:focus-visible{background:#fffbd1;transform:translateY(-3px) rotate(-.6deg);}
.card:active{transform:translateY(3px);box-shadow:0 2px 0 var(--ink);}
.card.evo{background:linear-gradient(120deg,#eef6ff,#d9efff 50%,#eef6ff);background-size:200% 100%;border-color:#2b5c8a;box-shadow:0 5px 0 #2b5c8a,0 0 0 4px rgba(89,183,232,.35);animation:cardIn .4s cubic-bezier(.3,1.5,.5,1) backwards,shine 1.6s linear infinite;}
@keyframes shine{to{background-position:-200% 0}}
.icon{width:56px;height:56px;border-radius:15px;border:3px solid var(--ink);display:grid;place-items:center;font-family:var(--display);font-size:28px;color:var(--paper);text-shadow:0 2px 0 var(--ink);box-shadow:inset 0 -5px 0 rgba(0,0,0,.18),inset 0 4px 0 rgba(255,255,255,.25);}
/* canvas-drawn mini icons (render.js swaps the letter tile for art) */
.icon.drawn{background-size:86% 86%,100% 100%!important;background-position:center!important;background-repeat:no-repeat!important;color:transparent;text-shadow:none;}
/* rarity frames: New (common) · Upgrade (rare, blue) · Max level (epic, purple) · Evolution (legendary, gold) */
.card{position:relative;}
.card[data-rlabel]::after{content:attr(data-rlabel);position:absolute;top:-10px;right:12px;font-weight:800;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--paper);background:var(--ink);border:2px solid var(--ink);border-radius:999px;padding:2px 8px;}
.card[data-rarity="rare"]{border-color:#2f6fd0;box-shadow:0 5px 0 #1f4f9a,inset 0 0 0 2px #cfe2ff;}
.card[data-rarity="rare"]::after{background:#2f6fd0;border-color:#1f4f9a;}
.card[data-rarity="rare"] .icon{border-color:#1f4f9a;}
.card[data-rarity="epic"]{border-color:#8a3fd1;background:linear-gradient(180deg,#fff,#f6eeff);box-shadow:0 5px 0 #5f2596,inset 0 0 0 2px #e6d4ff;}
.card[data-rarity="epic"]::after{background:#8a3fd1;border-color:#5f2596;}
.card[data-rarity="epic"] .icon{border-color:#5f2596;box-shadow:0 0 0 3px rgba(138,63,209,.3),inset 0 -5px 0 rgba(0,0,0,.18);}
.card[data-rarity="legendary"]{border-color:#c98a00;background:linear-gradient(120deg,#fff8dc,#ffe9a3 50%,#fff8dc);background-size:200% 100%;box-shadow:0 5px 0 #8a5d00,0 0 0 4px rgba(255,210,63,.45);animation:cardIn .4s cubic-bezier(.3,1.5,.5,1) backwards,shine 1.6s linear infinite;}
.card[data-rarity="legendary"]::after{background:#e0a100;border-color:#8a5d00;color:var(--ink);}
.card[data-rarity="legendary"] .icon{border-color:#8a5d00;box-shadow:0 0 0 3px rgba(255,210,63,.6),inset 0 -5px 0 rgba(0,0,0,.18);}
.card[data-rarity]:hover,.card[data-rarity]:focus-visible{filter:brightness(1.04);}
.lustats{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px;}
.lustats:empty{display:none;}
.lus{display:inline-flex;align-items:baseline;gap:5px;font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--mud);background:#fff;border:2px solid var(--ink);border-radius:10px;padding:4px 8px;}
.lus b{font-family:var(--display);font-weight:400;font-size:16px;letter-spacing:0;color:var(--ink);font-variant-numeric:tabular-nums;}
.card b{font-family:var(--display);font-weight:400;font-size:22px;letter-spacing:.02em;}
.card .lv{display:inline-block;font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--paper);background:var(--mud);border-radius:999px;padding:2px 8px;margin-left:8px;vertical-align:3px;}
.card .lv:empty{display:none;}
.card small{display:block;font-size:14px;line-height:1.35;margin-top:3px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.card small+small{font-size:12px;opacity:.9;-webkit-line-clamp:1;}

/* end screen: the frozen yard blurs out behind the card; in-run buttons go away */
#end{backdrop-filter:blur(5px) saturate(.75);-webkit-backdrop-filter:blur(5px) saturate(.75);}
body:has(#end:not([hidden])) #topbtns,body:has(#end:not([hidden])) #drift,body:has(#end:not([hidden])) #banner,
body:has(#levelup:not([hidden])) #drift,body:has(#levelup:not([hidden])) #banner,body:has(#pause:not([hidden])) #drift{display:none!important;}
/* end screen */
#end .panel{text-align:left;}
#end.win .panel{background:linear-gradient(180deg,#fff6e6,#fff0c9);}
#end.lose .panel{background:linear-gradient(180deg,#f1f4fb,#e3e9f5);}
#end.lose h2{color:#3f6fb5;}
#end.win h2::after{content:" zzz";color:var(--mud);font-size:.55em;text-shadow:none;animation:snore 1.6s ease-in-out infinite;display:inline-block;}
@keyframes snore{50%{transform:translate(4px,-6px);opacity:.5}}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:16px 0 20px;}
.stat{border:3px solid var(--ink);border-radius:14px;padding:10px 12px;background:#fff;box-shadow:0 4px 0 var(--ink);animation:cardIn .4s cubic-bezier(.3,1.5,.5,1) backwards;min-width:0;}
.stat:nth-child(2){animation-delay:.06s}.stat:nth-child(3){animation-delay:.12s}.stat:nth-child(4){animation-delay:.18s}.stat:nth-child(5){animation-delay:.24s}.stat:nth-child(6){animation-delay:.3s}
.stat b{display:block;font-family:var(--display);font-weight:400;font-size:28px;line-height:1.05;font-variant-numeric:tabular-nums;overflow-wrap:anywhere;}
.stat b.long{font-size:19px;line-height:1.15;overflow-wrap:normal;word-break:normal;}
.stat.hero{grid-column:span 2;background:var(--sun);}
.stat.hero b{font-size:40px;}
.stat .best{display:inline-block;margin-left:6px;font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--paper);background:var(--collar);border-radius:999px;padding:2px 7px;vertical-align:4px;}
.stat .was{display:block;font-size:11px;font-weight:600;letter-spacing:0;text-transform:none;color:var(--ink);opacity:.7;margin-top:2px;}
.stat span{font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--mud);}

/* ---------------------------------------------------------------- touch + small buttons */
#drift{position:fixed;right:calc(16px + env(safe-area-inset-right,0px));bottom:calc(env(safe-area-inset-bottom,0px) + 28px);width:96px;height:96px;border-radius:50%;font-family:var(--display);font-size:21px;color:var(--paper);background:rgba(229,72,58,.88);border:4px solid var(--ink);box-shadow:0 6px 0 var(--ink);text-shadow:0 2px 0 var(--ink);touch-action:none;user-select:none;-webkit-user-select:none;}
#drift.on{transform:translateY(5px);box-shadow:0 1px 0 var(--ink);background:var(--sun);color:var(--ink);text-shadow:none;}
#topbtns{position:fixed;right:16px;bottom:calc(env(safe-area-inset-bottom,0px) + 16px);display:flex;gap:8px;}
.small{font-weight:800;font-size:12px;letter-spacing:.06em;text-transform:uppercase;background:var(--paper);color:var(--ink);border:3px solid var(--ink);border-radius:10px;padding:7px 11px;box-shadow:0 3px 0 var(--ink);}
.small:active{transform:translateY(2px);box-shadow:0 1px 0 var(--ink);}
.small:disabled,.small[disabled]{opacity:.45;cursor:not-allowed;transform:none;box-shadow:0 1px 0 var(--ink);text-decoration:line-through;}
@media (pointer:coarse){#topbtns{right:auto;left:16px;}}

/* ---------------------------------------------------------------- narrow screens */
@media (max-width:640px){
  #hud{grid-template-columns:minmax(0,1fr) auto;gap:10px;padding-top:calc(env(safe-area-inset-top,0px) + 8px);}
  .meter{max-width:none;padding:5px 9px 6px;border-radius:12px;}
  #znum{font-size:22px;}
  .mlabel{font-size:10px;}
  .paw{width:15px;height:15px;}
  .zbar{height:16px;margin-top:4px;border-radius:10px;}
  .zstate{font-size:12px;-webkit-text-stroke-width:3px;}
  .xprow{margin-top:4px;}
  .clock{grid-column:2;grid-row:1;}
  #timer{font-size:30px;-webkit-text-stroke-width:5px;text-shadow:0 3px 0 var(--ink);}
  .goal{font-size:9px;padding:1px 6px;}
  .side{grid-column:2;grid-row:1;margin-top:36px;padding-top:0;justify-self:center;}
  .kicon{width:15px;height:15px;border-width:2px;box-shadow:none;}
  .kicon::before,.kicon::after{width:8px;height:2px;margin:-1px 0 0 -4px;}
  .kills{gap:4px;}
  #sub{font-size:16px;-webkit-text-stroke-width:4px;}
  #boss{bottom:auto;top:var(--bossTop,84px);width:calc(100% - 32px);}
  #boss .bname{font-size:12px;-webkit-text-stroke-width:3px;}
  .bbar{height:9px;border-width:2px;}
  #banner{font-size:clamp(22px,7vw,30px);-webkit-text-stroke-width:5px;}
  #banner.sm{font-size:clamp(18px,5.4vw,22px);-webkit-text-stroke-width:4px;}
  #banner small{font-size:12px;}
  .panel{padding:18px 16px;border-radius:20px;}
  .controls{gap:4px 10px;font-size:13px;}
  /* level-up must fit a 390x844 screen without scrolling */
  #levelup{padding:12px 16px;}
  #levelup .panel{padding:14px 14px 12px;}
  #levelup .panel h2{font-size:30px;margin-bottom:0;}
  #levelup .panel>p{display:none;}
  .cards{gap:9px;margin-top:8px;}
  .card{grid-template-columns:42px 1fr;gap:10px;padding:8px 10px;border-radius:13px;}
  .icon{width:42px;height:42px;border-radius:11px;font-size:20px;}
  .card b{font-size:17px;}
  .card small{font-size:12.5px;line-height:1.3;}
  .card small+small{display:none;}
  .lustats{display:none;}
  .stats,.stats:has(.stat:nth-child(7)){grid-template-columns:1fr 1fr;}
  .stat b{font-size:22px;}
  .stat.hero b{font-size:30px;}
  .big{font-size:22px;padding:11px 22px;width:100%;}
}
@media (max-width:360px){#timer{font-size:26px;}}
@media (max-height:520px){.controls{display:none;}}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;}
  #banner.go{animation:fadeBanner 2s ease-out forwards!important;}
}
@keyframes fadeBanner{0%,80%{opacity:1}100%{opacity:0}}
/* end screen: rows always fill, no holes */
.stats{display:flex;flex-wrap:wrap;}
.stat{flex:1 1 120px;}
.stat.hero{flex:2 1 220px;}
#end.win h2::after{-webkit-text-stroke:0;paint-order:normal;font-family:var(--body);font-weight:800;}
#end .tag{margin-bottom:10px;}

/* ---------------------------------------------------------------- optimization pass: touch targets + short screens */
/* finger-sized small buttons (Sound, Pause, Reroll, Banish, Skip, Leaderboard) on touch screens */
@media (pointer:coarse){.small{min-height:44px;padding:9px 13px;}}
/* phones held sideways (and other short screens): smaller HUD so the yard isn't hidden behind it,
   and the level-up cards side by side so all three fit without scrolling */
@media (max-height:500px){
  #hud{padding-top:calc(env(safe-area-inset-top,0px) + 6px);gap:10px;}
  .meter{max-width:280px;padding:4px 9px 5px;border-radius:12px;}
  #znum{font-size:22px;}
  .mlabel{font-size:10px;}
  .paw{width:15px;height:15px;}
  .zbar{height:16px;margin-top:4px;border-radius:10px;}
  .zstate{font-size:12px;-webkit-text-stroke-width:3px;}
  .xprow{margin-top:4px;}
  #timer{font-size:30px;-webkit-text-stroke-width:5px;text-shadow:0 3px 0 var(--ink);}
  #sub{font-size:22px;-webkit-text-stroke-width:5px;}
  .kicon{width:18px;height:18px;border-width:2px;}
  .overlay{padding:10px 16px;}
  .panel{padding:14px 18px;}
  .panel h2{font-size:30px;}
  #levelup .panel{width:min(900px,100%);}
  #levelup .panel>p,.lustats{display:none;}
  .stats{margin:10px 0 12px;}
  .stat{padding:6px 10px;}
  .stat b{font-size:22px;}
  .stat.hero b{font-size:28px;}
}
@media (max-height:500px) and (min-width:700px){
  .cards{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:8px;}
  .cards>:not(.card){grid-column:1/-1;}
  .card{grid-template-columns:42px 1fr;gap:8px;padding:8px 10px;align-items:start;}
  .icon{width:42px;height:42px;border-radius:11px;font-size:20px;}
  .card b{font-size:17px;}
  .card small{font-size:12.5px;line-height:1.3;}
  .card small+small{display:none;}
}