/* Decorative, locally bundled icons. Empty pseudo-elements keep labels and live updates intact. */
#home .mode[data-go="today"],
#today .guide-title { --ui-icon:url("icons/calendar.svg"); }
#home .mode[data-go="generate"],
#generate .guide-title,
#new-seed { --ui-icon:url("icons/shuffle.svg"); }
#home .mode[data-go="archive"],
#archive .guide-title { --ui-icon:url("icons/archive.svg"); }
#home .mode[data-go="leaderboard"],
#leaderboard .guide-title,
#result-board-link,
.best-pill,
.fingerprint > span:nth-child(3),
.progress-stat:nth-child(2) { --ui-icon:url("icons/trophy.svg"); }
#home .mode[data-go="achievements"],
#achievements .guide-title,
#result-achievements,
.progress-stat:nth-child(3) { --ui-icon:url("icons/medal.svg"); }
#home .mode[data-go="unlockables"],
#unlockables .guide-title,
.unlockables-entry,
#result-cosmetics { --ui-icon:url("icons/palette.svg"); }
#customize-track,
#powerups .guide-title { --ui-icon:url("icons/sliders.svg"); }
#options .guide-title { --ui-icon:url("icons/gear.svg"); }
#scoring .guide-title { --ui-icon:url("icons/info.svg"); }
#home-button,
#pause-home { --ui-icon:url("icons/home.svg"); }
#resume-game,
#archive-unplayed { --ui-icon:url("icons/play.svg"); }
.option-actions > .action,
#confirm-power-mix,
.cosmetic-state[data-icon="check"] { --ui-icon:url("icons/check.svg"); }
#reset-power-mix,
#board-refresh,
#restore-purchases,
.fingerprint > span:nth-child(2) { --ui-icon:url("icons/refresh.svg"); }
#enter-track-code,
.seed > small:first-child { --ui-icon:url("icons/code.svg"); }
.track-code-form .action { --ui-icon:url("icons/load.svg"); }
#share-track { --ui-icon:url("icons/share.svg"); }
#archive-recent { --ui-icon:url("icons/clock.svg"); }
#archive-prev { --ui-icon:url("icons/left.svg"); }
#archive-next { --ui-icon:url("icons/right.svg"); }
[data-cosmetic-tab="tracker"],
.fingerprint > span:first-child { --ui-icon:url("icons/tracker.svg"); }
[data-cosmetic-tab="laser"] { --ui-icon:url("icons/laser.svg"); }
[data-cosmetic-tab="frame"] { --ui-icon:url("icons/frame.svg"); }
.cosmetic-buy { --ui-icon:url("icons/cart.svg"); }
.cosmetic-state[data-icon="eye"] { --ui-icon:url("icons/eye.svg"); }
.progress-stat:first-child { --ui-icon:url("icons/flame.svg"); }
#distance { --ui-icon:url("icons/route.svg"); }
.hud .level { --ui-icon:url("icons/level.svg"); }
.meters > span:first-child { --ui-icon:url("icons/size.svg"); }
.meters > span:nth-child(2) { --ui-icon:url("icons/speed.svg"); }
.meters > span:nth-child(3) { --ui-icon:url("icons/star.svg"); }
.settings:has([data-setting="sfx"]) > div > span { --ui-icon:url("icons/sound.svg"); }
.settings:has([data-setting="music"]) > div > span { --ui-icon:url("icons/music.svg"); }
.settings:has([data-setting="haptics"]) > div > span { --ui-icon:url("icons/haptics.svg"); }
.settings:has([data-setting="reduced"]) > div > span { --ui-icon:url("icons/motion.svg"); }

