/* v64.43: reference-style feedback. No reward, timer or game-rule changes. */
:root {
  --feedback-edge: #397aa477;
  --feedback-copy: #bad1eb;
  --feedback-fill: radial-gradient(ellipse at 0 0, #15336a88, transparent 60%), #06101f;
}
#app .spark-dialog {
  box-sizing: border-box; inset: 0; width: 100%;
  height: var(--tg-viewport-stable-height, 100dvh);
  padding: calc(var(--spark-safe-top, 0px) + 12px) max(12px, env(safe-area-inset-right, 0px)) calc(var(--spark-safe-bottom, 0px) + 12px) max(12px, env(safe-area-inset-left, 0px));
  display: flex; align-items: center; justify-content: center; overflow: hidden;
  background: #020813eF; backdrop-filter: blur(6px);
}
#app .spark-dialog > section {
  box-sizing: border-box; width: min(100%, 390px); max-height: 100%; min-height: 0;
  display: flex; flex-direction: column; overflow: hidden;
  padding: 22px 20px; border-radius: 22px; border: 1px solid var(--feedback-edge);
  background: var(--feedback-fill); color: var(--spark-white);
  box-shadow: inset 0 1px #b0dcff22, 0 12px 45px #0009, 0 0 28px #1268c41c;
  font-family: var(--spark-font-ui); isolation: isolate;
}
#app .spark-dialog :is(h1,h2,p,button,strong,b,small,span) { font-family: var(--spark-font-ui); }
#app .spark-dialog .feedback-scroll { position: relative; display: grid; place-items: center; flex: 1 1 auto; min-height: 0; width: 100%; overflow: auto; overscroll-behavior: contain; scrollbar-width: thin; }
#app .onboarding-card .feedback-scroll { display: block; }
#app .spark-dialog .feedback-scroll > .eyebrow { margin: 0 0 8px; }
#app .spark-dialog h1 { font-size: clamp(27px, 8vw, 32px); line-height: 1.12; letter-spacing: -.02em; font-weight: 700; text-wrap: balance; }
#app .spark-dialog h2 { font-size: 20px; line-height: 1.3; }
#app .spark-dialog .eyebrow { font-size: 12px; line-height: 16px; letter-spacing: .1em; }
#app .spark-dialog :is(.onboarding-copy,.level-up-lead,.personal-best-lead,.perfect-run-lead) {
  font-size: 16px; line-height: 1.4; font-weight: 400; color: var(--feedback-copy); min-height: 0;
}
#app .spark-dialog .primary-button {
  min-height: 58px; padding: 12px; border-radius: 14px; border: 1px solid #ba8bffb0;
  background: var(--spark-primary-fill); color: #fff; box-shadow: inset 0 1px #fff5, 0 0 18px #9123ed30;
}
#app .spark-dialog .button-copy { font-size: 19px; line-height: 1.2; letter-spacing: 0; white-space: normal; }
#app .spark-dialog .button-meta { font-size: 12px; line-height: 1.3; letter-spacing: 0; color: #dceaff; }
#app .spark-dialog :is(button,summary):focus-visible, .spark-feedback :is(button,summary):focus-visible { outline: 2px solid var(--spark-cyan); outline-offset: 2px; }
#app .onboarding-card { text-align: left; }
#app .onboarding-close { width: 44px; height: 44px; top: 10px; right: 10px; z-index: 5; color: #d6eaff; background: #0a1930; }
#app .onboarding-progress { width: calc(100% - 48px); min-height: 22px; align-items: center; }
.onboarding-example { margin-top: 12px; color: #a7c6e6; font-size: 12px; text-transform: uppercase; letter-spacing: .1em; text-align: center; }
#app .onboarding-visual { min-height: 140px; margin: 8px 0 18px; transform: none; }
#app .onboarding-step { color: #a7c6e6; font-size: 12px; letter-spacing: .08em; }
#app .onboarding-actions { grid-template-columns: minmax(0, .85fr) minmax(0, 1.6fr); }
#app .spark-dialog :is(.onboarding-actions,.level-up-continue,.personal-best-continue,.perfect-run-pass) { position: relative; flex: 0 0 auto; width: 100%; z-index: 4; }
#app .onboarding-actions { background: #06101f; box-shadow: 0 -10px 14px #06101f; border-radius: 14px; }
/* Daily reward toasts must not cover the tutorial copy or its controls. */
body.onboarding-open #toast { opacity: 0; }
#app .onboarding-secondary { min-height: 48px; font-size: 14px; letter-spacing: 0; color: #d2e4f9; background: #0a1930; border-color: var(--feedback-edge); }
#app .spark-dialog :is(.level-up-card,.personal-best-card,.perfect-run-card)::after { display: none; }
#app .spark-dialog :is(.level-up-rings,.personal-best-energy,.perfect-run-rays) { opacity: .45; pointer-events: none; z-index: -1; }
#app .spark-dialog .perfect-run-rays { inset: 0; animation: none; }
#app .level-up-number strong { font-size: 58px; letter-spacing: -.025em; color: var(--spark-gold); }
#app .level-up-route, #app .level-up-number small { font-size: 12px; color: #c0d6ee; }
#app .level-up-progress > div { flex-wrap: wrap; }
#app .level-up-progress :is(span,strong,small), #app .personal-best-stats small,
#app .perfect-run-bank :is(small,span), #app .perfect-run-steps :is(small,strong) { font-size: 12px; line-height: 1.3; letter-spacing: 0; color: var(--feedback-copy); }
#app .personal-best-stats { width: 100%; }
#app .personal-best-stats strong { font-size: 24px; line-height: 1.2; }
#app .personal-best-risk small { font-size: 12px; line-height: 1.4; color: var(--feedback-copy); }
#app .perfect-run-bank strong { color: var(--spark-gold); font-size: 40px; line-height: 1.1; letter-spacing: -.02em; }
#app .perfect-run-card .primary-button { background: linear-gradient(135deg,#0082fa,#0047b8 65%,#002967); border-color: #00d9ff; }
#app .spark-feedback {
  box-sizing: border-box; margin: 20px auto; padding: 28px 20px;
  width: 100%; min-height: 0; border: 1px solid var(--feedback-edge); border-radius: 22px;
  background: var(--feedback-fill); text-align: center; color: #fff;
}
.spark-feedback .feedback-signal { display: grid; place-items: center; width: 80px; height: 80px; margin: 12px auto 24px; border: 1px solid #00cfff88; border-radius: 24px; background: #072846; color: #00e5ff; font: 700 44px/1 var(--spark-font-ui); box-shadow: 0 0 24px #008aff33; }
.spark-feedback.feedback-error .feedback-signal { color: #ff4a61; border-color: #ff244f88; background: #30101f; box-shadow: 0 0 24px #ff143022; }
#app .spark-feedback h1 { font: 700 32px/1.15 var(--spark-font-ui); letter-spacing: -.02em; }
#app .spark-feedback .muted { color: var(--feedback-copy); font: 400 16px/1.5 var(--spark-font-ui); }
#app .spark-feedback .eyebrow { color: #91c9ff; font-size: 12px; }
#app .spark-feedback .primary-button { min-height: 60px; background: var(--spark-primary-fill); border: 1px solid #b280ed; margin-top: 18px; }
#app .spark-feedback .button-copy { font-size: 19px; line-height: 1.2; letter-spacing: 0; }
#app .spark-feedback .button-meta { font-size: 12px; line-height: 1.3; letter-spacing: 0; color: #dceaff; }
/* Request the same variable-font weight for all key labels in this UI family. */
#app :is(.spark-dialog,.spark-feedback) :is(h1,h2,strong,.button-copy) { font-weight: 700; font-variation-settings: "wght" 700; }
.feedback-home { width: 100%; min-height: 48px; margin-top: 10px; background: #0a1930; color: #cfe6ff; border: 1px solid var(--feedback-edge); border-radius: 14px; font-size: 16px; cursor: pointer; }
.feedback-details { margin-top: 18px; text-align: left; border: 1px solid var(--feedback-edge); border-radius: 12px; background: #020d1d; }
.feedback-details summary { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 44px; padding: 12px; cursor: pointer; color: #c0d9f4; font-size: 14px; }
.feedback-details summary::-webkit-details-marker { display: none; }
.feedback-details summary::after { content: "+"; }
.feedback-details[open] summary::after { content: "−"; }
.spark-feedback button { scroll-margin-top: calc(var(--spark-safe-top, 0px) + 12px); scroll-margin-bottom: calc(var(--spark-safe-bottom, 0px) + 12px); }
.feedback-details p { padding: 0 12px 12px; margin: 0; font-size: 14px; line-height: 1.4; color: var(--feedback-copy); overflow-wrap: anywhere; }
body #toast { border-color: #277dad; background: #061526fa; color: #e4f3ff; font: 500 15px/1.4 var(--spark-font-ui); overflow-wrap: anywhere; }
@media (max-height: 650px) {
  #app .spark-dialog > section { padding: 18px 16px; }
  #app .onboarding-visual { min-height: 116px; margin: 4px 0 10px; }
  #app .onboarding-visual > * { zoom: .8; }
}
@media (prefers-reduced-motion: reduce) {
  #app .spark-feedback { animation: none; }
  #app .spark-dialog, #app .spark-dialog *, #app .spark-dialog *::before, #app .spark-dialog *::after { animation: none !important; transition: none !important; }
}