/* PokaSnap 2.2 — Board Core HUD (Phase C1.1). Original PokaSnap system: candy
   pink + sky blue + lavender stage, cream surfaces, chunky rounded type,
   layered depth. Board Mode shows the live layer (.bm); Camera Mode and Race
   hide it. The paw is the one universal controller. */
:root{
  --pink:#ff6b8b; --pink2:#ff9fc4; --sky:#2fa8d8; --sky2:#4fc3f7; --lav:#8f7fe8; --gold:#ffd84a; --ink:#3b2d4f; --cream:#fff8ee;
  --sat:env(safe-area-inset-top,0px); --sab:env(safe-area-inset-bottom,0px);
  --font: ui-rounded, "SF Pro Rounded", "Nunito", system-ui, -apple-system, sans-serif;
  --navH:62px;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{touch-action:manipulation}
html,body{margin:0;height:100%;overflow:hidden;background:#6fc0ef;font-family:var(--font);color:var(--ink);user-select:none;-webkit-user-select:none}
button{font:inherit;color:inherit;border:0;background:none;padding:0;cursor:pointer}
#stage{position:fixed;inset:0;display:block;touch-action:none}

/* ---------- Board Mode vs Camera Mode vs Race ---------- */
.bm{transition:opacity .28s,transform .28s}
body.camera-mode .bm, body.race-mode .bm{opacity:0;pointer-events:none;transform:translateY(-6px)}
.cm{opacity:0;pointer-events:none;transition:opacity .28s}
body.camera-mode .cm{opacity:1;pointer-events:auto}
body.race-mode .tray, body.race-mode .rollChip, body.race-mode #moment, body.game-mode .rollChip{opacity:0;pointer-events:none}
.camHud{position:fixed;left:0;right:0;top:calc(var(--sat) + 10px);display:flex;justify-content:flex-start;align-items:center;padding:0 10px;z-index:5}
.camHud button{height:36px;padding:0 14px;border-radius:18px;background:rgba(59,45,79,.6);color:#fff;font-weight:900;font-size:13px;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}

/* ---------- C1.5 top HUD (owner-locked): Poka card · currency · five Treats · menu ---------- */
.hud{position:fixed;left:6px;right:6px;top:calc(var(--sat) + 6px);display:flex;align-items:center;gap:6px;padding:4px 6px 4px 4px;z-index:5;border-radius:26px;
  background:linear-gradient(#ffffff,#f6efe6);border:2.5px solid #fff;box-shadow:inset 0 -3px 0 rgba(120,90,60,.12),0 5px 14px rgba(40,30,70,.25)}
.avatar{position:relative;width:46px;height:46px;flex:none;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff,#dff3ff);border:3px solid #fff;box-shadow:0 0 0 2.5px #4fa8e8,0 3px 8px rgba(30,60,120,.3)}
.avatar canvas{width:36px;height:36px;position:absolute;left:2px;top:2px;border-radius:50%}
.pill{display:flex;align-items:center;gap:6px;height:36px;padding:0 10px 0 4px;border-radius:18px;font-weight:900;font-size:17px;white-space:nowrap;color:#3b2d4f}
.pill .ico{width:34px;height:24px;flex:none;filter:drop-shadow(0 1.5px 0 rgba(0,0,0,.15))}
.pill.coin{flex:1 1 auto;min-width:0;letter-spacing:.01em}
.pill.coin b{overflow:hidden;text-overflow:ellipsis}
.treats{display:flex;gap:0;flex:none;align-items:center;margin-right:2px}
.treats .tr{display:block;width:24px;height:28px;transition:transform .2s,filter .2s}
.treats .carrot{width:100%;height:100%;overflow:visible;filter:drop-shadow(0 2px 0 rgba(120,50,10,.25))}
.treats .tr.off{filter:grayscale(1) opacity(.32)}
.treats .tr.off .carrot{--cf:#d9cfc6;--cl:#cfc6bd}
.treats .tr.pop{animation:pop .5s}
@keyframes pop{40%{transform:scale(1.45) rotate(-12deg)}}
.menuBtn{width:40px;height:40px;flex:none;border-radius:14px;background:linear-gradient(#fff4d6,#ffd98a);border:2.5px solid #fff;box-shadow:inset 0 -3px 0 rgba(180,110,20,.25),0 3px 6px rgba(40,30,70,.2);display:flex;flex-direction:column;justify-content:center;align-items:center;gap:4px}
.menuBtn i{display:block;width:18px;height:3.2px;border-radius:2px;background:#e88a14}
.menu{position:fixed;right:10px;top:calc(var(--sat) + 62px);z-index:30;display:flex;flex-direction:column;min-width:210px;padding:6px;border-radius:20px;background:rgba(255,250,242,.98);box-shadow:0 14px 34px rgba(40,30,70,.35);transform:translateY(-8px) scale(.96);opacity:0;pointer-events:none;transition:.18s;transform-origin:top right}
.menu.open{opacity:1;pointer-events:auto;transform:none}
.menu button{text-align:left;padding:12px 14px;border-radius:14px;font-weight:900;font-size:15px;min-height:44px}
.menu button:active{background:#f1e3cf}
.menu button[hidden]{display:none}
.pulse{animation:pulse .5s}
@keyframes pulse{40%{transform:scale(1.14)}}

/* ---------- Quick Milestone bar (directly under the HUD) ---------- */
.ms{position:fixed;left:50%;top:calc(var(--sat) + 64px);transform:translateX(-50%);z-index:5;width:min(78vw,360px);display:flex;flex-direction:column;align-items:center;pointer-events:auto}
.msTitle{position:relative;z-index:2;margin-bottom:-9px;padding:2px 16px 3px;border-radius:12px;font-weight:900;font-size:17px;letter-spacing:.06em;color:#fff;background:linear-gradient(#ff8fc0,#ff5f9e);border:2.5px solid #fff;-webkit-text-stroke:1px #c43a78;paint-order:stroke fill;text-shadow:0 2px 0 #c43a78;box-shadow:0 3px 0 rgba(160,30,90,.35)}
.msRow{position:relative;width:100%;display:flex;align-items:center;gap:0;padding:12px 8px 8px;border-radius:26px;background:linear-gradient(#ffd1e6,#ff9fc8);border:3px solid #fff;box-shadow:0 4px 0 rgba(160,30,90,.3),0 8px 18px rgba(40,30,70,.25)}
.msIco{width:44px;height:44px;flex:none;margin:-10px -6px -10px -10px;z-index:2;border-radius:50%;background:#fff;display:grid;place-items:center;box-shadow:0 2px 0 rgba(160,30,90,.3)}
.msIco svg{width:38px;height:38px}
.msBar{position:relative;flex:1;height:22px;border-radius:11px;background:#5b3a6a;box-shadow:inset 0 2px 3px rgba(0,0,0,.35);overflow:hidden;border:2px solid #fff}
.msBar i{position:absolute;left:0;top:0;bottom:0;width:0;border-radius:9px;background:linear-gradient(#7fe0ff,#2fa8e8);transition:width .6s cubic-bezier(.2,.8,.2,1)}
.msBar b{position:absolute;inset:0;display:grid;place-items:center;color:#fff;font-weight:900;font-size:13px;text-shadow:0 1.5px 0 rgba(0,0,0,.45)}
.msReward{position:relative;width:48px;height:48px;flex:none;margin:-10px -10px -10px -6px;z-index:2;border-radius:50%;background:radial-gradient(circle at 40% 35%,#fff9d6,#ffd23f);border:3px solid #fff;display:grid;place-items:center;box-shadow:0 2px 0 rgba(160,90,10,.4)}
.msReward svg{width:30px;height:30px}
.msReward b{position:absolute;right:-6px;bottom:-6px;min-width:22px;padding:0 4px;border-radius:9px;background:#2b2350;color:#fff;font-size:11px;font-weight:900;border:2px solid #fff;text-align:center}
.ms.next .msReward{animation:pulse 1.1s ease-in-out infinite}
.ms.cross .msRow{animation:msCross 1.2s}
@keyframes msCross{15%{transform:scale(1.06)}30%{transform:scale(.98)}45%{transform:scale(1.03)}}
.msTime{margin-top:-6px;z-index:2;display:flex;align-items:center;gap:4px;padding:1px 10px 2px;border-radius:10px;background:#fff;font-weight:900;font-size:12px;color:#3b2d4f;box-shadow:0 2px 0 rgba(0,0,0,.12)}
.msTime svg{width:13px;height:13px}
.msPts{position:fixed;z-index:12;pointer-events:none;font-weight:900;font-size:15px;color:#fff;padding:2px 9px;border-radius:12px;background:linear-gradient(#ff8fc0,#ff4f8e);border:2px solid #fff}

/* ---------- side event badges (owner reference: outlined art, short label, countdown) ---------- */
.rail{position:fixed;top:calc(var(--sat) + 150px);display:flex;flex-direction:column;gap:0;z-index:4}
.rail.left{left:2px;align-items:flex-start}.rail.right{right:2px;align-items:flex-end}
.badge{position:relative;width:68px;display:flex;flex-direction:column;align-items:center;transition:transform .12s}
.badge:active{transform:scale(.92)}
.badge .art{width:48px;height:48px;filter:drop-shadow(0 0 0 #fff) drop-shadow(1.5px 0 0 #fff) drop-shadow(-1.5px 0 0 #fff) drop-shadow(0 1.5px 0 #fff) drop-shadow(0 -1.5px 0 #fff) drop-shadow(0 4px 4px rgba(40,30,70,.3));animation:bob 3.2s ease-in-out infinite}
.rail .badge:nth-child(2) .art{animation-delay:-1.1s;animation-duration:3.7s}.rail .badge:nth-child(3) .art{animation-delay:-2.3s;animation-duration:2.9s}
@keyframes bob{50%{transform:translateY(-3px) rotate(-3deg)}}
.badge .wlabel{margin-top:-5px;font-size:11px;font-weight:900;color:#fff;-webkit-text-stroke:3px #2b3a7a;paint-order:stroke fill;letter-spacing:.02em;white-space:nowrap}
.badge .wtag{font-size:9.5px;font-weight:900;color:#fff;padding:1px 7px;border-radius:9px;background:linear-gradient(#ff8f9e,#ff4f6e);border:2px solid #fff;margin-top:-1px;white-space:nowrap}
.b-race .wtag{background:linear-gradient(#6a7ac8,#3b4a9a)}.b-garden .wtag{background:linear-gradient(#5fbfff,#2a8fe0)}
.b-garden .gbar{display:none}
.badge.overPet{opacity:.22;pointer-events:none}

/* ---------- THE PAW (C1.3) ----------
   A paw print, not a cluster of buttons: one large three-lobed main pad and four
   egg-shaped toe beans on a natural arc (outer toes lower and splayed, inner toes
   higher). Each button IS its bean: an inline SVG shape sharing one gradient system
   (--b1..--b3), one outline, one top highlight and one 3D rim (--b4). State colours
   (multiplier tier, slow motion, camera on) recolour the bean itself. */
.paw{position:fixed;left:50%;bottom:calc(var(--sab) + 22px);width:300px;height:210px;margin-left:-150px;z-index:8;pointer-events:none;transform:scale(var(--pawK,.88));transform-origin:50% 100%}
.paw > *{pointer-events:auto}
.pawShadow{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.toe,.pad{position:absolute;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#fff;background:none;border:0;padding:0;
  --b1:#ffc0d0;--b2:#ff7499;--b3:#e2456f;--b4:#b02f58;
  transition:transform .09s ease-out;-webkit-tap-highlight-color:transparent}
.bean{position:absolute;inset:0;width:100%;height:100%;overflow:visible;z-index:-1;filter:drop-shadow(0 6px 5px rgba(50,15,35,.38))}
.toe .bean{inset:-4px -3px}
.pad .bean{inset:-6px -12px}
.bean .brd path{fill:none;stroke:#fff;stroke-width:6;stroke-linejoin:round}
.bean .brd{filter:drop-shadow(0 0 1.2px rgba(60,20,45,.75))}
.bean .rim{fill:var(--b4)}
.bean .fill{stroke:var(--b4);stroke-width:2.2;stroke-linejoin:round}
.bean .hl{fill:#fff;opacity:.5}
.toe{width:50px;height:58px;transform:translate(-50%,-50%);z-index:1}
.toe > :not(.bean){position:relative;transform:translateY(2px)}
.toe.t-left{left:62px;top:96px}
.toe.t-upleft{left:117px;top:40px}
.toe.t-upright{left:183px;top:40px}
.toe.t-right{left:238px;top:96px}
.toe.t-left .bean{transform:rotate(-27deg)}
.toe.t-upleft .bean{transform:rotate(-9deg)}
.toe.t-upright .bean{transform:rotate(9deg)}
.toe.t-right .bean{transform:rotate(27deg)}
.toe b{font-size:22px;font-weight:900;line-height:1;-webkit-text-stroke:1px rgba(110,20,55,.55);paint-order:stroke fill;text-shadow:0 2px 0 rgba(110,20,55,.55)}
.gauge,.toe canvas,.pad .lens{filter:drop-shadow(0 1.5px 0 rgba(110,20,55,.55)) drop-shadow(0 0 1px #fff)}
.toe canvas{width:38px;height:38px}
.pad{left:150px;top:120px;width:116px;height:92px;transform:translate(-50%,-50%);z-index:1;padding-bottom:10px}
.pad .lens{width:36px;height:36px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#bdeeff,#2fa8d8 60%,#1b6f99);border:4px solid #fff;box-shadow:0 2px 0 rgba(0,0,0,.2)}
.pad b{font-size:17px;font-weight:900;letter-spacing:.08em;margin-top:2px;-webkit-text-stroke:1px rgba(110,20,55,.5);paint-order:stroke fill;text-shadow:0 2px 0 rgba(110,20,55,.5)}
.toe.pressed,.toe:active{transform:translate(-50%,-50%) scale(.9) translateY(3px)}
.pad.pressed,.pad:active{transform:translate(-50%,-50%) scale(.94) translateY(3px)}
.toe.pressed .bean .rim,.pad.pressed .bean .rim,.toe:active .bean .rim,.pad:active .bean .rim{transform:translate(0,1px)}
.pad.live{animation:live 1s ease-in-out infinite}
.toe.t-upright.on{--b1:#c9f0ff;--b2:#4fc3f7;--b3:#1b8cc2;--b4:#14699a}
.toe.t-right[data-m="5"]{--b1:#ffd8b0;--b2:#ff9a5c;--b3:#e0662c;--b4:#b04a18}
.toe.t-right[data-m="10"],.toe.t-right[data-m="20"]{--b1:#fff0b0;--b2:#ffc23d;--b3:#d8920a;--b4:#a86c00}
.toe.t-right[data-m="50"],.toe.t-right[data-m="100"]{--b1:#e2dafe;--b2:#8f7fe8;--b3:#5a46c8;--b4:#3e2ea0}
.toe.t-right b{font-size:18px;letter-spacing:-.02em}
.toe.t-right[data-m="100"] b{font-size:15px}
.toe.busy{opacity:.7}
.gauge{width:34px;height:34px}
.gauge .needle{transform-origin:20px 28px;transition:transform .25s}
.toe[data-speed="normal"] .needle{transform:rotate(55deg)}
.toe[data-speed="slow"] .needle{transform:rotate(0deg)}
.toe[data-speed="veryslow"] .needle{transform:rotate(-55deg)}
.toe[data-speed="slow"],.toe[data-speed="veryslow"]{--b1:#c9f0ff;--b2:#4fc3f7;--b3:#1b8cc2;--b4:#14699a}
.pips{display:flex;gap:3px;margin-top:1px}
.pips i{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.35);box-shadow:inset 0 1px 0 rgba(0,0,0,.15)}
.toe[data-speed="veryslow"] .pips i:nth-child(1),.toe[data-speed="slow"] .pips i:nth-child(-n+2),.toe[data-speed="normal"] .pips i{background:#fff}
/* ---------- C1.5 toe tones (owner reference): red object · blue speed · orange angle · purple multiplier; pink palm ---------- */
.toe[data-tone="red"]{--b1:#ffb3a6;--b2:#ff5a4f;--b3:#e0302f;--b4:#a81c22}
.toe[data-tone="blue"]{--b1:#bfe2ff;--b2:#4f9cff;--b3:#2a6fe0;--b4:#1a4aa8}
.toe[data-tone="orange"]{--b1:#ffd9a6;--b2:#ff9a3c;--b3:#f07514;--b4:#a8500c}
.toe[data-tone="purple"]{--b1:#e1d0ff;--b2:#9a6bff;--b3:#7340e8;--b4:#4a24a8}
.toe .ico{width:34px;height:34px;filter:drop-shadow(0 1.5px 0 rgba(0,0,0,.25))}
.toe .ang{position:absolute;right:2px;bottom:6px;font-size:12px!important;width:17px;height:17px;border-radius:50%;background:#fff;color:#a8500c!important;-webkit-text-stroke:0!important;text-shadow:none!important;display:grid;place-items:center;transform:none!important}
.toe[data-tone="blue"] .pips{position:absolute;bottom:7px}
.toe[data-tone="blue"] .ff{margin-top:-6px}
/* desktop keyboard hints: subtle arrow glyph per toe and SPACE under the palm; hidden on touch-first layouts */
.kh{display:none;position:absolute;font:900 10px/1 system-ui;color:#3b2d4f;background:rgba(255,255,255,.92);border-radius:6px;padding:2px 4px;box-shadow:0 1px 0 rgba(0,0,0,.25);pointer-events:none;transform:none!important}
.toe .kh{top:-9px;left:50%;margin-left:-9px;min-width:18px;text-align:center}
.pad .kh{bottom:-1px;left:50%;transform:translateX(-50%)!important;letter-spacing:.08em;font-size:9px}
body.desktop .kh{display:block}
/* ---------- Snap meter: short, palm-wide, directly under the SNAP palm ---------- */
.meter{position:fixed;left:50%;bottom:calc(var(--sab) + 4px);transform:translateX(-50%);z-index:9;width:132px;display:flex;flex-direction:column;align-items:center;gap:1px;pointer-events:none}
.mBar{position:relative;width:100%;height:21px;border-radius:11px;background:#2b2350;border:2.5px solid #fff;box-shadow:0 2px 0 rgba(40,20,60,.35);overflow:hidden}
.mBar i{position:absolute;left:0;top:0;bottom:0;width:0;background:linear-gradient(#7fe0ff,#2f8fe8);transition:width .4s}
.mBar b{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:1px;color:#fff;font-weight:900;font-size:13px;text-shadow:0 1.5px 0 rgba(0,0,0,.5);white-space:nowrap}
.mBar small{font-size:11px;color:#dfe9ff}
.meter.over .mBar i{background:linear-gradient(90deg,#9a6bff,#ff6b8b)}
.meter .regen{font-size:9px;font-weight:800;color:#6a5a7a;white-space:nowrap}
body.game-mode .meter{opacity:0}
/* C1.4: every mode shows all five pads. Board uses the .main content; every weekly game fills
   the .alt slot (icon + short label) from PAW_MODES, and pads can carry a live state:
   data-state="empty" (a real slot with nothing in it yet), a meter ring (--meter 0..1), or "lit". */
.paw .alt{display:none;flex-direction:column;align-items:center;gap:1px}
.paw:not([data-mode="main"]) .main{display:none!important}
.paw:not([data-mode="main"]) .alt{display:flex}
.alt .ai{font-style:normal;font-size:23px;line-height:1;color:#fff;-webkit-text-stroke:1px rgba(110,20,55,.6);paint-order:stroke fill;filter:drop-shadow(0 1.5px 0 rgba(110,20,55,.5))}
.alt .al{font-size:9px;font-weight:900;letter-spacing:.06em;color:#fff;text-shadow:0 1px 0 rgba(110,20,55,.7)}
.pad .alt .ai{font-size:30px}.pad .alt .al{font-size:15px;letter-spacing:.08em}
.toe[data-state="empty"] .ai,.toe[data-state="empty"] .al{opacity:.5}
.toe[data-state="lit"],.pad[data-state="lit"]{--b1:#fff3b0;--b2:#ffc23d;--b3:#e8930a;--b4:#a86c00}
.toe[data-lane="0"]{--b1:#ffc6d6;--b2:#ff6b8b;--b3:#e04a6e;--b4:#a82a4e}
.toe[data-lane="1"]{--b1:#c9f0ff;--b2:#4fc3f7;--b3:#1b8cc2;--b4:#14699a}
.toe[data-lane="2"]{--b1:#d6ffe6;--b2:#2fd08a;--b3:#18a066;--b4:#0e7046}
.toe[data-lane="3"]{--b1:#fff0b0;--b2:#ffc23d;--b3:#d8920a;--b4:#a86c00}
.toe .meter{position:absolute;inset:-7px;border-radius:50%;pointer-events:none;background:conic-gradient(#fff calc(var(--meter,0)*360deg),rgba(255,255,255,.18) 0);-webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 4px),#000 calc(100% - 3.5px));mask:radial-gradient(farthest-side,transparent calc(100% - 4px),#000 calc(100% - 3.5px));display:none}
.toe[data-meter] .meter{display:block}
.gamePause{position:fixed;right:12px;top:calc(var(--sat) + 64px);z-index:12;width:40px;height:40px;border-radius:14px;background:rgba(43,35,80,.82);color:#fff;font-weight:900;border:2.5px solid #fff;box-shadow:0 3px 0 rgba(30,20,50,.4)}
.gamePanel{position:fixed;left:50%;top:38%;transform:translate(-50%,-50%);z-index:13;display:flex;flex-direction:column;gap:8px;padding:16px;border-radius:22px;background:#fffaf2;border:3px solid #fff;box-shadow:0 12px 40px rgba(40,30,70,.45);min-width:220px}
.gamePanel b{text-align:center;font-size:18px;color:#3b2d4f}
.gamePanel button{min-height:46px;border-radius:14px;font-weight:900;font-size:15px;color:#fff;background:linear-gradient(#ff8aa6,#e84d74);border:2.5px solid #fff;box-shadow:0 3px 0 #a82a4e}
.gamePanel[hidden],.gamePause[hidden]{display:none}
.buildTag{position:fixed;left:6px;bottom:calc(var(--sab) + var(--navH) + 6px);z-index:7;max-width:74px;font:800 8.5px/1.25 system-ui;color:#fff;text-shadow:0 1px 2px rgba(40,30,70,.8);letter-spacing:.02em;pointer-events:none}
body.game-mode .bm{opacity:0;pointer-events:none}
body.game-mode .tray,body.game-mode #moment{opacity:0;pointer-events:none}
body.game-mode .nav{opacity:.6;pointer-events:none}
/* hold menus rise above the paw */
.pawMenu{position:absolute;left:50%;bottom:222px;transform:translateX(-50%) translateY(10px) scale(.95);opacity:0;pointer-events:none;display:flex;gap:6px;padding:8px;border-radius:20px;background:rgba(255,248,238,.98);box-shadow:0 10px 30px rgba(40,30,70,.35);transition:.18s;width:max-content;max-width:94vw}
.pawMenu.open{opacity:1;pointer-events:auto;transform:translateX(-50%)}
.pawMenu button{min-width:52px;min-height:52px;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:4px 6px;border-radius:14px;background:#fff;box-shadow:inset 0 -3px 0 rgba(0,0,0,.06)}
.pawMenu button.on{outline:3px solid var(--lav)}
.pawMenu button.locked{opacity:.4}
.pawMenu button b{font-size:16px;font-weight:900}
.pawMenu canvas{width:38px;height:38px}
.pawMenu small{font-size:9.5px;color:#9a8aa8;font-weight:800}
.batchTray{flex-direction:column;align-items:center}
.batchTray b{font-size:12px;font-weight:900;color:#6a5a7a}
.batchTray .opts{display:flex;gap:5px}
.batchTray .opts button{min-width:46px;min-height:40px;border-radius:12px;background:#fff;font-weight:900}
.batchTray .opts button.on{background:var(--lav);color:#fff}
.rBtn{height:40px;padding:0 18px;border-radius:20px;background:linear-gradient(#ff8fb0,var(--pink));color:#fff;font-weight:900;font-size:13px;box-shadow:inset 0 -3px 0 rgba(0,0,0,.15),0 3px 8px rgba(40,30,70,.25)}
.rBtn.ghost{background:#fff;color:var(--ink);box-shadow:inset 0 0 0 2px rgba(59,45,79,.18)}

/* ---------- C1.5 bottom nav: TREAT | POKA | [paw] | ALBUM | HOME — straight across, merged with the paw cradle ---------- */
.nav{position:fixed;left:0;right:0;bottom:0;height:calc(var(--sab) + var(--navH));padding-bottom:var(--sab);z-index:6;display:grid;grid-template-columns:1fr 1fr 1.9fr 1fr 1fr;align-items:center;
  background:linear-gradient(#ffffff,#f5ede2);border-top:2.5px solid #fff;box-shadow:0 -4px 14px rgba(40,30,70,.18)}
.nav button{position:relative;display:flex;flex-direction:column;align-items:center;gap:1px;font-size:12px;font-weight:900;color:#3b2d4f;letter-spacing:.03em;min-height:44px;justify-content:center}
.nav button + button::before{content:'';position:absolute;left:0;top:22%;bottom:22%;width:2px;border-radius:1px;background:#eadfd2}
.nav svg{width:30px;height:30px;filter:drop-shadow(0 2px 0 rgba(0,0,0,.12))}
/* the cradle: same material as the bar, rising behind the palm so paw + nav read as one component */
.nav::before{content:'';position:absolute;left:50%;top:-30px;width:190px;height:60px;margin-left:-95px;border-radius:95px 95px 0 0/50px 50px 0 0;background:linear-gradient(#ffffff,#fbf6ef);z-index:-1}
.nav .nbadge{position:absolute;top:2px;right:22%;min-width:16px;height:16px;padding:0 4px;border-radius:8px;background:var(--pink);color:#fff;font-size:9px;font-weight:900;font-style:normal;display:grid;place-items:center;border:2px solid #fff}
.nav .nbadge[hidden]{display:none}
body.race-mode .nav{opacity:.6;pointer-events:none}

/* ---------- C1.5 board moments: banner (Speedshot / Pose), Lucky flip, Stash dig, sheets ---------- */
.banner{position:fixed;left:50%;top:calc(var(--sat) + 150px);transform:translateX(-50%);z-index:11;display:flex;flex-direction:column;align-items:center;padding:6px 20px 8px;border-radius:20px;background:linear-gradient(#a98bff,#6a3fe0);border:3px solid #fff;color:#fff;box-shadow:0 5px 0 #3e1fa0,0 10px 24px rgba(40,20,90,.4);pointer-events:none;animation:bIn .3s}
.banner[hidden]{display:none}
.banner b{font-size:22px;font-weight:900;letter-spacing:.06em;-webkit-text-stroke:1px #3e1fa0;paint-order:stroke fill}
.banner small{font-size:11px;font-weight:900;opacity:.9}
.banner .bt{display:block;width:140px;height:6px;border-radius:3px;background:rgba(255,255,255,.3);margin-top:4px;overflow:hidden}
.banner .bt i{display:block;height:100%;width:100%;background:#fff6b0}
.banner.pose{background:linear-gradient(#9fb0ff,#5a6fe8);box-shadow:0 5px 0 #2a3fa8}
.banner.play{background:linear-gradient(#ffb36b,#ff7a3c);box-shadow:0 5px 0 #a8480c}
@keyframes bIn{from{transform:translateX(-50%) scale(.6);opacity:0}}
.lucky{position:fixed;inset:0;z-index:14;display:grid;place-items:center;pointer-events:none}
.lucky[hidden]{display:none}
.lkCard{position:relative;width:120px;height:150px;transform-style:preserve-3d;animation:flip 1.5s ease forwards}
.lkBack,.lkFace{position:absolute;inset:0;border-radius:18px;border:4px solid #fff;backface-visibility:hidden;box-shadow:0 10px 26px rgba(40,30,70,.4)}
.lkBack{background:repeating-linear-gradient(45deg,#4fbf5a 0 10px,#7fe08a 10px 20px)}
.lkFace{transform:rotateY(180deg);background:linear-gradient(#fffdf2,#e9ffe4);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;color:#2b5a2f}
.lkFace #lkIco{font-size:40px}.lkFace b{font-size:16px;font-weight:900;text-align:center;padding:0 6px}
@keyframes flip{0%{transform:scale(.5) rotateY(0)}25%{transform:scale(1) rotateY(0)}55%{transform:rotateY(180deg)}85%{transform:rotateY(180deg);opacity:1}100%{transform:rotateY(180deg) translateY(-20px);opacity:0}}
.stash{position:fixed;inset:0;z-index:15;display:flex;justify-content:center;align-items:flex-start;padding-top:calc(var(--sat) + 150px);background:rgba(40,30,60,.12);pointer-events:none}
.stash .stCard{pointer-events:auto}
.stash[hidden]{display:none}
.stCard{width:min(250px,68vw);padding:10px;border-radius:24px;background:linear-gradient(#fff4dc,#ffe0a6);border:4px solid #fff;box-shadow:0 6px 0 #c47d10,0 16px 36px rgba(40,30,70,.45);text-align:center}
.stCard header{display:flex;align-items:baseline;gap:8px;justify-content:center;flex-wrap:wrap;margin-bottom:8px}
.stCard header b{font-size:16px;font-weight:900;color:#8a4a10;letter-spacing:.06em}
.stCard header span{font-size:12px;font-weight:900;color:#6a5a7a}
.stCard header em{font-style:normal;font-size:12px;font-weight:900;color:#fff;background:#e0702a;border-radius:9px;padding:1px 8px}
.stBed{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;padding:8px;border-radius:18px;background:linear-gradient(#a8743e,#7a4e26);box-shadow:inset 0 4px 8px rgba(0,0,0,.35)}
.stBed button{position:relative;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 45% 40%,#c99456,#8a5a2a);box-shadow:inset 0 -4px 0 rgba(0,0,0,.25),0 2px 0 rgba(255,255,255,.15);font-size:22px;display:grid;place-items:center;color:#fff;transition:transform .12s}
.stBed button:active{transform:scale(.9)}
.stBed button .clue{position:absolute;inset:0;display:grid;place-items:center;font-size:18px;opacity:.85;animation:bob 2.4s ease-in-out infinite}
.stBed button.dug{background:radial-gradient(circle,#5a3a1a,#3a2410);cursor:default}
.stBed button.dug .clue{display:none}
.stBed button .find{font-size:12px;font-weight:900;line-height:1.1;padding:2px;text-shadow:0 1px 0 rgba(0,0,0,.5)}
.stNote{margin:8px 0 0;font-size:12px;font-weight:800;color:#6a4a2a;min-height:16px}
.sheet{position:fixed;left:50%;bottom:calc(var(--sab) + var(--navH) + 8px);transform:translateX(-50%);z-index:16;width:min(420px,94vw);max-height:62vh;overflow:auto;padding:14px;border-radius:24px;background:#fffaf2;border:3px solid #fff;box-shadow:0 14px 40px rgba(40,30,70,.4)}
.sheet[hidden]{display:none}
.shClose{position:absolute;right:10px;top:8px;width:32px;height:32px;border-radius:16px;background:#f1e3cf;font-weight:900}
.sheet h2{margin:0 0 2px;font-size:19px;font-weight:900}.sheet p{margin:0 0 10px;font-size:12px;font-weight:800;color:#8a7a9a}
.slots{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.slot{position:relative;aspect-ratio:4/5;border-radius:12px;border:3px dashed #d9c9b8;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;overflow:hidden;background:#fff}
.slot.done{border:3px solid #ffd23f;box-shadow:0 0 0 2px #fff,0 0 12px rgba(255,210,63,.7)}
.slot img,.slot canvas{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.slot b{position:relative;z-index:1;width:100%;padding:3px;font-size:11px;font-weight:900;color:#fff;background:rgba(59,45,79,.75);text-align:center}
.slot .id{position:absolute;top:3px;left:3px;z-index:1;font:700 8px ui-monospace,monospace;color:#fff;background:rgba(0,0,0,.45);padding:1px 3px;border-radius:4px}

/* routine rewards fly to the HUD */
.flyIcon{position:fixed;z-index:12;pointer-events:none;font-weight:900;font-size:18px;color:#fff;padding:4px 10px;border-radius:14px;background:linear-gradient(#ffe680,#e09a18);box-shadow:0 3px 0 #c47d10,0 6px 12px rgba(0,0,0,.25);text-shadow:0 1px 0 rgba(0,0,0,.3)}
.flyIcon.roll{background:linear-gradient(#b7a9ff,#5a46c8);box-shadow:0 3px 0 #3b2d8a,0 6px 12px rgba(0,0,0,.25)}
.flyIcon.flag{background:linear-gradient(#ff9fc4,#ff6b8b);box-shadow:0 3px 0 #c03a5e}
.fpsMeter{position:fixed;left:50%;top:calc(var(--sat) + 112px);transform:translateX(-50%);z-index:40;padding:3px 10px;border-radius:10px;background:rgba(0,0,0,.7);color:#7dff9a;font:800 12px ui-monospace,monospace;pointer-events:none}
img.fly,canvas.fly{position:fixed;z-index:9;width:72px;height:90px;border:4px solid #fff;border-radius:6px;box-shadow:0 6px 18px rgba(0,0,0,.35);pointer-events:none}

/* ---------- moment cue + landing card ---------- */
.moment{position:fixed;left:50%;top:34%;transform:translate(-50%,-50%) scale(.6);opacity:0;z-index:6;pointer-events:none;padding:8px 16px;border-radius:18px;background:#fff;font-weight:900;font-size:14px;box-shadow:0 6px 0 var(--c,#ff6b8b),0 10px 24px rgba(40,30,70,.3);white-space:nowrap;max-width:92vw;overflow:hidden;text-overflow:ellipsis}
.moment.show{animation:moment 1.8s ease forwards}
@keyframes moment{12%{opacity:1;transform:translate(-50%,-50%) scale(1.05)}20%{transform:translate(-50%,-50%) scale(1)}75%{opacity:1}100%{opacity:0;transform:translate(-50%,-70%) scale(1)}}
.landing{position:fixed;left:50%;top:calc(var(--sat) + 120px);transform:translateX(-50%) translateY(-10px);opacity:0;z-index:6;pointer-events:none;display:flex;flex-direction:column;align-items:center;padding:8px 18px 9px;border-radius:18px;background:linear-gradient(#fffdf8,#fff1dc);box-shadow:0 5px 0 var(--c,#ffc23d),0 12px 26px rgba(40,30,70,.32);text-align:center;max-width:62vw;transition:.25s}
.landing.show{opacity:1;transform:translateX(-50%) translateY(0);animation:landHide 2.6s forwards}
@keyframes landHide{80%{opacity:1}100%{opacity:0}}
.landing b{font-size:15px;font-weight:900;color:var(--ink)}
.landing span{font-size:11.5px;font-weight:800;color:#6a5a7a}
.landing small{font-size:9.5px;font-weight:900;color:var(--c,#ffc23d);text-transform:uppercase;letter-spacing:.06em;margin-top:2px}

/* ---------- batch review ---------- */
.review{position:fixed;inset:0;z-index:20;background:rgba(59,45,79,.55);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);display:grid;place-items:center;padding:16px}
.review[hidden]{display:none}
.rvCard{width:min(420px,94vw);max-height:86vh;overflow:auto;background:var(--cream);border-radius:24px;padding:16px;box-shadow:0 16px 40px rgba(0,0,0,.35)}
.rvCard h2{margin:0;font-size:18px}.rvCard p{margin:2px 0 10px;color:#8a7a9a;font-weight:800;font-size:12px}
.rvGrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(72px,1fr));gap:8px}
.rvGrid figure{margin:0;position:relative;border-radius:10px;overflow:hidden;border:3px solid transparent;background:#fff}
.rvGrid figure.rec{border-color:var(--gold);box-shadow:0 0 0 2px #fff,0 0 14px rgba(255,216,74,.8)}
.rvGrid figure.pick{border-color:var(--lav)}
.rvGrid img{width:100%;aspect-ratio:4/5;object-fit:cover;display:block}
.rvGrid figcaption{position:absolute;right:3px;bottom:3px;background:rgba(59,45,79,.8);color:#fff;font-size:10px;font-weight:900;padding:1px 6px;border-radius:8px}
.rvBtns{display:flex;gap:8px;justify-content:center;margin-top:12px}

/* ---------- Poka Radio page ---------- */
.radioPage{position:fixed;inset:0;z-index:30;background:linear-gradient(#2b2350,#5b4a6a 40%,#8f7fe8);color:#fff;overflow:auto;padding:calc(var(--sat) + 8px) 14px calc(var(--sab) + 20px)}
.radioPage[hidden]{display:none}
.rHead{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.rHead h1{margin:0;font-size:22px;font-weight:900}
.rHead .rSub{margin-left:auto;font-size:11px;font-weight:900;letter-spacing:.1em;color:#ffe9a8}
.rBack{width:36px;height:36px;border-radius:18px;background:rgba(255,255,255,.18);color:#fff;font-size:24px;font-weight:900;display:grid;place-items:center}
.rNow{display:flex;flex-direction:column;align-items:center;gap:8px;padding:14px;border-radius:24px;background:rgba(255,255,255,.1)}
.rArt{position:relative;width:min(220px,55vw);aspect-ratio:1;border-radius:20px;overflow:hidden;box-shadow:0 14px 34px rgba(0,0,0,.4)}
.rArt img{width:100%;height:100%;object-fit:cover;display:block}
.rDisc{position:absolute;right:-30%;top:10%;width:80%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,#fff 0 8%,#2b2350 9% 12%,#111 13% 100%);opacity:.0;transition:.4s}
.rDisc.spin{opacity:.9;animation:spin 3s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.rMeta{text-align:center;display:flex;flex-direction:column}
.rMeta b{font-size:18px;font-weight:900}.rMeta small{color:#d8cffd;font-weight:800}
.rCtl{display:flex;gap:14px;align-items:center}
.rCtl button{width:44px;height:44px;border-radius:22px;background:rgba(255,255,255,.18);color:#fff;font-size:18px;font-weight:900}
.rCtl .big{width:64px;height:64px;border-radius:32px;background:linear-gradient(#ff8fb0,var(--pink));box-shadow:inset 0 -4px 0 rgba(0,0,0,.2),0 6px 16px rgba(200,40,90,.45);font-size:24px}
#rVol{width:min(260px,70vw);accent-color:var(--pink)}
.rDock{width:100%}
.rDock iframe{width:100%;border:0;border-radius:12px;background:#fff}
.rLib,.rYT{margin-top:14px;padding:12px 14px;border-radius:20px;background:rgba(255,255,255,.1)}
.rLib h2,.rYT h2{margin:0 0 8px;font-size:15px;font-weight:900}
.rLib h2 small{color:#d8cffd;font-weight:800;margin-left:6px}
.rLib ul{list-style:none;margin:0;padding:0}
.rLib li{display:flex;align-items:center;gap:10px;padding:6px 6px;border-radius:12px;cursor:pointer}
.rLib li.on{background:rgba(255,255,255,.16)}
.rLib li img{width:42px;height:42px;border-radius:8px;object-fit:cover}
.rLib li span{display:flex;flex-direction:column;min-width:0;flex:1}
.rLib li b{font-size:13px;font-weight:900;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rLib li small{font-size:10.5px;color:#d8cffd;font-weight:800}
.eq{width:14px;height:14px;background:linear-gradient(90deg,#ffd84a 0 25%,transparent 25% 37%,#ffd84a 37% 62%,transparent 62% 75%,#ffd84a 75%);animation:eq .6s steps(3) infinite}
@keyframes eq{to{background-position:0 -14px}}
.rNote{font-size:11px;color:#d8cffd;font-weight:800;margin:8px 0 0}
.rYT p{font-size:13px;font-weight:700;margin:0 0 8px;color:#f1ecff}
.rYT .rBtn{margin:4px 6px 4px 0}
.rYTPlayer{margin-top:8px;aspect-ratio:16/9;border-radius:12px;background:#111;display:grid;place-items:center;font-weight:900;color:#ffd84a}
.rToast{position:fixed;left:50%;bottom:calc(var(--sab) + 24px);transform:translateX(-50%);background:#fff;color:var(--ink);font-weight:800;font-size:13px;padding:10px 16px;border-radius:16px;box-shadow:0 8px 24px rgba(0,0,0,.35);max-width:90vw;opacity:0}
.rToast.show{animation:moment 3.2s ease forwards}

@media (max-height:700px){.rail{top:calc(var(--sat) + 136px);gap:2px}.badge .art{width:44px;height:44px}.badge{width:64px}}
/* ---------- desktop: wide centred HUD, full left/right rails, larger board, same hierarchy ---------- */
@media (min-width:900px){
  .hud{left:50%;right:auto;width:min(720px,60vw);transform:translateX(-50%)}
  .ms{top:calc(var(--sat) + 68px);width:min(440px,34vw)}
  .rail{top:110px;gap:14px}.rail.left{left:14px}.rail.right{right:14px}
  .badge{width:100px}.badge .art{width:76px;height:76px}.badge .wlabel{font-size:15px}.badge .wtag{font-size:12px}
  .nav{left:50%;right:auto;width:min(880px,70vw);transform:translateX(-50%);border-radius:24px 24px 0 0}
  :root{--pawK:1.18}
}
.about{width:100%;border-collapse:collapse;font-size:13px}.about th{text-align:left;color:#8a7a9a;font-weight:800;padding:5px 8px 5px 0;white-space:nowrap}.about td{font:700 12px ui-monospace,monospace;color:#3b2d4f;word-break:break-all}
body.build-mismatch .buildTag{color:#ff4f5f}