:root{
  --ink:#2a1f2d; --pink:#ff3fa4; --pink2:#ff8cc8; --cream:#fff8ec; --green:#1f8f4a; --yellow:#ffd43b;
  --font: ui-rounded, "SF Pro Rounded", "Nunito", "Trebuchet MS", system-ui, -apple-system, "Segoe UI", sans-serif;
  --safe-t: env(safe-area-inset-top, 0px); --safe-b: env(safe-area-inset-bottom, 0px);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;overflow:hidden;background:#6ec6ff;font-family:var(--font);color:var(--ink);
  -webkit-user-select:none;user-select:none;-webkit-touch-callout:none;overscroll-behavior:none}
canvas#game{position:fixed;inset:0;width:100vw;height:100dvh;display:block;touch-action:none;cursor:crosshair}
.hidden{display:none!important}
button{font-family:inherit;color:inherit;cursor:pointer;border:0;touch-action:manipulation}

/* HUD */
#hud{position:fixed;left:0;right:0;top:0;padding:calc(8px + var(--safe-t)) 10px 0;display:flex;align-items:flex-start;justify-content:space-between;gap:8px;pointer-events:none;z-index:5}
#hud .hud-l,#hud .hud-r{display:flex;gap:6px;align-items:center;flex:1}
#hud .hud-r{justify-content:flex-end}
.pill{background:rgba(255,248,236,.92);border:3px solid var(--ink);border-radius:999px;padding:3px 12px;font-weight:900;box-shadow:0 3px 0 var(--ink);display:flex;align-items:center;gap:6px;line-height:1.1}
.pill small{font-size:10px;letter-spacing:.08em;opacity:.7}
.pill b{font-size:18px;font-variant-numeric:tabular-nums}
.pill.combo{background:var(--yellow);transition:transform .12s}
.pill.combo.bump{transform:scale(1.25) rotate(-6deg)}
.pill.combo.off{opacity:.45}
.pill.timer b{font-size:22px;min-width:2ch;text-align:center}
.pill.timer.low{background:#ff5a5a;color:#fff;animation:pulse .5s infinite alternate}
@keyframes pulse{to{transform:scale(1.12)}}
.icon{pointer-events:auto;width:42px;height:42px;border-radius:50%;background:rgba(255,248,236,.92);border:3px solid var(--ink);box-shadow:0 3px 0 var(--ink);display:grid;place-items:center;padding:0}
.icon svg{width:22px;height:22px}
.icon:active{transform:translateY(2px);box-shadow:0 1px 0 var(--ink)}
#btnMute .cross{display:none}
#btnMute.muted .cross{display:inline}#btnMute.muted .waves{display:none}

/* Weapons bar */
#weapons{position:fixed;left:0;right:0;bottom:0;height:calc(76px + var(--safe-b));padding:8px 8px calc(8px + var(--safe-b));display:flex;gap:6px;justify-content:center;
  background:linear-gradient(#5b3a22,#3d2614);border-top:4px solid var(--ink);z-index:5}
.wpn{flex:1;max-width:120px;border-radius:14px;background:#fff8ec;border:3px solid var(--ink);box-shadow:0 3px 0 var(--ink);display:grid;grid-template-columns:auto 1fr;grid-template-rows:1fr 1fr;align-items:center;column-gap:6px;padding:2px 8px;text-align:left;position:relative}
.wpn .ic{grid-row:1/3}
.wpn span{font-size:12px;font-weight:800;align-self:end}
.wpn em{font-style:normal;font-weight:900;font-size:16px;align-self:start;font-variant-numeric:tabular-nums}
.wpn.sel{background:var(--yellow);transform:translateY(-4px);box-shadow:0 7px 0 var(--ink)}
.wpn.empty{opacity:.45}
.ic{width:26px;height:26px;border-radius:50%;border:2px solid var(--ink);display:block;position:relative}
.ic-paint{background:radial-gradient(circle at 35% 35%,#fff 0 15%,var(--pink) 16%)}
.ic-glitter{background:conic-gradient(#ff3fa4,#ffb02e,#ffe53f,#a6ff3f,#3fe0ff,#a35cff,#ff3fa4)}
.ic-cowpat{background:radial-gradient(circle at 40% 35%,#a8774d 0 20%,#6b4423 21%);border-radius:50% 50% 45% 45%}
.ic-scatter{border:0}
.ic-scatter b{position:absolute;width:12px;height:12px;border-radius:50%;border:2px solid var(--ink);background:#3fe0ff}
.ic-scatter b:nth-child(1){left:0;top:2px}.ic-scatter b:nth-child(2){right:0;top:0;background:#a6ff3f}.ic-scatter b:nth-child(3){left:6px;bottom:0;background:#ffb02e}

.toast{position:fixed;left:50%;top:calc(64px + var(--safe-t));transform:translate(-50%,-10px);background:var(--ink);color:#fff;font-weight:800;padding:8px 14px;border-radius:12px;opacity:0;transition:.2s;pointer-events:none;z-index:6;white-space:nowrap;font-size:14px}
.toast.show{opacity:1;transform:translate(-50%,0)}

/* Screens */
.screen{position:fixed;inset:0;display:none;align-items:center;justify-content:center;padding:calc(16px + var(--safe-t)) 14px calc(16px + var(--safe-b));z-index:10;background:rgba(42,31,45,.28);overflow:auto}
.screen.show{display:flex}
.card{background:var(--cream);border:4px solid var(--ink);border-radius:26px;box-shadow:0 8px 0 var(--ink);padding:20px 18px;width:100%;max-width:400px;text-align:center;margin:auto;animation:pop .25s ease-out}
.card.small{max-width:320px}.card.wide{max-width:560px}
@keyframes pop{from{transform:scale(.9);opacity:0}}
.brand{font-weight:800;color:var(--pink);letter-spacing:.06em;font-size:13px;text-transform:uppercase}
h1{margin:4px 0 0;font-size:64px;line-height:.9;font-weight:1000;letter-spacing:.02em;color:var(--green);
  -webkit-text-stroke:3px var(--ink);paint-order:stroke fill;text-shadow:0 5px 0 var(--ink)}
h2{margin:0 0 10px;font-size:28px;font-weight:1000}
.sub{display:inline-block;margin:10px 0 6px;background:var(--pink);color:#fff;font-weight:900;padding:4px 12px;border-radius:10px;border:3px solid var(--ink);transform:rotate(-3deg);font-size:18px}
.blurb{margin:8px 0 12px;font-size:15px;line-height:1.35}
.stats,.grid3{display:flex;justify-content:center;gap:10px;margin:10px 0}
.stats>div,.grid3>div{flex:1;background:#fff;border:3px solid var(--ink);border-radius:14px;padding:6px 4px;display:flex;flex-direction:column;align-items:center}
.stats small,.grid3 small{font-size:10px;font-weight:800;letter-spacing:.08em;opacity:.65}
.stats b,.grid3 b{font-size:22px;font-weight:1000}
.tok{font-size:11px;font-weight:800;color:#8a6a2a}
.btn{display:block;width:100%;margin:8px 0 0;padding:12px;border-radius:16px;background:var(--pink);color:#fff;font-weight:900;font-size:18px;border:3px solid var(--ink);box-shadow:0 4px 0 var(--ink)}
.btn.big{font-size:24px;padding:14px;background:var(--green)}
.btn.alt{background:#fff;color:var(--ink);font-size:16px}
.btn:active{transform:translateY(3px);box-shadow:0 1px 0 var(--ink)}
.btn:disabled{opacity:.45;transform:none;box-shadow:0 4px 0 var(--ink)}
.row{display:flex;gap:8px}.row .btn{flex:1}
.disc{font-size:12px;color:#7a5f68;margin:12px 0 0;font-weight:700}
.link{background:none;text-decoration:underline;font-size:12px;margin-top:6px;color:#7a5f68}
.muted{opacity:.7}
ul.how{text-align:left;padding-left:18px;margin:0 0 6px;font-size:15px;line-height:1.4}
ul.how li{margin-bottom:6px}
kbd{background:#fff;border:2px solid var(--ink);border-radius:6px;padding:0 5px;font-family:inherit;font-weight:800;font-size:12px}
.bigscore{font-size:56px;font-weight:1000;color:var(--pink);-webkit-text-stroke:2px var(--ink);paint-order:stroke fill;line-height:1}
.newbest{display:inline-block;margin-top:6px;background:var(--yellow);border:3px solid var(--ink);border-radius:10px;padding:2px 10px;font-weight:1000;animation:pulse .5s infinite alternate}
.reward{background:#fff;border:3px dashed #c9a24a;border-radius:16px;padding:10px;margin:10px 0 4px}
.reward-h{font-weight:900;font-size:13px;letter-spacing:.05em;text-transform:uppercase;color:#8a6a2a}
.reward ul{list-style:none;padding:0;margin:6px 0;font-size:14px}
.reward li{display:flex;justify-content:space-between;padding:2px 4px}
.reward-t{font-size:30px;font-weight:1000;color:#c78a00}
.reward-t span{font-size:14px}
.bal{font-size:13px}
.balance{display:inline-flex;align-items:baseline;gap:8px;background:#fff;border:3px solid var(--ink);border-radius:999px;padding:4px 16px;font-weight:800}
.balance b{font-size:26px;font-weight:1000}
.shop{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;margin-top:12px}
.item{background:#fff;border:3px solid var(--ink);border-radius:16px;padding:10px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:4px}
.item .ic{width:36px;height:36px}
.item h3{margin:2px 0 0;font-size:16px;font-weight:1000}
.item p{margin:0;font-size:12px;line-height:1.3;flex:1}
.item .own{font-size:11px;font-weight:800;opacity:.6}
.item .btn{font-size:15px;padding:8px;margin-top:4px}
.inv{margin-top:10px;font-size:13px;font-weight:700}
@media (max-height:640px){h1{font-size:46px}.blurb{display:none}.card{padding:14px}}
@media (max-width:480px){.shop{grid-template-columns:1fr 1fr;gap:8px}.item{padding:8px}.item p{font-size:11px}.item h3{font-size:14px}.item .btn{font-size:13px;padding:7px 4px}.item .ic{width:28px;height:28px}h2{font-size:24px}}

/* ---------- title duck portrait + look toggle (both looks) ---------- */
.titleRow{display:flex;align-items:center;justify-content:center;gap:10px}
#titleDuck{width:96px;height:96px;flex:none}
.lookRow{display:flex;align-items:center;justify-content:center;gap:10px;margin:10px 0 0;font-weight:900;font-size:14px}
.lookRow>span{opacity:.7;letter-spacing:.06em;text-transform:uppercase;font-size:12px}
.seg{display:inline-flex;border:3px solid var(--ink);border-radius:999px;overflow:hidden;box-shadow:0 3px 0 var(--ink);background:#fff}
.seg button{padding:6px 14px;font-weight:900;font-size:14px;background:#fff}
.seg button+button{border-left:3px solid var(--ink)}
.seg button.sel{background:var(--yellow)}
@media (max-height:760px){#titleDuck{width:72px;height:72px}.title-card .blurb{display:none}}

/* ---------- RETRO look: pixel font, square corners, hard shadows, pixel icons ---------- */
body.look-retro{--ink:#1b1626;--pink:#ff7ab3;--green:#3a9d3a;--yellow:#f7d548;--cream:#f7f3e6;
  --font:'Duck Pixel',ui-monospace,monospace;background:#6bbcf7;text-transform:uppercase;
  -webkit-font-smoothing:none;font-smooth:never;letter-spacing:0}
body.look-retro canvas#game{image-rendering:pixelated}
body.look-retro *{font-weight:400!important;font-variant-numeric:normal}
body.look-retro .card{border-radius:0;box-shadow:8px 8px 0 var(--ink);border-width:4px;animation:popPx .3s steps(3)}
@keyframes popPx{from{transform:translateY(16px);opacity:0}}
body.look-retro .btn,body.look-retro .seg,body.look-retro .pill,body.look-retro .icon,body.look-retro .wpn,
body.look-retro .stats>div,body.look-retro .grid3>div,body.look-retro .item,body.look-retro .reward,body.look-retro .balance,
body.look-retro .toast,body.look-retro .sub,body.look-retro .newbest,body.look-retro kbd{border-radius:0}
body.look-retro .btn{box-shadow:4px 4px 0 var(--ink);font-size:16px;line-height:1;padding:14px 8px}
body.look-retro .btn.big{font-size:24px;padding:16px 8px}
body.look-retro .btn.alt{font-size:16px}
body.look-retro .btn:active{transform:translate(4px,4px);box-shadow:0 0 0 var(--ink)}
body.look-retro .btn:disabled{box-shadow:4px 4px 0 var(--ink)}
body.look-retro .pill,body.look-retro .icon{box-shadow:3px 3px 0 var(--ink)}
body.look-retro .pill b{font-size:16px}
body.look-retro .pill small{font-size:8px;opacity:.8}
body.look-retro .pill.timer b{font-size:24px}
body.look-retro .pill.combo.bump{transform:translateY(-4px)}
body.look-retro .pill.timer.low{animation:blinkPx .5s steps(1) infinite}
@keyframes blinkPx{50%{background:#e03c3c;color:#f7f3e6}0%{background:#f7d548;color:#1b1626}}
body.look-retro h1{font-size:48px;line-height:1;-webkit-text-stroke:0;text-shadow:4px 0 0 var(--ink),-4px 0 0 var(--ink),0 4px 0 var(--ink),0 -4px 0 var(--ink),4px 4px 0 var(--ink),8px 8px 0 #c23c78;color:#f7d548;margin:6px 0 4px}
body.look-retro h2{font-size:24px}
body.look-retro .brand{font-size:8px;letter-spacing:0;color:#c23c78}
body.look-retro .sub{font-size:16px;transform:none;box-shadow:4px 4px 0 var(--ink);padding:6px 10px}
body.look-retro .blurb{font-size:8px;line-height:16px}
body.look-retro .disc,body.look-retro .link,body.look-retro .tok,body.look-retro .bal,body.look-retro .inv,body.look-retro .item p,body.look-retro .item .own,body.look-retro .reward li{font-size:8px;line-height:12px}
body.look-retro .stats small,body.look-retro .grid3 small,body.look-retro .reward-h,body.look-retro .lookRow>span{font-size:8px;letter-spacing:0}
body.look-retro .stats b,body.look-retro .grid3 b{font-size:24px;line-height:1.2}
body.look-retro .bigscore{font-size:56px;-webkit-text-stroke:0;text-shadow:4px 4px 0 var(--ink)}
body.look-retro .reward{border:4px dashed #c08a1e}
body.look-retro .reward-t{font-size:32px}body.look-retro .reward-t span{font-size:8px}
body.look-retro .balance b{font-size:24px}
body.look-retro ul.how{font-size:8px;line-height:16px;list-style:square}
body.look-retro kbd{font-size:8px}
body.look-retro .item h3{font-size:16px;line-height:1.1}
body.look-retro .item .btn{font-size:8px;padding:8px 4px}
body.look-retro .seg{border-radius:0;box-shadow:3px 3px 0 var(--ink)}
body.look-retro .seg button{font-size:16px;padding:8px 12px}
body.look-retro .toast{font-size:8px;padding:10px 12px;box-shadow:4px 4px 0 #c23c78;transition:none}
body.look-retro #weapons{background:repeating-linear-gradient(90deg,#4e2c19 0 8px,#8a5530 8px 10px);border-top:4px solid var(--ink)}
body.look-retro .wpn{box-shadow:3px 3px 0 var(--ink)}
body.look-retro .wpn.sel{transform:translateY(-4px);box-shadow:3px 7px 0 var(--ink)}
body.look-retro .wpn span{font-size:8px}
body.look-retro .wpn em{font-size:16px}
body.look-retro .ic{border:0;border-radius:0;background:var(--px) center/contain no-repeat;image-rendering:pixelated}
body.look-retro .ic b{display:none}
body.look-retro .ic-paint{--px:var(--px-paint)}body.look-retro .ic-glitter{--px:var(--px-glitter)}
body.look-retro .ic-scatter{--px:var(--px-scatter)}body.look-retro .ic-cowpat{--px:var(--px-cowpat)}
body.look-retro #titleDuck{image-rendering:pixelated}
body.look-retro .screen{background:repeating-linear-gradient(0deg,rgba(27,22,38,.38) 0 2px,rgba(27,22,38,.22) 2px 4px)}
@media (max-width:480px){body.look-retro .item .btn{font-size:8px}body.look-retro .item h3{font-size:8px;line-height:12px}body.look-retro h2{font-size:16px}}
/* combo pill: never wrap onto two lines */
.pill{white-space:nowrap}
.pill.combo small:empty{display:none}
@media (max-width:430px){.pill.combo{flex-direction:column;gap:0;padding:2px 10px;justify-content:center}.pill.combo small{font-size:9px;letter-spacing:.02em;opacity:.85}}

/* big thumb FIRE button (phones). Sits over the counter, below the front row of bales */
#btnFire{position:fixed;right:max(12px,var(--safe-r,0px));bottom:calc(84px + var(--safe-b));width:84px;height:84px;border-radius:50%;z-index:6;
  background:radial-gradient(circle at 35% 30%,#ff8cc8,#ff3fa4 55%,#c41c79);border:4px solid var(--ink);box-shadow:0 5px 0 var(--ink);color:#fff;
  font-weight:1000;font-size:17px;letter-spacing:.5px;text-shadow:0 2px 0 var(--ink);touch-action:none;-webkit-user-select:none;user-select:none;opacity:.94}
#btnFire.down{transform:translateY(4px);box-shadow:0 1px 0 var(--ink)}
#btnFire.hidden{display:none}
@media (pointer:fine){#btnFire{display:none}}
body.look-retro #btnFire{border-radius:0;background:#ff7ab3;box-shadow:4px 4px 0 var(--ink);font-size:12px;text-shadow:2px 2px 0 var(--ink);
  clip-path:polygon(16% 0,84% 0,100% 16%,100% 84%,84% 100%,16% 100%,0 84%,0 16%)}
body.look-retro #btnFire.down{transform:translate(4px,4px);box-shadow:0 0 0 var(--ink)}
/* MILK-drain economy: ledger, badges, daily cap */
.meta2{display:flex;flex-direction:column;align-items:center;gap:2px;margin:6px 0 2px;font-size:12px;font-weight:800;opacity:.8}
.ledger{display:flex;gap:6px;margin:6px 0}
.ledger>div{flex:1;background:#fffaf0;border:2px solid var(--ink);border-radius:10px;padding:4px 2px;display:flex;flex-direction:column;align-items:center}
.ledger small{font-size:9px;font-weight:900;letter-spacing:.06em;opacity:.65}
.ledger b{font-size:20px;font-weight:1000}
.ledger .net{background:#ffe9f3}
.ledger .net b{color:#c2185b}
.resnote{font-size:12px;font-weight:700;opacity:.75}
.cowline{font-size:13px;font-weight:800;margin:4px 0 2px;color:#2d7a3a}
.reward li b{color:#b23a3a}
.badges{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;margin:8px 0 0}
.badge{background:var(--yellow);border:3px solid var(--ink);border-radius:10px;padding:2px 8px;font-weight:1000;font-size:13px}
.btn.poor{opacity:.55}
body.look-retro .ledger>div,body.look-retro .badge{border-radius:0}
body.look-retro .ledger small,body.look-retro .resnote,body.look-retro .cowline,body.look-retro .meta2,body.look-retro .badge{font-size:8px;line-height:12px}
body.look-retro .ledger b{font-size:16px}