/**
 * ui-art.css — paints the DOM UI with the supplied WOBBLE FORGE artwork.
 *
 * The layout, sizing and responsive behaviour live in the other stylesheets; this file
 * only replaces CSS-painted chrome with the pack's sprites, using the custom properties
 * emitted into `sprites.css` (one per asset+animation). No coordinate is repeated here.
 *
 * Where a sprite already contains its own lettering (the PLAY button, the logo, the
 * section tabs) the DOM label is kept but made transparent rather than removed, so screen
 * readers and search engines still see the real text while the player sees the art.
 */

/* ═════════════════════════════════════════════════════════════════════ 1. logo ══ */
#menu-logo,
#load-logo {
  position: relative;
  background-image: var(--sp-ui_logo-idle-img);
  background-position: var(--sp-ui_logo-idle-pos);
  background-repeat: no-repeat;
  background-size: contain;
  width: min(64vw, 340px);
  aspect-ratio: var(--sp-ui_logo-idle-w) / var(--sp-ui_logo-idle-h);
  height: auto;
}

/* The art carries the wordmark. Keep the text for assistive tech only. */
#menu-logo .wf-logo__text,
#load-logo .wf-logo__text {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Ribbon ends and sparkles are separate supplied pieces, not part of the wordmark. */
#menu-logo .wf-logo__decor--l,
#load-logo .wf-logo__decor--l {
  background-image: var(--sp-logo_decor_ribbon_left-idle-img);
  background-position: var(--sp-logo_decor_ribbon_left-idle-pos);
  background-repeat: no-repeat;
  background-size: contain;
}

#menu-logo .wf-logo__decor--r,
#load-logo .wf-logo__decor--r {
  background-image: var(--sp-logo_decor_ribbon_right-idle-img);
  background-position: var(--sp-logo_decor_ribbon_right-idle-pos);
  background-repeat: no-repeat;
  background-size: contain;
}

/* ══════════════════════════════════════════════════════════════ 2. loading bar ══ */
/* ═══════════════════════════════════════════ 1a. screen backgrounds from the pack ══ */
/* `bg_menu_main` and `bg_core_gameplay` are opaque full-screen plates the pack ships for
   exactly these two screens. They stretch rather than tile (pack README §8). */
#screen-menu {
  background-image: var(--sp-bg_menu_main-static-img);
  background-position: var(--sp-bg_menu_main-static-pos);
  background-repeat: no-repeat;
  background-size: cover;
}

/* ═══════════════════════════════════════════════════════════ 1b. menu hero tower ══ */
/* The supplied tower sheet is a tall portrait strip, so it is scaled by height and
   anchored at the menu's baseline. Its idle loop animates through the generated
   `steps()` keyframes — no JavaScript involved. */
.wf-menu__tower {
  background-image: var(--sp-menu_tower_tall-idle-img);
  background-position: var(--sp-menu_tower_tall-idle-pos);
  background-repeat: no-repeat;
  background-size: contain;
  aspect-ratio: var(--sp-menu_tower_tall-idle_still-w) / var(--sp-menu_tower_tall-idle_still-h);
  height: min(42vh, 380px);
  width: auto;
  pointer-events: none;
}

#load-bar-frame {
  background-image: var(--sp-ui_loading_bar_frame-idle-img);
  background-position: var(--sp-ui_loading_bar_frame-idle-pos);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  border: 0;
  border-radius: 999px;
  overflow: hidden;
  padding: 5px;
  box-sizing: border-box;
}

#load-bar-fill {
  background-image: var(--sp-ui_loading_bar_fill-idle-img);
  background-position: var(--sp-ui_loading_bar_fill-idle-pos);
  background-repeat: repeat-x;
  background-size: auto 100%;
  border-radius: 999px;
  transition: width 0.25s ease-out;
}

/* ══════════════════════════════════════════════════════════════════ 3. buttons ══ */
/*
 * Each labelled action maps to its own supplied button sprite. The sprite is the whole
 * control, so the CSS gradient is replaced outright and the DOM label is made
 * transparent — the button's accessible name still comes from that text.
 */
