/*
 * Gotta Swole Fast — canonical Sonic theme stylesheet, v1.8.41.
 *
 * This file intentionally replaces the v1.8.24–v1.8.39 chain of appended
 * Sonic overrides. Path of Swole remains in styles.css and is not restyled here.
 */

:root {
  --sonic-blue-950: #062260;
  --sonic-blue-900: #073681;
  --sonic-blue-800: #0755bd;
  --sonic-blue-700: #1479e4;
  --sonic-blue-500: #37a7ff;
  --sonic-yellow: #ffdc42;
  --sonic-yellow-deep: #a55b00;
  --sonic-white: #fffdf2;
  --sonic-card-gap: clamp(8px, 1.2vh, 11px);
  --sonic-side-gap: clamp(9px, 2.6vw, 14px);
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

/* -------------------------------------------------------------------------- */
/* Strict theme isolation                                                     */
/* -------------------------------------------------------------------------- */

body:not([data-theme="sonic"]) .sonic-parallax,
body:not([data-theme="sonic"]) .sonic-sprite-overlay,
body:not([data-theme="sonic"]) .sonic-home-stage,
body:not([data-theme="sonic"]) .sonic-home-logo,
body:not([data-theme="sonic"]) .topbar-sonic-logo,
body:not([data-theme="sonic"]) .sonic-stage-label,
body:not([data-theme="sonic"]) .sonic-ritual-shell,
body:not([data-theme="sonic"]) .menu-gem-right,
body:not([data-theme="sonic"]) .card-gem-image,
body:not([data-theme="sonic"]) .topbar-back-icon,
body:not([data-theme="sonic"]) .topbar-settings-icon,
body:not([data-theme="sonic"]) .back-button-icon {
  display: none !important;
}

html[data-theme="sonic"],
body[data-theme="sonic"] {
  min-height: 100%;
  min-height: 100dvh;
  background: #0a2bc9;
  overscroll-behavior-y: none;
}

body[data-theme="sonic"] {
  color: var(--sonic-white);
}

body[data-theme="sonic"] .smoke-field,
body[data-theme="sonic"] .arcane-ring,
body[data-theme="sonic"] .rune,
body[data-theme="sonic"] .embers,
body[data-theme="sonic"] .gem-motes,
body[data-theme="sonic"] .sonic-parallax,
body[data-theme="sonic"] .sonic-sprite-overlay {
  display: none !important;
}

body[data-theme="sonic"] .ambient {
  position: fixed !important;
  inset: 0 !important;
  z-index: -3 !important;
  overflow: hidden !important;
  pointer-events: none !important;
  background: #0a2bc9;
}

body[data-theme="sonic"] .ambient::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url('./assets/sonic/greenhill-water-background.webp') center center / cover no-repeat;
  image-rendering: pixelated;
  transform: translateZ(0);
}

body[data-theme="sonic"] .ambient::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10, 27, 159, .02), rgba(3, 31, 104, .06) 70%, rgba(2, 12, 54, .18));
  pointer-events: none;
}

body[data-theme="sonic"] .vignette {
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  background: radial-gradient(circle at 50% 40%, transparent 38%, rgba(2, 12, 75, .16) 100%) !important;
  opacity: 1 !important;
}

body[data-theme="sonic"] .app-shell {
  width: min(100%, 620px);
  min-height: 100dvh;
  margin: 0 auto;
  position: relative;
  z-index: 4;
  display: flex;
  flex-direction: column;
  background: transparent !important;
}

body[data-theme="sonic"] .main-view {
  flex: 1 0 auto;
  width: 100%;
  position: relative !important;
  inset: auto !important;
  transform: none !important;
  z-index: 4;
}

body[data-theme="sonic"].page-fits:not(.modal-open) {
  height: 100dvh;
  overflow: hidden;
}

/* Never leave a plain blue strip below the scene. */
body[data-theme="sonic"]::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -4;
  background: url('./assets/sonic/greenhill-water-background.webp') center center / cover no-repeat #0a2bc9;
  image-rendering: pixelated;
}

/* -------------------------------------------------------------------------- */
/* Animation performance and pause states                                     */
/* -------------------------------------------------------------------------- */

body[data-theme="sonic"].modal-open .sonic-home-clouds,
body[data-theme="sonic"].modal-open .sonic-home-water-shimmer,
body[data-theme="sonic"].modal-open .sonic-home-ring,
body[data-theme="sonic"].modal-open .sonic-logo-star,
body[data-theme="sonic"].modal-open .menu-gem,
body[data-theme="sonic"].modal-open .card-gem-image,
body[data-theme="sonic"].modal-open .card-gem-shine,
body[data-theme="sonic"].is-scrolling .card-gem-image,
body[data-theme="sonic"].is-scrolling .card-gem-shine,
html.app-paused body[data-theme="sonic"] *,
.reduced-effects body[data-theme="sonic"] * {
  animation-play-state: paused !important;
}

body[data-theme="sonic"] .sonic-home-clouds,
body[data-theme="sonic"] .sonic-home-water-shimmer,
body[data-theme="sonic"] .sonic-logo-star,
body[data-theme="sonic"] .menu-gem,
body[data-theme="sonic"] .card-gem-image,
body[data-theme="sonic"] .card-gem-shine {
  backface-visibility: hidden;
  transform: translateZ(0);
}

/* -------------------------------------------------------------------------- */
/* Home screen                                                                */
/* -------------------------------------------------------------------------- */

body[data-theme="sonic"][data-group="home"] .topbar {
  position: fixed !important;
  top: calc(var(--safe-top) + 10px) !important;
  right: max(18px, calc((100vw - 620px) / 2 + 18px)) !important;
  left: auto !important;
  width: 52px !important;
  height: 52px !important;
  min-height: 52px !important;
  padding: 0 !important;
  margin: 0 !important;
  display: block !important;
  z-index: 70 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

body[data-theme="sonic"][data-group="home"] .brand-mark,
body[data-theme="sonic"][data-group="home"] .brand-home-button {
  display: none !important;
}

body[data-theme="sonic"] .icon-button,
body[data-theme="sonic"] .brand-mark {
  display: grid !important;
  place-items: center !important;
  width: 50px !important;
  height: 50px !important;
  min-width: 50px !important;
  min-height: 50px !important;
  padding: 0 !important;
  color: white !important;
  border: 4px solid var(--sonic-yellow) !important;
  border-radius: 15px !important;
  clip-path: polygon(9px 0, calc(100% - 9px) 0, 100% 9px, 100% calc(100% - 9px), calc(100% - 9px) 100%, 9px 100%, 0 calc(100% - 9px), 0 9px) !important;
  background: linear-gradient(180deg, #45afff, #1479e4 58%, #0755bd) !important;
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.38),
    inset 0 -2px 0 rgba(0,0,0,.14),
    0 4px 0 var(--sonic-yellow-deep),
    0 8px 13px rgba(3, 24, 91, .22) !important;
  cursor: pointer;
  touch-action: manipulation;
}

body[data-theme="sonic"] .icon-button:active,
body[data-theme="sonic"] .brand-mark:active {
  transform: translateY(3px) scale(.985) !important;
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.3),
    inset 0 -2px 0 rgba(0,0,0,.12),
    0 1px 0 var(--sonic-yellow-deep),
    0 4px 8px rgba(3,24,91,.18) !important;
}

