/* Match HUD in the punk sticker theme (docs/hud-design-system.md). Materials only: every surface
   keeps its position, size, state colours and behaviour from its own sheet; this file swaps glass
   and glow for keylined stickers. Loaded after the feature sheets and before hud-components.css.
   The html body.hud-theme-sticker prefix is what outranks the combat-hud, match-focus and
   relay-surges selectors, some of which already start with html body. */

/* Vitals. [id] outranks desktop-ui's body:not(.touch):not(.inlobby):not(.spectating) #heroPanel. */
html body.hud-theme-sticker:not(.inlobby) #heroPanel[id]{background:var(--hud-sticker-fill);border:var(--hud-sticker-keyline-width) solid var(--hud-sticker-keyline);border-radius:var(--hud-sticker-radius);box-shadow:var(--hud-sticker-float);backdrop-filter:none;-webkit-backdrop-filter:none;}
html body.hud-theme-sticker:not(.inlobby) #heroPanel[id]::before{background:none;border:0;box-shadow:none;}
html body.hud-theme-sticker:not(.inlobby) #heroPanel .track{background:var(--hud-sticker-wall);border:2px solid var(--hud-sticker-keyline);border-radius:999px;box-shadow:none;}

/* Objective and relay notices: a sticker. The phase still colours the text, and urgent the edge. */
html body.hud-theme-sticker:not(.inlobby) :is(#relaySurgeHud,#objectiveHint,#banner,#combatPurchase)[id]{background:var(--hud-sticker-fill);border:var(--hud-sticker-keyline-width) solid var(--hud-sticker-keyline);border-radius:var(--hud-sticker-radius);box-shadow:var(--hud-sticker-float);backdrop-filter:none;-webkit-backdrop-filter:none;}
html body.hud-theme-sticker:not(.inlobby) #relaySurgeHud[id][data-phase="urgent"]{border-color:var(--hud-danger);}

/* Desktop score strip: each team row and the clock become stickers (the orbital clip goes). The
   desktop minimap is drawn inside the game canvas (render.js), not in CSS, so it is untouched here. */
html body.hud-theme-sticker:not(.inlobby) .trow{background:var(--hud-sticker-fill);border:var(--hud-sticker-keyline-width) solid var(--hud-sticker-keyline);border-radius:var(--hud-sticker-radius);box-shadow:var(--hud-sticker-float);clip-path:none;}
/* The scoreboard chip is already a themed .btn; over the world it needs the rim like its neighbours. */
html body.hud-theme-sticker:not(.inlobby) #btnScores[id]{box-shadow:var(--hud-sticker-float);}
/* The klein icons are painted art, not pixel sprites. */
html body.hud-theme-sticker :is(#btnScores,#btnHudOptions) img{image-rendering:auto;}
html body.hud-theme-sticker:not(.inlobby) #btnScores[id]:not(:disabled):active{box-shadow:0 0 0 2px var(--hud-sticker-cut),0 1px 0 2px var(--hud-sticker-keyline);}
html body.hud-theme-sticker:not(.inlobby) #clock[id]{padding:2px var(--hud-space-2);background:var(--hud-sticker-fill);border:var(--hud-sticker-keyline-width) solid var(--hud-sticker-keyline);border-radius:var(--hud-sticker-radius);box-shadow:var(--hud-sticker-float);}

/* Minimap: a keyline ring and a hard drop drawn with box-shadow, so the canvas keeps its size. */
html body.hud-theme-sticker:not(.inlobby) #mobileMinimap{border:0;border-radius:var(--hud-sticker-radius);background:var(--hud-sticker-wall);box-shadow:0 0 0 var(--hud-sticker-keyline-width) var(--hud-sticker-keyline),0 0 0 calc(var(--hud-sticker-keyline-width) + 2px) var(--hud-sticker-cut),0 5px 0 calc(var(--hud-sticker-keyline-width) + 2px) var(--hud-sticker-keyline);}

/* Options and the other utility buttons. */
html body.hud-theme-sticker:not(.inlobby) #hudUtilityBar .btn{background:var(--hud-sticker-raised);border:var(--hud-sticker-keyline-width) solid var(--hud-sticker-keyline);border-radius:var(--hud-sticker-radius);box-shadow:var(--hud-sticker-float);backdrop-filter:none;-webkit-backdrop-filter:none;}

/* Floating stickers over the world (vitals, notices, minimap, buttons, cards) take the die-cut rim
   (--hud-sticker-float); full-screen surfaces like Game Options and results do not need it. */

/* ONE PAW kit strip: each icon a small round sticker, cyan-ringed when ready. */
html body.hud-theme-sticker .opKit{box-shadow:0 0 0 2px var(--hud-sticker-keyline),0 2px 0 2px var(--hud-sticker-keyline);}
html body.hud-theme-sticker .opKit.ready{box-shadow:0 0 0 2px var(--hud-sticker-cool),0 2px 0 2px var(--hud-sticker-keyline);}
/* ONE PAW gear strip: each item a small square sticker, cyan-ringed when a timed one is back. */
html body.hud-theme-sticker .gsItem{background:var(--hud-sticker-fill);box-shadow:0 0 0 2px var(--hud-sticker-keyline),0 2px 0 2px var(--hud-sticker-keyline);}
html body.hud-theme-sticker .gsItem.ready{box-shadow:0 0 0 2px var(--hud-sticker-cool),0 2px 0 2px var(--hud-sticker-keyline);}

/* Upgrade tray: the rarity colour moves from a glow to a thick band along each card's top. */
html body.hud-theme-sticker .opHead{text-shadow:0 2px 0 var(--hud-sticker-keyline);}
html body.hud-theme-sticker .opTitle{display:inline-block;padding:2px var(--hud-space-2);background:var(--hud-sticker-tape);color:var(--hud-sticker-ink);text-shadow:none;transform:rotate(-2deg);}
html body.hud-theme-sticker #onePawPick[data-kind="evolve"] .opTitle{color:var(--hud-sticker-ink);background:var(--hud-sticker-cool);}
html body.hud-theme-sticker #onePawPick[data-kind="item"] .opTitle{color:var(--hud-sticker-ink);background:var(--hud-sticker-go);}
html body.hud-theme-sticker .opScrap{padding:2px var(--hud-space-2);background:var(--hud-sticker-fill);border:2px solid var(--hud-sticker-keyline);border-radius:var(--hud-sticker-radius);text-shadow:none;}
html body.hud-theme-sticker .opCard.opLocked:active{transform:none;box-shadow:var(--hud-sticker-float);}
html body.hud-theme-sticker .opClock{padding:2px var(--hud-space-2);background:var(--hud-sticker-fill);border:2px solid var(--hud-sticker-keyline);border-radius:var(--hud-sticker-radius);color:var(--hud-text);text-shadow:none;}
html body.hud-theme-sticker .opCard{background:var(--hud-sticker-fill);border:var(--hud-sticker-keyline-width) solid var(--hud-sticker-keyline);border-top:8px solid var(--op-col,var(--hud-sticker-keyline));box-shadow:var(--hud-sticker-float);}
html body.hud-theme-sticker .opCard:active{transform:translateY(4px);box-shadow:var(--hud-sticker-drop-pressed);}
/* The rarest card still asks for the tap, by bobbing instead of glowing. */
html body.hud-theme-sticker .opCard.opBest{animation:opBestSticker 1.2s ease-in-out infinite;}
@keyframes opBestSticker{50%{transform:translateY(-4px);box-shadow:0 0 0 2px var(--hud-sticker-cut),0 9px 0 2px var(--hud-sticker-keyline);}}
@media (prefers-reduced-motion:reduce){html body.hud-theme-sticker .opCard.opBest{animation:none;}}

/* Coach and tutorial cards. */
html body.hud-theme-sticker :is(#tutSpotCard,#tutBox,#tutSheetCard){background:var(--hud-sticker-fill);border:var(--hud-sticker-keyline-width) solid var(--hud-sticker-keyline);border-radius:var(--hud-sticker-radius);box-shadow:var(--hud-sticker-float);}

/* Game Options is a plain <dialog>, not .hud-dialog, so it takes the dialog sticker here. */
html body.hud-theme-sticker #hudOptionsDialog{background:var(--hud-sticker-fill);border:var(--hud-sticker-keyline-width) solid var(--hud-sticker-keyline);border-radius:calc(var(--hud-sticker-radius) * 1.5);box-shadow:var(--hud-sticker-lift-far);}
html body.hud-theme-sticker #hudOptionsDialog::backdrop{background:var(--hud-sticker-scrim,rgba(8,6,11,.82));}
html body.hud-theme-sticker #hudOptionsDialog .settingsHeading{background:var(--hud-sticker-raised);color:var(--hud-text);border:0;border-bottom:var(--hud-sticker-keyline-width) solid var(--hud-sticker-keyline);}

/* The options list itself (#gameOptions, style.css) carries its own navy gradient and control style. */
html body.hud-theme-sticker #gameOptions{background:transparent;color:var(--hud-text);}
html body.hud-theme-sticker #gameOptions .optionRow{border-top-color:var(--hud-sticker-keyline);}
html body.hud-theme-sticker #gameOptions button{background:var(--hud-sticker-raised);color:var(--hud-text);border:var(--hud-sticker-keyline-width) solid var(--hud-sticker-keyline);border-radius:var(--hud-sticker-radius);box-shadow:var(--hud-sticker-drop);}
html body.hud-theme-sticker #gameOptions button:hover{background:var(--hud-sticker-raised-hover);border-color:var(--hud-sticker-keyline);}
html body.hud-theme-sticker #gameOptions select{background:var(--hud-sticker-wall);color:var(--hud-text);border:var(--hud-sticker-keyline-width) solid var(--hud-sticker-keyline);border-radius:var(--hud-sticker-radius);box-shadow:inset 0 3px 0 #0006;}
html body.hud-theme-sticker #gameOptions .optionsReports{background:var(--hud-sticker-wall);border:var(--hud-sticker-keyline-width) solid var(--hud-sticker-keyline);border-radius:var(--hud-sticker-radius);}

/* Death camera and its combat recap: a floating sticker with the recap as a recessed well inside. */
html body.hud-theme-sticker:not(.inlobby) #deathCameraHud[id]{background:var(--hud-sticker-fill);border:var(--hud-sticker-keyline-width) solid var(--hud-sticker-keyline);border-radius:var(--hud-sticker-radius);box-shadow:var(--hud-sticker-float);backdrop-filter:none;-webkit-backdrop-filter:none;}
html body.hud-theme-sticker:not(.inlobby) #deathCameraHud #deathRecap{background:var(--hud-sticker-wall);border:2px solid var(--hud-sticker-keyline);border-radius:var(--hud-sticker-radius);}

/* Hover tooltips (desktop). hud-components.css paints #tip, style.css #itemTooltip, as an overlay; here
   each is a small sticker. */
html body.hud-theme-sticker #tip{background:var(--hud-sticker-fill);border:var(--hud-sticker-keyline-width) solid var(--hud-sticker-keyline);border-radius:var(--hud-sticker-radius);box-shadow:var(--hud-sticker-float);}
html body.hud-theme-sticker #itemTooltip{background:var(--hud-sticker-fill);border:var(--hud-sticker-keyline-width) solid var(--hud-sticker-keyline);border-radius:var(--hud-sticker-radius);box-shadow:var(--hud-sticker-float);}

/* Live scoreboard (TAB / SCORES): the panel is a dialog-sized sticker and its title white type. The MVP
   row keeps its gold edge and LEADER tag: that gold marks a reward, not decoration. */
html body.hud-theme-sticker .matchScorePanel{background:var(--hud-sticker-fill);border:var(--hud-sticker-keyline-width) solid var(--hud-sticker-keyline);border-radius:calc(var(--hud-sticker-radius) * 1.5);box-shadow:var(--hud-sticker-lift-far);}
html body.hud-theme-sticker .matchScoreHeading h2{font-family:var(--hud-font-display);letter-spacing:.03em;color:var(--hud-text);-webkit-text-stroke:4px var(--hud-sticker-keyline);paint-order:stroke fill;text-shadow:0 2px 0 var(--hud-sticker-keyline);}
html body.hud-theme-sticker #matchStatsTable th{border-bottom-color:var(--hud-sticker-keyline);}

/* Results: the dotted wall under the win or loss tint, a keylined title, sticker panels. */
html body.hud-theme-sticker #endcard{background:var(--hud-sticker-dots),var(--hud-sticker-wall);}
/* The win or loss tint is a keylined plate on the title itself: a screen-height band sat in empty space
   under the title, since the title rides the top of the card. */
html body.hud-theme-sticker #endcard:is(.win,.lose) #endTitle{padding:var(--hud-space-2) var(--hud-space-4);background:color-mix(in srgb,var(--hud-health) 22%,var(--hud-sticker-wall));border:var(--hud-sticker-keyline-width) solid var(--hud-sticker-keyline);border-radius:var(--hud-sticker-radius);box-shadow:var(--hud-sticker-drop);}
html body.hud-theme-sticker #endcard.lose #endTitle{background:color-mix(in srgb,var(--hud-danger) 20%,var(--hud-sticker-wall));}
html body.hud-theme-sticker #endcard #endTitle{-webkit-text-stroke:6px var(--hud-sticker-keyline);paint-order:stroke fill;text-shadow:0 4px 0 var(--hud-sticker-keyline);}
html body.hud-theme-sticker #endcard .endMatchSummary{border-block:2px solid var(--hud-sticker-keyline);}
html body.hud-theme-sticker #endcard :is(.endXpTrack,.tutorialCompletion){background:var(--hud-sticker-fill);border:var(--hud-sticker-keyline-width) solid var(--hud-sticker-keyline);border-radius:var(--hud-sticker-radius);box-shadow:var(--hud-sticker-drop);}

/* Phone score pill: a sticker. The keyline and rim are drawn with box-shadow so the pill keeps its size. */
html body.hud-theme-sticker.touch.combat-hud #combatTeams{background:var(--hud-sticker-fill);box-shadow:0 0 0 var(--hud-sticker-keyline-width) var(--hud-sticker-keyline),0 0 0 calc(var(--hud-sticker-keyline-width) + 2px) var(--hud-sticker-cut),0 5px 0 calc(var(--hud-sticker-keyline-width) + 2px) var(--hud-sticker-keyline);}
html body.hud-theme-sticker.touch.combat-hud #combatKda{border-left-color:var(--hud-sticker-keyline);}

/* Kill feed: desktop rows are small stickers; the phone's bare rows take a hard keyline, not a blur. */
html body.hud-theme-sticker .kfRow{background:var(--hud-sticker-fill);border-color:var(--hud-sticker-keyline);box-shadow:0 2px 0 var(--hud-sticker-keyline);}
html body.hud-theme-sticker.touch.combat-hud .kfRow{background:transparent;box-shadow:none;text-shadow:1px 0 0 var(--hud-sticker-keyline),-1px 0 0 var(--hud-sticker-keyline),0 -1px 0 var(--hud-sticker-keyline),0 2px 0 var(--hud-sticker-keyline);}

/* Companion skills: small round stickers on the phone, keylined chips in the desktop buff column. */
html body.hud-theme-sticker.touch.combat-hud #companionSkills .hud-companion-skill{background:var(--hud-sticker-fill);border-color:var(--hud-sticker-keyline);box-shadow:0 0 0 2px var(--hud-sticker-keyline),0 2px 0 2px var(--hud-sticker-keyline);}
html body.hud-theme-sticker.touch.combat-hud #companionSkills .hud-companion-skill[data-ready="true"]{border-color:var(--hud-sticker-keyline);box-shadow:0 0 0 2px var(--hud-sticker-cool),0 2px 0 2px var(--hud-sticker-keyline);}
html body.hud-theme-sticker:not(.touch):not(.inlobby) #companionSkills .hud-companion-skill{background:var(--hud-sticker-fill);border-color:var(--hud-sticker-keyline);box-shadow:0 0 0 2px var(--hud-sticker-keyline),0 2px 0 2px var(--hud-sticker-keyline);backdrop-filter:none;-webkit-backdrop-filter:none;text-shadow:0 2px 0 var(--hud-sticker-keyline);}

/* Life and mana: flat fills with one hard highlight row instead of a two-tone gradient. */
html body.hud-theme-sticker .fill.life{background:linear-gradient(180deg,rgba(255,255,255,.25) 0 2px,transparent 2px),var(--life);}
html body.hud-theme-sticker .fill.mana{background:linear-gradient(180deg,rgba(255,255,255,.25) 0 2px,transparent 2px),var(--mana);}
/* The vital numbers sit on the bars with a hard keyline instead of a blurred halo. */
html body.hud-theme-sticker #heroPanel .vitalHeading{text-shadow:1px 0 0 var(--hud-sticker-keyline),-1px 0 0 var(--hud-sticker-keyline),0 -1px 0 var(--hud-sticker-keyline),0 2px 0 var(--hud-sticker-keyline);}

/* ONE PAW verb: sticker type. */
html body.hud-theme-sticker.onepaw #onePawVerb{-webkit-text-stroke:4px var(--hud-sticker-keyline);paint-order:stroke fill;text-shadow:0 2px 0 var(--hud-sticker-keyline);}

/* Match moments: the headline in sticker type (its tone still colours the fill), the names on a chip. */
html body.hud-theme-sticker #matchMoment .mmHead{-webkit-text-stroke:5px var(--hud-sticker-keyline);paint-order:stroke fill;text-shadow:0 3px 0 var(--hud-sticker-keyline);}
html body.hud-theme-sticker #matchMoment .mmLine{background:var(--hud-sticker-fill);border-color:var(--hud-sticker-keyline);border-radius:var(--hud-sticker-radius);box-shadow:var(--hud-sticker-float);text-shadow:none;}
html body.hud-theme-sticker #matchMoment .mmSub{text-shadow:0 2px 0 var(--hud-sticker-keyline);}

/* Desktop ONE PAW band: the level badge is a mini sticker, scrap and Bones take a hard keyline. */
@media (min-width:1100px) and (min-height:600px){
  html body.hud-theme-sticker.onepaw:not(.touch):not(.inlobby):not(.spectating) #heroMeta>i:first-child{background:var(--hud-sticker-fill);border-color:var(--hud-sticker-keyline);box-shadow:0 2px 0 var(--hud-sticker-keyline);text-shadow:0 1px 0 var(--hud-sticker-keyline);}
  html body.hud-theme-sticker.onepaw:not(.touch):not(.inlobby):not(.spectating) #heroMeta>:is(.gold,#soulTxt){text-shadow:1px 0 0 var(--hud-sticker-keyline),-1px 0 0 var(--hud-sticker-keyline),0 -1px 0 var(--hud-sticker-keyline),0 2px 0 var(--hud-sticker-keyline);}
}

/* Item cells: square stickers like .gsItem; an empty one is a plain recessed slot, not a dashed glow. */
html body.hud-theme-sticker #itemsPanel .itemSlot{background:var(--hud-sticker-fill);border-color:var(--hud-sticker-keyline);box-shadow:0 2px 0 var(--hud-sticker-keyline);}
html body.hud-theme-sticker #itemsPanel .itemSlot.active{border-color:var(--hud-sticker-cool);}
html body.hud-theme-sticker:not(.touch):not(.inlobby):not(.spectating) #itemsPanel .itemSlot.empty{border-style:solid;border-color:var(--hud-sticker-keyline);background:var(--hud-sticker-wall);box-shadow:none;}
html body.hud-theme-sticker .autoToggle{background:var(--hud-sticker-fill);border-color:var(--hud-sticker-keyline);box-shadow:0 2px 0 var(--hud-sticker-keyline);}

/* Status chips and the desktop crowd-control notice: stickers that keep their state colours. */
html body.hud-theme-sticker .effect{border-color:var(--hud-sticker-keyline);box-shadow:0 2px 0 var(--hud-sticker-keyline);text-shadow:0 1px 0 var(--hud-sticker-keyline);}
html body.hud-theme-sticker #desktopControl{background:var(--hud-sticker-fill);border-radius:var(--hud-sticker-radius);box-shadow:var(--hud-sticker-float);}

/* Compact readouts (hud-components.css): sticker fill, keyline edge, no metal sheen. #objectives only
   loses the metal: on a desktop it is the transparent frame around the .trow stickers. */
html body.hud-theme-sticker:not(.inlobby) :is(.hud-readout:not(#objectives),.hud-compact){background:var(--hud-sticker-fill);border-color:var(--hud-sticker-keyline);box-shadow:var(--hud-sticker-float);}
html body.hud-theme-sticker:not(.inlobby) #objectives.hud-readout{border-color:var(--hud-sticker-keyline);box-shadow:none;}

/* Choices and upgrade rows (hud-components.css) and the evolution panel: keylined sticker cards. */
html body.hud-theme-sticker :is(.hud-choice,.hud-upgrade-choice){background:var(--hud-sticker-raised);border-color:var(--hud-sticker-keyline);box-shadow:var(--hud-sticker-drop);}
html body.hud-theme-sticker :is(.hud-choice,.hud-upgrade-choice):not(:disabled):hover{background:var(--hud-sticker-raised-hover);border-color:var(--hud-accent);}
html body.hud-theme-sticker .hud-upgrade-choice[open]{background:var(--hud-sticker-fill);border-color:var(--hud-accent);}
html body.hud-theme-sticker #evolutionPanel{background:var(--hud-sticker-fill);border-color:var(--hud-sticker-keyline);border-radius:var(--hud-sticker-radius);box-shadow:var(--hud-sticker-float);}
html body.hud-theme-sticker .evolutionOptions button{background:var(--hud-sticker-raised);box-shadow:0 2px 0 var(--hud-sticker-keyline);}
html body.hud-theme-sticker .evolutionOptions button:is(:hover,:focus-visible){background:var(--hud-sticker-raised-hover);}
html body.hud-theme-sticker .evolutionOptions .hud-upgrade-choice{border-color:var(--hud-sticker-keyline);}
html body.hud-theme-sticker.touch.combat-hud #evolutionPanel[data-view="collapsed"] .evolutionReopen{background:var(--hud-sticker-fill);border-color:var(--hud-sticker-keyline);box-shadow:0 2px 0 var(--hud-sticker-keyline);}

/* Reward displays (hud-components.css): a flat tinted band along the bottom, not a soft pool. */
html body.hud-theme-sticker .hud-reward-display{background:linear-gradient(180deg,transparent 0 58%,color-mix(in srgb,var(--hud-sticker-go) 14%,var(--hud-sticker-wall)) 58%),var(--hud-sticker-wall);}

/* Rank badges: keylined stickers. The medals' hard drop replaces their glow in style.css (filters stay
   out of this sheet). */
html body.hud-theme-sticker .rankBadge{background:var(--hud-sticker-raised);border-color:var(--hud-sticker-keyline);box-shadow:0 3px 0 var(--hud-sticker-keyline);}
html body.hud-theme-sticker .rankBadge .rankMedal{box-shadow:none;}
html body.hud-theme-sticker .rankBadge .rankTier{text-shadow:0 1px 0 var(--hud-sticker-keyline);}
html body.hud-theme-sticker .rankProgression{background:var(--hud-sticker-raised);border-color:var(--hud-sticker-keyline);box-shadow:var(--hud-sticker-drop);}
html body.hud-theme-sticker .rankMilestone.current{border-color:var(--hud-sticker-cool);background:var(--hud-sticker-fill);}

/* Hold-to-read hint (touch): a floating sticker. */
html body.hud-theme-sticker #holdHint{background:var(--hud-sticker-fill);border-color:var(--hud-sticker-keyline);border-radius:var(--hud-sticker-radius);box-shadow:var(--hud-sticker-float);}

/* Floating joystick: a keylined ring; the nub a small cyan sticker. */
html body.hud-theme-sticker.touch.combat-hud #stick{border-color:color-mix(in srgb,var(--hud-sticker-cut) 45%,transparent);background:transparent;box-shadow:0 0 0 2px color-mix(in srgb,var(--hud-sticker-keyline) 60%,transparent);}
html body.hud-theme-sticker.touch.combat-hud #stick.floating{border-color:var(--hud-sticker-cut);background:color-mix(in srgb,var(--hud-sticker-wall) 35%,transparent);box-shadow:0 0 0 2px var(--hud-sticker-keyline);}
html body.hud-theme-sticker.touch.combat-hud #stickNub{background:color-mix(in srgb,var(--hud-sticker-cool) 40%,transparent);border-color:var(--hud-sticker-keyline);box-shadow:0 0 0 2px var(--hud-sticker-cool),0 3px 0 2px var(--hud-sticker-keyline);}

/* Tutorial: the ghost thumb leaves a dotted trail, and the spotlight is a hard cutout with a keylined ring. */
html body.hud-theme-sticker #tutThumb::before{width:4px;margin-left:-2px;background:repeating-linear-gradient(to top,var(--hud-accent) 0 6px,transparent 6px 12px);opacity:.9;}
html body.hud-theme-sticker #tutThumb i{background:color-mix(in srgb,var(--hud-accent) 35%,transparent);box-shadow:0 0 0 2px var(--hud-sticker-keyline),0 3px 0 2px var(--hud-sticker-keyline);}
html body.hud-theme-sticker #tutSpot{background:radial-gradient(circle at var(--spot-x,50%) var(--spot-y,50%),transparent var(--spot-r,60px),var(--hud-sticker-scrim) var(--spot-r,60px));}
html body.hud-theme-sticker #tutSpot::before{box-shadow:0 0 0 2px var(--hud-sticker-keyline),inset 0 0 0 2px var(--hud-sticker-keyline);}

/* Shop planner: the next buy pulses a hard ring instead of a glow. */
html body.hud-theme-sticker .buildNode.next{box-shadow:0 0 0 2px var(--hud-accent),0 0 0 4px var(--hud-sticker-keyline);animation:buildNextSticker 1.2s steps(1) infinite;}
@keyframes buildNextSticker{50%{box-shadow:0 0 0 4px var(--hud-accent),0 0 0 6px var(--hud-sticker-keyline);}}
@media (prefers-reduced-motion:reduce){html body.hud-theme-sticker .buildNode.next{animation:none;}}

/* The page behind the canvas: the dotted sticker wall instead of the starfield. */
html body.hud-theme-sticker{background:var(--hud-sticker-dots),var(--hud-sticker-wall);}