.wf-btn {
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
  border: 0;
  box-shadow: none;
}

.wf-btn__label,
.wf-btn__icon {
  color: transparent;
}

#btn-play { background-image: var(--sp-ui_button_play-idle-img);
  background-position: var(--sp-ui_button_play-idle-pos); }
#btn-play:hover { background-image: var(--sp-ui_button_play-hover-img);
  background-position: var(--sp-ui_button_play-hover-pos); }
#btn-play:active { background-image: var(--sp-ui_button_play-press-img);
  background-position: var(--sp-ui_button_play-press-pos); }

#btn-modes { background-image: var(--sp-ui_button_modes-idle-img);
  background-position: var(--sp-ui_button_modes-idle-pos); }
#btn-modes:hover { background-image: var(--sp-ui_button_modes-hover-img);
  background-position: var(--sp-ui_button_modes-hover-pos); }
#btn-modes:active { background-image: var(--sp-ui_button_modes-press-img);
  background-position: var(--sp-ui_button_modes-press-pos); }

#btn-collection { background-image: var(--sp-ui_button_collection-idle-img);
  background-position: var(--sp-ui_button_collection-idle-pos); }
#btn-collection:hover { background-image: var(--sp-ui_button_collection-hover-img);
  background-position: var(--sp-ui_button_collection-hover-pos); }
#btn-collection:active { background-image: var(--sp-ui_button_collection-press-img);
  background-position: var(--sp-ui_button_collection-press-pos); }

#btn-records { background-image: var(--sp-ui_button_records-idle-img);
  background-position: var(--sp-ui_button_records-idle-pos); }
#btn-records:hover { background-image: var(--sp-ui_button_records-hover-img);
  background-position: var(--sp-ui_button_records-hover-pos); }
#btn-records:active { background-image: var(--sp-ui_button_records-press-img);
  background-position: var(--sp-ui_button_records-press-pos); }

#btn-settings { background-image: var(--sp-ui_button_settings-idle-img);
  background-position: var(--sp-ui_button_settings-idle-pos); }
#btn-settings:hover { background-image: var(--sp-ui_button_settings-hover-img);
  background-position: var(--sp-ui_button_settings-hover-pos); }
#btn-settings:active { background-image: var(--sp-ui_button_settings-press-img);
  background-position: var(--sp-ui_button_settings-press-pos); }

#btn-retry { background-image: var(--sp-ui_button_retry-idle-img);
  background-position: var(--sp-ui_button_retry-idle-pos); }
#btn-retry:hover { background-image: var(--sp-ui_button_retry-hover-img);
  background-position: var(--sp-ui_button_retry-hover-pos); }
#btn-retry:active { background-image: var(--sp-ui_button_retry-press-img);
  background-position: var(--sp-ui_button_retry-press-pos); }

#btn-resume { background-image: var(--sp-ui_button_resume-idle-img);
  background-position: var(--sp-ui_button_resume-idle-pos); }
#btn-resume:hover { background-image: var(--sp-ui_button_resume-hover-img);
  background-position: var(--sp-ui_button_resume-hover-pos); }

#btn-pause-restart { background-image: var(--sp-ui_button_restart-idle-img);
  background-position: var(--sp-ui_button_restart-idle-pos); }
#btn-pause-restart:hover { background-image: var(--sp-ui_button_restart-hover-img);
  background-position: var(--sp-ui_button_restart-hover-pos); }

#btn-pause-exit { background-image: var(--sp-ui_button_exit-idle-img);
  background-position: var(--sp-ui_button_exit-idle-pos); }
#btn-pause-exit:hover { background-image: var(--sp-ui_button_exit-hover-img);
  background-position: var(--sp-ui_button_exit-hover-pos); }

/* Back / pause are square icon buttons. */
#btn-mode-back { background-image: var(--sp-ui_iconbutton_back-idle-img);
  background-position: var(--sp-ui_iconbutton_back-idle-pos);
  background-size: contain; }
#btn-pause { background-image: var(--sp-ui_iconbutton_pause-idle-img);
  background-position: var(--sp-ui_iconbutton_pause-idle-pos);
  background-size: contain; }