body[data-theme="sonic"] .topbar-settings-icon,
body[data-theme="sonic"] .topbar-back-icon,
body[data-theme="sonic"] .back-button-icon {
  display: block !important;
  width: 27px;
  height: 27px;
  fill: #fffdf2;
  filter: drop-shadow(2px 2px 0 #073477);
  pointer-events: none;
}

body[data-theme="sonic"][data-group="home"] .main-view {
  min-height: 100dvh;
  padding: calc(var(--safe-top) + 98px) var(--sonic-side-gap) calc(var(--safe-bottom) + 70px) !important;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: visible;
}

body[data-theme="sonic"][data-group="home"] .sonic-home-stage {
  position: fixed !important;
  inset: 0 !important;
  left: 0 !important;
  top: 0 !important;
  width: 100vw !important;
  height: 100dvh !important;
  transform: none !important;
  z-index: -2 !important;
  overflow: hidden !important;
  pointer-events: none !important;
  background: #0a2bc9;
}

body[data-theme="sonic"][data-group="home"] .sonic-home-background-image {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  display: block !important;
}

body[data-theme="sonic"][data-group="home"] .sonic-home-background-image {
  object-fit: cover !important;
  object-position: center center !important;
  image-rendering: pixelated !important;
}

body[data-theme="sonic"][data-group="home"] .sonic-home-clouds,
body[data-theme="sonic"][data-group="home"] .sonic-home-water-shimmer,
body[data-theme="sonic"][data-group="home"] .sonic-home-flower,
body[data-theme="sonic"][data-group="home"] .sonic-home-ring,
body[data-theme="sonic"][data-group="home"] .sonic-home-gem,
body[data-theme="sonic"][data-group="home"] .sonic-home-runner {
  display: none !important;
}

body[data-theme="sonic"][data-group="home"] .hero-panel {
  display: none !important;
}

body[data-theme="sonic"][data-group="home"] .sonic-home-logo {
  position: relative !important;
  left: auto !important;
  right: auto !important;
  top: auto !important;
  transform: none !important;
  z-index: 20 !important;
  display: grid !important;
  place-items: center !important;
  width: min(72vw, 360px) !important;
  max-width: 360px !important;
  min-height: 0 !important;
  margin: 0 auto clamp(12px, 1.7vh, 20px) !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  cursor: pointer;
  touch-action: manipulation;
}

body[data-theme="sonic"][data-group="home"] .sonic-home-logo img {
  display: block;
  width: 100%;
  height: auto;
  max-height: min(31vh, 315px);
  object-fit: contain;
  image-rendering: auto;
  filter: drop-shadow(0 6px 0 rgba(6, 32, 117, .7)) drop-shadow(0 13px 18px rgba(5, 22, 102, .22));
  transition: transform 120ms ease, filter 120ms ease;
  pointer-events: none;
}

body[data-theme="sonic"][data-group="home"] .sonic-home-logo:active img {
  transform: translateY(3px) scale(.985);
  filter: drop-shadow(0 3px 0 rgba(6,32,117,.72)) drop-shadow(0 8px 12px rgba(5,22,102,.2));
}

body[data-theme="sonic"][data-group="home"] .sonic-logo-star {
  display: block !important;
  position: absolute;
  width: 17px;
  height: 17px;
  pointer-events: none;
  background: linear-gradient(45deg, transparent 42%, #fff 43% 57%, transparent 58%), linear-gradient(-45deg, transparent 42%, #fff 43% 57%, transparent 58%);
  filter: drop-shadow(0 0 3px #ffe25b);
  opacity: 0;
  animation: sonic-logo-resting-spark 8.6s ease-in-out infinite;
}
body[data-theme="sonic"][data-group="home"] .sonic-logo-star-a { left: 7%; top: 24%; animation-delay: 0s; }
body[data-theme="sonic"][data-group="home"] .sonic-logo-star-b { right: 7%; top: 17%; animation-delay: 1.05s; }
body[data-theme="sonic"][data-group="home"] .sonic-logo-star-c { left: 17%; bottom: 13%; animation-delay: 2.1s; }
body[data-theme="sonic"][data-group="home"] .sonic-logo-star-d { right: 13%; bottom: 19%; animation-delay: 3.15s; }

@keyframes sonic-logo-resting-spark {
  0%, 7%, 23%, 100% { opacity: 0; transform: scale(.35) rotate(0); }
  11% { opacity: 1; transform: scale(1) rotate(45deg); }
  15% { opacity: .35; transform: scale(.68) rotate(82deg); }
}

body[data-theme="sonic"][data-group="home"] .menu-stack {
  position: relative !important;
  left: auto !important;
  right: auto !important;
  top: auto !important;
  bottom: auto !important;
  transform: none !important;
  z-index: 10 !important;
  width: min(100%, 570px) !important;
  margin: 0 auto !important;
  display: grid !important;
  gap: clamp(7px, .95vh, 11px) !important;
}

body[data-theme="sonic"][data-group="home"] .menu-button {
  --button-top: #248cf3;
  left: auto !important;
  right: auto !important;
  top: auto !important;
  bottom: auto !important;
  transform: none !important;
  --button-bottom: #0753c4;
  position: relative !important;
  width: 100% !important;
  min-height: clamp(68px, 8.1vh, 82px) !important;
  padding: 6px 14px !important;
  display: grid !important;
  grid-template-columns: 54px minmax(0, 1fr) 54px !important;
  align-items: center !important;
  gap: 8px !important;
  color: #fff !important;
  border: 4px solid var(--sonic-yellow) !important;
  border-radius: 20px !important;
  background: linear-gradient(180deg, var(--button-top), var(--button-bottom)) !important;
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.3),
    inset 0 -3px 0 rgba(0,0,0,.13),
    0 5px 0 var(--sonic-yellow-deep),
    0 9px 14px rgba(4, 31, 105, .18) !important;
  clip-path: none !important;
  overflow: hidden !important;
  touch-action: manipulation;
}

body[data-theme="sonic"][data-group="home"] .menu-button:nth-child(1) { --button-top:#2996ff; --button-bottom:#0755c6; }
body[data-theme="sonic"][data-group="home"] .menu-button:nth-child(2) { --button-top:#36d154; --button-bottom:#078b2c; }
body[data-theme="sonic"][data-group="home"] .menu-button:nth-child(3) { --button-top:#9256ef; --button-bottom:#5423bd; }
body[data-theme="sonic"][data-group="home"] .menu-button:nth-child(4) { --button-top:#ffac25; --button-bottom:#e96004; }
body[data-theme="sonic"][data-group="home"] .menu-button:nth-child(5) { --button-top:#ff4746; --button-bottom:#d40921; }

body[data-theme="sonic"][data-group="home"] .menu-button::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(105deg, transparent 0 37%, rgba(255,255,255,.15) 44%, transparent 52%),
    linear-gradient(180deg, rgba(255,255,255,.1), transparent 40%);
  transform: translateX(-120%);
  transition: transform 440ms ease;
  pointer-events: none;
}

body[data-theme="sonic"][data-group="home"] .menu-button:active {
  transform: translateY(4px) scale(.992);
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.22),
    inset 0 -2px 0 rgba(0,0,0,.12),
    0 1px 0 var(--sonic-yellow-deep),
    0 4px 8px rgba(4,31,105,.15) !important;
}

body[data-theme="sonic"][data-group="home"] .menu-button:active::before,
body[data-theme="sonic"][data-group="home"] .menu-button.sonic-transitioning::before {
  transform: translateX(120%);
}

body[data-theme="sonic"][data-group="home"] .menu-ornament {
  display: none !important;
}

body[data-theme="sonic"][data-group="home"] .menu-gem {
  grid-row: 1;
  position: relative !important;
  display: grid !important;
  place-items: center !important;
  width: 40px !important;
  height: 52px !important;
  justify-self: center !important;
  background: url('./assets/sonic/home-button-ring.gif') center / contain no-repeat !important;
  image-rendering: pixelated;
  filter: drop-shadow(0 2px 0 rgba(83,36,0,.48));
  animation: sonic-ring-rest 5.4s ease-in-out infinite;
}
body[data-theme="sonic"][data-group="home"] .menu-gem-left { grid-column: 1 !important; }
body[data-theme="sonic"][data-group="home"] .menu-gem-right { grid-column: 3 !important; }
body[data-theme="sonic"][data-group="home"] .menu-gem i { display: none !important; }
body[data-theme="sonic"][data-group="home"] .menu-button:nth-child(2) .menu-gem { animation-delay: -.65s; }
body[data-theme="sonic"][data-group="home"] .menu-button:nth-child(3) .menu-gem { animation-delay: -1.3s; }
body[data-theme="sonic"][data-group="home"] .menu-button:nth-child(4) .menu-gem { animation-delay: -1.95s; }
body[data-theme="sonic"][data-group="home"] .menu-button:nth-child(5) .menu-gem { animation-delay: -2.6s; }

@keyframes sonic-ring-rest {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-1px); }
}

body[data-theme="sonic"][data-group="home"] .menu-copy {
  grid-column: 2 !important;
  min-width: 0;
  display: grid !important;
  place-items: center !important;
  text-align: center !important;
}
body[data-theme="sonic"][data-group="home"] .menu-copy strong {
  color: #fffdf2 !important;
  font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif !important;
  font-size: clamp(27px, 7.2vw, 38px) !important;
  line-height: .96 !important;
  letter-spacing: .015em !important;
  text-shadow: 3px 3px 0 #062a78 !important;
}
body[data-theme="sonic"][data-group="home"] .menu-copy small {
  display: none !important;
}

body[data-theme="sonic"][data-group="home"] .footer-seal {
  position: absolute !important;
  left: 50% !important;
  bottom: calc(var(--safe-bottom) + 8px) !important;
  transform: translateX(-50%) !important;
  z-index: 30 !important;
  min-height: 0 !important;
  padding: 5px 14px !important;
  display: flex !important;
  gap: 8px !important;
  color: #fffbd0 !important;
  border: 3px solid var(--sonic-yellow) !important;
  border-radius: 999px !important;
  background: linear-gradient(180deg, rgba(39,133,231,.95), rgba(10,76,169,.96)) !important;
  box-shadow: 0 3px 0 #8f5100, 0 6px 10px rgba(0,0,0,.15) !important;
  font: 800 11px/1 ui-monospace, monospace !important;
  white-space: nowrap;
}
body[data-theme="sonic"][data-group="home"] .footer-seal > span:nth-child(3) { display: inline !important; }

/* -------------------------------------------------------------------------- */
/* Workout page                                                               */
/* -------------------------------------------------------------------------- */

body[data-theme="sonic"]:not([data-group="home"]) .topbar {
  position: relative !important;
  z-index: 50 !important;
  width: min(calc(100% - 30px), 570px) !important;
  height: auto !important;
  min-height: 56px !important;
  margin: 0 auto 9px !important;
  padding: calc(var(--safe-top) + 6px) 0 3px !important;
  display: grid !important;
  grid-template-columns: 50px minmax(0, 1fr) 50px !important;
  align-items: center !important;
  gap: 12px !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

body[data-theme="sonic"]:not([data-group="home"]) .brand-rune,
body[data-theme="sonic"]:not([data-group="home"]) .brand-home-button h1 {
  display: none !important;
}

body[data-theme="sonic"]:not([data-group="home"]) .brand-home-button {
  display: grid !important;
  place-items: center !important;
  width: min(100%, 144px) !important;
  height: 48px !important;
  margin: 0 auto !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  clip-path: none !important;
}

body[data-theme="sonic"]:not([data-group="home"]) .topbar-sonic-logo {
  display: block !important;
  width: min(100%, 132px) !important;
  height: auto !important;
  max-height: 46px !important;
  object-fit: contain !important;
  filter: drop-shadow(0 3px 0 rgba(6, 44, 122, .68));
  pointer-events: none;
}

body[data-theme="sonic"]:not([data-group="home"]) .main-view {
  width: 100%;
  padding: 0 var(--sonic-side-gap) calc(var(--safe-bottom) + 18px) !important;
}

body[data-theme="sonic"]:not([data-group="home"]) .workout-head {
  width: min(100%, 570px) !important;
  margin: 0 auto 10px !important;
  padding: 0 !important;
  border: 4px solid var(--sonic-yellow) !important;
  border-radius: 19px !important;
  background: #0e69d1 !important;
  box-shadow: 0 4px 0 var(--sonic-yellow-deep), 0 8px 14px rgba(4,25,92,.18) !important;
  overflow: hidden !important;
  clip-path: none !important;
}

body[data-theme="sonic"]:not([data-group="home"]) .workout-head > *:not(.sonic-ritual-shell) {
  display: none !important;
}

body[data-theme="sonic"]:not([data-group="home"]) .sonic-ritual-shell,
body[data-theme="sonic"]:not([data-group="home"]) .sonic-ritual-frame,
body[data-theme="sonic"]:not([data-group="home"]) .sonic-ritual-gif {
  display: block !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 14px !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: hidden !important;
}

body[data-theme="sonic"]:not([data-group="home"]) .sonic-ritual-bolt,
body[data-theme="sonic"]:not([data-group="home"]) .sonic-ritual-frame::before,
body[data-theme="sonic"]:not([data-group="home"]) .sonic-ritual-frame::after,
body[data-theme="sonic"]:not([data-group="home"]) .sonic-ritual-gif::before,
body[data-theme="sonic"]:not([data-group="home"]) .sonic-ritual-gif::after {
  display: none !important;
  content: none !important;
}

body[data-theme="sonic"]:not([data-group="home"]) .sonic-ritual-gif {
  height: clamp(108px, 14vh, 136px) !important;
}

body[data-theme="sonic"]:not([data-group="home"]) .sonic-ritual-gif img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
  image-rendering: pixelated !important;
}

body[data-theme="sonic"]:not([data-group="home"]) .exercise-stack {
  width: min(100%, 570px) !important;
  margin: 0 auto !important;
  display: grid !important;
  gap: var(--sonic-card-gap) !important;
}

body[data-theme="sonic"]:not([data-group="home"]) .exercise-card {
  --card-top: #268ff6;
  --card-bottom: #0753c4;
  position: relative !important;
  min-height: clamp(78px, 9.1vh, 90px) !important;
  padding: 5px 7px !important;
  display: grid !important;
  grid-template-columns: minmax(0,1fr) 45px !important;
  align-items: stretch !important;
  color: #fff !important;
  border: 4px solid var(--sonic-yellow) !important;
  border-radius: 19px !important;
  background: linear-gradient(180deg, var(--card-top), var(--card-bottom)) !important;
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.25),
    inset 0 -3px 0 rgba(0,0,0,.12),
    0 4px 0 var(--sonic-yellow-deep),
    0 8px 13px rgba(3,25,90,.16) !important;
  clip-path: none !important;
  overflow: hidden !important;
  content-visibility: auto;
  contain-intrinsic-size: 88px;
}
body[data-theme="sonic"]:not([data-group="home"]) .exercise-card:nth-child(1) { --card-top:#2b95ff; --card-bottom:#0753c4; }
body[data-theme="sonic"]:not([data-group="home"]) .exercise-card:nth-child(2) { --card-top:#39d257; --card-bottom:#078d2c; }
body[data-theme="sonic"]:not([data-group="home"]) .exercise-card:nth-child(3) { --card-top:#9559ef; --card-bottom:#5423bd; }
body[data-theme="sonic"]:not([data-group="home"]) .exercise-card:nth-child(4) { --card-top:#ffab25; --card-bottom:#e75c03; }
body[data-theme="sonic"]:not([data-group="home"]) .exercise-card:nth-child(5) { --card-top:#ff4846; --card-bottom:#d30a21; }

body[data-theme="sonic"]:not([data-group="home"]) .card-portal,
body[data-theme="sonic"]:not([data-group="home"]) .card-glow {
  display: none !important;
}

body[data-theme="sonic"]:not([data-group="home"]) .exercise-detail-button {
  min-width: 0 !important;
  min-height: 66px !important;
  padding: 3px 2px 3px 0 !important;
  display: grid !important;
  grid-template-columns: 54px minmax(0,1fr) !important;
  align-items: center !important;
  gap: 9px !important;
  color: inherit !important;
  border: 0 !important;
  background: transparent !important;
  text-align: left !important;
  touch-action: manipulation;
}

body[data-theme="sonic"]:not([data-group="home"]) .card-number {
  position: relative !important;
  width: 50px !important;
  min-width: 50px !important;
  height: 50px !important;
  display: grid !important;
  place-items: center !important;
  align-self: center !important;
  color: #fff !important;
  font: 1000 18px/1 ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace !important;
  text-shadow: 1px 1px 0 #06316d, 0 0 7px rgba(255,255,255,.2) !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  isolation: isolate !important;
}

body[data-theme="sonic"]:not([data-group="home"]) .card-gem-image {
  position: absolute !important;
  inset: 0 !important;
  z-index: -1 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  image-rendering: pixelated !important;
  filter: drop-shadow(0 2px 0 rgba(82,36,0,.42)) drop-shadow(0 0 5px rgba(255,255,255,.12));
  animation: sonic-gem-rest 7.2s ease-in-out infinite;
  pointer-events: none !important;
}

body[data-theme="sonic"]:not([data-group="home"]) .card-gem-shine {
  position: absolute;
  inset: 7px 10px 10px;
  z-index: 0;
  border-radius: 8px;
  background: linear-gradient(120deg, transparent 16%, rgba(255,255,255,.05) 30%, rgba(255,255,255,.5) 43%, rgba(255,255,255,.07) 57%, transparent 70%);
  mix-blend-mode: screen;
  opacity: 0;
  transform: translateX(-42%) rotate(-12deg);
  animation: sonic-gem-sweep 9.2s ease-in-out infinite;
  pointer-events: none;
}

body[data-theme="sonic"]:not([data-group="home"]) .exercise-card:nth-child(2) .card-gem-image,
body[data-theme="sonic"]:not([data-group="home"]) .exercise-card:nth-child(2) .card-gem-shine { animation-delay: -1.5s; }
body[data-theme="sonic"]:not([data-group="home"]) .exercise-card:nth-child(3) .card-gem-image,
body[data-theme="sonic"]:not([data-group="home"]) .exercise-card:nth-child(3) .card-gem-shine { animation-delay: -3s; }
body[data-theme="sonic"]:not([data-group="home"]) .exercise-card:nth-child(4) .card-gem-image,
body[data-theme="sonic"]:not([data-group="home"]) .exercise-card:nth-child(4) .card-gem-shine { animation-delay: -4.5s; }
body[data-theme="sonic"]:not([data-group="home"]) .exercise-card:nth-child(5) .card-gem-image,
body[data-theme="sonic"]:not([data-group="home"]) .exercise-card:nth-child(5) .card-gem-shine { animation-delay: -6s; }

@keyframes sonic-gem-rest {
  0%, 100% { transform: translateY(0) scale(1); }
  47% { transform: translateY(-1px) scale(1.012); }
  54% { transform: translateY(0) scale(1); }
}

@keyframes sonic-gem-sweep {
  0%, 72%, 100% { opacity: 0; transform: translateX(-42%) rotate(-12deg); }
  77% { opacity: .18; }
  82% { opacity: .5; transform: translateX(24%) rotate(-12deg); }
  87% { opacity: 0; transform: translateX(48%) rotate(-12deg); }
}

body[data-theme="sonic"]:not([data-group="home"]) .card-number-value {
  position: relative !important;
  z-index: 2 !important;
  pointer-events: none !important;
}

body[data-theme="sonic"]:not([data-group="home"]) .card-body {
  min-width: 0 !important;
  display: grid !important;
  align-content: center !important;
  gap: 1px !important;
}

body[data-theme="sonic"]:not([data-group="home"]) .card-body h3 {
  min-width: 0 !important;
  min-height: 2.06em !important;
  max-height: 2.06em !important;
  margin: 0 !important;
  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 2 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  color: #fffdf2 !important;
  font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace !important;
  font-size: clamp(15px, 3.85vw, 19px) !important;
  font-weight: 1000 !important;
  line-height: 1.03 !important;
  letter-spacing: -.025em !important;
  text-wrap: balance !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
  hyphens: none !important;
  text-shadow: 2px 2px 0 #073477 !important;
}
body[data-theme="sonic"]:not([data-group="home"]) .exercise-card.title-medium .card-body h3 {
  font-size: clamp(14px, 3.55vw, 17px) !important;
}
body[data-theme="sonic"]:not([data-group="home"]) .exercise-card.title-long .card-body h3 {
  font-size: clamp(13px, 3.25vw, 15.5px) !important;
  line-height: 1.01 !important;
}
body[data-theme="sonic"]:not([data-group="home"]) .card-body p {
  margin: 2px 0 0 !important;
  color: #fff439 !important;
  font-size: clamp(11px, 2.75vw, 13px) !important;
  font-weight: 1000 !important;
  line-height: 1.03 !important;
  text-transform: uppercase !important;
  text-shadow: 1px 1px 0 #073477 !important;
}
body[data-theme="sonic"]:not([data-group="home"]) .card-body span {
  min-width: 0 !important;
  margin-top: 1px !important;
  color: #fff !important;
  font-size: clamp(10px, 2.5vw, 12px) !important;
  line-height: 1.05 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  text-shadow: 1px 1px 0 #073477 !important;
}

body[data-theme="sonic"]:not([data-group="home"]) .reroll-button {
  width: 42px !important;
  min-width: 42px !important;
  height: 100% !important;
  min-height: 66px !important;
  padding: 0 !important;
  display: grid !important;
  place-items: center !important;
  align-self: stretch !important;
  color: #fff !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  touch-action: manipulation;
}
body[data-theme="sonic"]:not([data-group="home"]) .reroll-setting { display: none !important; }
body[data-theme="sonic"]:not([data-group="home"]) .reroll-symbol {
  position: relative !important;
  width: 29px !important;
  height: 29px !important;
  display: block !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: transparent !important;
  filter: drop-shadow(2px 2px 0 #073477) !important;
}
body[data-theme="sonic"]:not([data-group="home"]) .reroll-symbol::before {
  content: "" !important;
  position: absolute !important;
  inset: 4px !important;
  border: 6px solid #fffdf2 !important;
  border-left-color: transparent !important;
  border-radius: 50% !important;
}
body[data-theme="sonic"]:not([data-group="home"]) .reroll-symbol::after {
  content: "" !important;
  position: absolute !important;
  right: 0 !important;
  top: 0 !important;
  width: 0 !important;
  height: 0 !important;
  border-left: 8px solid #fffdf2 !important;
  border-top: 6px solid transparent !important;
  border-bottom: 6px solid transparent !important;
  transform: rotate(34deg) !important;
}
body[data-theme="sonic"]:not([data-group="home"]) .reroll-button:active .reroll-symbol {
  transform: scale(.88) rotate(28deg) !important;
}

body[data-theme="sonic"]:not([data-group="home"]) .back-button {
  width: min(100%, 570px) !important;
  min-height: 54px !important;
  margin: 13px auto 5px !important;
  padding: 9px 17px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 9px !important;
  color: #fffbd8 !important;
  border: 4px solid var(--sonic-yellow) !important;
  border-radius: 18px !important;
  background: linear-gradient(180deg, #329cf7, #0862ca) !important;
  box-shadow: inset 0 2px 0 rgba(255,255,255,.25), 0 4px 0 var(--sonic-yellow-deep), 0 8px 12px rgba(3,25,90,.16) !important;
  font: 1000 clamp(14px, 3.7vw, 18px)/1 ui-monospace, monospace !important;
  letter-spacing: .02em !important;
  text-shadow: 2px 2px 0 #073477 !important;
  text-align: center !important;
  touch-action: manipulation;
}
body[data-theme="sonic"]:not([data-group="home"]) .back-button:active {
  transform: translateY(3px) !important;
  box-shadow: inset 0 2px 0 rgba(255,255,255,.2), 0 1px 0 var(--sonic-yellow-deep), 0 4px 8px rgba(3,25,90,.13) !important;
}
body[data-theme="sonic"]:not([data-group="home"]) .back-button-icon {
  width: 23px !important;
  height: 23px !important;
  flex: 0 0 auto !important;
}

body[data-theme="sonic"]:not([data-group="home"]) .footer-seal {
  width: fit-content !important;
  min-height: 0 !important;
  margin: 4px auto calc(var(--safe-bottom) + 5px) !important;
  padding: 4px 11px !important;
  display: block !important;
  color: rgba(255,251,205,.85) !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: rgba(4,45,124,.76) !important;
  box-shadow: none !important;
  font: 800 10px/1 ui-monospace, monospace !important;
  text-shadow: 1px 1px 0 #062660 !important;
}
body[data-theme="sonic"]:not([data-group="home"]) .footer-seal .seal-dot,
body[data-theme="sonic"]:not([data-group="home"]) .footer-seal > span:nth-child(3) { display: none !important; }

/* Existing runner animation gets a predictable top-level hit target and no
   permanent will-change allocation outside the active run. */
body[data-theme="sonic"] .sonic-button-runner {
  will-change: translate, opacity;
}
body[data-theme="sonic"] .sonic-button-runner:not(.is-running) {
  will-change: auto;
}

/* -------------------------------------------------------------------------- */
/* Sonic modals                                                               */
/* -------------------------------------------------------------------------- */

body[data-theme="sonic"] .modal {
  position: fixed !important;
  inset: 0 !important;
  z-index: 300 !important;
  display: grid !important;
  place-items: center !important;
  padding: max(10px, var(--safe-top)) 10px max(10px, var(--safe-bottom)) !important;
  overflow: hidden !important;
}
body[data-theme="sonic"] .modal[hidden] { display: none !important; }
body[data-theme="sonic"] .modal-backdrop {
  position: absolute !important;
  inset: 0 !important;
  background: rgba(2, 15, 64, .72) !important;
  backdrop-filter: blur(8px) saturate(.9);
}

body[data-theme="sonic"] .modal-panel {
  position: relative !important;
  z-index: 1 !important;
  width: min(100%, 620px) !important;
  max-height: calc(100dvh - max(20px, var(--safe-top)) - max(20px, var(--safe-bottom))) !important;
  margin: 0 !important;
  padding: 16px !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
  -webkit-overflow-scrolling: touch !important;
  color: #fff !important;
  border: 5px solid var(--sonic-yellow) !important;
  border-radius: 24px !important;
  background: linear-gradient(180deg, #298ef2, #0754c1 30%, #073b99 100%) !important;
  box-shadow: inset 0 0 0 3px rgba(255,255,255,.16), 0 7px 0 #083177, 0 17px 34px rgba(0,0,0,.34) !important;
  scrollbar-gutter: stable;
}

body[data-theme="sonic"] .modal-close {
  position: sticky !important;
  top: 0 !important;
  z-index: 20 !important;
  float: right !important;
  display: grid !important;
  place-items: center !important;
  width: 42px !important;
  height: 42px !important;
  min-width: 42px !important;
  min-height: 42px !important;
  margin: 0 0 -42px auto !important;
  padding: 0 !important;
  color: #fff !important;
  border: 3px solid var(--sonic-yellow) !important;
  border-radius: 11px !important;
  background: linear-gradient(180deg, #ff554c, #d91829) !important;
  box-shadow: 0 3px 0 #8f4600 !important;
  font: 900 25px/1 system-ui, sans-serif !important;
  text-shadow: 2px 2px 0 #8f1c28 !important;
}

body[data-theme="sonic"] #exerciseModal .modal-title-block {
  margin: 0 0 10px !important;
  padding: 13px 54px 12px 14px !important;
  border: 3px solid rgba(255,225,63,.75) !important;
  border-radius: 17px !important;
  background: rgba(5, 52, 146, .58) !important;
}
body[data-theme="sonic"] #exerciseModal .modal-title-block .eyebrow {
  margin: 0 0 4px !important;
  color: #fff !important;
  font-size: clamp(13px, 3vw, 17px) !important;
  letter-spacing: .18em !important;
}
body[data-theme="sonic"] #exerciseModal .modal-title-block h2 {
  margin: 0 !important;
  font-size: clamp(25px, 6vw, 38px) !important;
  line-height: 1.05 !important;
}
body[data-theme="sonic"] #exerciseModal .modal-meta {
  margin-top: 10px !important;
  padding: 8px 11px !important;
  border-radius: 13px !important;
  background: rgba(60,132,236,.48) !important;
  font-size: clamp(14px, 3.4vw, 18px) !important;
}

body[data-theme="sonic"] .exercise-illustration {
  min-height: 0 !important;
  margin: 0 0 10px !important;
  border: 3px solid var(--sonic-yellow) !important;
  background: linear-gradient(180deg, #5ed2ff 0%, #1da6ef 54%, #41db56 54.5%, #1bb642 61%, #9b4b13 61.5%) !important;
  box-shadow: inset 0 0 0 3px rgba(13,82,160,.65) !important;
  overflow: hidden !important;
}
body[data-theme="sonic"] .exercise-illustration svg {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  max-height: 330px !important;
}
body[data-theme="sonic"] .exercise-illustration .pose-start { opacity: .68 !important; }
body[data-theme="sonic"] .exercise-illustration .pose-end { opacity: 1 !important; }
body[data-theme="sonic"] .exercise-illustration .motion-arrow,
body[data-theme="sonic"] .exercise-illustration .motion-arrow-halo { opacity: 1 !important; }
body[data-theme="sonic"] .movement-note {
  padding: 8px 11px !important;
  color: rgba(255,248,210,.92) !important;
  background: rgba(125, 53, 11, .72) !important;
  font-size: clamp(12px, 2.9vw, 15px) !important;
}

body[data-theme="sonic"] .muscle-summary,
body[data-theme="sonic"] .instruction-section,
body[data-theme="sonic"] .safety-note,
body[data-theme="sonic"] .update-section,
body[data-theme="sonic"] .setting-row {
  border: 3px solid rgba(255,225,63,.72) !important;
  border-radius: 17px !important;
  background: rgba(5, 52, 146, .66) !important;
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.06), 0 3px 0 rgba(4,35,104,.5) !important;
}

body[data-theme="sonic"] .instruction-section {
  padding: 13px 14px !important;
  content-visibility: auto;
  contain-intrinsic-size: 220px;
}
body[data-theme="sonic"] .instruction-section h3 {
  margin-bottom: 8px !important;
  font-size: clamp(15px, 3.5vw, 18px) !important;
}
body[data-theme="sonic"] .instruction-section p,
body[data-theme="sonic"] .instruction-section li {
  font-size: clamp(15px, 3.55vw, 18px) !important;
  line-height: 1.45 !important;
}
body[data-theme="sonic"] .instruction-section ul {
  gap: 7px !important;
}
body[data-theme="sonic"] .safety-note {
  padding: 14px 16px !important;
  font-size: clamp(14px, 3.4vw, 17px) !important;
  line-height: 1.42 !important;
}

body[data-theme="sonic"] .settings-panel {
  height: auto !important;
  max-height: calc(100dvh - max(20px, var(--safe-top)) - max(20px, var(--safe-bottom))) !important;
  padding: 17px !important;
}
body[data-theme="sonic"] .settings-panel > .eyebrow {
  margin: 0 0 3px !important;
  color: #fff449 !important;
  font-size: 15px !important;
}
body[data-theme="sonic"] .settings-panel > h2 {
  margin: 0 50px 12px 0 !important;
  font-size: clamp(29px, 7vw, 43px) !important;
  line-height: 1 !important;
}
body[data-theme="sonic"] .setting-row {
  min-height: 0 !important;
  margin: 0 0 10px !important;
  padding: 13px 14px !important;
  display: grid !important;
  grid-template-columns: minmax(0,1fr) auto !important;
  align-items: center !important;
  gap: 12px !important;
  background-image: none !important;
}
body[data-theme="sonic"] .setting-row strong,
body[data-theme="sonic"] .update-heading strong {
  color: #fffbd3 !important;
  font-size: clamp(17px, 4vw, 21px) !important;
}
body[data-theme="sonic"] .setting-row small,
body[data-theme="sonic"] .update-heading small,
body[data-theme="sonic"] .update-status,
body[data-theme="sonic"] .privacy-note {
  color: #fff !important;
  font-size: clamp(14px, 3.3vw, 17px) !important;
  line-height: 1.36 !important;
}
body[data-theme="sonic"] .setting-row-theme {
  grid-template-columns: 1fr !important;
}
body[data-theme="sonic"] .theme-select {
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  height: 48px !important;
  padding: 0 45px 0 13px !important;
  color: #fff !important;
  border: 3px solid var(--sonic-yellow) !important;
  border-radius: 0 !important;
  background:
    linear-gradient(45deg, transparent 50%, white 50%) calc(100% - 19px) 20px / 7px 7px no-repeat,
    linear-gradient(135deg, white 50%, transparent 50%) calc(100% - 12px) 20px / 7px 7px no-repeat,
    linear-gradient(180deg, #349df5, #0a61c8) !important;
  box-shadow: 0 3px 0 #8f5100 !important;
  font: 900 clamp(14px, 3.5vw, 18px)/1 ui-monospace, monospace !important;
  text-overflow: ellipsis !important;
  appearance: none !important;
}
body[data-theme="sonic"] .update-section {
  margin: 0 0 10px !important;
  padding: 13px 14px !important;
  background-image: none !important;
}
body[data-theme="sonic"] .version-gem { display: none !important; }
body[data-theme="sonic"] .update-heading { margin-bottom: 10px !important; }
body[data-theme="sonic"] .update-button {
  min-height: 48px !important;
  color: #fff !important;
  border: 3px solid var(--sonic-yellow) !important;
  background: linear-gradient(180deg, #349df5, #0a61c8) !important;
  box-shadow: 0 3px 0 #8f5100 !important;
  font: 900 clamp(13px, 3.3vw, 17px)/1 ui-monospace, monospace !important;
  letter-spacing: .02em !important;
  background-image: none !important;
}
body[data-theme="sonic"] .privacy-note {
  margin: 10px 2px 0 !important;
}

/* -------------------------------------------------------------------------- */
/* Selection timeline                                                         */
/* -------------------------------------------------------------------------- */

body[data-theme="sonic"] .sonic-button-runner {
  position: fixed !important;
  left: 0 !important;
  top: var(--runner-top) !important;
  z-index: 280 !important;
  width: 164px !important;
  height: 164px !important;
  margin: 0 !important;
  pointer-events: none !important;
  background: url('./assets/sonic/sonic-button-run.gif?v=1842') center / contain no-repeat !important;
  image-rendering: pixelated !important;
  transform: none !important;
  translate: -190px -50%;
  opacity: 0 !important;
  visibility: visible !important;
  will-change: translate, opacity !important;
  filter: drop-shadow(0 4px 0 rgba(0,0,0,.24)) !important;
}
body[data-theme="sonic"] .sonic-button-runner.is-running {
  opacity: 1 !important;
  animation: sonic-run-across-v1842 820ms linear both !important;
}
@keyframes sonic-run-across-v1842 {
  0% { translate: -190px -50%; }
  100% { translate: calc(100vw + 190px) -50%; }
}
body[data-theme="sonic"] .sonic-selecting,
body[data-theme="sonic"] .sonic-action-spinning,
body[data-theme="sonic"][data-group="home"] .menu-button.sonic-selecting,
body[data-theme="sonic"]:not([data-group="home"]) .exercise-card.sonic-action-spinning,
body[data-theme="sonic"]:not([data-group="home"]) .back-button.sonic-action-spinning {
  animation: sonic-card-flip-v1842 380ms cubic-bezier(.2,.74,.22,1) both !important;
  transform-origin: center center !important;
  transform-style: preserve-3d !important;
  backface-visibility: visible !important;
  will-change: rotate, scale !important;
}
@keyframes sonic-card-flip-v1842 {
  0% { rotate: y 0deg; scale: 1; }
  33% { rotate: y 92deg; scale: 1.025; }
  67% { rotate: y 270deg; scale: 1.025; }
  100% { rotate: y 360deg; scale: 1; }
}

.reduced-effects body[data-theme="sonic"] .sonic-button-runner,
.reduced-effects body[data-theme="sonic"] .sonic-selecting,
.reduced-effects body[data-theme="sonic"] .sonic-action-spinning,
.reduced-effects body[data-theme="sonic"] .sonic-logo-star,
.reduced-effects body[data-theme="sonic"] .menu-gem,
.reduced-effects body[data-theme="sonic"] .card-gem-image,
.reduced-effects body[data-theme="sonic"] .card-gem-shine {
  animation: none !important;
}

/* -------------------------------------------------------------------------- */
/* Compact variants                                                           */
/* -------------------------------------------------------------------------- */

@media (max-height: 780px) {
  body[data-theme="sonic"][data-group="home"] .main-view {
    padding-top: calc(var(--safe-top) + 70px) !important;
    padding-bottom: calc(var(--safe-bottom) + 56px) !important;
  }
  body[data-theme="sonic"][data-group="home"] .sonic-home-logo {
    width: min(62vw, 300px) !important;
    margin-bottom: 9px !important;
  }
  body[data-theme="sonic"][data-group="home"] .menu-button {
    min-height: 62px !important;
  }
  body[data-theme="sonic"][data-group="home"] .menu-stack {
    gap: 6px !important;
  }
  body[data-theme="sonic"]:not([data-group="home"]) .sonic-ritual-gif {
    height: 96px !important;
  }
  body[data-theme="sonic"]:not([data-group="home"]) .exercise-card {
    min-height: 72px !important;
  }
}

@media (max-width: 390px) {
  body[data-theme="sonic"]:not([data-group="home"]) .topbar {
    width: calc(100% - 22px) !important;
    grid-template-columns: 46px minmax(0,1fr) 46px !important;
    gap: 8px !important;
  }
  body[data-theme="sonic"] .icon-button,
  body[data-theme="sonic"] .brand-mark {
    width: 46px !important;
    height: 46px !important;
    min-width: 46px !important;
    min-height: 46px !important;
  }
  body[data-theme="sonic"]:not([data-group="home"]) .exercise-detail-button {
    grid-template-columns: 49px minmax(0,1fr) !important;
    gap: 7px !important;
  }
  body[data-theme="sonic"]:not([data-group="home"]) .card-number {
    width: 47px !important;
    min-width: 47px !important;
    height: 47px !important;
  }
  body[data-theme="sonic"]:not([data-group="home"]) .exercise-card {
    grid-template-columns: minmax(0,1fr) 40px !important;
  }
  body[data-theme="sonic"]:not([data-group="home"]) .reroll-button {
    width: 38px !important;
    min-width: 38px !important;
  }
}

/* -------------------------------------------------------------------------- */
/* v1.8.41 regression repair — restore the approved compact mobile layout.    */
/* -------------------------------------------------------------------------- */

/* The old home implementation left a 100dvh grid on .menu-stack. Reset every
   sizing/flex/grid dimension explicitly so earlier Sonic rules cannot stretch
   the five menu rows apart again. */
body[data-theme="sonic"][data-group="home"] .app-shell {
  width: min(100%, 620px) !important;
  height: 100dvh !important;
  min-height: 100dvh !important;
  max-height: 100dvh !important;
  padding: 0 !important;
  overflow: hidden !important;
}

body[data-theme="sonic"][data-group="home"] .main-view {
  box-sizing: border-box !important;
  width: 100% !important;
  height: 100dvh !important;
  min-height: 100dvh !important;
  max-height: 100dvh !important;
  padding: calc(var(--safe-top) + 70px) var(--sonic-side-gap) calc(var(--safe-bottom) + 48px) !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  align-items: stretch !important;
  overflow: hidden !important;
}

body[data-theme="sonic"][data-group="home"] .sonic-home-logo {
  flex: 0 0 auto !important;
  width: min(65vw, 282px) !important;
  max-width: 282px !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 auto 10px !important;
}

body[data-theme="sonic"][data-group="home"] .sonic-home-logo img {
  width: 100% !important;
  height: auto !important;
  max-height: 178px !important;
  object-fit: contain !important;
}

body[data-theme="sonic"][data-group="home"] .menu-stack {
  position: relative !important;
  inset: auto !important;
  flex: 0 0 auto !important;
  width: min(100%, 570px) !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  margin: 0 auto !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: repeat(5, auto) !important;
  grid-auto-rows: auto !important;
  align-content: start !important;
  justify-content: stretch !important;
  gap: 8px !important;
  transform: none !important;
}

body[data-theme="sonic"][data-group="home"] .menu-stack::before {
  content: none !important;
  display: none !important;
}

body[data-theme="sonic"][data-group="home"] .menu-button {
  position: relative !important;
  inset: auto !important;
  width: 100% !important;
  height: 68px !important;
  min-height: 68px !important;
  max-height: 68px !important;
  margin: 0 !important;
  padding: 5px 13px !important;
  transform: none !important;
}

body[data-theme="sonic"][data-group="home"] .menu-copy strong {
  font-size: clamp(25px, 6.7vw, 35px) !important;
}

body[data-theme="sonic"][data-group="home"] .menu-gem {
  width: 38px !important;
  height: 48px !important;
}

body[data-theme="sonic"][data-group="home"] .footer-seal {
  bottom: calc(var(--safe-bottom) + 7px) !important;
  max-width: calc(100% - 30px) !important;
  padding: 5px 13px !important;
}

body[data-theme="sonic"][data-group="home"] .footer-seal::before {
  content: none !important;
  display: none !important;
}
body[data-theme="sonic"][data-group="home"] .footer-seal::after {
  content: 'RINGS ∞' !important;
  display: inline !important;
  justify-self: auto !important;
}
body[data-theme="sonic"][data-group="home"] .footer-seal > span:nth-child(2),
body[data-theme="sonic"][data-group="home"] .footer-seal > span:nth-child(3) {
  display: none !important;
}

/* Keep the fixed scene exactly viewport-sized; this prevents the plain blue
   document background from appearing below it in full-page/iPhone captures. */
body[data-theme="sonic"][data-group="home"],
body[data-theme="sonic"][data-group="home"].page-fits:not(.modal-open) {
  width: 100% !important;
  height: 100dvh !important;
  min-height: 100dvh !important;
  max-height: 100dvh !important;
  overflow: hidden !important;
}

/* Workout: remove the double app-shell safe-area padding that pushed the
   header downward, while preserving one safe-area-aware topbar padding. */
body[data-theme="sonic"]:not([data-group="home"]) .app-shell {
  width: min(100%, 620px) !important;
  min-height: 100dvh !important;
  padding: 0 !important;
  overflow: visible !important;
}

body[data-theme="sonic"]:not([data-group="home"]) .topbar {
  width: min(calc(100% - 24px), 570px) !important;
  min-height: 0 !important;
  margin: 0 auto 8px !important;
  padding: calc(var(--safe-top) + 7px) 0 4px !important;
  grid-template-columns: 48px minmax(0, 1fr) 48px !important;
  gap: 10px !important;
}

body[data-theme="sonic"]:not([data-group="home"]) .brand-mark,
body[data-theme="sonic"]:not([data-group="home"]) .icon-button {
  width: 48px !important;
  height: 48px !important;
  min-width: 48px !important;
  min-height: 48px !important;
  margin: 0 !important;
  align-self: center !important;
}

body[data-theme="sonic"]:not([data-group="home"]) .brand-home-button {
  width: min(100%, 126px) !important;
  height: 44px !important;
}
body[data-theme="sonic"]:not([data-group="home"]) .topbar-sonic-logo {
  width: min(100%, 118px) !important;
  max-height: 42px !important;
}

body[data-theme="sonic"]:not([data-group="home"]) .main-view {
  width: 100% !important;
  padding: 0 12px calc(var(--safe-bottom) + 10px) !important;
}

body[data-theme="sonic"]:not([data-group="home"]) .workout-head,
body[data-theme="sonic"]:not([data-group="home"]) .exercise-stack,
body[data-theme="sonic"]:not([data-group="home"]) .back-button {
  width: min(100%, 570px) !important;
}

/* A legacy decorative selector painted a Green Hill strip inside the back
   button. Explicitly neutralize both pseudo-elements and all image layers. */
body[data-theme="sonic"]:not([data-group="home"]) .back-button {
  background-image: linear-gradient(180deg, #329cf7, #0862ca) !important;
  overflow: hidden !important;
}
body[data-theme="sonic"]:not([data-group="home"]) .back-button::before,
body[data-theme="sonic"]:not([data-group="home"]) .back-button::after {
  content: none !important;
  display: none !important;
  background: none !important;
  background-image: none !important;
}

body[data-theme="sonic"]:not([data-group="home"]) .reroll-symbol {
  width: 26px !important;
  height: 26px !important;
}
body[data-theme="sonic"]:not([data-group="home"]) .reroll-symbol::before {
  border-width: 5px !important;
}
body[data-theme="sonic"]:not([data-group="home"]) .reroll-symbol::after {
  border-left-width: 7px !important;
  border-top-width: 5px !important;
  border-bottom-width: 5px !important;
}

/* Do not lock a workout document unless its complete topbar, main content and
   footer genuinely fit. This override prevents accidental clipping from an
   earlier page-fits state calculation. */
body[data-theme="sonic"]:not([data-group="home"]).page-fits:not(.modal-open) {
  height: auto !important;
  min-height: 100dvh !important;
  max-height: none !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
}

@media (max-height: 820px) {
  body[data-theme="sonic"][data-group="home"] .main-view {
    padding-top: calc(var(--safe-top) + 58px) !important;
    padding-bottom: calc(var(--safe-bottom) + 43px) !important;
  }
  body[data-theme="sonic"][data-group="home"] .sonic-home-logo {
    width: min(58vw, 246px) !important;
    margin-bottom: 7px !important;
  }
  body[data-theme="sonic"][data-group="home"] .sonic-home-logo img {
    max-height: 152px !important;
  }
  body[data-theme="sonic"][data-group="home"] .menu-button {
    height: 60px !important;
    min-height: 60px !important;
    max-height: 60px !important;
  }
  body[data-theme="sonic"][data-group="home"] .menu-stack {
    gap: 6px !important;
  }
}

/* -------------------------------------------------------------------------- */
/* v1.8.42 numbered workout gems swap                                         */
/* Replace the old workout-card gems with the new numbered hex gems supplied   */
/* by the user. The number is now baked into each sprite, so the old overlay   */
/* numeral is hidden. Keep a subtle animated shimmer.                          */
/* -------------------------------------------------------------------------- */
body[data-theme="sonic"]:not([data-group="home"]) .card-number-value {
  display: none !important;
}

body[data-theme="sonic"]:not([data-group="home"]) .card-gem-image {
  z-index: 1 !important;
  animation:
    sonic-gem-rest 7.2s ease-in-out infinite,
    sonic-numbered-gem-glow 2.9s ease-in-out infinite !important;
}

body[data-theme="sonic"]:not([data-group="home"]) .card-gem-shine {
  inset: 6px 8px 10px !important;
  z-index: 2 !important;
  border-radius: 9px !important;
  background: linear-gradient(118deg,
    transparent 12%,
    rgba(255,255,255,.04) 27%,
    rgba(255,255,255,.42) 41%,
    rgba(255,255,255,.08) 53%,
    transparent 68%) !important;
  opacity: 0 !important;
  transform: translateX(-48%) rotate(-12deg) !important;
  animation: sonic-numbered-gem-shimmer 3.8s ease-in-out infinite !important;
}

@keyframes sonic-numbered-gem-glow {
  0%, 100% {
    filter: drop-shadow(0 2px 0 rgba(82,36,0,.42)) drop-shadow(0 0 5px rgba(255,255,255,.12));
  }
  50% {
    filter: drop-shadow(0 2px 0 rgba(82,36,0,.42)) drop-shadow(0 0 8px rgba(255,255,255,.22));
  }
}

@keyframes sonic-numbered-gem-shimmer {
  0%, 70%, 100% {
    opacity: 0;
    transform: translateX(-48%) rotate(-12deg);
  }
  75% {
    opacity: .14;
  }
  82% {
    opacity: .5;
    transform: translateX(18%) rotate(-12deg);
  }
  90% {
    opacity: 0;
    transform: translateX(42%) rotate(-12deg);
  }
}

.reduced-effects body[data-theme="sonic"]:not([data-group="home"]) .card-gem-image,
.reduced-effects body[data-theme="sonic"]:not([data-group="home"]) .card-gem-shine {
  animation: none !important;
}