/* ARROUT Master Stylesheet */

:root {
  --bg-canvas: #FAF6F0;
  --text-navy: #152642;
  --text-slate: #1E293B;
  --text-muted: #64748B;
  --text-light-muted: #8C9CAE;
  --accent-purple: #8B85F8;
  --accent-purple-light: #ECE8FD;
  --accent-mint: #34D399;
  --accent-peach: #F6AD55;
  --accent-gold: #F59E0B;
  --arrow-navy: #152642;
  --arrow-coral-red: #F87171;
  --font-serif: 'Libre Baskerville', Georgia, 'Segoe UI', Roboto, sans-serif;
  --font-sans: 'Libre Baskerville', Georgia, 'Segoe UI', Roboto, sans-serif;
  --clay-shadow: 0 10px 24px -4px rgba(160, 175, 200, 0.28), 0 4px 8px -2px rgba(160, 175, 200, 0.16);
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

body {
  background-color: #EDE8E0;
  color: var(--text-slate);
  font-family: var(--font-sans);
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow-x: hidden;
}

body.screen-home-active {
  overflow: hidden;
}

.mobile-app-frame {
  width: 100%;
  max-width: 440px;
  min-height: 100vh;
  height: 100vh;
  height: 100dvh;
  background-color: var(--bg-canvas);
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  box-shadow: 0 15px 45px rgba(0, 0, 0, 0.12);
}

.mobile-app-frame.screen-home-active {
  height: 100vh;
  height: 100dvh;
  max-height: 100vh;
  max-height: 100dvh;
  overflow: hidden;
}

@media (min-width: 460px) {
  .mobile-app-frame {
    min-height: auto;
    height: 840px;
    max-height: 94vh;
    border-radius: 40px;
    margin: 20px 0;
  }
}

.bg-flora-decor {
  position: absolute;
  top: 30px;
  right: -25px;
  width: 220px;
  height: 220px;
  pointer-events: none;
  opacity: 0.7;
  z-index: 1;
}

/* Header (Home View) */
.app-header {
  height: 68px;
  padding: 12px 20px 0 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: transparent;
  z-index: 10;
}

.brand-block {
  display: flex;
  align-items: center;
  gap: 12px;
}

.brand-title {
  font-family: var(--font-serif);
  font-size: 1.55rem;
  font-weight: 800;
  letter-spacing: 5px;
  color: var(--text-navy);
  line-height: 1.1;
}

.brand-subtitle {
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 2.5px;
  color: var(--text-light-muted);
  margin-top: 2px;
}

.header-right {
  display: flex;
  align-items: center;
  gap: 10px;
}

.coin-pill {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #FFF5E8;
  border: 1px solid rgba(245, 158, 11, 0.18);
  box-shadow: 0 2px 8px rgba(245, 158, 11, 0.1);
  padding: 6px 14px;
  border-radius: 24px;
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--text-navy);
}

.coin-icon-gold {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: linear-gradient(135deg, #FBBF24, #D97706);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #FFF;
  font-size: 0.65rem;
}

.avatar-thumbnail {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #E8EEF8;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.app-viewport {
  flex: 1;
  position: relative;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 8px 18px 84px 18px;
  z-index: 5;
}

body.screen-home-active .app-viewport,
.mobile-app-frame.screen-home-active .app-viewport {
  overflow-y: auto;
  overflow-x: hidden;
  padding: 8px 18px 88px 18px;
  display: flex;
  flex-direction: column;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}

body.screen-home-active .app-viewport::-webkit-scrollbar,
.mobile-app-frame.screen-home-active .app-viewport::-webkit-scrollbar,
.app-viewport::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

.app-screen {
  display: none;
  min-height: 100%;
  flex-direction: column;
}

.app-screen.active {
  display: flex;
  animation: screenFadeIn 0.22s ease-out;
}

#screen-home.active {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 14px;
  height: auto;
  min-height: 0;
  overflow: visible;
}