/* ══════════════════════════════════════════════════════════════ 4. touch pads ══ */
#ctl-left { background-image: var(--sp-control_left-idle-img);
  background-position: var(--sp-control_left-idle-pos);
  background-size: contain; }
#ctl-right { background-image: var(--sp-control_right-idle-img);
  background-position: var(--sp-control_right-idle-pos);
  background-size: contain; }
#ctl-rotate { background-image: var(--sp-control_rotate-idle-img);
  background-position: var(--sp-control_rotate-idle-pos);
  background-size: contain; }
#ctl-drop { background-image: var(--sp-control_drop-idle-img);
  background-position: var(--sp-control_drop-idle-pos);
  background-size: contain; }
#ctl-left .wf-icon,
#ctl-right .wf-icon,
#ctl-rotate .wf-icon,
#ctl-drop .wf-icon { color: transparent; }

/* ═════════════════════════════════════════════════════════════════ 5. panels ══ */
/* Panels are 9-slice style frames; `fill` keeps the border crisp while the middle
   stretches, so one sprite works at every breakpoint. */
.wf-panel,
.wf-load-card,
#screen-pause .wf-panel,
#screen-results .wf-panel {
  border: 0;
}

#screen-pause .wf-panel {
  background-image: var(--sp-ui_pause_panel-idle-img);
  background-position: var(--sp-ui_pause_panel-idle-pos);
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

#screen-results .wf-panel {
  background-image: var(--sp-results_panel-idle-img);
  background-position: var(--sp-results_panel-idle-pos);
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

#screen-settings .wf-panel {
  background-image: var(--sp-settings_panel-idle-img);
  background-position: var(--sp-settings_panel-idle-pos);
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

#screen-confirm .wf-panel {
  background-image: var(--sp-confirm_dialog-idle-img);
  background-position: var(--sp-confirm_dialog-idle-pos);
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

/* ══════════════════════════════════════════════════════════════ 6. HUD chrome ══ */
.wf-plate {
  border: 0;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.wf-plate--score { background-image: var(--sp-hud_score_panel-idle-img);
  background-position: var(--sp-hud_score_panel-idle-pos); }
.wf-plate--best { background-image: var(--sp-hud_height_panel-idle-img);
  background-position: var(--sp-hud_height_panel-idle-pos); }
.wf-plate--combo { background-image: var(--sp-hud_combo_panel-idle-img);
  background-position: var(--sp-hud_combo_panel-idle-pos); }
.wf-plate--mode { background-image: var(--sp-hud_mode_plate-idle-img);
  background-position: var(--sp-hud_mode_plate-idle-pos); }
.wf-plate--timer { background-image: var(--sp-ui_timer_ring_normal-idle-img);
  background-position: var(--sp-ui_timer_ring_normal-idle-pos); }

/* Next-block tray and the held-block chip. */
#hud-next-frame { border: 0;
  background: var(--sp-hud_next_block_frame-idle-img)
    var(--sp-hud_next_block_frame-idle-pos) no-repeat;
  background-size: 100% 100%; }

#hud-current-art, .wf-block-chip { border: 0; }

/* Stability gauge: track + the orb that shows the current state. */
#hud-stability-frame { border: 0; }
#hud-stability-frame .wf-gauge__track {
  background-image: var(--sp-hud_stability_track-idle-img);
  background-position: var(--sp-hud_stability_track-idle-pos);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  border: 0;
}

#hud-stability-orb {
  background-image: var(--sp-ui_orb_stable-idle-img);
  background-position: var(--sp-ui_orb_stable-idle-pos);
  background-repeat: no-repeat;
  background-size: contain;
}

/* The orb and gauge frame swap art with the stability bucket (set by the HUD). */
#hud-stability-frame[data-stability="stable"] #hud-stability-orb {
  background-image: var(--sp-ui_orb_stable-idle-img); }
#hud-stability-frame[data-stability="unstable"] #hud-stability-orb,
#hud-stability-frame[data-stability="danger"] #hud-stability-orb {
  background-image: var(--sp-ui_orb_unstable-idle-img); }