:where(#home .mode[data-go="today"])::before,
:where(#today .guide-title)::before,
:where(#home .mode[data-go="generate"])::before,
:where(#generate .guide-title)::before,
:where(#new-seed)::before,
:where(#home .mode[data-go="archive"])::before,
:where(#archive .guide-title)::before,
:where(#home .mode[data-go="leaderboard"])::before,
:where(#leaderboard .guide-title)::before,
:where(#result-board-link)::before,
:where(.best-pill)::before,
:where(.fingerprint > span:nth-child(3))::before,
:where(.progress-stat:nth-child(2))::before,
:where(#home .mode[data-go="achievements"])::before,
:where(#achievements .guide-title)::before,
:where(#result-achievements)::before,
:where(.progress-stat:nth-child(3))::before,
:where(#home .mode[data-go="unlockables"])::before,
:where(#unlockables .guide-title)::before,
:where(.unlockables-entry)::before,
:where(#result-cosmetics)::before,
:where(#customize-track)::before,
:where(#powerups .guide-title)::before,
:where(#options .guide-title)::before,
:where(#scoring .guide-title)::before,
:where(#home-button)::before,
:where(#pause-home)::before,
:where(#resume-game)::before,
:where(#archive-unplayed)::before,
:where(.option-actions > .action)::before,
:where(#confirm-power-mix)::before,
:where(.cosmetic-state[data-icon="check"])::before,
:where(#reset-power-mix)::before,
:where(#board-refresh)::before,
:where(#restore-purchases)::before,
:where(.fingerprint > span:nth-child(2))::before,
:where(#enter-track-code)::before,
:where(.seed > small:first-child)::before,
:where(.track-code-form .action)::before,
:where(#share-track)::before,
:where(#archive-recent)::before,
:where(#archive-prev)::before,
:where(#archive-next)::before,
:where([data-cosmetic-tab="tracker"])::before,
:where(.fingerprint > span:first-child)::before,
:where([data-cosmetic-tab="laser"])::before,
:where([data-cosmetic-tab="frame"])::before,
:where(.cosmetic-buy)::before,
:where(.cosmetic-state[data-icon="eye"])::before,
:where(.progress-stat:first-child)::before,
:where(#distance)::before,
:where(.hud .level)::before,
:where(.meters > span:first-child)::before,
:where(.meters > span:nth-child(2))::before,
:where(.meters > span:nth-child(3))::before,
:where(.settings:has([data-setting="sfx"]) > div > span)::before,
:where(.settings:has([data-setting="music"]) > div > span)::before,
:where(.settings:has([data-setting="haptics"]) > div > span)::before,
:where(.settings:has([data-setting="reduced"]) > div > span)::before {
  content:""; display:inline-block; width:1.25em; height:1.25em; flex:0 0 1.25em;
  background:currentColor; -webkit-mask:var(--ui-icon) center/contain no-repeat;
  mask:var(--ui-icon) center/contain no-repeat; vertical-align:-.22em;
  pointer-events:none;
}

/* Keep the title-card copy aligned in a single column beside its icon. */
#home > .mode { position:relative; padding-left:57px; }
#home > .mode::before { position:absolute; left:18px; top:50%; width:27px; height:27px; transform:translateY(-50%); }
#home .home-collections .mode { text-align:center; }
#home .home-collections .mode::before { display:block; width:24px; height:24px; margin:0 auto 7px; }

/* Full-width actions use one row. Narrow collections and tabs keep icons above the label. */
#new-seed, #customize-track, #home-button, #pause-home, #resume-game,
.unlockables-entry, .option-actions > .action, #confirm-power-mix, #reset-power-mix,
#share-track, #enter-track-code, .track-code-form .action, #board-refresh,
#restore-purchases, .cosmetic-buy, .cosmetic-state, .archive-tools .pill, .archive-pagination .pill {
  display:flex; align-items:center; justify-content:center; gap:.45em;
}
#result .result-collections button { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; }
#result .result-collections button::before { width:22px; height:22px; flex-basis:22px; }
.cosmetic-tabs button { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; min-height:62px; }
.cosmetic-tabs button::before { width:22px; height:22px; flex-basis:22px; }
.cosmetic-buy, .cosmetic-state { flex-wrap:wrap; padding:8px 5px; }

/* Let longer heading bubbles wrap without touching the Back circle. */
.guide-head .guide-title { gap:8px; max-width:calc(100% - 96px); padding:10px 12px; font-size:clamp(11px,3.3vw,16px); letter-spacing:1px; line-height:1.3; }
.guide-head .guide-title::before { width:20px; height:20px; flex-basis:20px; }
.fingerprint > span::before, .progress-stat::before { display:block; width:22px; height:22px; margin:0 auto 6px; color:#76f3ff; }
.progress-stat { align-items:center; }
.progress-stat::before { margin-bottom:0; flex:0 0 22px; }
.best-pill::before, #distance::before, #result-board-link::before,
.seed > small:first-child::before, .settings > div > span::before { margin-right:.45em; }
#distance::before { color:#76f3ff; }
.settings > div > span::before { color:#76f3ff; }
#archive-prev, #archive-next { gap:4px; }
#archive-next::before { order:1; }

/* The HUD keeps its original 56px meters and gameplay boundary. */
.meters > span { display:grid; grid-template-columns:max-content max-content; column-gap:4px; justify-content:center; align-content:center; }
.meters > span::before { width:13px; height:13px; color:var(--laser,#76f3ff); }
.meters > span > b { grid-column:1 / -1; text-align:center; }
.hud .level::before { width:15px; height:15px; flex-basis:15px; color:var(--laser,#76f3ff); }

@media(max-width:380px) {
  #home > .mode { padding-left:48px; padding-right:12px; }
  #home > .mode::before { left:13px; width:23px; height:23px; }
  #home > .mode strong { font-size:15px; letter-spacing:1px; }
  .guide-head .guide-title { gap:5px; padding-left:8px; padding-right:8px; }
  .guide-head .guide-title::before { width:17px; height:17px; flex-basis:17px; }
  #archive-prev, #archive-next { font-size:10px; letter-spacing:0; }
}