@keyframes screenFadeIn {
  from { opacity: 0; transform: translateY(5px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Welcome Section */
.welcome-section {
  margin: 4px 0 0 0;
  flex-shrink: 0;
}

.welcome-label {
  font-size: 0.95rem;
  color: #8C9CAE;
  font-weight: 500;
  margin-bottom: 2px;
}

.welcome-heading {
  font-family: var(--font-serif);
  font-size: 2.15rem;
  font-weight: 800;
  color: var(--text-navy);
  letter-spacing: -0.5px;
  line-height: 1.15;
  margin-bottom: 6px;
}

.welcome-desc {
  font-size: 0.88rem;
  color: #64748B;
  line-height: 1.4;
  max-width: 320px;
}

/* Featured Play Card */
.featured-play-card {
  position: relative;
  background: linear-gradient(135deg, #FBF0F4 0%, #F5F1FD 45%, #EEF6FC 75%, #F0FBF6 100%);
  border: 1.5px solid rgba(255, 255, 255, 0.85);
  box-shadow: var(--clay-shadow);
  border-radius: 28px;
  padding: 18px 22px;
  margin-bottom: 0;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  overflow: hidden;
  transition: transform 0.16s;
  flex-shrink: 0;
}

.featured-play-card:active { transform: scale(0.98); }

.featured-left {
  display: flex;
  flex-direction: column;
  z-index: 2;
  max-width: 58%;
}

.featured-tag {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 2px;
  color: #5A6B82;
  text-transform: uppercase;
  margin-bottom: 4px;
}

.featured-title {
  font-family: var(--font-serif);
  font-size: 2.1rem;
  font-weight: 800;
  color: var(--text-navy);
  letter-spacing: -0.5px;
  margin-bottom: 6px;
}

.featured-sub {
  font-size: 0.78rem;
  color: #64748B;
  line-height: 1.35;
  margin-bottom: 12px;
}

.circle-arrow-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #9D96FA;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #FFFFFF;
  box-shadow: 0 4px 12px rgba(157, 150, 250, 0.45);
}

.featured-right-illustration {
  position: relative;
  width: 120px;
  height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 2-Column Mode Cards Grid */
.modes-grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 0;
  flex-shrink: 0;
}

.mode-grid-card {
  position: relative;
  height: 122px;
  border-radius: 24px;
  border: 1.5px solid rgba(255, 255, 255, 0.85);
  box-shadow: var(--clay-shadow);
  padding: 14px 14px 12px 14px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  cursor: pointer;
  overflow: hidden;
  transition: transform 0.16s;
}

.mode-grid-card:active { transform: scale(0.97); }

.card-pvp { background: linear-gradient(135deg, #F4F1FD 0%, #E9E4FC 100%); }
.card-daily { background: linear-gradient(135deg, #EBF8F2 0%, #DCF3E8 100%); }
.card-tournament { background: linear-gradient(135deg, #FFF7EB 0%, #FEEBD5 100%); }
.card-levels { background: linear-gradient(135deg, #EDF5FD 0%, #DDEBFA 100%); }
.card-shop { background: linear-gradient(135deg, #F6F1FE 0%, #EDE4FD 100%); }
.card-leaderboard { background: linear-gradient(135deg, #FFF1EE 0%, #FCE4DF 100%); }
.card-profile { background: linear-gradient(135deg, #EDF5FE 0%, #DFECFB 100%); }
.card-settings { background: linear-gradient(135deg, #EDFAF4 0%, #DEF3E8 100%); }

.card-top-content {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.card-3d-icon {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.card-heading {
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: 0.92rem;
  color: var(--text-navy);
  line-height: 1.2;
}

.card-desc-text {
  font-size: 0.68rem;
  color: #7E8B9B;
  font-weight: 500;
}

.card-arrow-circle {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #FFF;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #5C6E87;
  font-size: 0.72rem;
  margin-left: auto;
}

.card-bottom-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
}

.card-arrow-circle {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #5C6E87;
  font-size: 0.72rem;
  margin-left: auto;
}

/* Floating Bottom Navigation */
.floating-bottom-nav {
  position: absolute;
  bottom: 12px;
  left: 20px;
  right: 20px;
  height: 64px;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.9);
  border-radius: 32px;
  display: flex;
  align-items: center;
  justify-content: space-around;
  box-shadow: 0 10px 28px rgba(140, 160, 190, 0.25);
  z-index: 50;
  padding: 0 8px;
}

.nav-pill-btn {
  background: none;
  border: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  color: #8C9CAE;
  font-size: 0.68rem;
  font-weight: 700;
  cursor: pointer;
  padding: 6px 12px;
  border-radius: 20px;
}

.nav-pill-btn.active { color: var(--text-navy); }
.nav-pill-btn.active .nav-icon-wrapper {
  background: #ECE8FD;
  color: #6C5CE7;
  padding: 4px 14px;
  border-radius: 14px;
}

/* ==========================================================================
   LEVEL PUZZLE SCREEN (Exact match to screenshot 2)
   ========================================================================== */
#screen-puzzle {
  padding-bottom: 24px;
}

.level-top-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 48px;
  padding: 4px 0 8px 0;
  margin-bottom: 8px;
  width: 100%;
}

.btn-circle-action {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #FFFFFF;
  border: 1px solid #E8EEF8;
  box-shadow: 0 4px 12px rgba(160, 175, 200, 0.22);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-navy);
  font-size: 1.15rem;
  cursor: pointer;
  flex-shrink: 0;
}

.level-title-banner {
  display: flex;
  align-items: center;
  gap: 6px;
}

.level-title-text {
  font-family: var(--font-serif);
  font-size: 1.45rem;
  font-weight: 800;
  color: var(--text-navy);
}

.sparkle-icon {
  color: #9D96FA;
  font-size: 0.85rem;
}

/* Sub-header Bar (Remaining Pill, Hearts, Diff Tag) */
.level-sub-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  padding: 0 4px;
  width: 100%;
}

.remaining-pill {
  display: flex;
  align-items: center;
  gap: 6px;
  background: #F1EFFE;
  border: 1px solid #E4E0FB;
  border-radius: 18px;
  padding: 6px 14px;
  font-size: 0.88rem;
  font-weight: 800;
  color: #6C5CE7;
}

.hearts-container {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 1.35rem;
  min-width: 110px;
}

.heart-full { color: #F87171; filter: drop-shadow(0 2px 4px rgba(248, 113, 113, 0.3)); }
.heart-empty { color: #CBD5E1; opacity: 0.6; }

.diff-badge-pill {
  background: #F1EFFE;
  color: #8B85F8;
  font-size: 0.78rem;
  font-weight: 800;
  padding: 6px 16px;
  border-radius: 18px;
  border: 1px solid #E4E0FB;
}

/* Dotted Board Card */
.puzzle-board-card {
  position: relative;
  width: 100%;
  aspect-ratio: 0.72;
  max-height: 520px;
  background: #FFFFFF;
  border-radius: 30px;
  border: 2px solid #F1ECE4;
  box-shadow: 0 14px 34px rgba(180, 195, 215, 0.35);
  margin: 0 auto 16px auto;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.board-svg-canvas {
  width: 100%;
  height: 100%;
  display: block;
}

.svg-grid-dots circle {
  transition: opacity 0.3s ease, fill 0.3s ease;
}

/* Arrow Path Styling - Crisp Thick Strokes */
.arrow-path {
  fill: none !important;
  stroke: var(--arrow-navy) !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
  cursor: pointer;
  transition: stroke 0.15s, filter 0.15s;
}

.arrow-head {
  fill: var(--arrow-navy) !important;
  stroke: none !important;
  cursor: pointer;
  transition: fill 0.15s;
}

/* Blocked Arrow (Coral Red like in Screenshot 2) */
.arrow-group.blocked .arrow-path {
  stroke: var(--arrow-coral-red) !important;
  filter: drop-shadow(0 0 6px rgba(248, 113, 113, 0.5));
}
.arrow-group.blocked .arrow-head {
  fill: var(--arrow-coral-red) !important;
}

.arrow-group.blocked {
  animation: arrowBlockedShake 0.3s ease-in-out;
}

@keyframes arrowBlockedShake {
  0%, 100% { transform: translate(0, 0); }
  20% { transform: translate(-4px, 0); }
  40% { transform: translate(4px, 0); }
  60% { transform: translate(-3px, 0); }
  80% { transform: translate(3px, 0); }
}

.arrow-group.hint-pulse .arrow-path {
  stroke: #F59E0B !important;
  filter: drop-shadow(0 0 10px #F59E0B);
}
.arrow-group.hint-pulse .arrow-head {
  fill: #F59E0B !important;
}

/* Bottom Powerups Bar (Floating Bulb & Ruler) */
.puzzle-powerups-bottom {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 28px;
  margin-top: 4px;
}

.powerup-circle-btn {
  position: relative;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: #FFFFFF;
  border: 1.5px solid #EAEFF8;
  box-shadow: 0 8px 22px rgba(160, 175, 200, 0.32);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.15s;
}

.powerup-circle-btn:active { transform: scale(0.94); }

.powerup-counter-badge {
  position: absolute;
  top: -2px;
  right: -2px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #8B85F8;
  color: #FFF;
  font-size: 0.75rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #FFF;
  box-shadow: 0 2px 6px rgba(139, 133, 248, 0.4);
}

/* Level Grid Cards */
.levels-clay-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.level-clay-card {
  background: #FFF;
  border-radius: 20px;
  box-shadow: var(--clay-shadow);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border: 2px solid transparent;
  transition: transform 0.15s;
}

.level-clay-card.cleared {
  background: linear-gradient(135deg, #FFF9EB, #FEF0CD);
  border-color: #FBBF24;
}

.lvl-card-num {
  font-family: var(--font-serif);
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--text-navy);
}

.lvl-card-stars {
  font-size: 0.78rem;
  margin-top: 4px;
}

/* Modals */
.app-modal {
  position: absolute;
  inset: 0;
  background: rgba(21, 38, 66, 0.45);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
  z-index: 100;
  backdrop-filter: blur(8px);
}

.app-modal.open { display: flex; }

.modal-clay-card {
  width: 100%;
  max-width: 360px;
  background: #FFF;
  border-radius: 32px;
  padding: 28px 24px;
  text-align: center;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25);
}

.modal-title-serif {
  font-family: var(--font-serif);
  font-size: 1.8rem;
  font-weight: 800;
  color: var(--text-navy);
  margin-bottom: 12px;
}

.modal-stats-soft {
  background: #FAF6F0;
  border-radius: 20px;
  padding: 16px;
  margin-bottom: 20px;
  display: flex;
  justify-content: space-around;
}

.btn-primary-clay {
  background: #152642;
  color: #FFF;
  border: none;
  width: 100%;
  padding: 15px;
  border-radius: 18px;
  font-weight: 800;
  font-size: 1rem;
  cursor: pointer;
  box-shadow: 0 8px 18px rgba(21, 38, 66, 0.25);
}

.btn-back-soft {
  background: #FFF;
  border: 1px solid rgba(255, 255, 255, 0.8);
  box-shadow: var(--clay-shadow);
  color: var(--text-navy);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  cursor: pointer;
  font-weight: 700;
}

.screen-header-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  padding-top: 6px;
}

.screen-main-title {
  font-family: var(--font-serif);
  font-size: 1.45rem;
  font-weight: 800;
  color: var(--text-navy);
}

.diff-pill-bar {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
  overflow-x: auto;
}

.diff-filter-pill {
  flex: 1;
  text-align: center;
  background: #FFF;
  border: 1px solid rgba(255, 255, 255, 0.8);
  box-shadow: 0 4px 10px rgba(160, 175, 200, 0.15);
  padding: 10px 0;
  border-radius: 16px;
  font-size: 0.8rem;
  font-weight: 800;
  color: #8C9CAE;
  cursor: pointer;
}

.diff-filter-pill.active {
  background: #152642;
  color: #FFF;
  box-shadow: 0 6px 14px rgba(21, 38, 66, 0.25);
}

.radar-spinner-soft {
  width: 90px;
  height: 90px;
  border-radius: 50%;
  border: 4px solid #E2E8F0;
  border-top-color: #8B85F8;
  margin-bottom: 20px;
}

.radar-spinner-soft.searching {
  animation: radarSpin 1s infinite linear;
}

@keyframes radarSpin {
  to { transform: rotate(360deg); }
}

.global-toast {
  position: absolute;
  bottom: 84px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: rgba(21, 38, 66, 0.95);
  color: #FFF;
  padding: 10px 22px;
  border-radius: 24px;
  font-size: 0.84rem;
  font-weight: 700;
  box-shadow: 0 10px 25px rgba(21, 38, 66, 0.35);
  opacity: 0;
  pointer-events: none;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 120;
  white-space: nowrap;
}

.global-toast.visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ==========================================================================
   CINEMATIC INTRO SCREEN (From Arrout (5).html with Website Theme Colors)
   ========================================================================== */
#intro {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 50%, var(--accent-purple-light), var(--bg-canvas) 70%);
  z-index: 1000;
  color: var(--text-navy);
  overflow: hidden;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.45s ease-out;
}

#gd {
  position: absolute;
  inset: 0;
  opacity: 0;
  background-image: radial-gradient(#CBD5E1 1.6px, transparent 1.7px);
  background-size: 28px 28px;
  -webkit-mask-image: radial-gradient(circle, #000, transparent 75%);
  mask-image: radial-gradient(circle, #000, transparent 75%);
  animation: gdi 1s forwards;
  pointer-events: none;
}

@keyframes gdi {
  to { opacity: 1; }
}

#bd {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

#itl {
  position: absolute;
  top: calc(46% - 24px);
  width: 100%;
  text-align: center;
  font-family: 'Libre Baskerville', Georgia, serif;
  font-size: 46px;
  font-weight: 700;
  letter-spacing: 4px;
  text-indent: 4px;
  pointer-events: none;
  animation: glow 1.4s 2.2s ease-in-out 2;
}

.lt {
  display: inline-block;
  opacity: 0;
  color: #3F8CF0;
  animation: slin 0.6s var(--d) cubic-bezier(0.2, 1.2, 0.4, 1) both, wave 0.5s calc(var(--d) + 1.3s) ease-in-out;
}

@keyframes slin {
  from {
    opacity: 0;
    transform: translate(var(--x), var(--y));
    filter: blur(8px);
  }
  to {
    opacity: 1;
    transform: none;
    filter: blur(0);
  }
}

@keyframes wave {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-12px); }
}

@keyframes glow {
  0%, 100% { filter: drop-shadow(0 0 0 transparent); }
  50% { filter: drop-shadow(0 0 16px rgba(63, 140, 240, 0.4)); }
}

#tag {
  position: absolute;
  top: calc(46% + 64px);
  width: 100%;
  text-align: center;
  color: var(--text-muted);
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 4px;
  text-transform: uppercase;
  opacity: 0;
  animation: fin 0.6s 3.4s forwards;
  pointer-events: none;
}

@keyframes fin {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}



/* ===================== ARROUT in-level effects ===================== */

/* Moving arrow (accelerating glide off the board) */
.arrow-group.moving .arrow-path { stroke: #6366F1 !important; transition: none; }
.arrow-group.moving .arrow-head { fill: #6366F1 !important; transition: none; }

/* Cheer popup at 25 / 50 / 75 percent */
.cheer-popup {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  height: 54px;
  opacity: 0;
  pointer-events: none;
}
.cheer-popup svg { width: 46px; height: 46px; flex: none; }
.cheer-badge {
  background: linear-gradient(135deg, #ff8a3d, #ff4d8d);
  color: #fff;
  border-radius: 10px;
  padding: 4px 10px;
  font-size: 17px;
  font-weight: 800;
}
.cheer-text { font-size: 17px; font-weight: 800; color: var(--text-navy); }
.cheer-popup.go { animation: cheerPop 2.4s ease-out; }
.cheer-popup.go svg { animation: cheerJump 0.6s ease-in-out 3; }
@keyframes cheerPop {
  0% { opacity: 0; transform: translateY(-10px); }
  12% { opacity: 1; transform: none; }
  85% { opacity: 1; }
  100% { opacity: 0; }
}
@keyframes cheerJump { 50% { transform: translateY(-6px) rotate(10deg) scale(1.1); } }

/* Wrong tap: board shake + red edge glow */
.puzzle-board-card.bad { animation: boardShake 0.4s, boardFlash 0.6s; }
@keyframes boardShake {
  0%, 100% { transform: none; }
  20% { transform: translateX(-9px); }
  40% { transform: translateX(8px); }
  60% { transform: translateX(-6px); }
  80% { transform: translateX(4px); }
}
@keyframes boardFlash {
  0% { box-shadow: inset 0 0 70px rgba(248, 113, 113, 0.9), 0 14px 34px rgba(180, 195, 215, 0.35); }
  100% { box-shadow: inset 0 0 0 rgba(248, 113, 113, 0), 0 14px 34px rgba(180, 195, 215, 0.35); }
}

/* Result modal pops in */
.app-modal.open .modal-clay-card { animation: modalPop 0.6s cubic-bezier(0.2, 1.5, 0.4, 1); }
@keyframes modalPop { from { transform: scale(0.3); opacity: 0; } to { transform: none; opacity: 1; } }

/* Board must not scroll the page while panning / pinching */
.puzzle-board-card, #game-bending-board { touch-action: none; }


/* ===== Old-game look: no square board card, Arrout hearts and tools ===== */
.puzzle-board-card {
  background: transparent;
  border: 0;
  box-shadow: none;
  border-radius: 0;
  aspect-ratio: auto;
  max-height: none;
  flex: 1;
  min-height: 300px;
  margin: 0 0 6px 0;
}
#screen-puzzle { min-height: 100%; }
#game-bending-board { height: 100%; }

.life-heart { width: 27px; height: 27px; display: block; }
.hearts-container { gap: 6px; font-size: 0; }

.puzzle-powerups-bottom { gap: 44px; padding: 8px 0 12px; }
.powerup-circle-btn { width: 62px; height: 62px; position: relative; }
.tool-emoji { font-size: 28px; line-height: 1; }
.powerup-circle-btn.tool-on { box-shadow: 0 0 0 3px #6366F1; }

/* New level: arrows draw themselves in */
.arrow-in .arrow-path {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: arrowDraw 0.5s ease-out var(--d, 0s) forwards;
}
.arrow-in .arrow-head { opacity: 0; animation: arrowHeadIn 0.2s ease-out calc(var(--d, 0s) + 0.35s) forwards; }
@keyframes arrowDraw { to { stroke-dashoffset: 0; } }
@keyframes arrowHeadIn { to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .arrow-in .arrow-path, .arrow-in .arrow-head { animation-duration: 0.01s; animation-delay: 0s; }
}

:root{color-scheme:light}
html,body{height:100%}
body{background:var(--bg-canvas,#FAF6F0);color:var(--text-navy,#152642)}

/* ===== SIMPLE COOL THEME OVERRIDE ===== */
:root{--bg-canvas:#F5FAFF;--text-navy:#26417A;--text-slate:#26417A;--text-muted:#7B93BD;--clay-shadow:none}
*{font-family:'Libre Baskerville',Georgia,'Times New Roman',serif}
body{background:#EAF2FF}
.mobile-app-frame{background:linear-gradient(180deg,#F2F8FF 0%,#EEF4FF 55%,#EAFAF8 100%);box-shadow:none}
.app-header{height:60px;padding:12px 18px 0}
.brand-subtitle{display:none}
.brand-title{font-weight:700;letter-spacing:4px;font-size:1.2rem;color:#3F6FD8}
.coin-pill{background:#DFF0FF;border:none;box-shadow:none;color:#26558F}
.coin-icon-gold{background:linear-gradient(135deg,#6EC6FF,#4D8DF0)}
.avatar-thumbnail{background:#DCE6FF}
.app-viewport,body.screen-home-active .app-viewport,.mobile-app-frame.screen-home-active .app-viewport{padding:8px 18px 24px}
#screen-home.active{gap:16px;padding-top:34px}
.featured-play-card{background:linear-gradient(135deg,#BFE3FF,#D3D2FF);border:none;box-shadow:none;border-radius:22px;padding:22px 20px;min-height:0;justify-content:center;text-align:center}
.featured-left{display:flex;align-items:center;justify-content:center;width:100%}
.featured-tag,.featured-sub,.circle-arrow-btn{display:none}
.featured-title{color:#2F4FB3;font-size:1.7rem;font-weight:700;letter-spacing:6px;margin:0;text-align:center}
.modes-grid-container{grid-template-columns:1fr;gap:14px}
.mode-grid-card{height:auto;flex-direction:row;align-items:center;gap:12px;padding:16px 18px;border-radius:20px;border:none;box-shadow:none}
.card-pvp{background:#D9E3FF!important}
.card-daily{background:#D0F3F0!important}
.card-tournament{background:#DDD6FA!important}
.card-shop{background:#CDEBFA!important}
.card-top-content{align-items:center;gap:14px;flex:1}
.card-3d-icon,.card-3d-icon svg{width:34px;height:34px}
.card-heading{font-size:0.98rem;font-weight:700;color:#26417A;white-space:nowrap}
.card-bottom-row,.card-arrow-circle,.card-desc-text{display:none}
.featured-play-card,.mode-grid-card{transition:none}
.featured-left{flex-direction:column;gap:4px}
.play-level-text{font-size:0.72rem;color:#4A67B5;font-weight:400;letter-spacing:1px}


/* ===== SLIDING OPTIONS ===== */
.modes-grid-container{display:flex!important;flex-direction:row;grid-template-columns:none;gap:14px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;margin:0 -18px;padding:6px 18px 10px;scroll-padding:0 18px}
.modes-grid-container::-webkit-scrollbar{display:none}
.mode-grid-card{flex:0 0 68%;scroll-snap-align:start;flex-direction:column!important;justify-content:center;align-items:center;text-align:center;min-height:190px;padding:24px 16px;gap:14px}
.card-top-content{flex:0 0 auto;flex-direction:column;justify-content:center;align-items:center;gap:16px}
.card-3d-icon,.card-3d-icon svg{width:64px;height:64px}
.card-heading{font-size:1.05rem;text-align:center;white-space:normal}

/* ===== LIVELY HOME ===== */
.app-header{display:none}
.header-right,.coin-pill,.avatar-thumbnail{display:none!important}
#screen-home.active{display:flex;flex-direction:column;align-items:stretch;justify-content:space-between;flex:1;min-height:0;gap:0;padding:6px 0 10px;position:relative}
.mobile-app-frame.screen-home-active .app-viewport{padding:6px 18px 12px;overflow:hidden}
.home-bg{position:absolute;inset:-10px -18px;overflow:hidden;pointer-events:none;z-index:0}
.cloud{position:absolute;height:26px;width:90px;background:#fff;border-radius:30px;opacity:.85;animation:drift 26s linear infinite}
.cloud::before,.cloud::after{content:"";position:absolute;background:#fff;border-radius:50%}
.cloud::before{width:38px;height:38px;left:14px;top:-18px}.cloud::after{width:28px;height:28px;left:44px;top:-12px}
.cloud.c1{top:6%;left:-110px}.cloud.c2{top:20%;left:-110px;transform:scale(.7);animation-duration:34s;animation-delay:-14s;opacity:.7}.cloud.c3{top:38%;left:-110px;transform:scale(.55);animation-duration:42s;animation-delay:-28s;opacity:.6}
@keyframes drift{to{translate:620px 0}}
.bub{position:absolute;bottom:-30px;border-radius:50%;background:radial-gradient(circle at 30% 30%,#fff,rgba(150,190,255,.35));border:1.5px solid rgba(255,255,255,.9);animation:rise linear infinite}
@keyframes rise{to{transform:translateY(-110vh) translateX(14px)}}
.star{position:absolute;font-size:16px;font-weight:400;animation:twinkle 3s ease-in-out infinite}
@keyframes twinkle{0%,100%{opacity:.25;transform:scale(.7) rotate(0)}50%{opacity:1;transform:scale(1.2) rotate(30deg)}}
.home-hero{position:relative;z-index:2;flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:0}
.home-logo{margin:0;display:flex;gap:2px;font-size:3.1rem;font-weight:700;letter-spacing:2px;color:#4A7DF0;line-height:1;text-shadow:0 3px 0 #fff,0 6px 0 #B6C8F7,0 10px 14px rgba(100,120,220,.35)}
.home-logo span{display:inline-block;animation:hop 2.4s ease-in-out infinite;animation-delay:calc(var(--i)*.14s)}
.home-logo span:nth-child(2n){color:#7B6CF0}.home-logo span:nth-child(3n){color:#2BB8A6}
@keyframes hop{0%,60%,100%{transform:translateY(0)}30%{transform:translateY(-9px)}}
.home-tagline{margin-top:10px;font-size:.78rem;letter-spacing:3px;color:#6F86C9}
.mascot-wrap{position:relative;margin-top:14px;width:240px;height:230px;display:flex;justify-content:center}
.mascot{position:relative;z-index:2;max-height:100%;width:auto;overflow:visible}
.m-body{animation:mBob 2.6s ease-in-out infinite;transform-origin:100px 190px}
@keyframes mBob{0%,100%{transform:translateY(0) scale(1,1)}50%{transform:translateY(-12px) scale(1.02,.98)}}
.m-shadow{animation:mShadow 2.6s ease-in-out infinite;transform-origin:100px 206px}
@keyframes mShadow{0%,100%{transform:scale(1)}50%{transform:scale(.82);opacity:.6}}
.m-eyes{animation:blink 4s infinite;transform-origin:100px 114px}
@keyframes blink{0%,92%,100%{transform:scaleY(1)}95%{transform:scaleY(.08)}}
.m-arrow{animation:wig 2.6s ease-in-out infinite;transform-origin:100px 64px}
@keyframes wig{0%,100%{transform:rotate(-7deg)}50%{transform:rotate(7deg)}}
.m-wave{animation:wave 1.3s ease-in-out infinite alternate;transform-origin:158px 128px}
@keyframes wave{from{transform:rotate(8deg)}to{transform:rotate(-28deg)}}
.buddy{position:absolute;width:38px;height:42px;z-index:1;animation:float 4s ease-in-out infinite;overflow:visible}
.buddy.b1{color:#7DB5FF;left:0;top:30px;transform:rotate(-35deg)}
.buddy.b2{color:#A58BFA;right:2px;top:10px;width:32px;height:36px;animation-delay:-1.4s;transform:rotate(30deg)}
.buddy.b3{color:#4FD8C4;right:12px;bottom:34px;width:30px;height:34px;animation-delay:-2.6s;transform:rotate(100deg)}
@keyframes float{0%,100%{translate:0 0}50%{translate:0 -14px}}
.modes-grid-container{position:relative;z-index:2;gap:14px;margin:0 -18px;padding:8px 19% 10px;scroll-padding:0 19%;scroll-snap-type:x mandatory;flex:0 0 auto}
.mode-grid-card{flex:0 0 100%!important;scroll-snap-align:center;min-height:150px;padding:18px 14px;gap:8px;box-shadow:0 10px 20px -10px rgba(90,110,220,.45);border:2px solid rgba(255,255,255,.9)}
.modes-grid-container .mode-grid-card{flex-basis:62%!important}
.card-3d-icon,.card-3d-icon svg{width:54px;height:54px}
.card-top-content{gap:10px}
.card-play{background:linear-gradient(135deg,#BFE3FF,#D3D2FF)!important}
.card-play .card-heading{font-size:1.9rem;letter-spacing:6px;color:#2F4FB3}
.play-level-text{margin-top:6px;font-size:.78rem;color:#4A67B5;letter-spacing:1px;text-align:center}
.card-pvp{background:#D9E3FF!important}.card-daily{background:#D0F3F0!important}.card-tournament{background:#DDD6FA!important}
.home-dots{position:relative;z-index:2;display:flex;justify-content:center;gap:7px;padding:4px 0 2px}
.home-dots i{width:8px;height:8px;border-radius:8px;background:#C3D2F3;transition:all .25s}
.home-dots i.on{width:22px;background:#6C8CFF}
@media (max-height:700px){.mascot-wrap{height:170px;transform:scale(.8)}.home-logo{font-size:2.5rem}}

/* ===== VIBRANT HOME THEME ===== */
.screen-home-active .app-header,.screen-home-active #main-app-header{display:none!important}
.mobile-app-frame.screen-home-active{background:linear-gradient(180deg,#5E86FF 0%,#8A5CF0 50%,#22C4B4 100%)}
.screen-home-active .cloud,.screen-home-active .cloud::before,.screen-home-active .cloud::after{background:rgba(255,255,255,.9)}
.screen-home-active .star{color:#FFF1A0!important}
.home-logo{display:block;font-size:3.3rem;color:#fff;letter-spacing:5px;margin-top:6px;text-shadow:0 4px 0 #4A3CC6,0 8px 0 #382C9E,0 14px 18px rgba(30,20,110,.45)}
.home-logo span{animation:none}
.home-tagline{color:rgba(255,255,255,.92);margin-top:12px}
.mascot-wrap{width:310px;height:230px;margin-top:0;justify-content:flex-start}
.mascot{margin-left:6px;height:100%}
.mascot2{position:absolute;right:0;bottom:6px;z-index:3;overflow:visible}
.m2-body{animation:mBob 2.2s ease-in-out infinite;animation-delay:-.9s;transform-origin:70px 146px}
.m2-shadow{animation:mShadow 2.2s ease-in-out infinite;animation-delay:-.9s;transform-origin:70px 152px}
.m2-eyes{animation:blink 5s infinite;animation-delay:-2s;transform-origin:70px 92px}
.m2-star{animation:wig 1.8s ease-in-out infinite;transform-origin:70px 52px}
.m2-wave{animation:wave 1s ease-in-out infinite alternate;transform-origin:26px 104px}
.buddy.b1{color:#FFE066}.buddy.b2{color:#FF7AB6}.buddy.b3{color:#7CF0DC}
.card-3d-icon{background:#fff;border-radius:50%;width:54px;height:54px;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 10px -3px rgba(40,30,120,.35)}
.card-3d-icon svg{width:34px;height:34px}
.card-heading{color:#fff!important;text-shadow:0 2px 0 rgba(40,30,120,.25)}
.card-play{background:linear-gradient(135deg,#FFD84D,#FF8A1F)!important}
.card-play .card-heading{font-size:1.9rem;letter-spacing:6px}
.card-pvp{background:linear-gradient(135deg,#FF6FB1,#E5389C)!important}
.card-daily{background:linear-gradient(135deg,#4FD3FF,#2F7BF5)!important}
.card-tournament{background:linear-gradient(135deg,#46E0A6,#12A98F)!important}
.play-level-text{color:#fff;background:rgba(255,255,255,.28);padding:2px 12px;border-radius:12px;display:inline-block}
.mode-grid-card{border:3px solid #fff}
.home-dots i{background:rgba(255,255,255,.55)}
.home-dots i.on{background:#FFE066}
@media (max-height:700px){.mascot-wrap{height:170px;transform:scale(.8)}.home-logo{font-size:2.6rem}}

/* ===== WHITE & LIGHT BLUE HOME ===== */
.mobile-app-frame.screen-home-active{background:linear-gradient(180deg,#FFFFFF 0%,#EAF4FF 45%,#D6EAFF 100%)}
.screen-home-active .cloud,.screen-home-active .cloud::before,.screen-home-active .cloud::after{background:rgba(255,255,255,.95)}
.screen-home-active .star{color:#A9D2FF!important}
.bub{background:radial-gradient(circle at 30% 30%,#fff,rgba(150,200,255,.35));border:1.5px solid rgba(190,220,255,.9)}
.home-logo{color:#3F8CF0;text-shadow:0 3px 0 #fff,0 6px 0 #BFDBFB,0 12px 16px rgba(80,140,230,.25)}
.home-tagline{color:#7FA8D9}
.mode-grid-card{border:none!important;box-shadow:0 8px 18px -10px rgba(70,130,220,.35)}
.card-play{background:linear-gradient(135deg,#CFE6FF,#A9D2FF)!important}
.card-pvp{background:linear-gradient(135deg,#EAF4FF,#D3E8FF)!important}
.card-daily{background:linear-gradient(135deg,#E3F6FF,#C4E8FA)!important}
.card-tournament{background:linear-gradient(135deg,#EEF1FF,#D5DDFB)!important}
.card-heading{color:#2F6FC4!important;text-shadow:none}
.play-level-text{color:#3F7FD0;background:rgba(255,255,255,.7)}
.card-3d-icon{background:#fff;box-shadow:0 3px 8px -3px rgba(70,130,220,.35)}
.home-dots i{background:#C5DDF7}
.home-dots i.on{background:#4A93F0}
.mascot-wrap{display:none}
.home-hero{justify-content:center}

/* ===== SMALL TOP LOGO ===== */
.home-hero{justify-content:flex-start!important;padding-top:16px}
.home-logo{font-family:'Righteous','Libre Baskerville',sans-serif!important;font-size:1.5rem!important;font-weight:400;letter-spacing:7px!important;margin:0!important;padding:0 0 8px;text-indent:7px;
 background:linear-gradient(90deg,#3F8CF0,#5BC0EB,#6C7BF0);-webkit-background-clip:text;background-clip:text;color:transparent!important;-webkit-text-fill-color:transparent;text-shadow:none!important;position:relative}
.home-logo::after{content:"";position:absolute;left:50%;bottom:0;width:46px;height:3px;margin-left:-23px;border-radius:3px;background:linear-gradient(90deg,#8EC5FF,#B7C4FF)}

/* ===== LOGO + DOLPHIN ===== */
.home-logo{font-family:'Libre Baskerville',Georgia,serif!important;font-weight:700!important;font-size:1.45rem!important;letter-spacing:4px!important;text-indent:4px;padding:0!important;
 background:none!important;-webkit-background-clip:border-box!important;background-clip:border-box!important;color:#3F8CF0!important;-webkit-text-fill-color:#3F8CF0!important;text-shadow:none!important}
.home-logo::after{display:none!important;content:none!important}
.mascot-wrap{display:none!important}
.dolphin-stage{flex:1;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;width:100%;margin-top:6px}
.quote-bubble{position:relative;background:#fff;color:#2F6FC4;font-weight:700;font-size:.95rem;line-height:1.4;padding:12px 18px;border-radius:20px;max-width:270px;text-align:center;box-shadow:0 8px 18px -8px rgba(70,130,220,.45);animation:bubblePop .6s cubic-bezier(.3,1.6,.5,1) both}
.quote-bubble::after{content:"";position:absolute;left:50%;bottom:-9px;margin-left:-9px;border:9px solid transparent;border-top-color:#fff;border-bottom:0}
@keyframes bubblePop{from{transform:scale(.6);opacity:0}to{transform:scale(1);opacity:1}}
.dolphin{width:min(250px,68vw);height:auto;max-height:100%;overflow:visible}
.d-all{animation:dBob 3s ease-in-out infinite;transform-origin:120px 110px}
@keyframes dBob{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-12px) rotate(3deg)}}
.d-tail{animation:dTail 1.4s ease-in-out infinite;transform-origin:68px 108px}
@keyframes dTail{0%,100%{transform:rotate(-8deg)}50%{transform:rotate(10deg)}}
.d-flipper{animation:dFlip 1.2s ease-in-out infinite alternate;transform-origin:124px 134px}
@keyframes dFlip{from{transform:rotate(8deg)}to{transform:rotate(-14deg)}}
.d-eye{animation:dBlink 4s infinite;transform-origin:161px 97px}
@keyframes dBlink{0%,92%,100%{transform:scaleY(1)}95%{transform:scaleY(.1)}}
.d-ripple{animation:dRip 3s ease-in-out infinite;transform-origin:122px 166px}
.d-ripple.r2{animation-delay:-1.5s}
@keyframes dRip{0%,100%{transform:scaleX(1);opacity:.5}50%{transform:scaleX(.8);opacity:.25}}
.d-spark{animation:dTw 2.4s ease-in-out infinite;transform-origin:center;transform-box:fill-box}
.d-spark.s2{animation-delay:-1.2s}
@keyframes dTw{0%,100%{opacity:.2;transform:scale(.6)}50%{opacity:1;transform:scale(1.15)}}
.d-drop{animation:dDrop 2.2s ease-in infinite}
.d-drop.dd2{animation-delay:-1.1s}
@keyframes dDrop{0%{transform:translateY(-8px);opacity:0}30%{opacity:1}100%{transform:translateY(22px);opacity:0}}
@media (max-height:700px){.dolphin{width:190px}.quote-bubble{font-size:.85rem;padding:9px 14px}}

/* ===== DOLPHIN HOLDING THE PLAY BOX (static, attached to the PLAY card only) ===== */
.home-hero{z-index:3!important}
.dolphin-stage{position:relative;flex:1;min-height:60px;width:100%;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;margin-top:0;gap:0}
.quote-bubble{position:relative;left:auto;right:auto;bottom:auto;max-width:270px;margin:0 0 10px;font-size:.9rem}
.quote-bubble::after{left:50%;top:auto;bottom:-9px;margin:0 0 0 -9px;border:9px solid transparent;border-top-color:#fff;border-bottom:0}
.modes-grid-container{padding-top:132px!important}
.play-holder{position:relative;flex:0 0 62%;scroll-snap-align:center;overflow:visible}
.play-holder>.mode-grid-card{width:100%;box-sizing:border-box;height:100%}
.play-dolphin{position:absolute;left:50%;bottom:calc(100% - 12px);width:178px;height:auto;margin-left:-89px;overflow:visible;pointer-events:none;z-index:5}
@media (max-height:700px){.modes-grid-container{padding-top:104px!important}.play-dolphin{width:140px;margin-left:-70px}.quote-bubble{font-size:.8rem;padding:8px 12px}}

/* ===== REFERENCE DOLPHIN (image) ABOVE THE PLAY BOX ===== */
img.play-dolphin{position:absolute;left:0!important;width:165px!important;height:auto;margin-left:-51px!important;bottom:calc(100% - 50px)!important;pointer-events:none;z-index:5}
@media (max-height:700px){img.play-dolphin{width:130px!important;margin-left:-41px!important;bottom:calc(100% - 40px)!important}}

/* ===== FIXED DOLPHIN + QUOTE (do not slide) ===== */
.carousel-wrap{position:relative;flex:0 0 auto;z-index:4}
.home-dolphin{position:absolute;top:21px;left:calc(19% - 62px);width:165px;height:auto;pointer-events:none;z-index:6}
.carousel-wrap .quote-bubble{position:absolute;left:calc(19% + 108px);right:6px;top:8px;bottom:auto;max-width:none;margin:0;z-index:6;font-size:.82rem;padding:9px 12px;line-height:1.35}
.carousel-wrap .quote-bubble::after{left:-9px;top:34px;bottom:auto;margin:0;border:9px solid transparent;border-right-color:#fff;border-left:0}
@media (max-height:700px){.home-dolphin{top:17px;left:calc(19% - 52px);width:130px}.carousel-wrap .quote-bubble{left:calc(19% + 84px);font-size:.75rem;padding:7px 10px}.carousel-wrap .quote-bubble::after{top:26px}}

/* ===== CHEERING DOLPHIN (25 / 50 / 75 %) ===== */
.cheer-popup{position:relative;overflow:visible}
.cheer-dolphin{width:60px;height:auto;flex:none;margin:-4px 0;transform-origin:50% 90%}
.cheer-popup.go .cheer-dolphin{animation:dolCheer .55s ease-in-out 4}
@keyframes dolCheer{0%,100%{transform:translateY(0) rotate(-10deg)}25%{transform:translateY(-14px) rotate(8deg) scale(1.06)}50%{transform:translateY(0) rotate(-6deg) scale(.96,1.04)}75%{transform:translateY(-14px) rotate(12deg) scale(1.06)}}
.cf{position:absolute;width:7px;height:7px;border-radius:2px;opacity:0;pointer-events:none}
.cf1{background:#5BC0EB;left:24%;top:30%}.cf2{background:#8B7CF6;left:30%;top:60%}.cf3{background:#2DD4BF;left:36%;top:15%}
.cf4{background:#7DB5FF;right:26%;top:25%}.cf5{background:#A78BFA;right:32%;top:65%}.cf6{background:#5EEAD4;right:20%;top:45%}
.cheer-popup.go .cf{animation:cfPop 1.1s ease-out 2}
.cheer-popup.go .cf2,.cheer-popup.go .cf5{animation-delay:.15s}.cheer-popup.go .cf3,.cheer-popup.go .cf6{animation-delay:.3s}
@keyframes cfPop{0%{opacity:0;transform:translateY(8px) scale(.4) rotate(0)}30%{opacity:1}100%{opacity:0;transform:translateY(-26px) scale(1) rotate(200deg)}}

/* ===== HOME: dolphin + quote only with the PLAY box ===== */
.dol-group{position:absolute;left:0;right:0;top:0;bottom:0;pointer-events:none;z-index:6;opacity:var(--dol-o,1)}

/* ===== NEW CHEER TOAST (25 / 50 / 75 %) ===== */
.cheer-popup{display:flex;align-items:center;justify-content:center;overflow:visible}
.cheer-card{position:relative;display:flex;align-items:center;gap:12px;height:50px;padding:0 64px 0 6px;border-radius:25px;background:#fff;border:2px solid #CFE3FB;box-shadow:0 8px 18px -8px rgba(70,130,220,.45)}
.cheer-ring{--p:25;position:relative;width:38px;height:38px;border-radius:50%;background:conic-gradient(#4A93F0 calc(var(--p)*1%),#E1EDFC 0);display:flex;align-items:center;justify-content:center;flex:none}
.cheer-ring::before{content:"";position:absolute;inset:4px;border-radius:50%;background:#fff}
.cheer-badge{position:relative;z-index:1;background:none!important;color:#2F6FC4!important;padding:0!important;font-size:10.5px!important;font-weight:700;border-radius:0!important}
.cheer-mid{display:flex;flex-direction:column;gap:4px}
.cheer-text{font-size:14px!important;font-weight:700;color:#2F6FC4!important;line-height:1}
.cheer-steps{display:flex;gap:4px}
.cheer-steps i{width:22px;height:4px;border-radius:4px;background:#DCEAFB}
.cheer-steps i.on{background:#4A93F0}
.cheer-dolphin{position:absolute;right:4px;bottom:-4px;top:auto;width:54px;height:auto;margin:0;transform-origin:50% 100%}
.cheer-popup.go .cheer-dolphin{animation:dolIn .45s ease-out both}
@keyframes dolIn{from{transform:scale(.5);opacity:0}to{transform:scale(1);opacity:1}}
.cheer-popup .cf{display:none}

/* ===== PLAY box fixed (with dolphin + quote); other options slide below ===== */
.play-fixed{position:relative;z-index:5;flex:0 0 auto;width:62%;margin:126px auto 14px}
.play-fixed>.mode-grid-card{flex:none!important;width:100%;box-sizing:border-box;min-height:150px}
.play-fixed .dol-group{position:absolute;left:0;right:0;top:0;bottom:0;opacity:1!important;pointer-events:none;z-index:6}
.play-fixed .home-dolphin{position:absolute;left:-51px;top:-111px;width:165px;height:auto;pointer-events:none}
.play-fixed .quote-bubble{position:absolute;left:119px;right:auto;width:172px;top:-124px;bottom:auto;max-width:none;margin:0;font-size:.82rem;padding:9px 12px;line-height:1.35}
.play-fixed .quote-bubble::after{left:-9px;top:34px;bottom:auto;margin:0;border:9px solid transparent;border-right-color:#fff;border-left:0}
.carousel-wrap{position:relative;z-index:4;flex:0 0 auto}
.carousel-wrap .modes-grid-container{padding:4px 19% 8px!important;scroll-padding:0 19%}
.carousel-wrap .mode-grid-card{min-height:92px;padding:12px 10px}
.carousel-wrap .card-3d-icon{width:42px;height:42px}
.carousel-wrap .card-3d-icon svg{width:28px;height:28px}
.carousel-wrap .card-top-content{gap:8px}
.carousel-wrap .card-heading{font-size:.95rem}
@media (max-height:700px){
  .play-fixed{margin-top:100px}
  .play-fixed>.mode-grid-card{min-height:118px}
  .play-fixed .home-dolphin{width:130px;left:-41px;top:-88px}
  .play-fixed .quote-bubble{left:95px;width:150px;top:-98px;font-size:.74rem;padding:7px 9px}
  .play-fixed .quote-bubble::after{top:26px}
  .carousel-wrap .mode-grid-card{min-height:78px}
}

/* ===== WATER-DROP LIVES ===== */
.life-heart{width:26px;height:26px}