#hud-stability-frame[data-stability="critical"] #hud-stability-orb {
  background-image: var(--sp-ui_orb_critical-idle-img); }

#hud-stability-frame[data-stability="stable"] {
  background-image: var(--sp-hud_stability_frame-idle-img); }
#hud-stability-frame[data-stability="critical"] {
  background-image: var(--sp-hud_stability_frame-idle-img); }

/* Ghost / personal-best progress rail. */
#hud-ghost-bar { border: 0; }
#hud-ghost-bar .wf-ghost-bar__track {
  background-image: var(--sp-hud_ghost_record_bar-idle-img);
  background-position: var(--sp-hud_ghost_record_bar-idle-pos);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  border: 0;
}

/* Risk and hazard chips. */
#hud-risk { border: 0;
  background: var(--sp-hud_risk_badge-idle-img)
    var(--sp-hud_risk_badge-idle-pos) no-repeat;
  background-size: 100% 100%; }

/* ═════════════════════════════════════════════════════════════ 7. mode cards ══ */
.wf-mode-card { border: 0; background-repeat: no-repeat; background-size: 100% 100%; }

[data-mode="classic"] .wf-mode-card,
.wf-mode-card[data-mode="classic"] {
  background-image: var(--sp-mode_card_classic-idle-img);
  background-position: var(--sp-mode_card_classic-idle-pos);
}
[data-mode="rush"] .wf-mode-card,
.wf-mode-card[data-mode="rush"] {
  background-image: var(--sp-mode_card_rush-idle-img);
  background-position: var(--sp-mode_card_rush-idle-pos);
}
[data-mode="survival"] .wf-mode-card,
.wf-mode-card[data-mode="survival"] {
  background-image: var(--sp-mode_card_survival-idle-img);
  background-position: var(--sp-mode_card_survival-idle-pos);
}
[data-mode="precision"] .wf-mode-card,
.wf-mode-card[data-mode="precision"] {
  background-image: var(--sp-mode_card_precision-idle-img);
  background-position: var(--sp-mode_card_precision-idle-pos);
}

/* ═════════════════════════════════════════════════════════════════ 8. badges ══ */
.wf-badge--owned { background-image: var(--sp-badge_owned-idle-img);
  background-position: var(--sp-badge_owned-idle-pos);
  background-repeat: no-repeat; background-size: contain; }
.wf-badge--new { background-image: var(--sp-badge_new_record-idle-img);
  background-position: var(--sp-badge_new_record-idle-pos);
  background-repeat: no-repeat; background-size: contain; }
/* Beating the recorded ghost has its own supplied badge. */
.wf-badge--ghost { background-image: var(--sp-badge_ghost_replay-idle-img);
  background-position: var(--sp-badge_ghost_replay-idle-pos);
  background-repeat: no-repeat; background-size: contain; }

/* ═════════════════════════════════════════════════════════════════ 9. toggles ══ */
.wf-toggle { border: 0; background-repeat: no-repeat; background-size: contain; }
.wf-toggle[aria-checked="true"] { background-image: var(--sp-ui_toggle_on-idle-img);
  background-position: var(--sp-ui_toggle_on-idle-pos); }
.wf-toggle[aria-checked="false"] { background-image: var(--sp-ui_toggle_off-idle-img);
  background-position: var(--sp-ui_toggle_off-idle-pos); }

/* ═════════════════════════════════════════════════════════ 10. stat / fx accents ══ */
.wf-stat__icon { background-repeat: no-repeat; background-size: contain; }
.wf-stat--height .wf-stat__icon { background-image: var(--sp-stat_height-idle-img);
  background-position: var(--sp-stat_height-idle-pos); }
/* The pack has no dedicated "score" stat glyph (height, combo, perfect, risk, recovery,
 * near-miss only), so the score stat reuses the combo glyph rather than leaving a gap. */
.wf-stat--score .wf-stat__icon { background-image: var(--sp-stat_combo-idle-img);
  background-position: var(--sp-stat_combo-idle-pos); }
