/*
 * Mobile UI styles ported from apps/mobile/src/App.css
 * Wrapped in @scope (.app-canvas) so they don't leak into the landing page styles.
 *
 * Local edits vs. mobile source:
 *   - :root { ... } block dropped (color tokens are set on .app-canvas in app.html)
 *   - @keyframes pulse-dot → mobile-pulse-dot (avoids collision with landing's own pulse-dot)
 *   - .app-root height: 100vh → 100% (vh would refer to browser viewport, not the canvas)
 */

@scope (.app-canvas) {

/* ===== ANIMATIONS ===== */

@keyframes gradient-slide {
  0% { transform: translateX(-50%); }
  100% { transform: translateX(0%); }
}

@keyframes breathe-idle {
  0%   { transform: scale(0.9); opacity: 0.2; }
  100% { transform: scale(1);   opacity: 0.4; }
}

@keyframes breathe-ring {
  0%   { transform: scale(0.7); opacity: 0.9; }
  100% { transform: scale(1.3); opacity: 0.2; }
}

@keyframes breathe-text {
  0%   { transform: scale(1);    opacity: 0.9; }
  100% { transform: scale(1.03); opacity: 1;   }
}

@keyframes breathe-sub {
  0%   { opacity: 0.4; transform: scale(1);    }
  100% { opacity: 1;   transform: scale(1.02); }
}

@keyframes mobile-pulse-dot {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}

/* ===== BASE ===== */

.app-root {
  position: relative;
  height: 100%;
  width: 100%;
  overflow: hidden;
  background-color: var(--black);
}

.app-content {
  position: absolute;
  padding: 12px;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  z-index: 2;
  overflow: hidden;
}

.screen {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
}

/* ===== APP HEADER ===== */

.app-header {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  padding: 0px 18px;
  height: 44px;
  flex-shrink: 0;
  margin-top: 4px;
}

.app-logo {
  font-family: "Rajdhani", sans-serif;
  font-size: 18px;
  font-weight: 900;
  letter-spacing: 2px;
  color: var(--white);
}

.app-pool {
  font-family: "Rajdhani", sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: var(--teal);
  letter-spacing: 1px;
}

/* ===== CONTENT ===== */

.content {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 16px 16px;
  overflow: hidden;
}

/* ===== TYPOGRAPHY ===== */

.label {
  font-family: "Rajdhani", sans-serif;
  font-size: 10px;
  font-weight: 400;
  color: var(--muted);
  letter-spacing: 3px;
}

.small-label {
  font-family: "Rajdhani", sans-serif;
  font-size: 11px;
  color: var(--muted-light);
  letter-spacing: 2px;
}

.headline-xl {
  font-family: "Rajdhani", sans-serif;
  font-size: 86px;
  font-weight: 900;
  line-height: 0.85;
  letter-spacing: -3px;
  color: var(--white);
}

.headline-lg {
  font-family: "Rajdhani", sans-serif;
  font-size: 88px;
  font-weight: 900;
  letter-spacing: -2px;
  line-height: 1;
  color: var(--white);
}

.headline-md {
  font-family: "Rajdhani", sans-serif;
  font-size: 64px;
  font-weight: 900;
  letter-spacing: -2px;
  line-height: 0.9;
  color: var(--white);
}

.headline {
  font-family: "Rajdhani", sans-serif;
  font-size: 72px;
  font-weight: 900;
  line-height: 0.9;
  letter-spacing: -1px;
  color: var(--white);
}

.subline {
  font-family: "Rajdhani", sans-serif;
  font-size: 32px;
  font-weight: 900;
  letter-spacing: 0px;
}

.value {
  font-family: "Rajdhani", sans-serif;
  font-size: 56px;
  font-weight: 900;
  line-height: 1;
}

.small-value {
  font-family: "Rajdhani", sans-serif;
  font-size: 28px;
  font-weight: 700;
  letter-spacing: 0px;
}

/* ===== BUTTONS ===== */

.btn {
  width: 100%;
  min-height: 50px;
  background-color: var(--magenta);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 2px;
  position: relative;
}

.btn:active {
  transform: scale(0.98);
}

.btn-teal {
  background-color: var(--teal);
}

.btn-text {
  font-family: "Rajdhani", sans-serif;
  color: var(--black);
  font-size: 18px;
  font-weight: 900;
  letter-spacing: 4px;
}

.btn-outline {
  width: 100%;
  height: 56px;
  background-color: transparent;
  border: 1px solid #333333;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 2px;
}

.btn-outline-text {
  font-family: "Rajdhani", sans-serif;
  color: var(--white);
  font-size: 18px;
  font-weight: 900;
  letter-spacing: 4px;
}

.btn-disabled {
  opacity: 0.5;
}

.btn-gradient {
  overflow: hidden;
  background-color: transparent;
  border-radius: 4px;
}

.btn-gradient-bg {
  position: absolute;
  background: conic-gradient(#00F5C4, #00ffdd, #CC44FF, #ee55ff, #CC44FF, #00ffdd, #00F5C4);
  animation: ambient-rotate 3s linear infinite;
  border-radius: 4px;
}

.btn-gradient-inner {
  position: absolute;
  --paddings: 3px;
  top: var(--paddings);
  left: var(--paddings);
  right: var(--paddings);
  bottom: var(--paddings);
  background-color: var(--black);
  border-radius: 4px;
  z-index: 1;
}

.btn-gradient .btn-text {
  z-index: 2;
  color: var(--white);
}

.btn-gradient-solid {
  overflow: hidden;
  background-color: transparent;
  border-radius: 6px;
}

.btn-gradient-solid-bg {
  position: absolute;
  background: linear-gradient(90deg, #00F5C4, #00ffdd, #CC44FF, #ee55ff, #CC44FF, #00ffdd, #00F5C4, #00ffdd, #CC44FF, #ee55ff, #CC44FF, #00ffdd, #00F5C4);
  animation: gradient-slide 3s linear infinite;
}

.btn-gradient-solid .btn-text,
.btn-gradient-solid-red .btn-text,
.btn-gradient-solid-teal .btn-text {
  position: relative;
  z-index: 2;
}

.btn-gradient-solid .btn-text {
  color: var(--black);
}

.btn-gradient-solid-red {
  overflow: hidden;
  background-color: transparent;
  border-radius: 4px;
}

.btn-gradient-solid-red-bg {
  position: absolute;
  background: linear-gradient(90deg, #FF2D55, #ff4466, #CC44FF, #ee55ff, #CC44FF, #ff4466, #FF2D55, #ff4466, #CC44FF, #ee55ff, #CC44FF, #ff4466, #FF2D55);
  animation: gradient-slide 2s linear infinite;
}

.btn-gradient-solid-red .btn-text {
  color: var(--white);
}

.btn-gradient-solid-teal {
  overflow: hidden;
  background-color: transparent;
  border-radius: 4px;
}

.btn-gradient-solid-teal-bg {
  position: absolute;
  background: linear-gradient(90deg, #00F5C4, #00ffdd, #00F5C4, #00ffdd, #00F5C4, #00ffdd, #00F5C4);
  animation: gradient-slide 2s linear infinite;
}

.btn-gradient-solid-teal .btn-text {
  color: var(--black);
}

/* ===== DIVIDER / SPACER ===== */

.divider {
  height: 1px;
  background-color: #111111;
  width: 100%;
}

.spacer {
  flex: 1;
}

/* ===== LOBBY ===== */

.lobby-page {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
}

.lobby-timer {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 6px;
  margin-bottom: 32px;
}

.timer-dot {
  width: 6px;
  height: 6px;
  border-radius: 3px;
  background-color: var(--teal);
  animation: mobile-pulse-dot 2s infinite;
}

.lobby-season {
  margin-bottom: 48px;
}

.lobby-prize-label {
  margin-bottom: 8px;
}

.lobby-prize-value {
  font-family: "Rajdhani", sans-serif;
  font-size: 64px;
  font-weight: 900;
  color: var(--teal);
  letter-spacing: -1px;
  line-height: 1;
  margin-bottom: 6px;
}

.lobby-prize-sub {
  font-family: "Rajdhani", sans-serif;
  font-size: 12px;
  color: var(--muted-light);
  letter-spacing: 2px;
  margin-bottom: 48px;
}

.lobby-stats {
  display: flex;
  flex-direction: row;
  gap: 40px;
  margin-bottom: 48px;
}

.lobby-stat-val {
  font-family: "Rajdhani", sans-serif;
  font-size: 22px;
  font-weight: 700;
  color: var(--white);
}

.lobby-stat-val-teal {
  color: var(--teal);
}

/* ===== GAME ===== */

.game-page {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  overflow: hidden;
  border-radius: 36px;
}

.game-header {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding: 0px 28px;
  height: 44px;
  flex-shrink: 0;
  margin-top: 4px;
}

.game-header-label {
  font-family: "Rajdhani", sans-serif;
  font-size: 11px;
  color: #555555;
  letter-spacing: 2px;
}

.game-header-value {
  font-family: "Rajdhani", sans-serif;
  font-size: 11px;
  font-weight: 700;
  color: var(--teal);
  letter-spacing: 1px;
}

.game-stats {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-start;
  width: 100%;
}

.game-stat-val {
  font-family: "Rajdhani", sans-serif;
  font-size: 20px;
  font-weight: 700;
  color: var(--teal);
}

.game-stat-val-mag {
  color: var(--magenta);
}

.metrics-top,
.metrics-bottom {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding: 0px 27px;
  flex-shrink: 0;
  position: relative;
  z-index: 3;
  width: 100%;
}

.metrics-top {
  padding-top: 22px;
}

.metrics-bottom {
  padding-bottom: 20px;
}

.metric-label {
  font-family: "Rajdhani", sans-serif;
  font-size: 9px;
  color: var(--muted);
  letter-spacing: 3px;
  margin-bottom: 2px;
}

.metric-val {
  font-family: "Rajdhani", sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: var(--white);
  letter-spacing: 1px;
}

.metric-val-teal {
  color: var(--teal);
}

.metric-val-mag {
  color: var(--magenta);
}

/* ===== HOLD ZONE ===== */

.hold-zone-screen {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  width: 100%;
  position: relative;
  overflow: hidden;
  border-radius: 36px;
}

.hold-area {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 16px;
  width: 100%;
  position: relative;
}

.hold-text {
  font-family: "Rajdhani", sans-serif;
  font-size: 88px;
  font-weight: 900;
  letter-spacing: -2px;
  color: var(--white);
  line-height: 1;
  position: relative;
  z-index: 2;
}

.hold-text-pulsing {
  animation: breathe-text 1s ease-in-out infinite alternate;
}

.hold-sub {
  font-family: "Rajdhani", sans-serif;
  font-size: 12px;
  color: var(--muted);
  letter-spacing: 4px;
  z-index: 2;
}

.hold-sub-breathing {
  animation: breathe-sub 1s ease-in-out infinite alternate;
}

.ripple-container {
  display: flex;
  align-items: center;
  justify-content: center;
}

.ring-wrapper {
  position: absolute;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ripple {
  position: absolute;
  border-radius: 9999px;
  border: 1.5px solid var(--teal);
  box-shadow: 0px 0px 16px rgba(0, 245, 196, 0.8), 0px 0px 40px rgba(0, 245, 196, 0.3);
  transition: width 0.8s ease-out, height 0.8s ease-out;
}

.ripple-idle .ripple {
  animation-name: breathe-idle;
  animation-duration: 2s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

.ripple-active .ripple {
  animation-name: breathe-ring;
  animation-duration: 1s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

.ripple-1 { width: 80px;  height: 80px;  animation-delay: 0s;    border-color: var(--teal); }
.ripple-2 { width: 140px; height: 140px; animation-delay: 0.15s; border-color: rgba(0, 245, 196, 0.8); }
.ripple-3 { width: 200px; height: 200px; animation-delay: 0.3s;  border-color: rgba(100, 220, 255, 0.6); }
.ripple-4 { width: 260px; height: 260px; animation-delay: 0.45s; border-color: var(--magenta); box-shadow: 0px 0px 16px rgba(204, 68, 255, 0.8), 0px 0px 40px rgba(204, 68, 255, 0.3); }
.ripple-5 { width: 320px; height: 320px; animation-delay: 0.6s;  border-color: rgba(204, 68, 255, 0.6); box-shadow: 0px 0px 14px rgba(204, 68, 255, 0.5); }
.ripple-6 { width: 380px; height: 380px; animation-delay: 0.75s; border-color: rgba(204, 68, 255, 0.3); box-shadow: 0px 0px 12px rgba(204, 68, 255, 0.3); }

.ripple-active .ripple-1 { width: 120px; height: 120px; }
.ripple-active .ripple-2 { width: 240px; height: 240px; }
.ripple-active .ripple-3 { width: 360px; height: 360px; }
.ripple-active .ripple-4 { width: 460px; height: 460px; }
.ripple-active .ripple-5 { width: 560px; height: 560px; }
.ripple-active .ripple-6 { width: 650px; height: 650px; }

/* ===== ELIMINATED (kept for completeness) ===== */

.eliminated-overlay { flex: 1; display: flex; flex-direction: column; width: 100%; }
.eliminated-content { flex: 1; display: flex; flex-direction: column; justify-content: center; padding: 0px 28px; }
.elim-session { margin-bottom: 16px; }
.elim-title { font-family: "Rajdhani", sans-serif; font-size: 88px; font-weight: 900; letter-spacing: -3px; line-height: 0.85; color: var(--white); }
.elim-stats { display: flex; flex-direction: row; gap: 48px; margin-bottom: 56px; }
.elim-stat-val { font-family: "Rajdhani", sans-serif; font-size: 36px; font-weight: 900; }
.elim-stat-val-teal { color: var(--teal); }
.elim-stat-val-white { color: var(--white); }

.btn-outline-subtle {
  width: 100%;
  height: 44px;
  background-color: transparent;
  border: 1px solid #1a1a1a;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 2px;
}
.btn-outline-subtle-text {
  font-family: "Rajdhani", sans-serif;
  color: #333333;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 4px;
}

/* ===== GLITCH ===== */

/* Burst span shrunk to ~2% of cycle — quick glitch, long silence.
   Duration is long (4-8s per strip) so bursts stay rare while keeping their original snap. */
@keyframes glitch-flash-teal {
  0%,   94%   { opacity: 0;   transform: translateX(0px) translateY(0px); }
  94.5%       { opacity: 0.9; transform: translateX(-3px) translateY(1px); }
  95.5%       { opacity: 0.9; transform: translateX(-3px) translateY(1px); }
  96%, 100%   { opacity: 0;   transform: translateX(0px) translateY(0px); }
}

@keyframes glitch-flash-mag {
  0%,   94%   { opacity: 0;   transform: translateX(0px) translateY(0px); }
  94.5%       { opacity: 0.8; transform: translateX(3px) translateY(-1px); }
  95.5%       { opacity: 0.8; transform: translateX(3px) translateY(-1px); }
  96%, 100%   { opacity: 0;   transform: translateX(0px) translateY(0px); }
}

@keyframes glitch-flash-red {
  0%,   94%   { opacity: 0;   transform: translateX(0px) translateY(0px); }
  94.5%       { opacity: 0.9; transform: translateX(-3px) translateY(1px); }
  95.5%       { opacity: 0.9; transform: translateX(-3px) translateY(1px); }
  96%, 100%   { opacity: 0;   transform: translateX(0px) translateY(0px); }
}

.glitch-container {
  position: relative;
}

.glitch-strip {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  opacity: 0;
}

.glitch-teal-1 { color: #00f5c4; clip-path: inset(15% 0 65% 0); animation: glitch-flash-teal 5.3s infinite; }
.glitch-teal-2 { color: #00f5c4; clip-path: inset(50% 0 30% 0); animation: glitch-flash-teal 7.1s 1.2s infinite; }
.glitch-teal-3 { color: #00f5c4; clip-path: inset(5% 0 80% 0);  animation: glitch-flash-teal 6.4s 2.7s infinite; }

.glitch-mag-1 { color: #cc44ff; clip-path: inset(60% 0 20% 0); animation: glitch-flash-mag 4.8s 0.6s infinite; }
.glitch-mag-2 { color: #cc44ff; clip-path: inset(30% 0 50% 0); animation: glitch-flash-mag 5.9s 3.3s infinite; }
.glitch-mag-3 { color: #cc44ff; clip-path: inset(75% 0 5% 0);  animation: glitch-flash-mag 7.7s 1.8s infinite; }

.glitch-red-1 { color: #FF2D55; clip-path: inset(15% 0 65% 0); animation: glitch-flash-red 5.3s infinite; }
.glitch-red-2 { color: #FF2D55; clip-path: inset(50% 0 30% 0); animation: glitch-flash-red 7.1s 1.2s infinite; }
.glitch-red-3 { color: #FF2D55; clip-path: inset(5% 0 80% 0);  animation: glitch-flash-red 6.4s 2.7s infinite; }

/* ===== AMBIENT GLOW ===== */

@keyframes ambient-rotate {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@keyframes ambient-breathe {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.6; }
}

.ambient-glow {
  position: absolute;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  z-index: 0;
  opacity: 0;
  transition: opacity 0.6s ease;
  overflow: hidden;
}

.ambient-glow-gradient {
  position: absolute;
  background: conic-gradient(#00F5C4, #00ffdd, #CC44FF, #ee55ff, #CC44FF, #00ffdd, #00F5C4);
  animation:
    ambient-rotate 3s linear infinite,
    ambient-breathe 3s ease-in-out infinite;
}

.ambient-glow-gradient-red {
  position: absolute;
  background: conic-gradient(#FF2D55, #ff4466, #CC44FF, #ee55ff, #CC44FF, #ff4466, #FF2D55);
  animation:
    ambient-rotate 3s linear infinite,
    ambient-breathe 3s ease-in-out infinite;
}

.ambient-glow-gradient-teal {
  position: absolute;
  background: conic-gradient(#00F5C4, #00ffdd, #00F5C4, #00ffaa, #00F5C4);
  animation:
    ambient-rotate 4s linear infinite,
    ambient-breathe 3s ease-in-out infinite;
}

.ambient-glow-feather {
  position: absolute;
  --paddings: 8px;
  top: var(--paddings);
  left: var(--paddings);
  right: var(--paddings);
  bottom: var(--paddings);
  background-color: var(--black);
  border-radius: 30px;
  z-index: 1;
}

/* ===== SURVIVED / SEASON ENDED ===== */

@keyframes win-ripple {
  0%   { transform: scale(0); opacity: 0.6; }
  100% { transform: scale(1); opacity: 0; }
}

.survived-overlay {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
}

.survived-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0px 28px;
}

.survived-title {
  font-family: "Rajdhani", sans-serif;
  font-size: 92px;
  font-weight: 900;
  letter-spacing: -4px;
  line-height: 0.88;
  color: var(--teal);
}

.survived-block {
  overflow: hidden;
  margin-bottom: 48px;
}

.win-ripple-wrap {
  position: absolute;
  left: 50%;
  top: 42%;
}

.win-ring {
  position: absolute;
  border-radius: 9999px;
  border: 1px solid rgba(0, 245, 196, 0.5);
  box-shadow: 0px 0px 12px rgba(0, 245, 196, 0.3);
}

.win-ring-1 { width: 200px; height: 200px; margin-left: -100px; margin-top: -100px; animation: win-ripple 2s ease-out 0.8s infinite; }
.win-ring-2 { width: 320px; height: 320px; margin-left: -160px; margin-top: -160px; animation: win-ripple 2s ease-out 1.1s infinite; }
.win-ring-3 { width: 440px; height: 440px; margin-left: -220px; margin-top: -220px; animation: win-ripple 2s ease-out 1.4s infinite; }
.win-ring-4 { width: 560px; height: 560px; margin-left: -280px; margin-top: -280px; animation: win-ripple 2s ease-out 1.7s infinite; }

.win-stats {
  width: 100%;
  display: flex;
  flex-direction: column;
  margin-bottom: 40px;
}

.win-stat-row {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: baseline;
  padding: 14px 0;
  border-bottom: 1px solid #0d0d0d;
}

.win-stat-row-first {
  border-top: 1px solid #0d0d0d;
}

.win-stat-label {
  font-family: "Rajdhani", sans-serif;
  font-size: 9px;
  color: var(--muted);
  letter-spacing: 3px;
}

.win-stat-val {
  font-family: "Rajdhani", sans-serif;
  font-size: 22px;
  font-weight: 700;
  color: var(--white);
}

.win-stat-val-teal {
  color: var(--teal);
}

.win-stat-val-big {
  font-size: 32px;
}

/* ===== DETAILS / PAST SEASONS ===== */

.details-row {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: baseline;
  padding: 18px 0;
  border-bottom: 1px solid #0d0d0d;
}

/* ===== CHALLENGE OVERLAYS (ported from challenges/challenge.css) ===== */

.challenge-root {
  position: relative;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 32px;
}

.challenge-label {
  font-family: "Rajdhani", sans-serif;
  font-size: 10px;
  color: var(--magenta);
  letter-spacing: 4px;
  margin-bottom: 8px;
}

.challenge-title {
  font-family: "Rajdhani", sans-serif;
  font-size: 52px;
  font-weight: 900;
  letter-spacing: -1px;
  line-height: 1;
  color: var(--white);
  margin-bottom: 24px;
}

/* Bubble level */
.level-arena {
  position: relative;
  width: 260px;
  height: 260px;
  border-radius: 130px;
  margin-bottom: 8px;
}

.level-crosshair-h {
  position: absolute;
  top: 129px;
  left: 20px;
  right: 20px;
  height: 1px;
  background: linear-gradient(to right, transparent, #1a1a1a 20%, #1a1a1a 80%, transparent);
}

.level-crosshair-v {
  position: absolute;
  left: 129px;
  top: 20px;
  bottom: 20px;
  width: 1px;
  background: linear-gradient(to bottom, transparent, #1a1a1a 20%, #1a1a1a 80%, transparent);
}

.level-ring {
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.03);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.level-target {
  position: absolute;
  width: 60px;
  height: 60px;
  border-radius: 30px;
  border: 1px solid rgba(0, 245, 196, 0.2);
  left: 100px;
  top: 100px;
}

.level-target-inner {
  position: absolute;
  width: 24px;
  height: 24px;
  border-radius: 12px;
  border: 1px solid rgba(0, 245, 196, 0.4);
  left: 118px;
  top: 118px;
}

.level-bubble-wrap {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  overflow: hidden;
}

.level-bubble {
  position: absolute;
  left: 110px;
  top: 110px;
  width: 40px;
  height: 40px;
  border-radius: 20px;
  background: radial-gradient(circle at 35% 35%, rgba(204, 68, 255, 0.9), rgba(204, 68, 255, 0.3));
  border: 2px solid var(--magenta);
  box-shadow: 0 0 16px rgba(204, 68, 255, 0.6), 0 0 40px rgba(204, 68, 255, 0.2);
}

.level-bubble-leveled {
  background: radial-gradient(circle at 35% 35%, rgba(0, 245, 196, 0.9), rgba(0, 245, 196, 0.3));
  border-color: var(--teal);
  box-shadow: 0 0 18px rgba(0, 245, 196, 0.7), 0 0 44px rgba(0, 245, 196, 0.3);
  /* no animation here — keeps bubble-wander going */
}

/* Demo-only: bubble travels a scripted path through all zones
   (leveled → normal → danger → normal → leveled …) */
@keyframes bubble-wander {
  0%   { transform: translate(8px, 10px); }      /* leveled zone (dist ~13) */
  10%  { transform: translate(28px, 18px); }     /* normal (dist ~33) */
  18%  { transform: translate(55px, 35px); }     /* danger (dist ~65) */
  28%  { transform: translate(35px, 8px); }      /* normal (dist ~36) */
  38%  { transform: translate(10px, -8px); }     /* leveled (dist ~13) */
  46%  { transform: translate(-5px, -12px); }    /* leveled (dist ~13) */
  55%  { transform: translate(-28px, -32px); }   /* normal (dist ~43) */
  63%  { transform: translate(-55px, -25px); }   /* danger (dist ~60) */
  72%  { transform: translate(-38px, -5px); }    /* normal (dist ~38) */
  82%  { transform: translate(-15px, 15px); }    /* normal (dist ~21) */
  92%  { transform: translate(-2px, 4px); }      /* leveled (dist ~4) */
  100% { transform: translate(8px, 10px); }      /* back to start (leveled) */
}

.level-bubble-wander {
  animation: bubble-wander 9s ease-in-out infinite;
}

@keyframes level-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(0, 245, 196, 0), 0 0 16px rgba(0, 245, 196, 0.4); }
  50%      { box-shadow: 0 0 0 8px rgba(0, 245, 196, 0), 0 0 40px rgba(0, 245, 196, 0.9); }
}

.level-status {
  font-family: "Rajdhani", sans-serif;
  font-size: 11px;
  letter-spacing: 4px;
  color: #444;
  margin-top: 12px;
}

/* Shake challenge */
.shake-num {
  font-family: "Rajdhani", sans-serif;
  font-size: 88px;
  font-weight: 700;
  line-height: 1;
  color: var(--teal);
}

.shake-sub-label {
  font-family: "Rajdhani", sans-serif;
  font-size: 9px;
  color: #444;
  letter-spacing: 3px;
}

.shake-progress-track {
  width: 180px;
  height: 4px;
  background-color: #111;
  border-radius: 2px;
}

.shake-progress-fill {
  height: 4px;
  border-radius: 2px;
  background: linear-gradient(to right, #00F5C4, #CC44FF);
}

@keyframes shake-icon-idle {
  0%, 100% { transform: rotate(-4deg); }
  50%      { transform: rotate(4deg); }
}

.shake-phone-icon {
  animation: shake-icon-idle 1.2s ease-in-out infinite;
}

@keyframes wave-pulse {
  0%, 100% { opacity: 0.25; }
  50%      { opacity: 1; }
}

.shake-wave {
  animation: wave-pulse 0.8s ease-in-out infinite;
}

.shake-wave-1 { animation-delay: 0s; }
.shake-wave-2 { animation-delay: 0.15s; }
.shake-wave-3 { animation-delay: 0.3s; }

/* Tap challenge */
.tap-ring {
  position: relative;
  width: 200px;
  height: 200px;
  border-radius: 100px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--teal);
  box-shadow: 0 0 20px rgba(0, 245, 196, 0.3), 0 0 60px rgba(0, 245, 196, 0.1);
  transition: transform 100ms ease-out, box-shadow 100ms ease-out;
}

.tap-ring-active {
  transform: scale(0.94);
  box-shadow: 0 0 60px rgba(0, 245, 196, 0.9), 0 0 120px rgba(0, 245, 196, 0.35);
}

/* Ripple at tap point — expanding ring that fades out */
@keyframes tap-ripple-burst {
  0%   { transform: translate(-50%, -50%) scale(0.2); opacity: 0.9; border-width: 2.5px; }
  60%  { opacity: 0.35; border-width: 1.5px; }
  100% { transform: translate(-50%, -50%) scale(1.7); opacity: 0; border-width: 0.5px; }
}
.tap-ripple {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  border: 2px solid var(--teal);
  pointer-events: none;
  animation: tap-ripple-burst 480ms ease-out forwards;
}

@keyframes shake-impact {
  0%    { transform: translate(-14px, 5px); }
  20%   { transform: translate(14px, -5px); }
  40%   { transform: translate(-10px, 7px); }
  60%   { transform: translate(10px, -4px); }
  80%   { transform: translate(-5px, 2px); }
  100%  { transform: translate(0, 0); }
}
.shake-layer {}
.shake-layer-active {
  animation: shake-impact 264ms linear forwards;
}

@keyframes shake-icon-active {
  0%, 100% { transform: rotate(-12deg); }
  50%      { transform: rotate(12deg); }
}
.shake-phone-icon-active {
  animation: shake-icon-active 0.2s ease-in-out infinite;
}

@keyframes level-danger-pulse {
  0%, 100% { box-shadow: 0 0 8px rgba(255, 45, 85, 0.4); }
  50%      { box-shadow: 0 0 24px rgba(255, 45, 85, 0.9); }
}
.level-bubble-danger {
  background: radial-gradient(circle at 35% 35%, rgba(255, 45, 85, 0.9), rgba(255, 45, 85, 0.3));
  border-color: #FF2D55;
  box-shadow: 0 0 18px rgba(255, 45, 85, 0.7), 0 0 44px rgba(255, 45, 85, 0.3);
  /* no animation here — keeps bubble-wander going */
}

.tap-count {
  font-family: "Rajdhani", sans-serif;
  font-size: 56px;
  font-weight: 700;
  line-height: 1;
  color: var(--teal);
}

.tap-count-label {
  font-family: "Rajdhani", sans-serif;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 3px;
  color: #444;
}

/* Demo-only: tap counter pulses to simulate tapping */
@keyframes tap-pulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(0.93); box-shadow: 0 0 60px rgba(0, 245, 196, 0.9); }
}

.tap-ring-pulsing {
  animation: tap-pulse 0.55s ease-in-out infinite;
}

/* Shared growing timer */
.shake-grow-timer {
  font-family: "Rajdhani", sans-serif;
  font-size: 48px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -2px;
  color: var(--teal);
}

@keyframes grow-timer {
  0%   { transform: scale(0.4); color: var(--teal); }
  70%  { transform: scale(1.6); color: var(--magenta); }
  100% { transform: scale(2.0); color: #FF2D55; opacity: 0.6; }
}

.shake-grow-timer-anim {
  animation: grow-timer 6s linear infinite;
}

}

/* Continuous glitch (mobile uses JS-driven remount; we keep it always on) */
@scope (.app-canvas) {
  .glitch-strip { animation-iteration-count: infinite !important; }
}