.wf-stat--combo .wf-stat__icon { background-image: var(--sp-stat_combo-idle-img);
  background-position: var(--sp-stat_combo-idle-pos); }
.wf-stat--risk .wf-stat__icon { background-image: var(--sp-stat_risk-idle-img);
  background-position: var(--sp-stat_risk-idle-pos); }
.wf-stat--recovery .wf-stat__icon { background-image: var(--sp-stat_recovery-idle-img);
  background-position: var(--sp-stat_recovery-idle-pos); }
.wf-stat--near .wf-stat__icon { background-image: var(--sp-stat_near_miss-idle-img);
  background-position: var(--sp-stat_near_miss-idle-pos); }
.wf-stat--perfect .wf-stat__icon { background-image: var(--sp-stat_perfect-idle-img);
  background-position: var(--sp-stat_perfect-idle-pos); }

/* ═══════════════════════════════════════════════════ 11. loading spinner ══ */
/* The pack ships a dedicated spinner; it replaces the CSS ring on the boot screen. */
.wf-load-card::after {
  content: '';
  display: block;
  width: 56px;
  height: 56px;
  margin: 10px auto 0;
  background-image: var(--sp-loading_spinner-spin-img);
  background-position: var(--sp-loading_spinner-spin-pos);
  background-repeat: no-repeat;
  background-size: contain;
  animation: wf-spin 1.1s linear infinite;
}

@keyframes wf-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* ═══════════════════════════════════════════════ 12. empty-state artwork ══ */
/* Supplied art for "nothing here yet" beats a bare sentence, and both screens use the
   frame the pack provides for them. */
#records-empty,
#collection-empty {
  border: 0;
}

#records-empty .wf-empty__icon {
  background-image: var(--sp-empty_no_records-idle-img);
  background-position: var(--sp-empty_no_records-idle-pos);
  background-repeat: no-repeat;
  background-size: contain;
  width: 200px;
  height: 150px;
  margin: 0 auto 12px;
}

#collection-empty .wf-empty__icon {
  background-image: var(--sp-empty_no_collection-idle-img);
  background-position: var(--sp-empty_no_collection-idle-pos);
  background-repeat: no-repeat;
  background-size: contain;
  width: 200px;
  height: 150px;
  margin: 0 auto 12px;
}

/* ═══════════════════════════════════════════════ 13. collection effects ══ */
/* Effect cards carry a live sprite thumbnail painted from the pack's own effect sheet. */
.wf-set-card--effect .wf-set-card__art {
  width: 72px;
  height: 72px;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  margin: 0 auto 6px;
}

/* The effect sprite sheets are large; the thumbnail scales whatever the sheet size is. */
.wf-collect__grid--effects {
  grid-auto-rows: minmax(112px, auto);
}

.wf-set-card--effect.is-locked .wf-set-card__art {
  filter: grayscale(1) brightness(0.6);
}

/* ═══════════════════════════════════════════════════ 14. how-to-play panel ══ */
/* Device-specific control rows. Deliberately text, not sprites: the key caps differ per
   platform and the pack's keycap art only covers the keyboard case. */
.wf-howto {
  text-align: left;
  margin: 4px auto 14px;
  max-width: 420px;
  width: 100%;
}

.wf-howto__title {
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.75;
  margin: 0 0 8px;
}

.wf-howto__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 6px;
}

.wf-howto__row {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 10px;
  align-items: baseline;
  font-size: 13px;
}

.wf-howto__key {
  font-weight: 700;
  color: #ffd76b;
  white-space: nowrap;
}

.wf-howto__what {
  opacity: 0.85;
}

/* ═══════════════════════════════════════════════════════ 15. screen reader ══ */
/* Visually hidden but present for assistive tech. Not `display:none`, which would remove
   it from the accessibility tree and silence the announcements entirely. */
.wf-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Decorative supplied sprites carry no meaning on their own. */
.wf-logo__decor, .wf-menu__tower, .wf-load-card::after, .wf-intro__icon,
.wf-set-card__art { speak: none; }