/* === БАЗОВЫЕ НАСТРОЙКИ === */
:root {
  --primary-blue: #3c5596;
  --primary-dark: #39365a;
  --accent-yellow: #ffd746;
  --accent-gold: #d4af37;
  --correct-green: #00c853;
  --wrong-red: #ff3d00;
  --text-gray: #545454;
  --light-bg: #f4f6f9;
  --white: #ffffff;
  --card-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
  --safe-area-bottom: env(safe-area-inset-bottom, 20px);
  --nav-height: 65px;
  --luna-accent: #7b61ff;
  --luna-glow: #b39dff;
  --luna-deep: #3b2fa8;

  /* UI tokens for dark modals/subwindows */
  --profile-accent: #1da1f2;
  --profile-accent-rgb: 29 161 242;
  --ui-backdrop: rgba(0, 0, 0, 0.62);
  --ui-surface: rgba(255, 255, 255, 0.05);
  --ui-surface-2: rgba(255, 255, 255, 0.06);
  --ui-border: rgba(255, 255, 255, 0.1);
  --ui-border-2: rgba(255, 255, 255, 0.14);
  --ui-text: rgba(255, 255, 255, 0.92);
  --ui-muted: rgba(219, 232, 255, 0.8);
  --ui-shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.22);

  /* z-index scale */
  --z-modal-overlay: 30000;
  --z-modal-content: 30010;
  --z-team-chat-backdrop: 35000;
  --z-team-chat: 35010;
  --z-team-chat-users: 35015;
  --z-team-chat-actions: 35020;
  /* Subwindows must be ABOVE modal overlay */
  --z-subwindow-backdrop: 30020;
  --z-subwindow: 30030;
  /* Profile settings is inside achievements modal, but keep it above too */
  --z-profile-settings-backdrop: 30040;
  --z-profile-settings: 30050;
  --z-avatar-preview: 40000;
  --z-toast: 50000;

  /* Game UI tokens */
  --game-panel-max-width: 960px;
  --game-panel-radius: 30px;
  --game-panel-bg: linear-gradient(
    150deg,
    rgba(255, 255, 255, 0.98),
    rgba(245, 248, 252, 0.96)
  );
  --game-panel-border: 1px solid rgba(0, 0, 0, 0.08);
  --game-panel-shadow: 0 30px 80px rgba(0, 0, 0, 0.35);
  --game-chrome-bg: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.98),
    rgba(250, 252, 255, 0.92)
  );
  --game-chrome-border: 1px solid rgba(0, 0, 0, 0.06);
  --game-btn-bg: rgba(0, 0, 0, 0.04);
  --game-btn-border: 1px solid rgba(0, 0, 0, 0.08);
  --game-btn-hover-bg: rgba(60, 85, 150, 0.1);
  --game-btn-hover-shadow: 0 10px 22px rgba(15, 23, 42, 0.1);
  --game-text: rgba(8, 18, 34, 0.92);
  --game-muted: rgba(0, 0, 0, 0.65);
  --game-track: rgba(0, 0, 0, 0.08);
  --game-choice-bg: rgba(255, 255, 255, 0.72);
  --game-choice-border: rgba(8, 18, 34, 0.12);
  --game-choice-shadow: 0 14px 30px rgba(15, 23, 42, 0.1);
  --game-choice-hover-bg: rgba(0, 210, 255, 0.1);

  /* Home UI polish */
  --home-grid-gap: 15px;
  --home-grid-min: 180px;
  --skeleton-a: rgba(8, 18, 34, 0.06);
  --skeleton-b: rgba(8, 18, 34, 0.12);
  --highlight-bg: rgba(255, 215, 70, 0.42);
  --highlight-shadow: rgba(255, 215, 70, 0.22);

  /* Header */
  --header-pad-x: 15px;
  --header-overlap: 18px;
  --header-glow-cyan: rgba(0, 210, 255, 0.16);
  --header-glow-violet: rgba(127, 90, 255, 0.14);
  --header-gloss: rgba(255, 255, 255, 0.08);

  /* Semantic design tokens */
  --radius-sm: 12px;
  --radius-md: 18px;
  --radius-lg: 24px;
  --radius-xl: 25px;
  --focus-ring: rgba(0, 210, 255, 0.75);
  --focus-ring-soft: rgba(0, 210, 255, 0.28);
  --focus-ring-muted: rgba(0, 165, 180, 0.22);

  --surface-nav: rgba(255, 255, 255, 0.86);
  --surface-nav-border: rgba(8, 18, 34, 0.08);
  --surface-nav-shadow:
    0 -6px 18px rgba(0, 0, 0, 0.06), 0 18px 60px rgba(8, 12, 26, 0.16);
  --surface-nav-icon: transparent;
  --surface-nav-icon-shadow: none;
  --surface-nav-icon-active: linear-gradient(
    135deg,
    rgba(0, 210, 255, 0.16),
    rgba(127, 90, 255, 0.12)
  );
  --surface-nav-icon-active-shadow: 0 16px 34px rgba(60, 85, 150, 0.14);
  --nav-item-color: rgba(8, 18, 34, 0.55);
  --nav-item-active-color: var(--primary-blue);

  --surface-card:
    radial-gradient(
      800px 260px at 50% -120px,
      rgba(255, 255, 255, 0.55),
      rgba(255, 255, 255, 0) 62%
    ),
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.98),
      rgba(248, 250, 255, 0.94)
    );
  --surface-card-border: rgba(8, 18, 34, 0.08);
  --surface-card-shadow:
    0 18px 50px rgba(15, 23, 42, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.75);
  --surface-card-border-hover: rgba(0, 210, 255, 0.2);
  --surface-card-shadow-hover:
    0 26px 78px rgba(15, 23, 42, 0.14), 0 0 0 1px rgba(0, 210, 255, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.78);
  --surface-card-image: rgba(8, 18, 34, 0.06);

  --surface-modal: rgba(255, 255, 255, 0.98);
  --surface-modal-border: rgba(8, 18, 34, 0.1);
  --surface-modal-shadow: 0 24px 70px rgba(15, 23, 42, 0.2);
  --surface-modal-grip: #e0e0e0;
  --surface-modal-image: #eee;
  --surface-modal-title: var(--primary-dark);
  --surface-modal-sub: #888;
  --surface-modal-divider: rgba(0, 0, 0, 0.05);
  --surface-modal-label: #999;
  --surface-modal-text: rgba(8, 18, 34, 0.9);
  --surface-modal-mic-bg: rgba(255, 255, 255, 0.95);
  --surface-modal-mic-border: rgba(0, 0, 0, 0.1);
  --surface-modal-mic-text: rgba(8, 18, 34, 0.86);

  --surface-sticky: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.84),
    rgba(255, 255, 255, 0.72)
  );
  --surface-sticky-border: rgba(8, 18, 34, 0.06);
  --surface-sticky-shadow:
    0 12px 40px rgba(8, 12, 26, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.58);
  --surface-sticky-tail: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0),
    rgba(255, 255, 255, 0.75),
    rgba(255, 255, 255, 0)
  );

  --surface-search: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.92),
    rgba(255, 255, 255, 0.84)
  );
  --surface-search-stuck: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.86),
    rgba(255, 255, 255, 0.76)
  );
  --surface-search-border: rgba(8, 18, 34, 0.08);
  --surface-search-shadow:
    0 18px 50px rgba(15, 23, 42, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.65);
  --surface-search-shadow-stuck:
    0 14px 40px rgba(8, 12, 26, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.6);
  --surface-search-shadow-mobile:
    0 10px 26px rgba(15, 23, 42, 0.09), inset 0 1px 0 rgba(255, 255, 255, 0.6);
  --surface-search-shadow-stuck-mobile:
    0 8px 20px rgba(8, 12, 26, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.54);
  --surface-search-focus-border: rgba(0, 210, 255, 0.22);
  --surface-search-focus-ring: rgba(0, 210, 255, 0.14);
  --surface-search-focus-shadow: 0 18px 50px rgba(60, 85, 150, 0.14);
  --surface-search-toggle-bg: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.86),
    rgba(255, 255, 255, 0.72)
  );
  --surface-search-toggle-border: transparent;
  --search-input-color: var(--text-gray);
  --search-input-focus-color: rgba(8, 18, 34, 0.92);
  --search-input-placeholder: rgba(8, 18, 34, 0.45);

  --surface-tag-btn:
    radial-gradient(
      140% 160% at 18% 22%,
      rgba(255, 255, 255, 0.18),
      rgba(255, 255, 255, 0.06) 55%,
      rgba(0, 0, 0, 0.08) 100%
    ),
    rgba(255, 255, 255, 0.72);
  --surface-tag-btn-border: rgba(8, 18, 34, 0.08);
  --surface-tag-btn-shadow:
    0 14px 34px rgba(15, 23, 42, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.65);
  --surface-tag-btn-shadow-mobile:
    0 9px 22px rgba(15, 23, 42, 0.09), inset 0 1px 0 rgba(255, 255, 255, 0.58);
  --surface-tag-btn-hover:
    radial-gradient(
      140% 160% at 18% 22%,
      rgba(255, 255, 255, 0.22),
      rgba(255, 255, 255, 0.08) 55%,
      rgba(0, 210, 255, 0.06) 100%
    ),
    rgba(255, 255, 255, 0.78);
  --surface-tag-btn-hover-border: rgba(0, 210, 255, 0.18);
  --surface-tag-btn-hover-shadow:
    0 18px 44px rgba(15, 23, 42, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.68);
  --surface-tag-btn-focus: rgba(0, 210, 255, 0.22);
  --surface-tag-btn-color: rgba(8, 18, 34, 0.82);

  --surface-tag-cloud-bg: rgba(255, 255, 255, 0.72);
  --surface-tag-cloud-border: rgba(8, 18, 34, 0.06);
  --surface-tag-cloud-shadow: 0 14px 40px rgba(15, 23, 42, 0.08);

  --surface-categories-bg: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.78),
    rgba(255, 255, 255, 0.66)
  );
  --surface-categories-border: rgba(8, 18, 34, 0.06);
  --surface-categories-shadow:
    0 14px 40px rgba(15, 23, 42, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.62);
  --surface-categories-shadow-mobile:
    0 10px 26px rgba(15, 23, 42, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.56);
  --surface-categories-fade: rgba(255, 255, 255, 0.92);

  --surface-category-chip-bg: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.96),
    rgba(255, 255, 255, 0.84)
  );
  --surface-category-chip-border: rgba(8, 18, 34, 0.08);
  --surface-category-chip-color: rgba(8, 18, 34, 0.78);
  --surface-category-chip-hover-border: rgba(0, 210, 255, 0.18);
  --surface-category-chip-hover-shadow: 0 14px 30px rgba(15, 23, 42, 0.1);
  --surface-category-chip-focus: rgba(0, 210, 255, 0.22);
  --surface-category-chip-active-bg: linear-gradient(
    135deg,
    rgba(45, 93, 255, 0.94),
    rgba(127, 90, 255, 0.92)
  );
  --surface-category-chip-active-color: #fff;
  --surface-category-chip-active-border: transparent;
  --surface-category-chip-active-shadow: 0 14px 34px rgba(60, 85, 150, 0.26);

  --surface-home-controls-bg: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.8),
    rgba(255, 255, 255, 0.66)
  );
  --surface-home-controls-stuck-bg: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.74),
    rgba(255, 255, 255, 0.6)
  );
  --surface-home-controls-border: rgba(8, 18, 34, 0.06);
  --surface-home-controls-shadow:
    0 14px 40px rgba(15, 23, 42, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.58);

  --surface-home-chip-bg: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.92),
    rgba(255, 255, 255, 0.78)
  );
  --surface-home-chip-border: rgba(0, 0, 0, 0.08);
  --surface-home-chip-color: #1b2230;
  --surface-home-chip-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55);
  --surface-home-chip-hover-border: rgba(0, 210, 255, 0.18);
  --surface-home-chip-hover-shadow:
    0 14px 30px rgba(15, 23, 42, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.58);
  --surface-home-chip-focus: rgba(0, 210, 255, 0.22);
  --surface-home-chip-active-bg: linear-gradient(
    135deg,
    rgba(60, 85, 150, 0.98),
    rgba(127, 90, 255, 0.92)
  );
  --surface-home-chip-active-color: #fff;
  --surface-home-chip-active-border: transparent;
  --surface-home-chip-active-shadow:
    0 16px 40px rgba(60, 85, 150, 0.22), 0 0 22px rgba(0, 210, 255, 0.12);

  --surface-home-view-toggle-bg: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.86),
    rgba(255, 255, 255, 0.72)
  );
  --surface-home-view-toggle-border: rgba(0, 0, 0, 0.08);
  --surface-home-view-toggle-shadow:
    0 12px 28px rgba(15, 23, 42, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.65);
  --surface-home-view-btn-color: rgba(8, 18, 34, 0.72);
  --surface-home-view-btn-hover-bg: rgba(0, 165, 180, 0.08);
  --surface-home-view-btn-focus: rgba(0, 210, 255, 0.22);
  --surface-home-view-btn-active-bg: linear-gradient(
    135deg,
    rgba(0, 210, 255, 0.16),
    rgba(127, 90, 255, 0.14)
  );
  --surface-home-view-btn-active-color: rgba(8, 18, 34, 0.92);

  --surface-fav-chip-bg: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.94),
    rgba(255, 255, 255, 0.82)
  );
  --surface-fav-chip-border: rgba(0, 0, 0, 0.08);
  --surface-fav-chip-color: #222;
  --surface-fav-chip-shadow:
    0 12px 28px rgba(0, 0, 0, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.65);
  --surface-fav-chip-active-bg: linear-gradient(135deg, #00a5b4, #0b7b98);
  --surface-fav-chip-active-border: transparent;
  --surface-fav-chip-active-color: #fff;
  --surface-fav-chip-active-shadow: 0 12px 35px rgba(0, 165, 180, 0.35);

  --surface-load-more-bg: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.96),
    rgba(255, 255, 255, 0.84)
  );
  --surface-load-more-border: rgba(8, 18, 34, 0.1);
  --surface-load-more-color: rgba(8, 18, 34, 0.8);
  --surface-load-more-hover-border: rgba(0, 210, 255, 0.18);
  --surface-load-more-hover-shadow: 0 14px 30px rgba(15, 23, 42, 0.1);

  --surface-btn-secondary-bg: rgba(0, 0, 0, 0.06);
  --surface-btn-secondary-color: #111;
  --surface-btn-primary-bg: rgba(50, 120, 255, 0.18);
  --surface-btn-primary-color: #0047b3;
  --surface-inline-btn-color: #666;

  --surface-upsell-scene-bg:
    radial-gradient(
      700px 220px at 14% 0%,
      rgba(0, 210, 255, 0.1),
      transparent 60%
    ),
    radial-gradient(
      700px 240px at 92% 0%,
      rgba(127, 90, 255, 0.1),
      transparent 62%
    ),
    rgba(255, 255, 255, 0.86);
  --surface-upsell-scene-border: rgba(8, 18, 34, 0.1);
  --surface-upsell-guest-bg: rgba(8, 18, 34, 0.05);
  --surface-upsell-guest-border: rgba(8, 18, 34, 0.1);
  --surface-upsell-guest-color: rgba(8, 18, 34, 0.74);
  --surface-upsell-meta-bg: rgba(255, 255, 255, 0.78);
  --surface-upsell-meta-border: rgba(8, 18, 34, 0.1);
  --surface-upsell-meta-shadow: 0 12px 28px rgba(15, 23, 42, 0.08);
  --surface-upsell-feedback-bg: rgba(255, 255, 255, 0.82);
  --surface-upsell-feedback-border: rgba(8, 18, 34, 0.1);
  --surface-upsell-feedback-shadow: 0 12px 28px rgba(15, 23, 42, 0.08);
  --surface-upsell-feedback-color: rgba(8, 18, 34, 0.84);
  --surface-upsell-feedback-label: rgba(8, 18, 34, 0.58);

  --surface-conflict-bubble-bg:
    radial-gradient(
      560px 200px at 14% 0%,
      rgba(255, 74, 74, 0.14),
      transparent 60%
    ),
    radial-gradient(
      520px 210px at 92% 0%,
      rgba(255, 206, 84, 0.16),
      transparent 62%
    ),
    rgba(255, 255, 255, 0.92);
  --surface-conflict-bubble-border: rgba(8, 18, 34, 0.1);
  --surface-conflict-bubble-color: rgba(8, 18, 34, 0.9);
  --surface-conflict-label-bg: rgba(20, 22, 28, 0.06);
  --surface-conflict-label-border: rgba(8, 18, 34, 0.1);
  --surface-conflict-label-color: var(--game-label-color);
  --surface-conflict-badge-bg: rgba(0, 0, 0, 0.06);
  --surface-conflict-badge-border: rgba(8, 18, 34, 0.1);
  --surface-conflict-badge-color: rgba(8, 18, 34, 0.72);

  --surface-allergen-hero-bg: linear-gradient(
    145deg,
    rgba(255, 206, 84, 0.18),
    rgba(0, 210, 255, 0.1),
    rgba(127, 90, 255, 0.1)
  );
  --surface-allergen-hero-border: rgba(8, 18, 34, 0.08);
  --surface-allergen-hero-shadow: 0 18px 45px rgba(15, 23, 42, 0.1);
  --surface-allergen-hero-title: rgba(8, 18, 34, 0.92);
  --surface-allergen-hero-sub: rgba(0, 0, 0, 0.62);
  --surface-allergen-mode-bg: rgba(8, 18, 34, 0.06);
  --surface-allergen-mode-border: rgba(8, 18, 34, 0.1);
  --surface-allergen-mode-btn-color: rgba(8, 18, 34, 0.82);
  --surface-allergen-mode-btn-active-bg: rgba(255, 255, 255, 0.92);
  --surface-allergen-mode-btn-active-color: rgba(8, 18, 34, 0.92);
  --surface-allergen-mode-btn-active-shadow: 0 10px 24px rgba(15, 23, 42, 0.1);
  --surface-allergen-mode-note: rgba(0, 0, 0, 0.62);
  --surface-allergen-card-bg: rgba(255, 255, 255, 0.92);
  --surface-allergen-card-border: rgba(8, 18, 34, 0.08);
  --surface-allergen-card-shadow: 0 18px 45px rgba(15, 23, 42, 0.1);
  --surface-allergen-item-name: rgba(8, 18, 34, 0.92);
  --surface-allergen-timer: rgba(8, 18, 34, 0.7);
  --surface-allergen-item-comp: rgba(0, 0, 0, 0.7);
  --surface-allergen-hint-bg: rgba(255, 206, 84, 0.14);
  --surface-allergen-hint-border: rgba(255, 206, 84, 0.26);
  --surface-allergen-hint-color: rgba(8, 18, 34, 0.76);
  --surface-allergen-item-note: rgba(8, 18, 34, 0.72);
  --surface-allergen-selected-empty: rgba(8, 18, 34, 0.55);
  --surface-allergen-chip-bg: rgba(0, 165, 180, 0.1);
  --surface-allergen-chip-border: rgba(0, 165, 180, 0.24);
  --surface-allergen-chip-color: rgba(8, 18, 34, 0.88);
  --surface-allergen-chip-hover-bg: rgba(0, 165, 180, 0.14);
  --surface-allergen-chip-hover-border: rgba(0, 165, 180, 0.32);
  --surface-allergen-chip-x-bg: rgba(8, 18, 34, 0.08);
  --surface-allergen-chip-x-color: rgba(8, 18, 34, 0.78);
  --surface-allergen-option-selected-border: rgba(0, 165, 180, 0.65);
  --surface-allergen-option-selected-bg: rgba(0, 165, 180, 0.12);
  --surface-allergen-option-correct-bg: linear-gradient(
    135deg,
    rgba(0, 200, 83, 0.92),
    rgba(0, 165, 180, 0.88)
  );
  --surface-allergen-option-correct-border: rgba(0, 200, 83, 0.75);
  --surface-allergen-option-correct-color: #fff;
  --surface-allergen-option-correct-shadow: 0 18px 42px rgba(0, 200, 83, 0.22);
  --surface-allergen-option-wrong-bg: linear-gradient(
    135deg,
    rgba(255, 61, 0, 0.92),
    rgba(255, 138, 0, 0.88)
  );
  --surface-allergen-option-wrong-border: rgba(255, 61, 0, 0.75);
  --surface-allergen-option-wrong-color: #fff;
  --surface-allergen-option-wrong-shadow: 0 18px 42px rgba(255, 61, 0, 0.22);
  --surface-allergen-actions-bg: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0),
    rgba(255, 255, 255, 0.92) 24%,
    rgba(255, 255, 255, 0.98)
  );
  --surface-allergen-actions-border: rgba(8, 18, 34, 0.08);

  --size-load-more-min-height: 46px;
  --size-load-more-min-height-mobile: 44px;

  --surface-game-hint-bg: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.96),
    rgba(245, 253, 255, 0.75)
  );
  --surface-game-hint-color: #202236;
  --surface-game-hint-border: rgba(255, 255, 255, 0.9);
  --surface-game-hint-shadow: 0 12px 30px rgba(14, 21, 74, 0.25);
  --surface-game-hint-shadow-shifted: 0 16px 36px rgba(14, 21, 74, 0.35);
  --surface-game-hint-oracle-bg: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.95),
    rgba(235, 247, 255, 0.8)
  );
  --surface-game-hint-oracle-color: #132143;
  --surface-game-hint-memory-bg: linear-gradient(
    135deg,
    rgba(255, 246, 238, 0.95),
    rgba(255, 230, 209, 0.9)
  );
  --surface-game-hint-memory-color: #4b2a0c;
  --surface-game-hint-memory-border: rgba(255, 200, 140, 0.8);
  --game-btn-text: var(--game-text);

  --surface-oracle-card: #fff;
  --surface-oracle-card-border: rgba(0, 0, 0, 0.06);
  --surface-oracle-card-shadow: 0 6px 16px rgba(0, 0, 0, 0.04);
  --surface-oracle-sub: rgba(0, 0, 0, 0.55);
  --surface-oracle-segment: rgba(0, 0, 0, 0.04);
  --surface-oracle-seg-active: #fff;
  --surface-oracle-seg-active-shadow: 0 4px 10px rgba(0, 0, 0, 0.06);
  --surface-oracle-section-title: rgba(0, 0, 0, 0.7);
  --surface-oracle-chip: #fff;
  --surface-oracle-chip-border: rgba(0, 0, 0, 0.08);
  --surface-oracle-chip-shadow-hover: 0 10px 20px rgba(0, 0, 0, 0.08);
  --surface-oracle-note-bg: rgba(0, 0, 0, 0.02);
  --surface-oracle-note-border: rgba(0, 0, 0, 0.06);
  --surface-oracle-note-text: var(--text-gray);
  --surface-oracle-note-muted: #ccc;
  --surface-oracle-status-bg: rgba(255, 255, 255, 0.1);
  --surface-oracle-status-border: rgba(255, 255, 255, 0.2);
  --surface-oracle-status-shadow: 0 10px 20px rgba(2, 3, 12, 0.4);
}

/* === A11Y: skip link + focus ring === */
.skip-link {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 50000;
  padding: 10px 14px;
  border-radius: 12px;
  background: rgba(10, 12, 20, 0.92);
  color: rgba(255, 255, 255, 0.94);
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.45);
  transform: translateY(-160%);
  transition: transform 180ms ease;
  text-decoration: none;
  font-weight: 700;
  letter-spacing: 0.2px;
}
.skip-link:focus,
.skip-link:focus-visible {
  transform: translateY(0);
  outline: none;
}

:where(
  a,
  button,
  input,
  select,
  textarea,
  [tabindex],
  [role="button"]
):focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 3px;
}

/* === A11Y: reduced motion === */
@media (prefers-reduced-motion: reduce) {
  html:focus-within {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* === A11Y: higher contrast preference === */
@media (prefers-contrast: more) {
  :root {
    --ui-border: rgba(255, 255, 255, 0.18);
    --ui-border-2: rgba(255, 255, 255, 0.22);
    --ui-text: rgba(255, 255, 255, 0.98);
    --ui-muted: rgba(255, 255, 255, 0.88);
  }

  :where(
    a,
    button,
    input,
    select,
    textarea,
    [tabindex],
    [role="button"]
  ):focus-visible {
    outline-color: rgba(0, 210, 255, 0.95);
    outline-width: 3px;
  }

  .nav-label {
    font-size: 11px;
  }
  .nav-item {
    color: rgba(8, 18, 34, 0.78);
  }
}

@media (prefers-contrast: more) and (prefers-color-scheme: dark) {
  .nav-item {
    color: rgba(255, 255, 255, 0.86);
  }
}
/* Анимация печати бота */
.typing-indicator {
  display: inline-flex;
  align-items: center;
  column-gap: 4px;
}
.dot {
  width: 6px;
  height: 6px;
  background-color: #888;
  border-radius: 50%;
  animation: blink-dot 1.4s infinite both;
}
.dot:nth-child(1) {
  animation-delay: -0.32s;
}
.dot:nth-child(2) {
  animation-delay: -0.16s;
}
@keyframes blink-dot {
  0%,
  80%,
  100% {
    transform: scale(0);
  }
  40% {
    transform: scale(1);
  }
}
@media (prefers-color-scheme: dark) {
  :root {
    --primary-blue: #4a6cb5;
    --primary-dark: #2a2745;
    --text-gray: #aaa;
    --light-bg: #1c1c24;
    --white: #121212;
    --card-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    --luna-accent: #8b74ff;
    --luna-glow: #b8a7ff;
    --luna-deep: #2c217a;

    /* Game UI tokens (dark) */
    --game-panel-bg: linear-gradient(
      150deg,
      rgba(18, 19, 28, 0.92),
      rgba(10, 12, 20, 0.94)
    );
    --game-panel-border: 1px solid rgba(255, 255, 255, 0.1);
    --game-panel-shadow: 0 30px 90px rgba(0, 0, 0, 0.55);
    --game-chrome-bg: linear-gradient(
      180deg,
      rgba(22, 24, 36, 0.92),
      rgba(14, 16, 26, 0.92)
    );
    --game-chrome-border: 1px solid rgba(255, 255, 255, 0.1);
    --game-btn-bg: rgba(255, 255, 255, 0.07);
    --game-btn-border: 1px solid rgba(255, 255, 255, 0.1);
    --game-btn-hover-bg: rgba(127, 90, 255, 0.18);
    --game-btn-hover-shadow: 0 14px 26px rgba(0, 0, 0, 0.35);
    --game-text: rgba(255, 255, 255, 0.92);
    --game-muted: rgba(255, 255, 255, 0.72);
    --game-track: rgba(255, 255, 255, 0.14);
    --game-choice-bg: rgba(255, 255, 255, 0.08);
    --game-choice-border: rgba(255, 255, 255, 0.12);
    --game-choice-shadow: 0 20px 45px rgba(0, 0, 0, 0.35);
    --game-choice-hover-bg: rgba(127, 90, 255, 0.18);

    --skeleton-a: rgba(255, 255, 255, 0.06);
    --skeleton-b: rgba(255, 255, 255, 0.12);
    --highlight-bg: rgba(255, 215, 70, 0.3);
    --highlight-shadow: rgba(255, 215, 70, 0.16);

    --focus-ring: rgba(0, 210, 255, 0.95);
    --focus-ring-soft: rgba(0, 210, 255, 0.36);
    --focus-ring-muted: rgba(160, 245, 255, 0.16);

    --surface-nav: rgba(18, 18, 18, 0.78);
    --surface-nav-border: rgba(255, 255, 255, 0.12);
    --surface-nav-shadow:
      0 -8px 26px rgba(0, 0, 0, 0.45), 0 22px 70px rgba(0, 0, 0, 0.55);
    --surface-nav-icon: rgba(255, 255, 255, 0.06);
    --surface-nav-icon-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
    --surface-nav-icon-active: linear-gradient(
      135deg,
      rgba(0, 210, 255, 0.18),
      rgba(127, 90, 255, 0.14)
    );
    --surface-nav-icon-active-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
    --nav-item-color: rgba(255, 255, 255, 0.7);
    --nav-item-active-color: rgba(160, 245, 255, 0.92);

    --surface-card:
      radial-gradient(
        860px 280px at 50% -140px,
        rgba(255, 255, 255, 0.12),
        rgba(255, 255, 255, 0) 64%
      ),
      linear-gradient(180deg, rgba(14, 16, 26, 0.92), rgba(10, 12, 20, 0.92));
    --surface-card-border: rgba(255, 255, 255, 0.1);
    --surface-card-shadow:
      0 28px 92px rgba(0, 0, 0, 0.48), inset 0 1px 0 rgba(255, 255, 255, 0.08);
    --surface-card-border-hover: rgba(0, 210, 255, 0.22);
    --surface-card-shadow-hover:
      0 38px 120px rgba(0, 0, 0, 0.62), 0 0 0 1px rgba(0, 210, 255, 0.08),
      inset 0 1px 0 rgba(255, 255, 255, 0.1);
    --surface-card-image: rgba(255, 255, 255, 0.06);

    --surface-modal:
      radial-gradient(
        circle at 18% 0%,
        rgba(0, 210, 255, 0.1),
        transparent 42%
      ),
      radial-gradient(
        circle at 100% 18%,
        rgba(127, 90, 255, 0.1),
        transparent 48%
      ),
      linear-gradient(180deg, rgba(16, 18, 30, 0.98), rgba(10, 12, 20, 0.98));
    --surface-modal-border: rgba(255, 255, 255, 0.12);
    --surface-modal-shadow: 0 30px 90px rgba(0, 0, 0, 0.55);
    --surface-modal-grip: rgba(255, 255, 255, 0.22);
    --surface-modal-image: rgba(255, 255, 255, 0.06);
    --surface-modal-title: rgba(255, 255, 255, 0.94);
    --surface-modal-sub: rgba(219, 232, 255, 0.72);
    --surface-modal-divider: rgba(255, 255, 255, 0.1);
    --surface-modal-label: rgba(255, 255, 255, 0.62);
    --surface-modal-text: rgba(255, 255, 255, 0.86);
    --surface-modal-mic-bg: rgba(255, 255, 255, 0.08);
    --surface-modal-mic-border: rgba(255, 255, 255, 0.14);
    --surface-modal-mic-text: rgba(255, 255, 255, 0.86);

    --surface-sticky: linear-gradient(
      180deg,
      rgba(14, 16, 26, 0.78),
      rgba(10, 12, 20, 0.66)
    );
    --surface-sticky-border: rgba(255, 255, 255, 0.08);
    --surface-sticky-shadow:
      0 22px 70px rgba(0, 0, 0, 0.52), inset 0 1px 0 rgba(255, 255, 255, 0.08);
    --surface-sticky-tail: linear-gradient(
      180deg,
      rgba(10, 12, 20, 0),
      rgba(10, 12, 20, 0.62),
      rgba(10, 12, 20, 0)
    );

    --surface-search: linear-gradient(
      180deg,
      rgba(22, 24, 36, 0.84),
      rgba(12, 14, 24, 0.7)
    );
    --surface-search-stuck: linear-gradient(
      180deg,
      rgba(20, 22, 34, 0.78),
      rgba(10, 12, 20, 0.62)
    );
    --surface-search-border: rgba(255, 255, 255, 0.12);
    --surface-search-shadow:
      0 26px 70px rgba(0, 0, 0, 0.48), inset 0 1px 0 rgba(255, 255, 255, 0.08);
    --surface-search-shadow-stuck:
      0 26px 70px rgba(0, 0, 0, 0.48), inset 0 1px 0 rgba(255, 255, 255, 0.08);
    --surface-search-shadow-mobile:
      0 18px 46px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.08);
    --surface-search-shadow-stuck-mobile:
      0 16px 40px rgba(0, 0, 0, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.08);
    --surface-search-focus-border: rgba(160, 245, 255, 0.18);
    --surface-search-focus-ring: rgba(160, 245, 255, 0.1);
    --surface-search-focus-shadow: 0 26px 70px rgba(0, 0, 0, 0.5);
    --surface-search-toggle-bg: linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.1),
      rgba(255, 255, 255, 0.06)
    );
    --surface-search-toggle-border: rgba(255, 255, 255, 0.14);
    --search-input-color: rgba(255, 255, 255, 0.92);
    --search-input-focus-color: rgba(255, 255, 255, 0.96);
    --search-input-placeholder: rgba(219, 232, 255, 0.6);

    --surface-tag-btn:
      radial-gradient(
        140% 160% at 18% 22%,
        rgba(255, 255, 255, 0.14),
        rgba(255, 255, 255, 0.04) 55%,
        rgba(0, 0, 0, 0.12) 100%
      ),
      rgba(255, 255, 255, 0.06);
    --surface-tag-btn-border: rgba(255, 255, 255, 0.14);
    --surface-tag-btn-shadow:
      0 18px 50px rgba(0, 0, 0, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.1);
    --surface-tag-btn-shadow-mobile:
      0 12px 30px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.1);
    --surface-tag-btn-hover:
      radial-gradient(
        140% 160% at 18% 22%,
        rgba(255, 255, 255, 0.18),
        rgba(255, 255, 255, 0.06) 55%,
        rgba(0, 210, 255, 0.08) 100%
      ),
      rgba(255, 255, 255, 0.07);
    --surface-tag-btn-hover-border: rgba(160, 245, 255, 0.18);
    --surface-tag-btn-hover-shadow:
      0 18px 50px rgba(0, 0, 0, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.12);
    --surface-tag-btn-focus: rgba(160, 245, 255, 0.18);
    --surface-tag-btn-color: rgba(255, 255, 255, 0.9);

    --surface-tag-cloud-bg: rgba(18, 18, 18, 0.54);
    --surface-tag-cloud-border: rgba(255, 255, 255, 0.1);
    --surface-tag-cloud-shadow: 0 24px 60px rgba(0, 0, 0, 0.4);

    --surface-categories-bg: linear-gradient(
      180deg,
      rgba(18, 18, 18, 0.62),
      rgba(18, 18, 18, 0.48)
    );
    --surface-categories-border: rgba(255, 255, 255, 0.1);
    --surface-categories-shadow: 0 24px 60px rgba(0, 0, 0, 0.4);
    --surface-categories-shadow-mobile:
      0 16px 40px rgba(0, 0, 0, 0.36), inset 0 1px 0 rgba(255, 255, 255, 0.08);
    --surface-categories-fade: rgba(10, 12, 20, 0.88);

    --surface-category-chip-bg: linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.1),
      rgba(255, 255, 255, 0.06)
    );
    --surface-category-chip-border: rgba(255, 255, 255, 0.12);
    --surface-category-chip-color: rgba(255, 255, 255, 0.82);
    --surface-category-chip-hover-border: rgba(160, 245, 255, 0.18);
    --surface-category-chip-hover-shadow: 0 18px 36px rgba(0, 0, 0, 0.3);
    --surface-category-chip-focus: rgba(160, 245, 255, 0.18);
    --surface-category-chip-active-bg: linear-gradient(
      135deg,
      rgba(0, 210, 255, 0.22),
      rgba(127, 90, 255, 0.2)
    );
    --surface-category-chip-active-color: rgba(255, 255, 255, 0.96);
    --surface-category-chip-active-border: rgba(255, 255, 255, 0.12);
    --surface-category-chip-active-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);

    --surface-home-controls-bg: linear-gradient(
      180deg,
      rgba(18, 18, 18, 0.62),
      rgba(18, 18, 18, 0.48)
    );
    --surface-home-controls-stuck-bg: linear-gradient(
      180deg,
      rgba(18, 18, 18, 0.58),
      rgba(18, 18, 18, 0.44)
    );
    --surface-home-controls-border: rgba(255, 255, 255, 0.1);
    --surface-home-controls-shadow:
      0 24px 60px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.08);

    --surface-home-chip-bg: linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.1),
      rgba(255, 255, 255, 0.06)
    );
    --surface-home-chip-border: rgba(255, 255, 255, 0.12);
    --surface-home-chip-color: rgba(255, 255, 255, 0.84);
    --surface-home-chip-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
    --surface-home-chip-hover-border: rgba(160, 245, 255, 0.18);
    --surface-home-chip-hover-shadow:
      0 18px 38px rgba(0, 0, 0, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.1);
    --surface-home-chip-focus: rgba(160, 245, 255, 0.18);
    --surface-home-chip-active-bg: linear-gradient(
      135deg,
      rgba(0, 210, 255, 0.22),
      rgba(127, 90, 255, 0.18)
    );
    --surface-home-chip-active-color: rgba(255, 255, 255, 0.94);
    --surface-home-chip-active-border: rgba(255, 255, 255, 0.12);
    --surface-home-chip-active-shadow:
      0 18px 40px rgba(0, 0, 0, 0.35), 0 0 22px rgba(0, 210, 255, 0.1);

    --surface-home-view-toggle-bg: linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.1),
      rgba(255, 255, 255, 0.06)
    );
    --surface-home-view-toggle-border: rgba(255, 255, 255, 0.14);
    --surface-home-view-toggle-shadow:
      0 20px 55px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.1);
    --surface-home-view-btn-color: rgba(255, 255, 255, 0.78);
    --surface-home-view-btn-hover-bg: rgba(0, 210, 255, 0.1);
    --surface-home-view-btn-focus: rgba(160, 245, 255, 0.18);
    --surface-home-view-btn-active-bg: linear-gradient(
      135deg,
      rgba(0, 210, 255, 0.22),
      rgba(127, 90, 255, 0.18)
    );
    --surface-home-view-btn-active-color: rgba(255, 255, 255, 0.94);

    --surface-fav-chip-bg: linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.1),
      rgba(255, 255, 255, 0.06)
    );
    --surface-fav-chip-border: rgba(255, 255, 255, 0.12);
    --surface-fav-chip-color: rgba(255, 255, 255, 0.86);
    --surface-fav-chip-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
    --surface-fav-chip-active-bg: linear-gradient(
      135deg,
      rgba(0, 210, 255, 0.2),
      rgba(127, 90, 255, 0.18)
    );
    --surface-fav-chip-active-border: rgba(0, 210, 255, 0.18);
    --surface-fav-chip-active-color: rgba(255, 255, 255, 0.94);
    --surface-fav-chip-active-shadow:
      0 18px 40px rgba(0, 0, 0, 0.35), 0 0 22px rgba(0, 210, 255, 0.1);

    --surface-load-more-bg: linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.1),
      rgba(255, 255, 255, 0.06)
    );
    --surface-load-more-border: rgba(255, 255, 255, 0.12);
    --surface-load-more-color: rgba(255, 255, 255, 0.86);
    --surface-load-more-hover-border: rgba(160, 245, 255, 0.18);
    --surface-load-more-hover-shadow: 0 18px 40px rgba(0, 0, 0, 0.34);

    --surface-btn-secondary-bg: rgba(255, 255, 255, 0.08);
    --surface-btn-secondary-color: rgba(255, 255, 255, 0.9);
    --surface-btn-primary-bg: linear-gradient(
      135deg,
      rgba(0, 210, 255, 0.2),
      rgba(127, 90, 255, 0.18)
    );
    --surface-btn-primary-color: rgba(255, 255, 255, 0.94);
    --surface-inline-btn-color: rgba(219, 232, 255, 0.74);

    --surface-upsell-scene-bg:
      radial-gradient(
        700px 220px at 14% 0%,
        rgba(0, 210, 255, 0.12),
        transparent 60%
      ),
      radial-gradient(
        700px 240px at 92% 0%,
        rgba(127, 90, 255, 0.12),
        transparent 62%
      ),
      rgba(10, 12, 20, 0.92);
    --surface-upsell-scene-border: rgba(255, 255, 255, 0.12);
    --surface-upsell-guest-bg: rgba(255, 255, 255, 0.06);
    --surface-upsell-guest-border: rgba(255, 255, 255, 0.12);
    --surface-upsell-guest-color: rgba(255, 255, 255, 0.78);
    --surface-upsell-meta-bg: rgba(255, 255, 255, 0.06);
    --surface-upsell-meta-border: rgba(255, 255, 255, 0.12);
    --surface-upsell-meta-shadow: 0 18px 45px rgba(0, 0, 0, 0.35);
    --surface-upsell-feedback-bg: rgba(255, 255, 255, 0.06);
    --surface-upsell-feedback-border: rgba(255, 255, 255, 0.12);
    --surface-upsell-feedback-shadow: 0 18px 45px rgba(0, 0, 0, 0.35);
    --surface-upsell-feedback-color: rgba(255, 255, 255, 0.86);
    --surface-upsell-feedback-label: rgba(255, 255, 255, 0.62);

    --surface-conflict-bubble-bg:
      radial-gradient(
        560px 200px at 14% 0%,
        rgba(255, 74, 74, 0.16),
        transparent 60%
      ),
      radial-gradient(
        520px 210px at 92% 0%,
        rgba(255, 206, 84, 0.14),
        transparent 62%
      ),
      rgba(10, 12, 20, 0.92);
    --surface-conflict-bubble-border: rgba(255, 255, 255, 0.12);
    --surface-conflict-bubble-color: rgba(255, 255, 255, 0.9);
    --surface-conflict-label-bg: rgba(255, 255, 255, 0.06);
    --surface-conflict-label-border: rgba(255, 255, 255, 0.12);
    --surface-conflict-label-color: rgba(255, 255, 255, 0.78);
    --surface-conflict-badge-bg: rgba(255, 255, 255, 0.06);
    --surface-conflict-badge-border: rgba(255, 255, 255, 0.12);
    --surface-conflict-badge-color: rgba(255, 255, 255, 0.78);

    --surface-allergen-hero-bg: linear-gradient(
      145deg,
      rgba(255, 206, 84, 0.16),
      rgba(0, 210, 255, 0.12),
      rgba(127, 90, 255, 0.14)
    );
    --surface-allergen-hero-border: rgba(255, 255, 255, 0.12);
    --surface-allergen-hero-shadow: 0 24px 60px rgba(0, 0, 0, 0.44);
    --surface-allergen-hero-title: rgba(255, 255, 255, 0.92);
    --surface-allergen-hero-sub: rgba(255, 255, 255, 0.72);
    --surface-allergen-mode-bg: rgba(255, 255, 255, 0.08);
    --surface-allergen-mode-border: rgba(255, 255, 255, 0.14);
    --surface-allergen-mode-btn-color: rgba(255, 255, 255, 0.78);
    --surface-allergen-mode-btn-active-bg: rgba(255, 255, 255, 0.12);
    --surface-allergen-mode-btn-active-color: rgba(255, 255, 255, 0.92);
    --surface-allergen-mode-btn-active-shadow: 0 18px 45px rgba(0, 0, 0, 0.35);
    --surface-allergen-mode-note: rgba(255, 255, 255, 0.7);
    --surface-allergen-card-bg: rgba(10, 12, 20, 0.92);
    --surface-allergen-card-border: rgba(255, 255, 255, 0.12);
    --surface-allergen-card-shadow: 0 28px 75px rgba(0, 0, 0, 0.55);
    --surface-allergen-item-name: rgba(255, 255, 255, 0.92);
    --surface-allergen-timer: rgba(255, 255, 255, 0.7);
    --surface-allergen-item-comp: rgba(255, 255, 255, 0.78);
    --surface-allergen-hint-bg: rgba(255, 206, 84, 0.1);
    --surface-allergen-hint-border: rgba(255, 206, 84, 0.22);
    --surface-allergen-hint-color: rgba(255, 255, 255, 0.78);
    --surface-allergen-item-note: rgba(255, 255, 255, 0.8);
    --surface-allergen-selected-empty: rgba(255, 255, 255, 0.6);
    --surface-allergen-chip-bg: rgba(0, 210, 255, 0.1);
    --surface-allergen-chip-border: rgba(0, 210, 255, 0.22);
    --surface-allergen-chip-color: rgba(255, 255, 255, 0.88);
    --surface-allergen-chip-hover-bg: rgba(0, 210, 255, 0.14);
    --surface-allergen-chip-hover-border: rgba(0, 210, 255, 0.3);
    --surface-allergen-chip-x-bg: rgba(255, 255, 255, 0.1);
    --surface-allergen-chip-x-color: rgba(255, 255, 255, 0.85);
    --surface-allergen-option-selected-border: rgba(0, 210, 255, 0.55);
    --surface-allergen-option-selected-bg: rgba(0, 210, 255, 0.14);
    --surface-allergen-option-correct-bg: linear-gradient(
      135deg,
      rgba(0, 200, 83, 0.86),
      rgba(0, 165, 180, 0.82)
    );
    --surface-allergen-option-correct-border: rgba(0, 200, 83, 0.68);
    --surface-allergen-option-correct-color: #fff;
    --surface-allergen-option-correct-shadow: 0 18px 42px rgba(0, 200, 83, 0.24);
    --surface-allergen-option-wrong-bg: linear-gradient(
      135deg,
      rgba(255, 61, 0, 0.86),
      rgba(255, 138, 0, 0.82)
    );
    --surface-allergen-option-wrong-border: rgba(255, 61, 0, 0.68);
    --surface-allergen-option-wrong-color: #fff;
    --surface-allergen-option-wrong-shadow: 0 18px 42px rgba(255, 61, 0, 0.24);
    --surface-allergen-actions-bg: linear-gradient(
      180deg,
      rgba(10, 12, 20, 0),
      rgba(10, 12, 20, 0.76) 24%,
      rgba(10, 12, 20, 0.92)
    );
    --surface-allergen-actions-border: rgba(255, 255, 255, 0.12);

    --surface-game-hint-bg: linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.16),
      rgba(255, 255, 255, 0.08)
    );
    --surface-game-hint-color: rgba(255, 255, 255, 0.92);
    --surface-game-hint-border: rgba(255, 255, 255, 0.22);
    --surface-game-hint-shadow: 0 16px 36px rgba(0, 0, 0, 0.4);
    --surface-game-hint-shadow-shifted: 0 20px 46px rgba(0, 0, 0, 0.5);
    --surface-game-hint-oracle-bg: linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.18),
      rgba(127, 90, 255, 0.14)
    );
    --surface-game-hint-oracle-color: rgba(255, 255, 255, 0.94);
    --surface-game-hint-memory-bg: linear-gradient(
      135deg,
      rgba(255, 200, 140, 0.18),
      rgba(127, 90, 255, 0.12)
    );
    --surface-game-hint-memory-color: rgba(255, 236, 220, 0.94);
    --surface-game-hint-memory-border: rgba(255, 200, 140, 0.32);
    --game-btn-text: rgba(255, 255, 255, 0.92);

    --surface-oracle-card: rgba(255, 255, 255, 0.08);
    --surface-oracle-card-border: rgba(255, 255, 255, 0.08);
    --surface-oracle-card-shadow: 0 30px 80px rgba(0, 0, 0, 0.4);
    --surface-oracle-sub: rgba(219, 232, 255, 0.72);
    --surface-oracle-segment: rgba(255, 255, 255, 0.06);
    --surface-oracle-seg-active: rgba(255, 255, 255, 0.16);
    --surface-oracle-seg-active-shadow: 0 10px 26px rgba(0, 0, 0, 0.18);
    --surface-oracle-section-title: rgba(255, 255, 255, 0.9);
    --surface-oracle-chip: rgba(255, 255, 255, 0.06);
    --surface-oracle-chip-border: rgba(255, 255, 255, 0.12);
    --surface-oracle-chip-shadow-hover: 0 18px 44px rgba(0, 0, 0, 0.28);
    --surface-oracle-note-bg: rgba(255, 255, 255, 0.06);
    --surface-oracle-note-border: rgba(255, 255, 255, 0.12);
    --surface-oracle-note-text: rgba(219, 232, 255, 0.78);
    --surface-oracle-note-muted: rgba(219, 232, 255, 0.78);
    --surface-oracle-status-bg: rgba(255, 255, 255, 0.1);
    --surface-oracle-status-border: rgba(255, 255, 255, 0.2);
    --surface-oracle-status-shadow: 0 10px 20px rgba(2, 3, 12, 0.4);
  }
}

@media (max-width: 520px) {
  :root {
    --header-pad-x: 12px;
    --header-overlap: 14px;
  }
}

@media (min-width: 980px) {
  :root {
    --header-pad-x: 20px;
    --header-overlap: 22px;
  }
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}
body {
  background-color: var(--light-bg);
  background-image:
    radial-gradient(
      1100px 560px at 18% -12%,
      rgba(0, 210, 255, 0.16),
      transparent 60%
    ),
    radial-gradient(
      900px 520px at 88% -6%,
      rgba(127, 90, 255, 0.14),
      transparent 56%
    ),
    radial-gradient(
      900px 680px at 50% 120%,
      rgba(255, 206, 84, 0.1),
      transparent 58%
    ),
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.08),
      rgba(255, 255, 255, 0) 32%,
      rgba(0, 0, 0, 0) 70%,
      rgba(0, 0, 0, 0.03)
    );
  background-repeat: no-repeat;
  background-size: 100% 100%;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  font-family: "Montserrat", sans-serif;
  color: var(--text-gray);
  padding-bottom: calc(var(--nav-height) + var(--safe-area-bottom) + 20px);
  overflow-x: hidden;
  letter-spacing: -0.01em;
}
@media (prefers-color-scheme: dark) {
  body {
    background-image:
      radial-gradient(
        1200px 640px at 18% -12%,
        rgba(0, 240, 255, 0.14),
        transparent 62%
      ),
      radial-gradient(
        980px 600px at 88% -10%,
        rgba(127, 90, 255, 0.14),
        transparent 58%
      ),
      radial-gradient(
        1000px 760px at 50% 120%,
        rgba(255, 206, 84, 0.08),
        transparent 62%
      ),
      linear-gradient(
        180deg,
        rgba(255, 255, 255, 0.04),
        rgba(255, 255, 255, 0) 28%,
        rgba(0, 0, 0, 0) 72%,
        rgba(0, 0, 0, 0.24)
      );
  }
}

/* Forced dark theme (manual toggle) */
body[data-theme="dark"] {
  color-scheme: dark;
  --light-bg: #070a14;
  --text-gray: rgba(219, 232, 255, 0.82);
  --focus-ring: rgba(0, 210, 255, 0.95);
  --focus-ring-soft: rgba(0, 210, 255, 0.36);
  --focus-ring-muted: rgba(160, 245, 255, 0.16);

  --surface-nav: rgba(18, 18, 18, 0.78);
  --surface-nav-border: rgba(255, 255, 255, 0.12);
  --surface-nav-shadow:
    0 -8px 26px rgba(0, 0, 0, 0.45), 0 22px 70px rgba(0, 0, 0, 0.55);
  --surface-nav-icon: rgba(255, 255, 255, 0.06);
  --surface-nav-icon-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
  --surface-nav-icon-active: linear-gradient(
    135deg,
    rgba(0, 210, 255, 0.18),
    rgba(127, 90, 255, 0.14)
  );
  --surface-nav-icon-active-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
  --nav-item-color: rgba(255, 255, 255, 0.7);
  --nav-item-active-color: rgba(160, 245, 255, 0.92);

  --surface-card:
    radial-gradient(
      860px 280px at 50% -140px,
      rgba(255, 255, 255, 0.12),
      rgba(255, 255, 255, 0) 64%
    ),
    linear-gradient(180deg, rgba(14, 16, 26, 0.92), rgba(10, 12, 20, 0.92));
  --surface-card-border: rgba(255, 255, 255, 0.1);
  --surface-card-shadow:
    0 28px 92px rgba(0, 0, 0, 0.48), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  --surface-card-border-hover: rgba(0, 210, 255, 0.22);
  --surface-card-shadow-hover:
    0 38px 120px rgba(0, 0, 0, 0.62), 0 0 0 1px rgba(0, 210, 255, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
  --surface-card-image: rgba(255, 255, 255, 0.06);

  --surface-modal:
    radial-gradient(circle at 18% 0%, rgba(0, 210, 255, 0.1), transparent 42%),
    radial-gradient(
      circle at 100% 18%,
      rgba(127, 90, 255, 0.1),
      transparent 48%
    ),
    linear-gradient(180deg, rgba(16, 18, 30, 0.98), rgba(10, 12, 20, 0.98));
  --surface-modal-border: rgba(255, 255, 255, 0.12);
  --surface-modal-shadow: 0 30px 90px rgba(0, 0, 0, 0.55);
  --surface-modal-grip: rgba(255, 255, 255, 0.22);
  --surface-modal-image: rgba(255, 255, 255, 0.06);
  --surface-modal-title: rgba(255, 255, 255, 0.94);
  --surface-modal-sub: rgba(219, 232, 255, 0.72);
  --surface-modal-divider: rgba(255, 255, 255, 0.1);
  --surface-modal-label: rgba(255, 255, 255, 0.62);
  --surface-modal-text: rgba(255, 255, 255, 0.86);
  --surface-modal-mic-bg: rgba(255, 255, 255, 0.08);
  --surface-modal-mic-border: rgba(255, 255, 255, 0.14);
  --surface-modal-mic-text: rgba(255, 255, 255, 0.86);

  --surface-sticky: linear-gradient(
    180deg,
    rgba(14, 16, 26, 0.78),
    rgba(10, 12, 20, 0.66)
  );
  --surface-sticky-border: rgba(255, 255, 255, 0.08);
  --surface-sticky-shadow:
    0 22px 70px rgba(0, 0, 0, 0.52), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  --surface-sticky-tail: linear-gradient(
    180deg,
    rgba(10, 12, 20, 0),
    rgba(10, 12, 20, 0.62),
    rgba(10, 12, 20, 0)
  );

  --surface-search: linear-gradient(
    180deg,
    rgba(22, 24, 36, 0.84),
    rgba(12, 14, 24, 0.7)
  );
  --surface-search-stuck: linear-gradient(
    180deg,
    rgba(20, 22, 34, 0.78),
    rgba(10, 12, 20, 0.62)
  );
  --surface-search-border: rgba(255, 255, 255, 0.12);
  --surface-search-shadow:
    0 26px 70px rgba(0, 0, 0, 0.48), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  --surface-search-shadow-stuck:
    0 26px 70px rgba(0, 0, 0, 0.48), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  --surface-search-shadow-mobile:
    0 18px 46px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  --surface-search-shadow-stuck-mobile:
    0 16px 40px rgba(0, 0, 0, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  --surface-search-focus-border: rgba(160, 245, 255, 0.18);
  --surface-search-focus-ring: rgba(160, 245, 255, 0.1);
  --surface-search-focus-shadow: 0 26px 70px rgba(0, 0, 0, 0.5);
  --surface-search-toggle-bg: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.1),
    rgba(255, 255, 255, 0.06)
  );
  --surface-search-toggle-border: rgba(255, 255, 255, 0.14);
  --search-input-color: rgba(255, 255, 255, 0.92);
  --search-input-focus-color: rgba(255, 255, 255, 0.96);
  --search-input-placeholder: rgba(219, 232, 255, 0.6);

  --surface-tag-btn:
    radial-gradient(
      140% 160% at 18% 22%,
      rgba(255, 255, 255, 0.14),
      rgba(255, 255, 255, 0.04) 55%,
      rgba(0, 0, 0, 0.12) 100%
    ),
    rgba(255, 255, 255, 0.06);
  --surface-tag-btn-border: rgba(255, 255, 255, 0.14);
  --surface-tag-btn-shadow:
    0 18px 50px rgba(0, 0, 0, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.1);
  --surface-tag-btn-shadow-mobile:
    0 12px 30px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.1);
  --surface-tag-btn-hover:
    radial-gradient(
      140% 160% at 18% 22%,
      rgba(255, 255, 255, 0.18),
      rgba(255, 255, 255, 0.06) 55%,
      rgba(0, 210, 255, 0.08) 100%
    ),
    rgba(255, 255, 255, 0.07);
  --surface-tag-btn-hover-border: rgba(160, 245, 255, 0.18);
  --surface-tag-btn-hover-shadow:
    0 18px 50px rgba(0, 0, 0, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.12);
  --surface-tag-btn-focus: rgba(160, 245, 255, 0.18);
  --surface-tag-btn-color: rgba(255, 255, 255, 0.9);

  --surface-tag-cloud-bg: rgba(18, 18, 18, 0.54);
  --surface-tag-cloud-border: rgba(255, 255, 255, 0.1);
  --surface-tag-cloud-shadow: 0 24px 60px rgba(0, 0, 0, 0.4);

  --surface-categories-bg: linear-gradient(
    180deg,
    rgba(18, 18, 18, 0.62),
    rgba(18, 18, 18, 0.48)
  );
  --surface-categories-border: rgba(255, 255, 255, 0.1);
  --surface-categories-shadow: 0 24px 60px rgba(0, 0, 0, 0.4);
  --surface-categories-shadow-mobile:
    0 16px 40px rgba(0, 0, 0, 0.36), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  --surface-categories-fade: rgba(10, 12, 20, 0.88);

  --surface-category-chip-bg: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.1),
    rgba(255, 255, 255, 0.06)
  );
  --surface-category-chip-border: rgba(255, 255, 255, 0.12);
  --surface-category-chip-color: rgba(255, 255, 255, 0.82);
  --surface-category-chip-hover-border: rgba(160, 245, 255, 0.18);
  --surface-category-chip-hover-shadow: 0 18px 36px rgba(0, 0, 0, 0.3);
  --surface-category-chip-focus: rgba(160, 245, 255, 0.18);
  --surface-category-chip-active-bg: linear-gradient(
    135deg,
    rgba(0, 210, 255, 0.22),
    rgba(127, 90, 255, 0.2)
  );
  --surface-category-chip-active-color: rgba(255, 255, 255, 0.96);
  --surface-category-chip-active-border: rgba(255, 255, 255, 0.12);
  --surface-category-chip-active-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);

  --surface-home-controls-bg: linear-gradient(
    180deg,
    rgba(18, 18, 18, 0.62),
    rgba(18, 18, 18, 0.48)
  );
  --surface-home-controls-stuck-bg: linear-gradient(
    180deg,
    rgba(18, 18, 18, 0.58),
    rgba(18, 18, 18, 0.44)
  );
  --surface-home-controls-border: rgba(255, 255, 255, 0.1);
  --surface-home-controls-shadow:
    0 24px 60px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.08);

  --surface-home-chip-bg: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.1),
    rgba(255, 255, 255, 0.06)
  );
  --surface-home-chip-border: rgba(255, 255, 255, 0.12);
  --surface-home-chip-color: rgba(255, 255, 255, 0.84);
  --surface-home-chip-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
  --surface-home-chip-hover-border: rgba(160, 245, 255, 0.18);
  --surface-home-chip-hover-shadow:
    0 18px 38px rgba(0, 0, 0, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.1);
  --surface-home-chip-focus: rgba(160, 245, 255, 0.18);
  --surface-home-chip-active-bg: linear-gradient(
    135deg,
    rgba(0, 210, 255, 0.22),
    rgba(127, 90, 255, 0.18)
  );
  --surface-home-chip-active-color: rgba(255, 255, 255, 0.94);
  --surface-home-chip-active-border: rgba(255, 255, 255, 0.12);
  --surface-home-chip-active-shadow:
    0 18px 40px rgba(0, 0, 0, 0.35), 0 0 22px rgba(0, 210, 255, 0.1);

  --surface-home-view-toggle-bg: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.1),
    rgba(255, 255, 255, 0.06)
  );
  --surface-home-view-toggle-border: rgba(255, 255, 255, 0.14);
  --surface-home-view-toggle-shadow:
    0 20px 55px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.1);
  --surface-home-view-btn-color: rgba(255, 255, 255, 0.78);
  --surface-home-view-btn-hover-bg: rgba(0, 210, 255, 0.1);
  --surface-home-view-btn-focus: rgba(160, 245, 255, 0.18);
  --surface-home-view-btn-active-bg: linear-gradient(
    135deg,
    rgba(0, 210, 255, 0.22),
    rgba(127, 90, 255, 0.18)
  );
  --surface-home-view-btn-active-color: rgba(255, 255, 255, 0.94);

  --surface-fav-chip-bg: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.1),
    rgba(255, 255, 255, 0.06)
  );
  --surface-fav-chip-border: rgba(255, 255, 255, 0.12);
  --surface-fav-chip-color: rgba(255, 255, 255, 0.86);
  --surface-fav-chip-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
  --surface-fav-chip-active-bg: linear-gradient(
    135deg,
    rgba(0, 210, 255, 0.2),
    rgba(127, 90, 255, 0.18)
  );
  --surface-fav-chip-active-border: rgba(0, 210, 255, 0.18);
  --surface-fav-chip-active-color: rgba(255, 255, 255, 0.94);
  --surface-fav-chip-active-shadow:
    0 18px 40px rgba(0, 0, 0, 0.35), 0 0 22px rgba(0, 210, 255, 0.1);

  --surface-load-more-bg: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.1),
    rgba(255, 255, 255, 0.06)
  );
  --surface-load-more-border: rgba(255, 255, 255, 0.12);
  --surface-load-more-color: rgba(255, 255, 255, 0.86);
  --surface-load-more-hover-border: rgba(160, 245, 255, 0.18);
  --surface-load-more-hover-shadow: 0 18px 40px rgba(0, 0, 0, 0.34);

  --surface-btn-secondary-bg: rgba(255, 255, 255, 0.08);
  --surface-btn-secondary-color: rgba(255, 255, 255, 0.9);
  --surface-btn-primary-bg: linear-gradient(
    135deg,
    rgba(0, 210, 255, 0.2),
    rgba(127, 90, 255, 0.18)
  );
  --surface-btn-primary-color: rgba(255, 255, 255, 0.94);
  --surface-inline-btn-color: rgba(219, 232, 255, 0.74);

  --surface-upsell-scene-bg:
    radial-gradient(
      700px 220px at 14% 0%,
      rgba(0, 210, 255, 0.12),
      transparent 60%
    ),
    radial-gradient(
      700px 240px at 92% 0%,
      rgba(127, 90, 255, 0.12),
      transparent 62%
    ),
    rgba(10, 12, 20, 0.92);
  --surface-upsell-scene-border: rgba(255, 255, 255, 0.12);
  --surface-upsell-guest-bg: rgba(255, 255, 255, 0.06);
  --surface-upsell-guest-border: rgba(255, 255, 255, 0.12);
  --surface-upsell-guest-color: rgba(255, 255, 255, 0.78);
  --surface-upsell-meta-bg: rgba(255, 255, 255, 0.06);
  --surface-upsell-meta-border: rgba(255, 255, 255, 0.12);
  --surface-upsell-meta-shadow: 0 18px 45px rgba(0, 0, 0, 0.35);
  --surface-upsell-feedback-bg: rgba(255, 255, 255, 0.06);
  --surface-upsell-feedback-border: rgba(255, 255, 255, 0.12);
  --surface-upsell-feedback-shadow: 0 18px 45px rgba(0, 0, 0, 0.35);
  --surface-upsell-feedback-color: rgba(255, 255, 255, 0.86);
  --surface-upsell-feedback-label: rgba(255, 255, 255, 0.62);

  --surface-conflict-bubble-bg:
    radial-gradient(
      560px 200px at 14% 0%,
      rgba(255, 74, 74, 0.16),
      transparent 60%
    ),
    radial-gradient(
      520px 210px at 92% 0%,
      rgba(255, 206, 84, 0.14),
      transparent 62%
    ),
    rgba(10, 12, 20, 0.92);
  --surface-conflict-bubble-border: rgba(255, 255, 255, 0.12);
  --surface-conflict-bubble-color: rgba(255, 255, 255, 0.9);
  --surface-conflict-label-bg: rgba(255, 255, 255, 0.06);
  --surface-conflict-label-border: rgba(255, 255, 255, 0.12);
  --surface-conflict-label-color: rgba(255, 255, 255, 0.78);
  --surface-conflict-badge-bg: rgba(255, 255, 255, 0.06);
  --surface-conflict-badge-border: rgba(255, 255, 255, 0.12);
  --surface-conflict-badge-color: rgba(255, 255, 255, 0.78);

  --surface-allergen-hero-bg: linear-gradient(
    145deg,
    rgba(255, 206, 84, 0.16),
    rgba(0, 210, 255, 0.12),
    rgba(127, 90, 255, 0.14)
  );
  --surface-allergen-hero-border: rgba(255, 255, 255, 0.12);
  --surface-allergen-hero-shadow: 0 24px 60px rgba(0, 0, 0, 0.44);
  --surface-allergen-hero-title: rgba(255, 255, 255, 0.92);
  --surface-allergen-hero-sub: rgba(255, 255, 255, 0.72);
  --surface-allergen-mode-bg: rgba(255, 255, 255, 0.08);
  --surface-allergen-mode-border: rgba(255, 255, 255, 0.14);
  --surface-allergen-mode-btn-color: rgba(255, 255, 255, 0.78);
  --surface-allergen-mode-btn-active-bg: rgba(255, 255, 255, 0.12);
  --surface-allergen-mode-btn-active-color: rgba(255, 255, 255, 0.92);
  --surface-allergen-mode-btn-active-shadow: 0 18px 45px rgba(0, 0, 0, 0.35);
  --surface-allergen-mode-note: rgba(255, 255, 255, 0.7);
  --surface-allergen-card-bg: rgba(10, 12, 20, 0.92);
  --surface-allergen-card-border: rgba(255, 255, 255, 0.12);
  --surface-allergen-card-shadow: 0 28px 75px rgba(0, 0, 0, 0.55);
  --surface-allergen-item-name: rgba(255, 255, 255, 0.92);
  --surface-allergen-timer: rgba(255, 255, 255, 0.7);
  --surface-allergen-item-comp: rgba(255, 255, 255, 0.78);
  --surface-allergen-hint-bg: rgba(255, 206, 84, 0.1);
  --surface-allergen-hint-border: rgba(255, 206, 84, 0.22);
  --surface-allergen-hint-color: rgba(255, 255, 255, 0.78);
  --surface-allergen-item-note: rgba(255, 255, 255, 0.8);
  --surface-allergen-selected-empty: rgba(255, 255, 255, 0.6);
  --surface-allergen-chip-bg: rgba(0, 210, 255, 0.1);
  --surface-allergen-chip-border: rgba(0, 210, 255, 0.22);
  --surface-allergen-chip-color: rgba(255, 255, 255, 0.88);
  --surface-allergen-chip-hover-bg: rgba(0, 210, 255, 0.14);
  --surface-allergen-chip-hover-border: rgba(0, 210, 255, 0.3);
  --surface-allergen-chip-x-bg: rgba(255, 255, 255, 0.1);
  --surface-allergen-chip-x-color: rgba(255, 255, 255, 0.85);
  --surface-allergen-option-selected-border: rgba(0, 210, 255, 0.55);
  --surface-allergen-option-selected-bg: rgba(0, 210, 255, 0.14);
  --surface-allergen-option-correct-bg: linear-gradient(
    135deg,
    rgba(0, 200, 83, 0.86),
    rgba(0, 165, 180, 0.82)
  );
  --surface-allergen-option-correct-border: rgba(0, 200, 83, 0.68);
  --surface-allergen-option-correct-color: #fff;
  --surface-allergen-option-correct-shadow: 0 18px 42px rgba(0, 200, 83, 0.24);
  --surface-allergen-option-wrong-bg: linear-gradient(
    135deg,
    rgba(255, 61, 0, 0.86),
    rgba(255, 138, 0, 0.82)
  );
  --surface-allergen-option-wrong-border: rgba(255, 61, 0, 0.68);
  --surface-allergen-option-wrong-color: #fff;
  --surface-allergen-option-wrong-shadow: 0 18px 42px rgba(255, 61, 0, 0.24);
  --surface-allergen-actions-bg: linear-gradient(
    180deg,
    rgba(10, 12, 20, 0),
    rgba(10, 12, 20, 0.76) 24%,
    rgba(10, 12, 20, 0.92)
  );
  --surface-allergen-actions-border: rgba(255, 255, 255, 0.12);

  --surface-game-hint-bg: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.16),
    rgba(255, 255, 255, 0.08)
  );
  --surface-game-hint-color: rgba(255, 255, 255, 0.92);
  --surface-game-hint-border: rgba(255, 255, 255, 0.22);
  --surface-game-hint-shadow: 0 16px 36px rgba(0, 0, 0, 0.4);
  --surface-game-hint-shadow-shifted: 0 20px 46px rgba(0, 0, 0, 0.5);
  --surface-game-hint-oracle-bg: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.18),
    rgba(127, 90, 255, 0.14)
  );
  --surface-game-hint-oracle-color: rgba(255, 255, 255, 0.94);
  --surface-game-hint-memory-bg: linear-gradient(
    135deg,
    rgba(255, 200, 140, 0.18),
    rgba(127, 90, 255, 0.12)
  );
  --surface-game-hint-memory-color: rgba(255, 236, 220, 0.94);
  --surface-game-hint-memory-border: rgba(255, 200, 140, 0.32);
  --game-btn-text: rgba(255, 255, 255, 0.92);

  --surface-oracle-card: rgba(255, 255, 255, 0.08);
  --surface-oracle-card-border: rgba(255, 255, 255, 0.08);
  --surface-oracle-card-shadow: 0 30px 80px rgba(0, 0, 0, 0.4);
  --surface-oracle-sub: rgba(219, 232, 255, 0.72);
  --surface-oracle-segment: rgba(255, 255, 255, 0.06);
  --surface-oracle-seg-active: rgba(255, 255, 255, 0.16);
  --surface-oracle-seg-active-shadow: 0 10px 26px rgba(0, 0, 0, 0.18);
  --surface-oracle-section-title: rgba(255, 255, 255, 0.9);
  --surface-oracle-chip: rgba(255, 255, 255, 0.06);
  --surface-oracle-chip-border: rgba(255, 255, 255, 0.12);
  --surface-oracle-chip-shadow-hover: 0 18px 44px rgba(0, 0, 0, 0.28);
  --surface-oracle-note-bg: rgba(255, 255, 255, 0.06);
  --surface-oracle-note-border: rgba(255, 255, 255, 0.12);
  --surface-oracle-note-text: rgba(219, 232, 255, 0.78);
  --surface-oracle-note-muted: rgba(219, 232, 255, 0.78);
  --surface-oracle-status-bg: rgba(255, 255, 255, 0.1);
  --surface-oracle-status-border: rgba(255, 255, 255, 0.2);
  --surface-oracle-status-shadow: 0 10px 20px rgba(2, 3, 12, 0.4);
  background-image:
    radial-gradient(
      1200px 640px at 18% -12%,
      rgba(0, 240, 255, 0.14),
      transparent 62%
    ),
    radial-gradient(
      980px 600px at 88% -10%,
      rgba(127, 90, 255, 0.14),
      transparent 58%
    ),
    radial-gradient(
      1000px 760px at 50% 120%,
      rgba(255, 206, 84, 0.08),
      transparent 62%
    ),
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.04),
      rgba(255, 255, 255, 0) 28%,
      rgba(0, 0, 0, 0) 72%,
      rgba(0, 0, 0, 0.24)
    );
}

/* === ЭКРАН АВТОРИЗАЦИИ === */
#auth-screen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  background: radial-gradient(circle at center, #0b1021 0%, #000000 100%);
  z-index: 2000;
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 30px;
  text-align: center;
}
.auth-box {
  position: relative;
  background: linear-gradient(
    145deg,
    rgba(255, 255, 255, 0.12),
    rgba(255, 255, 255, 0.04)
  );
  backdrop-filter: blur(12px);
  padding: 34px 28px 30px;
  border-radius: 22px;
  width: 100%;
  max-width: 380px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
}
@media (max-width: 520px) {
  .auth-box {
    padding: 28px 22px 26px;
    border-radius: 20px;
  }
  .auth-title {
    font-size: 1.45rem;
  }
  .auth-desc {
    font-size: 0.9rem;
  }
}
.auth-hero {
  font-size: 46px;
  margin-bottom: 12px;
  filter: drop-shadow(0 0 12px rgba(0, 210, 255, 0.35));
}
.auth-title {
  color: white;
  font-size: 1.7rem;
  font-weight: 800;
  margin-bottom: 10px;
  letter-spacing: 0.5px;
}
.auth-desc {
  color: #d6e2ff;
  font-size: 0.95rem;
  margin-bottom: 18px;
  line-height: 1.45;
  opacity: 0.9;
}
.auth-input {
  width: 100%;
  padding: 15px;
  border-radius: 12px;
  border: none;
  background: rgba(255, 255, 255, 0.92);
  font-size: 1rem;
  margin-bottom: 10px;
  text-align: center;
  color: #333;
  font-weight: 700;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
}
.auth-input:focus {
  outline: 2px solid rgba(0, 210, 255, 0.35);
  background: #fff;
}
.auth-hint {
  color: #9fb3d9;
  font-size: 0.82rem;
  margin-bottom: 16px;
  opacity: 0.85;
}
.auth-btn {
  position: relative;
  width: 100%;
  padding: 15px;
  border-radius: 14px;
  border: none;
  background: linear-gradient(120deg, #00d2ff, #7f5aff);
  color: #0b1021;
  font-weight: 850;
  font-size: 1rem;
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 1px;
  box-shadow: 0 15px 45px rgba(0, 210, 255, 0.25);
  z-index: 2;
}
.auth-btn:active {
  transform: translateY(1px);
}
.auth-btn-glow {
  position: absolute;
  inset: auto 10% -18px 10%;
  height: 28px;
  background: radial-gradient(
    60% 120% at 50% 30%,
    rgba(0, 210, 255, 0.28),
    transparent 65%
  );
  filter: blur(12px);
  z-index: 1;
}

/* === ЗАГРУЗЧИК === */
#loader-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  background: radial-gradient(circle at center, #0b1021 0%, #000000 100%);
  z-index: 9999;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  transition:
    opacity 1s ease-out,
    visibility 1s;
}
#loader-wrapper.hidden {
  opacity: 0;
  visibility: hidden;
}
.stars {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image:
    radial-gradient(1.5px 1.5px at 20px 30px, #fff, transparent),
    radial-gradient(2px 2px at 40px 70px, #fff, transparent),
    radial-gradient(1px 1px at 90px 40px, #fff, transparent);
  background-repeat: repeat;
  background-size: 300px 300px;
  opacity: 0.7;
  animation: twinkle 4s infinite;
  z-index: 1;
}
.meteor {
  position: absolute;
  top: 50%;
  left: 50%;
  height: 2px;
  background: linear-gradient(-45deg, #fff, rgba(0, 0, 255, 0));
  border-radius: 999px;
  filter: drop-shadow(0 0 6px #699bff);
  animation:
    tail 3000ms ease-in-out infinite,
    shooting 3000ms ease-in-out infinite;
  opacity: 0;
  z-index: 0;
  transform: rotate(-45deg);
}
.meteor:nth-child(1) {
  top: 0;
  left: 80%;
  width: 150px;
  animation-delay: 1s;
}
.meteor:nth-child(2) {
  top: 10%;
  left: 50%;
  width: 100px;
  animation-delay: 2.5s;
}
.meteor:nth-child(3) {
  top: 40%;
  left: 90%;
  width: 80px;
  animation-delay: 3.5s;
}

.moon-container {
  position: relative;
  width: 150px;
  height: 150px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 50px;
  z-index: 10;
}
.moon {
  width: 80px;
  height: 80px;
  background: radial-gradient(circle at 30% 30%, #ffffff, #dbe4ff, #5e5e85);
  border-radius: 50%;
  box-shadow: 0 0 40px rgba(130, 160, 255, 0.5);
  animation: moonPulse 3s infinite ease-in-out;
}
.orbit {
  position: absolute;
  width: 100%;
  height: 100%;
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-top: 2px solid #00d2ff;
  border-radius: 50%;
  animation: spin 1.5s linear infinite;
}
.orbit::before {
  content: "";
  position: absolute;
  top: 12px;
  right: 18px;
  width: 8px;
  height: 8px;
  background: #00d2ff;
  border-radius: 50%;
  box-shadow: 0 0 10px #00d2ff;
}
.loader-orbit {
  position: absolute;
  width: 140px;
  height: 140px;
  border-radius: 50%;
  border: 1px dashed rgba(255, 255, 255, 0.15);
  animation: spin 4s linear infinite;
}
.loader-sat {
  position: absolute;
  top: -6px;
  left: 50%;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: linear-gradient(135deg, #00d2ff, #7f5aff);
  box-shadow: 0 0 10px rgba(0, 210, 255, 0.5);
  transform: translateX(-50%);
}

.text-box {
  position: relative;
  z-index: 20;
  text-align: center;
  margin-bottom: 80px;
}
.text-box h1 {
  font-size: 28px;
  margin: 0;
  color: #fff;
  letter-spacing: 4px;
  text-transform: uppercase;
  text-shadow: 0 0 10px rgba(0, 210, 255, 0.6);
  animation: neonFlicker 3s infinite alternate;
}
.text-box p {
  font-size: 12px;
  color: #00d2ff;
  margin-top: 8px;
  letter-spacing: 1px;
  animation: blink 1s infinite alternate;
}

.loading-container {
  position: absolute;
  bottom: 20%;
  left: 50%;
  transform: translateX(-50%);
  width: 80%;
  max-width: 300px;
  text-align: center;
  z-index: 30;
}
.loading-text {
  color: #ffffff;
  font-size: 13px;
  font-weight: 300;
  letter-spacing: 0.5px;
  margin-bottom: 12px;
  opacity: 0.9;
  animation: pulseText 2s infinite;
}
.loader-subtext {
  color: #d8e7ff;
  font-size: 12px;
  opacity: 0.8;
  margin-bottom: 10px;
  min-height: 16px;
  transition: opacity 0.3s ease;
}
.loading-bar-bg {
  width: 100%;
  height: 3px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 2px;
  overflow: hidden;
  position: relative;
}

/* ИЗМЕНЕНО: Анимация удалена, чтобы JS управлял шириной */
.loading-bar-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #00d2ff, #3a7bd5);
  border-radius: 2px;
  box-shadow: 0 0 10px rgba(0, 210, 255, 0.5);
  transition: width 0.3s ease-out;
}

.earth {
  position: absolute;
  bottom: -450px;
  left: 50%;
  transform: translateX(-50%);
  width: 800px;
  height: 800px;
  border-radius: 50%;
  background: radial-gradient(
    circle at 50% 0%,
    #4fa3ff 5%,
    #005c99 30%,
    #000000 80%
  );
  box-shadow: 0 -10px 80px rgba(0, 140, 255, 0.3);
  z-index: 5;
  opacity: 0;
  filter: brightness(0.2);
  animation:
    earthRise 4s ease-out forwards,
    earthGlow 4s infinite alternate 4s;
}

@keyframes pulseText {
  0%,
  100% {
    opacity: 0.7;
  }
  50% {
    opacity: 1;
  }
}
@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes moonPulse {
  0% {
    box-shadow: 0 0 30px rgba(130, 160, 255, 0.4);
  }
  50% {
    box-shadow: 0 0 60px rgba(130, 160, 255, 0.7);
  }
  100% {
    box-shadow: 0 0 30px rgba(130, 160, 255, 0.4);
  }
}
@keyframes earthRise {
  0% {
    bottom: -600px;
    opacity: 0;
    filter: brightness(0);
  }
  100% {
    bottom: -350px;
    opacity: 1;
    filter: brightness(1.2);
    box-shadow: 0 -20px 120px rgba(79, 163, 255, 0.6);
  }
}
@keyframes earthGlow {
  from {
    box-shadow: 0 -20px 120px rgba(79, 163, 255, 0.6);
  }
  to {
    box-shadow: 0 -25px 150px rgba(79, 163, 255, 0.8);
  }
}
@keyframes neonFlicker {
  0%,
  100% {
    opacity: 1;
    text-shadow:
      0 0 10px rgba(255, 255, 255, 0.8),
      0 0 20px rgba(0, 210, 255, 0.6);
  }
  50% {
    opacity: 0.8;
    text-shadow: none;
  }
}
@keyframes blink {
  from {
    opacity: 0.5;
  }
  to {
    opacity: 1;
  }
}
@keyframes twinkle {
  0% {
    opacity: 0.4;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0.4;
  }
}
@keyframes tail {
  0% {
    width: 0;
  }
  30% {
    width: 100px;
  }
  100% {
    width: 0;
  }
}
@keyframes shooting {
  0% {
    transform: translateX(0) translateY(0) rotate(-45deg);
    opacity: 1;
  }
  100% {
    transform: translateX(-300px) translateY(300px) rotate(-45deg);
    opacity: 0;
  }
}

/* === ИНТЕРФЕЙС === */
header {
  /* Базовый фон (если анимация не поддерживается) */
  background: linear-gradient(-45deg, #1a1a25, #39365a, #2a2745, #0b1021);
  background-size: 400% 400%; /* Увеличиваем фон для движения */
  animation: gradientBG 38s ease-in-out infinite; /* Premium calm */

  color: white;
  padding: calc(14px + env(safe-area-inset-top, 0px)) var(--header-pad-x)
    calc(8px + var(--header-overlap)) var(--header-pad-x);
  display: block;
  border-radius: 0 0 26px 26px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow:
    0 16px 46px rgba(8, 12, 26, 0.3),
    0 8px 20px rgba(0, 0, 0, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
  margin-bottom: calc(-1 * var(--header-overlap));
  position: relative;
  isolation: isolate;
  z-index: 2;
}
header > * {
  position: relative;
  z-index: 2;
}
header::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    radial-gradient(
      900px 260px at 18% 10%,
      var(--header-glow-cyan),
      transparent 60%
    ),
    radial-gradient(
      820px 300px at 82% 12%,
      var(--header-glow-violet),
      transparent 64%
    ),
    linear-gradient(180deg, var(--header-gloss), rgba(255, 255, 255, 0) 62%);
  opacity: 0.92;
  pointer-events: none;
  z-index: 0;
}
header::after {
  content: "";
  position: absolute;
  left: calc(var(--header-pad-x) - 1px);
  right: calc(var(--header-pad-x) - 1px);
  bottom: calc(var(--header-overlap) + 6px);
  height: 1px;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0),
    rgba(0, 210, 255, 0.22),
    rgba(127, 90, 255, 0.18),
    rgba(255, 255, 255, 0)
  );
  opacity: 0.6;
  pointer-events: none;
  z-index: 1;
}

.header-shell {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
}
header .live-logo {
  justify-self: center;
}
.header-left-actions,
.header-right-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.header-left-actions {
  justify-self: start;
}
.header-right-actions {
  justify-self: end;
}
.header-right-row {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.header-left-actions .profile-btn {
  margin-left: 0;
  min-height: 36px;
}
.header-left-actions .lang-toggle {
  margin-left: 0;
}
.header-right-actions .qr-share-btn {
  margin-left: 0;
}

/* Сама анимация перелива */
@keyframes gradientBG {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

@media (prefers-reduced-motion: reduce) {
  header {
    animation: none !important;
  }
}

/* === Пасхалка (5 тапов по логотипу) === */
body.easter-egg-open {
  overflow: hidden;
}

/* === Секретное видео (9 тапов по логотипу) === */
body.secret-video-open {
  overflow: hidden;
}

.secret-video-overlay {
  position: fixed;
  inset: 0;
  z-index: 10085;
  display: grid;
  place-items: center;
  background:
    radial-gradient(
      1000px 520px at 50% 30%,
      rgba(0, 240, 255, 0.1),
      transparent 60%
    ),
    radial-gradient(
      800px 520px at 60% 70%,
      rgba(127, 90, 255, 0.12),
      transparent 65%
    ),
    linear-gradient(180deg, rgba(2, 3, 10, 0.98), rgba(0, 0, 0, 0.98));
  opacity: 0;
  pointer-events: none;
  transition: opacity 220ms ease;
}

.secret-video-overlay.is-active {
  opacity: 1;
  pointer-events: auto;
}

.secret-video-overlay.is-closing {
  pointer-events: none;
}

.secret-video-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.28);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.secret-video-stage {
  position: relative;
  width: min(860px, 92vw);
  border-radius: 26px;
  border: 1px solid rgba(0, 240, 255, 0.16);
  background:
    radial-gradient(
      520px 260px at 40% 20%,
      rgba(0, 240, 255, 0.12),
      transparent 60%
    ),
    radial-gradient(
      520px 320px at 85% 75%,
      rgba(127, 90, 255, 0.12),
      transparent 62%
    ),
    rgba(2, 3, 10, 0.82);
  box-shadow: 0 40px 120px rgba(0, 0, 0, 0.6);
  overflow: hidden;
  transform: translateY(10px) scale(0.98);
  opacity: 0;
  transition:
    transform 240ms cubic-bezier(0.2, 0.9, 0.25, 1),
    opacity 240ms ease;
}

.secret-video-overlay.is-active .secret-video-stage {
  transform: translateY(0) scale(1);
  opacity: 1;
}

.secret-video-close {
  position: absolute;
  top: calc(14px + env(safe-area-inset-top, 0px));
  right: calc(14px + env(safe-area-inset-right, 0px));
  width: 42px;
  height: 42px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(0, 0, 0, 0.22);
  color: rgba(255, 255, 255, 0.92);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition:
    transform 140ms ease,
    border-color 160ms ease,
    background 160ms ease;
  z-index: 5;
}

.secret-video-close:hover {
  border-color: rgba(0, 240, 255, 0.26);
  background: rgba(0, 240, 255, 0.06);
  transform: translateY(-1px);
}

.secret-video-close:active {
  transform: translateY(0);
}

.secret-video-header {
  padding: 18px 18px 10px;
}

.secret-video-title {
  font-size: 0.9rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  font-weight: 900;
  color: rgba(255, 255, 255, 0.92);
}

.secret-video-sub {
  margin-top: 6px;
  font-size: 0.92rem;
  color: rgba(219, 232, 255, 0.76);
  line-height: 1.35;
}

.secret-video-frame {
  position: relative;
  margin: 0 18px 18px;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(0, 0, 0, 0.4);
}

.secret-video-player {
  display: block;
  width: 100%;
  height: auto;
  background: #000;
  aspect-ratio: 16 / 9;
}

.secret-video-poster {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background:
    radial-gradient(
      520px 220px at 50% 35%,
      rgba(0, 240, 255, 0.18),
      transparent 62%
    ),
    radial-gradient(
      520px 260px at 70% 70%,
      rgba(127, 90, 255, 0.18),
      transparent 64%
    ),
    linear-gradient(180deg, rgba(6, 8, 16, 0.12), rgba(6, 8, 16, 0.56));
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  z-index: 2;
}

.secret-video-poster.is-hidden {
  opacity: 0;
  pointer-events: none;
  transition: opacity 160ms ease;
}

.secret-video-play {
  appearance: none;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background:
    radial-gradient(
      120% 160% at 18% 18%,
      rgba(255, 255, 255, 0.14),
      rgba(255, 255, 255, 0.06) 55%,
      rgba(0, 0, 0, 0.18) 100%
    ),
    linear-gradient(135deg, rgba(0, 210, 255, 0.18), rgba(127, 90, 255, 0.16));
  color: rgba(255, 255, 255, 0.92);
  border-radius: 999px;
  padding: 12px 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow:
    0 22px 70px rgba(0, 0, 0, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px) saturate(1.1);
  -webkit-backdrop-filter: blur(10px) saturate(1.1);
  transition:
    transform 160ms ease,
    border-color 160ms ease,
    box-shadow 160ms ease,
    background 160ms ease;
}

.secret-video-play:hover {
  border-color: rgba(0, 240, 255, 0.26);
  box-shadow:
    0 26px 85px rgba(0, 0, 0, 0.6),
    0 0 26px rgba(0, 240, 255, 0.12);
  transform: translateY(-1px);
}
.secret-video-play:active {
  transform: translateY(0) scale(0.98);
}
.secret-video-play:focus-visible {
  outline: 3px solid rgba(0, 240, 255, 0.22);
  outline-offset: 4px;
}

.secret-video-play-icon {
  width: 34px;
  height: 34px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
  font-size: 14px;
  line-height: 1;
  padding-left: 2px;
}

.secret-video-play-text {
  font-size: 12px;
  line-height: 1;
}

@media (max-width: 520px) {
  .secret-video-stage {
    width: min(620px, 94vw);
    border-radius: 22px;
  }
  .secret-video-header {
    padding: 16px 14px 10px;
  }
  .secret-video-frame {
    margin: 0 14px 14px;
    border-radius: 16px;
  }
}

.easter-egg-overlay {
  position: fixed;
  inset: 0;
  z-index: 10080;
  display: grid;
  place-items: center;
  background:
    radial-gradient(
      1000px 520px at 50% 30%,
      rgba(0, 240, 255, 0.1),
      transparent 60%
    ),
    radial-gradient(
      800px 520px at 60% 70%,
      rgba(127, 90, 255, 0.12),
      transparent 65%
    ),
    linear-gradient(180deg, rgba(2, 3, 10, 0.98), rgba(0, 0, 0, 0.98));
  opacity: 0;
  pointer-events: none;
  transition: opacity 240ms ease;
}

.easter-egg-overlay.is-night {
  background:
    radial-gradient(
      1000px 520px at 50% 30%,
      rgba(127, 90, 255, 0.16),
      transparent 60%
    ),
    radial-gradient(
      800px 520px at 60% 70%,
      rgba(0, 240, 255, 0.1),
      transparent 65%
    ),
    linear-gradient(180deg, rgba(2, 3, 10, 0.98), rgba(0, 0, 0, 0.98));
}

.easter-egg-overlay.is-active {
  opacity: 1;
  pointer-events: auto;
}

.easter-egg-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.25);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.easter-egg-stage {
  position: relative;
  width: min(680px, 92vw);
  height: min(560px, 78vh);
  border-radius: 28px;
  border: 1px solid rgba(0, 240, 255, 0.18);
  background:
    radial-gradient(
      500px 260px at 40% 35%,
      rgba(0, 240, 255, 0.12),
      transparent 60%
    ),
    radial-gradient(
      520px 320px at 70% 75%,
      rgba(127, 90, 255, 0.12),
      transparent 62%
    ),
    rgba(2, 3, 10, 0.72);
  box-shadow: 0 40px 120px rgba(0, 0, 0, 0.55);
  overflow: hidden;
  transform: translateY(10px) scale(0.98);
  opacity: 0;
  transition:
    transform 260ms cubic-bezier(0.2, 0.9, 0.25, 1),
    opacity 260ms ease;
  --easter-x: 50%;
  --easter-y: 40%;
}

.easter-egg-stage:focus-visible {
  outline: 2px solid rgba(0, 240, 255, 0.45);
  outline-offset: 6px;
}

.easter-egg-stage::before {
  content: "";
  position: absolute;
  inset: -60px;
  background:
    radial-gradient(
      480px 240px at var(--easter-x) var(--easter-y),
      rgba(0, 240, 255, 0.22),
      transparent 60%
    ),
    radial-gradient(
      520px 320px at calc(var(--easter-x) + 10%) calc(var(--easter-y) + 20%),
      rgba(127, 90, 255, 0.2),
      transparent 62%
    ),
    radial-gradient(
      520px 320px at 20% 80%,
      rgba(0, 165, 180, 0.14),
      transparent 65%
    );
  filter: blur(18px);
  opacity: 0.9;
  mix-blend-mode: screen;
  transform: translateZ(0);
  animation: easterAurora 7.2s ease-in-out infinite;
  pointer-events: none;
}

.easter-egg-stage::after {
  content: "";
  position: absolute;
  inset: -80px;
  background: conic-gradient(
    from 200deg at var(--easter-x) var(--easter-y),
    rgba(0, 240, 255, 0.12),
    rgba(127, 90, 255, 0.1),
    rgba(255, 255, 255, 0.06),
    rgba(0, 240, 255, 0.12)
  );
  opacity: 0.28;
  filter: blur(22px);
  mix-blend-mode: screen;
  animation: easterSpinSoft 10.5s linear infinite;
  pointer-events: none;
}

.easter-egg-overlay.is-active .easter-egg-stage {
  transform: translateY(0) scale(1);
  opacity: 1;
}

.easter-egg-close {
  position: absolute;
  top: calc(14px + env(safe-area-inset-top, 0px));
  right: calc(14px + env(safe-area-inset-right, 0px));
  width: 42px;
  height: 42px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(0, 0, 0, 0.22);
  color: rgba(255, 255, 255, 0.9);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition:
    transform 140ms ease,
    border-color 160ms ease,
    background 160ms ease;
  z-index: 6;
}

.easter-egg-close:hover {
  border-color: rgba(0, 240, 255, 0.28);
  background: rgba(0, 240, 255, 0.06);
  transform: translateY(-1px);
}

.easter-egg-close:active {
  transform: translateY(0);
}

.easter-egg-stars {
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(
      1px 1px at 12% 18%,
      rgba(255, 255, 255, 0.85),
      transparent 55%
    ),
    radial-gradient(
      1.4px 1.4px at 24% 68%,
      rgba(255, 255, 255, 0.75),
      transparent 55%
    ),
    radial-gradient(
      1px 1px at 78% 26%,
      rgba(255, 255, 255, 0.75),
      transparent 55%
    ),
    radial-gradient(
      1.6px 1.6px at 66% 82%,
      rgba(255, 255, 255, 0.7),
      transparent 55%
    ),
    radial-gradient(
      1px 1px at 44% 36%,
      rgba(255, 255, 255, 0.8),
      transparent 55%
    ),
    radial-gradient(
      2px 2px at 54% 54%,
      rgba(0, 240, 255, 0.35),
      transparent 60%
    );
  opacity: 0.9;
  animation: easterTwinkle 3.8s ease-in-out infinite;
  pointer-events: none;
}

.easter-egg-orbits {
  position: absolute;
  inset: -40px;
  opacity: 0.9;
  pointer-events: none;
}

.easter-orbit {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 520px;
  height: 520px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.08);
  transform: translate(-50%, -50%);
}

.easter-orbit::before {
  content: "";
  position: absolute;
  top: 18px;
  left: 50%;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(0, 240, 255, 0.9);
  box-shadow: 0 0 18px rgba(0, 240, 255, 0.75);
  transform: translateX(-50%);
}

.orbit-a {
  animation: easterSpin 4.6s linear infinite;
}

.orbit-b {
  width: 380px;
  height: 380px;
  border-style: dashed;
  border-color: rgba(255, 255, 255, 0.1);
  animation: easterSpin 6.8s linear infinite reverse;
}

.easter-comet {
  position: absolute;
  left: -25%;
  top: 40%;
  width: 260px;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    rgba(0, 0, 0, 0),
    rgba(255, 255, 255, 0.9),
    rgba(0, 240, 255, 0.2),
    rgba(0, 0, 0, 0)
  );
  filter: drop-shadow(0 0 12px rgba(0, 240, 255, 0.45));
  opacity: 0;
  animation: easterComet 2.8s ease-in-out infinite;
}

.easter-egg-content {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  text-align: center;
  padding: calc(54px + env(safe-area-inset-top, 0px))
    calc(26px + env(safe-area-inset-right, 0px))
    calc(20px + env(safe-area-inset-bottom, 0px))
    calc(26px + env(safe-area-inset-left, 0px));
  overflow: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  min-height: 0;
}

.easter-egg-content::-webkit-scrollbar {
  width: 0;
  height: 0;
}

.easter-egg-message {
  margin-top: 0;
  max-width: 54ch;
  font-size: var(--factMessageSize, 1.02rem);
  line-height: var(--factLineHeight, 1.45);
  color: rgba(255, 255, 255, 0.86);
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.55);
  padding: 0;
  border: none;
  background: transparent;
  overflow: hidden;
  opacity: 0;
  transform: translateY(6px);
  animation: easterSubIn 700ms cubic-bezier(0.2, 0.9, 0.25, 1) forwards;
  animation-delay: 340ms;
}

.easter-egg-factcard {
  width: min(560px, 100%);
  border-radius: 22px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background:
    radial-gradient(
      520px 260px at 30% 20%,
      rgba(0, 240, 255, 0.1),
      transparent 60%
    ),
    radial-gradient(
      520px 320px at 70% 80%,
      rgba(127, 90, 255, 0.12),
      transparent 62%
    ),
    rgba(0, 0, 0, 0.16);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  align-self: stretch;
  position: relative;
  --fact-bg: none;
  --fact-x: 50%;
  --fact-y: 35%;
  --factShadeMid: 0.24;
  --factShadeBottom: 0.78;
  --factMessageSize: 1.02rem;
  --factLineHeight: 1.45;
  --factTitleSize: 0.86rem;
  margin-top: 10px;
  box-shadow:
    0 34px 110px rgba(0, 0, 0, 0.52),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition:
    transform 160ms ease,
    border-color 160ms ease,
    background 160ms ease;
}

.easter-egg-factcard::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--fact-bg);
  background-size: cover;
  background-position: var(--fact-x) var(--fact-y);
  background-repeat: no-repeat;
  filter: saturate(1.08) contrast(1.04);
  transform: scale(1.02);
  opacity: 0;
  transition: opacity 260ms ease;
  pointer-events: none;
  will-change: opacity;
}

.easter-egg-factcard::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      180deg,
      rgb(2 3 10 / 0) 0%,
      rgb(2 3 10 / 0.06) 40%,
      rgb(2 3 10 / var(--factShadeMid)) 55%,
      rgb(2 3 10 / var(--factShadeBottom)) 76%,
      rgb(2 3 10 / var(--factShadeBottom)) 100%
    ),
    radial-gradient(
      520px 260px at 30% 20%,
      rgba(0, 240, 255, 0.1),
      transparent 60%
    ),
    radial-gradient(
      520px 320px at 70% 80%,
      rgba(127, 90, 255, 0.12),
      transparent 62%
    );
  opacity: 0;
  transition: opacity 260ms ease;
  pointer-events: none;
}

.easter-egg-factcard.has-bg::before,
.easter-egg-factcard.has-bg::after {
  opacity: 1;
}

@media (pointer: coarse) {
  .easter-egg-factcard.has-bg::before {
    animation: easterBgDrift 12s ease-in-out infinite;
  }
}

@keyframes easterBgDrift {
  0%,
  100% {
    background-position: 50% 35%;
    transform: scale(1.03);
  }
  50% {
    background-position: 54% 28%;
    transform: scale(1.06);
  }
}

.easter-egg-factcard.is-switching {
  animation: easterCardSwitch 260ms ease;
}

@keyframes easterCardSwitch {
  0% {
    transform: translateY(0);
    filter: blur(0);
    opacity: 1;
  }
  40% {
    transform: translateY(-1px);
    filter: blur(0.8px);
    opacity: 0.74;
  }
  100% {
    transform: translateY(0);
    filter: blur(0);
    opacity: 1;
  }
}

.easter-egg-factcard.is-switching .easter-egg-facttitle,
.easter-egg-factcard.is-switching .easter-egg-message {
  animation: easterFactTextIn 320ms cubic-bezier(0.2, 0.9, 0.25, 1);
}

@keyframes easterFactTextIn {
  from {
    opacity: 0.45;
    transform: translateY(3px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.easter-egg-factcta {
  position: absolute;
  right: 14px;
  top: 12px;
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(0, 0, 0, 0.16);
  color: rgba(255, 255, 255, 0.78);
  font-weight: 750;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  pointer-events: none;
  opacity: 0;
  transform: translateY(4px);
  transition:
    opacity 180ms ease,
    transform 180ms ease;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.easter-egg-factcard.show-cta .easter-egg-factcta {
  opacity: 1;
  transform: translateY(0);
  animation: easterCtaPulse 1.9s ease-in-out infinite;
}

@keyframes easterCtaPulse {
  0%,
  100% {
    box-shadow: 0 0 0 rgba(0, 240, 255, 0);
  }
  50% {
    box-shadow: 0 0 20px rgba(0, 240, 255, 0.12);
  }
}

.easter-egg-factcard:hover {
  border-color: rgba(0, 240, 255, 0.22);
  background: rgba(0, 240, 255, 0.04);
  transform: translateY(-1px);
}

.easter-egg-factcard:hover .easter-egg-factcta {
  border-color: rgba(0, 240, 255, 0.24);
  background: rgba(0, 240, 255, 0.05);
}

.easter-egg-factcard:active {
  transform: translateY(0);
}

.easter-egg-factcard:focus-visible {
  outline: 2px solid rgba(0, 240, 255, 0.45);
  outline-offset: 6px;
}

.easter-egg-factbody {
  padding: 18px 20px 18px;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 0;
  flex: 1 1 auto;
  justify-content: flex-end;
  width: 100%;
  margin-top: auto;
  position: relative;
  z-index: 2;
}

.easter-egg-facttitle {
  font-family:
    "Montserrat",
    system-ui,
    -apple-system,
    Segoe UI,
    Roboto,
    Arial,
    sans-serif;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-size: var(--factTitleSize, 0.86rem);
  color: rgba(255, 255, 255, 0.86);
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.62);
}

.easter-egg-message {
  font-family:
    "Montserrat",
    system-ui,
    -apple-system,
    Segoe UI,
    Roboto,
    Arial,
    sans-serif;
  font-weight: 450;
  letter-spacing: 0.01em;
  white-space: pre-line;
  text-wrap: pretty;
}

.easter-egg-message::first-letter {
  font-family: "PT Serif", serif;
  font-weight: 700;
  font-size: 1.35em;
  letter-spacing: 0.02em;
  color: rgba(0, 240, 255, 0.92);
  text-shadow: 0 10px 26px rgba(0, 0, 0, 0.55);
}

.easter-egg-actions {
  margin-top: 0;
  width: min(560px, 100%);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 10px;
  justify-content: center;
  opacity: 0;
  transform: translateY(6px);
  animation: easterHintIn 700ms cubic-bezier(0.2, 0.9, 0.25, 1) forwards;
  animation-delay: 520ms;
}

.easter-egg-actions[hidden] {
  display: none !important;
}

.easter-egg-action {
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(0, 0, 0, 0.18);
  color: rgba(255, 255, 255, 0.92);
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 12px;
  border-radius: 14px;
  font-weight: 650;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition:
    transform 140ms ease,
    border-color 160ms ease,
    background 160ms ease;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.easter-egg-action[data-primary="true"] {
  border-color: rgba(0, 240, 255, 0.35);
  background: linear-gradient(
    135deg,
    rgba(0, 240, 255, 0.16),
    rgba(127, 90, 255, 0.14)
  );
  box-shadow: 0 18px 44px rgba(0, 240, 255, 0.08);
}

.easter-egg-action:hover {
  border-color: rgba(0, 240, 255, 0.28);
  background: rgba(0, 240, 255, 0.06);
  transform: translateY(-1px);
}

.easter-egg-action:active {
  transform: translateY(0);
}

.easter-egg-title {
  font-weight: 900;
  font-size: clamp(24px, 3.6vw, 40px);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.92);
  text-shadow: 0 0 22px rgba(0, 240, 255, 0.55);
  transform: translateY(10px);
  opacity: 0;
  animation: easterTitleIn 700ms cubic-bezier(0.2, 0.9, 0.25, 1) forwards;
  animation-delay: 120ms;
}

.easter-egg-subtitle {
  margin-top: 0;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.78);
  transform: translateY(8px);
  opacity: 0;
  animation: easterSubIn 700ms cubic-bezier(0.2, 0.9, 0.25, 1) forwards;
  animation-delay: 260ms;
}

.easter-egg-hint {
  margin-top: 0;
  margin-top: auto;
  padding-top: 14px;
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  opacity: 0;
  animation: easterHintIn 700ms cubic-bezier(0.2, 0.9, 0.25, 1) forwards;
  animation-delay: 520ms;
}

.easter-egg-overlay.is-closing {
  opacity: 0;
}

@keyframes easterSpin {
  from {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

@keyframes easterTwinkle {
  0%,
  100% {
    opacity: 0.82;
  }
  50% {
    opacity: 1;
  }
}

@keyframes easterComet {
  0% {
    transform: translateX(0) rotate(-10deg);
    opacity: 0;
  }
  20% {
    opacity: 1;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: translateX(200%) rotate(-10deg);
    opacity: 0;
  }
}

@keyframes easterTitleIn {
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes easterSubIn {
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

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

@keyframes easterAurora {
  0%,
  100% {
    transform: translate3d(0, 0, 0) scale(1);
    opacity: 0.85;
  }
  50% {
    transform: translate3d(0, -6px, 0) scale(1.04);
    opacity: 1;
  }
}

@keyframes easterSpinSoft {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@media (max-width: 520px) {
  .easter-egg-stage {
    height: min(640px, 84vh);
    border-radius: 24px;
  }
  .easter-egg-content {
    padding: calc(50px + env(safe-area-inset-top, 0px))
      calc(14px + env(safe-area-inset-right, 0px))
      calc(14px + env(safe-area-inset-bottom, 0px))
      calc(14px + env(safe-area-inset-left, 0px));
    gap: 10px;
  }
  .easter-egg-title {
    letter-spacing: 0.14em;
  }
  .easter-egg-subtitle {
    letter-spacing: 0.1em;
    font-size: 0.92rem;
  }
  .easter-egg-action {
    padding: 9px 10px;
    border-radius: 12px;
    font-weight: 700;
    letter-spacing: 0.04em;
  }
  .easter-egg-actions {
    grid-template-columns: 1fr;
  }
  .easter-egg-factcard {
    border-radius: 18px;
    margin-top: 8px;
  }
  .easter-egg-factbody {
    padding: 16px 14px 16px;
  }
  .easter-egg-message {
    font-size: var(--factMessageSize, 1rem);
  }
  .easter-egg-factcta {
    left: 12px;
    right: auto;
    top: 10px;
    padding: 7px 9px;
    font-size: 0.7rem;
    letter-spacing: 0.06em;
  }
  .easter-orbit {
    width: 460px;
    height: 460px;
  }
  .orbit-b {
    width: 340px;
    height: 340px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .easter-egg-stars,
  .orbit-a,
  .orbit-b,
  .easter-comet,
  .easter-egg-title,
  .easter-egg-subtitle,
  .easter-egg-message,
  .easter-egg-actions,
  .easter-egg-hint {
    animation: none !important;
  }
  .easter-egg-title,
  .easter-egg-subtitle,
  .easter-egg-message,
  .easter-egg-actions,
  .easter-egg-hint {
    opacity: 1 !important;
    transform: none !important;
  }
  .easter-egg-stage::before,
  .easter-egg-stage::after {
    animation: none !important;
  }
  .easter-egg-factcard::before,
  .easter-egg-factcard::after {
    transition: none !important;
  }
  .easter-egg-factcard.is-switching,
  .easter-egg-factcard.is-switching .easter-egg-facttitle,
  .easter-egg-factcard.is-switching .easter-egg-message,
  .easter-egg-factcard.show-cta .easter-egg-factcta {
    animation: none !important;
  }
}

.live-logo {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: clamp(200px, 22vw, 273px);
  height: 68px;
  gap: 4px;
  line-height: 1.05;
  pointer-events: auto;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  --logo-tilt-x: 0deg;
  --logo-tilt-y: 0deg;
  --logo-glow-x: 50%;
  --logo-glow-y: 35%;
  position: relative;
  padding: 11px 20px;
  border-radius: 26px;
  border: 1px solid transparent;
  background:
    radial-gradient(
        231px 121px at 30% 18%,
        rgba(255, 255, 255, 0.07),
        transparent 64%
      )
      padding-box,
    radial-gradient(
        209px 143px at 72% 82%,
        rgba(0, 240, 255, 0.06),
        transparent 62%
      )
      padding-box,
    linear-gradient(
        135deg,
        rgba(0, 240, 255, 0.11),
        rgba(127, 90, 255, 0.065),
        rgba(255, 255, 255, 0.075)
      )
      border-box,
    rgba(255, 255, 255, 0.016) padding-box;
  box-shadow:
    0 16px 40px rgba(0, 0, 0, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.09),
    inset 0 0 0 1px rgba(0, 240, 255, 0.05);
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  isolation: isolate;
}

.live-logo::after {
  content: "";
  position: absolute;
  inset: -11px -15px;
  border-radius: 16px;
  background:
    radial-gradient(
      242px 121px at 42% 6%,
      rgba(255, 255, 255, 0.12),
      transparent 66%
    ),
    radial-gradient(
      220px 132px at 78% 92%,
      rgba(0, 240, 255, 0.085),
      transparent 72%
    );
  opacity: 0.42;
  filter: blur(2px);
  pointer-events: none;
  transition: opacity 220ms ease;
}
.live-logo:hover::after {
  opacity: 0.75;
}

.live-logo .logo-tooltip {
  position: absolute;
  left: 50%;
  top: calc(100% + 8px);
  transform: translateX(-50%) translateY(-4px);
  padding: 8px 10px;
  border-radius: 12px;
  background: rgba(2, 3, 10, 0.82);
  border: 1px solid rgba(0, 240, 255, 0.22);
  color: rgba(255, 255, 255, 0.92);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.35);
  opacity: 0;
  pointer-events: none;
  transition:
    opacity 160ms ease,
    transform 160ms ease;
  z-index: 5;
}

.live-logo:hover .logo-tooltip,
.live-logo:focus-visible .logo-tooltip,
.live-logo.show-tooltip .logo-tooltip {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.live-logo.is-loading .logo-tooltip {
  border-color: rgba(127, 90, 255, 0.28);
}

.live-logo::before {
  content: "";
  position: absolute;
  inset: -18px -24px;
  background: radial-gradient(
    121px 66px at var(--logo-glow-x) var(--logo-glow-y),
    rgba(0, 240, 255, 0.2),
    rgba(0, 165, 180, 0.09) 48%,
    transparent 74%
  );
  filter: blur(18px);
  opacity: 0.75;
  transform: translateZ(0);
  transition:
    opacity 220ms ease,
    filter 220ms ease;
  pointer-events: none;
}

.live-logo.is-loading::before {
  animation: logoLoadingGlow 1.8s ease-in-out infinite;
}

.live-logo:hover::before {
  opacity: 1;
  filter: blur(16px);
}

.live-logo:focus-visible {
  outline: 2px solid rgba(0, 240, 255, 0.55);
  outline-offset: 6px;
  border-radius: 14px;
}

.brand-row {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  position: relative;
  transform: translateZ(0) rotateX(var(--logo-tilt-x))
    rotateY(var(--logo-tilt-y));
  transform-style: preserve-3d;
  transition: transform 160ms ease;
}
.brand-row::before {
  content: "";
  position: absolute;
  left: 34px;
  right: -6px;
  bottom: -6px;
  height: 1px;
  background: linear-gradient(
    90deg,
    rgba(0, 240, 255, 0),
    rgba(0, 240, 255, 0.28),
    rgba(127, 90, 255, 0.22),
    rgba(0, 240, 255, 0)
  );
  opacity: 0.65;
  pointer-events: none;
}

.moon-badge {
  width: 37px;
  height: 37px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background:
    radial-gradient(
      140% 160% at 18% 20%,
      rgba(255, 255, 255, 0.16),
      rgba(255, 255, 255, 0.06) 55%,
      rgba(0, 0, 0, 0.1) 100%
    ),
    rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(0, 240, 255, 0.2);
  box-shadow:
    0 14px 34px rgba(0, 0, 0, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.live-logo.has-unread .brand-row::after {
  content: "";
  position: absolute;
  top: -2px;
  right: -10px;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #00f0ff;
  box-shadow:
    0 0 0 2px rgba(2, 3, 10, 0.8),
    0 0 18px rgba(0, 240, 255, 0.8);
  opacity: 0.95;
}

.logo-main {
  font-size: 1.34rem;
  font-weight: 850;
  letter-spacing: 0.32em;
  color: #00a5b4;
  text-transform: uppercase;
  transition:
    color 0.4s ease,
    text-shadow 0.4s ease,
    transform 0.5s ease;
  text-shadow: 0 0 6px rgba(0, 165, 180, 0.35);
}

.logo-main {
  background-image: linear-gradient(
    90deg,
    #00a5b4 0%,
    #00f0ff 35%,
    #b8ffff 50%,
    #00f0ff 65%,
    #00a5b4 100%
  );
  background-size: 220% 100%;
  background-position: 0% 50%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: logoTextShimmer 8.5s linear infinite;
}

.live-logo:hover .logo-main {
  animation-duration: 4.8s;
}

.live-logo.has-unread .logo-main {
  animation-duration: 3.2s;
}

.logo-sub {
  font-size: 0.73rem;
  letter-spacing: 0.4em;
  color: #fff;
  opacity: 0.75;
  text-transform: uppercase;
}

.logo-sub {
  text-shadow: 0 10px 26px rgba(0, 0, 0, 0.22);
}

.logo-sub::before {
  content: "";
  display: inline-block;
  width: 5px;
  height: 5px;
  margin-right: 8px;
  border-radius: 999px;
  background: rgba(0, 240, 255, 0.85);
  box-shadow: 0 0 10px rgba(0, 240, 255, 0.35);
  transform: translateY(-1px);
}

.live-logo.is-offline .logo-sub::before {
  background: rgba(255, 90, 122, 0.95);
  box-shadow: 0 0 12px rgba(255, 90, 122, 0.55);
}

.live-logo:hover .logo-main {
  color: #00f0ff;
  text-shadow: 0 0 12px rgba(0, 240, 255, 0.6);
  transform: translateY(-1px);
}

.live-logo .moon {
  width: 24px;
  height: 24px;
  display: block;
  opacity: 1;
  transform: translateY(0) scale(1);
  filter: drop-shadow(0 0 10px rgba(0, 165, 180, 0.25));
  will-change: opacity, transform, filter;
  animation:
    logoMoonFloat 6.5s ease-in-out infinite,
    logoMoonPulse 2.6s ease-in-out infinite;
}

.live-logo.has-unread .moon {
  animation-duration: 4.8s, 1.55s;
}

.live-logo .moon-shine {
  opacity: 0;
  filter: blur(0.6px);
  animation: logoMoonShine 15s ease-in-out infinite;
}

.live-logo:hover .moon {
  filter: drop-shadow(0 0 20px rgba(0, 165, 180, 0.5));
}

@keyframes logoMoonFloat {
  0%,
  100% {
    transform: translateY(0) scale(1);
  }
  50% {
    transform: translateY(-1px) scale(1.02);
  }
}

@keyframes logoMoonPulse {
  0%,
  100% {
    filter: drop-shadow(0 0 8px rgba(0, 165, 180, 0.18));
  }
  50% {
    filter: drop-shadow(0 0 16px rgba(0, 165, 180, 0.35));
  }
}

@keyframes logoMoonShine {
  0% {
    opacity: 0;
    transform: translateX(0);
  }
  25% {
    opacity: 0;
  }
  40% {
    opacity: 0.85;
    transform: translateX(90px);
  }
  48% {
    opacity: 0;
    transform: translateX(110px);
  }
  100% {
    opacity: 0;
    transform: translateX(110px);
  }
}

.live-logo.logo-burst .brand-row {
  animation: logoBurst 560ms cubic-bezier(0.2, 0.9, 0.25, 1);
}

.live-logo.logo-burst .logo-main {
  animation: logoTextPulse 560ms cubic-bezier(0.2, 0.9, 0.25, 1);
}

.live-logo.logo-burst .moon {
  animation: logoMoonWink 560ms cubic-bezier(0.2, 0.9, 0.25, 1);
}

@keyframes logoBurst {
  0% {
    transform: translateZ(0) rotateX(var(--logo-tilt-x))
      rotateY(var(--logo-tilt-y)) scale(1);
  }
  35% {
    transform: translateZ(0) rotateX(var(--logo-tilt-x))
      rotateY(var(--logo-tilt-y)) scale(1.035);
  }
  100% {
    transform: translateZ(0) rotateX(var(--logo-tilt-x))
      rotateY(var(--logo-tilt-y)) scale(1);
  }
}

@keyframes logoTextPulse {
  0% {
    text-shadow: 0 0 6px rgba(0, 165, 180, 0.35);
  }
  35% {
    text-shadow: 0 0 22px rgba(0, 240, 255, 0.85);
  }
  100% {
    text-shadow: 0 0 6px rgba(0, 165, 180, 0.35);
  }
}

@keyframes logoMoonWink {
  0% {
    transform: translateY(0) scale(1);
    filter: drop-shadow(0 0 10px rgba(0, 165, 180, 0.25));
  }
  35% {
    transform: translateY(-1px) scale(1.08);
    filter: drop-shadow(0 0 26px rgba(0, 165, 180, 0.65));
  }
  100% {
    transform: translateY(0) scale(1);
    filter: drop-shadow(0 0 10px rgba(0, 165, 180, 0.25));
  }
}

@keyframes logoTextShimmer {
  0% {
    background-position: 0% 50%;
  }
  100% {
    background-position: 220% 50%;
  }
}

@keyframes logoLoadingGlow {
  0%,
  100% {
    opacity: 0.65;
    filter: blur(12px);
  }
  50% {
    opacity: 1;
    filter: blur(18px);
  }
}

@media (max-width: 520px) {
  .live-logo {
    height: 62px;
    min-width: 187px;
    padding: 9px 15px;
  }
  .logo-main {
    font-size: 1.23rem;
    letter-spacing: 0.29em;
  }
  .logo-sub {
    font-size: 0.66rem;
    letter-spacing: 0.41em;
  }
  .moon-badge {
    width: 35px;
    height: 35px;
  }
}

@media (pointer: coarse) {
  .live-logo {
    cursor: default;
  }
  .live-logo::before {
    opacity: 0.62;
    filter: blur(14px);
  }
  .live-logo:hover::before {
    filter: blur(16px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .brand-row {
    transition: none !important;
    transform: none !important;
  }
  .live-logo::before {
    transition: none !important;
    animation: none !important;
  }
  .live-logo .moon {
    animation: none !important;
    transform: none !important;
    filter: drop-shadow(0 0 10px rgba(0, 165, 180, 0.25)) !important;
  }
  .live-logo .moon-shine {
    animation: none !important;
  }
  .logo-main {
    transition: none;
    animation: none !important;
    background-image: none !important;
    -webkit-text-fill-color: currentColor;
    text-shadow: 0 0 6px rgba(0, 165, 180, 0.35);
  }
}

@media (max-width: 560px) {
  .logo-area {
    letter-spacing: 0.25em;
  }
  .logo {
    font-size: 2rem;
    letter-spacing: 0.25em;
  }
  .subtitle {
    letter-spacing: 0.4em;
  }
  .logo::after {
    width: 40px;
    right: -10px;
  }
}

#sticky-nav-wrapper {
  position: sticky;
  top: 0;
  z-index: 90;
  background: transparent;
  transition:
    transform 260ms cubic-bezier(0.22, 1, 0.36, 1),
    opacity 220ms ease,
    margin-bottom 260ms cubic-bezier(0.22, 1, 0.36, 1),
    background 0.3s,
    box-shadow 0.3s ease;
  margin-top: calc(-1 * var(--header-overlap));
  padding-bottom: 6px;
  --sticky-offset: 0px;
}

#sticky-nav-wrapper .sticky-shell {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--header-pad-x);
}

#sticky-nav-wrapper .sticky-shell .search-container,
#sticky-nav-wrapper .sticky-shell .categories,
#sticky-nav-wrapper .sticky-shell #tag-cloud-wrapper,
#sticky-nav-wrapper .sticky-shell .home-controls {
  margin-left: 0;
  margin-right: 0;
}

#sticky-nav-wrapper .sticky-shell .fav-toggle-wrapper {
  padding-left: 0;
  padding-right: 0;
}
body.top-hidden #sticky-nav-wrapper {
  transform: translateY(calc(-1 * var(--sticky-offset)));
  margin-bottom: calc(-1 * var(--sticky-offset));
  opacity: 0;
  pointer-events: none;
}
#sticky-nav-wrapper::after {
  content: "";
  display: block;
  height: 14px;
  margin-top: -8px;
  background: var(--surface-sticky-tail);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
#sticky-nav-wrapper.is-stuck {
  background: var(--surface-sticky);
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  margin-top: 0;
  padding-top: calc(8px + env(safe-area-inset-top, 0px));
  border-bottom: 1px solid var(--surface-sticky-border);
  border-radius: 0 0 20px 20px;
  box-shadow: var(--surface-sticky-shadow);
}
#sticky-nav-wrapper.is-stuck::after {
  opacity: 1;
}

.bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: calc(var(--nav-height) + var(--safe-area-bottom));
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 10px 14px var(--safe-area-bottom);
  z-index: 10010;
  overflow: visible;
  background: transparent;
}
.bottom-nav::before {
  content: "";
  position: absolute;
  left: 10px;
  right: 10px;
  top: 6px;
  bottom: calc(var(--safe-area-bottom) + 6px);
  border-radius: 22px;
  background: var(--surface-nav);
  border: 1px solid var(--surface-nav-border);
  box-shadow: var(--surface-nav-shadow);
  backdrop-filter: blur(12px) saturate(1.2);
  -webkit-backdrop-filter: blur(12px) saturate(1.2);
  pointer-events: none;
}
.bottom-nav > * {
  position: relative;
  z-index: 1;
}
@media (prefers-reduced-motion: reduce) {
  #sticky-nav-wrapper {
    transition: none;
  }
}
.bottom-nav.has-indicator .nav-item.active::after {
  opacity: 0;
}
.bottom-nav-indicator {
  position: absolute;
  top: 10px;
  left: 0;
  width: 24px;
  height: 4px;
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    rgba(0, 210, 255, 0.92),
    rgba(127, 90, 255, 0.88)
  );
  box-shadow: 0 12px 28px rgba(60, 85, 150, 0.2);
  transform: translateX(var(--nav-indicator-x, 0px));
  transition:
    transform 260ms cubic-bezier(0.22, 1, 0.36, 1),
    width 220ms ease;
  pointer-events: none;
  z-index: 2;
}
/* Ripple */
.nav-item {
  position: relative;
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
}
.nav-item:active .nav-icon {
  transform: translateY(-1px) scale(0.97);
}
.nav-ripple {
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: radial-gradient(
    circle,
    rgba(60, 85, 150, 0.22),
    rgba(60, 85, 150, 0.08) 55%,
    rgba(60, 85, 150, 0) 70%
  );
  transform: translate(-50%, -50%) scale(0);
  opacity: 0.85;
  pointer-events: none;
  animation: navRipple 560ms ease-out forwards;
}
@keyframes navRipple {
  to {
    transform: translate(-50%, -50%) scale(18);
    opacity: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .bottom-nav-indicator {
    transition: none;
  }
  .nav-ripple {
    animation: none;
    opacity: 0;
  }
}
.nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  background: none;
  border: none;
  cursor: pointer;
  flex: 1;
  padding: 10px 6px 12px;
  border-radius: 18px;
  color: var(--nav-item-color);
  transition:
    color 0.18s ease,
    transform 0.18s ease;
}
.nav-item:active {
  transform: translateY(1px);
}
.nav-item:focus-visible {
  outline: 3px solid var(--focus-ring-muted);
  outline-offset: 3px;
}
.nav-icon {
  font-size: 22px;
  line-height: 1;
  width: 42px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 16px;
  background: var(--surface-nav-icon);
  box-shadow: var(--surface-nav-icon-shadow);
  transition:
    transform 0.2s,
    background 0.2s ease,
    box-shadow 0.2s ease;
}
.nav-label {
  font-size: 11px;
  font-weight: 750;
  letter-spacing: 0.08px;
  line-height: 1.1;
}
.nav-item {
  position: relative;
}
.nav-item.active::after {
  content: "";
  position: absolute;
  top: 4px;
  left: 50%;
  transform: translateX(-50%);
  width: 18px;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    rgba(0, 210, 255, 0.9),
    rgba(127, 90, 255, 0.85)
  );
  box-shadow: 0 10px 22px rgba(60, 85, 150, 0.18);
  opacity: 0.95;
}
.nav-item.active {
  color: var(--nav-item-active-color);
}
.nav-item.active .nav-icon {
  transform: translateY(-2px);
  background: var(--surface-nav-icon-active);
  box-shadow: var(--surface-nav-icon-active-shadow);
}

.galaxy-home {
  --galaxy-core-glow: 0.52;
  --galaxy-phase-brightness: 0.55;
  --galaxy-day-progress: 18deg;
  --galaxy-parallax-x: 0;
  --galaxy-parallax-y: 0;
  --galaxy-comet-y: 0px;
  --galaxy-magic-angle: 0deg;
  --galaxy-magic-length: 120px;
  --galaxy-accent: #58d9ff;
  --galaxy-accent-soft: rgba(88, 217, 255, 0.32);
  position: relative;
  margin: 8px 12px calc(var(--nav-height) + var(--safe-area-bottom) + 20px);
  border-radius: 28px;
  border: 1px solid rgba(128, 212, 255, 0.22);
  background:
    radial-gradient(
      120% 95% at 50% -8%,
      rgba(74, 196, 255, 0.3),
      rgba(7, 13, 30, 0) 54%
    ),
    radial-gradient(
      90% 70% at 100% 0%,
      rgba(47, 120, 185, 0.2),
      rgba(4, 10, 24, 0) 70%
    ),
    linear-gradient(
      180deg,
      rgba(2, 10, 27, 0.98),
      rgba(1, 6, 16, 0.99) 52%,
      rgba(1, 4, 11, 1) 100%
    );
  box-shadow:
    0 30px 66px rgba(0, 0, 0, 0.52),
    inset 0 1px 0 rgba(216, 244, 255, 0.14);
  overflow: hidden;
  isolation: isolate;
  display: block;
  min-height: min(76vh, 720px);
  padding: 18px 14px 16px;
}

.galaxy-home[hidden] {
  display: none !important;
}

.galaxy-home::before {
  content: "";
  position: absolute;
  inset: -30% -26%;
  z-index: -1;
  background:
    radial-gradient(
      2px 2px at 12% 18%,
      rgba(255, 255, 255, 0.72),
      transparent 42%
    ),
    radial-gradient(
      1.2px 1.2px at 24% 62%,
      rgba(180, 236, 255, 0.64),
      transparent 45%
    ),
    radial-gradient(
      1.8px 1.8px at 44% 30%,
      rgba(255, 255, 255, 0.66),
      transparent 44%
    ),
    radial-gradient(
      1.3px 1.3px at 62% 20%,
      rgba(176, 229, 255, 0.62),
      transparent 43%
    ),
    radial-gradient(
      1.8px 1.8px at 80% 52%,
      rgba(154, 220, 255, 0.68),
      transparent 42%
    ),
    radial-gradient(
      1.3px 1.3px at 72% 84%,
      rgba(255, 255, 255, 0.54),
      transparent 43%
    ),
    radial-gradient(
      1.5px 1.5px at 34% 88%,
      rgba(198, 224, 255, 0.5),
      transparent 44%
    );
  animation: galaxyDrift 52s linear infinite;
  opacity: 0.84;
}

.galaxy-home::after {
  content: "";
  position: absolute;
  inset: auto -16% -32% -16%;
  height: 52%;
  z-index: -1;
  background:
    radial-gradient(
      60% 80% at 50% 0%,
      rgba(96, 180, 240, 0.24),
      rgba(96, 180, 240, 0) 70%
    ),
    radial-gradient(
      44% 62% at 52% 12%,
      rgba(58, 121, 189, 0.28),
      rgba(58, 121, 189, 0) 78%
    );
  filter: blur(12px);
  opacity: 0.85;
  pointer-events: none;
}

@keyframes galaxyDrift {
  from {
    transform: translate3d(0, 0, 0) rotate(0deg);
  }
  to {
    transform: translate3d(0, 0, 0) rotate(360deg);
  }
}

.galaxy-home-header {
  text-align: center;
  padding-top: 2px;
}

.galaxy-home-kicker {
  font-size: 0.68rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(193, 232, 255, 0.75);
}

.galaxy-home-title {
  margin: 7px 0 0;
  font-size: clamp(1.5rem, 5.3vw, 2.1rem);
  font-family: "PT Serif", serif;
  color: #f3fbff;
  letter-spacing: 0.01em;
  font-weight: 900;
  text-shadow: 0 10px 32px rgba(40, 132, 196, 0.3);
}

.galaxy-home-sub {
  margin: 10px auto 0;
  max-width: 440px;
  color: rgba(210, 231, 251, 0.84);
  font-size: 0.94rem;
  line-height: 1.42;
}

.league-hero-day-banner {
  position: relative;
  --hero-day-parallax-x: 0px;
  --hero-day-parallax-y: 0px;
  --hero-day-tilt-x: 0deg;
  --hero-day-tilt-y: 0deg;
  width: min(100%, 520px);
  margin: 12px auto 0;
  padding: 12px 14px;
  border-radius: 18px;
  border: 1px solid rgba(175, 228, 255, 0.56);
  background:
    radial-gradient(
      100% 84% at 86% 4%,
      rgba(108, 206, 255, 0.14),
      rgba(255, 255, 255, 0) 56%
    ),
    linear-gradient(165deg, rgba(10, 33, 80, 0.98), rgba(5, 19, 50, 0.97));
  box-shadow:
    0 20px 44px rgba(0, 0, 0, 0.42),
    inset 0 1px 0 rgba(225, 248, 255, 0.2);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  overflow: hidden;
  isolation: isolate;
  opacity: 0;
  transform: perspective(920px) translateY(-8px) scale(0.985)
    rotateX(var(--hero-day-tilt-x)) rotateY(var(--hero-day-tilt-y));
  pointer-events: none;
  transition:
    opacity 0.28s ease,
    transform 0.28s cubic-bezier(0.2, 0.9, 0.22, 1),
    box-shadow 0.24s ease;
}

.league-hero-day-banner::before {
  content: "";
  position: absolute;
  inset: -42% -24%;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  background: radial-gradient(
    56% 48% at 50% 26%,
    rgba(113, 210, 255, 0.2),
    rgba(255, 255, 255, 0) 74%
  );
  opacity: 0.42;
  transform: translate3d(
    calc(var(--hero-day-parallax-x) * -1.35),
    calc(var(--hero-day-parallax-y) * -1.15),
    0
  );
  animation: none;
}

.league-hero-day-banner::after {
  content: "";
  position: absolute;
  left: -26%;
  right: -26%;
  bottom: -34%;
  height: 52%;
  pointer-events: none;
  z-index: 0;
  background: radial-gradient(
    60% 70% at 50% 40%,
    rgba(58, 172, 232, 0.3),
    rgba(58, 172, 232, 0.1) 54%,
    rgba(255, 255, 255, 0) 100%
  );
  filter: blur(6px);
  transform: translate3d(
    calc(var(--hero-day-parallax-x) * 1.45),
    calc(var(--hero-day-parallax-y) * 1.35),
    0
  );
  animation: none;
}

.league-hero-day-banner > * {
  position: relative;
  z-index: 1;
}

.league-hero-day-banner.is-visible {
  opacity: 1;
  transform: perspective(920px) translateY(0) scale(1)
    rotateX(var(--hero-day-tilt-x)) rotateY(var(--hero-day-tilt-y));
  pointer-events: auto;
}

.league-hero-day-banner.is-parallax {
  box-shadow:
    0 24px 52px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(225, 248, 255, 0.2);
}

.league-hero-day-close {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1px solid rgba(205, 238, 255, 0.45);
  background: rgba(8, 21, 48, 0.62);
  color: rgba(240, 250, 255, 0.94);
  font-size: 0.86rem;
  font-weight: 900;
  cursor: pointer;
}

.league-hero-day-kicker {
  font-size: 0.66rem;
  font-weight: 900;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(205, 238, 255, 0.82);
  padding-right: 28px;
}

.league-hero-day-smart {
  margin-top: 6px;
  font-size: 0.78rem;
  line-height: 1.28;
  color: rgba(238, 248, 255, 0.97);
  font-weight: 760;
}

.league-hero-day-row {
  margin-top: 8px;
  display: grid;
  grid-template-columns: 116px 1fr;
  gap: 14px;
  align-items: center;
}

.league-hero-day-avatar-wrap {
  position: relative;
  width: 116px;
  height: 116px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: radial-gradient(
    circle at 28% 26%,
    rgba(223, 246, 255, 0.3),
    rgba(15, 32, 64, 0.2) 65%
  );
  box-shadow:
    0 20px 36px rgba(0, 0, 0, 0.44),
    0 0 0 1px rgba(187, 232, 255, 0.26) inset;
  isolation: isolate;
  overflow: hidden;
}

.league-hero-day-avatar-wrap::before {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  border: 2px solid rgba(179, 232, 255, 0.62);
  box-shadow: none;
  animation: none;
}

.league-hero-day-avatar-wrap::after {
  content: none;
}

.league-hero-day-avatar {
  width: 104px;
  height: 104px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid rgba(214, 244, 255, 0.62);
  box-shadow:
    0 14px 24px rgba(0, 0, 0, 0.42),
    0 0 0 2px rgba(149, 229, 255, 0.2);
  background: rgba(12, 26, 52, 0.58);
  position: relative;
  z-index: 1;
}

.league-hero-day-avatar-shine {
  display: none;
}

.league-hero-day-copy {
  min-width: 0;
}

.league-hero-day-name {
  font-size: 1.26rem;
  font-weight: 920;
  color: rgba(248, 252, 255, 0.99);
  line-height: 1.15;
  letter-spacing: 0.01em;
  text-shadow:
    0 0 0 rgba(110, 222, 255, 0),
    0 8px 18px rgba(5, 16, 40, 0.38);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.league-hero-day-banner.is-visible .league-hero-day-name {
  animation: heroDayNameGlowPulse 2.4s ease-in-out infinite;
}

.league-hero-day-role {
  margin-top: 2px;
  font-size: 0.82rem;
  font-weight: 700;
  color: rgba(218, 239, 255, 0.93);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.league-hero-day-xp {
  margin-top: 6px;
  width: fit-content;
  padding: 4px 8px;
  border-radius: 999px;
  border: 1px solid rgba(255, 215, 64, 0.36);
  background: rgba(255, 215, 64, 0.16);
  color: rgba(255, 231, 144, 0.98);
  font-size: 0.78rem;
  font-weight: 860;
  letter-spacing: 0.02em;
}

.league-hero-day-meta {
  margin-top: 7px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.league-hero-day-badge {
  display: inline-flex;
  align-items: center;
  min-height: 20px;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid rgba(255, 221, 126, 0.44);
  background: rgba(255, 217, 105, 0.16);
  color: rgba(255, 240, 179, 0.98);
  font-size: 0.7rem;
  font-weight: 860;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.league-hero-day-chip {
  display: inline-flex;
  align-items: center;
  min-height: 20px;
  padding: 2px 7px;
  border-radius: 999px;
  border: 1px solid rgba(206, 236, 255, 0.36);
  background: rgba(14, 42, 82, 0.58);
  color: rgba(225, 242, 255, 0.94);
  font-size: 0.69rem;
  font-weight: 820;
  letter-spacing: 0.02em;
}

.league-hero-day-chip.is-up {
  border-color: rgba(143, 255, 171, 0.52);
  background: rgba(40, 122, 57, 0.34);
  color: rgba(219, 255, 227, 0.98);
}

.league-hero-day-chip.is-down {
  border-color: rgba(255, 153, 153, 0.48);
  background: rgba(128, 38, 56, 0.3);
  color: rgba(255, 221, 229, 0.96);
}

.league-hero-day-chase {
  margin-top: 7px;
  font-size: 0.74rem;
  font-weight: 760;
  color: rgba(220, 241, 255, 0.93);
}

.league-hero-day-quote {
  margin-top: 8px;
  font-size: 0.78rem;
  line-height: 1.36;
  color: rgba(223, 241, 255, 0.86);
  font-style: italic;
}

.league-hero-day-actions {
  margin-top: 8px;
}

.league-hero-day-congrats {
  border: 1px solid rgba(186, 234, 255, 0.42);
  background: linear-gradient(
    180deg,
    rgba(35, 92, 154, 0.66),
    rgba(14, 42, 88, 0.62)
  );
  color: rgba(236, 248, 255, 0.96);
  border-radius: 12px;
  min-height: 32px;
  padding: 6px 10px;
  font-size: 0.74rem;
  font-weight: 860;
  letter-spacing: 0.02em;
  cursor: pointer;
}

.league-hero-day-congrats:active {
  transform: translateY(1px);
}

.league-hero-day-progress {
  margin-top: 9px;
  height: 4px;
  width: 100%;
  border-radius: 999px;
  background: rgba(214, 240, 255, 0.18);
  overflow: hidden;
}

.league-hero-day-progress-fill {
  width: 100%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(
    90deg,
    rgba(255, 215, 64, 0.96),
    rgba(120, 230, 255, 0.92)
  );
}

@keyframes heroDayHaloSpin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@keyframes heroDayHaloPulse {
  0%,
  100% {
    opacity: 0.68;
    transform: scale(1);
  }
  50% {
    opacity: 0.98;
    transform: scale(1.045);
  }
}

@keyframes heroDayBackdropDrift {
  0%,
  100% {
    transform: translate3d(
        calc(var(--hero-day-parallax-x) * -1.35),
        calc(var(--hero-day-parallax-y) * -1.15),
        0
      )
      rotate(0deg) scale(1);
  }
  50% {
    transform: translate3d(
        calc(var(--hero-day-parallax-x) * -1.65),
        calc(var(--hero-day-parallax-y) * -1.45),
        0
      )
      rotate(7deg) scale(1.03);
  }
}

@keyframes heroDayBackdropSweep {
  0% {
    transform: translate3d(
      calc(var(--hero-day-parallax-x) * 1.45 - 4%),
      calc(var(--hero-day-parallax-y) * 1.35),
      0
    );
    opacity: 0.46;
  }
  50% {
    transform: translate3d(
      calc(var(--hero-day-parallax-x) * 1.75 + 4%),
      calc(var(--hero-day-parallax-y) * 1.55 - 4%),
      0
    );
    opacity: 0.62;
  }
  100% {
    transform: translate3d(
      calc(var(--hero-day-parallax-x) * 1.45 - 4%),
      calc(var(--hero-day-parallax-y) * 1.35),
      0
    );
    opacity: 0.46;
  }
}

@keyframes heroDayAvatarShine {
  0%,
  58% {
    transform: translateX(-165%) rotate(10deg);
    opacity: 0;
  }
  67% {
    opacity: 0.88;
  }
  84% {
    transform: translateX(135%) rotate(10deg);
    opacity: 0;
  }
  100% {
    transform: translateX(135%) rotate(10deg);
    opacity: 0;
  }
}

@keyframes heroDayNameGlowPulse {
  0%,
  100% {
    color: rgba(248, 252, 255, 0.96);
    text-shadow:
      0 0 0 rgba(110, 222, 255, 0),
      0 8px 18px rgba(5, 16, 40, 0.38);
  }
  50% {
    color: rgba(255, 255, 255, 1);
    text-shadow:
      0 0 14px rgba(150, 236, 255, 0.56),
      0 0 30px rgba(77, 198, 255, 0.28),
      0 9px 22px rgba(4, 18, 46, 0.54);
  }
}

@media (prefers-reduced-motion: reduce) {
  .league-hero-day-banner {
    transform: translateY(0) scale(1) !important;
  }
  .league-hero-day-banner::before,
  .league-hero-day-banner::after,
  .league-hero-day-name,
  .league-hero-day-avatar-wrap::before,
  .league-hero-day-avatar-wrap::after,
  .league-hero-day-avatar-shine {
    animation: none !important;
  }
}

.galaxy-scene {
  position: relative;
  width: min(100%, 540px);
  aspect-ratio: 1 / 1;
  margin: 16px auto 6px;
}

.galaxy-depth {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  border-radius: 50%;
  z-index: 0;
}

.galaxy-depth-layer {
  position: absolute;
  inset: -22%;
  opacity: 0.36;
  transition: transform 0.24s ease-out;
}

.galaxy-depth-layer--far {
  background:
    radial-gradient(
      1px 1px at 12% 34%,
      rgba(255, 255, 255, 0.58),
      transparent 44%
    ),
    radial-gradient(
      1px 1px at 22% 72%,
      rgba(177, 230, 255, 0.54),
      transparent 44%
    ),
    radial-gradient(
      1px 1px at 64% 26%,
      rgba(255, 255, 255, 0.44),
      transparent 44%
    ),
    radial-gradient(
      1px 1px at 74% 78%,
      rgba(190, 238, 255, 0.46),
      transparent 44%
    );
  transform: translate3d(
    calc(var(--galaxy-parallax-x) * -5px),
    calc(var(--galaxy-parallax-y) * -5px),
    0
  );
  animation: galaxyDrift 88s linear infinite;
}

.galaxy-depth-layer--mid {
  background:
    radial-gradient(
      1.4px 1.4px at 18% 16%,
      rgba(169, 228, 255, 0.5),
      transparent 44%
    ),
    radial-gradient(
      1.4px 1.4px at 46% 68%,
      rgba(255, 255, 255, 0.5),
      transparent 44%
    ),
    radial-gradient(
      1.4px 1.4px at 84% 32%,
      rgba(181, 235, 255, 0.52),
      transparent 44%
    ),
    radial-gradient(
      1.4px 1.4px at 58% 88%,
      rgba(255, 255, 255, 0.48),
      transparent 44%
    );
  transform: translate3d(
    calc(var(--galaxy-parallax-x) * -11px),
    calc(var(--galaxy-parallax-y) * -9px),
    0
  );
  animation: galaxyDrift 64s linear infinite reverse;
}

.galaxy-depth-layer--near {
  background:
    radial-gradient(
      2px 2px at 8% 54%,
      rgba(162, 224, 255, 0.56),
      transparent 44%
    ),
    radial-gradient(
      2px 2px at 36% 24%,
      rgba(255, 255, 255, 0.52),
      transparent 44%
    ),
    radial-gradient(
      2px 2px at 68% 62%,
      rgba(163, 228, 255, 0.5),
      transparent 44%
    ),
    radial-gradient(
      2px 2px at 90% 16%,
      rgba(255, 255, 255, 0.5),
      transparent 44%
    );
  transform: translate3d(
    calc(var(--galaxy-parallax-x) * -16px),
    calc(var(--galaxy-parallax-y) * -13px),
    0
  );
  opacity: 0.3;
  animation: galaxyDrift 52s linear infinite;
}

.galaxy-comet {
  position: absolute;
  top: calc(20% + var(--galaxy-comet-y));
  left: -34%;
  width: 124px;
  height: 2px;
  opacity: 0;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0),
    rgba(171, 235, 255, 0.65),
    rgba(255, 255, 255, 0.92)
  );
  filter: drop-shadow(0 0 8px rgba(126, 224, 255, 0.8));
  transform: rotate(-17deg);
  pointer-events: none;
  z-index: 4;
}

.galaxy-comet::after {
  content: "";
  position: absolute;
  right: -6px;
  top: 50%;
  width: 8px;
  height: 8px;
  transform: translateY(-50%);
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(255, 255, 255, 0.96),
    rgba(157, 228, 255, 0.8) 58%,
    rgba(157, 228, 255, 0)
  );
}

.galaxy-home.is-comet-active .galaxy-comet {
  animation: galaxyCometFly 1.28s cubic-bezier(0.3, 0.15, 0.2, 1) forwards;
}

.galaxy-scene::before {
  content: "";
  position: absolute;
  inset: 17% 18%;
  border-radius: 50%;
  background: radial-gradient(
    circle at 50% 50%,
    rgba(166, 224, 255, 0.2),
    rgba(76, 152, 214, 0.12) 42%,
    rgba(12, 33, 67, 0.08) 62%,
    rgba(2, 8, 23, 0) 72%
  );
  filter: blur(2px);
  pointer-events: none;
  transform: translate3d(
    calc(var(--galaxy-parallax-x) * -8px),
    calc(var(--galaxy-parallax-y) * -8px),
    0
  );
  transition: transform 0.22s ease-out;
}

.galaxy-scene::after {
  content: "";
  position: absolute;
  inset: 22% 23%;
  border-radius: 50%;
  border: 1px solid rgba(154, 212, 246, 0.14);
  box-shadow:
    0 0 0 8px rgba(87, 161, 214, 0.05),
    0 0 48px rgba(102, 187, 232, 0.12) inset;
  pointer-events: none;
  transform: translate3d(
    calc(var(--galaxy-parallax-x) * -4px),
    calc(var(--galaxy-parallax-y) * -4px),
    0
  );
  transition: transform 0.22s ease-out;
}

.galaxy-orbit {
  position: absolute;
  border-radius: 50%;
  border: 1px dashed rgba(164, 219, 250, 0.18);
  pointer-events: none;
  z-index: 1;
}

.galaxy-orbit--outer {
  inset: 7%;
  animation: galaxyOrbit 54s linear infinite;
}

.galaxy-orbit--inner {
  inset: 17.5%;
  border-style: solid;
  border-color: rgba(141, 194, 242, 0.12);
  animation: galaxyOrbitReverse 46s linear infinite;
}

.galaxy-magic-beam {
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--galaxy-magic-length, 120px);
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    rgba(188, 240, 255, 0.04),
    rgba(166, 233, 255, 0.88),
    rgba(255, 255, 255, 1)
  );
  box-shadow:
    0 0 26px rgba(132, 226, 255, 0.9),
    0 0 56px rgba(120, 214, 255, 0.34);
  transform-origin: 0 50%;
  transform: translate(-2px, -50%) rotate(var(--galaxy-magic-angle, 0deg))
    scaleX(0.03);
  opacity: 0;
  pointer-events: none;
  z-index: 2;
}

.galaxy-magic-beam::after {
  content: "";
  position: absolute;
  right: -7px;
  top: 50%;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  transform: translateY(-50%) scale(0.58);
  background: radial-gradient(
    circle,
    rgba(255, 255, 255, 1),
    rgba(178, 239, 255, 0.84) 58%,
    rgba(178, 239, 255, 0)
  );
  box-shadow: 0 0 14px rgba(167, 238, 255, 0.74);
  opacity: 0;
}

.galaxy-peek-card {
  --galaxy-peek-x: 50%;
  --galaxy-peek-y: 50%;
  position: absolute;
  left: var(--galaxy-peek-x);
  top: var(--galaxy-peek-y);
  width: min(50vw, 214px);
  min-height: 72px;
  border-radius: 14px;
  border: 1px solid rgba(182, 234, 255, 0.46);
  background: linear-gradient(
    170deg,
    rgba(15, 36, 78, 0.92),
    rgba(8, 20, 44, 0.88)
  );
  box-shadow:
    0 18px 36px rgba(0, 0, 0, 0.42),
    inset 0 1px 0 rgba(222, 247, 255, 0.2);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  padding: 10px 10px 9px;
  opacity: 0;
  transform: translate(-50%, -50%) translateY(10px) scale(0.94);
  transition:
    opacity 0.16s ease,
    transform 0.24s cubic-bezier(0.2, 0.9, 0.22, 1);
  pointer-events: none;
  z-index: 9;
}

.galaxy-home.is-peek-active .galaxy-peek-card {
  opacity: 1;
  transform: translate(-50%, -50%) translateY(-4px) scale(1);
}

.peek-title {
  font-size: 0.74rem;
  font-weight: 860;
  color: rgba(237, 249, 255, 0.98);
  margin-bottom: 7px;
}

.peek-items {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.peek-chip {
  display: inline-flex;
  align-items: center;
  min-height: 20px;
  border-radius: 999px;
  border: 1px solid rgba(172, 232, 255, 0.32);
  background: rgba(18, 47, 88, 0.58);
  color: rgba(214, 240, 255, 0.95);
  padding: 2px 7px;
  font-size: 0.63rem;
  letter-spacing: 0.02em;
}

@keyframes galaxyOrbit {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@keyframes galaxyOrbitReverse {
  from {
    transform: rotate(360deg);
  }
  to {
    transform: rotate(0deg);
  }
}

@keyframes galaxyCometFly {
  0% {
    opacity: 0;
    transform: translate3d(0, 0, 0) rotate(-17deg) scale(0.92);
  }
  12% {
    opacity: 1;
  }
  78% {
    opacity: 0.9;
  }
  100% {
    opacity: 0;
    transform: translate3d(560px, 156px, 0) rotate(-17deg) scale(1.03);
  }
}

.galaxy-moon-core {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%)
    translate3d(
      calc(var(--galaxy-parallax-x) * 4px),
      calc(var(--galaxy-parallax-y) * 4px),
      0
    );
  width: min(42vw, 214px);
  height: min(42vw, 214px);
  border-radius: 50%;
  display: grid;
  place-items: center;
  text-align: center;
  z-index: 3;
  transition: transform 0.22s ease-out;
}

.galaxy-moon-core::before {
  content: "";
  position: absolute;
  inset: -12%;
  border-radius: 50%;
  border: 1px solid rgba(153, 216, 255, 0.16);
  box-shadow:
    0 0 0 12px rgba(77, 149, 207, 0.06),
    0 0 38px rgba(83, 164, 224, 0.24);
  animation: galaxyOrbit 18s linear infinite;
  pointer-events: none;
}

.moon-progress-ring {
  position: absolute;
  inset: 12%;
  border-radius: 50%;
  background: conic-gradient(
    from -90deg,
    rgba(144, 229, 255, 0.94) 0deg,
    rgba(95, 188, 246, 0.92) var(--galaxy-day-progress),
    rgba(103, 170, 224, 0.15) var(--galaxy-day-progress),
    rgba(103, 170, 224, 0.15) 360deg
  );
  -webkit-mask: radial-gradient(
    farthest-side,
    transparent calc(100% - 7px),
    #000 calc(100% - 6px)
  );
  mask: radial-gradient(
    farthest-side,
    transparent calc(100% - 7px),
    #000 calc(100% - 6px)
  );
  opacity: 0.88;
  box-shadow:
    inset 0 0 24px rgba(117, 200, 246, 0.2),
    0 0 24px rgba(77, 167, 220, 0.2);
  transition: background 0.32s ease;
  z-index: 0;
}

.moon-burst-wave {
  position: absolute;
  inset: 10%;
  border-radius: 50%;
  border: 1px solid rgba(167, 229, 255, 0);
  opacity: 0;
  pointer-events: none;
  z-index: 2;
}

.moon-burst-wave::after {
  content: "";
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  background:
    radial-gradient(
      circle at 50% 0,
      rgba(192, 238, 255, 0.92) 0 2px,
      transparent 3px
    ),
    radial-gradient(
      circle at 98% 48%,
      rgba(182, 236, 255, 0.84) 0 2px,
      transparent 3px
    ),
    radial-gradient(
      circle at 52% 100%,
      rgba(206, 244, 255, 0.8) 0 2px,
      transparent 3px
    ),
    radial-gradient(
      circle at 2% 48%,
      rgba(177, 232, 255, 0.84) 0 2px,
      transparent 3px
    );
  opacity: 0;
}

.moon-core-glow {
  position: absolute;
  inset: -14px;
  border-radius: 50%;
  background: radial-gradient(
    circle at 48% 42%,
    rgb(179 242 255 / var(--galaxy-core-glow, 0.52)),
    rgba(72, 156, 255, 0.16) 54%,
    rgba(72, 156, 255, 0) 80%
  );
  filter: blur(6px);
}

.moon-core-disk {
  position: relative;
  z-index: 1;
  width: 64%;
  height: 64%;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: clamp(2.02rem, 8vw, 2.9rem);
  background: radial-gradient(
    circle at 36% 27%,
    rgba(255, 255, 255, 0.99),
    rgba(237, 246, 255, 0.94) 62%,
    rgba(201, 219, 241, 0.9) 100%
  );
  border: 1px solid rgba(244, 251, 255, 0.76);
  box-shadow:
    0 18px 48px rgba(6, 14, 36, 0.54),
    inset 0 -10px 18px rgba(140, 170, 210, 0.2);
  filter: brightness(calc(0.62 + var(--galaxy-phase-brightness, 0.55)));
  transition:
    filter 0.26s ease,
    transform 0.26s ease;
}

.moon-core-disk > span {
  display: inline-block;
  transition:
    transform 0.26s ease,
    opacity 0.26s ease;
}

.moon-phase-label {
  position: absolute;
  left: 50%;
  top: calc(50% - min(42vw, 214px) * 0.56);
  transform: translateX(-50%);
  font-size: 0.62rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: rgba(217, 241, 255, 0.88);
  white-space: nowrap;
  background: rgba(8, 18, 42, 0.66);
  border: 1px solid rgba(152, 216, 252, 0.3);
  border-radius: 999px;
  padding: 4px 10px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
}

.moon-live-status {
  position: absolute;
  left: 50%;
  top: calc(50% - min(42vw, 214px) * 0.43);
  transform: translateX(-50%);
  font-size: 0.62rem;
  line-height: 1.2;
  color: rgba(219, 244, 255, 0.95);
  letter-spacing: 0.02em;
  white-space: nowrap;
  border-radius: 999px;
  border: 1px solid rgba(167, 226, 255, 0.32);
  background: linear-gradient(
    180deg,
    rgba(10, 24, 56, 0.74),
    rgba(7, 18, 42, 0.7)
  );
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.28);
  padding: 4px 9px;
  z-index: 6;
}

.galaxy-home.is-orbit-shift .galaxy-orbit--outer {
  animation-duration: 8s;
}

.galaxy-home.is-orbit-shift .galaxy-orbit--inner {
  animation-duration: 7s;
}

.galaxy-home.is-focus-mode .galaxy-planet {
  opacity: 0.36;
  filter: saturate(0.64) brightness(0.74);
}

.galaxy-home.is-focus-mode .galaxy-planet.is-focus-selected,
.galaxy-home.is-focus-mode .galaxy-planet.is-magic-target {
  opacity: 1;
  filter: saturate(1) brightness(1);
}

.galaxy-home.is-quiet-mode .galaxy-comet,
.galaxy-home.is-quiet-mode .galaxy-magic-beam {
  display: none;
}

.galaxy-home.is-quiet-mode .galaxy-planet,
.galaxy-home.is-quiet-mode .galaxy-depth-layer,
.galaxy-home.is-quiet-mode .galaxy-orbit--outer,
.galaxy-home.is-quiet-mode .galaxy-orbit--inner {
  animation: none !important;
}

.galaxy-home.is-magic-launch .galaxy-scene {
  animation: galaxyMagicZoom 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.galaxy-home.is-magic-launch .galaxy-depth {
  animation: galaxyMagicDepth 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.galaxy-home.is-magic-launch .moon-core-disk {
  animation: galaxyMagicMoonTurn 0.52s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.galaxy-home.is-magic-launch .moon-core-glow,
.galaxy-home.is-magic-launch .moon-progress-ring {
  animation: galaxyMagicCoreFlash 0.6s ease-out;
}

.galaxy-home.is-magic-launch .galaxy-magic-beam {
  animation: galaxyMagicBeam 0.58s cubic-bezier(0.16, 1, 0.3, 1);
}

.galaxy-home.is-magic-launch .galaxy-magic-beam::after {
  animation: galaxyMagicPulse 0.58s cubic-bezier(0.16, 1, 0.3, 1);
}

.galaxy-planet.is-magic-target {
  --planet-scale: 1.06 !important;
  border-color: rgba(217, 248, 255, 0.84);
  box-shadow:
    0 28px 60px rgba(0, 0, 0, 0.56),
    0 0 0 1px rgba(225, 248, 255, 0.66) inset;
  animation: galaxyMagicTargetPulse 0.6s ease-out;
}

@keyframes galaxyMagicMoonTurn {
  0% {
    transform: rotate(0deg) scale(1);
  }
  42% {
    transform: rotate(192deg) scale(1.04);
  }
  100% {
    transform: rotate(180deg) scale(1);
  }
}

@keyframes galaxyMagicBeam {
  0% {
    opacity: 0;
    transform: translate(-2px, -50%) rotate(var(--galaxy-magic-angle, 0deg))
      scaleX(0.03);
  }
  22% {
    opacity: 1;
  }
  64% {
    opacity: 1;
    transform: translate(-2px, -50%) rotate(var(--galaxy-magic-angle, 0deg))
      scaleX(1.08);
  }
  100% {
    opacity: 0;
    transform: translate(-2px, -50%) rotate(var(--galaxy-magic-angle, 0deg))
      scaleX(1.14);
  }
}

@keyframes galaxyMagicPulse {
  0% {
    opacity: 0;
    transform: translateY(-50%) scale(0.58);
  }
  30% {
    opacity: 1;
    transform: translateY(-50%) scale(1.12);
  }
  100% {
    opacity: 0;
    transform: translateY(-50%) scale(1.56);
  }
}

@keyframes galaxyMagicCoreFlash {
  0% {
    filter: brightness(1);
  }
  40% {
    filter: brightness(1.34);
  }
  100% {
    filter: brightness(1.04);
  }
}

@keyframes galaxyMagicTargetPulse {
  0% {
    filter: brightness(1);
  }
  42% {
    filter: brightness(1.34);
  }
  100% {
    filter: brightness(1);
  }
}

@keyframes galaxyMagicZoom {
  0% {
    transform: scale(1);
  }
  45% {
    transform: scale(1.11);
  }
  100% {
    transform: scale(1.08);
  }
}

@keyframes galaxyMagicDepth {
  0% {
    filter: brightness(1);
  }
  45% {
    filter: brightness(1.34);
  }
  100% {
    filter: brightness(1.12);
  }
}

.galaxy-planet.is-launching {
  --planet-scale: 1.08 !important;
  border-color: rgba(198, 243, 255, 0.68);
  box-shadow:
    0 26px 60px rgba(0, 0, 0, 0.52),
    0 0 0 1px rgba(206, 244, 255, 0.46) inset;
}

.galaxy-planet.is-launching .planet-emoji::after {
  animation: galaxyPlanetEmojiBurst 0.72s ease-out;
}

.galaxy-planet.is-spotlight {
  --planet-scale: 1.03;
  border-color: rgba(199, 241, 255, 0.72);
  box-shadow:
    0 24px 44px rgba(0, 0, 0, 0.46),
    0 0 0 1px rgba(208, 244, 255, 0.52) inset;
}

.galaxy-home.is-xp-burst .moon-core-glow {
  animation: galaxyXpBurstGlow 0.62s ease-out;
}

.galaxy-home.is-xp-burst .moon-core-disk {
  animation: galaxyXpBurstDisk 0.62s cubic-bezier(0.16, 1, 0.3, 1);
}

.galaxy-home.is-xp-burst .moon-progress-ring {
  animation: galaxyXpBurstRing 0.72s ease-out;
}

.galaxy-home.is-xp-burst .moon-burst-wave {
  animation: galaxyXpBurstWave 0.72s ease-out;
}

.galaxy-home.is-xp-burst .moon-burst-wave::after {
  animation: galaxyXpBurstParticles 0.72s ease-out;
}

@keyframes galaxyXpBurstGlow {
  0% {
    transform: scale(1);
    filter: blur(4px);
    opacity: 0.96;
  }
  45% {
    transform: scale(1.2);
    filter: blur(7px);
    opacity: 1;
  }
  100% {
    transform: scale(1);
    filter: blur(4px);
    opacity: 0.96;
  }
}

@keyframes galaxyXpBurstDisk {
  0% {
    transform: scale(1);
  }
  45% {
    transform: scale(1.08);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes galaxyXpBurstRing {
  0% {
    filter: brightness(1);
  }
  35% {
    filter: brightness(1.32);
  }
  100% {
    filter: brightness(1);
  }
}

@keyframes galaxyXpBurstWave {
  0% {
    opacity: 0;
    transform: scale(0.9);
    border-color: rgba(167, 229, 255, 0);
  }
  38% {
    opacity: 1;
    border-color: rgba(194, 239, 255, 0.84);
  }
  100% {
    opacity: 0;
    transform: scale(1.22);
    border-color: rgba(167, 229, 255, 0);
  }
}

@keyframes galaxyXpBurstParticles {
  0% {
    opacity: 0;
    transform: scale(0.84);
  }
  35% {
    opacity: 0.95;
    transform: scale(1.02);
  }
  100% {
    opacity: 0;
    transform: scale(1.24);
  }
}

.moon-core-stats {
  position: absolute;
  left: 50%;
  bottom: 8px;
  transform: translateX(-50%);
  display: flex;
  gap: 7px;
  background: linear-gradient(
    180deg,
    rgba(8, 20, 45, 0.78),
    rgba(4, 12, 29, 0.7)
  );
  border: 1px solid rgba(161, 216, 245, 0.28);
  border-radius: 999px;
  padding: 6px 9px;
  font-size: 0.64rem;
  color: rgba(220, 240, 255, 0.86);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  white-space: nowrap;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.3);
  z-index: 6;
}

.moon-core-stats b {
  color: #fff;
  font-weight: 900;
}

.galaxy-planet {
  --planet-scale: 1;
  position: absolute;
  width: min(34vw, 170px);
  min-height: 98px;
  border-radius: 18px;
  border: 1px solid rgba(146, 213, 255, 0.3);
  background:
    linear-gradient(180deg, rgba(17, 38, 82, 0.78), rgba(9, 20, 45, 0.72)),
    linear-gradient(125deg, rgba(86, 176, 230, 0.15), rgba(11, 25, 52, 0.1));
  box-shadow:
    0 18px 34px rgba(0, 0, 0, 0.36),
    inset 0 1px 0 rgba(212, 240, 255, 0.16);
  color: rgba(242, 249, 255, 0.95);
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 7px;
  padding: 10px 10px;
  cursor: pointer;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease,
    background 0.2s ease;
  z-index: 5;
  transform-origin: center;
  overflow: hidden;
  isolation: isolate;
  animation: galaxyPlanetPulse 6.2s ease-in-out infinite;
}

.galaxy-planet::before {
  content: "";
  position: absolute;
  inset: -20%;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(133, 221, 255, 0.36),
    rgba(133, 221, 255, 0)
  );
  opacity: 0.26;
  filter: blur(8px);
  z-index: -1;
  pointer-events: none;
  animation: galaxyPlanetAura 4.8s ease-in-out infinite;
}

.galaxy-planet::after {
  content: "";
  position: absolute;
  inset: -40% -60%;
  background: linear-gradient(
    115deg,
    rgba(255, 255, 255, 0),
    rgba(214, 244, 255, 0.5),
    rgba(255, 255, 255, 0)
  );
  transform: translateX(-130%) rotate(6deg);
  opacity: 0;
  pointer-events: none;
}

.galaxy-planet.is-spotlight::after {
  animation: galaxyPlanetShine 1s ease-out;
}

.galaxy-planet:hover {
  --planet-scale: 1.015;
  border-color: rgba(186, 235, 255, 0.52);
  box-shadow:
    0 22px 42px rgba(0, 0, 0, 0.42),
    inset 0 1px 0 rgba(219, 244, 255, 0.22);
  background:
    linear-gradient(180deg, rgba(25, 53, 108, 0.82), rgba(10, 23, 52, 0.74)),
    linear-gradient(125deg, rgba(97, 194, 250, 0.2), rgba(16, 33, 66, 0.12));
}

.galaxy-planet:active {
  --planet-scale: 0.985;
}

.galaxy-planet .planet-emoji {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-size: 1.12rem;
  line-height: 1;
  background: rgba(214, 240, 255, 0.1);
  border: 1px solid rgba(178, 230, 255, 0.25);
  box-shadow: inset 0 0 16px rgba(164, 225, 255, 0.2);
  position: relative;
  transition: transform 0.18s ease;
}

.galaxy-planet .planet-emoji::after {
  content: "";
  position: absolute;
  inset: -7px;
  border-radius: 50%;
  border: 1px solid rgba(192, 238, 255, 0);
  opacity: 0;
  transform: scale(0.78);
}

.galaxy-planet.is-spotlight .planet-emoji {
  transform: scale(1.08);
}

.galaxy-planet .planet-title {
  font-size: 0.8rem;
  font-weight: 840;
  text-align: center;
  line-height: 1.25;
  letter-spacing: 0.01em;
}

.galaxy-planet .planet-status {
  font-size: 0.61rem;
  font-weight: 640;
  text-align: center;
  color: rgba(194, 224, 247, 0.86);
  letter-spacing: 0.01em;
  line-height: 1.2;
  display: grid;
  justify-items: center;
  gap: 3px;
  max-width: 100%;
}

.galaxy-planet .planet-status[data-galaxy-recommend]::before {
  content: attr(data-galaxy-recommend);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  border: 1px solid rgba(197, 238, 255, 0.72);
  background: linear-gradient(
    180deg,
    rgba(44, 119, 184, 0.55),
    rgba(17, 52, 97, 0.5)
  );
  color: rgba(242, 252, 255, 0.98);
  padding: 2px 7px;
  font-size: 0.54rem;
  font-weight: 820;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  box-shadow: 0 8px 18px rgba(8, 28, 56, 0.38);
}

.galaxy-planet.is-recommended {
  border-color: rgba(206, 243, 255, 0.86);
  box-shadow:
    0 22px 48px rgba(0, 0, 0, 0.48),
    0 0 0 1px rgba(214, 245, 255, 0.6) inset,
    0 0 24px rgba(131, 215, 255, 0.22);
}

.galaxy-planet.is-recommended .planet-emoji {
  animation: galaxyRecommendedCore 1.9s ease-in-out infinite;
}

.galaxy-planet.is-recommended .planet-status {
  color: rgba(227, 246, 255, 0.98);
}

.galaxy-planet.is-energy-burst::after {
  animation: galaxyPlanetEnergySweep 1.2s cubic-bezier(0.18, 0.72, 0.28, 1);
}

.galaxy-planet .planet-emoji::before {
  content: "";
  position: absolute;
  inset: -7px;
  border-radius: 50%;
  border: 1px solid rgba(191, 238, 255, 0);
  opacity: 0;
  transform: scale(0.7);
  pointer-events: none;
}

.galaxy-planet.is-energy-burst .planet-emoji::before {
  animation: galaxyPlanetImpactRing 1.2s cubic-bezier(0.18, 0.72, 0.28, 1);
}

.galaxy-planet--core {
  left: 3%;
  top: 14%;
  animation-delay: 0s, 0s, 0.4s;
  animation-name: galaxyPlanetPulse, galaxyPlanetDriftA, galaxyPlanetLiveBreath;
  animation-duration: 6.2s, 9.8s, 4.8s;
  animation-timing-function: ease-in-out, ease-in-out, ease-in-out;
  animation-iteration-count: infinite, infinite, infinite;
}

.galaxy-planet--portal {
  right: 3%;
  top: 14%;
  animation-delay: 0.7s, 0.2s, 1.1s;
  animation-name: galaxyPlanetPulse, galaxyPlanetDriftB, galaxyPlanetLiveBreath;
  animation-duration: 6.2s, 10.4s, 5.1s;
  animation-timing-function: ease-in-out, ease-in-out, ease-in-out;
  animation-iteration-count: infinite, infinite, infinite;
}

.galaxy-planet--practice {
  left: 3%;
  bottom: 14%;
  animation-delay: 1.2s, 0.5s, 1.6s;
  animation-name: galaxyPlanetPulse, galaxyPlanetDriftC, galaxyPlanetLiveBreath;
  animation-duration: 6.2s, 9.4s, 4.6s;
  animation-timing-function: ease-in-out, ease-in-out, ease-in-out;
  animation-iteration-count: infinite, infinite, infinite;
}

.galaxy-planet--chronicles {
  right: 3%;
  bottom: 14%;
  animation-delay: 1.8s, 0.8s, 2s;
  animation-name: galaxyPlanetPulse, galaxyPlanetDriftD, galaxyPlanetLiveBreath;
  animation-duration: 6.2s, 10.8s, 5.3s;
  animation-timing-function: ease-in-out, ease-in-out, ease-in-out;
  animation-iteration-count: infinite, infinite, infinite;
}

@keyframes galaxyPlanetPulse {
  0%,
  100% {
    border-color: rgba(146, 213, 255, 0.3);
    box-shadow:
      0 18px 34px rgba(0, 0, 0, 0.36),
      inset 0 1px 0 rgba(212, 240, 255, 0.16);
  }
  50% {
    border-color: rgba(180, 232, 255, 0.42);
    box-shadow:
      0 22px 40px rgba(0, 0, 0, 0.42),
      inset 0 1px 0 rgba(225, 248, 255, 0.24);
  }
}

@keyframes galaxyPlanetAura {
  0%,
  100% {
    opacity: 0.22;
    transform: scale(0.92);
  }
  50% {
    opacity: 0.42;
    transform: scale(1.08);
  }
}

@keyframes galaxyPlanetLiveBreath {
  0%,
  100% {
    filter: saturate(0.95) brightness(0.98);
  }
  50% {
    filter: saturate(1.08) brightness(1.08);
  }
}

@keyframes galaxyPlanetEnergySweep {
  0% {
    opacity: 0;
    transform: translateX(-130%) rotate(6deg);
  }
  18% {
    opacity: 0.95;
  }
  100% {
    opacity: 0;
    transform: translateX(138%) rotate(6deg);
  }
}

@keyframes galaxyPlanetImpactRing {
  0% {
    opacity: 0;
    transform: scale(0.7);
    border-color: rgba(191, 238, 255, 0);
  }
  35% {
    opacity: 0.94;
    transform: scale(1);
    border-color: rgba(205, 245, 255, 0.88);
  }
  100% {
    opacity: 0;
    transform: scale(1.34);
    border-color: rgba(191, 238, 255, 0);
  }
}

@keyframes galaxyRecommendedCore {
  0%,
  100% {
    transform: scale(1);
    box-shadow: inset 0 0 16px rgba(164, 225, 255, 0.2);
  }
  50% {
    transform: scale(1.08);
    box-shadow:
      inset 0 0 20px rgba(182, 236, 255, 0.36),
      0 0 14px rgba(151, 228, 255, 0.32);
  }
}

@keyframes galaxyPlanetShine {
  0% {
    opacity: 0;
    transform: translateX(-130%) rotate(6deg);
  }
  22% {
    opacity: 0.84;
  }
  100% {
    opacity: 0;
    transform: translateX(132%) rotate(6deg);
  }
}

@keyframes galaxyPlanetEmojiBurst {
  0% {
    opacity: 0;
    transform: scale(0.74);
    border-color: rgba(192, 238, 255, 0);
  }
  34% {
    opacity: 0.9;
    transform: scale(1);
    border-color: rgba(204, 243, 255, 0.88);
  }
  100% {
    opacity: 0;
    transform: scale(1.28);
    border-color: rgba(192, 238, 255, 0);
  }
}

@keyframes galaxyPlanetDriftA {
  0% {
    transform: translate3d(0, 0, 0) scale(var(--planet-scale));
  }
  25% {
    transform: translate3d(5px, -4px, 0) scale(var(--planet-scale));
  }
  50% {
    transform: translate3d(2px, -7px, 0) scale(var(--planet-scale));
  }
  75% {
    transform: translate3d(-4px, -2px, 0) scale(var(--planet-scale));
  }
  100% {
    transform: translate3d(0, 0, 0) scale(var(--planet-scale));
  }
}

@keyframes galaxyPlanetDriftB {
  0% {
    transform: translate3d(0, 0, 0) scale(var(--planet-scale));
  }
  25% {
    transform: translate3d(-5px, -3px, 0) scale(var(--planet-scale));
  }
  50% {
    transform: translate3d(-2px, -7px, 0) scale(var(--planet-scale));
  }
  75% {
    transform: translate3d(4px, -2px, 0) scale(var(--planet-scale));
  }
  100% {
    transform: translate3d(0, 0, 0) scale(var(--planet-scale));
  }
}

@keyframes galaxyPlanetDriftC {
  0% {
    transform: translate3d(0, 0, 0) scale(var(--planet-scale));
  }
  25% {
    transform: translate3d(5px, 2px, 0) scale(var(--planet-scale));
  }
  50% {
    transform: translate3d(1px, 7px, 0) scale(var(--planet-scale));
  }
  75% {
    transform: translate3d(-5px, 3px, 0) scale(var(--planet-scale));
  }
  100% {
    transform: translate3d(0, 0, 0) scale(var(--planet-scale));
  }
}

@keyframes galaxyPlanetDriftD {
  0% {
    transform: translate3d(0, 0, 0) scale(var(--planet-scale));
  }
  25% {
    transform: translate3d(-4px, 3px, 0) scale(var(--planet-scale));
  }
  50% {
    transform: translate3d(-1px, 7px, 0) scale(var(--planet-scale));
  }
  75% {
    transform: translate3d(5px, 2px, 0) scale(var(--planet-scale));
  }
  100% {
    transform: translate3d(0, 0, 0) scale(var(--planet-scale));
  }
}

.galaxy-quick-portal {
  margin: 14px auto 0;
  width: min(100%, 500px);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.galaxy-quick-btn {
  border: 1px solid rgba(165, 224, 255, 0.38);
  background:
    linear-gradient(180deg, rgba(23, 54, 111, 0.78), rgba(8, 20, 44, 0.8)),
    linear-gradient(135deg, rgba(77, 166, 226, 0.16), rgba(16, 40, 78, 0.12));
  color: #fff;
  border-radius: 15px;
  min-height: 48px;
  font-weight: 840;
  font-size: 0.92rem;
  cursor: pointer;
  box-shadow:
    0 12px 24px rgba(0, 0, 0, 0.26),
    inset 0 1px 0 rgba(212, 244, 255, 0.2);
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease,
    border-color 0.2s ease,
    background 0.2s ease;
}

.galaxy-quick-btn:active {
  transform: scale(0.99);
}

.galaxy-quick-btn:hover {
  border-color: rgba(191, 238, 255, 0.64);
  box-shadow:
    0 16px 30px rgba(0, 0, 0, 0.34),
    inset 0 1px 0 rgba(226, 248, 255, 0.28);
  background:
    linear-gradient(180deg, rgba(30, 67, 133, 0.84), rgba(11, 26, 56, 0.82)),
    linear-gradient(135deg, rgba(95, 188, 248, 0.2), rgba(20, 45, 85, 0.14));
}

.galaxy-home.is-daily-cinematic .galaxy-home-header {
  animation: galaxyCineHeader 620ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.galaxy-home.is-daily-cinematic .galaxy-scene {
  animation: galaxyCineScene 880ms cubic-bezier(0.2, 0.9, 0.3, 1) 100ms both;
}

.galaxy-home.is-daily-cinematic .galaxy-depth-layer {
  animation: galaxyCineDepth 920ms ease-out 60ms both;
}

.galaxy-home.is-daily-cinematic .galaxy-moon-core {
  animation: galaxyCineMoon 980ms cubic-bezier(0.16, 1, 0.3, 1) 210ms both;
}

.galaxy-home.is-daily-cinematic .galaxy-planet {
  animation-name: galaxyCinePlanetIn !important;
  animation-duration: 700ms !important;
  animation-timing-function: cubic-bezier(0.2, 0.88, 0.32, 1) !important;
  animation-fill-mode: both !important;
  animation-iteration-count: 1 !important;
}

.galaxy-home.is-daily-cinematic .galaxy-planet--core {
  animation-delay: 180ms !important;
}
.galaxy-home.is-daily-cinematic .galaxy-planet--portal {
  animation-delay: 270ms !important;
}
.galaxy-home.is-daily-cinematic .galaxy-planet--practice {
  animation-delay: 360ms !important;
}
.galaxy-home.is-daily-cinematic .galaxy-planet--chronicles {
  animation-delay: 450ms !important;
}

.galaxy-home.is-daily-cinematic .galaxy-quick-portal {
  animation: galaxyCinePortal 580ms cubic-bezier(0.22, 0.86, 0.34, 1) 520ms both;
}

@keyframes galaxyCineHeader {
  0% {
    opacity: 0;
    transform: translate3d(0, -12px, 0);
    filter: blur(3px);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    filter: blur(0);
  }
}

@keyframes galaxyCineScene {
  0% {
    opacity: 0;
    transform: scale(0.95);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes galaxyCineDepth {
  0% {
    opacity: 0;
    transform: scale(1.08);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes galaxyCineMoon {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.78) rotate(-8deg);
  }
  100% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1) rotate(0deg);
  }
}

@keyframes galaxyCinePlanetIn {
  0% {
    opacity: 0;
    transform: translate3d(0, 16px, 0) scale(0.86);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
}

@keyframes galaxyCinePortal {
  0% {
    opacity: 0;
    transform: translate3d(0, 16px, 0);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@media (max-width: 760px) {
  .galaxy-home {
    margin: 6px 10px calc(var(--nav-height) + var(--safe-area-bottom) + 16px);
    border-radius: 24px;
    min-height: min(72vh, 650px);
    padding: 16px 12px 14px;
  }
  .galaxy-home-kicker {
    font-size: 0.63rem;
    letter-spacing: 0.26em;
  }
  .galaxy-home-title {
    font-size: clamp(1.42rem, 6.4vw, 1.88rem);
  }
  .galaxy-home-sub {
    font-size: 0.9rem;
    line-height: 1.38;
    max-width: 320px;
  }
  .league-hero-day-banner {
    margin-top: 10px;
    border-radius: 16px;
    padding: 10px 12px;
  }
  .league-hero-day-row {
    grid-template-columns: 96px 1fr;
    gap: 10px;
  }
  .league-hero-day-avatar-wrap {
    width: 96px;
    height: 96px;
  }
  .league-hero-day-avatar {
    width: 88px;
    height: 88px;
  }
  .league-hero-day-name {
    font-size: 1.12rem;
  }
  .league-hero-day-smart {
    font-size: 0.72rem;
  }
  .league-hero-day-role {
    font-size: 0.76rem;
  }
  .league-hero-day-xp {
    font-size: 0.72rem;
  }
  .league-hero-day-badge,
  .league-hero-day-chip {
    font-size: 0.63rem;
    min-height: 18px;
    padding: 2px 6px;
  }
  .league-hero-day-quote {
    font-size: 0.74rem;
  }
  .league-hero-day-chase {
    font-size: 0.67rem;
  }
  .league-hero-day-congrats {
    min-height: 30px;
    font-size: 0.7rem;
  }
  .galaxy-scene {
    margin-top: 14px;
  }
  .galaxy-planet {
    width: min(42vw, 152px);
    min-height: 92px;
    border-radius: 15px;
    padding: 8px 8px;
  }
  .galaxy-planet .planet-title {
    font-size: 0.74rem;
  }
  .galaxy-planet .planet-status {
    font-size: 0.56rem;
    gap: 2px;
  }
  .galaxy-planet .planet-emoji {
    width: 27px;
    height: 27px;
    font-size: 1rem;
  }
  .galaxy-peek-card {
    width: min(58vw, 214px);
    min-height: 68px;
    padding: 9px 9px 8px;
  }
  .peek-title {
    font-size: 0.7rem;
    margin-bottom: 6px;
  }
  .peek-chip {
    font-size: 0.59rem;
    padding: 2px 6px;
  }
  .galaxy-planet--core {
    left: 2.5%;
    top: 13%;
  }
  .galaxy-planet--portal {
    right: 2.5%;
    top: 13%;
  }
  .galaxy-planet--practice {
    left: 2.5%;
    bottom: 12%;
  }
  .galaxy-planet--chronicles {
    right: 2.5%;
    bottom: 12%;
  }
  .galaxy-moon-core {
    width: min(48vw, 200px);
    height: min(48vw, 200px);
  }
  .moon-core-disk {
    width: 63%;
    height: 63%;
  }
  .moon-core-stats {
    font-size: 0.58rem;
    gap: 5px;
    padding: 5px 7px;
  }
  .moon-phase-label {
    font-size: 0.57rem;
    top: calc(50% - min(48vw, 200px) * 0.58);
    padding: 3px 8px;
  }
  .moon-live-status {
    font-size: 0.55rem;
    top: calc(50% - min(48vw, 200px) * 0.44);
    padding: 3px 7px;
  }
  .galaxy-quick-portal {
    margin-top: 12px;
    gap: 10px;
  }
  .galaxy-quick-btn {
    min-height: 44px;
    font-size: 0.88rem;
    border-radius: 13px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .galaxy-home::before,
  .galaxy-home::after,
  .galaxy-depth-layer,
  .galaxy-comet,
  .galaxy-magic-beam,
  .galaxy-magic-beam::after,
  .galaxy-scene::before,
  .galaxy-scene::after,
  .galaxy-moon-core::before,
  .galaxy-orbit--outer,
  .galaxy-orbit--inner,
  .galaxy-planet,
  .galaxy-planet::before,
  .galaxy-planet::after,
  .galaxy-planet .planet-emoji::before,
  .galaxy-planet .planet-emoji::after,
  .galaxy-home.is-xp-burst .moon-core-glow,
  .galaxy-home.is-xp-burst .moon-core-disk,
  .galaxy-home.is-xp-burst .moon-progress-ring,
  .galaxy-home.is-xp-burst .moon-burst-wave,
  .galaxy-home.is-xp-burst .moon-burst-wave::after,
  .galaxy-home.is-magic-launch .galaxy-scene,
  .galaxy-home.is-magic-launch .galaxy-depth,
  .galaxy-home.is-magic-launch .moon-core-disk,
  .galaxy-home.is-magic-launch .moon-core-glow,
  .galaxy-home.is-magic-launch .moon-progress-ring,
  .galaxy-home.is-magic-launch .galaxy-magic-beam,
  .galaxy-home.is-magic-launch .galaxy-magic-beam::after,
  .galaxy-planet.is-magic-target,
  .galaxy-planet.is-energy-burst,
  .galaxy-planet.is-energy-burst::after,
  .galaxy-planet.is-energy-burst .planet-emoji::before,
  .galaxy-planet.is-recommended .planet-emoji,
  .galaxy-home.is-daily-cinematic .galaxy-home-header,
  .galaxy-home.is-daily-cinematic .galaxy-scene,
  .galaxy-home.is-daily-cinematic .galaxy-depth-layer,
  .galaxy-home.is-daily-cinematic .galaxy-moon-core,
  .galaxy-home.is-daily-cinematic .galaxy-planet,
  .galaxy-home.is-daily-cinematic .galaxy-quick-portal {
    animation: none !important;
  }
  .galaxy-peek-card,
  .galaxy-moon-core,
  .moon-core-disk,
  .moon-core-disk > span,
  .galaxy-planet,
  .galaxy-planet .planet-emoji {
    transition: none !important;
  }
}

/* (nav AI button removed) */
.search-container {
  margin: 0 15px 10px 15px;
  padding: 10px;
  background: var(--surface-search);
  border: 1px solid var(--surface-search-border);
  border-radius: 20px;
  box-shadow: var(--surface-search-shadow);
  backdrop-filter: blur(12px) saturate(1.2);
  -webkit-backdrop-filter: blur(12px) saturate(1.2);
  display: flex;
  gap: 10px;
  align-items: center;
}
#sticky-nav-wrapper.is-stuck .search-container {
  background: var(--surface-search-stuck);
  box-shadow: var(--surface-search-shadow-stuck);
}
.search-container:focus-within {
  box-shadow:
    0 0 0 4px var(--surface-search-focus-ring),
    var(--surface-search-focus-shadow);
  border-color: var(--surface-search-focus-border);
}
#website-content {
  opacity: 0;
  transition: opacity 0.5s;
  display: none;
}
#website-content #galaxy-home,
#website-content #main-container {
  transition:
    opacity 0.2s ease,
    transform 0.2s ease;
}
#website-content.is-view-switching #galaxy-home,
#website-content.is-view-switching #main-container {
  opacity: 0.86;
  transform: translateY(2px);
}
#install-btn {
  margin-left: 8px;
  display: none;
}
.tag-toggle-btn {
  background: var(--surface-tag-btn);
  border: 1px solid var(--surface-tag-btn-border);
  border-radius: 16px;
  width: 46px;
  height: 46px;
  font-size: 20px;
  box-shadow: var(--surface-tag-btn-shadow);
  cursor: pointer;
  padding: 0;
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    background 0.18s ease,
    border-color 0.18s ease;
  color: var(--surface-tag-btn-color);
}
.tag-toggle-btn:hover {
  background: var(--surface-tag-btn-hover);
  border-color: var(--surface-tag-btn-hover-border);
  box-shadow: var(--surface-tag-btn-hover-shadow);
}
.tag-toggle-btn:focus-visible {
  outline: 3px solid var(--surface-tag-btn-focus);
  outline-offset: 3px;
}
.tag-toggle-btn:active {
  transform: scale(0.98);
}
#tag-cloud-wrapper {
  display: none;
  margin: 0 15px 10px 15px;
  padding: 10px;
  border-radius: 20px;
  background: var(--surface-tag-cloud-bg);
  border: 1px solid var(--surface-tag-cloud-border);
  box-shadow: var(--surface-tag-cloud-shadow);
  backdrop-filter: blur(12px) saturate(1.2);
  -webkit-backdrop-filter: blur(12px) saturate(1.2);
}
#tag-cloud-content {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  max-height: min(260px, 34vh);
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}
.search-input {
  width: 100%;
  flex: 1 1 auto;
  min-width: 0;
  padding: 0 10px;
  border-radius: 14px;
  border: none;
  background: transparent;
  color: var(--search-input-color);
  font-size: 1rem;
  outline: none;
  transition: color 0.2s ease;
  height: 46px;
  box-shadow: none;
}
.search-container .home-view-toggle {
  flex: 0 0 auto;
  align-self: center;
  background: var(--surface-search-toggle-bg);
  border: 1px solid var(--surface-search-toggle-border);
}
.search-input:focus {
  color: var(--search-input-focus-color);
}
.search-input::placeholder {
  color: var(--search-input-placeholder);
}
@media (max-width: 520px) {
  .search-container {
    margin: 0 12px 8px 12px;
    padding: 8px;
    border-radius: 16px;
    box-shadow: var(--surface-search-shadow-mobile);
    backdrop-filter: blur(8px) saturate(1.1);
    -webkit-backdrop-filter: blur(8px) saturate(1.1);
  }
  #sticky-nav-wrapper.is-stuck .search-container {
    box-shadow: var(--surface-search-shadow-stuck-mobile);
  }
  .search-input {
    height: 42px;
    font-size: 0.95rem;
    padding: 0 9px;
  }
  .tag-toggle-btn {
    width: 42px;
    height: 42px;
    border-radius: 13px;
    box-shadow: var(--surface-tag-btn-shadow-mobile);
  }
  #tag-cloud-wrapper {
    margin: 0 12px 8px 12px;
    padding: 8px;
    border-radius: 16px;
  }
  .categories {
    margin: 0 12px 8px 12px;
    padding: 8px;
    gap: 6px;
    border-radius: 16px;
    box-shadow: var(--surface-categories-shadow-mobile);
    backdrop-filter: blur(8px) saturate(1.1);
    -webkit-backdrop-filter: blur(8px) saturate(1.1);
  }
  .category-btn {
    min-height: 40px;
    padding: 6px 10px;
    font-size: 0.8rem;
  }
}
@media (max-width: 420px) {
  .search-container {
    margin: 0 10px 8px 10px;
    padding: 8px;
    border-radius: 16px;
  }
  .search-input {
    height: 40px;
    border-radius: 13px;
    font-size: 0.92rem;
    padding: 0 8px;
  }
  .tag-toggle-btn {
    width: 40px;
    height: 40px;
    border-radius: 12px;
  }
  .home-controls {
    margin: 0 12px 10px 12px;
    padding: 9px;
    border-radius: 18px;
  }
  .home-controls.home-controls--compact {
    margin: 0 12px 10px auto;
    padding: 8px;
  }
  .home-chip {
    padding: 7px 10px;
    font-size: 0.82rem;
  }
  .home-view-btn {
    padding: 7px 9px;
    min-width: 36px;
  }
  #tag-cloud-wrapper {
    margin: 0 10px 8px 10px;
    padding: 8px;
    border-radius: 16px;
  }
  .categories {
    margin: 0 10px 8px 10px;
    padding: 8px;
    border-radius: 16px;
  }
  .category-btn {
    min-height: 38px;
    padding: 6px 10px;
    font-size: 0.78rem;
  }
  .nav-label {
    font-size: 10.5px;
    letter-spacing: 0.06px;
  }
}

.categories {
  display: flex;
  overflow-x: auto;
  gap: 8px;
  margin: 0 15px 10px 15px;
  padding: 10px 10px;
  border-radius: 20px;
  background: var(--surface-categories-bg);
  border: 1px solid var(--surface-categories-border);
  box-shadow: var(--surface-categories-shadow);
  backdrop-filter: blur(12px) saturate(1.2);
  -webkit-backdrop-filter: blur(12px) saturate(1.2);
  scroll-padding-left: 10px;
  scroll-padding-right: 10px;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  scroll-snap-type: x mandatory;
  position: relative;
}
.categories::before,
.categories::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 22px;
  pointer-events: none;
  z-index: 2;
}
.categories::before {
  left: 0;
  background: linear-gradient(
    90deg,
    var(--surface-categories-fade),
    rgba(255, 255, 255, 0)
  );
}
.categories::after {
  right: 0;
  background: linear-gradient(
    270deg,
    var(--surface-categories-fade),
    rgba(255, 255, 255, 0)
  );
}
.categories::-webkit-scrollbar {
  display: none;
}
.category-btn {
  padding: 8px 12px;
  min-height: 44px;
  white-space: nowrap;
  border: 1px solid var(--surface-category-chip-border);
  border-radius: 999px;
  background: var(--surface-category-chip-bg);
  color: var(--surface-category-chip-color);
  font-size: 0.84rem;
  font-weight: 850;
  letter-spacing: -0.01em;
  box-shadow: none;
  scroll-snap-align: start;
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    background 0.18s ease,
    border-color 0.18s ease,
    color 0.18s ease;
}
@media (hover: hover) and (pointer: fine) {
  .category-btn:hover {
    border-color: var(--surface-category-chip-hover-border);
    box-shadow: var(--surface-category-chip-hover-shadow);
    transform: translateY(-1px);
  }
}
.category-btn:active {
  transform: scale(0.98);
}
.category-btn:focus-visible {
  outline: 3px solid var(--surface-category-chip-focus);
  outline-offset: 3px;
}
.category-btn.active {
  background: var(--surface-category-chip-active-bg);
  color: var(--surface-category-chip-active-color);
  border-color: var(--surface-category-chip-active-border);
  box-shadow: var(--surface-category-chip-active-shadow);
}

.fav-toggle-wrapper {
  padding: 0 15px 10px 15px;
  display: flex;
  align-items: center;
}
.fav-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 16px;
  border-radius: 999px;
  border: 1px solid var(--surface-fav-chip-border);
  background: var(--surface-fav-chip-bg);
  color: var(--surface-fav-chip-color);
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition:
    all 0.2s ease,
    transform 0.2s ease;
  box-shadow: var(--surface-fav-chip-shadow);
  position: relative;
}
.fav-chip:hover {
  transform: translateY(-1px);
}
.fav-chip .chip-icon {
  font-size: 1rem;
}
.fav-chip .chip-label {
  white-space: nowrap;
}
.fav-chip input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}
.fav-chip.is-active {
  border-color: var(--surface-fav-chip-active-border);
  background: var(--surface-fav-chip-active-bg);
  color: var(--surface-fav-chip-active-color);
  box-shadow: var(--surface-fav-chip-active-shadow);
}
.fav-chip.is-active .chip-icon {
  filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.6));
}

/* Home controls (quick presets + view toggle) */
.home-controls {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  margin: 0 15px 10px 15px;
  padding: 10px;
  border-radius: 20px;
  background: var(--surface-home-controls-bg);
  border: 1px solid var(--surface-home-controls-border);
  box-shadow: var(--surface-home-controls-shadow);
  backdrop-filter: blur(12px) saturate(1.2);
  -webkit-backdrop-filter: blur(12px) saturate(1.2);
}
.home-controls.home-controls--compact {
  width: fit-content;
  margin: 0 15px 10px auto;
  padding: 8px;
}
#sticky-nav-wrapper.is-stuck .home-controls {
  background: var(--surface-home-controls-stuck-bg);
}
.home-filters {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  scroll-snap-type: x mandatory;
}
.home-filters::-webkit-scrollbar {
  display: none;
}
.home-chip {
  border: 1px solid var(--surface-home-chip-border);
  background: var(--surface-home-chip-bg);
  color: var(--surface-home-chip-color);
  border-radius: 999px;
  padding: 8px 12px;
  font-weight: 800;
  font-size: 0.85rem;
  white-space: nowrap;
  box-shadow: var(--surface-home-chip-shadow);
  scroll-snap-align: start;
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    background 0.18s ease,
    border-color 0.18s ease;
}
@media (hover: hover) and (pointer: fine) {
  .home-chip:hover {
    border-color: var(--surface-home-chip-hover-border);
    box-shadow: var(--surface-home-chip-hover-shadow);
    transform: translateY(-1px);
  }
}
.home-chip:focus-visible {
  outline: 3px solid var(--surface-home-chip-focus);
  outline-offset: 3px;
}
.home-chip:active {
  transform: scale(0.98);
}
.home-chip.active {
  border-color: var(--surface-home-chip-active-border);
  color: var(--surface-home-chip-active-color);
  background: var(--surface-home-chip-active-bg);
  box-shadow: var(--surface-home-chip-active-shadow);
}
.home-view-toggle {
  display: inline-flex;
  border-radius: 999px;
  background: var(--surface-home-view-toggle-bg);
  border: 1px solid var(--surface-home-view-toggle-border);
  box-shadow: var(--surface-home-view-toggle-shadow);
  overflow: hidden;
  position: relative;
}
.home-view-btn {
  border: none;
  background: transparent;
  padding: 8px 10px;
  font-weight: 900;
  font-size: 0.95rem;
  color: var(--surface-home-view-btn-color);
  cursor: pointer;
  min-width: 38px;
  transition:
    background 180ms ease,
    color 180ms ease,
    transform 180ms ease;
}
.home-view-btn:hover {
  background: var(--surface-home-view-btn-hover-bg);
}
.home-view-btn:focus-visible {
  outline: 3px solid var(--surface-home-view-btn-focus);
  outline-offset: 3px;
}
.home-view-btn.active {
  background: var(--surface-home-view-btn-active-bg);
  color: var(--surface-home-view-btn-active-color);
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 15px;
}
.menu-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--home-grid-min), 1fr));
  gap: var(--home-grid-gap);
  padding: 15px 0;
  align-content: start;
}
@media (max-width: 520px) {
  .menu-grid {
    --home-grid-gap: 12px;
    --home-grid-min: 170px;
    padding: 12px 0;
  }
}
@media (min-width: 980px) {
  .menu-grid {
    --home-grid-gap: 18px;
    --home-grid-min: 240px;
  }
}

/* List mode for menu grid */
.menu-grid.is-list {
  grid-template-columns: 1fr;
}
.menu-grid.is-list .card {
  flex-direction: row;
  min-height: 112px;
}
.menu-grid.is-list .card-img-container {
  flex: 0 0 122px;
  width: 122px;
  padding-top: 0;
  height: auto;
}
.menu-grid.is-list .card-content {
  padding: 14px 14px;
  width: 100%;
  gap: 6px;
}
.menu-grid.is-list .card-subtitle {
  margin-bottom: 6px;
}
.menu-grid.is-list .card-ingredients {
  -webkit-line-clamp: 2;
}
.menu-grid.is-list .card-img-container {
  border-radius: 22px 0 0 22px;
}
.menu-grid.is-list .card-price {
  min-width: 70px;
}
@media (max-width: 420px) {
  .menu-grid.is-list .card-img-container {
    flex-basis: 108px;
    width: 108px;
  }
}

.luna-load-more {
  grid-column: 1 / -1;
  width: 100%;
  min-height: var(--size-load-more-min-height);
  padding: 12px 14px;
  border-radius: 16px;
  border: 1px solid var(--surface-load-more-border);
  background: var(--surface-load-more-bg);
  color: var(--surface-load-more-color);
  font-weight: 850;
  letter-spacing: -0.01em;
  cursor: pointer;
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    border-color 0.18s ease;
}
.luna-load-more:active {
  transform: scale(0.99);
}
@media (hover: hover) and (pointer: fine) {
  .luna-load-more:hover {
    border-color: var(--surface-load-more-hover-border);
    box-shadow: var(--surface-load-more-hover-shadow);
    transform: translateY(-1px);
  }
}
.game-panel {
  display: none;
  flex-direction: column;
}
#game-overlay {
  position: fixed;
  inset: 0;
  background: rgba(2, 3, 12, 0.6);
  backdrop-filter: blur(12px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  z-index: 10050;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity 220ms ease,
    visibility 0s linear 220ms;

  /* Overlay-only game polish tokens */
  --game-card-radius: 20px;
  --game-card-pad: 14px 14px 12px;
  --game-card-shadow: 0 16px 42px rgba(15, 23, 42, 0.1);
  --game-label-size: 11px;
  --game-label-ls: 0.18em;
  --game-label-weight: 900;
  --game-label-color: var(--game-muted);
  --game-gap: 12px;
  --game-answers-gap: 10px;
  --game-option-font: 0.98rem;
  --game-option-pad: 14px 14px;
  --game-option-radius: 18px;
}
@media (max-width: 640px) {
  #game-overlay {
    padding: 10px 8px;
    --game-option-font: 1rem;
  }
  #game-overlay .game-panel {
    width: calc(100% - 16px);
    max-height: calc(100dvh - 16px);
    border-radius: 22px;
  }
}
@media (max-width: 420px) {
  #game-overlay {
    padding: 8px 6px;
  }
  #game-overlay .game-panel {
    width: calc(100% - 12px);
    max-height: calc(100dvh - 12px);
    border-radius: 20px;
  }
}
#game-overlay::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(
      circle at 20% 20%,
      rgba(255, 255, 255, 0.25),
      transparent 45%
    ),
    radial-gradient(
      circle at 80% 10%,
      rgba(255, 173, 94, 0.35),
      transparent 42%
    ),
    radial-gradient(
      circle at 60% 60%,
      rgba(100, 210, 255, 0.25),
      transparent 30%
    ),
    linear-gradient(135deg, rgba(8, 12, 26, 0.92), rgba(12, 24, 48, 0.95));
  opacity: 0.8;
  filter: blur(0.5px);
  pointer-events: none;
  animation: overlayPulse 9s ease-in-out infinite alternate;
}
#game-overlay::after {
  content: "";
  position: absolute;
  inset: 10% 15%;
  background: radial-gradient(
    circle,
    rgba(255, 255, 255, 0.12),
    transparent 55%
  );
  opacity: 0.6;
  pointer-events: none;
  mix-blend-mode: screen;
  animation: overlayGlow 12s ease-in-out infinite alternate;
}
#game-overlay.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity 220ms ease;
}
#game-overlay .game-panel {
  position: relative;
  z-index: 1;
  background: var(--game-panel-bg);
  border-radius: var(--game-panel-radius);
  padding: 0;
  max-width: var(--game-panel-max-width);
  width: min(var(--game-panel-max-width), calc(100% - 80px));
  max-height: calc(100vh - 80px);
  max-height: calc(100dvh - 80px);
  box-shadow: var(--game-panel-shadow);
  border: var(--game-panel-border);
}

#game-overlay.is-active .game-panel,
#game-overlay.is-active .quiz-result {
  animation: gamePanelIn 260ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes gamePanelIn {
  from {
    transform: translateY(10px) scale(0.985);
    opacity: 0;
  }
  to {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
}
@keyframes overlayPulse {
  from {
    transform: scale(1);
    opacity: 0.8;
  }
  to {
    transform: scale(1.02);
    opacity: 0.9;
  }
}
@keyframes overlayGlow {
  from {
    transform: translateY(-10px) scale(1);
    opacity: 0.5;
  }
  to {
    transform: translateY(10px) scale(1.1);
    opacity: 0.75;
  }
}

@media (prefers-reduced-motion: reduce) {
  #game-overlay {
    transition: none;
  }
  #game-overlay.is-active .game-panel,
  #game-overlay.is-active .quiz-result {
    animation: none;
  }
  #game-overlay::before,
  #game-overlay::after {
    animation: none;
  }
}
.game-screen {
  display: flex;
  flex-direction: column;
  position: relative;
  flex: 1;
  min-height: 0;
}
.game-topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 14px;
  background: var(--game-chrome-bg);
  border-bottom: var(--game-chrome-border);
}
.game-topbar-actions {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  flex: 0 0 auto;
}
.game-hint-badge {
  position: absolute;
  top: 12px;
  right: 14px;
  padding: 6px 16px;
  border-radius: 999px;
  background: var(--surface-game-hint-bg);
  box-shadow: var(--surface-game-hint-shadow);
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--surface-game-hint-color);
  font-weight: 700;
  border: 1px solid var(--surface-game-hint-border);
  pointer-events: none;
  opacity: 0.95;
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
}
.game-hint-badge::after {
  content: "☆";
  margin-left: 6px;
  opacity: 0.6;
}
.game-hint-badge.shifted {
  transform: translateY(-6px);
  box-shadow: var(--surface-game-hint-shadow-shifted);
}
.oracle-hint-badge {
  background: var(--surface-game-hint-oracle-bg);
  color: var(--surface-game-hint-oracle-color);
}
.memory-hint-badge {
  background: var(--surface-game-hint-memory-bg);
  color: var(--surface-game-hint-memory-color);
  border-color: var(--surface-game-hint-memory-border);
}
#game-overlay .memory-coachline {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin: 0 0 10px;
  padding: 11px 13px;
  border-radius: 16px;
  border: 1px solid rgba(8, 18, 34, 0.12);
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.9),
    rgba(242, 250, 255, 0.84)
  );
  color: rgba(8, 18, 34, 0.76);
  font-size: 0.84rem;
  line-height: 1.42;
  font-weight: 760;
  box-shadow: 0 12px 26px rgba(15, 23, 42, 0.1);
}
#game-overlay .memory-coachline::before {
  content: "🧠";
  flex: 0 0 auto;
  font-size: 0.95rem;
  line-height: 1.1;
}
.game-title {
  font-weight: 700;
  font-size: 15px;
  text-align: center;
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--game-text);
}
.game-back,
.game-close {
  border: var(--game-btn-border);
  background: var(--game-btn-bg);
  color: var(--game-btn-text);
  border-radius: 12px;
  padding: 8px 10px;
  font-size: 14px;
  cursor: pointer;
  transition:
    transform 0.18s ease,
    background 0.18s ease,
    box-shadow 0.18s ease;
}
.game-back:hover,
.game-close:hover {
  background: var(--game-btn-hover-bg);
  box-shadow: var(--game-btn-hover-shadow);
  transform: translateY(-1px);
}
.game-back:active,
.game-close:active {
  transform: translateY(0) scale(0.98);
}
.game-meta {
  padding: 10px 14px 12px;
  background: var(--game-chrome-bg);
  border-bottom: var(--game-chrome-border);
}
.game-round {
  font-size: 13px;
  color: var(--game-muted);
  margin-bottom: 8px;
}
.game-progress {
  height: 6px;
  background: var(--game-track);
  border-radius: 999px;
  overflow: hidden;
}
.game-progress .fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #48c6ef, #6f86d6);
  border-radius: 999px;
  transition: width 0.4s ease;
}
.game-body {
  flex: 1;
  padding: 14px;
  padding-bottom: calc(14px + env(safe-area-inset-bottom));
  overflow: auto;
  min-height: 0;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.game-body::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}

/* Quiz: make "question" visually distinct from answers (overlay only) */
#game-overlay #quiz-question.quiz-question-text {
  position: sticky;
  top: 0;
  z-index: 5;
  margin: 0 0 var(--game-gap);
  padding: var(--game-card-pad);
  border-radius: var(--game-card-radius);
  text-align: left;
  font-size: 1.05rem;
  line-height: 1.45;
  font-weight: 850;
  color: var(--game-text);
  background:
    radial-gradient(
      600px 180px at 12% 0%,
      rgba(0, 210, 255, 0.14),
      transparent 55%
    ),
    radial-gradient(
      520px 220px at 88% 0%,
      rgba(127, 90, 255, 0.14),
      transparent 60%
    ),
    var(--game-chrome-bg);
  border: 1px solid var(--game-choice-border);
  box-shadow: var(--game-card-shadow);
}
#game-overlay #quiz-question.quiz-question-text::before {
  content: "Вопрос";
  display: block;
  font-size: var(--game-label-size);
  letter-spacing: var(--game-label-ls);
  text-transform: uppercase;
  font-weight: var(--game-label-weight);
  color: var(--game-label-color);
  margin-bottom: 8px;
}

#game-overlay #quiz-options.quiz-options {
  counter-reset: lunaQuizOpt;
  gap: var(--game-answers-gap);
}
#game-overlay #quiz-options.quiz-options::before {
  content: "Ответы";
  display: block;
  font-size: var(--game-label-size);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: var(--game-label-weight);
  color: var(--game-label-color);
  margin: 2px 2px 0;
}

/* Games: clear question vs answers (overlay only) */
#game-overlay #training-question-text.training-question,
#game-overlay #memory-phase-1 .memory-phase-title,
#game-overlay #memory-phase-2 .memory-phase-title {
  border-radius: var(--game-card-radius);
  padding: var(--game-card-pad);
  text-align: left;
  font-size: 1.02rem;
  line-height: 1.4;
  font-weight: 900;
  color: var(--game-text);
  background:
    radial-gradient(
      600px 180px at 12% 0%,
      rgba(0, 210, 255, 0.12),
      transparent 55%
    ),
    radial-gradient(
      520px 220px at 88% 0%,
      rgba(127, 90, 255, 0.12),
      transparent 60%
    ),
    var(--game-chrome-bg);
  border: 1px solid var(--game-choice-border);
  box-shadow: var(--game-card-shadow);
  margin: 0 0 var(--game-gap);
}
#game-overlay #training-question-text.training-question::before {
  content: "Вопрос";
  display: block;
  font-size: var(--game-label-size);
  letter-spacing: var(--game-label-ls);
  text-transform: uppercase;
  font-weight: var(--game-label-weight);
  color: var(--game-label-color);
  margin-bottom: 8px;
}
#game-overlay #memory-phase-1 .memory-phase-title::before {
  content: "Вопрос";
  display: block;
  font-size: var(--game-label-size);
  letter-spacing: var(--game-label-ls);
  text-transform: uppercase;
  font-weight: var(--game-label-weight);
  color: var(--game-label-color);
  margin-bottom: 8px;
}
#game-overlay #memory-phase-2 .memory-phase-title::before {
  content: "Вопрос";
  display: block;
  font-size: var(--game-label-size);
  letter-spacing: var(--game-label-ls);
  text-transform: uppercase;
  font-weight: var(--game-label-weight);
  color: var(--game-label-color);
  margin-bottom: 8px;
}

#game-overlay #quiz-options.quiz-options::before,
#game-overlay #training-options.training-options::before,
#game-overlay #conflict-options.conflict-options::before,
#game-overlay #upsell-options.upsell-options::before,
#game-overlay #memory-options-grid.memory-options-grid::before,
#game-overlay #allergen-options.allergen-options::before {
  content: "Ответы";
  display: block;
  font-size: var(--game-label-size);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: var(--game-label-weight);
  color: var(--game-label-color);
  margin: 2px 2px 0;
}
#game-overlay #upsell-options.upsell-options::before {
  grid-column: 1 / -1;
}
#game-overlay #memory-options-grid.memory-options-grid::before,
#game-overlay #allergen-options.allergen-options::before {
  grid-column: 1 / -1;
}
#game-overlay #conflict-options.conflict-options::before {
  content: attr(data-options-label);
}

/* Overlay-only: keep answer blocks consistent */
#game-overlay #quiz-options.quiz-options,
#game-overlay #training-options.training-options,
#game-overlay #conflict-options.conflict-options,
#game-overlay #upsell-options.upsell-options,
#game-overlay #memory-options-grid.memory-options-grid,
#game-overlay #allergen-options.allergen-options,
#game-overlay #grape-options.grape-options {
  gap: var(--game-answers-gap);
}

#game-overlay #upsell-game-container .upsell-scene {
  position: relative;
}
#game-overlay #upsell-game-container .upsell-scene::before {
  content: "Вопрос";
  display: block;
  font-size: var(--game-label-size);
  letter-spacing: var(--game-label-ls);
  text-transform: uppercase;
  font-weight: var(--game-label-weight);
  color: var(--game-label-color);
  margin-bottom: 10px;
}
#game-overlay #upsell-game-container .upsell-scene {
  background: var(--surface-upsell-scene-bg);
  border: 1px solid var(--surface-upsell-scene-border);
  border-radius: var(--game-card-radius);
  padding: var(--game-card-pad);
  box-shadow: var(--game-card-shadow);
}
#game-overlay #upsell-game-container .upsell-context {
  font-weight: 950;
  font-size: 1.02rem;
  line-height: 1.42;
}
#game-overlay #upsell-game-container .upsell-guest {
  margin-top: 10px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 999px;
  background: var(--surface-upsell-guest-bg);
  border: 1px solid var(--surface-upsell-guest-border);
  color: var(--surface-upsell-guest-color);
  font-weight: 850;
  font-size: 0.9rem;
}
#game-overlay #upsell-game-container .upsell-meta {
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 18px;
  background: var(--surface-upsell-meta-bg);
  border: 1px solid var(--surface-upsell-meta-border);
  box-shadow: var(--surface-upsell-meta-shadow);
}
#game-overlay #upsell-game-container .upsell-options {
  margin-top: 12px;
}
#game-overlay #upsell-game-container .upsell-feedback {
  margin-top: 10px;
  padding: 12px 12px;
  border-radius: 18px;
  background: var(--surface-upsell-feedback-bg);
  border: 1px solid var(--surface-upsell-feedback-border);
  box-shadow: var(--surface-upsell-feedback-shadow);
  color: var(--surface-upsell-feedback-color);
  font-weight: 750;
  line-height: 1.4;
}
#game-overlay #upsell-game-container .upsell-feedback-title {
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 900;
  color: var(--surface-upsell-feedback-label);
  margin-bottom: 8px;
}
#game-overlay #upsell-game-container .upsell-feedback-line {
  font-size: 0.9rem;
  line-height: 1.4;
  font-weight: 760;
  color: var(--surface-upsell-feedback-color);
}
#game-overlay #upsell-game-container .upsell-feedback-line.is-muted {
  margin-top: 4px;
  font-weight: 700;
  opacity: 0.9;
}
#game-overlay #upsell-game-container .upsell-feedback-values {
  margin-top: 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
#game-overlay #upsell-game-container .upsell-feedback-chip {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  border: 1px solid rgba(0, 118, 103, 0.24);
  background: rgba(255, 255, 255, 0.74);
  color: rgba(0, 83, 72, 0.94);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
  padding: 4px 10px;
}
#game-overlay #upsell-game-container .upsell-feedback-case {
  margin-top: 8px;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(0, 83, 72, 0.74);
}
#game-overlay #upsell-game-container .upsell-feedback:empty {
  display: none;
}
#game-overlay #upsell-game-container .upsell-feedback::before {
  display: none;
}
#game-overlay #training-feedback.training-feedback {
  margin-top: 10px;
  padding: 12px 12px;
  border-radius: 18px;
  background: var(--surface-upsell-feedback-bg);
  border: 1px solid var(--surface-upsell-feedback-border);
  box-shadow: var(--surface-upsell-feedback-shadow);
  color: var(--surface-upsell-feedback-color);
  font-weight: 750;
  line-height: 1.4;
  min-height: 0;
}
#game-overlay #training-feedback.training-feedback::before {
  content: "Разбор";
  display: block;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 900;
  color: var(--surface-upsell-feedback-label);
  margin-bottom: 8px;
}
#game-overlay #training-feedback.training-feedback:empty,
#game-overlay #training-feedback.training-feedback[hidden] {
  display: none;
}

#game-overlay #conflict-game-container .conflict-scene {
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-end;
  gap: 12px;
  margin-bottom: 14px;
}
#game-overlay #conflict-game-container .conflict-coachline {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin: 0 0 12px;
  padding: 11px 13px;
  border-radius: 16px;
  border: 1px solid rgba(8, 18, 34, 0.12);
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.9),
    rgba(242, 250, 255, 0.84)
  );
  color: rgba(8, 18, 34, 0.76);
  font-size: 0.84rem;
  line-height: 1.42;
  font-weight: 760;
  box-shadow: 0 12px 26px rgba(15, 23, 42, 0.1);
}
#game-overlay #conflict-game-container .conflict-coachline[hidden] {
  display: none;
}
#game-overlay #conflict-game-container .conflict-coachline::before {
  content: "💡";
  flex: 0 0 auto;
  font-size: 0.95rem;
  line-height: 1.1;
}
#game-overlay #conflict-game-container .conflict-explanation {
  display: grid;
  gap: 6px;
  margin: 0 0 12px;
  padding: 11px 13px;
  border-radius: 16px;
  border: 1px solid rgba(8, 18, 34, 0.14);
  background: linear-gradient(
    145deg,
    rgba(255, 255, 255, 0.94),
    rgba(246, 252, 255, 0.9)
  );
  color: rgba(8, 18, 34, 0.84);
  box-shadow: 0 12px 26px rgba(15, 23, 42, 0.1);
}
#game-overlay #conflict-game-container .conflict-explanation[hidden] {
  display: none;
}
#game-overlay #conflict-game-container .conflict-explanation-title {
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 900;
  color: rgba(8, 18, 34, 0.62);
}
#game-overlay #conflict-game-container .conflict-explanation-line {
  font-size: 0.87rem;
  line-height: 1.42;
  font-weight: 760;
  color: rgba(8, 18, 34, 0.9);
}
#game-overlay #conflict-game-container .conflict-explanation-line.is-muted {
  font-weight: 700;
  color: rgba(8, 18, 34, 0.72);
}
#game-overlay #conflict-game-container .conflict-cosmos-values {
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
#game-overlay #conflict-game-container .conflict-cosmos-chip {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  border: 1px solid rgba(0, 118, 103, 0.24);
  background: rgba(255, 255, 255, 0.78);
  color: rgba(0, 83, 72, 0.94);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
  padding: 4px 10px;
}
#game-overlay #conflict-game-container .conflict-case-line {
  margin-top: 8px;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(0, 83, 72, 0.74);
}
#game-overlay #conflict-game-container .guest-face {
  flex: 0 0 auto;
  font-size: 64px;
  margin-bottom: 0;
}
#game-overlay #conflict-game-container .guest-bubble {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  max-width: none;
  border-radius: var(--game-card-radius);
  border: 1px solid var(--surface-conflict-bubble-border);
  border-bottom-left-radius: var(--game-card-radius);
  padding: 18px 16px 16px;
  background: var(--surface-conflict-bubble-bg);
  box-shadow: var(--game-card-shadow);
  font-size: 1.06rem;
  font-weight: 800;
  line-height: 1.45;
  color: var(--surface-conflict-bubble-color);
}
#game-overlay #conflict-game-container .guest-bubble::after {
  display: none;
}
#game-overlay #conflict-game-container .guest-bubble::before {
  content: attr(data-scene-label);
  position: absolute;
  top: -10px;
  left: 14px;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: var(--game-label-size);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: var(--game-label-weight);
  background: var(--surface-conflict-label-bg);
  border: 1px solid var(--surface-conflict-label-border);
  color: var(--surface-conflict-label-color);
}
@media (max-width: 420px) {
  #game-overlay #conflict-game-container .guest-face {
    font-size: 56px;
  }
  #game-overlay #conflict-game-container .guest-bubble {
    font-size: 1.02rem;
    padding: 16px 14px 14px;
  }
  #game-overlay #conflict-game-container .conflict-coachline {
    margin-bottom: 10px;
    font-size: 0.8rem;
    padding: 10px 11px;
  }
  #game-overlay #conflict-game-container .conflict-explanation {
    margin-bottom: 10px;
    padding: 10px 11px;
  }
}
#game-overlay #conflict-options.conflict-options {
  counter-reset: lunaConflictOpt;
}
#game-overlay #conflict-options.conflict-options .conflict-btn {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-weight: 850;
  line-height: 1.36;
  min-height: 72px;
  padding: 14px 14px;
}
#game-overlay #conflict-options.conflict-options .conflict-btn::before {
  counter-increment: lunaConflictOpt;
  content: counter(lunaConflictOpt, upper-alpha);
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  font-size: 12px;
  font-weight: 900;
  background: var(--surface-conflict-badge-bg);
  border: 1px solid var(--surface-conflict-badge-border);
  color: var(--surface-conflict-badge-color);
}
#game-overlay #conflict-options.conflict-options .conflict-btn::after {
  content: "›";
  margin-left: auto;
  font-size: 18px;
  line-height: 1;
  opacity: 0.45;
}
#game-overlay #conflict-options.conflict-options {
  padding-bottom: calc(24px + env(safe-area-inset-bottom));
}
#game-overlay #conflict-options.conflict-options .conflict-btn:disabled {
  opacity: 0.72;
  cursor: default;
  transform: none;
}
#game-overlay
  #conflict-game-container[data-mode="service"]
  #conflict-options.conflict-options
  .conflict-btn.is-best-answer {
  opacity: 1;
  border-color: rgba(0, 150, 126, 0.56);
  background: linear-gradient(
    150deg,
    rgba(226, 255, 249, 0.98),
    rgba(212, 250, 239, 0.94)
  );
  box-shadow: 0 12px 24px rgba(0, 150, 126, 0.16);
}
#game-overlay
  #conflict-game-container[data-mode="service"]
  #conflict-options.conflict-options
  .conflict-btn.is-selected-wrong {
  opacity: 0.86;
  border-color: rgba(192, 56, 56, 0.44);
  background: linear-gradient(
    150deg,
    rgba(255, 243, 243, 0.95),
    rgba(255, 236, 236, 0.9)
  );
}
#game-overlay #conflict-game-container[data-mode="service"] .quiz-level-badge {
  background: rgba(0, 150, 126, 0.18);
  border-color: rgba(0, 150, 126, 0.3);
  color: rgba(0, 88, 76, 0.96);
}
#game-overlay
  #conflict-game-container[data-mode="service"]
  .conflict-coachline {
  border-color: rgba(0, 150, 126, 0.24);
  background: linear-gradient(
    135deg,
    rgba(226, 255, 249, 0.92),
    rgba(235, 247, 255, 0.86)
  );
  color: rgba(0, 90, 76, 0.92);
  box-shadow: 0 14px 30px rgba(0, 150, 126, 0.12);
}
#game-overlay
  #conflict-game-container[data-mode="service"]
  .conflict-coachline::before {
  content: "🤝";
}
#game-overlay
  #conflict-game-container[data-mode="service"]
  .conflict-explanation {
  border-color: rgba(0, 150, 126, 0.28);
  background: linear-gradient(
    145deg,
    rgba(228, 255, 248, 0.96),
    rgba(238, 248, 255, 0.92)
  );
  color: rgba(0, 84, 72, 0.92);
  box-shadow: 0 14px 30px rgba(0, 150, 126, 0.13);
}
#game-overlay
  #conflict-game-container[data-mode="service"]
  .conflict-explanation-title {
  color: rgba(0, 98, 82, 0.7);
}
#game-overlay
  #conflict-game-container[data-mode="service"]
  .conflict-explanation-line {
  color: rgba(0, 84, 72, 0.95);
}
#game-overlay
  #conflict-game-container[data-mode="service"]
  .conflict-explanation-line.is-muted {
  color: rgba(0, 84, 72, 0.78);
}
#game-overlay
  #conflict-game-container[data-mode="service"]
  .conflict-cosmos-chip {
  border-color: rgba(0, 150, 126, 0.28);
  background: rgba(255, 255, 255, 0.82);
  color: rgba(0, 90, 76, 0.94);
}
#game-overlay
  #conflict-game-container[data-mode="service"]
  .conflict-case-line {
  color: rgba(0, 90, 76, 0.76);
}
#game-overlay
  #conflict-game-container[data-mode="service"]
  .conflict-explanation.is-correct {
  border-color: rgba(0, 150, 126, 0.46);
  background: linear-gradient(
    145deg,
    rgba(220, 255, 245, 0.98),
    rgba(231, 253, 246, 0.94)
  );
}
#game-overlay
  #conflict-game-container[data-mode="service"]
  .conflict-explanation.is-wrong {
  border-color: rgba(210, 120, 58, 0.38);
  background: linear-gradient(
    145deg,
    rgba(255, 248, 234, 0.97),
    rgba(255, 242, 229, 0.93)
  );
}
#game-overlay #conflict-game-container[data-mode="service"] .guest-bubble {
  background:
    radial-gradient(
      540px 200px at 14% 0%,
      rgba(0, 210, 170, 0.14),
      transparent 60%
    ),
    radial-gradient(
      520px 210px at 92% 0%,
      rgba(0, 169, 225, 0.14),
      transparent 62%
    ),
    rgba(255, 255, 255, 0.95);
  border-color: rgba(0, 150, 126, 0.22);
  color: rgba(8, 18, 34, 0.92);
}
#game-overlay
  #conflict-game-container[data-mode="service"]
  .guest-bubble::before {
  background: rgba(0, 150, 126, 0.12);
  border-color: rgba(0, 150, 126, 0.28);
  color: rgba(0, 90, 76, 0.96);
}
#game-overlay
  #conflict-game-container[data-mode="service"]
  #conflict-options.conflict-options
  .conflict-btn {
  border-color: rgba(0, 150, 126, 0.22);
  background: linear-gradient(
    150deg,
    rgba(255, 255, 255, 0.96),
    rgba(235, 250, 246, 0.92)
  );
}
#game-overlay
  #conflict-game-container[data-mode="service"]
  #conflict-options.conflict-options
  .conflict-btn::before {
  background: rgba(0, 150, 126, 0.14);
  border-color: rgba(0, 150, 126, 0.26);
  color: rgba(0, 90, 76, 0.95);
}
#game-overlay
  #conflict-game-container[data-mode="service"]
  #conflict-options.conflict-options
  .conflict-btn:hover {
  border-color: rgba(0, 150, 126, 0.4);
  box-shadow: 0 18px 38px rgba(0, 90, 76, 0.14);
}

#game-overlay #allergen-card.allergen-card {
  position: relative;
}
#game-overlay #allergen-card.allergen-card::before {
  content: "Вопрос";
  display: block;
  font-size: var(--game-label-size);
  letter-spacing: var(--game-label-ls);
  text-transform: uppercase;
  font-weight: var(--game-label-weight);
  color: var(--game-label-color);
  margin-bottom: 10px;
}
#game-overlay #allergen-card.allergen-card .allergen-card-head {
  margin-top: -2px;
}

@media (prefers-color-scheme: dark) {
  #game-overlay #memory-phase-1 .memory-phase-title::before,
  #game-overlay #memory-phase-2 .memory-phase-title::before,
  #game-overlay #upsell-game-container .upsell-scene::before,
  #game-overlay #training-options.training-options::before,
  #game-overlay #conflict-options.conflict-options::before,
  #game-overlay #upsell-options.upsell-options::before,
  #game-overlay #memory-options-grid.memory-options-grid::before,
  #game-overlay #allergen-options.allergen-options::before,
  #game-overlay #allergen-card.allergen-card::before {
    color: rgba(255, 255, 255, 0.62);
  }
  #game-overlay .memory-coachline {
    border-color: rgba(255, 255, 255, 0.14);
    background: linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.08),
      rgba(130, 188, 255, 0.1)
    );
    color: rgba(233, 241, 255, 0.88);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.38);
  }
  #game-overlay
    #conflict-game-container[data-mode="service"]
    .quiz-level-badge {
    background: rgba(0, 180, 150, 0.24);
    border-color: rgba(106, 236, 216, 0.34);
    color: rgba(206, 255, 245, 0.96);
  }
  #game-overlay
    #conflict-game-container[data-mode="service"]
    .conflict-coachline {
    border-color: rgba(106, 236, 216, 0.3);
    background: linear-gradient(
      135deg,
      rgba(0, 180, 150, 0.18),
      rgba(0, 120, 185, 0.16)
    );
    color: rgba(206, 255, 245, 0.94);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.38);
  }
  #game-overlay
    #conflict-game-container[data-mode="service"]
    .conflict-explanation {
    border-color: rgba(106, 236, 216, 0.3);
    background: linear-gradient(
      145deg,
      rgba(0, 180, 150, 0.2),
      rgba(0, 120, 185, 0.16)
    );
    color: rgba(220, 255, 248, 0.95);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.38);
  }
  #game-overlay
    #conflict-game-container[data-mode="service"]
    .conflict-explanation-title {
    color: rgba(206, 255, 245, 0.74);
  }
  #game-overlay
    #conflict-game-container[data-mode="service"]
    .conflict-explanation-line {
    color: rgba(220, 255, 248, 0.95);
  }
  #game-overlay
    #conflict-game-container[data-mode="service"]
    .conflict-explanation-line.is-muted {
    color: rgba(220, 255, 248, 0.82);
  }
  #game-overlay
    #conflict-game-container[data-mode="service"]
    .conflict-cosmos-chip {
    border-color: rgba(126, 255, 223, 0.32);
    background: rgba(255, 255, 255, 0.08);
    color: rgba(219, 248, 241, 0.92);
  }
  #game-overlay
    #conflict-game-container[data-mode="service"]
    .conflict-case-line {
    color: rgba(180, 238, 229, 0.72);
  }
  #game-overlay
    #conflict-game-container[data-mode="service"]
    .conflict-explanation.is-correct {
    border-color: rgba(106, 236, 216, 0.4);
  }
  #game-overlay
    #conflict-game-container[data-mode="service"]
    .conflict-explanation.is-wrong {
    border-color: rgba(255, 194, 136, 0.42);
    background: linear-gradient(
      145deg,
      rgba(110, 78, 24, 0.44),
      rgba(88, 62, 22, 0.38)
    );
  }
  #game-overlay #conflict-game-container[data-mode="service"] .guest-bubble {
    background:
      radial-gradient(
        560px 200px at 14% 0%,
        rgba(0, 210, 170, 0.16),
        transparent 60%
      ),
      radial-gradient(
        520px 210px at 92% 0%,
        rgba(0, 169, 225, 0.14),
        transparent 62%
      ),
      rgba(10, 12, 20, 0.94);
    border-color: rgba(106, 236, 216, 0.22);
    color: rgba(255, 255, 255, 0.92);
  }
  #game-overlay
    #conflict-game-container[data-mode="service"]
    .guest-bubble::before {
    background: rgba(0, 180, 150, 0.2);
    border-color: rgba(106, 236, 216, 0.32);
    color: rgba(206, 255, 245, 0.95);
  }
  #game-overlay
    #conflict-game-container[data-mode="service"]
    #conflict-options.conflict-options
    .conflict-btn {
    border-color: rgba(106, 236, 216, 0.22);
    background: linear-gradient(
      150deg,
      rgba(255, 255, 255, 0.1),
      rgba(0, 180, 150, 0.08)
    );
  }
  #game-overlay
    #conflict-game-container[data-mode="service"]
    #conflict-options.conflict-options
    .conflict-btn::before {
    background: rgba(0, 180, 150, 0.24);
    border-color: rgba(106, 236, 216, 0.28);
    color: rgba(206, 255, 245, 0.95);
  }
  #game-overlay #upsell-game-container .upsell-feedback-chip {
    border-color: rgba(126, 255, 223, 0.32);
    background: rgba(255, 255, 255, 0.08);
    color: rgba(219, 248, 241, 0.92);
  }
  #game-overlay #upsell-game-container .upsell-feedback-case {
    color: rgba(180, 238, 229, 0.72);
  }
}
body[data-theme="dark"]
  #game-overlay
  #conflict-game-container[data-mode="service"]
  .quiz-level-badge {
  background: rgba(0, 180, 150, 0.24);
  border-color: rgba(106, 236, 216, 0.34);
  color: rgba(206, 255, 245, 0.96);
}
body[data-theme="dark"] #game-overlay .memory-coachline {
  border-color: rgba(255, 255, 255, 0.14);
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.08),
    rgba(130, 188, 255, 0.1)
  );
  color: rgba(233, 241, 255, 0.88);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.38);
}
body[data-theme="dark"]
  #game-overlay
  #conflict-game-container[data-mode="service"]
  .conflict-coachline {
  border-color: rgba(106, 236, 216, 0.3);
  background: linear-gradient(
    135deg,
    rgba(0, 180, 150, 0.18),
    rgba(0, 120, 185, 0.16)
  );
  color: rgba(206, 255, 245, 0.94);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.38);
}
body[data-theme="dark"]
  #game-overlay
  #conflict-game-container[data-mode="service"]
  .conflict-explanation {
  border-color: rgba(106, 236, 216, 0.3);
  background: linear-gradient(
    145deg,
    rgba(0, 180, 150, 0.2),
    rgba(0, 120, 185, 0.16)
  );
  color: rgba(220, 255, 248, 0.95);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.38);
}
body[data-theme="dark"]
  #game-overlay
  #conflict-game-container[data-mode="service"]
  .conflict-explanation-title {
  color: rgba(206, 255, 245, 0.74);
}
body[data-theme="dark"]
  #game-overlay
  #conflict-game-container[data-mode="service"]
  .conflict-explanation-line {
  color: rgba(220, 255, 248, 0.95);
}
body[data-theme="dark"]
  #game-overlay
  #conflict-game-container[data-mode="service"]
  .conflict-explanation-line.is-muted {
  color: rgba(220, 255, 248, 0.82);
}
body[data-theme="dark"]
  #game-overlay
  #conflict-game-container[data-mode="service"]
  .conflict-cosmos-chip {
  border-color: rgba(126, 255, 223, 0.32);
  background: rgba(255, 255, 255, 0.08);
  color: rgba(219, 248, 241, 0.92);
}
body[data-theme="dark"]
  #game-overlay
  #conflict-game-container[data-mode="service"]
  .conflict-case-line {
  color: rgba(180, 238, 229, 0.72);
}
body[data-theme="dark"]
  #game-overlay
  #conflict-game-container[data-mode="service"]
  .conflict-explanation.is-correct {
  border-color: rgba(106, 236, 216, 0.4);
}
body[data-theme="dark"]
  #game-overlay
  #conflict-game-container[data-mode="service"]
  .conflict-explanation.is-wrong {
  border-color: rgba(255, 194, 136, 0.42);
  background: linear-gradient(
    145deg,
    rgba(110, 78, 24, 0.44),
    rgba(88, 62, 22, 0.38)
  );
}
body[data-theme="dark"]
  #game-overlay
  #conflict-game-container[data-mode="service"]
  .guest-bubble {
  background:
    radial-gradient(
      560px 200px at 14% 0%,
      rgba(0, 210, 170, 0.16),
      transparent 60%
    ),
    radial-gradient(
      520px 210px at 92% 0%,
      rgba(0, 169, 225, 0.14),
      transparent 62%
    ),
    rgba(10, 12, 20, 0.94);
  border-color: rgba(106, 236, 216, 0.22);
  color: rgba(255, 255, 255, 0.92);
}
body[data-theme="dark"]
  #game-overlay
  #conflict-game-container[data-mode="service"]
  .guest-bubble::before {
  background: rgba(0, 180, 150, 0.2);
  border-color: rgba(106, 236, 216, 0.32);
  color: rgba(206, 255, 245, 0.95);
}
body[data-theme="dark"]
  #game-overlay
  #conflict-game-container[data-mode="service"]
  #conflict-options.conflict-options
  .conflict-btn {
  border-color: rgba(106, 236, 216, 0.22);
  background: linear-gradient(
    150deg,
    rgba(255, 255, 255, 0.1),
    rgba(0, 180, 150, 0.08)
  );
}
body[data-theme="dark"]
  #game-overlay
  #conflict-game-container[data-mode="service"]
  #conflict-options.conflict-options
  .conflict-btn::before {
  background: rgba(0, 180, 150, 0.24);
  border-color: rgba(106, 236, 216, 0.28);
  color: rgba(206, 255, 245, 0.95);
}
body[data-theme="dark"]
  #game-overlay
  #upsell-game-container
  .upsell-feedback-chip {
  border-color: rgba(126, 255, 223, 0.32);
  background: rgba(255, 255, 255, 0.08);
  color: rgba(219, 248, 241, 0.92);
}
body[data-theme="dark"]
  #game-overlay
  #upsell-game-container
  .upsell-feedback-case {
  color: rgba(180, 238, 229, 0.72);
}

/* Единый стиль вариантов/кнопок во всех играх */
#game-overlay .training-option,
#game-overlay .quiz-option,
#game-overlay .conflict-btn,
#game-overlay .memory-option,
#game-overlay .allergen-option,
#game-overlay .grape-option {
  width: 100%;
  border-radius: var(--game-option-radius);
  padding: var(--game-option-pad);
  border: 1px solid var(--game-choice-border);
  background: var(--game-choice-bg);
  color: var(--game-text);
  box-shadow: var(--game-choice-shadow);
  cursor: pointer;
  font-size: var(--game-option-font);
  line-height: 1.25;
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    background 0.18s ease,
    border-color 0.18s ease;
  user-select: none;
}
#game-overlay .quiz-option {
  text-align: left;
  font-weight: 850;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  line-height: 1.25;
  padding: 14px 14px;
}
#game-overlay .quiz-option::before {
  counter-increment: lunaQuizOpt;
  content: counter(lunaQuizOpt, upper-alpha);
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  font-size: 12px;
  font-weight: 900;
  background: rgba(0, 0, 0, 0.06);
  border: 1px solid rgba(8, 18, 34, 0.1);
  color: rgba(8, 18, 34, 0.72);
}
#game-overlay .quiz-option.correct::before,
#game-overlay .quiz-option.wrong::before {
  background: rgba(255, 255, 255, 0.18);
  border-color: rgba(255, 255, 255, 0.22);
  color: rgba(255, 255, 255, 0.92);
}
#game-overlay .conflict-btn {
  text-align: left;
  box-shadow: var(--game-choice-shadow);
  display: block;
}
#game-overlay .training-option:hover,
#game-overlay .quiz-option:hover,
#game-overlay .conflict-btn:hover,
#game-overlay .memory-option:hover,
#game-overlay .allergen-option:hover,
#game-overlay .grape-option:hover {
  background: var(--game-choice-hover-bg);
  transform: translateY(-1px);
  box-shadow: 0 18px 38px rgba(15, 23, 42, 0.14);
}
#game-overlay .training-option:active,
#game-overlay .quiz-option:active,
#game-overlay .conflict-btn:active,
#game-overlay .memory-option:active,
#game-overlay .allergen-option:active,
#game-overlay .grape-option:active {
  transform: translateY(0) scale(0.99);
}
#game-overlay .training-option:focus-visible,
#game-overlay .quiz-option:focus-visible,
#game-overlay .conflict-btn:focus-visible,
#game-overlay .memory-option:focus-visible,
#game-overlay .allergen-option:focus-visible,
#game-overlay .grape-option:focus-visible {
  outline: 3px solid rgba(0, 210, 255, 0.32);
  outline-offset: 2px;
}

/* Allergen game */
#game-overlay .allergen-hero {
  border-radius: 22px;
  padding: 14px 14px 12px;
  background: var(--surface-allergen-hero-bg);
  border: 1px solid var(--surface-allergen-hero-border);
  box-shadow: var(--surface-allergen-hero-shadow);
  margin-bottom: 12px;
}
#game-overlay .allergen-hero-title {
  font-weight: 900;
  font-size: 1.05rem;
  letter-spacing: -0.01em;
  color: var(--surface-allergen-hero-title);
}
#game-overlay .allergen-hero-sub {
  margin-top: 6px;
  font-size: 0.88rem;
  line-height: 1.35;
  color: var(--surface-allergen-hero-sub);
}
#game-overlay .allergen-mode {
  margin-top: 10px;
  display: inline-flex;
  border-radius: 999px;
  padding: 4px;
  background: var(--surface-allergen-mode-bg);
  border: 1px solid var(--surface-allergen-mode-border);
  gap: 4px;
  flex-wrap: nowrap;
}
#game-overlay .allergen-mode-btn {
  border: 0;
  border-radius: 999px;
  padding: 10px 14px;
  font-weight: 900;
  font-size: 0.88rem;
  letter-spacing: -0.01em;
  color: var(--surface-allergen-mode-btn-color);
  background: transparent;
  cursor: pointer;
  transition:
    transform 0.18s ease,
    background 0.18s ease,
    color 0.18s ease,
    box-shadow 0.18s ease;
  user-select: none;
  white-space: nowrap;
}
#game-overlay .allergen-mode-btn[aria-pressed="true"] {
  background: var(--surface-allergen-mode-btn-active-bg);
  color: var(--surface-allergen-mode-btn-active-color);
  box-shadow: var(--surface-allergen-mode-btn-active-shadow);
}
#game-overlay .allergen-mode-btn:active {
  transform: scale(0.99);
}
#game-overlay .allergen-mode-note {
  margin-top: 8px;
  font-size: 0.88rem;
  line-height: 1.35;
  color: var(--surface-allergen-mode-note);
  font-weight: 750;
}
#game-overlay .allergen-card {
  border-radius: 22px;
  padding: 14px;
  background: var(--surface-allergen-card-bg);
  border: 1px solid var(--surface-allergen-card-border);
  box-shadow: var(--surface-allergen-card-shadow);
}
#game-overlay .allergen-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}
#game-overlay .allergen-item-name {
  font-weight: 900;
  font-size: 1.05rem;
  color: var(--surface-allergen-item-name);
}
#game-overlay .allergen-timer {
  font-weight: 900;
  font-size: 0.85rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--surface-allergen-timer);
  white-space: nowrap;
}
#game-overlay .allergen-item-comp {
  font-size: 0.9rem;
  line-height: 1.45;
  color: var(--surface-allergen-item-comp);
}
#game-overlay .allergen-item-hint {
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 16px;
  background: var(--surface-allergen-hint-bg);
  border: 1px solid var(--surface-allergen-hint-border);
  color: var(--surface-allergen-hint-color);
  font-weight: 800;
  font-size: 0.86rem;
  line-height: 1.35;
  min-height: 1.35em;
}
#game-overlay .allergen-item-hint:empty {
  display: none;
}
#game-overlay .allergen-item-note {
  margin-top: 10px;
  font-weight: 800;
  font-size: 0.85rem;
  line-height: 1.35;
  color: var(--surface-allergen-item-note);
  min-height: 1.35em;
}
#game-overlay .allergen-options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
  margin-top: 12px;
}
#game-overlay .allergen-selected {
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  min-height: 34px;
  align-items: center;
}
#game-overlay .allergen-selected.is-empty {
  color: var(--surface-allergen-selected-empty);
  font-weight: 700;
  font-size: 0.9rem;
}
#game-overlay .allergen-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 999px;
  background: var(--surface-allergen-chip-bg);
  border: 1px solid var(--surface-allergen-chip-border);
  color: var(--surface-allergen-chip-color);
  font-weight: 800;
  font-size: 0.88rem;
  line-height: 1;
  cursor: pointer;
  user-select: none;
  transition:
    transform 0.18s ease,
    background 0.18s ease,
    border-color 0.18s ease;
}
#game-overlay .allergen-chip:hover {
  transform: translateY(-1px);
  background: var(--surface-allergen-chip-hover-bg);
  border-color: var(--surface-allergen-chip-hover-border);
}
#game-overlay .allergen-chip:active {
  transform: translateY(0);
}
#game-overlay .allergen-chip-x {
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--surface-allergen-chip-x-bg);
  color: var(--surface-allergen-chip-x-color);
  font-weight: 900;
  font-size: 0.9rem;
}
#game-overlay .allergen-option {
  position: relative;
  user-select: none;
  text-align: left;
  white-space: normal;
  line-height: 1.25;
}
#game-overlay .allergen-option.is-selected {
  border-color: var(--surface-allergen-option-selected-border);
  background: var(--surface-allergen-option-selected-bg);
}
#game-overlay .allergen-option.is-correct {
  background: var(--surface-allergen-option-correct-bg);
  border-color: var(--surface-allergen-option-correct-border);
  color: var(--surface-allergen-option-correct-color);
  box-shadow: var(--surface-allergen-option-correct-shadow);
}
#game-overlay .allergen-option.is-wrong {
  background: var(--surface-allergen-option-wrong-bg);
  border-color: var(--surface-allergen-option-wrong-border);
  color: var(--surface-allergen-option-wrong-color);
  box-shadow: var(--surface-allergen-option-wrong-shadow);
}
#game-overlay .allergen-actions {
  position: sticky;
  bottom: calc(10px + env(safe-area-inset-bottom));
  margin-top: 12px;
  padding-top: 10px;
  padding-bottom: calc(10px + env(safe-area-inset-bottom));
  background: var(--surface-allergen-actions-bg);
  backdrop-filter: blur(10px);
  border-top: 1px solid var(--surface-allergen-actions-border);
}

/* Allergen game: compact mode */
#game-overlay #allergen-game-container.is-compact .allergen-hero {
  padding: 12px 12px 10px;
  border-radius: 20px;
  margin-bottom: 10px;
}
#game-overlay #allergen-game-container.is-compact .allergen-hero-sub,
#game-overlay #allergen-game-container.is-compact .allergen-mode-note {
  display: none;
}
#game-overlay #allergen-game-container.is-compact .allergen-mode {
  display: none;
}
#game-overlay
  #allergen-game-container.is-compact.is-settings-open
  .allergen-mode {
  display: inline-flex;
}
#game-overlay #allergen-game-container.is-compact .allergen-mode-btn {
  padding: 9px 12px;
  font-size: 0.84rem;
}
#game-overlay #allergen-game-container.is-compact .allergen-timer {
  display: none;
}
#game-overlay #allergen-game-container.is-compact .allergen-card {
  padding: 12px;
  border-radius: 20px;
}
#game-overlay #allergen-game-container.is-compact .allergen-item-name {
  font-size: 1rem;
}
#game-overlay #allergen-game-container.is-compact .allergen-item-comp {
  font-size: 0.86rem;
  line-height: 1.35;
  max-height: min(6.6em, 18vh);
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  padding-right: 2px;
}
#game-overlay
  #allergen-game-container.is-compact
  .allergen-item-comp::-webkit-scrollbar {
  display: none;
}
#game-overlay #allergen-game-container.is-compact .allergen-item-hint {
  margin-top: 8px;
  padding: 8px 10px;
  border-radius: 14px;
  font-size: 0.82rem;
}
#game-overlay #allergen-game-container.is-compact .allergen-item-note {
  margin-top: 8px;
  font-size: 0.82rem;
}
#game-overlay #allergen-game-container.is-compact .allergen-options {
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 10px;
  margin-top: 10px;
  padding-bottom: 92px;
}
#game-overlay #allergen-game-container.is-compact .allergen-option {
  padding: 11px 12px;
  border-radius: 16px;
  font-size: 0.9rem;
  line-height: 1.15;
  min-height: 44px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
#game-overlay #allergen-game-container.is-compact .allergen-selected {
  margin-top: 8px;
  flex-wrap: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 2px;
}
#game-overlay
  #allergen-game-container.is-compact
  .allergen-selected::-webkit-scrollbar {
  display: none;
}
#game-overlay #allergen-game-container.is-compact .allergen-chip {
  padding: 7px 10px;
  font-size: 0.84rem;
}
#game-overlay #allergen-game-container.is-compact .allergen-actions {
  margin-top: 10px;
  padding-top: 8px;
  padding-bottom: calc(8px + env(safe-area-inset-bottom));
}
#game-overlay #allergen-game-container.is-compact .allergen-actions {
  z-index: 6;
}

/* Grape game */
#game-overlay .grape-panel {
  --grape-accent-a: 127 90 255;
  --grape-accent-b: 0 210 255;
  --grape-accent-c: 255 206 84;
}
#game-overlay .grape-panel::before,
#game-overlay .grape-panel::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
}
/* Make sure pseudo elements are visible inside panel */
#game-overlay .grape-panel {
  position: relative;
  overflow: hidden;
}

/* Deck micro-animations */
#game-overlay .grape-panel.is-deck-type::before {
  opacity: 0.55;
  background-image:
    radial-gradient(
      circle at 18% 95%,
      rgba(255, 255, 255, 0.45) 0 2px,
      transparent 3px
    ),
    radial-gradient(
      circle at 32% 85%,
      rgba(255, 255, 255, 0.35) 0 1.5px,
      transparent 3px
    ),
    radial-gradient(
      circle at 55% 92%,
      rgba(255, 255, 255, 0.38) 0 2px,
      transparent 3px
    ),
    radial-gradient(
      circle at 72% 88%,
      rgba(255, 255, 255, 0.33) 0 1.8px,
      transparent 3px
    ),
    radial-gradient(
      circle at 84% 96%,
      rgba(255, 255, 255, 0.42) 0 2.2px,
      transparent 3.5px
    );
  filter: blur(0.2px);
  animation: grape-bubbles 7.5s linear infinite;
}
@keyframes grape-bubbles {
  0% {
    transform: translateY(18px);
    opacity: 0;
  }
  10% {
    opacity: 0.55;
  }
  100% {
    transform: translateY(-140px);
    opacity: 0;
  }
}

#game-overlay .grape-panel.is-deck-base::before {
  opacity: 0.35;
  background:
    radial-gradient(
      420px 220px at 20% 85%,
      rgba(255, 138, 0, 0.22),
      transparent 70%
    ),
    radial-gradient(
      520px 260px at 70% 78%,
      rgba(255, 206, 84, 0.18),
      transparent 72%
    ),
    radial-gradient(
      520px 280px at 55% 35%,
      rgba(127, 90, 255, 0.12),
      transparent 72%
    );
  filter: blur(8px);
  animation: grape-haze 9s ease-in-out infinite alternate;
}
@keyframes grape-haze {
  0% {
    transform: translate3d(-10px, 10px, 0) scale(1.02);
  }
  100% {
    transform: translate3d(12px, -8px, 0) scale(1.06);
  }
}

#game-overlay .grape-panel.is-deck-grape::before {
  opacity: 0.5;
  background-image:
    radial-gradient(
      circle at 15% 25%,
      rgba(var(--grape-accent-a), 0.25) 0 1px,
      transparent 3px
    ),
    radial-gradient(
      circle at 38% 18%,
      rgba(var(--grape-accent-b), 0.22) 0 1px,
      transparent 3px
    ),
    radial-gradient(
      circle at 62% 28%,
      rgba(var(--grape-accent-c), 0.22) 0 1px,
      transparent 3px
    ),
    radial-gradient(
      circle at 78% 14%,
      rgba(255, 255, 255, 0.22) 0 1px,
      transparent 3px
    );
  animation: grape-sparkle 5.5s ease-in-out infinite;
}
@keyframes grape-sparkle {
  0% {
    transform: translateY(0) scale(1);
    opacity: 0.18;
  }
  35% {
    opacity: 0.55;
  }
  65% {
    opacity: 0.35;
    transform: translateY(-6px) scale(1.01);
  }
  100% {
    transform: translateY(0) scale(1);
    opacity: 0.22;
  }
}

@media (prefers-reduced-motion: reduce) {
  #game-overlay .grape-panel::before,
  #game-overlay .grape-panel::after {
    animation: none !important;
  }
}
#game-overlay .grape-panel .game-body {
  background:
    radial-gradient(
      1200px 600px at 15% -10%,
      rgba(var(--grape-accent-a), 0.18),
      transparent 55%
    ),
    radial-gradient(
      1000px 500px at 110% 10%,
      rgba(var(--grape-accent-b), 0.16),
      transparent 55%
    ),
    radial-gradient(
      900px 420px at 50% 120%,
      rgba(var(--grape-accent-c), 0.16),
      transparent 55%
    );
  border-radius: 20px;
}
#game-overlay .grape-hero {
  border-radius: 22px;
  padding: 14px 14px 12px;
  background: linear-gradient(
    145deg,
    rgba(var(--grape-accent-a), 0.16),
    rgba(var(--grape-accent-b), 0.1),
    rgba(var(--grape-accent-c), 0.12)
  );
  border: 1px solid rgba(8, 18, 34, 0.08);
  box-shadow: 0 22px 60px rgba(15, 23, 42, 0.12);
  margin-bottom: 12px;
  position: relative;
  overflow: hidden;
}
#game-overlay .grape-hero::before {
  content: "";
  position: absolute;
  inset: -1px;
  background: linear-gradient(
    105deg,
    rgba(255, 255, 255, 0.55),
    rgba(255, 255, 255, 0) 55%
  );
  opacity: 0.35;
  transform: translateX(-35%) rotate(-8deg);
  pointer-events: none;
}
#game-overlay .grape-hero::after {
  content: "";
  position: absolute;
  inset: -120px -80px auto auto;
  width: 240px;
  height: 240px;
  background: radial-gradient(
    circle at 30% 30%,
    rgba(var(--grape-accent-b), 0.22),
    transparent 60%
  );
  filter: blur(2px);
  transform: rotate(12deg);
  pointer-events: none;
}
#game-overlay .grape-hero-title {
  font-weight: 900;
  font-size: 1.05rem;
  letter-spacing: -0.01em;
  color: rgba(8, 18, 34, 0.92);
}
#game-overlay .grape-hero-sub {
  margin-top: 6px;
  font-size: 0.88rem;
  line-height: 1.35;
  color: rgba(0, 0, 0, 0.62);
}
/* Sommelier: compact gameplay (one question at a time) */
#game-overlay #grape-game-container.is-compact .grape-hero-sub,
#game-overlay #grape-game-container.is-compact .grape-mode,
#game-overlay #grape-game-container.is-compact .grape-deck,
#game-overlay #grape-game-container.is-compact .grape-roundmode,
#game-overlay #grape-game-container.is-compact .grape-mode-note,
#game-overlay #grape-game-container.is-compact .grape-mini {
  display: none;
}
#game-overlay #grape-game-container.is-compact .grape-actions {
  display: none;
}
#game-overlay #grape-game-container.is-compact .grape-compare-label {
  display: none;
}
#game-overlay #grape-game-container.is-compact .grape-card {
  padding: 12px;
}
#game-overlay #grape-game-container.is-compact .grape-card-head {
  margin-bottom: 8px;
}
#game-overlay #grape-game-container.is-compact .grape-question {
  font-size: 1rem;
}
#game-overlay #grape-game-container.is-compact .grape-chips {
  margin-top: 4px;
  gap: 8px;
  max-height: min(120px, 22vh);
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  padding-right: 2px;
}
#game-overlay #grape-game-container.is-compact .grape-chips::-webkit-scrollbar {
  display: none;
}
#game-overlay #grape-game-container.is-compact .grape-chips::before {
  display: none;
}
#game-overlay #grape-game-container .grape-options {
  padding-bottom: calc(8px + env(safe-area-inset-bottom));
}
#game-overlay #grape-game-container.is-compact .grape-options {
  margin-top: 8px;
  gap: 10px;
}
#game-overlay #grape-game-container.is-compact .grape-options::before {
  display: none;
}
#game-overlay #grape-game-container.is-compact .grape-hero {
  padding: 12px 12px 10px;
  margin-bottom: 10px;
}
#game-overlay #grape-game-container.is-compact .grape-hero-title {
  font-size: 1rem;
}
#game-overlay
  #grape-game-container.is-compact.is-settings-open
  .grape-hero-sub {
  display: block;
}
#game-overlay #grape-game-container.is-compact.is-settings-open .grape-mode,
#game-overlay
  #grape-game-container.is-compact.is-settings-open
  .grape-roundmode {
  display: inline-flex;
}
#game-overlay
  #grape-game-container.is-compact.is-settings-open
  .grape-mode-note,
#game-overlay #grape-game-container.is-compact.is-settings-open .grape-mini {
  display: block;
}
/* deck switching is done on the chooser screen */
#game-overlay #grape-game-container.is-compact.is-settings-open .grape-deck {
  display: none;
}

#game-overlay .grape-compare-hint {
  width: 100%;
  text-align: center;
  font-size: 0.88rem;
  font-weight: 800;
  color: rgba(8, 18, 34, 0.62);
  padding: 10px 10px 2px;
}
#game-overlay .grape-compare-col.is-tappable {
  cursor: pointer;
  user-select: none;
}
#game-overlay .grape-compare-col.is-selected {
  outline: 3px solid rgba(0, 210, 255, 0.26);
  outline-offset: 2px;
}
#game-overlay .grape-compare-col.is-tappable:active {
  transform: scale(0.99);
}
#game-overlay .grape-compare-col.is-correct {
  outline: 3px solid rgba(0, 200, 83, 0.3);
  outline-offset: 2px;
}
#game-overlay .grape-compare-col.is-wrong {
  outline: 3px solid rgba(255, 61, 0, 0.3);
  outline-offset: 2px;
}
#game-overlay .grape-option.is-selected:not(.is-correct):not(.is-wrong) {
  outline: 3px solid rgba(0, 210, 255, 0.22);
  outline-offset: 2px;
}

/* Sommelier: soft transition between questions */
@keyframes grape-enter {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
#game-overlay #grape-game-container.is-anim-enter .grape-card,
#game-overlay #grape-game-container.is-anim-enter #grape-options,
#game-overlay #grape-game-container.is-anim-enter #grape-compare {
  animation: grape-enter 160ms ease-out both;
}
@media (prefers-reduced-motion: reduce) {
  #game-overlay #grape-game-container.is-anim-enter .grape-card,
  #game-overlay #grape-game-container.is-anim-enter #grape-options,
  #game-overlay #grape-game-container.is-anim-enter #grape-compare {
    animation: none;
  }
}

/* Sommelier start screen */
#game-overlay .grape-start-card {
  border-radius: 22px;
  padding: 14px 14px 12px;
  background:
    radial-gradient(
      600px 220px at 20% 0%,
      rgba(var(--grape-accent-b), 0.18),
      transparent 55%
    ),
    radial-gradient(
      520px 220px at 90% 0%,
      rgba(var(--grape-accent-a), 0.16),
      transparent 60%
    ),
    rgba(255, 255, 255, 0.82);
  border: 1px solid rgba(8, 18, 34, 0.1);
  box-shadow: 0 18px 45px rgba(15, 23, 42, 0.1);
  margin-bottom: 12px;
}
#game-overlay .grape-start-title {
  font-weight: 950;
  font-size: 1.05rem;
  color: rgba(8, 18, 34, 0.92);
}
#game-overlay .grape-start-sub {
  margin-top: 6px;
  font-weight: 750;
  font-size: 0.9rem;
  color: rgba(8, 18, 34, 0.68);
  line-height: 1.35;
}
#game-overlay .grape-start-options {
  display: grid;
  gap: 12px;
}
#game-overlay .grape-start-options::before {
  content: "Выбор режима";
  display: block;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 900;
  color: rgba(8, 18, 34, 0.58);
  margin: 2px 2px 0;
}
#game-overlay .grape-start-option {
  text-align: left;
  padding-left: 26px;
}
#game-overlay .grape-start-option-title {
  font-weight: 950;
  font-size: 1rem;
  color: rgba(8, 18, 34, 0.92);
  line-height: 1.2;
}
#game-overlay .grape-start-option-sub {
  margin-top: 6px;
  font-weight: 750;
  font-size: 0.88rem;
  color: rgba(8, 18, 34, 0.66);
  line-height: 1.35;
}
#game-overlay .grape-mode {
  margin-top: 10px;
  display: inline-flex;
  border-radius: 999px;
  padding: 4px;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.86),
    rgba(255, 255, 255, 0.58)
  );
  border: 1px solid rgba(8, 18, 34, 0.1);
  gap: 4px;
  flex-wrap: nowrap;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.7),
    0 18px 45px rgba(15, 23, 42, 0.08);
  backdrop-filter: blur(10px);
}
#game-overlay .grape-deck {
  margin-top: 10px;
  display: inline-flex;
  border-radius: 999px;
  padding: 4px;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.86),
    rgba(255, 255, 255, 0.58)
  );
  border: 1px solid rgba(8, 18, 34, 0.1);
  gap: 4px;
  flex-wrap: wrap;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.7),
    0 18px 45px rgba(15, 23, 42, 0.08);
  backdrop-filter: blur(10px);
}
#game-overlay .grape-roundmode {
  margin-top: 10px;
  display: inline-flex;
  border-radius: 999px;
  padding: 4px;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.86),
    rgba(255, 255, 255, 0.58)
  );
  border: 1px solid rgba(8, 18, 34, 0.1);
  gap: 4px;
  flex-wrap: nowrap;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.7),
    0 18px 45px rgba(15, 23, 42, 0.08);
  backdrop-filter: blur(10px);
}
#game-overlay .grape-mode-btn {
  border: 0;
  border-radius: 999px;
  padding: 10px 14px;
  font-weight: 900;
  font-size: 0.88rem;
  letter-spacing: -0.01em;
  color: rgba(8, 18, 34, 0.82);
  background: transparent;
  cursor: pointer;
  transition:
    transform 0.18s ease,
    background 0.18s ease,
    color 0.18s ease,
    box-shadow 0.18s ease;
  user-select: none;
  white-space: nowrap;
}
#game-overlay .grape-deck-btn {
  border: 0;
  border-radius: 999px;
  padding: 10px 14px;
  font-weight: 900;
  font-size: 0.88rem;
  letter-spacing: -0.01em;
  color: rgba(8, 18, 34, 0.82);
  background: transparent;
  cursor: pointer;
  transition:
    transform 0.18s ease,
    background 0.18s ease,
    color 0.18s ease,
    box-shadow 0.18s ease;
  user-select: none;
  white-space: nowrap;
}
#game-overlay .grape-roundmode-btn {
  border: 0;
  border-radius: 999px;
  padding: 10px 14px;
  font-weight: 900;
  font-size: 0.88rem;
  letter-spacing: -0.01em;
  color: rgba(8, 18, 34, 0.82);
  background: transparent;
  cursor: pointer;
  transition:
    transform 0.18s ease,
    background 0.18s ease,
    color 0.18s ease,
    box-shadow 0.18s ease;
  user-select: none;
  white-space: nowrap;
}
#game-overlay .grape-mode-btn:hover,
#game-overlay .grape-deck-btn:hover,
#game-overlay .grape-roundmode-btn:hover {
  background: rgba(255, 255, 255, 0.5);
  box-shadow:
    inset 0 0 0 1px rgba(8, 18, 34, 0.05),
    0 12px 28px rgba(15, 23, 42, 0.1);
  transform: translateY(-1px);
}
#game-overlay .grape-mode-btn:active,
#game-overlay .grape-deck-btn:active,
#game-overlay .grape-roundmode-btn:active {
  transform: translateY(0) scale(0.99);
}
#game-overlay .grape-mode-btn[aria-pressed="true"] {
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.98),
    rgba(255, 255, 255, 0.88)
  );
  color: rgba(8, 18, 34, 0.92);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.85),
    0 14px 34px rgba(15, 23, 42, 0.12);
}
#game-overlay .grape-deck-btn[aria-pressed="true"] {
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.98),
    rgba(255, 255, 255, 0.88)
  );
  color: rgba(8, 18, 34, 0.92);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.85),
    0 14px 34px rgba(15, 23, 42, 0.12);
}
#game-overlay .grape-roundmode-btn[aria-pressed="true"] {
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.98),
    rgba(255, 255, 255, 0.88)
  );
  color: rgba(8, 18, 34, 0.92);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.85),
    0 14px 34px rgba(15, 23, 42, 0.12);
}
@media (max-width: 420px) {
  #game-overlay .grape-mode,
  #game-overlay .grape-deck,
  #game-overlay .grape-roundmode {
    display: flex;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  #game-overlay .grape-hero {
    padding: 12px 12px 10px;
    border-radius: 20px;
  }
  #game-overlay .grape-hero-title {
    font-size: 1rem;
  }
  #game-overlay .grape-hero-sub {
    font-size: 0.85rem;
  }
  #game-overlay .grape-card {
    padding: 12px;
    border-radius: var(--game-card-radius);
  }
  #game-overlay .grape-mode-btn,
  #game-overlay .grape-deck-btn,
  #game-overlay .grape-roundmode-btn {
    padding: 9px 12px;
    font-size: 0.85rem;
  }
  #game-overlay .grape-deck {
    flex-wrap: nowrap;
  }
  #game-overlay .grape-mode::-webkit-scrollbar,
  #game-overlay .grape-deck::-webkit-scrollbar,
  #game-overlay .grape-roundmode::-webkit-scrollbar {
    display: none;
  }
  #game-overlay .grape-chip {
    padding: 9px 10px;
    font-size: 0.86rem;
  }
  #game-overlay .grape-option {
    padding: 13px 13px;
  }
}
#game-overlay .grape-mode-note {
  margin-top: 8px;
  font-size: 0.88rem;
  line-height: 1.35;
  color: rgba(0, 0, 0, 0.62);
  font-weight: 750;
}
#game-overlay .grape-mini {
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
#game-overlay .grape-mini-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.65);
  border: 1px solid rgba(8, 18, 34, 0.1);
  color: rgba(8, 18, 34, 0.8);
  font-weight: 850;
  font-size: 0.86rem;
  line-height: 1;
  box-shadow: 0 10px 22px rgba(15, 23, 42, 0.08);
}
#game-overlay .grape-card {
  border-radius: var(--game-card-radius);
  padding: 14px;
  border: 1px solid transparent;
  background:
    linear-gradient(rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0.92))
      padding-box,
    linear-gradient(
        145deg,
        rgba(var(--grape-accent-a), 0.34),
        rgba(var(--grape-accent-b), 0.22),
        rgba(var(--grape-accent-c), 0.26)
      )
      border-box;
  box-shadow: 0 22px 55px rgba(15, 23, 42, 0.12);
  backdrop-filter: blur(12px);
}
#game-overlay .grape-card {
  position: relative;
  overflow: hidden;
}
#game-overlay .grape-card::before {
  content: "";
  position: absolute;
  inset: -1px -1px auto -1px;
  height: 55%;
  background: radial-gradient(
    600px 220px at 22% 10%,
    rgba(255, 255, 255, 0.85),
    rgba(255, 255, 255, 0) 60%
  );
  opacity: 0.18;
  pointer-events: none;
}
#game-overlay .grape-card::after {
  content: "";
  position: absolute;
  inset: -40%;
  background: linear-gradient(
    110deg,
    rgba(255, 255, 255, 0) 35%,
    rgba(255, 255, 255, 0.55) 48%,
    rgba(255, 255, 255, 0) 60%
  );
  opacity: 0.1;
  transform: translateX(-30%) rotate(-8deg);
  pointer-events: none;
}
#game-overlay .grape-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}
#game-overlay .grape-question {
  font-weight: 900;
  font-size: 1.05rem;
  color: rgba(8, 18, 34, 0.92);
  line-height: 1.25;
}
#game-overlay .grape-question::before {
  content: "Вопрос";
  display: block;
  font-size: var(--game-label-size);
  letter-spacing: var(--game-label-ls);
  text-transform: uppercase;
  font-weight: var(--game-label-weight);
  color: var(--game-label-color);
  margin-bottom: 6px;
}
#game-overlay .grape-timer {
  font-weight: 900;
  font-size: 0.85rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(8, 18, 34, 0.7);
  white-space: nowrap;
}
#game-overlay .grape-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 6px;
  align-items: flex-start;
}
#game-overlay .grape-chips::before {
  content: "Дескрипторы";
  flex: 0 0 100%;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 900;
  color: rgba(8, 18, 34, 0.58);
  margin-top: 2px;
}
#game-overlay .grape-compare {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 6px;
}
@media (max-width: 380px) {
  #game-overlay .grape-compare {
    grid-template-columns: 1fr;
  }
}
#game-overlay .grape-compare-col {
  border-radius: 18px;
  padding: 12px;
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid rgba(8, 18, 34, 0.1);
  box-shadow: 0 12px 26px rgba(15, 23, 42, 0.08);
  backdrop-filter: blur(10px);
  position: relative;
  overflow: hidden;
}
#game-overlay .grape-compare-col.is-correct::after,
#game-overlay .grape-compare-col.is-wrong::after {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 26px;
  height: 26px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.28);
  color: rgba(255, 255, 255, 0.96);
  font-weight: 950;
  pointer-events: none;
}
#game-overlay .grape-compare-col.is-correct::after {
  content: "✓";
}
#game-overlay .grape-compare-col.is-wrong::after {
  content: "✕";
}
#game-overlay .grape-compare-label {
  font-weight: 900;
  font-size: 0.82rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(8, 18, 34, 0.6);
  margin-bottom: 8px;
}
#game-overlay .grape-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.76);
  border: 1px solid rgba(var(--grape-accent-b), 0.18);
  color: rgba(8, 18, 34, 0.86);
  font-weight: 850;
  font-size: 0.86rem;
  line-height: 1.2;
  user-select: none;
  box-shadow: 0 10px 22px rgba(15, 23, 42, 0.08);
  backdrop-filter: blur(10px);
  position: relative;
  overflow: hidden;
  animation: grape-chip-in 360ms cubic-bezier(0.2, 0.9, 0.2, 1) both;
  animation-delay: calc(var(--chip-i, 0) * 35ms);
  will-change: transform, opacity;
}
#game-overlay .grape-chip::after {
  content: "";
  position: absolute;
  inset: -40%;
  background: linear-gradient(
    115deg,
    rgba(255, 255, 255, 0) 40%,
    rgba(255, 255, 255, 0.55) 50%,
    rgba(255, 255, 255, 0) 60%
  );
  opacity: 0.06;
  transform: translateX(-35%) rotate(-10deg);
  pointer-events: none;
}
@keyframes grape-chip-in {
  0% {
    opacity: 0;
    transform: translateY(8px) scale(0.98);
    filter: blur(0.6px);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}
#game-overlay .grape-note {
  margin-top: 12px;
  font-weight: 800;
  font-size: 0.88rem;
  line-height: 1.35;
  color: rgba(8, 18, 34, 0.72);
  min-height: 1.35em;
}
#game-overlay .grape-note .grape-note-explain {
  margin-top: 6px;
  font-weight: 750;
  opacity: 0.92;
  color: rgba(8, 18, 34, 0.68);
}
#game-overlay .grape-options {
  display: grid;
  gap: var(--game-answers-gap);
  margin-top: var(--game-gap);
}
#game-overlay .grape-options::before {
  content: "Ответы";
  display: block;
  font-size: var(--game-label-size);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: var(--game-label-weight);
  color: var(--game-label-color);
  margin: 2px 2px 0;
}
@media (min-width: 560px) {
  #game-overlay .grape-options {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
#game-overlay .grape-option {
  text-align: left;
  position: relative;
  overflow: hidden;
  font-weight: 850;
  letter-spacing: -0.01em;
}
#game-overlay .grape-option:not(.is-correct):not(.is-wrong) {
  border: 1px solid transparent;
  background:
    linear-gradient(rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0.92))
      padding-box,
    linear-gradient(
        145deg,
        rgba(var(--grape-accent-b), 0.26),
        rgba(var(--grape-accent-a), 0.16),
        rgba(var(--grape-accent-c), 0.18)
      )
      border-box;
  box-shadow: 0 18px 45px rgba(15, 23, 42, 0.12);
  animation: grape-option-in 420ms cubic-bezier(0.2, 0.9, 0.2, 1) both;
  animation-delay: calc(var(--opt-i, 0) * 45ms);
  will-change: transform, opacity;
}
#game-overlay .grape-option:not(.is-correct):not(.is-wrong):hover {
  background:
    linear-gradient(rgba(255, 255, 255, 0.96), rgba(255, 255, 255, 0.96))
      padding-box,
    linear-gradient(
        145deg,
        rgba(var(--grape-accent-b), 0.32),
        rgba(var(--grape-accent-a), 0.18),
        rgba(var(--grape-accent-c), 0.22)
      )
      border-box;
  transform: translateY(-2px);
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.14);
}
#game-overlay .grape-option:not(.is-correct):not(.is-wrong):active {
  transform: translateY(0) scale(0.99);
  box-shadow: 0 18px 45px rgba(15, 23, 42, 0.12);
}
@keyframes grape-option-in {
  0% {
    opacity: 0;
    transform: translateY(10px) scale(0.99);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
#game-overlay .grape-option::before {
  content: "";
  position: absolute;
  left: 10px;
  top: 12px;
  bottom: 12px;
  width: 5px;
  border-radius: 999px;
  background: linear-gradient(
    180deg,
    rgba(var(--grape-accent-b), 0.82),
    rgba(var(--grape-accent-a), 0.65)
  );
  opacity: 0.9;
}
#game-overlay .grape-option::after {
  content: "";
  position: absolute;
  inset: -40%;
  background: linear-gradient(
    110deg,
    rgba(255, 255, 255, 0) 38%,
    rgba(255, 255, 255, 0.55) 50%,
    rgba(255, 255, 255, 0) 62%
  );
  opacity: 0.08;
  transform: translateX(-35%) rotate(-8deg);
  pointer-events: none;
}
#game-overlay .grape-option {
  padding-left: 26px;
}
#game-overlay .grape-option:disabled {
  cursor: default;
}
#game-overlay .grape-option:disabled:hover {
  transform: none;
}
/* Sommelier: bigger answers on mobile */
@media (max-width: 640px) {
  #game-overlay #grape-game-container .grape-options {
    gap: 14px;
  }
  #game-overlay #grape-game-container.is-compact .grape-options {
    gap: 12px;
  }
  #game-overlay #grape-game-container .grape-option {
    font-size: clamp(1.05rem, 4.6vw, 1.18rem);
    line-height: 1.25;
    padding: 18px 16px;
    padding-left: 34px;
    border-radius: 22px;
    min-height: 56px;
  }
  #game-overlay #grape-game-container .grape-option::before {
    left: 12px;
    top: 14px;
    bottom: 14px;
    width: 6px;
  }
  #game-overlay #grape-game-container .grape-option.is-correct::after,
  #game-overlay #grape-game-container .grape-option.is-wrong::after {
    width: 28px;
    height: 28px;
  }
}
#game-overlay .grape-option.is-correct {
  background: linear-gradient(
    135deg,
    rgba(0, 200, 83, 0.92),
    rgba(0, 165, 180, 0.88)
  );
  border-color: rgba(0, 200, 83, 0.75);
  color: #fff;
  box-shadow: 0 18px 42px rgba(0, 200, 83, 0.22);
  animation: grape-pop 320ms cubic-bezier(0.2, 0.9, 0.2, 1);
}
#game-overlay .grape-option.is-correct::after {
  content: "✓";
  inset: auto 12px 12px auto;
  width: 26px;
  height: 26px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.28);
  color: rgba(255, 255, 255, 0.96);
  opacity: 1;
  transform: none;
}
#game-overlay .grape-option.is-wrong {
  background: linear-gradient(
    135deg,
    rgba(255, 61, 0, 0.92),
    rgba(255, 138, 0, 0.88)
  );
  border-color: rgba(255, 61, 0, 0.75);
  color: #fff;
  box-shadow: 0 18px 42px rgba(255, 61, 0, 0.22);
  animation: grape-shake 360ms cubic-bezier(0.2, 0.9, 0.2, 1);
}
#game-overlay .grape-option.is-wrong::after {
  content: "✕";
  inset: auto 12px 12px auto;
  width: 26px;
  height: 26px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.28);
  color: rgba(255, 255, 255, 0.96);
  opacity: 1;
  transform: none;
}

#game-overlay #grape-game-container.is-time-low .grape-timer {
  color: rgba(8, 18, 34, 0.88);
}
#game-overlay #grape-game-container.is-compact:not(.is-time-low) .grape-timer {
  opacity: 0.55;
}
@keyframes grape-pop {
  0% {
    transform: translateY(0) scale(1);
  }
  40% {
    transform: translateY(-1px) scale(1.02);
  }
  100% {
    transform: translateY(0) scale(1);
  }
}
@keyframes grape-shake {
  0% {
    transform: translateX(0);
  }
  20% {
    transform: translateX(-6px);
  }
  45% {
    transform: translateX(5px);
  }
  70% {
    transform: translateX(-4px);
  }
  100% {
    transform: translateX(0);
  }
}
@media (prefers-reduced-motion: reduce) {
  #game-overlay .grape-option.is-correct,
  #game-overlay .grape-option.is-wrong,
  #game-overlay .grape-option:not(.is-correct):not(.is-wrong),
  #game-overlay .grape-chip {
    animation: none;
  }
}
#game-overlay .grape-actions {
  position: sticky;
  bottom: calc(10px + env(safe-area-inset-bottom));
  margin-top: 12px;
  padding-top: 10px;
  padding-bottom: calc(10px + env(safe-area-inset-bottom));
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0),
    rgba(255, 255, 255, 0.92) 24%,
    rgba(255, 255, 255, 0.98)
  );
  backdrop-filter: blur(10px);
  border-top: 1px solid rgba(8, 18, 34, 0.08);
}
@media (prefers-color-scheme: dark) {
  #game-overlay .grape-panel .game-body {
    background:
      radial-gradient(
        1200px 600px at 15% -10%,
        rgba(var(--grape-accent-a), 0.18),
        transparent 55%
      ),
      radial-gradient(
        1000px 500px at 110% 10%,
        rgba(var(--grape-accent-b), 0.14),
        transparent 55%
      ),
      radial-gradient(
        900px 420px at 50% 120%,
        rgba(var(--grape-accent-c), 0.14),
        transparent 55%
      );
  }
  #game-overlay .grape-hero-title {
    color: rgba(255, 255, 255, 0.92);
  }
  #game-overlay .grape-hero-sub {
    color: rgba(255, 255, 255, 0.72);
  }
  #game-overlay .grape-hero::before {
    opacity: 0.14;
  }
  #game-overlay .grape-mode {
    background: linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.1),
      rgba(255, 255, 255, 0.06)
    );
    border: 1px solid rgba(255, 255, 255, 0.14);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.1),
      0 24px 65px rgba(0, 0, 0, 0.4);
  }
  #game-overlay .grape-deck {
    background: linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.1),
      rgba(255, 255, 255, 0.06)
    );
    border: 1px solid rgba(255, 255, 255, 0.14);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.1),
      0 24px 65px rgba(0, 0, 0, 0.4);
  }
  #game-overlay .grape-roundmode {
    background: linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.1),
      rgba(255, 255, 255, 0.06)
    );
    border: 1px solid rgba(255, 255, 255, 0.14);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.1),
      0 24px 65px rgba(0, 0, 0, 0.4);
  }
  #game-overlay .grape-mode-btn {
    color: rgba(255, 255, 255, 0.78);
  }
  #game-overlay .grape-deck-btn {
    color: rgba(255, 255, 255, 0.78);
  }
  #game-overlay .grape-roundmode-btn {
    color: rgba(255, 255, 255, 0.78);
  }
  #game-overlay .grape-mode-btn:hover,
  #game-overlay .grape-deck-btn:hover,
  #game-overlay .grape-roundmode-btn:hover {
    background: rgba(255, 255, 255, 0.08);
    box-shadow:
      inset 0 0 0 1px rgba(255, 255, 255, 0.1),
      0 18px 55px rgba(0, 0, 0, 0.4);
  }
  #game-overlay .grape-mode-btn[aria-pressed="true"] {
    background: linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.14),
      rgba(255, 255, 255, 0.1)
    );
    color: rgba(255, 255, 255, 0.92);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.14),
      0 22px 70px rgba(0, 0, 0, 0.55);
  }
  #game-overlay .grape-deck-btn[aria-pressed="true"] {
    background: linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.14),
      rgba(255, 255, 255, 0.1)
    );
    color: rgba(255, 255, 255, 0.92);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.14),
      0 22px 70px rgba(0, 0, 0, 0.55);
  }
  #game-overlay .grape-roundmode-btn[aria-pressed="true"] {
    background: linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.14),
      rgba(255, 255, 255, 0.1)
    );
    color: rgba(255, 255, 255, 0.92);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.14),
      0 22px 70px rgba(0, 0, 0, 0.55);
  }
  #game-overlay .grape-mode-note {
    color: rgba(255, 255, 255, 0.7);
  }
  #game-overlay .grape-mini-chip {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.14);
    color: rgba(255, 255, 255, 0.82);
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.35);
  }
  #game-overlay .grape-card {
    border: 1px solid transparent;
    background:
      linear-gradient(rgba(10, 12, 20, 0.92), rgba(10, 12, 20, 0.92))
        padding-box,
      linear-gradient(
          145deg,
          rgba(var(--grape-accent-a), 0.3),
          rgba(var(--grape-accent-b), 0.18),
          rgba(var(--grape-accent-c), 0.22)
        )
        border-box;
    box-shadow: 0 28px 75px rgba(0, 0, 0, 0.55);
  }
  #game-overlay .grape-card::before {
    opacity: 0.08;
  }
  #game-overlay .grape-card::after {
    opacity: 0.06;
  }
  #game-overlay .grape-question {
    color: rgba(255, 255, 255, 0.92);
  }
  #game-overlay .grape-question::before {
    color: rgba(255, 255, 255, 0.62);
  }
  #game-overlay .grape-timer {
    color: rgba(255, 255, 255, 0.7);
  }
  #game-overlay .grape-chips::before {
    color: rgba(255, 255, 255, 0.62);
  }
  #game-overlay .grape-chip {
    background: rgba(10, 12, 20, 0.72);
    border: 1px solid rgba(0, 210, 255, 0.2);
    color: rgba(255, 255, 255, 0.88);
  }
  #game-overlay .grape-options::before {
    color: rgba(255, 255, 255, 0.62);
  }
  #game-overlay .grape-option:not(.is-correct):not(.is-wrong) {
    border: 1px solid transparent;
    background:
      linear-gradient(rgba(10, 12, 20, 0.92), rgba(10, 12, 20, 0.92))
        padding-box,
      linear-gradient(
          145deg,
          rgba(var(--grape-accent-b), 0.26),
          rgba(var(--grape-accent-a), 0.16),
          rgba(var(--grape-accent-c), 0.18)
        )
        border-box;
    color: rgba(255, 255, 255, 0.88);
    box-shadow: 0 28px 75px rgba(0, 0, 0, 0.55);
  }
  #game-overlay .grape-option:not(.is-correct):not(.is-wrong):hover {
    background:
      linear-gradient(rgba(12, 14, 22, 0.94), rgba(12, 14, 22, 0.94))
        padding-box,
      linear-gradient(
          145deg,
          rgba(var(--grape-accent-b), 0.32),
          rgba(var(--grape-accent-a), 0.18),
          rgba(var(--grape-accent-c), 0.22)
        )
        border-box;
    box-shadow: 0 32px 90px rgba(0, 0, 0, 0.58);
  }
  #game-overlay .grape-option:not(.is-correct):not(.is-wrong):active {
    background:
      linear-gradient(rgba(10, 12, 20, 0.92), rgba(10, 12, 20, 0.92))
        padding-box,
      linear-gradient(
          145deg,
          rgba(var(--grape-accent-b), 0.26),
          rgba(var(--grape-accent-a), 0.16),
          rgba(var(--grape-accent-c), 0.18)
        )
        border-box;
    box-shadow: 0 28px 75px rgba(0, 0, 0, 0.55);
  }
  #game-overlay .grape-option::after {
    opacity: 0.06;
  }
  #game-overlay .grape-option.is-correct::after,
  #game-overlay .grape-option.is-wrong::after {
    opacity: 1;
  }
  #game-overlay .grape-compare-col {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 28px 75px rgba(0, 0, 0, 0.45);
  }
  #game-overlay .grape-compare-label {
    color: rgba(255, 255, 255, 0.65);
  }
  #game-overlay .grape-compare-hint {
    color: rgba(255, 255, 255, 0.7);
  }
  #game-overlay .grape-note {
    color: rgba(255, 255, 255, 0.78);
  }
  #game-overlay .grape-note .grape-note-explain {
    color: rgba(255, 255, 255, 0.72);
  }
  #game-overlay .grape-actions {
    background: linear-gradient(
      180deg,
      rgba(10, 12, 20, 0),
      rgba(10, 12, 20, 0.76) 24%,
      rgba(10, 12, 20, 0.92)
    );
    border-top: 1px solid rgba(255, 255, 255, 0.12);
  }
}

/* ===== Sommelier Premium Refresh ===== */
#game-overlay .grape-panel {
  --grape-surface: rgba(255, 255, 255, 0.84);
  --grape-surface-strong: rgba(255, 255, 255, 0.94);
  --grape-surface-soft: rgba(246, 249, 255, 0.82);
  --grape-text-strong: rgba(8, 18, 34, 0.95);
  --grape-text-soft: rgba(8, 18, 34, 0.66);
  --grape-border-soft: rgba(8, 18, 34, 0.1);
  --grape-premium-shadow: 0 24px 60px rgba(15, 23, 42, 0.12);
  --grape-deep-ink: rgba(23, 28, 45, 0.98);
  --grape-hero-text: rgba(255, 248, 242, 0.96);
}
#game-overlay .grape-panel .game-screen {
  background:
    radial-gradient(
      1200px 340px at 8% -8%,
      rgba(var(--grape-accent-a), 0.22),
      transparent 60%
    ),
    radial-gradient(
      900px 280px at 100% 4%,
      rgba(var(--grape-accent-c), 0.18),
      transparent 58%
    ),
    linear-gradient(
      180deg,
      rgba(255, 249, 244, 0.94) 0%,
      rgba(249, 251, 255, 0.98) 34%,
      rgba(244, 247, 252, 1) 100%
    );
}
#game-overlay .grape-panel .game-topbar {
  background:
    linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.92),
      rgba(252, 246, 241, 0.88)
    ),
    radial-gradient(
      480px 180px at 0% 0%,
      rgba(var(--grape-accent-a), 0.14),
      transparent 60%
    );
  border-bottom: 1px solid rgba(var(--grape-accent-a), 0.12);
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.06);
}
#game-overlay .grape-panel .game-title {
  color: rgba(24, 31, 48, 0.98);
}
#game-overlay .grape-panel .game-back,
#game-overlay .grape-panel .game-close {
  min-width: 48px;
  min-height: 48px;
  border-radius: 18px;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.92),
    rgba(249, 245, 241, 0.84)
  );
  border: 1px solid rgba(var(--grape-accent-a), 0.12);
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
  color: rgba(30, 35, 51, 0.92);
}
#game-overlay .grape-panel .game-meta {
  padding: 14px 16px 16px;
  background:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.84),
      rgba(255, 250, 246, 0.92)
    ),
    radial-gradient(
      420px 180px at 5% 0%,
      rgba(var(--grape-accent-b), 0.12),
      transparent 60%
    );
  border-bottom: 1px solid rgba(var(--grape-accent-a), 0.08);
}
#game-overlay .grape-panel .game-round {
  font-size: 1.02rem;
  font-weight: 900;
  color: rgba(38, 42, 56, 0.8);
  margin-bottom: 12px;
}
#game-overlay .grape-panel .game-progress {
  height: 12px;
  border-radius: 999px;
  background: rgba(28, 32, 47, 0.08);
  overflow: hidden;
  box-shadow: inset 0 1px 2px rgba(8, 18, 34, 0.08);
}
#game-overlay .grape-panel .game-progress .fill {
  border-radius: inherit;
  box-shadow: 0 0 20px rgba(var(--grape-accent-b), 0.32);
}
#game-overlay .grape-hero {
  padding: 18px 18px 16px;
  background: linear-gradient(
    135deg,
    rgba(var(--grape-accent-a), 0.96),
    rgba(var(--grape-accent-b), 0.92) 56%,
    rgba(var(--grape-accent-c), 0.82) 100%
  );
  border: 0;
  box-shadow: 0 28px 56px rgba(var(--grape-accent-a), 0.24);
}
#game-overlay .grape-hero::before {
  opacity: 0.36;
  background: linear-gradient(
    105deg,
    rgba(255, 255, 255, 0.36),
    rgba(255, 255, 255, 0) 48%
  );
  transform: translateX(-18%) rotate(-7deg);
}
#game-overlay .grape-hero::after {
  display: block;
  inset: auto -48px -72px auto;
  width: 180px;
  height: 180px;
  background: radial-gradient(
    circle at 30% 30%,
    rgba(255, 255, 255, 0.3),
    transparent 62%
  );
  opacity: 0.7;
}
#game-overlay .grape-hero-title {
  font-size: 1.14rem;
  line-height: 1.1;
  color: var(--grape-hero-text);
  text-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
}
#game-overlay .grape-hero-sub {
  margin-top: 8px;
  font-size: 0.92rem;
  line-height: 1.45;
  color: rgba(255, 245, 240, 0.84);
  max-width: 44ch;
}
#game-overlay .grape-mode,
#game-overlay .grape-deck,
#game-overlay .grape-roundmode {
  margin-top: 12px;
  gap: 6px;
  padding: 5px;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.22);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 14px 36px rgba(0, 0, 0, 0.1);
}
#game-overlay .grape-mode-btn,
#game-overlay .grape-deck-btn,
#game-overlay .grape-roundmode-btn {
  padding: 10px 15px;
  font-size: 0.84rem;
  color: rgba(255, 247, 242, 0.84);
}
#game-overlay .grape-mode-btn[aria-pressed="true"],
#game-overlay .grape-deck-btn[aria-pressed="true"],
#game-overlay .grape-roundmode-btn[aria-pressed="true"] {
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.96),
    rgba(255, 247, 242, 0.9)
  );
  box-shadow:
    0 12px 28px rgba(0, 0, 0, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.94);
  color: rgba(35, 36, 45, 0.92);
}
#game-overlay .grape-mode-note {
  margin-top: 12px;
  padding: 12px 14px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: rgba(255, 245, 240, 0.84);
}
#game-overlay .grape-mini {
  margin-top: 12px;
  gap: 10px;
}
#game-overlay .grape-mini-chip {
  background: rgba(255, 255, 255, 0.76);
  border: 1px solid rgba(255, 255, 255, 0.56);
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.08);
}
#game-overlay .grape-start-card {
  padding: 18px;
  background:
    linear-gradient(
      155deg,
      rgba(255, 255, 255, 0.98),
      rgba(252, 246, 240, 0.92)
    ),
    radial-gradient(
      540px 220px at 8% 0%,
      rgba(var(--grape-accent-a), 0.18),
      transparent 60%
    );
  border: 1px solid rgba(var(--grape-accent-a), 0.08);
  box-shadow: 0 24px 52px rgba(var(--grape-accent-a), 0.12);
}
#game-overlay .grape-start-title {
  font-size: 1.18rem;
  line-height: 1.08;
}
#game-overlay .grape-start-sub {
  margin-top: 8px;
  max-width: 36ch;
}
#game-overlay .grape-start-options {
  gap: 14px;
}
#game-overlay .grape-start-option {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: 152px;
  padding: 18px;
  padding-left: 18px;
  border-radius: 24px;
  background:
    linear-gradient(
      150deg,
      rgba(255, 255, 255, 0.98),
      rgba(252, 248, 244, 0.92)
    ),
    radial-gradient(
      420px 220px at 0% 0%,
      rgba(var(--grape-accent-a), 0.14),
      transparent 60%
    );
  border: 1px solid rgba(var(--grape-accent-a), 0.08);
  box-shadow: 0 20px 44px rgba(var(--grape-accent-a), 0.1);
}
#game-overlay .grape-start-option::before {
  display: none;
}
#game-overlay .grape-start-option-head {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}
#game-overlay .grape-start-option-icon {
  width: 54px;
  height: 54px;
  border-radius: 18px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  font-size: 1.45rem;
  background: linear-gradient(
    145deg,
    rgba(var(--grape-accent-b), 0.18),
    rgba(var(--grape-accent-a), 0.18)
  );
  border: 1px solid rgba(255, 255, 255, 0.6);
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.1);
}
#game-overlay .grape-start-option-copy {
  flex: 1;
  min-width: 0;
}
#game-overlay .grape-start-option-title {
  font-size: 1.02rem;
}
#game-overlay .grape-start-option-sub {
  margin-top: 7px;
  line-height: 1.45;
}
#game-overlay .grape-start-option-preview {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
#game-overlay .grape-start-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 30px;
  padding: 7px 11px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.86);
  border: 1px solid rgba(8, 18, 34, 0.08);
  color: rgba(8, 18, 34, 0.72);
  font-size: 0.78rem;
  font-weight: 850;
  letter-spacing: 0.01em;
}
#game-overlay .grape-card {
  padding: 18px;
  background:
    linear-gradient(
      160deg,
      rgba(255, 255, 255, 0.99),
      rgba(255, 248, 242, 0.95)
    ),
    radial-gradient(
      460px 180px at 5% 0%,
      rgba(var(--grape-accent-c), 0.16),
      transparent 60%
    );
  border: 1px solid rgba(var(--grape-accent-a), 0.1);
  box-shadow: 0 24px 54px rgba(15, 23, 42, 0.12);
}
#game-overlay .grape-card::before {
  inset: 0 auto auto 0;
  width: 100%;
  height: 7px;
  background: linear-gradient(
    90deg,
    rgba(var(--grape-accent-a), 0.95),
    rgba(var(--grape-accent-b), 0.88),
    rgba(var(--grape-accent-c), 0.8)
  );
  opacity: 1;
}
#game-overlay .grape-card::after {
  display: none;
}
#game-overlay .grape-card-head {
  align-items: center;
  margin-bottom: 14px;
}
#game-overlay .grape-question {
  font-size: 1.18rem;
  line-height: 1.18;
  max-width: 17ch;
  color: rgba(26, 31, 46, 0.98);
}
#game-overlay .grape-question::before {
  margin-bottom: 7px;
  color: rgba(var(--grape-accent-a), 0.72);
}
#game-overlay .grape-timer {
  --timer-pct: 100;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 7px 13px 7px 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.82);
  border: 1px solid rgba(8, 18, 34, 0.1);
  box-shadow: 0 10px 26px rgba(15, 23, 42, 0.1);
  color: rgba(8, 18, 34, 0.84);
  letter-spacing: 0.04em;
  font-size: 0.8rem;
}
#game-overlay .grape-timer-ring {
  width: 30px;
  height: 30px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: conic-gradient(
    rgb(var(--grape-accent-b)) calc(var(--timer-pct) * 1%),
    rgba(8, 18, 34, 0.1) 0
  );
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.36);
  flex: 0 0 auto;
}
#game-overlay .grape-timer-ring-core {
  width: 20px;
  height: 20px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.88);
}
#game-overlay .grape-timer[data-tone="warn"] .grape-timer-ring {
  background: conic-gradient(
    rgb(var(--grape-accent-c)) calc(var(--timer-pct) * 1%),
    rgba(8, 18, 34, 0.1) 0
  );
}
#game-overlay .grape-timer[data-tone="critical"] {
  color: #b93814;
  background: rgba(255, 244, 239, 0.94);
  border-color: rgba(255, 138, 0, 0.18);
}
#game-overlay .grape-timer[data-tone="critical"] .grape-timer-ring {
  background: conic-gradient(
    #ff6b2b calc(var(--timer-pct) * 1%),
    rgba(8, 18, 34, 0.08) 0
  );
}
#game-overlay .grape-timer-text {
  display: inline-block;
  min-width: 3ch;
}
#game-overlay .grape-chips {
  display: grid;
  gap: 12px;
  margin-top: 10px;
}
#game-overlay .grape-chips::before {
  display: none;
  content: none;
}
#game-overlay .grape-chip-group {
  padding: 13px 14px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.82);
  border: 1px solid rgba(var(--grape-accent-a), 0.08);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72);
}
#game-overlay .grape-chip-group--aroma {
  background:
    linear-gradient(
      160deg,
      rgba(255, 250, 247, 0.96),
      rgba(255, 244, 239, 0.88)
    ),
    radial-gradient(
      260px 120px at 0% 0%,
      rgba(var(--grape-accent-a), 0.14),
      transparent 60%
    );
}
#game-overlay .grape-chip-group--structure {
  background:
    linear-gradient(
      160deg,
      rgba(255, 252, 244, 0.96),
      rgba(255, 246, 225, 0.9)
    ),
    radial-gradient(
      240px 110px at 100% 0%,
      rgba(var(--grape-accent-c), 0.18),
      transparent 60%
    );
}
#game-overlay .grape-chip-group-title {
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(var(--grape-accent-a), 0.76);
}
#game-overlay .grape-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}
#game-overlay .grape-chip {
  padding: 9px 12px;
  border-radius: 999px;
  font-size: 0.84rem;
  font-weight: 900;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
  animation: grape-chip-premium-in 240ms cubic-bezier(0.2, 0.9, 0.2, 1) both;
}
#game-overlay .grape-chip::after {
  display: none;
}
#game-overlay .grape-chip--aroma {
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.92),
    rgba(255, 245, 240, 0.92)
  );
  border: 1px solid rgba(var(--grape-accent-b), 0.24);
}
#game-overlay .grape-chip--structure {
  background: linear-gradient(
    180deg,
    rgba(255, 254, 248, 0.96),
    rgba(255, 248, 230, 0.94)
  );
  border: 1px solid rgba(var(--grape-accent-c), 0.3);
}
@keyframes grape-chip-premium-in {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
#game-overlay .grape-compare {
  gap: 14px;
  margin-top: 10px;
}
#game-overlay .grape-compare-col {
  padding: 14px;
  background:
    linear-gradient(
      160deg,
      rgba(255, 255, 255, 0.96),
      rgba(252, 248, 244, 0.92)
    ),
    radial-gradient(
      260px 120px at 0% 0%,
      rgba(var(--grape-accent-b), 0.12),
      transparent 60%
    );
  border: 1px solid rgba(var(--grape-accent-a), 0.08);
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.1);
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    background 0.18s ease;
}
#game-overlay .grape-compare-col.is-selected {
  outline: none;
  transform: translateY(-2px);
  background: rgba(239, 251, 255, 0.94);
  box-shadow: 0 18px 40px rgba(0, 210, 255, 0.18);
}
#game-overlay .grape-compare-col.is-selected::before {
  content: "Выбрано";
  position: absolute;
  left: 12px;
  top: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 24px;
  padding: 4px 9px;
  border-radius: 999px;
  background: rgba(0, 210, 255, 0.14);
  border: 1px solid rgba(0, 210, 255, 0.22);
  color: rgba(8, 18, 34, 0.76);
  font-size: 0.7rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
#game-overlay .grape-compare-col.is-correct {
  outline: none;
  background: rgba(234, 255, 244, 0.96);
  box-shadow: 0 18px 40px rgba(0, 200, 83, 0.18);
}
#game-overlay .grape-compare-col.is-wrong {
  outline: none;
  background: rgba(255, 243, 238, 0.96);
  box-shadow: 0 18px 40px rgba(255, 61, 0, 0.16);
}
#game-overlay .grape-compare-label {
  margin-bottom: 10px;
}
#game-overlay .grape-note {
  margin-top: 14px;
  padding: 12px 14px;
  border-radius: 16px;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.92),
    rgba(255, 249, 244, 0.92)
  );
  border: 1px solid rgba(var(--grape-accent-a), 0.08);
  min-height: 0;
}
#game-overlay .grape-note:empty {
  display: none;
}
#game-overlay .grape-note .grape-note-explain {
  margin-top: 8px;
  line-height: 1.45;
}
#game-overlay .grape-options {
  gap: 14px;
  margin-top: 16px;
}
#game-overlay .grape-options::before {
  color: rgba(var(--grape-accent-a), 0.72);
}
#game-overlay .grape-option {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 74px;
  padding: 15px 16px;
  padding-left: 15px;
  border-radius: 22px;
}
#game-overlay .grape-option::before {
  display: none;
}
#game-overlay .grape-option:not(.is-correct):not(.is-wrong) {
  background:
    linear-gradient(
        140deg,
        rgba(255, 255, 255, 0.99),
        rgba(255, 249, 244, 0.95)
      )
      padding-box,
    linear-gradient(
        145deg,
        rgba(var(--grape-accent-a), 0.32),
        rgba(var(--grape-accent-b), 0.2),
        rgba(var(--grape-accent-c), 0.18)
      )
      border-box;
  border: 1px solid transparent;
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.1);
  animation: grape-option-premium-in 300ms cubic-bezier(0.2, 0.9, 0.2, 1) both;
}
#game-overlay .grape-option:not(.is-correct):not(.is-wrong):hover {
  transform: translateY(-2px);
  box-shadow: 0 22px 48px rgba(var(--grape-accent-a), 0.14);
}
#game-overlay .grape-option.is-selected:not(.is-correct):not(.is-wrong) {
  outline: none;
  background:
    linear-gradient(rgba(255, 248, 244, 0.99), rgba(255, 244, 237, 0.97))
      padding-box,
    linear-gradient(
        145deg,
        rgba(var(--grape-accent-a), 0.54),
        rgba(var(--grape-accent-b), 0.28),
        rgba(var(--grape-accent-c), 0.26)
      )
      border-box;
  box-shadow: 0 20px 44px rgba(var(--grape-accent-a), 0.18);
}
#game-overlay .grape-option-mark {
  width: 40px;
  height: 40px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  background: linear-gradient(
    145deg,
    rgba(var(--grape-accent-a), 0.98),
    rgba(var(--grape-accent-b), 0.9),
    rgba(var(--grape-accent-c), 0.84)
  );
  color: #fff;
  font-size: 0.9rem;
  font-weight: 950;
  box-shadow: 0 14px 30px rgba(var(--grape-accent-a), 0.22);
}
#game-overlay .grape-option-text {
  flex: 1;
  min-width: 0;
  font-size: 1.02rem;
  line-height: 1.32;
  color: rgba(8, 18, 34, 0.9);
}
#game-overlay .grape-start-options .grape-start-option {
  align-items: stretch;
  min-height: 152px;
  padding: 18px;
  padding-left: 18px;
}
#game-overlay
  .grape-start-options
  .grape-start-option:not(.is-correct):not(.is-wrong) {
  background:
    linear-gradient(
      150deg,
      rgba(255, 255, 255, 0.98),
      rgba(247, 250, 255, 0.88)
    ),
    radial-gradient(
      420px 220px at 0% 0%,
      rgba(var(--grape-accent-a), 0.1),
      transparent 60%
    );
  border: 1px solid rgba(255, 255, 255, 0.62);
  box-shadow: 0 18px 44px rgba(15, 23, 42, 0.1);
}
#game-overlay
  .grape-start-options
  .grape-start-option:not(.is-correct):not(.is-wrong):hover {
  transform: translateY(-2px);
  box-shadow: 0 22px 48px rgba(15, 23, 42, 0.14);
}
#game-overlay .grape-start-options .grape-start-option::after {
  display: none;
}
#game-overlay .grape-option.is-correct .grape-option-mark,
#game-overlay .grape-option.is-wrong .grape-option-mark {
  background: rgba(255, 255, 255, 0.22);
  border: 1px solid rgba(255, 255, 255, 0.26);
  box-shadow: none;
}
#game-overlay .grape-option.is-correct .grape-option-text,
#game-overlay .grape-option.is-wrong .grape-option-text {
  color: #fff;
}
@keyframes grape-option-premium-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
#game-overlay .grape-actions {
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0),
    rgba(249, 251, 255, 0.92) 28%,
    rgba(249, 251, 255, 0.98)
  );
  border-top: 1px solid rgba(8, 18, 34, 0.06);
}
@media (max-width: 640px) {
  #game-overlay .grape-start-card,
  #game-overlay .grape-card,
  #game-overlay .grape-hero {
    padding: 15px;
  }
  #game-overlay .grape-start-option {
    min-height: 0;
    padding: 16px;
    border-radius: 20px;
  }
  #game-overlay .grape-start-options .grape-start-option {
    padding: 16px;
  }
  #game-overlay .grape-start-option-icon {
    width: 46px;
    height: 46px;
    border-radius: 15px;
    font-size: 1.22rem;
  }
  #game-overlay .grape-question {
    font-size: 1.08rem;
    max-width: none;
  }
  #game-overlay .grape-card-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
  #game-overlay .grape-timer {
    align-self: flex-start;
  }
  #game-overlay .grape-chip-group {
    padding: 12px;
  }
  #game-overlay .grape-chip {
    font-size: 0.8rem;
    padding: 8px 11px;
  }
  #game-overlay .grape-option {
    min-height: 68px;
    gap: 12px;
    padding: 14px;
  }
  #game-overlay .grape-option-mark {
    width: 30px;
    height: 30px;
    border-radius: 10px;
    font-size: 0.78rem;
  }
  #game-overlay .grape-option-text {
    font-size: 0.94rem;
  }
  #game-overlay #grape-game-container.is-compact .grape-hero {
    padding: 13px 13px 12px;
  }
  #game-overlay #grape-game-container.is-compact .grape-options {
    gap: 10px;
  }
}
@media (prefers-reduced-motion: reduce) {
  #game-overlay .grape-option:not(.is-correct):not(.is-wrong),
  #game-overlay .grape-chip,
  #game-overlay .grape-compare-col {
    animation: none !important;
    transition: none !important;
  }
}
@media (prefers-color-scheme: dark) {
  #game-overlay .grape-start-card,
  #game-overlay .grape-hero,
  #game-overlay .grape-card {
    background:
      linear-gradient(155deg, rgba(14, 18, 29, 0.96), rgba(12, 16, 27, 0.92)),
      radial-gradient(
        560px 220px at 10% 0%,
        rgba(var(--grape-accent-b), 0.14),
        transparent 60%
      );
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 28px 70px rgba(0, 0, 0, 0.46);
  }
  #game-overlay .grape-hero-title,
  #game-overlay .grape-question,
  #game-overlay .grape-start-title,
  #game-overlay .grape-start-option-title,
  #game-overlay .grape-option-text {
    color: rgba(255, 255, 255, 0.92);
  }
  #game-overlay .grape-hero-sub,
  #game-overlay .grape-start-sub,
  #game-overlay .grape-start-option-sub,
  #game-overlay .grape-mode-note,
  #game-overlay .grape-note {
    color: rgba(255, 255, 255, 0.72);
  }
  #game-overlay .grape-start-option,
  #game-overlay .grape-chip-group,
  #game-overlay .grape-compare-col,
  #game-overlay .grape-note,
  #game-overlay .grape-timer,
  #game-overlay .grape-start-pill,
  #game-overlay .grape-mini-chip {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.28);
  }
  #game-overlay
    .grape-start-options
    .grape-start-option:not(.is-correct):not(.is-wrong) {
    background:
      linear-gradient(155deg, rgba(14, 18, 29, 0.96), rgba(12, 16, 27, 0.92)),
      radial-gradient(
        560px 220px at 10% 0%,
        rgba(var(--grape-accent-b), 0.14),
        transparent 60%
      );
  }
  #game-overlay .grape-mode,
  #game-overlay .grape-deck,
  #game-overlay .grape-roundmode {
    background: linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.1),
      rgba(255, 255, 255, 0.06)
    );
    border: 1px solid rgba(255, 255, 255, 0.12);
  }
  #game-overlay .grape-mode-btn,
  #game-overlay .grape-deck-btn,
  #game-overlay .grape-roundmode-btn,
  #game-overlay .grape-chip-group-title,
  #game-overlay .grape-compare-label,
  #game-overlay .grape-options::before,
  #game-overlay .grape-start-options::before,
  #game-overlay .grape-question::before {
    color: rgba(255, 255, 255, 0.66);
  }
  #game-overlay .grape-option:not(.is-correct):not(.is-wrong) {
    background:
      linear-gradient(rgba(12, 16, 27, 0.96), rgba(12, 16, 27, 0.92))
        padding-box,
      linear-gradient(
          145deg,
          rgba(var(--grape-accent-b), 0.22),
          rgba(var(--grape-accent-a), 0.14),
          rgba(var(--grape-accent-c), 0.16)
        )
        border-box;
  }
  #game-overlay .grape-chip--aroma {
    background: rgba(var(--grape-accent-b), 0.14);
    border-color: rgba(var(--grape-accent-b), 0.24);
  }
  #game-overlay .grape-chip--structure {
    background: rgba(var(--grape-accent-c), 0.16);
    border-color: rgba(var(--grape-accent-c), 0.22);
  }
  #game-overlay .grape-timer-ring-core {
    background: rgba(12, 16, 27, 0.96);
  }
  #game-overlay .grape-option.is-selected:not(.is-correct):not(.is-wrong),
  #game-overlay .grape-compare-col.is-selected {
    background: rgba(0, 210, 255, 0.1);
  }
  #game-overlay .grape-actions {
    background: linear-gradient(
      180deg,
      rgba(10, 12, 20, 0),
      rgba(10, 12, 20, 0.82) 28%,
      rgba(10, 12, 20, 0.94)
    );
    border-top: 1px solid rgba(255, 255, 255, 0.1);
  }
}

#game-overlay .training-option.correct,
#game-overlay .quiz-option.correct {
  background: linear-gradient(
    135deg,
    rgba(0, 200, 83, 0.92),
    rgba(0, 165, 180, 0.88)
  );
  border-color: rgba(0, 200, 83, 0.75);
  color: #fff;
  box-shadow: 0 18px 42px rgba(0, 200, 83, 0.22);
}
#game-overlay .training-option.wrong,
#game-overlay .quiz-option.wrong {
  background: linear-gradient(
    135deg,
    rgba(255, 61, 0, 0.92),
    rgba(255, 138, 0, 0.88)
  );
  border-color: rgba(255, 61, 0, 0.75);
  color: #fff;
  box-shadow: 0 18px 42px rgba(255, 61, 0, 0.22);
}

#game-overlay .memory-option.selected {
  border-color: rgba(0, 165, 180, 0.65);
  background: rgba(0, 165, 180, 0.12);
}
#game-overlay .memory-option.correct-reveal {
  background: linear-gradient(
    135deg,
    rgba(0, 200, 83, 0.86),
    rgba(0, 165, 180, 0.76)
  );
  border-color: rgba(0, 200, 83, 0.7);
  color: #fff;
}
#game-overlay .memory-option.extra-reveal {
  background: linear-gradient(
    135deg,
    rgba(255, 61, 0, 0.88),
    rgba(255, 138, 0, 0.82)
  );
  border-color: rgba(255, 61, 0, 0.72);
  color: #fff;
}
#game-overlay .memory-option.missed-reveal {
  outline: 3px solid rgba(255, 206, 84, 0.7);
  outline-offset: 2px;
}
#game-overlay .memory-option.wrong-reveal {
  opacity: 0.55;
  filter: grayscale(0.2);
}

#game-overlay .game-actions {
  display: grid;
  gap: 10px;
  margin-top: 14px;
}
@media (max-width: 640px) {
  #game-overlay .game-actions {
    position: sticky;
    bottom: calc(10px + env(safe-area-inset-bottom));
    padding-top: 10px;
    padding-bottom: calc(10px + env(safe-area-inset-bottom));
    background: linear-gradient(
      180deg,
      rgba(255, 255, 255, 0),
      rgba(255, 255, 255, 0.92) 24%,
      rgba(255, 255, 255, 0.98)
    );
    backdrop-filter: blur(10px);
    border-top: 1px solid rgba(8, 18, 34, 0.08);
    z-index: 5;
  }
}
@media (max-width: 640px) and (prefers-color-scheme: dark) {
  #game-overlay .game-actions {
    background: linear-gradient(
      180deg,
      rgba(10, 12, 20, 0),
      rgba(10, 12, 20, 0.76) 24%,
      rgba(10, 12, 20, 0.92)
    );
    border-top: 1px solid rgba(255, 255, 255, 0.12);
  }
}
#game-overlay .fc-controls.game-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
}
#game-overlay .fc-controls.game-actions .fc-btn {
  flex: 1;
}
#game-overlay .game-actions:empty {
  display: none;
}
#game-overlay .close-modal-bottom-btn {
  margin-top: 0;
  border-radius: 16px;
  padding: 14px 16px;
  font-weight: 800;
  background: linear-gradient(
    160deg,
    rgba(255, 255, 255, 0.92),
    rgba(245, 248, 252, 0.92)
  );
  border: 1px solid rgba(8, 18, 34, 0.1);
  box-shadow: 0 12px 26px rgba(15, 23, 42, 0.1);
}
@media (prefers-color-scheme: dark) {
  #game-overlay .close-modal-bottom-btn {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.14);
    color: rgba(255, 255, 255, 0.92);
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.35);
  }
}
#game-overlay .close-modal-bottom-btn.is-primary,
#game-overlay #quiz-result-actions .close-modal-bottom-btn:first-child {
  background: linear-gradient(120deg, #00d2ff, #7f5aff);
  border: none;
  color: #0b1021;
  box-shadow: 0 16px 36px rgba(0, 210, 255, 0.22);
}
#game-overlay .close-modal-bottom-btn.is-ghost {
  background: rgba(0, 0, 0, 0.03);
  border: 1px solid rgba(8, 18, 34, 0.12);
  color: rgba(8, 18, 34, 0.86);
  box-shadow: none;
}
@media (prefers-color-scheme: dark) {
  #game-overlay .close-modal-bottom-btn.is-ghost {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.9);
  }
}
#game-overlay .close-modal-bottom-btn:active {
  transform: translateY(1px);
}

/* Mobile: единый "во весь экран" для всех игр (без разных рамок) */
@media (max-width: 640px) {
  body.game-mode {
    overflow: hidden;
  }

  body.game-mode #game-overlay {
    padding: 0;
    align-items: stretch;
    justify-content: flex-start;
    flex-direction: column;
  }

  body.game-mode #game-overlay .game-panel {
    width: 100%;
    max-width: none;
    height: 100vh;
    height: 100dvh;
    max-height: none;
    border-radius: 0;
    padding: 0;
    border: 0;
    box-shadow: none;
  }

  body.game-mode #game-overlay .oracle-panel,
  body.game-mode #game-overlay .horoscope-panel {
    width: 100%;
    max-width: none;
  }

  body.game-mode #game-overlay .game-topbar {
    padding-top: calc(12px + env(safe-area-inset-top));
  }

  body.game-mode #game-overlay .game-body {
    padding-bottom: calc(96px + env(safe-area-inset-bottom));
    -webkit-overflow-scrolling: touch;
  }

  body.game-mode #game-overlay .quiz-result {
    width: 100%;
    height: 100vh;
    height: 100dvh;
    max-height: none;
    padding: calc(24px + env(safe-area-inset-top)) 16px
      calc(24px + env(safe-area-inset-bottom));
    background: rgba(255, 255, 255, 0.96);
    border: 0;
    box-shadow: none;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
}
@media (max-width: 640px) and (prefers-color-scheme: dark) {
  body.game-mode #game-overlay .quiz-result {
    background: rgba(10, 12, 20, 0.94);
    color: rgba(255, 255, 255, 0.92);
  }
}
/* Плавающий баннер "Играть снова" над нижней навигацией */
.bottom-nav-wrapper {
  position: fixed;
  left: 0;
  right: 0;
  bottom: calc(var(--nav-height) + var(--safe-area-bottom) + 12px);
  padding: 0 15px;
  z-index: 10009;
  pointer-events: none;
}
body.game-mode .bottom-nav-wrapper,
body.subwindow-visible .bottom-nav-wrapper {
  display: none !important;
}
.game-recap-banner {
  background: rgba(255, 255, 255, 0.95);
  border-radius: 24px;
  padding: 12px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(0, 0, 0, 0.08);
  font-size: 0.9rem;
  color: #111;
  pointer-events: auto;
  transform: translateY(10px) scale(0.985);
  opacity: 0;
  transition:
    transform 260ms cubic-bezier(0.22, 1, 0.36, 1),
    opacity 220ms ease;
}
@media (prefers-color-scheme: dark) {
  .game-recap-banner {
    background: rgba(14, 16, 26, 0.78);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.92);
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.55);
  }
}
.game-recap-banner.show {
  transform: translateY(0) scale(1);
  opacity: 1;
}
.game-recap-banner.hidden {
  display: none;
}
.game-recap-text {
  flex: 1;
  font-size: 0.85rem;
  line-height: 1.4;
  font-weight: 600;
}
.game-recap-btn {
  border: none;
  background: linear-gradient(135deg, #f94d6b, #ff8a00);
  color: white;
  border-radius: 12px;
  padding: 8px 16px;
  font-weight: 700;
  cursor: pointer;
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
  letter-spacing: 0.05em;
  font-size: 0.8rem;
  box-shadow: 0 8px 20px rgba(249, 77, 107, 0.35);
}
.game-recap-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 24px rgba(249, 77, 107, 0.45);
}
.game-bottombar {
  position: sticky;
  bottom: 0;
  z-index: 20;
  padding: 12px 14px calc(12px + env(safe-area-inset-bottom));
  background: #fff;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
}
@media (prefers-color-scheme: dark) {
  .game-bottombar {
    background: rgba(10, 12, 20, 0.92);
    border-top: 1px solid rgba(255, 255, 255, 0.12);
  }
}
.game-primary {
  width: 100%;
  border: 0;
  border-radius: 16px;
  padding: 14px 16px;
  font-weight: 700;
  font-size: 15px;
  cursor: pointer;
}
.game-secondary {
  width: 100%;
  border-radius: 16px;
  padding: 14px 16px;
  font-weight: 800;
  font-size: 15px;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(8, 18, 34, 0.12);
  box-shadow: 0 12px 26px rgba(15, 23, 42, 0.1);
  color: rgba(8, 18, 34, 0.88);
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    background 0.18s ease,
    border-color 0.18s ease;
}
.game-secondary:hover {
  transform: translateY(-1px);
  box-shadow: 0 18px 38px rgba(15, 23, 42, 0.14);
}
.game-secondary:active {
  transform: translateY(0) scale(0.99);
}
@media (prefers-color-scheme: dark) {
  .game-secondary {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.16);
    color: rgba(255, 255, 255, 0.88);
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.35);
  }
}
.horoscope-panel {
  text-align: center;
}
#game-overlay .horoscope-panel-body {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
  padding: 14px;
  border-radius: var(--game-card-radius, 22px);
  background:
    radial-gradient(
      700px 260px at 14% 0%,
      rgba(0, 210, 255, 0.12),
      transparent 60%
    ),
    radial-gradient(
      680px 260px at 92% 0%,
      rgba(127, 90, 255, 0.12),
      transparent 62%
    ),
    rgba(255, 255, 255, 0.86);
  border: 1px solid rgba(8, 18, 34, 0.1);
  box-shadow: var(--game-card-shadow, 0 18px 45px rgba(15, 23, 42, 0.1));
  overflow: hidden;
  position: relative;
}
#game-overlay .horoscope-panel-body.horoscope-refresh {
  animation: horoscope-refresh 900ms cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes horoscope-refresh {
  0% {
    transform: translateY(2px) scale(0.995);
    filter: saturate(0.96);
  }
  40% {
    transform: translateY(0) scale(1);
    filter: saturate(1.06);
  }
  100% {
    transform: translateY(0) scale(1);
    filter: none;
  }
}
#game-overlay .horoscope-panel-icon {
  flex: 0 0 auto;
  width: 52px;
  height: 52px;
  border-radius: 18px;
  display: grid;
  place-items: center;
  font-size: 24px;
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(8, 18, 34, 0.1);
  box-shadow: 0 14px 30px rgba(15, 23, 42, 0.1);
}
.horoscope-panel-content {
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
#game-overlay .horoscope-panel-subtitle {
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 900;
  color: rgba(0, 0, 0, 0.62);
}
#game-overlay .horoscope-panel-sign {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  padding: 10px 12px;
  border-radius: 999px;
  font-size: 1.06rem;
  font-weight: 950;
  color: rgba(8, 18, 34, 0.92);
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(8, 18, 34, 0.12);
  box-shadow: 0 14px 30px rgba(15, 23, 42, 0.1);
}
#game-overlay .horoscope-panel-tagline {
  font-size: 1.02rem;
  font-weight: 950;
  letter-spacing: -0.01em;
  line-height: 1.25;
  color: rgba(8, 18, 34, 0.92);
}
#game-overlay .horoscope-panel-message {
  margin-top: 4px;
  position: relative;
  font-size: 0.98rem;
  font-weight: 750;
  line-height: 1.42;
  color: rgba(8, 18, 34, 0.88);
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(8, 18, 34, 0.1);
  border-radius: 18px;
  padding: 12px 12px;
}
#game-overlay .horoscope-panel-message::before {
  content: "Прогноз";
  display: block;
  font-size: var(--game-label-size, 11px);
  letter-spacing: var(--game-label-ls, 0.18em);
  text-transform: uppercase;
  font-weight: var(--game-label-weight, 900);
  color: rgba(8, 18, 34, 0.62);
  margin-bottom: 8px;
}
#game-overlay .horoscope-panel-tip {
  margin-top: 8px;
  font-size: 0.88rem;
  font-weight: 850;
  color: rgba(8, 18, 34, 0.7);
  background: rgba(255, 255, 255, 0.62);
  border: 1px solid rgba(8, 18, 34, 0.1);
  border-radius: 14px;
  padding: 10px 12px;
}
#game-overlay .horoscope-panel-actions {
  margin-top: 12px;
  display: grid;
  gap: 10px;
}
@media (max-width: 520px) {
  #game-overlay .horoscope-panel-body {
    flex-direction: column;
    align-items: stretch;
  }
  .horoscope-panel-content {
    text-align: left;
  }
  #game-overlay .horoscope-panel-icon {
    width: 56px;
    height: 56px;
    border-radius: 20px;
  }
}
@media (prefers-color-scheme: dark) {
  #game-overlay .horoscope-panel-subtitle {
    color: rgba(255, 255, 255, 0.7);
  }
  #game-overlay .horoscope-panel-tagline {
    color: rgba(255, 255, 255, 0.92);
  }
  #game-overlay .horoscope-panel-message {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.86);
  }
  #game-overlay .horoscope-panel-message::before {
    color: rgba(255, 255, 255, 0.64);
  }
  #game-overlay .horoscope-panel-tip {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.78);
  }
}
.oracle-panel {
  position: relative;
  overflow: hidden;
}

/* === RECIPE BUILDER GAME === */
.recipe-panel {
  height: 100%;
  display: flex;
  flex-direction: column;
}
.recipe-hero {
  padding: 15px 0;
  display: flex;
  justify-content: center;
}
.recipe-target-card {
  background: var(--ui-surface);
  border: 1px solid var(--ui-border);
  border-radius: var(--radius-lg);
  padding: 20px;
  text-align: center;
  width: 100%;
  max-width: 380px;
  box-shadow: var(--ui-shadow-lg);
  position: relative;
  overflow: hidden;
}
.recipe-target-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(
    circle at 50% 0%,
    var(--luna-glow),
    transparent 70%
  );
  opacity: 0.1;
  pointer-events: none;
}
.recipe-target-label {
  font-size: 11px;
  color: var(--luna-accent);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  margin-bottom: 6px;
}
.recipe-target-name {
  font-size: 22px;
  font-weight: 800;
  color: var(--game-text);
  margin-bottom: 6px;
  line-height: 1.2;
}
.recipe-target-desc {
  font-size: 13px;
  color: var(--game-muted);
  line-height: 1.4;
}

.recipe-selected-area {
  min-height: 70px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px dashed var(--ui-border);
  border-radius: var(--radius-md);
  margin: 15px 0;
  padding: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  position: relative;
}
.recipe-selected-placeholder {
  color: var(--game-muted);
  font-size: 13px;
  font-style: italic;
}
.recipe-selected-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}

.recipe-options-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  padding: 10px 0;
  margin-bottom: 70px;
  overflow-y: auto;
  max-height: 280px;
}
.recipe-chip {
  background: var(--ui-surface);
  border: 1px solid var(--ui-border);
  color: var(--game-text);
  padding: 10px 6px;
  border-radius: var(--radius-md);
  font-size: 12px;
  font-weight: 600;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  user-select: none;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
}
.recipe-chip:hover {
  background: var(--ui-surface-2);
  border-color: var(--luna-accent);
  transform: translateY(-2px);
}
.recipe-chip.is-selected {
  background: var(--luna-accent);
  color: white;
  border-color: var(--luna-accent);
  box-shadow: 0 4px 12px rgba(123, 97, 255, 0.3);
}
.recipe-chip.is-correct {
  background: var(--correct-green) !important;
  color: white !important;
  border-color: var(--correct-green) !important;
}
.recipe-chip.is-wrong {
  background: var(--wrong-red) !important;
  color: white !important;
  border-color: var(--wrong-red) !important;
}

.recipe-selected-chip {
  background: var(--luna-deep);
  color: white;
  padding: 6px 12px;
  border-radius: 100px;
  font-size: 11px;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 6px;
  animation: chipPop 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}
@keyframes chipPop {
  0% {
    transform: scale(0.6);
    opacity: 0;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}
.recipe-selected-chip .close {
  font-size: 14px;
  cursor: pointer;
  opacity: 0.7;
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
}
.recipe-selected-chip .close:hover {
  opacity: 1;
  background: rgba(255, 255, 255, 0.2);
}

.recipe-actions {
  position: absolute;
  bottom: 15px;
  left: 15px;
  right: 15px;
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 10px;
}
@media (max-width: 400px) {
  .recipe-options-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
  }
  .recipe-chip {
    font-size: 11px;
    padding: 8px 4px;
  }
}

.allergen-badge {
  display: inline-block;
  background: rgba(255, 61, 0, 0.15);
  color: var(--wrong-red);
  padding: 4px 8px;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 700;
  margin-left: 8px;
  border: 1px solid var(--wrong-red);
}

#oracle-game-panel {
  transition:
    opacity 180ms ease,
    filter 180ms ease;
}
#oracle-game-panel.is-modal-exiting {
  opacity: 0;
  filter: blur(1px) saturate(0.95);
  pointer-events: none;
}
#oracle-game-panel.is-modal-covered {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity 160ms ease,
    visibility 0s linear 160ms;
}
.oracle-panel #randomizer-container {
  display: block;
}
.oracle-card {
  background: var(--surface-oracle-card);
  border: 1px solid var(--surface-oracle-card-border);
  border-radius: 18px;
  padding: 14px;
  box-shadow: var(--surface-oracle-card-shadow);
}
.oracle-head {
  margin-bottom: 12px;
}
.oracle-sub {
  font-size: 12px;
  color: var(--surface-oracle-sub);
  text-transform: uppercase;
  letter-spacing: 0.2em;
}
.oracle-name {
  font-weight: 800;
  font-size: 18px;
  margin-top: 2px;
}
.oracle-step {
  display: none;
}
.oracle-step.is-active {
  display: block;
}
.oracle-segment {
  display: flex;
  gap: 8px;
  background: var(--surface-oracle-segment);
  border-radius: 14px;
  padding: 6px;
  margin: 8px 0 14px;
}
.oracle-seg {
  flex: 1;
  border: none;
  border-radius: 12px;
  padding: 10px 12px;
  font-weight: 700;
  background: transparent;
  cursor: pointer;
  transition: all 0.2s ease;
}
.oracle-seg.is-active {
  background: var(--surface-oracle-seg-active);
  box-shadow: var(--surface-oracle-seg-active-shadow);
}
.oracle-section-title {
  font-weight: 700;
  font-size: 13px;
  margin-bottom: 10px;
  color: var(--surface-oracle-section-title);
}
.oracle-section {
  margin-top: 12px;
}
.oracle-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.oracle-chip {
  border: 1px solid var(--surface-oracle-chip-border);
  background: var(--surface-oracle-chip);
  border-radius: 14px;
  padding: 12px;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
}
.oracle-chip:hover {
  transform: translateY(-2px);
  box-shadow: var(--surface-oracle-chip-shadow-hover);
}
.oracle-chip:active {
  transform: scale(0.98);
}
.oracle-chip.is-disabled {
  opacity: 0.6;
  cursor: not-allowed;
  box-shadow: none;
}
.oracle-step--loading .oracle-loading,
.oracle-step--result .oracle-preview {
  transition: opacity 0.3s ease;
}
.oracle-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 22px 10px;
}
.spinner {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 3px solid rgba(0, 0, 0, 0.12);
  border-top-color: rgba(0, 0, 0, 0.55);
  animation: spin 1s linear infinite;
  margin-bottom: 12px;
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
.oracle-loading-text {
  font-weight: 800;
}
.oracle-loading-sub {
  font-size: 12px;
  color: rgba(0, 0, 0, 0.55);
  margin-top: 6px;
  text-align: center;
}
.oracle-loading-slot {
  margin-top: 8px;
  font-weight: 700;
  color: var(--primary-blue);
}
.oracle-result-title {
  font-weight: 800;
  font-size: 16px;
  margin-bottom: 10px;
}
.oracle-picked {
  font-weight: 800;
  font-size: 0.9rem;
  line-height: 1.25;
  color: rgba(255, 255, 255, 0.92);
  opacity: 0.9;
  margin-top: -2px;
  margin-bottom: 8px;
  padding: 10px 12px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.22);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  text-align: left;
}
.oracle-note {
  border: 1px solid var(--surface-oracle-note-border);
  border-radius: 14px;
  padding: 12px;
  background: var(--surface-oracle-note-bg);
  color: var(--surface-oracle-note-text);
  line-height: 1.35;
  margin-bottom: 12px;
}
.oracle-actions {
  display: flex;
  gap: 10px;
}
@media (max-width: 520px) {
  .oracle-grid {
    grid-template-columns: 1fr;
  }
}
.btn-secondary,
.btn-primary {
  border: none;
  border-radius: 14px;
  padding: 12px;
  font-weight: 800;
  flex: 1;
  cursor: pointer;
}
.btn-secondary {
  background: var(--surface-btn-secondary-bg);
  color: var(--surface-btn-secondary-color);
}
.btn-primary {
  background: var(--surface-btn-primary-bg);
  color: var(--surface-btn-primary-color);
}
.oracle-actions .btn-secondary:active,
.oracle-actions .btn-primary:active {
  transform: translateY(1px);
}
.quiz-level-badge.alert {
  background: #ff3d00;
  color: #fff;
}
.text-inline-btn {
  background: none;
  border: none;
  color: var(--surface-inline-btn-color);
  font-weight: 600;
  cursor: pointer;
}
#memory-phase-1 {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1;
  min-height: 0;
}
#memory-phase-2 {
  display: none;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding-bottom: 12px;
}
.memory-panel .game-body {
  display: flex;
  flex-direction: column;
}
.memory-panel .memory-timer {
  position: relative;
  width: 100%;
  height: 4px;
  background: rgba(0, 0, 0, 0.1);
  border-radius: 999px;
  overflow: hidden;
  margin-bottom: 20px;
}
.memory-panel .memory-timer-fill {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, #00a5b4, #1ec5d4);
  width: 100%;
  height: 100%;
  transition: width 0.3s ease;
}
.memory-panel .memory-seconds {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.85rem;
  color: #fff;
  font-weight: 700;
  letter-spacing: 0.8px;
}
.memory-progress-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 0.85rem;
  margin-left: 12px;
  color: #333;
}
.memory-progress-info span {
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.15em;
}
.memory-phase-title {
  font-weight: 700;
  margin-bottom: 12px;
}
.ticket-items {
  width: 100%;
  max-height: 300px;
  overflow-y: auto;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 14px;
  padding: 12px;
  box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.05);
}
.ticket-item {
  padding: 7px 4px;
  font-size: 0.95rem;
  display: flex;
  gap: 10px;
  align-items: flex-start;
  border-radius: 12px;
}
.ticket-item + .ticket-item {
  border-top: 1px dashed rgba(0, 0, 0, 0.08);
}
.ticket-course {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: rgba(0, 0, 0, 0.05);
  border: 1px solid rgba(0, 0, 0, 0.08);
  color: rgba(8, 18, 34, 0.72);
  line-height: 1;
  white-space: nowrap;
}
.ticket-name {
  flex: 1 1 auto;
  min-width: 0;
  font-weight: 800;
  color: rgba(8, 18, 34, 0.9);
  line-height: 1.25;
}
.ticket-item[data-course="salad"] .ticket-course {
  background: rgba(46, 204, 113, 0.1);
  border-color: rgba(46, 204, 113, 0.18);
  color: rgba(0, 110, 60, 0.9);
}
.ticket-item[data-course="soup"] .ticket-course {
  background: rgba(255, 206, 84, 0.14);
  border-color: rgba(255, 206, 84, 0.22);
  color: rgba(140, 85, 0, 0.95);
}
.ticket-item[data-course="main"] .ticket-course {
  background: rgba(0, 165, 180, 0.1);
  border-color: rgba(0, 165, 180, 0.18);
  color: rgba(0, 98, 108, 0.95);
}
.ticket-item[data-course="dessert"] .ticket-course {
  background: rgba(127, 90, 255, 0.1);
  border-color: rgba(127, 90, 255, 0.18);
  color: rgba(72, 42, 160, 0.95);
}

.memory-memorize-actions {
  width: 100%;
  margin-top: 12px;
  display: flex;
  justify-content: center;
}
.memory-options-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 10px;
  margin-bottom: 16px;
}
.memory-option {
  border-radius: 14px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  padding: 10px 10px;
  background: #fff;
  text-align: left;
  cursor: pointer;
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
  font-weight: 750;
  font-size: 0.9rem;
  line-height: 1.15;
  min-height: 52px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.memory-option-title {
  font-weight: 850;
  line-height: 1.18;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.memory-option-meta {
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(0, 0, 0, 0.55);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  line-height: 1;
}
.memory-option:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}
.memory-option.selected {
  border-color: #00a5b4;
  background: rgba(0, 165, 180, 0.08);
}
.memory-option.selected .memory-option-meta {
  color: rgba(0, 98, 108, 0.92);
}
.memory-option[data-course="salad"] .memory-option-meta {
  color: rgba(0, 110, 60, 0.72);
}
.memory-option[data-course="soup"] .memory-option-meta {
  color: rgba(140, 85, 0, 0.78);
}
.memory-option[data-course="main"] .memory-option-meta {
  color: rgba(0, 98, 108, 0.8);
}
.memory-option[data-course="dessert"] .memory-option-meta {
  color: rgba(72, 42, 160, 0.78);
}
.memory-actions {
  margin-top: 10px;
}
@media (max-width: 420px) {
  .memory-options-grid {
    grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
    gap: 8px;
    margin-bottom: 12px;
  }
  .memory-option {
    padding: 9px 9px;
    font-size: 0.88rem;
  }
  .ticket-items {
    max-height: 42vh;
  }
}
.memory-instruction {
  margin-top: 20px;
  color: #666;
}
.floating-auth-action {
  position: fixed;
  bottom: 90px;
  left: 0;
  width: 100%;
  padding: 0 20px;
  z-index: 100;
  pointer-events: none;
}
.floating-auth-action .auth-btn {
  pointer-events: auto;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3);
}
#quiz-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.card {
  background: var(--surface-card);
  border: 1px solid var(--surface-card-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--surface-card-shadow);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  position: relative;
  transition:
    transform 240ms ease,
    box-shadow 240ms ease,
    border-color 240ms ease,
    background 240ms ease;
  will-change: transform;
}
@media (hover: hover) and (pointer: fine) {
  .card:hover {
    transform: translateY(-3px);
    border-color: var(--surface-card-border-hover);
    box-shadow: var(--surface-card-shadow-hover);
  }
}
.card:active {
  transform: translateY(0) scale(0.98);
}
.card:focus-visible {
  outline: 3px solid var(--focus-ring-soft);
  outline-offset: 4px;
}

.card-img-container {
  position: relative;
  padding-top: 82%;
  background: var(--surface-card-image);
  overflow: hidden;
}
@supports (aspect-ratio: 1 / 1) {
  .card-img-container {
    padding-top: 0;
    aspect-ratio: 4 / 3;
  }
}
.card-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition:
    opacity 0.35s ease,
    transform 0.5s ease;
  opacity: 0;
  transform: scale(1.02);
}
.card-img.is-loaded {
  opacity: 1;
  transform: scale(1);
}
@media (hover: hover) and (pointer: fine) {
  .card:hover .card-img {
    transform: scale(1.04);
  }
}

.card-content {
  padding: 16px 16px 14px;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  gap: 7px;
  letter-spacing: 0;
}
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
}
.card-title {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 1.04rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: rgba(8, 18, 34, 0.92);
  line-height: 1.25;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  overflow-wrap: anywhere;
  hyphens: auto;
}
.card-price {
  flex: 0 0 auto;
  min-width: 64px;
  text-align: right;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: rgba(8, 18, 34, 0.72);
  white-space: nowrap;
  background: none;
  border: none;
  padding: 0;
  border-radius: 0;
  box-shadow: none;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}
@media (max-width: 380px) {
  .card-price {
    font-size: 0.66rem;
  }
}
.card-price.card-price--multi {
  padding: 0;
  border-radius: 0;
  background: none;
  border: none;
  box-shadow: none;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  white-space: normal;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.card-price-lines {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
}
.card-price-value {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: rgba(8, 18, 34, 0.84);
  line-height: 1.1;
  white-space: nowrap;
}
@media (max-width: 380px) {
  .card-price-value {
    font-size: 0.64rem;
  }
}
.card-subtitle {
  font-family: "PT Serif", serif;
  font-style: normal;
  font-weight: 500;
  color: rgba(8, 18, 34, 0.5);
  font-size: 0.84rem;
  margin: 0;
  padding-top: 6px;
}
.card-subtitle::before {
  content: "";
  display: block;
  width: 26px;
  height: 1px;
  margin-bottom: 6px;
  background: linear-gradient(
    90deg,
    rgba(60, 85, 150, 0.28),
    rgba(60, 85, 150, 0)
  );
}
.card-subtitle:empty {
  display: none;
}
.card-ingredients {
  font-size: 0.78rem;
  color: rgba(8, 18, 34, 0.68);
  line-height: 1.45;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  overflow-wrap: anywhere;
  hyphens: auto;
}
@media (min-width: 720px) {
  .card-ingredients {
    -webkit-line-clamp: 3;
  }
}
.card-allergens {
  font-family: "Montserrat", sans-serif;
  font-size: 0.74rem;
  color: rgba(230, 81, 0, 0.95);
  font-weight: 600;
  margin-top: auto;
  padding-top: 6px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  letter-spacing: 0.01em;
  background: rgba(255, 206, 84, 0.14);
  border: 1px solid rgba(255, 138, 0, 0.18);
  border-radius: 14px;
  padding: 8px 10px;
  line-height: 1.2;
}

.card-portion-badge {
  position: absolute;
  bottom: 10px;
  right: 10px;
  background: rgba(2, 3, 10, 0.48);
  color: rgba(255, 255, 255, 0.92);
  font-size: 0.68rem;
  font-weight: 850;
  letter-spacing: 0.01em;
  text-transform: none;
  padding: 6px 9px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(10px);
  z-index: 4;
}

@media (prefers-color-scheme: dark) {
  .card-title {
    color: rgba(255, 255, 255, 0.92);
  }
  .card-subtitle {
    color: rgba(219, 232, 255, 0.62);
  }
  .card-ingredients {
    color: rgba(219, 232, 255, 0.78);
  }
  .card-price {
    color: rgba(255, 255, 255, 0.92);
    background: none;
    border: none;
    box-shadow: none;
  }
  .card-price.card-price--multi {
    background: none;
    border: none;
    box-shadow: none;
  }
  .card-price-value {
    color: rgba(255, 255, 255, 0.92);
  }
  .card-allergens {
    color: rgba(255, 206, 84, 0.92);
    background: rgba(255, 206, 84, 0.1);
    border: 1px solid rgba(255, 206, 84, 0.16);
  }
}
body[data-theme="dark"] .card-price-value {
  color: rgba(255, 255, 255, 0.92);
}
body[data-theme="dark"] .card-allergens {
  color: rgba(255, 206, 84, 0.92);
  background: rgba(255, 206, 84, 0.1);
  border: 1px solid rgba(255, 206, 84, 0.16);
}
.img-skeleton {
  position: absolute;
  inset: 0;
  border-radius: 0;
  background: linear-gradient(
    90deg,
    var(--skeleton-a),
    var(--skeleton-b),
    var(--skeleton-a)
  );
  background-size: 220% 100%;
  animation: skeletonWave 1.4s ease infinite;
}
@keyframes skeletonWave {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .img-skeleton {
    animation: none;
  }
}
.card-img.img-error {
  object-fit: contain;
  background: #0f1320;
  filter: grayscale(0.2);
}
/* === ИСПРАВЛЕННЫЕ СТИЛИ ДЛЯ КНОПКИ ИЗБРАННОГО === */
.favorite-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 50%;
  width: 34px;
  height: 34px;
  border: none;
  cursor: pointer;
  font-size: 18px;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 5;
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  color: #aaa; /* Серый цвет по умолчанию */
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.favorite-btn:hover {
  color: #ff6b6b; /* Розоватый при наведении */
  transform: scale(1.1);
  background: rgba(255, 255, 255, 0.95);
}

@media (prefers-color-scheme: dark) {
  .favorite-btn {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.7);
    box-shadow: 0 18px 55px rgba(0, 0, 0, 0.42);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }
  .favorite-btn:hover {
    background: rgba(255, 255, 255, 0.14);
    color: rgba(255, 107, 107, 0.92);
  }
}

body[data-theme="dark"] .favorite-btn {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.7);
  box-shadow: 0 18px 55px rgba(0, 0, 0, 0.42);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
body[data-theme="dark"] .favorite-btn:hover {
  background: rgba(255, 255, 255, 0.14);
  color: rgba(255, 107, 107, 0.92);
}

/* КНОПКА В ИЗБРАННОМ - КРАСНАЯ */
.favorite-btn.active {
  color: #ff3d00 !important; /* Ярко-красный */
  text-shadow: 0 0 8px rgba(255, 61, 0, 0.4);
  animation: like-bounce 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* Анимация при добавлении в избранное */
@keyframes like-bounce {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.4);
  }
  100% {
    transform: scale(1.1);
  }
}

/* Эффект пульсации для активного состояния */
.favorite-btn.active::after {
  content: "";
  position: absolute;
  top: -5px;
  left: -5px;
  right: -5px;
  bottom: -5px;
  border-radius: 50%;
  border: 2px solid rgba(255, 61, 0, 0.3);
  animation: pulse-ring 1.5s infinite;
}

@keyframes pulse-ring {
  0% {
    transform: scale(0.8);
    opacity: 1;
  }
  100% {
    transform: scale(1.4);
    opacity: 0;
  }
}
/* Subtle premium sheen on cards */
.card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    120deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0) 38%,
    rgba(255, 255, 255, 0.18) 48%,
    rgba(255, 255, 255, 0.06) 54%,
    rgba(255, 255, 255, 0) 100%
  );
  opacity: 0;
  transform: translateX(-110%);
  transition:
    transform 650ms ease,
    opacity 180ms ease;
  z-index: 2;
  pointer-events: none;
}

@media (hover: hover) and (pointer: fine) {
  .card:hover::before {
    opacity: 1;
    transform: translateX(110%);
  }
}
.menu-grid.facts-grid {
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
}
@media (min-width: 980px) {
  .menu-grid.facts-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.facts-hero {
  grid-column: 1 / -1;
  background: linear-gradient(
    145deg,
    rgba(0, 210, 255, 0.16),
    rgba(127, 90, 255, 0.1),
    rgba(255, 206, 84, 0.08)
  );
  border-radius: 28px;
  border: 1px solid rgba(8, 18, 34, 0.08);
  box-shadow: 0 22px 55px rgba(15, 23, 42, 0.1);
  padding: 18px 18px 16px;
  position: relative;
  overflow: hidden;
}
.facts-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 10% 0%, rgba(0, 210, 255, 0.25), transparent 40%),
    radial-gradient(
      circle at 100% 20%,
      rgba(127, 90, 255, 0.22),
      transparent 45%
    ),
    radial-gradient(
      circle at 60% 120%,
      rgba(255, 206, 84, 0.18),
      transparent 55%
    );
  opacity: 0.85;
  pointer-events: none;
}
.facts-hero > * {
  position: relative;
  z-index: 1;
}
.facts-hero-kicker {
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 900;
  color: rgba(8, 18, 34, 0.68);
  margin-bottom: 8px;
}
.facts-hero-title {
  font-size: 1.3rem;
  font-weight: 900;
  letter-spacing: -0.02em;
  color: rgba(8, 18, 34, 0.92);
  margin-bottom: 8px;
}
.facts-hero-sub {
  color: rgba(0, 0, 0, 0.62);
  font-size: 0.95rem;
  line-height: 1.45;
  margin-bottom: 14px;
}
.facts-hero-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
}
.facts-hero-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.facts-hero-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(8, 18, 34, 0.1);
  font-size: 0.78rem;
  font-weight: 800;
  color: rgba(8, 18, 34, 0.82);
}
.facts-hero-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.facts-hero-btn {
  border: 1px solid rgba(8, 18, 34, 0.12);
  background: rgba(255, 255, 255, 0.7);
  border-radius: 16px;
  padding: 10px 12px;
  font-weight: 900;
  cursor: pointer;
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    background 0.18s ease;
  color: rgba(8, 18, 34, 0.86);
  white-space: nowrap;
}
.facts-hero-btn.primary {
  border: none;
  background: linear-gradient(120deg, #00d2ff, #7f5aff);
  color: #0b1021;
  box-shadow: 0 16px 36px rgba(0, 210, 255, 0.22);
}
.facts-hero-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 16px 34px rgba(15, 23, 42, 0.12);
}
.facts-hero-btn:active {
  transform: translateY(0) scale(0.98);
}

.fact-card-large {
  appearance: none;
  border: 1px solid rgba(8, 18, 34, 0.08);
  background: linear-gradient(
    150deg,
    rgba(255, 255, 255, 0.94),
    rgba(245, 248, 252, 0.92)
  );
  border-radius: 28px;
  padding: 18px;
  box-shadow: 0 18px 45px rgba(15, 23, 42, 0.1);
  cursor: pointer;
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    border-color 0.18s ease;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  min-height: 170px;
  background-size: cover;
  background-position: center;
  text-align: left;
  width: 100%;
  opacity: 0;
  transform: translateY(14px);
}
.fact-card-large:focus-visible {
  outline: 3px solid rgba(0, 210, 255, 0.32);
  outline-offset: 3px;
}
.fact-card-large.scroll-visible {
  opacity: 1;
  transform: translateY(0);
}
.fact-card-large:hover {
  transform: translateY(-2px);
  box-shadow: 0 22px 55px rgba(15, 23, 42, 0.14);
  border-color: rgba(0, 165, 180, 0.24);
}
.fact-card-large:active {
  transform: translateY(0) scale(0.99);
}
.fact-card-large.has-image {
  color: white;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.75);
  border-color: rgba(255, 255, 255, 0.18);
}
.fact-card-large.has-image::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to right,
    rgba(0, 0, 0, 0.78),
    rgba(0, 0, 0, 0.35)
  );
  z-index: 1;
}
.fact-content-wrapper {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}
.fact-badge {
  align-self: flex-start;
  background: linear-gradient(
    135deg,
    rgba(0, 165, 180, 0.95),
    rgba(127, 90, 255, 0.95)
  );
  color: white;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 900;
  margin-bottom: 12px;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  box-shadow: 0 12px 28px rgba(0, 165, 180, 0.18);
  text-shadow: none;
}
.fact-title {
  font-family: "PT Serif", serif;
  font-size: 1.3rem;
  font-weight: 800;
  color: rgba(8, 18, 34, 0.92);
  margin-bottom: 10px;
  line-height: 1.2;
  letter-spacing: -0.01em;
}
.fact-card-large.has-image .fact-title {
  color: #fff;
}
.fact-preview {
  font-size: 0.98rem;
  line-height: 1.55;
  color: rgba(0, 0, 0, 0.64);
  font-weight: 500;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.fact-card-large.has-image .fact-preview {
  color: rgba(255, 255, 255, 0.86);
}
.fact-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 14px;
  color: rgba(0, 0, 0, 0.55);
  font-weight: 800;
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.fact-card-large.has-image .fact-footer {
  color: rgba(255, 255, 255, 0.8);
}
.fact-open {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.fact-open::after {
  content: "›";
  font-size: 18px;
  line-height: 1;
  opacity: 0.85;
}

@media (prefers-color-scheme: dark) {
  .facts-hero {
    background: linear-gradient(
      160deg,
      rgba(255, 255, 255, 0.08),
      rgba(255, 255, 255, 0.04)
    );
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 28px 80px rgba(0, 0, 0, 0.45);
  }
  .facts-hero-kicker {
    color: rgba(255, 255, 255, 0.62);
  }
  .facts-hero-title {
    color: rgba(255, 255, 255, 0.92);
  }
  .facts-hero-sub {
    color: rgba(219, 232, 255, 0.78);
  }
  .facts-hero-pill {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.86);
  }
  .facts-hero-btn {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.14);
    color: rgba(255, 255, 255, 0.9);
  }
  .fact-card-large {
    background: linear-gradient(
      160deg,
      rgba(255, 255, 255, 0.08),
      rgba(255, 255, 255, 0.04)
    );
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.4);
  }
  .fact-title {
    color: rgba(255, 255, 255, 0.92);
  }
  .fact-preview {
    color: rgba(219, 232, 255, 0.78);
  }
  .fact-footer {
    color: rgba(255, 255, 255, 0.62);
  }
}

body[data-theme="dark"] .facts-hero {
  background: linear-gradient(
    160deg,
    rgba(255, 255, 255, 0.08),
    rgba(255, 255, 255, 0.04)
  );
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.45);
}
body[data-theme="dark"] .facts-hero-kicker {
  color: rgba(255, 255, 255, 0.62);
}
body[data-theme="dark"] .facts-hero-title {
  color: rgba(255, 255, 255, 0.92);
}
body[data-theme="dark"] .facts-hero-sub {
  color: rgba(219, 232, 255, 0.78);
}
body[data-theme="dark"] .facts-hero-pill {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.86);
}
body[data-theme="dark"] .facts-hero-btn {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: rgba(255, 255, 255, 0.9);
}
body[data-theme="dark"] .fact-card-large {
  background: linear-gradient(
    160deg,
    rgba(255, 255, 255, 0.08),
    rgba(255, 255, 255, 0.04)
  );
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.4);
}
body[data-theme="dark"] .fact-title {
  color: rgba(255, 255, 255, 0.92);
}
body[data-theme="dark"] .fact-preview {
  color: rgba(219, 232, 255, 0.78);
}
body[data-theme="dark"] .fact-footer {
  color: rgba(255, 255, 255, 0.62);
}

/* ФЛЕШ-КАРТОЧКИ */
#flashcards-container {
  display: none;
  height: auto;
  width: 100%;
  flex-direction: column;
  justify-content: flex-start;
}
.flashcard-scene {
  width: 100%;
  height: 40vh;
  min-height: 250px;
  max-height: 400px;
  perspective: 1000px;
  margin-bottom: 25px;
  cursor: pointer;
  margin-top: 10px;
}
.flashcard {
  width: 100%;
  height: 100%;
  position: relative;
  transition: transform 0.6s;
  transform-style: preserve-3d;
  box-shadow: var(--card-shadow);
  border-radius: 20px;
}
.flashcard.is-flipped {
  transform: rotateY(180deg);
}
.flashcard-face {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 30px;
  text-align: center;
  background: var(--white);
}
.flashcard-front {
  background: linear-gradient(135deg, #fff, #f8f9fa);
  color: var(--primary-dark);
}
.flashcard-back {
  background: var(--primary-dark);
  color: white;
  transform: rotateY(180deg);
}
.fc-title {
  font-size: 2rem;
  font-weight: 800;
  margin-bottom: 10px;
}
.fc-hint {
  font-size: 0.9rem;
  color: #999;
  margin-top: 20px;
}
.fc-content {
  font-size: 1.1rem;
  line-height: 1.6;
}
.fc-controls {
  display: flex;
  gap: 15px;
  justify-content: center;
  margin-top: 20px;
}
.fc-btn {
  flex: 1;
  padding: 15px;
  border: none;
  border-radius: 12px;
  font-weight: 700;
  font-size: 1rem;
  cursor: pointer;
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12);
  position: relative;
}
.fc-btn-know {
  background: var(--correct-green);
  color: white;
}
.fc-btn-forgot {
  background: var(--wrong-red);
  color: white;
}
.fc-btn:hover,
.fc-btn:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 16px 32px rgba(0, 0, 0, 0.16);
}
.fc-btn:active {
  transform: scale(0.98);
}
.flashcard-progress {
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(10, 10, 10, 0.65);
  margin-bottom: 6px;
  text-align: center;
}
.flashcard-stack {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-bottom: 10px;
  pointer-events: none;
}
.flashcard-stack span {
  width: 42px;
  height: 6px;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0.05));
  opacity: 0.8;
  animation: stackPulse 1.8s ease-in-out infinite;
  transform-origin: center;
}
.flashcard-stack span:nth-child(2) {
  animation-delay: 0.2s;
  width: 48px;
}
.flashcard-stack span:nth-child(3) {
  animation-delay: 0.4s;
  width: 54px;
}
.flashcard-stack.is-active span {
  background: linear-gradient(
    135deg,
    rgba(20, 100, 200, 0.7),
    rgba(50, 190, 255, 0.4)
  );
  opacity: 1;
}
@keyframes stackPulse {
  0%,
  100% {
    transform: translateY(0);
    opacity: 0.7;
  }
  50% {
    transform: translateY(-3px);
    opacity: 0.95;
  }
}

/* РАНДОМАЙЗЕР */
#randomizer-container {
  text-align: center;
  padding: 40px 20px;
  min-height: 70vh;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
  background: radial-gradient(
    circle at top,
    rgba(255, 255, 255, 0.15),
    rgba(10, 10, 20, 0.7)
  );
  border-radius: 28px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 30px 60px rgba(2, 3, 12, 0.6);
  backdrop-filter: blur(18px);
}
.random-icon {
  font-size: 5rem;
  margin-bottom: 20px;
  animation: float 3s infinite ease-in-out;
}
.random-title {
  font-size: 1.8rem;
  font-weight: 800;
  color: var(--primary-dark);
  margin-bottom: 10px;
}
.random-desc {
  color: #666;
  margin-bottom: 40px;
}
.spin-btn {
  background: linear-gradient(45deg, #ff512f, #dd2476);
  color: white;
  border: none;
  padding: 20px 40px;
  border-radius: 50px;
  font-size: 1.2rem;
  font-weight: 700;
  box-shadow: 0 10px 30px rgba(221, 36, 118, 0.4);
  cursor: pointer;
  transition: transform 0.2s;
}
.spin-btn:active {
  transform: scale(0.95);
}
.random-loader {
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 26px;
  padding: 34px;
  border-radius: 30px;
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 25px 70px rgba(0, 0, 0, 0.28);
  max-width: 760px;
  margin: 0 auto;
}
.spinner-coin {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #4fa3ff, #005c99, #000);
  border: 4px solid var(--accent-yellow);
  box-shadow:
    0 0 30px var(--accent-yellow),
    inset 0 0 20px rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 50px;
  margin-bottom: 30px;
  animation: coinSpin 0.6s linear infinite;
  perspective: 1000px;
  transform-style: preserve-3d;
  position: relative;
}
.spinner-coin::after {
  content: "LUNA";
  position: absolute;
  font-size: 12px;
  font-weight: 900;
  color: var(--accent-yellow);
  bottom: 15px;
  letter-spacing: 2px;
}
.searching-text {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--primary-dark);
  animation: pulseText 1s infinite;
}

@media (prefers-color-scheme: dark) {
  .flashcard-face {
    background: rgba(10, 12, 20, 0.92);
    border: 1px solid rgba(255, 255, 255, 0.12);
  }
  .flashcard-front {
    background: linear-gradient(
      135deg,
      rgba(20, 24, 40, 0.92),
      rgba(10, 12, 20, 0.92)
    );
    color: rgba(255, 255, 255, 0.92);
  }
  .flashcard-back {
    background:
      radial-gradient(
        circle at 18% 0%,
        rgba(0, 210, 255, 0.18),
        transparent 45%
      ),
      linear-gradient(135deg, rgba(127, 90, 255, 0.18), rgba(10, 12, 20, 0.92));
    color: rgba(255, 255, 255, 0.92);
  }
  .fc-hint {
    color: rgba(255, 255, 255, 0.62);
  }
  .flashcard-progress {
    color: rgba(255, 255, 255, 0.62);
  }
  .flashcard-stack span {
    background: linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.16),
      rgba(255, 255, 255, 0.06)
    );
    opacity: 0.85;
  }
  .random-title,
  .searching-text {
    color: rgba(255, 255, 255, 0.92);
  }
  .random-desc {
    color: rgba(219, 232, 255, 0.72);
  }
  .random-loader {
    background: linear-gradient(
      180deg,
      rgba(14, 18, 30, 0.94),
      rgba(10, 12, 20, 0.96)
    );
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 34px 100px rgba(0, 0, 0, 0.55);
  }
}
.oracle-shell {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 32px;
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
}
@media (max-width: 900px) {
  .oracle-shell {
    flex-direction: column;
    align-items: center;
  }
}
.oracle-card-wrapper {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.oracle-card {
  background: var(--surface-oracle-card);
  border-radius: 26px;
  padding: 30px;
  box-shadow: var(--surface-oracle-card-shadow);
  border: 1px solid var(--surface-oracle-card-border);
  backdrop-filter: blur(24px);
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.oracle-orb {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.2);
  position: relative;
  box-shadow:
    0 0 30px rgba(255, 255, 255, 0.35),
    inset 0 0 40px rgba(255, 255, 255, 0.2);
  background: radial-gradient(
    circle at 30% 30%,
    var(--orb-core, #10b981),
    transparent 70%
  );
  animation:
    orbPulse var(--orb-pulse, 4s) ease-in-out infinite,
    orbRotate var(--orb-rotate, 18s) linear infinite;
  transition:
    box-shadow 220ms ease,
    border-color 220ms ease,
    filter 220ms ease;
}
.oracle-orb.is-shifting {
  box-shadow:
    0 0 56px rgba(255, 255, 255, 0.48),
    inset 0 0 60px rgba(255, 255, 255, 0.24);
  filter: saturate(1.04);
}
.oracle-orb-core {
  position: absolute;
  inset: 16px;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(255, 255, 255, 0.7),
    rgba(255, 255, 255, 0)
  );
  filter: blur(8px);
}
.oracle-orb-halo,
.oracle-orb-wave {
  position: absolute;
  inset: 0;
  border-radius: 50%;
}
.oracle-orb-halo {
  border: 1px solid var(--orb-glow, rgba(255, 255, 255, 0.15));
  animation: haloGlow var(--orb-halo, 6s) alternate infinite;
  box-shadow: 0 0 30px var(--orb-glow, rgba(255, 255, 255, 0.15));
}
.oracle-orb-wave {
  border: 2px dashed rgba(255, 255, 255, 0.15);
  animation: waveSpin var(--orb-wave, 8s) linear infinite;
  box-shadow: inset 0 0 30px var(--orb-glow, rgba(255, 255, 255, 0.15));
}
#oracle-orb[data-orb-mode="party"] .oracle-orb-wave {
  border-style: dotted;
  border-width: 2px;
  opacity: 0.9;
}
#oracle-orb[data-orb-mode="relax"] .oracle-orb-wave {
  border-style: dashed;
  opacity: 0.55;
}
#oracle-orb[data-orb-mode="driver"] .oracle-orb-wave {
  opacity: 0.7;
}
#oracle-orb[data-orb-mode="chaos"] .oracle-orb-wave {
  border-style: double;
  border-width: 3px;
  opacity: 0.85;
}
@keyframes orbPulse {
  0%,
  100% {
    transform: scale(1);
    box-shadow:
      0 0 30px rgba(255, 255, 255, 0.25),
      inset 0 0 40px rgba(255, 255, 255, 0.18);
  }
  50% {
    transform: scale(1.05);
    box-shadow:
      0 0 50px rgba(255, 255, 255, 0.45),
      inset 0 0 50px rgba(255, 255, 255, 0.25);
  }
}
@keyframes orbRotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
@keyframes haloGlow {
  from {
    opacity: 0.3;
  }
  to {
    opacity: 0.8;
  }
}
@keyframes waveSpin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
.oracle-stage-line {
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}
.stage-pill {
  padding: 6px 16px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  background: rgba(255, 255, 255, 0.05);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition:
    background 0.3s,
    transform 0.3s,
    border 0.3s;
}
.stage-pill.is-active {
  background: linear-gradient(
    120deg,
    rgba(255, 255, 255, 0.3),
    rgba(255, 255, 255, 0.05)
  );
  border-color: rgba(255, 255, 255, 0.9);
  transform: translateY(-2px);
  box-shadow:
    0 0 20px rgba(255, 255, 255, 0.55),
    0 0 35px rgba(255, 255, 255, 0.25);
  animation: stageGlow 2.6s ease-in-out infinite;
}
@keyframes stageGlow {
  0%,
  100% {
    box-shadow:
      0 0 10px rgba(255, 255, 255, 0.2),
      0 0 20px rgba(255, 255, 255, 0.1);
  }
  50% {
    box-shadow:
      0 0 25px rgba(255, 255, 255, 0.6),
      0 0 40px rgba(255, 255, 255, 0.3);
  }
}
.oracle-status-panel {
  background: var(--surface-oracle-status-bg);
  border-radius: 18px;
  padding: 16px 20px;
  border: 1px solid var(--surface-oracle-status-border);
  box-shadow: var(--surface-oracle-status-shadow);
}
.oracle-status-label {
  font-size: 0.75rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
  margin-bottom: 4px;
}
.oracle-status-detail {
  font-size: 1rem;
  color: #fff;
  font-weight: 600;
  line-height: 1.5;
}
.oracle-status-hint {
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.85);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin-top: 8px;
  min-height: 1.2rem;
  opacity: 0.85;
}
@keyframes coinSpin {
  0% {
    transform: rotateY(0deg);
  }
  100% {
    transform: rotateY(360deg);
  }
}
@keyframes float {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-20px);
  }
}
.oracle-preview {
  width: min(420px, 100%);
  margin-top: 30px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 18px;
  padding: 18px 20px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
  backdrop-filter: blur(12px);
}
.oracle-preview-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--primary-blue);
  text-transform: uppercase;
  letter-spacing: 0.3em;
  margin-bottom: 12px;
}
.oracle-flavor-line {
  margin-bottom: 12px;
}
.oracle-line-header {
  display: flex;
  justify-content: space-between;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: #f0f0f0;
  margin-bottom: 4px;
}
.oracle-bar {
  width: 100%;
  height: 6px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  overflow: hidden;
  position: relative;
}
.oracle-fill {
  height: 100%;
  width: 0%;
  border-radius: 4px;
  transition: width 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}
.oracle-note {
  margin-top: 15px;
  font-size: 0.8rem;
  color: var(--surface-oracle-note-muted);
  text-align: center;
}

/* ORACLE (premium overrides + animations) */
#oracle-game-panel .oracle-sub {
  color: rgba(219, 232, 255, 0.72);
}
#oracle-game-panel .oracle-name {
  color: rgba(255, 255, 255, 0.96);
}
#oracle-game-panel .oracle-section-title {
  color: rgba(255, 255, 255, 0.9);
  font-weight: 800;
}
#oracle-game-panel .oracle-section-title {
  margin-bottom: 8px;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
#oracle-game-panel .oracle-grid {
  gap: 12px;
}
#oracle-game-panel .oracle-segment {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 6px;
}
#oracle-game-panel .oracle-seg {
  background: transparent;
  border: 1px solid transparent;
  color: rgba(255, 255, 255, 0.78);
  transition:
    background 180ms ease,
    transform 180ms ease,
    border-color 180ms ease;
}
#oracle-game-panel .oracle-seg.is-active {
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.18);
  color: rgba(255, 255, 255, 0.96);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.18);
}
#oracle-game-panel .oracle-chip {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.92);
  box-shadow: 0 14px 35px rgba(0, 0, 0, 0.22);
  padding: 12px 12px;
  font-size: 0.95rem;
  line-height: 1.15;
  display: flex;
  align-items: center;
  gap: 10px;
  text-align: left;
  position: relative;
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
}
#oracle-game-panel .oracle-chip::before {
  content: "";
  position: absolute;
  inset: -1px;
  background: radial-gradient(
    circle at var(--ripple-x, 50%) var(--ripple-y, 50%),
    rgba(255, 255, 255, 0.32),
    rgba(255, 255, 255, 0) 58%
  );
  opacity: 0;
  transform: scale(0.7);
  pointer-events: none;
  z-index: 0;
}
#oracle-game-panel .oracle-chip.is-rippling::before {
  animation: oracleChipRipple 560ms ease-out;
}
#oracle-game-panel .oracle-chip::after {
  content: "";
  position: absolute;
  inset: -1px;
  background: radial-gradient(
    380px 140px at 20% -60px,
    rgba(255, 255, 255, 0.22),
    rgba(255, 255, 255, 0) 60%
  );
  opacity: 0.6;
  pointer-events: none;
  z-index: 0;
}
#oracle-game-panel .oracle-chip .oracle-chip-emoji {
  width: 34px;
  height: 34px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 14px 35px rgba(0, 0, 0, 0.18);
  flex: 0 0 34px;
  font-size: 1.05rem;
  position: relative;
  z-index: 1;
}
#oracle-game-panel .oracle-chip .oracle-chip-copy {
  display: grid;
  gap: 2px;
  min-width: 0;
  position: relative;
  z-index: 1;
}
#oracle-game-panel .oracle-chip .oracle-chip-text {
  font-weight: 850;
  letter-spacing: 0.01em;
  color: rgba(255, 255, 255, 0.94);
  line-height: 1.05;
}
#oracle-game-panel .oracle-chip .oracle-chip-sub {
  font-size: 0.78rem;
  font-weight: 650;
  color: rgba(219, 232, 255, 0.74);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#oracle-game-panel .oracle-chip.is-selected {
  border-color: rgba(255, 255, 255, 0.32);
  background: linear-gradient(
    160deg,
    rgba(255, 255, 255, 0.14),
    rgba(255, 255, 255, 0.06)
  );
  box-shadow:
    0 18px 50px rgba(0, 0, 0, 0.3),
    0 0 0 1px rgba(255, 255, 255, 0.12) inset;
}
#oracle-game-panel .oracle-chip.is-selected .oracle-chip-emoji {
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.18);
}
#oracle-game-panel .oracle-chip:focus-visible {
  outline: none;
  box-shadow:
    0 18px 50px rgba(0, 0, 0, 0.3),
    0 0 0 3px rgba(255, 255, 255, 0.18);
}
#oracle-game-panel .oracle-chip:hover {
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.28);
}
#oracle-game-panel .oracle-chip.is-disabled {
  opacity: 0.45;
  filter: grayscale(0.15);
}
#oracle-game-panel .oracle-chip.is-disabled::after {
  opacity: 0.25;
}
@keyframes oracleChipRipple {
  0% {
    opacity: 0;
    transform: scale(0.75);
  }
  25% {
    opacity: 0.22;
  }
  100% {
    opacity: 0;
    transform: scale(1.55);
  }
}

#oracle-game-panel .oracle-loading {
  padding: 26px 12px;
  gap: 10px;
}
#oracle-game-panel .oracle-loading-text {
  color: rgba(255, 255, 255, 0.92);
  letter-spacing: 0.02em;
  font-size: 0.98rem;
  font-weight: 850;
}
#oracle-game-panel .oracle-loading-sub {
  color: rgba(219, 232, 255, 0.76);
  font-size: 0.86rem;
}
#oracle-game-panel .oracle-stage-line {
  display: none;
}
#oracle-game-panel .oracle-status-panel {
  padding: 14px 18px;
  border-radius: 18px;
}
#oracle-game-panel .oracle-status-label {
  letter-spacing: 0.18em;
}
#oracle-game-panel .oracle-status-detail {
  font-weight: 700;
}
#oracle-game-panel .oracle-status-hint {
  letter-spacing: 0.02em;
  text-transform: none;
  color: rgba(219, 232, 255, 0.78);
}
#oracle-game-panel .oracle-note {
  margin-top: 14px;
  font-size: 0.85rem;
  color: rgba(219, 232, 255, 0.78);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 16px;
  padding: 12px 14px;
  text-align: left;
  line-height: 1.35;
}
#oracle-game-panel .oracle-last {
  width: 100%;
  margin-top: 14px;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.06);
  box-shadow: 0 18px 52px rgba(0, 0, 0, 0.28);
  padding: 12px;
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  text-align: left;
}
#oracle-game-panel .oracle-last-thumb {
  width: 52px;
  height: 52px;
  flex: 0 0 52px;
  border-radius: 14px;
  background: radial-gradient(
    circle at 30% 30%,
    rgba(255, 255, 255, 0.12),
    rgba(255, 255, 255, 0) 60%
  );
  background-size: cover;
  background-position: center;
  border: 1px solid rgba(255, 255, 255, 0.14);
}
#oracle-game-panel .oracle-last-text {
  display: grid;
  gap: 2px;
  min-width: 0;
}
#oracle-game-panel .oracle-last-label {
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(219, 232, 255, 0.68);
  font-weight: 800;
}
#oracle-game-panel .oracle-last-name {
  font-weight: 850;
  color: rgba(255, 255, 255, 0.94);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#oracle-game-panel .oracle-last-note {
  font-size: 0.82rem;
  color: rgba(219, 232, 255, 0.76);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#oracle-game-panel .oracle-step--loading .oracle-preview {
  margin-top: 14px;
}

#oracle-game-panel .oracle-loading-card {
  width: min(460px, 100%);
  border-radius: 22px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.06);
  box-shadow: 0 18px 52px rgba(0, 0, 0, 0.28);
  overflow: hidden;
  position: relative;
  margin-top: 14px;
  will-change: transform, opacity, filter;
}
#oracle-game-panel .oracle-loading-thumb {
  height: 148px;
  background: radial-gradient(
    circle at 30% 30%,
    rgba(255, 255, 255, 0.12),
    rgba(255, 255, 255, 0) 60%
  );
  background-size: cover;
  background-position: center;
  filter: saturate(1.05);
  transform: scale(1.02);
}
#oracle-game-panel .oracle-loading-card.is-has-image .oracle-loading-thumb {
  background-blend-mode: screen;
}
#oracle-game-panel .oracle-loading-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0) 18%,
    rgba(0, 0, 0, 0.46) 100%
  );
  pointer-events: none;
}
#oracle-game-panel .oracle-loading-name {
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 12px;
  color: rgba(255, 255, 255, 0.96);
  font-weight: 850;
  letter-spacing: 0.01em;
  text-align: left;
  text-shadow: 0 12px 30px rgba(0, 0, 0, 0.65);
}
#oracle-game-panel[data-oracle-step="loading"] .oracle-loading-card.is-swap {
  animation: oracleCardSwap 320ms cubic-bezier(0.22, 1, 0.36, 1);
}
#oracle-game-panel .spinner {
  border-color: rgba(255, 255, 255, 0.16);
  border-top-color: rgba(255, 255, 255, 0.85);
}
#oracle-game-panel .oracle-actions {
  display: flex;
  gap: 12px;
}
#oracle-game-panel .btn-secondary,
#oracle-game-panel .btn-primary {
  border-radius: 16px;
  padding: 12px 14px;
  font-weight: 850;
  letter-spacing: 0.01em;
  transition:
    transform 160ms ease,
    box-shadow 160ms ease,
    background 160ms ease,
    border-color 160ms ease;
}
#oracle-game-panel .btn-secondary {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: rgba(255, 255, 255, 0.92);
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.22);
}
#oracle-game-panel .btn-primary {
  background: linear-gradient(
    135deg,
    rgba(80, 160, 255, 0.26),
    rgba(127, 90, 255, 0.18)
  );
  border: 1px solid rgba(140, 190, 255, 0.26);
  color: rgba(255, 255, 255, 0.96);
  box-shadow:
    0 18px 48px rgba(0, 0, 0, 0.26),
    0 0 30px rgba(80, 160, 255, 0.1);
}
#oracle-game-panel .btn-secondary:hover,
#oracle-game-panel .btn-primary:hover {
  transform: translateY(-1px);
}
#oracle-game-panel .btn-secondary:active,
#oracle-game-panel .btn-primary:active {
  transform: translateY(0) scale(0.99);
}
#oracle-game-panel .btn-secondary:focus-visible,
#oracle-game-panel .btn-primary:focus-visible {
  outline: none;
  box-shadow:
    0 18px 48px rgba(0, 0, 0, 0.28),
    0 0 0 3px rgba(255, 255, 255, 0.18);
}
#oracle-game-panel .oracle-hint-badge {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: rgba(255, 255, 255, 0.9);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
#oracle-game-panel .oracle-hint-badge::after {
  opacity: 0.35;
}
#oracle-game-panel .oracle-loading-slot {
  width: min(460px, 100%);
  margin-top: 10px;
  padding: 12px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: linear-gradient(
    120deg,
    rgba(255, 255, 255, 0.12),
    rgba(255, 255, 255, 0.06),
    rgba(255, 255, 255, 0.12)
  );
  color: rgba(255, 255, 255, 0.92);
  position: relative;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.86rem;
  letter-spacing: 0.01em;
}
#oracle-game-panel[data-oracle-step="loading"] .oracle-loading-slot {
  background-size: 240% 100%;
  animation: oracleShimmer 1.6s ease-in-out infinite;
}
#oracle-game-panel[data-oracle-step="loading"] .oracle-loading-slot::before {
  content: "";
  position: absolute;
  inset: -40% -25%;
  background: radial-gradient(
    circle at 30% 30%,
    rgba(255, 255, 255, 0.18),
    rgba(255, 255, 255, 0) 60%
  );
  transform: translateX(-40%);
  animation: oracleScan 1.25s ease-in-out infinite;
  pointer-events: none;
}

#oracle-game-panel[data-oracle-step="loading"] .oracle-orb {
  box-shadow:
    0 0 58px rgba(255, 255, 255, 0.46),
    inset 0 0 64px rgba(255, 255, 255, 0.24);
}
#oracle-game-panel[data-oracle-step="loading"] #randomizer-container::after {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  background:
    radial-gradient(
      900px 320px at 50% -120px,
      rgba(255, 255, 255, 0.12),
      rgba(255, 255, 255, 0) 60%
    ),
    radial-gradient(
      600px 240px at 20% 20%,
      rgba(80, 160, 255, 0.16),
      rgba(255, 255, 255, 0) 60%
    ),
    radial-gradient(
      600px 240px at 80% 60%,
      rgba(127, 90, 255, 0.12),
      rgba(255, 255, 255, 0) 60%
    );
  opacity: 0;
  pointer-events: none;
  animation: oracleBackdropPulse 2.6s ease-in-out infinite;
}
#oracle-game-panel[data-oracle-step="result"] .oracle-orb {
  animation:
    orbPulse 4.8s ease-in-out infinite,
    orbRotate 16s linear infinite;
}
#oracle-game-panel[data-oracle-step="result"] .oracle-picked {
  animation: oraclePop 420ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
#oracle-game-panel .oracle-picked {
  cursor: pointer;
}
#oracle-game-panel .oracle-picked:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.18);
}
#oracle-game-panel[data-oracle-step="result"] .oracle-preview {
  animation: oracleFade 520ms ease-out both;
}
#oracle-game-panel[data-oracle-step="result"] .oracle-preview {
  cursor: pointer;
}
#oracle-game-panel .oracle-actions {
  display: none;
}

@keyframes oracleShimmer {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
@keyframes oracleScan {
  0% {
    transform: translateX(-45%);
    opacity: 0;
  }
  20% {
    opacity: 0.55;
  }
  55% {
    opacity: 0.45;
  }
  100% {
    transform: translateX(45%);
    opacity: 0;
  }
}
@keyframes oraclePop {
  from {
    transform: translateY(8px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}
@keyframes oracleBackdropPulse {
  0%,
  100% {
    opacity: 0.05;
    filter: blur(0px);
  }
  50% {
    opacity: 0.16;
    filter: blur(0.5px);
  }
}
@keyframes oracleFade {
  from {
    transform: translateY(10px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}
@keyframes oracleCardSwap {
  0% {
    transform: translateY(10px) scale(0.995);
    opacity: 0;
    filter: blur(2px) saturate(0.98);
  }
  40% {
    opacity: 0.95;
  }
  100% {
    transform: translateY(0) scale(1);
    opacity: 1;
    filter: blur(0px) saturate(1);
  }
}
body[data-theme="dark"] .card-title {
  color: rgba(255, 255, 255, 0.92);
}
body[data-theme="dark"] .card-subtitle {
  color: rgba(219, 232, 255, 0.62);
}
body[data-theme="dark"] .card-ingredients {
  color: rgba(219, 232, 255, 0.78);
}
body[data-theme="dark"] .card-price {
  color: rgba(255, 255, 255, 0.92);
  background: none;
  border: none;
  box-shadow: none;
}
@media (prefers-reduced-motion: reduce) {
  #oracle-game-panel[data-oracle-step="loading"] .oracle-loading-slot,
  #oracle-game-panel[data-oracle-step="loading"] .oracle-loading-slot::before,
  #oracle-game-panel[data-oracle-step="loading"] .oracle-loading-card.is-swap,
  #oracle-game-panel .oracle-orb,
  #oracle-game-panel .oracle-orb.is-shifting,
  #oracle-game-panel .spinner,
  #oracle-game-panel[data-oracle-step="result"] .oracle-picked,
  #oracle-game-panel[data-oracle-step="result"] .oracle-preview {
    animation: none !important;
  }
}
@media (max-width: 520px) {
  #randomizer-container {
    padding: 26px 14px;
    min-height: 62vh;
    border-radius: 24px;
  }
  #oracle-game-panel .oracle-card {
    padding: 22px;
    border-radius: 24px;
  }
  #oracle-game-panel .oracle-orb {
    width: 96px;
    height: 96px;
  }
  #oracle-game-panel .oracle-loading-thumb {
    height: 132px;
  }
  #oracle-game-panel .oracle-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
  #oracle-game-panel .oracle-chip {
    padding: 12px 10px;
    font-size: 0.92rem;
    gap: 9px;
  }
  #oracle-game-panel .oracle-chip .oracle-chip-emoji {
    width: 32px;
    height: 32px;
    border-radius: 13px;
    flex-basis: 32px;
  }
  #oracle-game-panel .oracle-chip .oracle-chip-sub {
    font-size: 0.76rem;
  }
  #oracle-game-panel .btn-secondary,
  #oracle-game-panel .btn-primary {
    padding: 12px 12px;
    font-size: 0.92rem;
  }
}

/* АЧИВКИ */
.achievements-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 12px;
  padding-top: 10px;
}
.achievement-card {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 16px;
  padding: 16px;
  text-align: center;
  opacity: 0.55;
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    opacity 0.18s ease,
    border-color 0.18s ease;
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.9);
}
.achievement-card.unlocked {
  opacity: 1;
  background: linear-gradient(
    160deg,
    rgba(255, 255, 255, 0.08),
    rgba(255, 255, 255, 0.03)
  );
  border-color: rgba(253, 185, 49, 0.38);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35);
}
.ach-icon {
  font-size: 2.5rem;
  margin-bottom: 10px;
  display: block;
}
.ach-title {
  font-weight: 800;
  font-size: 0.9rem;
  margin-bottom: 5px;
  color: rgba(255, 255, 255, 0.95);
}
.ach-desc {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.72);
  line-height: 1.35;
}
.ach-state {
  margin-top: 8px;
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(197, 219, 242, 0.86);
  font-weight: 800;
}
.achievement-card.unlocked .ach-state {
  color: rgba(255, 225, 150, 0.95);
}
.ach-progress-row {
  margin-top: 7px;
  display: flex;
  justify-content: center;
}
.ach-progress-text {
  font-size: 0.72rem;
  color: rgba(228, 239, 255, 0.86);
  font-weight: 700;
}
.ach-progress-bar {
  margin-top: 6px;
  height: 7px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.12);
  overflow: hidden;
}
.ach-progress-fill {
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(
    90deg,
    rgb(var(--profile-accent-rgb, 29 161 242) / 0.95),
    rgba(131, 234, 176, 0.92)
  );
  transition: width 0.28s ease;
}
.achievements-summary {
  margin-top: 14px;
}
.achievements-summary-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
}
.achievements-summary-title {
  font-weight: 900;
  color: rgba(255, 255, 255, 0.92);
  letter-spacing: 0.2px;
}
.achievements-summary-count {
  font-weight: 900;
  color: rgb(var(--profile-accent-rgb, 29 161 242) / 1);
}
.achievements-summary-bar {
  margin-top: 8px;
  height: 8px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 999px;
  overflow: hidden;
}
.achievements-summary-fill {
  height: 100%;
  background: linear-gradient(
    90deg,
    rgb(var(--profile-accent-rgb, 29 161 242) / 1),
    #7f5aff
  );
  border-radius: inherit;
  transition: width 0.35s ease;
}

/* СЕРТИФИКАТ */
#cert-canvas {
  display: none;
}
.cert-wrapper {
  text-align: center;
}
.cert-img {
  width: 100%;
  max-width: 100%;
  border-radius: 10px;
  border: 2px solid #d4af37;
  margin-top: 10px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}
.generate-cert-btn {
  width: 100%;
  padding: 12px;
  background: linear-gradient(45deg, #d4af37, #fdb931);
  border: none;
  color: #000;
  font-weight: 800;
  border-radius: 10px;
  cursor: pointer;
  margin-top: 20px;
  font-size: 0.9rem;
  box-shadow: 0 4px 10px rgba(212, 175, 55, 0.4);
}
.cert-status {
  margin-top: 10px;
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.82);
  opacity: 0.95;
}
#cert-download-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  filter: grayscale(0.2);
}

/* КВИЗ */
#quiz-container {
  display: none;
  padding: 20px 0;
  padding-bottom: 100px;
}
.learning-path-panel {
  border-radius: 24px;
  padding: 16px 16px 14px;
  margin-bottom: 16px;
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(8, 18, 34, 0.1);
  background:
    radial-gradient(
      180px 130px at 14% -12%,
      rgba(88, 204, 2, 0.26),
      transparent 65%
    ),
    radial-gradient(
      180px 130px at 88% -12%,
      rgba(0, 210, 255, 0.18),
      transparent 68%
    ),
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.95),
      rgba(244, 250, 240, 0.94)
    );
  box-shadow: 0 18px 44px rgba(15, 23, 42, 0.12);
}
.learning-path-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    145deg,
    rgba(255, 255, 255, 0.35),
    rgba(255, 255, 255, 0) 42%
  );
}
.learning-path-head {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}
.learning-path-kicker {
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(12, 48, 10, 0.72);
  font-weight: 900;
}
.learning-path-title {
  margin-top: 2px;
  font-size: 1.06rem;
  font-weight: 900;
  color: rgba(8, 18, 34, 0.94);
}
.learning-path-metrics {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}
.learning-path-chip {
  display: inline-flex;
  align-items: center;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 900;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: rgba(8, 18, 34, 0.78);
  border: 1px solid rgba(8, 18, 34, 0.12);
  background: rgba(255, 255, 255, 0.72);
}
.learning-path-sub {
  position: relative;
  z-index: 1;
  margin-top: 8px;
  font-size: 0.84rem;
  color: rgba(8, 18, 34, 0.66);
}
.learning-path-track {
  position: relative;
  z-index: 1;
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 2px 0 4px;
}
.learning-path-track::before {
  content: "";
  position: absolute;
  left: 32px;
  top: 4px;
  bottom: 8px;
  width: 8px;
  border-radius: 999px;
  background: linear-gradient(
    180deg,
    rgba(88, 204, 2, 0.2),
    rgba(0, 210, 255, 0.16)
  );
  filter: blur(0.2px);
  pointer-events: none;
}
.coach-hub {
  border-radius: 22px;
  padding: 14px;
  margin-bottom: 16px;
  border: 1px solid rgba(8, 18, 34, 0.1);
  background:
    radial-gradient(
      180px 130px at 6% 0%,
      rgba(255, 215, 64, 0.2),
      transparent 66%
    ),
    radial-gradient(
      180px 130px at 94% 0%,
      rgba(0, 210, 255, 0.16),
      transparent 66%
    ),
    linear-gradient(
      165deg,
      rgba(255, 255, 255, 0.96),
      rgba(246, 249, 255, 0.94)
    );
  box-shadow: 0 16px 38px rgba(15, 23, 42, 0.12);
}
.coach-hub-head {
  display: grid;
  gap: 2px;
  margin-bottom: 10px;
}
.coach-hub-kicker {
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(8, 18, 34, 0.62);
  font-weight: 900;
}
.coach-hub-title {
  font-size: 1rem;
  font-weight: 900;
  color: rgba(8, 18, 34, 0.92);
}
.coach-hub-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.coach-card {
  display: grid;
  gap: 6px;
  border: 1px solid rgba(8, 18, 34, 0.1);
  background: rgba(255, 255, 255, 0.78);
  border-radius: 16px;
  padding: 10px 10px 11px;
}
.coach-card-title {
  font-size: 0.84rem;
  font-weight: 900;
  color: rgba(8, 18, 34, 0.92);
}
.coach-card-sub {
  font-size: 0.76rem;
  line-height: 1.35;
  color: rgba(8, 18, 34, 0.72);
}
.coach-card-btn {
  margin-top: 2px;
  border: 1px solid rgba(8, 18, 34, 0.16);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.8);
  color: rgba(8, 18, 34, 0.86);
  font-weight: 900;
  font-size: 0.74rem;
  line-height: 1.2;
  padding: 8px 10px;
  cursor: pointer;
}
.coach-card-btn:hover {
  transform: translateY(-1px);
}
.coach-card-btn:active {
  transform: translateY(0);
}
.coach-mission-list {
  display: grid;
  gap: 4px;
}
.coach-mission-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.74rem;
  font-weight: 800;
  color: rgba(8, 18, 34, 0.78);
}
.coach-badge-track {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.coach-badge-chip {
  padding: 4px 8px;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 900;
  border: 1px solid rgba(8, 18, 34, 0.14);
  color: rgba(8, 18, 34, 0.72);
  background: rgba(255, 255, 255, 0.7);
}
.coach-badge-chip.is-earned {
  border-color: rgba(88, 204, 2, 0.48);
  background: rgba(88, 204, 2, 0.16);
  color: rgba(22, 84, 0, 0.92);
}
.coach-role-list {
  display: grid;
  gap: 4px;
}
.coach-role-item {
  font-size: 0.74rem;
  color: rgba(8, 18, 34, 0.76);
}
.learning-step {
  position: relative;
}
.learning-step:nth-child(odd) {
  padding-right: 18px;
}
.learning-step:nth-child(even) {
  padding-left: 30px;
}
.learning-step:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 30px;
  top: 62px;
  width: 6px;
  height: calc(100% + 10px);
  border-radius: 999px;
  background: repeating-linear-gradient(
    180deg,
    rgba(88, 204, 2, 0.42) 0 12px,
    rgba(0, 210, 255, 0.3) 12px 24px
  );
  box-shadow: 0 10px 24px rgba(88, 204, 2, 0.18);
}
.learning-step-btn {
  width: 100%;
  border: 1px solid rgba(8, 18, 34, 0.1);
  background: rgba(255, 255, 255, 0.86);
  border-radius: 18px;
  padding: 10px 12px;
  min-height: 70px;
  display: grid;
  grid-template-columns: 56px 1fr auto auto;
  align-items: center;
  gap: 12px;
  text-align: left;
  cursor: pointer;
  box-shadow: 0 14px 28px rgba(15, 23, 42, 0.1);
  transition:
    transform 180ms ease,
    box-shadow 180ms ease,
    border-color 180ms ease;
}
.learning-step-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 18px 34px rgba(15, 23, 42, 0.14);
}
.learning-step-btn:active {
  transform: scale(0.99);
}
.learning-step-btn:focus-visible {
  outline: 3px solid rgba(0, 210, 255, 0.3);
  outline-offset: 3px;
}
.learning-node-core {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 1.15rem;
  font-weight: 900;
  color: rgba(8, 18, 34, 0.92);
  background: linear-gradient(
    160deg,
    rgba(255, 255, 255, 0.96),
    rgba(232, 247, 227, 0.92)
  );
  border: 1px solid rgba(8, 18, 34, 0.1);
  position: relative;
}
.learning-node-core::before {
  content: "";
  position: absolute;
  inset: -5px;
  border-radius: inherit;
  background: conic-gradient(
    from -90deg,
    rgba(88, 204, 2, 0.96) var(--node-progress, 0%),
    rgba(8, 18, 34, 0.12) 0
  );
  z-index: -1;
}
.learning-step-main {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.learning-step-badge {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  height: 19px;
  padding: 0 8px;
  border-radius: 999px;
  border: 1px solid rgba(8, 18, 34, 0.12);
  background: rgba(255, 255, 255, 0.82);
  font-size: 0.58rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(8, 18, 34, 0.62);
}
.learning-step-title {
  font-size: 0.94rem;
  font-weight: 900;
  color: rgba(8, 18, 34, 0.9);
}
.learning-step-meta {
  font-size: 0.78rem;
  font-weight: 700;
  color: rgba(8, 18, 34, 0.62);
}
.learning-step-checkpoint {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  margin-top: 2px;
  height: 20px;
  padding: 0 8px;
  border-radius: 999px;
  font-size: 0.58rem;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(0, 86, 97, 0.92);
  border: 1px solid rgba(0, 165, 180, 0.3);
  background: rgba(0, 210, 255, 0.12);
}
.learning-step-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 34px;
  border-radius: 12px;
  padding: 0 10px;
  font-size: 0.66rem;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(8, 18, 34, 0.72);
  border: 1px solid rgba(8, 18, 34, 0.12);
  background: rgba(255, 255, 255, 0.78);
}
.learning-step-state {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 78px;
  height: 28px;
  border-radius: 999px;
  padding: 0 8px;
  font-size: 0.62rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(8, 18, 34, 0.72);
  border: 1px solid rgba(8, 18, 34, 0.12);
  background: rgba(255, 255, 255, 0.76);
}
.learning-step-btn[data-state="done"] .learning-step-state {
  color: rgba(22, 84, 0, 0.92);
  border-color: rgba(88, 204, 2, 0.44);
  background: rgba(88, 204, 2, 0.16);
}
.learning-step-btn[data-state="locked"] .learning-step-state {
  color: rgba(8, 18, 34, 0.52);
  border-color: rgba(8, 18, 34, 0.1);
  background: rgba(255, 255, 255, 0.62);
}
.learning-step-btn[data-state="next"] .learning-step-state {
  color: rgba(0, 86, 97, 0.96);
  border-color: rgba(0, 165, 180, 0.36);
  background: rgba(0, 210, 255, 0.14);
}
.learning-step.is-active .learning-step-btn {
  border-color: rgba(88, 204, 2, 0.48);
  box-shadow: 0 22px 44px rgba(88, 204, 2, 0.18);
}
.learning-step.is-done .learning-node-core {
  color: #ffffff;
  border-color: rgba(88, 204, 2, 0.5);
  background: linear-gradient(145deg, #58cc02, #46b001);
}
.learning-step.is-done .learning-step-btn {
  border-color: rgba(88, 204, 2, 0.34);
}
.learning-step.is-locked .learning-step-btn {
  opacity: 0.56;
  filter: grayscale(0.18);
  cursor: not-allowed;
}
.learning-step-btn.is-onboarding-glow,
.learning-finish-btn.is-onboarding-glow,
.learning-reward-btn.is-onboarding-glow {
  position: relative;
  z-index: 2;
  animation: learningOnboardingPulse 1.3s ease-in-out infinite;
}
@keyframes learningOnboardingPulse {
  0% {
    box-shadow: 0 0 0 0 rgba(0, 210, 255, 0.32);
    transform: translateY(0);
  }
  60% {
    box-shadow: 0 0 0 9px rgba(0, 210, 255, 0);
    transform: translateY(-1px);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(0, 210, 255, 0);
    transform: translateY(0);
  }
}
.learning-onboarding-tip {
  position: absolute;
  z-index: 8;
  max-width: 250px;
  display: grid;
  gap: 8px;
  padding: 10px;
  border-radius: 14px;
  border: 1px solid rgba(8, 18, 34, 0.16);
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 18px 36px rgba(15, 23, 42, 0.18);
}
.learning-onboarding-tip::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -8px;
  width: 12px;
  height: 12px;
  border-right: 1px solid rgba(8, 18, 34, 0.16);
  border-bottom: 1px solid rgba(8, 18, 34, 0.16);
  background: rgba(255, 255, 255, 0.96);
  transform: translateX(-50%) rotate(45deg);
}
.learning-onboarding-tip.is-below::after {
  top: -8px;
  bottom: auto;
  transform: translateX(-50%) rotate(225deg);
}
.learning-onboarding-tip-text {
  font-size: 0.75rem;
  line-height: 1.35;
  color: rgba(8, 18, 34, 0.82);
  font-weight: 750;
}
.learning-onboarding-tip-btn {
  justify-self: start;
  height: 30px;
  border-radius: 10px;
  border: 1px solid rgba(8, 18, 34, 0.14);
  background: rgba(255, 255, 255, 0.88);
  color: rgba(8, 18, 34, 0.84);
  padding: 0 10px;
  font-size: 0.64rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
}
.learning-onboarding-tip-btn:hover {
  transform: translateY(-1px);
}
.learning-finish-card,
.learning-reward-day {
  border-radius: 18px;
  padding: 10px 12px;
  border: 1px solid rgba(8, 18, 34, 0.12);
  background: rgba(255, 255, 255, 0.86);
  box-shadow: 0 14px 28px rgba(15, 23, 42, 0.1);
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
}
.learning-finish-card.is-ready {
  border-color: rgba(88, 204, 2, 0.34);
  background: linear-gradient(
    135deg,
    rgba(88, 204, 2, 0.14),
    rgba(255, 255, 255, 0.92)
  );
}
.learning-reward-day.is-ready {
  border-color: rgba(255, 186, 64, 0.36);
  background: linear-gradient(
    135deg,
    rgba(255, 186, 64, 0.16),
    rgba(255, 255, 255, 0.92)
  );
}
.learning-reward-day.is-claimed {
  border-color: rgba(88, 204, 2, 0.34);
  background: linear-gradient(
    135deg,
    rgba(88, 204, 2, 0.14),
    rgba(255, 255, 255, 0.92)
  );
}
.learning-finish-icon,
.learning-reward-icon {
  width: 42px;
  height: 42px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  font-size: 1.1rem;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(8, 18, 34, 0.1);
}
.learning-finish-main,
.learning-reward-main {
  min-width: 0;
  display: grid;
  gap: 2px;
}
.learning-finish-title,
.learning-reward-title {
  font-size: 0.84rem;
  font-weight: 900;
  color: rgba(8, 18, 34, 0.92);
}
.learning-finish-sub,
.learning-reward-sub {
  font-size: 0.74rem;
  color: rgba(8, 18, 34, 0.7);
}
.learning-reward-meta {
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(8, 18, 34, 0.56);
}
.learning-finish-btn,
.learning-reward-btn {
  height: 34px;
  border-radius: 12px;
  border: 1px solid rgba(8, 18, 34, 0.14);
  background: rgba(255, 255, 255, 0.8);
  color: rgba(8, 18, 34, 0.78);
  padding: 0 11px;
  font-size: 0.62rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
}
.learning-finish-btn:disabled,
.learning-reward-btn:disabled {
  opacity: 0.52;
  cursor: default;
}
.learning-finish-btn:not(:disabled):hover,
.learning-reward-btn:not(:disabled):hover {
  transform: translateY(-1px);
}
@media (max-width: 640px) {
  .coach-hub-grid {
    grid-template-columns: 1fr;
  }
  .coach-card {
    border-radius: 14px;
  }
  .learning-step:nth-child(odd) {
    padding-right: 0;
  }
  .learning-step:nth-child(even) {
    padding-left: 10px;
  }
  .learning-path-track::before {
    left: 22px;
  }
  .learning-step-btn {
    grid-template-columns: 52px 1fr;
    grid-template-areas:
      "icon main"
      "state state"
      "cta cta";
    gap: 10px;
  }
  .learning-step-btn .learning-node-core {
    grid-area: icon;
  }
  .learning-step-btn .learning-step-main {
    grid-area: main;
  }
  .learning-step-btn .learning-step-state {
    grid-area: state;
    justify-self: start;
  }
  .learning-step-btn .learning-step-cta {
    grid-area: cta;
    justify-self: start;
  }
  .learning-finish-card,
  .learning-reward-day {
    grid-template-columns: auto 1fr;
    grid-template-areas:
      "icon main"
      "btn btn";
    align-items: start;
    gap: 8px;
  }
  .learning-finish-icon,
  .learning-reward-icon {
    grid-area: icon;
  }
  .learning-finish-main,
  .learning-reward-main {
    grid-area: main;
  }
  .learning-finish-btn,
  .learning-reward-btn {
    grid-area: btn;
    justify-self: start;
  }
  .learning-onboarding-tip {
    max-width: calc(100% - 24px);
    padding: 9px;
  }
  .learning-onboarding-tip-text {
    font-size: 0.72rem;
  }
}
@media (prefers-color-scheme: dark) {
  .learning-path-panel {
    border: 1px solid rgba(255, 255, 255, 0.14);
    background:
      radial-gradient(
        200px 140px at 14% -12%,
        rgba(88, 204, 2, 0.2),
        transparent 65%
      ),
      radial-gradient(
        200px 140px at 88% -12%,
        rgba(0, 210, 255, 0.16),
        transparent 68%
      ),
      linear-gradient(180deg, rgba(16, 20, 28, 0.92), rgba(10, 14, 20, 0.92));
    box-shadow: 0 28px 56px rgba(0, 0, 0, 0.4);
  }
  .learning-path-kicker {
    color: rgba(184, 252, 147, 0.86);
  }
  .learning-path-title {
    color: rgba(255, 255, 255, 0.94);
  }
  .learning-path-sub {
    color: rgba(219, 232, 255, 0.72);
  }
  .learning-path-chip {
    color: rgba(255, 255, 255, 0.82);
    border-color: rgba(255, 255, 255, 0.14);
    background: rgba(255, 255, 255, 0.06);
  }
  .learning-step-btn {
    border-color: rgba(255, 255, 255, 0.14);
    background: rgba(255, 255, 255, 0.06);
    box-shadow: 0 20px 42px rgba(0, 0, 0, 0.32);
  }
  .learning-step-title {
    color: rgba(255, 255, 255, 0.92);
  }
  .learning-step-meta {
    color: rgba(219, 232, 255, 0.7);
  }
  .learning-step-badge {
    color: rgba(219, 232, 255, 0.78);
    border-color: rgba(255, 255, 255, 0.16);
    background: rgba(255, 255, 255, 0.08);
  }
  .learning-step-checkpoint {
    color: rgba(153, 239, 251, 0.92);
    border-color: rgba(0, 210, 255, 0.34);
    background: rgba(0, 210, 255, 0.18);
  }
  .learning-step-cta {
    color: rgba(255, 255, 255, 0.8);
    border-color: rgba(255, 255, 255, 0.14);
    background: rgba(255, 255, 255, 0.08);
  }
  .learning-step-state {
    color: rgba(219, 232, 255, 0.8);
    border-color: rgba(255, 255, 255, 0.14);
    background: rgba(255, 255, 255, 0.08);
  }
  .learning-node-core {
    color: rgba(255, 255, 255, 0.94);
    border-color: rgba(255, 255, 255, 0.14);
    background: linear-gradient(
      160deg,
      rgba(30, 35, 46, 0.96),
      rgba(20, 26, 34, 0.92)
    );
  }
  .learning-onboarding-tip {
    border-color: rgba(255, 255, 255, 0.16);
    background: rgba(18, 24, 34, 0.96);
    box-shadow: 0 22px 44px rgba(0, 0, 0, 0.45);
  }
  .learning-onboarding-tip::after {
    border-color: rgba(255, 255, 255, 0.16);
    background: rgba(18, 24, 34, 0.96);
  }
  .learning-onboarding-tip-text {
    color: rgba(219, 232, 255, 0.88);
  }
  .learning-onboarding-tip-btn {
    color: rgba(255, 255, 255, 0.86);
    border-color: rgba(255, 255, 255, 0.16);
    background: rgba(255, 255, 255, 0.08);
  }
  .coach-hub {
    border: 1px solid rgba(255, 255, 255, 0.14);
    background:
      radial-gradient(
        180px 130px at 6% 0%,
        rgba(255, 215, 64, 0.22),
        transparent 66%
      ),
      radial-gradient(
        180px 130px at 94% 0%,
        rgba(0, 210, 255, 0.2),
        transparent 66%
      ),
      linear-gradient(165deg, rgba(16, 20, 30, 0.94), rgba(10, 14, 22, 0.92));
    box-shadow: 0 26px 52px rgba(0, 0, 0, 0.46);
  }
  .coach-hub-kicker {
    color: rgba(219, 232, 255, 0.66);
  }
  .coach-hub-title {
    color: rgba(255, 255, 255, 0.92);
  }
  .coach-card {
    border-color: rgba(255, 255, 255, 0.14);
    background: rgba(255, 255, 255, 0.06);
  }
  .coach-card-title {
    color: rgba(255, 255, 255, 0.92);
  }
  .coach-card-sub,
  .coach-role-item,
  .coach-mission-row {
    color: rgba(219, 232, 255, 0.74);
  }
  .learning-finish-card,
  .learning-reward-day {
    border-color: rgba(255, 255, 255, 0.14);
    background: rgba(255, 255, 255, 0.06);
    box-shadow: 0 20px 42px rgba(0, 0, 0, 0.32);
  }
  .learning-finish-title,
  .learning-reward-title {
    color: rgba(255, 255, 255, 0.92);
  }
  .learning-finish-sub,
  .learning-reward-sub,
  .learning-reward-meta {
    color: rgba(219, 232, 255, 0.72);
  }
  .learning-finish-btn,
  .learning-reward-btn {
    color: rgba(255, 255, 255, 0.84);
    border-color: rgba(255, 255, 255, 0.16);
    background: rgba(255, 255, 255, 0.08);
  }
  .learning-finish-icon,
  .learning-reward-icon {
    border-color: rgba(255, 255, 255, 0.16);
    background: rgba(255, 255, 255, 0.08);
  }
  .coach-card-btn {
    border-color: rgba(255, 255, 255, 0.18);
    background: rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.9);
  }
  .coach-badge-chip {
    border-color: rgba(255, 255, 255, 0.16);
    color: rgba(219, 232, 255, 0.76);
    background: rgba(255, 255, 255, 0.08);
  }
  .coach-badge-chip.is-earned {
    border-color: rgba(184, 252, 147, 0.48);
    color: rgba(214, 255, 188, 0.94);
    background: rgba(88, 204, 2, 0.2);
  }
}
.academy-panel {
  display: none;
  border-radius: 20px;
  padding: 16px 16px 14px;
  background:
    radial-gradient(
      120px 80px at 15% 20%,
      rgba(255, 216, 102, 0.28),
      transparent 60%
    ),
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.96),
      rgba(245, 248, 255, 0.96)
    );
  border: 1px solid rgba(8, 18, 34, 0.08);
  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.12);
  margin-bottom: 16px;
}
body[data-theme="dark"] .academy-panel {
  background:
    radial-gradient(
      120px 80px at 15% 20%,
      rgba(255, 216, 102, 0.12),
      transparent 60%
    ),
    linear-gradient(180deg, rgba(18, 20, 32, 0.92), rgba(10, 12, 20, 0.92));
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
}
body[data-theme="dark"] .academy-title {
  color: rgba(255, 255, 255, 0.92);
}
body[data-theme="dark"] .academy-sub,
body[data-theme="dark"] .academy-goal-row,
body[data-theme="dark"] .academy-reward {
  color: rgba(219, 232, 255, 0.7);
}
body[data-theme="dark"] .academy-goal {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
}
body[data-theme="dark"] .academy-goal-bar {
  background: rgba(255, 255, 255, 0.12);
}
.academy-panel-head {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 12px;
}
.academy-title {
  font-weight: 800;
  font-size: 1rem;
  color: rgba(8, 18, 34, 0.9);
}
.academy-sub {
  font-size: 0.85rem;
  color: rgba(8, 18, 34, 0.6);
}
.academy-goals {
  display: grid;
  gap: 10px;
}
.academy-goal {
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(8, 18, 34, 0.08);
  border-radius: 14px;
  padding: 10px 12px;
}
.academy-goal-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.85rem;
  font-weight: 700;
  color: rgba(8, 18, 34, 0.82);
  margin-bottom: 8px;
}
.academy-goal-bar {
  width: 100%;
  height: 6px;
  border-radius: 999px;
  background: rgba(8, 18, 34, 0.08);
  overflow: hidden;
}
.academy-goal-fill {
  height: 100%;
  width: 0%;
  border-radius: inherit;
  background: linear-gradient(
    90deg,
    rgba(0, 210, 255, 0.9),
    rgba(127, 90, 255, 0.9)
  );
  transition: width 220ms ease;
}
.academy-reward {
  margin-top: 10px;
  font-size: 0.82rem;
  font-weight: 700;
  color: rgba(8, 18, 34, 0.7);
}
.quiz-view-tabs {
  display: flex;
  gap: 6px;
  align-items: center;
  justify-content: center;
  max-width: 960px;
  margin: 0 auto 16px;
  padding: 6px 8px;
  border-radius: 999px;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.72),
    rgba(255, 255, 255, 0.56)
  );
  border: 1px solid rgba(8, 18, 34, 0.08);
  box-shadow:
    0 18px 50px rgba(15, 23, 42, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.65);
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
}
.quiz-view-tab {
  appearance: none;
  border: 1px solid transparent;
  background: transparent;
  color: rgba(8, 18, 34, 0.88);
  border-radius: 999px;
  padding: 10px 14px;
  font-weight: 800;
  font-size: 0.82rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    background 0.18s ease,
    border-color 0.18s ease;
  box-shadow: none;
  flex: 1 1 0;
  min-width: 0;
  user-select: none;
}
.quiz-view-tab:hover {
  transform: translateY(-1px);
  background: rgba(60, 85, 150, 0.1);
  border-color: rgba(0, 0, 0, 0.1);
  box-shadow: 0 14px 34px rgba(15, 23, 42, 0.1);
}
.quiz-view-tab:active {
  transform: scale(0.98);
}
.quiz-view-tab:focus-visible {
  outline: 3px solid rgba(0, 210, 255, 0.22);
  outline-offset: 3px;
}
.quiz-view-tab.is-active {
  border-color: rgba(0, 165, 180, 0.35);
  background: linear-gradient(
    135deg,
    rgba(0, 165, 180, 0.18),
    rgba(127, 90, 255, 0.16)
  );
  box-shadow:
    0 20px 50px rgba(0, 165, 180, 0.14),
    0 14px 34px rgba(15, 23, 42, 0.1);
}
.quiz-view-pane[hidden] {
  display: none !important;
}
.quiz-view-pane[data-quiz-pane="horoscope"],
.quiz-view-pane[data-quiz-pane="rating"] {
  width: min(980px, calc(100% - 40px));
  margin: 0 auto;
}

@media (max-width: 520px) {
  .quiz-view-tabs {
    gap: 6px;
    padding: 4px 4px;
  }
  .quiz-view-tab {
    padding: 8px 8px;
    font-size: 0.72rem;
    letter-spacing: 0.08em;
  }
}

@media (prefers-color-scheme: dark) {
  .quiz-view-tabs {
    background: linear-gradient(
      180deg,
      rgba(22, 24, 36, 0.7),
      rgba(12, 14, 24, 0.58)
    );
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow:
      0 26px 70px rgba(0, 0, 0, 0.55),
      inset 0 1px 0 rgba(255, 255, 255, 0.08);
  }
  .quiz-view-tab {
    border: 1px solid transparent;
    background: transparent;
    color: rgba(255, 255, 255, 0.86);
    box-shadow: none;
  }
  .quiz-view-tab:hover {
    background: rgba(127, 90, 255, 0.16);
    border-color: rgba(255, 255, 255, 0.12);
    box-shadow: 0 22px 60px rgba(0, 0, 0, 0.45);
  }
  .quiz-view-tab.is-active {
    border-color: rgba(160, 245, 255, 0.22);
    background: linear-gradient(
      135deg,
      rgba(0, 165, 180, 0.22),
      rgba(127, 90, 255, 0.18)
    );
  }
}
.quiz-menu {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.game-blocks {
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.game-block {
  --block-accent-a: rgba(0, 210, 255, 0.16);
  --block-accent-b: rgba(127, 90, 255, 0.14);
  --block-accent-c: rgba(255, 206, 84, 0.1);
  --block-fill-a: rgba(0, 210, 255, 0.92);
  --block-fill-b: rgba(127, 90, 255, 0.88);
  --block-badge-bg: rgba(0, 165, 180, 0.12);
  --block-badge-fg: #00a5b4;
  background: linear-gradient(
    150deg,
    rgba(255, 255, 255, 0.94),
    rgba(245, 248, 252, 0.92)
  );
  border-radius: 28px;
  padding: 20px 24px;
  border: 1px solid rgba(8, 18, 34, 0.06);
  box-shadow: 0 20px 50px rgba(15, 23, 42, 0.1);
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.game-block > * {
  position: relative;
  z-index: 1;
}
.game-block::before {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  background:
    radial-gradient(
      820px 260px at 18% -90px,
      var(--block-accent-a),
      rgba(255, 255, 255, 0) 60%
    ),
    radial-gradient(
      820px 260px at 82% -90px,
      var(--block-accent-b),
      rgba(255, 255, 255, 0) 62%
    ),
    radial-gradient(
      820px 280px at 50% 120%,
      var(--block-accent-c),
      rgba(255, 255, 255, 0) 62%
    );
  opacity: 0.95;
  pointer-events: none;
  z-index: 0;
}
.game-block[data-block="learning"] {
  --block-accent-a: rgba(0, 210, 255, 0.18);
  --block-accent-b: rgba(127, 90, 255, 0.14);
  --block-accent-c: rgba(255, 206, 84, 0.1);
  --block-fill-a: rgba(0, 210, 255, 0.92);
  --block-fill-b: rgba(127, 90, 255, 0.9);
  --block-badge-bg: rgba(0, 210, 255, 0.12);
  --block-badge-fg: rgba(0, 110, 120, 0.95);
}
.game-block[data-block="practice"] {
  --block-accent-a: rgba(255, 206, 84, 0.18);
  --block-accent-b: rgba(255, 128, 80, 0.14);
  --block-accent-c: rgba(127, 90, 255, 0.1);
  --block-fill-a: rgba(255, 206, 84, 1);
  --block-fill-b: rgba(255, 61, 0, 1);
  --block-badge-bg: rgba(255, 206, 84, 0.16);
  --block-badge-fg: rgba(140, 78, 0, 0.95);
}
.game-block[data-block="stress"] {
  --block-accent-a: rgba(255, 61, 0, 0.18);
  --block-accent-b: rgba(255, 77, 125, 0.14);
  --block-accent-c: rgba(0, 210, 255, 0.08);
  --block-fill-a: rgba(255, 61, 0, 1);
  --block-fill-b: rgba(255, 77, 125, 1);
  --block-badge-bg: rgba(255, 61, 0, 0.14);
  --block-badge-fg: rgba(140, 18, 0, 0.95);
}
.game-block[data-block="quiz"] {
  --block-accent-a: rgba(127, 90, 255, 0.18);
  --block-accent-b: rgba(0, 210, 255, 0.12);
  --block-accent-c: rgba(255, 206, 84, 0.08);
  --block-fill-a: rgba(127, 90, 255, 0.92);
  --block-fill-b: rgba(0, 210, 255, 0.88);
  --block-badge-bg: rgba(127, 90, 255, 0.14);
  --block-badge-fg: rgba(80, 55, 190, 0.95);
}
.game-block[data-block="fun"] {
  --block-accent-a: rgba(0, 210, 255, 0.16);
  --block-accent-b: rgba(56, 255, 179, 0.12);
  --block-accent-c: rgba(127, 90, 255, 0.1);
  --block-fill-a: rgba(56, 255, 179, 0.95);
  --block-fill-b: rgba(0, 210, 255, 0.9);
  --block-badge-bg: rgba(56, 255, 179, 0.12);
  --block-badge-fg: rgba(0, 110, 80, 0.95);
}
.game-block-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}
.game-block-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: #1c2132;
}
.game-block-desc {
  font-size: 0.9rem;
  color: #555860;
  margin-top: 4px;
}
.game-block-submeta {
  margin-top: 8px;
  font-size: 0.75rem;
  font-weight: 900;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(8, 18, 34, 0.58);
}
.game-block-progress {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  min-width: 180px;
}
.game-block-progress .progress {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.game-block-progress .track {
  width: 100%;
  height: 6px;
  background: rgba(0, 0, 0, 0.08);
  border-radius: 999px;
  overflow: hidden;
}
.game-block-progress .fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--block-fill-a), var(--block-fill-b));
  border-radius: inherit;
  transition: width 0.4s ease;
}
.game-block-progress .progress-label {
  align-self: flex-end;
  font-size: 0.75rem;
  font-weight: 700;
  color: rgba(8, 18, 34, 0.74);
  text-transform: uppercase;
  letter-spacing: 0.2em;
}
.game-block-progress.is-full .progress-label {
  color: rgba(8, 18, 34, 0.78);
}
.game-block-badge {
  background: var(--block-badge-bg);
  color: var(--block-badge-fg);
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.game-block-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
}
.game-block.is-focus {
  border-color: rgba(0, 165, 180, 0.26);
  box-shadow:
    0 28px 64px rgba(15, 23, 42, 0.14),
    0 0 0 2px rgba(0, 210, 255, 0.1);
}
.game-block.is-complete .game-block-badge::after {
  content: " ✓";
  font-weight: 900;
}
.game-block.is-pristine .game-block-badge {
  opacity: 0.86;
}
.game-block-carousel {
  margin-top: 12px;
}
.game-block-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
  margin-top: 0;
}

/* Mobile/tablet: "лента" карточек игр со snap */
@media (max-width: 900px), (pointer: coarse) and (max-width: 1024px) {
  .game-block {
    padding: 16px 14px;
    border-radius: 24px;
  }
  .game-block-header {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  .game-block-progress {
    min-width: 0;
    width: 100%;
    align-items: flex-start;
  }
  .game-block-meta {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
  }
  .game-block-carousel {
    position: relative;
    margin-left: -14px;
    margin-right: -14px;
  }
  .game-block-grid {
    display: flex;
    grid-template-columns: none;
    overflow-x: auto;
    overflow-y: hidden;
    gap: 12px;
    margin: 0;
    padding: 2px 14px 12px;
    scroll-snap-type: x mandatory;
    scroll-padding-left: 14px;
    scroll-padding-right: 14px;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x;
  }
  .game-carousel-fade {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 40px;
    z-index: 2;
    pointer-events: none;
    opacity: 0;
    transition: opacity 220ms ease;
  }
  .game-carousel-fade--left {
    left: 0;
    background: linear-gradient(
      90deg,
      rgba(245, 248, 252, 0.96),
      rgba(245, 248, 252, 0)
    );
  }
  .game-carousel-fade--right {
    right: 0;
    background: linear-gradient(
      270deg,
      rgba(245, 248, 252, 0.96),
      rgba(245, 248, 252, 0)
    );
  }
  .game-block-carousel.is-scrollable .game-carousel-fade {
    opacity: 1;
  }
  .game-block-carousel.is-at-start .game-carousel-fade--left {
    opacity: 0;
  }
  .game-block-carousel.is-at-end .game-carousel-fade--right {
    opacity: 0;
  }

  @keyframes gameSwipeHintPulse {
    0%,
    100% {
      transform: translateY(0);
    }
    50% {
      transform: translateY(-3px);
    }
  }
  .game-swipe-hint {
    position: absolute;
    top: 8px;
    right: 14px;
    z-index: 3;
    padding: 8px 10px;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 900;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(8, 18, 34, 0.72);
    background: rgba(0, 165, 180, 0.1);
    border: 1px solid rgba(0, 165, 180, 0.2);
    box-shadow: 0 14px 34px rgba(15, 23, 42, 0.1);
    backdrop-filter: blur(10px);
    pointer-events: none;
    opacity: 0;
    transform: translateY(-6px);
    transition:
      opacity 220ms ease,
      transform 220ms ease;
  }
  .game-swipe-hint.is-visible {
    opacity: 1;
    transform: translateY(0);
    animation: gameSwipeHintPulse 1.6s ease-in-out infinite;
  }
  .game-swipe-hint.is-hidden {
    display: none;
  }
  .game-block-grid::-webkit-scrollbar {
    display: none;
  }
  .game-block-grid {
    scrollbar-width: none;
  }
  .quiz-menu-btn {
    flex: 0 0 min(78vw, 320px);
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }

  .game-carousel-indicator {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 7px;
    margin-top: 10px;
    padding-bottom: 2px;
  }
  .game-carousel-dot {
    appearance: none;
    border: none;
    width: 7px;
    height: 7px;
    border-radius: 999px;
    background: rgba(8, 18, 34, 0.18);
    opacity: 0.75;
    transition:
      width 220ms ease,
      opacity 220ms ease,
      background 220ms ease;
    padding: 0;
  }
  .game-carousel-dot.is-active {
    width: 22px;
    opacity: 1;
    background: linear-gradient(
      90deg,
      rgba(0, 210, 255, 0.92),
      rgba(127, 90, 255, 0.88)
    );
    box-shadow: 0 12px 25px rgba(60, 85, 150, 0.18);
  }
}

@media (prefers-color-scheme: dark) and (max-width: 900px),
  (prefers-color-scheme: dark) and (pointer: coarse) and (max-width: 1024px) {
  .game-carousel-dot {
    background: rgba(255, 255, 255, 0.18);
  }
  .game-carousel-fade--left {
    background: linear-gradient(
      90deg,
      rgba(10, 12, 20, 0.92),
      rgba(10, 12, 20, 0)
    );
  }
  .game-carousel-fade--right {
    background: linear-gradient(
      270deg,
      rgba(10, 12, 20, 0.92),
      rgba(10, 12, 20, 0)
    );
  }
  .game-swipe-hint {
    color: rgba(255, 255, 255, 0.78);
    background: rgba(0, 165, 180, 0.14);
    border: 1px solid rgba(0, 165, 180, 0.26);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.4);
  }
}

@media (prefers-reduced-motion: reduce) and (max-width: 900px),
  (prefers-reduced-motion: reduce) and (pointer: coarse) and (max-width: 1024px) {
  .game-carousel-dot {
    transition: none;
  }
  .game-swipe-hint {
    transition: none;
  }
  .game-swipe-hint.is-visible {
    animation: none;
  }
}

/* Phones: no horizontal carousels — vertical feed (easier to scroll) */
@media (max-width: 640px) {
  .game-blocks {
    gap: 16px;
  }
  .game-block {
    padding: 16px 14px;
    border-radius: 24px;
  }
  .game-block-header {
    gap: 10px;
  }
  .game-block-title {
    font-size: 1.02rem;
  }
  .game-block-desc {
    font-size: 0.86rem;
  }

  .game-block-carousel {
    overflow: visible;
  }
  .game-block-grid {
    display: grid;
    grid-template-columns: 1fr;
    overflow: visible;
    overflow-x: visible;
    overflow-y: visible;
    padding: 0;
    gap: 10px;
    scroll-snap-type: none;
    overscroll-behavior-x: auto;
    touch-action: pan-y;
  }
  .quiz-menu-btn {
    flex: 1 1 auto;
    width: 100%;
    border-radius: 18px;
    padding: 14px;
    scroll-snap-align: none;
    scroll-snap-stop: normal;
  }
  .game-carousel-fade,
  .game-carousel-indicator,
  .game-swipe-hint {
    display: none !important;
  }
}

/* Touch devices: prefer vertical feed (avoid horizontal "to the right") */
@media (pointer: coarse) and (max-width: 1024px) {
  .game-block-carousel {
    overflow: visible;
    margin-left: 0;
    margin-right: 0;
  }
  .game-block-grid {
    display: grid;
    grid-template-columns: 1fr;
    overflow: visible;
    overflow-x: visible;
    overflow-y: visible;
    padding: 0;
    gap: 10px;
    scroll-snap-type: none;
    overscroll-behavior-x: auto;
    -webkit-overflow-scrolling: auto;
    touch-action: pan-y;
  }
  .quiz-menu-btn {
    flex: 1 1 auto;
    width: 100%;
    scroll-snap-align: none;
    scroll-snap-stop: normal;
  }
  .game-carousel-fade,
  .game-carousel-indicator,
  .game-swipe-hint {
    display: none !important;
  }
}
@keyframes gameCardStaggerIn {
  from {
    opacity: 0;
    transform: translateY(16px) scale(0.97);
    filter: saturate(0.92);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: saturate(1);
  }
}
@keyframes gameCardPriorityIn {
  0% {
    opacity: 0;
    transform: translateY(20px) scale(0.95);
    filter: saturate(0.9);
  }
  68% {
    opacity: 1;
    transform: translateY(-2px) scale(1.02);
    filter: saturate(1.06);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: saturate(1);
  }
}
.quiz-menu-btn {
  background: linear-gradient(
    150deg,
    rgba(255, 255, 255, 0.96),
    rgba(245, 248, 252, 0.92)
  );
  border: 1px solid rgba(4, 6, 12, 0.1);
  border-radius: 20px;
  padding: 16px;
  box-shadow: 0 16px 34px rgba(4, 18, 60, 0.14);
  text-align: left;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 6px;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  --card-progress: var(--block-progress, 0%);
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
}
.quiz-menu-btn.is-stagger-enter {
  animation: gameCardStaggerIn 420ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
  animation-delay: var(--game-card-stagger, 0ms);
  will-change: transform, opacity;
}
.quiz-menu-btn.is-stagger-enter.is-stagger-priority {
  animation-name: gameCardPriorityIn;
  animation-duration: 520ms;
}
@media (prefers-reduced-motion: reduce) {
  .quiz-menu-btn.is-stagger-enter,
  .quiz-menu-btn.is-stagger-enter.is-stagger-priority {
    animation: none !important;
  }
}
.game-block[data-block="learning"] .quiz-menu-btn {
  --card-cta-bg: rgba(255, 255, 255, 0.68);
  --card-cta-border: rgba(0, 165, 180, 0.24);
}
.game-block[data-block="practice"] .quiz-menu-btn {
  --card-cta-bg: rgba(255, 255, 255, 0.68);
  --card-cta-border: rgba(255, 128, 80, 0.24);
}
.game-block[data-block="practice"] .quiz-menu-btn[data-game-id="service"] {
  --card-cta-bg: rgba(234, 255, 250, 0.92);
  --card-cta-border: rgba(0, 150, 126, 0.34);
  border-color: rgba(0, 150, 126, 0.24);
  box-shadow:
    0 22px 44px rgba(0, 150, 126, 0.15),
    0 16px 34px rgba(4, 18, 60, 0.12);
}
.game-block[data-block="practice"]
  .quiz-menu-btn[data-game-id="service"]
  .game-card-title {
  color: rgba(8, 18, 34, 0.95);
}
.game-block[data-block="practice"]
  .quiz-menu-btn[data-game-id="service"]
  .game-card-desc {
  color: rgba(8, 18, 34, 0.78);
  line-height: 1.48;
}
.game-block[data-block="practice"]
  .quiz-menu-btn[data-game-id="service"]
  .game-card-pill {
  display: inline-flex;
  align-items: center;
  border: 1px solid rgba(0, 150, 126, 0.26);
  background: rgba(0, 150, 126, 0.16);
  color: rgba(0, 90, 76, 0.96);
  font-size: 0.64rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 900;
}
.game-block[data-block="stress"] .quiz-menu-btn {
  --card-cta-bg: rgba(255, 255, 255, 0.68);
  --card-cta-border: rgba(255, 61, 0, 0.24);
}
.game-block[data-block="quiz"] .quiz-menu-btn {
  --card-cta-bg: rgba(255, 255, 255, 0.68);
  --card-cta-border: rgba(127, 90, 255, 0.24);
}
.game-block[data-block="fun"] .quiz-menu-btn {
  --card-cta-bg: rgba(255, 255, 255, 0.68);
  --card-cta-border: rgba(56, 255, 179, 0.24);
}
.quiz-menu-btn.is-done {
  --card-progress: 100%;
}
.quiz-menu-btn.game-card--locked {
  --card-progress: 0%;
}
.quiz-menu-btn .game-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
}
.quiz-menu-btn .game-card-step {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  border-radius: 999px;
  font-size: 0.62rem;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
}
.quiz-menu-btn .game-card-step {
  color: rgba(8, 18, 34, 0.66);
  background: rgba(8, 18, 34, 0.06);
  border: 1px solid rgba(8, 18, 34, 0.08);
}
.quiz-menu-btn .game-card-status {
  display: inline-flex;
  align-items: center;
  padding: 4px 9px;
  border-radius: 999px;
  font-size: 0.62rem;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border: 1px solid rgba(8, 18, 34, 0.1);
  background: rgba(8, 18, 34, 0.06);
  color: rgba(8, 18, 34, 0.72);
  white-space: nowrap;
}
.quiz-menu-btn[data-status="next"] .game-card-status {
  border-color: rgba(0, 165, 180, 0.3);
  background: rgba(0, 165, 180, 0.14);
  color: rgba(0, 95, 104, 0.95);
}
.quiz-menu-btn[data-status="done"] .game-card-status {
  border-color: rgba(80, 200, 120, 0.32);
  background: rgba(80, 200, 120, 0.16);
  color: rgba(32, 115, 64, 0.95);
}
.quiz-menu-btn[data-status="locked"] .game-card-status {
  border-color: rgba(255, 120, 90, 0.3);
  background: rgba(255, 120, 90, 0.14);
  color: rgba(143, 49, 24, 0.95);
}

.quiz-menu-btn .game-card-mini {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  flex-wrap: wrap;
}
.quiz-menu-btn .game-card-ring {
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: conic-gradient(
    from 210deg,
    rgba(0, 210, 255, 0.92) var(--card-progress),
    rgba(8, 18, 34, 0.14) 0
  );
  position: relative;
  box-shadow: 0 10px 22px rgba(15, 23, 42, 0.1);
  flex: 0 0 auto;
}
.quiz-menu-btn .game-card-ring::after {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: inherit;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(8, 18, 34, 0.06);
}
.quiz-menu-btn .game-card-xp {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(60, 85, 150, 0.08);
  border: 1px solid rgba(60, 85, 150, 0.1);
  color: rgba(8, 18, 34, 0.76);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.quiz-menu-btn .game-card-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(0, 165, 180, 0.1);
  border: 1px solid rgba(0, 165, 180, 0.12);
  color: rgba(8, 18, 34, 0.72);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
}

.game-filters {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-top: 12px;
}
.game-filter-chip {
  border: 1px solid rgba(8, 18, 34, 0.1);
  background: rgba(255, 255, 255, 0.72);
  border-radius: 999px;
  padding: 10px 14px;
  min-height: 44px;
  font-weight: 900;
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(8, 18, 34, 0.72);
  cursor: pointer;
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    background 0.18s ease,
    border-color 0.18s ease;
}
.game-filter-chip:active {
  transform: translateY(1px);
}
.game-filter-chip:focus-visible {
  outline: 3px solid rgba(0, 210, 255, 0.22);
  outline-offset: 3px;
}
.game-filter-chip.is-active {
  border-color: rgba(0, 165, 180, 0.32);
  background: linear-gradient(
    135deg,
    rgba(0, 165, 180, 0.16),
    rgba(127, 90, 255, 0.14)
  );
  color: rgba(8, 18, 34, 0.92);
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.1);
}

@media (prefers-color-scheme: dark) {
  .game-block-submeta {
    color: rgba(255, 255, 255, 0.65);
  }
  .quiz-menu-btn .game-card-ring {
    background: conic-gradient(
      from 210deg,
      rgba(0, 210, 255, 0.9) var(--card-progress),
      rgba(255, 255, 255, 0.12) 0
    );
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.35);
  }
  .quiz-menu-btn .game-card-ring::after {
    background: rgba(10, 12, 20, 0.92);
    border: 1px solid rgba(255, 255, 255, 0.1);
  }
  .quiz-menu-btn .game-card-xp {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.78);
  }
  .quiz-menu-btn .game-card-chip {
    background: rgba(0, 165, 180, 0.14);
    border: 1px solid rgba(160, 245, 255, 0.14);
    color: rgba(255, 255, 255, 0.82);
  }
  .quiz-menu-btn .game-card-lesson {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.14);
    color: rgba(255, 255, 255, 0.88);
  }
  .quiz-menu-btn .game-card-step {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: rgba(219, 232, 255, 0.75);
  }
  .quiz-menu-btn .game-card-status {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.14);
    color: rgba(255, 255, 255, 0.82);
  }
  .quiz-menu-btn[data-status="next"] .game-card-status {
    border-color: rgba(160, 245, 255, 0.3);
    background: rgba(0, 165, 180, 0.2);
    color: rgba(196, 250, 255, 0.96);
  }
  .quiz-menu-btn[data-status="done"] .game-card-status {
    border-color: rgba(129, 241, 176, 0.28);
    background: rgba(44, 183, 104, 0.2);
    color: rgba(196, 255, 222, 0.95);
  }
  .quiz-menu-btn[data-status="locked"] .game-card-status {
    border-color: rgba(255, 133, 108, 0.28);
    background: rgba(255, 93, 61, 0.2);
    color: rgba(255, 212, 201, 0.95);
  }
  .game-filter-chip {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.82);
  }
  .game-filter-chip.is-active {
    border-color: rgba(160, 245, 255, 0.2);
    color: rgba(255, 255, 255, 0.92);
  }
  .game-block[data-block="practice"] .quiz-menu-btn[data-game-id="service"] {
    border-color: rgba(106, 236, 216, 0.34);
    box-shadow: 0 22px 52px rgba(0, 0, 0, 0.45);
  }
  .game-block[data-block="practice"]
    .quiz-menu-btn[data-game-id="service"]
    .game-card-pill {
    background: rgba(0, 180, 150, 0.24);
    border-color: rgba(106, 236, 216, 0.3);
    color: rgba(206, 255, 245, 0.96);
  }
}
body[data-theme="dark"]
  .game-block[data-block="practice"]
  .quiz-menu-btn[data-game-id="service"] {
  border-color: rgba(106, 236, 216, 0.34);
  box-shadow: 0 22px 52px rgba(0, 0, 0, 0.45);
}
body[data-theme="dark"]
  .game-block[data-block="practice"]
  .quiz-menu-btn[data-game-id="service"]
  .game-card-pill {
  background: rgba(0, 180, 150, 0.24);
  border-color: rgba(106, 236, 216, 0.3);
  color: rgba(206, 255, 245, 0.96);
}
.quiz-menu-btn > * {
  position: relative;
  z-index: 1;
}
.quiz-menu-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(
      circle at 10% 0%,
      var(--block-accent-a, rgba(0, 210, 255, 0.22)),
      transparent 40%
    ),
    radial-gradient(
      circle at 100% 20%,
      var(--block-accent-b, rgba(127, 90, 255, 0.2)),
      transparent 45%
    );
  opacity: 0.65;
  pointer-events: none;
  z-index: 0;
}
.quiz-menu-btn::after {
  content: "›";
  position: absolute;
  top: 14px;
  right: 14px;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  border: 1px solid var(--card-cta-border, rgba(4, 6, 12, 0.1));
  background: var(--card-cta-bg, rgba(255, 255, 255, 0.55));
  color: rgba(28, 33, 50, 0.85);
  font-size: 18px;
  line-height: 1;
  pointer-events: none;
  transition:
    transform 0.2s ease,
    background 0.2s ease;
  z-index: 2;
}
.quiz-menu-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 22px 44px rgba(4, 18, 60, 0.22);
}
.quiz-menu-btn:hover::after {
  transform: translateX(2px);
  background: rgba(255, 255, 255, 0.75);
}
.quiz-menu-btn:active {
  transform: scale(0.98);
}
.quiz-menu-btn:focus-visible {
  outline: 3px solid rgba(0, 210, 255, 0.22);
  outline-offset: 4px;
}
.quiz-menu-btn .game-card-icon {
  font-size: 1.9rem;
  width: 46px;
  height: 46px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.65);
  border: 1px solid rgba(4, 6, 12, 0.1);
  box-shadow: 0 14px 30px rgba(4, 18, 60, 0.12);
  position: relative;
}
.quiz-menu-btn .game-card-title {
  font-size: 1rem;
  font-weight: 800;
  line-height: 1.18;
  color: #1a1c2b;
}
.quiz-menu-btn .game-card-desc {
  font-size: 0.78rem;
  color: #5f6476;
  line-height: 1.36;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.quiz-menu-btn .game-lock-tip {
  font-size: 0.7rem;
  color: #ff3d00;
  margin-top: 6px;
  opacity: 0.8;
}
.quiz-menu-btn.game-card--locked {
  opacity: 0.55;
  pointer-events: none;
  filter: grayscale(0.2);
}
.quiz-menu-btn.is-done {
  border-color: rgba(0, 165, 180, 0.3);
  box-shadow:
    0 22px 48px rgba(0, 165, 180, 0.1),
    0 16px 34px rgba(4, 18, 60, 0.12);
}
.quiz-menu-btn.is-next {
  border-color: rgba(0, 165, 180, 0.34);
  box-shadow:
    0 24px 56px rgba(0, 165, 180, 0.14),
    0 16px 34px rgba(4, 18, 60, 0.14);
  transform: translateY(-1px);
}
.quiz-menu-btn.is-role-recommended {
  border-color: rgba(255, 190, 60, 0.48);
  box-shadow:
    0 22px 44px rgba(255, 190, 60, 0.2),
    0 16px 34px rgba(4, 18, 60, 0.12);
}
.quiz-menu-btn.is-done .game-card-icon::after {
  content: "✓";
  position: absolute;
  right: -6px;
  bottom: -6px;
  width: 20px;
  height: 20px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, #00a5b4, #7f5aff);
  color: #fff;
  font-weight: 900;
  font-size: 12px;
  box-shadow: 0 10px 20px rgba(0, 165, 180, 0.22);
  border: 2px solid rgba(255, 255, 255, 0.9);
}
.quiz-menu-btn .game-card-pill {
  font-size: 0.66rem;
  font-weight: 800;
  border-radius: 999px;
  padding: 3px 8px;
  background: rgba(0, 165, 180, 0.12);
  color: #00a5b4;
  align-self: flex-start;
  display: inline-block;
  margin-top: 6px;
}
.quiz-menu-btn .game-card-pill:empty {
  display: none;
}

/* Hero card: "Тренировка дня" */
.game-hero {
  border-radius: 28px;
  padding: 18px 18px 16px;
  background: linear-gradient(
    145deg,
    rgba(0, 210, 255, 0.16),
    rgba(127, 90, 255, 0.12),
    rgba(255, 206, 84, 0.1)
  );
  border: 1px solid rgba(8, 18, 34, 0.08);
  box-shadow: 0 22px 55px rgba(15, 23, 42, 0.12);
  position: relative;
  overflow: hidden;
}
.game-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 8% 0%, rgba(0, 210, 255, 0.26), transparent 42%),
    radial-gradient(
      circle at 100% 15%,
      rgba(127, 90, 255, 0.22),
      transparent 45%
    ),
    radial-gradient(
      circle at 60% 120%,
      rgba(255, 206, 84, 0.22),
      transparent 55%
    );
  opacity: 0.9;
  pointer-events: none;
}
.game-hero > * {
  position: relative;
  z-index: 1;
}
.game-hero-kicker {
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 900;
  color: rgba(8, 18, 34, 0.7);
  margin-bottom: 8px;
}
.game-hero-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 1.25rem;
  font-weight: 900;
  letter-spacing: -0.02em;
  color: rgba(8, 18, 34, 0.92);
  margin-bottom: 8px;
}
.game-hero-icon {
  width: 40px;
  height: 40px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.86);
  border: 1px solid rgba(8, 18, 34, 0.1);
  box-shadow: 0 16px 34px rgba(15, 23, 42, 0.1);
}
.game-hero-sub {
  font-size: 0.95rem;
  line-height: 1.45;
  color: rgba(0, 0, 0, 0.64);
  margin-bottom: 12px;
}
.game-hero-actions {
  display: flex;
  gap: 10px;
  align-items: center;
}
.game-hero-btn {
  border: 1px solid rgba(8, 18, 34, 0.12);
  background: rgba(255, 255, 255, 0.78);
  border-radius: 16px;
  padding: 11px 14px;
  font-weight: 900;
  cursor: pointer;
  flex: 1;
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    background 0.18s ease;
}
.game-hero-btn.primary {
  border: none;
  background: linear-gradient(135deg, #00d2ff, #7f5aff);
  color: #0b1021;
  box-shadow: 0 18px 42px rgba(0, 210, 255, 0.22);
}
.game-hero-btn:active {
  transform: translateY(1px);
}
.game-hero-meta {
  margin-top: 10px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.game-hero-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(8, 18, 34, 0.1);
  color: rgba(8, 18, 34, 0.78);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

@media (max-width: 640px) {
  .game-hero {
    border-radius: 24px;
    padding: 16px 14px 14px;
  }
  .game-hero-title {
    font-size: 1.15rem;
  }
}

@media (prefers-color-scheme: dark) {
  .game-hero {
    background: linear-gradient(
      145deg,
      rgba(0, 210, 255, 0.12),
      rgba(127, 90, 255, 0.12),
      rgba(255, 206, 84, 0.08)
    );
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 28px 75px rgba(0, 0, 0, 0.55);
  }
  .game-hero-kicker {
    color: rgba(255, 255, 255, 0.72);
  }
  .game-hero-title {
    color: rgba(255, 255, 255, 0.92);
  }
  .game-hero-sub {
    color: rgba(255, 255, 255, 0.72);
  }
  .game-hero-icon {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.14);
    box-shadow: 0 22px 55px rgba(0, 0, 0, 0.35);
  }
  .game-hero-btn {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.14);
    color: rgba(255, 255, 255, 0.92);
  }
  .game-hero-btn.primary {
    color: #0b1021;
  }
  .game-hero-pill {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.14);
    color: rgba(255, 255, 255, 0.8);
  }
}
.quiz-game {
  display: none;
  flex-direction: column;
  height: 100%;
}
.quiz-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}
.quiz-level-badge {
  background: var(--accent-yellow);
  padding: 5px 12px;
  border-radius: 20px;
  font-weight: 800;
  color: #333;
  font-size: 0.9rem;
}
.quiz-progress {
  width: 100%;
  height: 8px;
  background: #eee;
  border-radius: 4px;
  margin-bottom: 20px;
  overflow: hidden;
}
.quiz-progress-bar {
  height: 100%;
  background: linear-gradient(90deg, var(--primary-blue), var(--primary-dark));
  width: 0%;
  transition: width 0.3s;
}
.quiz-streak {
  margin-left: auto;
  font-size: 12px;
  font-weight: 800;
  color: rgba(8, 18, 34, 0.75);
  background: rgba(255, 214, 102, 0.2);
  border: 1px solid rgba(255, 214, 102, 0.45);
  padding: 6px 10px;
  border-radius: 999px;
  letter-spacing: 0.02em;
  transition:
    transform 160ms ease,
    box-shadow 160ms ease;
}
.quiz-streak.is-boost {
  transform: scale(1.05);
  box-shadow: 0 8px 18px rgba(255, 200, 0, 0.22);
}
.game-shell {
  background: linear-gradient(
    150deg,
    rgba(255, 255, 255, 0.94),
    rgba(245, 248, 252, 0.92)
  );
  border-radius: 30px;
  padding: 24px;
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.12);
  border: 1px solid rgba(8, 18, 34, 0.06);
  display: flex;
  flex-direction: column;
  gap: 25px;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  max-width: 960px;
  margin: 0 auto;
}
.game-shell > * {
  position: relative;
  z-index: 1;
}
.game-shell::before {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  background:
    radial-gradient(
      900px 320px at 18% -80px,
      rgba(0, 210, 255, 0.16),
      rgba(255, 255, 255, 0) 60%
    ),
    radial-gradient(
      860px 320px at 82% -90px,
      rgba(127, 90, 255, 0.14),
      rgba(255, 255, 255, 0) 62%
    ),
    radial-gradient(
      900px 340px at 50% 120%,
      rgba(255, 206, 84, 0.1),
      rgba(255, 255, 255, 0) 62%
    );
  opacity: 0.9;
  pointer-events: none;
  z-index: 0;
}
.game-shell-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  flex-wrap: wrap;
}
.game-shell-back {
  border: 1px solid rgba(0, 0, 0, 0.14);
  background: rgba(255, 255, 255, 0.7);
  border-radius: 14px;
  padding: 9px 14px;
  font-weight: 800;
  letter-spacing: 0.3px;
  cursor: pointer;
  transition:
    background 0.18s ease,
    transform 0.18s ease,
    box-shadow 0.18s ease;
}
.game-shell-back:hover {
  background: rgba(60, 85, 150, 0.1);
  box-shadow: 0 12px 26px rgba(15, 23, 42, 0.12);
  transform: translateY(-1px);
}
.game-shell-back:focus-visible {
  outline: 3px solid rgba(0, 210, 255, 0.22);
  outline-offset: 3px;
}
.game-shell-info {
  flex: 1 1 200px;
}
.game-shell-title {
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--primary-dark);
}
.game-shell-hint {
  font-size: 0.9rem;
  color: #555;
}
.game-shell-meta {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-end;
}
.game-shell-progress {
  width: 180px;
  height: 8px;
  background: rgba(0, 0, 0, 0.08);
  border-radius: 999px;
  overflow: hidden;
}
.game-shell-progress-bar {
  width: 100%;
  height: 8px;
}
.game-shell-progress-fill {
  width: 0%;
  height: 100%;
  background: linear-gradient(90deg, #ffce54, #ff3d00);
  transition: width 0.3s ease;
  border-radius: 999px;
}
.game-shell-xp {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--primary-dark);
  letter-spacing: 0.4px;
}
.game-shell-skillline {
  width: 100%;
  font-size: 0.9rem;
  color: #444;
  font-weight: 600;
  letter-spacing: 0.25px;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  padding-top: 12px;
  margin-top: 6px;
}
.game-shell-body {
  display: flex;
  flex-direction: column;
  gap: 25px;
}
@media (prefers-color-scheme: dark) {
  #quiz-container .game-shell {
    background: linear-gradient(
      160deg,
      rgba(255, 255, 255, 0.08),
      rgba(255, 255, 255, 0.04)
    );
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 28px 80px rgba(0, 0, 0, 0.45);
  }
  #quiz-container .game-shell-back {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.14);
    color: rgba(255, 255, 255, 0.86);
  }
  #quiz-container .game-shell-title,
  #quiz-container .game-shell-xp,
  #quiz-container .game-shell-skillline {
    color: rgba(255, 255, 255, 0.92);
  }
  #quiz-container .game-shell-hint {
    color: rgba(219, 232, 255, 0.78);
  }
  #quiz-container .game-shell-skillline {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
  }
  #quiz-container .game-shell-progress {
    background: rgba(255, 255, 255, 0.1);
  }

  #quiz-container .game-block {
    background: linear-gradient(
      160deg,
      rgba(255, 255, 255, 0.08),
      rgba(255, 255, 255, 0.04)
    );
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.4);
  }
  #quiz-container .game-block.is-focus {
    border-color: rgba(160, 245, 255, 0.24);
    box-shadow:
      0 28px 80px rgba(0, 0, 0, 0.5),
      0 0 0 1px rgba(160, 245, 255, 0.12);
  }
  #quiz-container .game-block-title {
    color: rgba(255, 255, 255, 0.92);
  }
  #quiz-container .game-block-desc {
    color: rgba(219, 232, 255, 0.74);
  }
  #quiz-container .game-block-progress .track {
    background: rgba(255, 255, 255, 0.12);
  }

  #quiz-container .quiz-menu-btn {
    background: linear-gradient(
      160deg,
      rgba(255, 255, 255, 0.08),
      rgba(255, 255, 255, 0.04)
    );
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.38);
  }
  #quiz-container .quiz-menu-btn::after {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.85);
  }
  #quiz-container .quiz-menu-btn .game-card-icon {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
  }
  #quiz-container .quiz-menu-btn .game-card-title {
    color: rgba(255, 255, 255, 0.92);
  }
  #quiz-container .quiz-menu-btn .game-card-desc {
    color: rgba(219, 232, 255, 0.74);
  }
  #quiz-container .quiz-menu-btn .game-card-pill {
    background: rgba(0, 165, 180, 0.18);
    color: rgba(160, 245, 255, 0.95);
  }
  #quiz-container .quiz-menu-btn .game-lock-tip {
    color: rgba(255, 120, 90, 0.95);
  }
}
.skill-map {
  display: grid;
  gap: 12px;
}

body.game-mode::before {
  content: "";
  position: fixed;
  inset: 0;
  background: rgba(2, 3, 12, 0.7);
  backdrop-filter: blur(8px);
  z-index: 8990;
  pointer-events: none;
}

/* Когда открыт игровой оверлей — прячем нижнюю навигацию, чтобы не перекрывала кнопки */
body.game-mode .bottom-nav {
  transform: translateY(120%);
  opacity: 0;
  pointer-events: none;
}
body.game-mode #back-to-top {
  opacity: 0;
  pointer-events: none;
}

body.game-mode #sticky-nav-wrapper {
  display: none !important;
}

body.game-mode #quiz-container {
  display: none !important;
}

body.game-mode #quiz-container .game-panel,
body.game-mode #quiz-container .game-shell-body > * {
  max-width: 100%;
}

body.game-mode #quiz-container.game-active .game-shell {
  background: rgba(255, 255, 255, 0.94);
}

body.game-mode .game-shell {
  display: none;
}

body.game-mode .horoscope-section,
body.game-mode .leaderboard-section,
body.game-mode .rating-wrapper,
body.game-mode #randomizer-container {
  display: none !important;
}
#game-overlay #randomizer-container {
  display: flex !important;
}
.skill-item {
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(0, 0, 0, 0.05);
  border-radius: 16px;
  padding: 14px 16px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.05);
}
.skill-item-head {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-bottom: 8px;
}
.skill-icon {
  width: 36px;
  height: 36px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  color: white;
  background: #333;
}
.skill-label {
  font-weight: 700;
  color: var(--primary-dark);
  font-size: 0.95rem;
}
.skill-meta {
  font-size: 0.75rem;
  color: #666;
  letter-spacing: 0.2px;
}
.skill-bar {
  width: 100%;
  height: 6px;
  background: rgba(0, 0, 0, 0.05);
  border-radius: 999px;
  overflow: hidden;
}
.skill-bar-fill {
  width: 0%;
  height: 100%;
  border-radius: 999px;
  transition: width 0.4s ease;
}
.quiz-question-text {
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--primary-dark);
  margin-bottom: 20px;
  text-align: center;
  line-height: 1.4;
}
.quiz-img {
  width: 100%;
  max-height: 250px;
  object-fit: cover;
  border-radius: 16px;
  margin-bottom: 20px;
  display: none;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
}
.quiz-options {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
.quiz-option {
  padding: 18px;
  border-radius: 16px;
  border: 2px solid #eee;
  background: var(--white);
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-gray);
  cursor: pointer;
  transition: all 0.1s;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.quiz-option:active {
  transform: scale(0.98);
}
.quiz-option.correct {
  background: var(--correct-green);
  border-color: var(--correct-green);
  color: white;
  animation: pop 0.3s;
  box-shadow: 0 0 15px rgba(0, 200, 83, 0.5);
}
.quiz-option.wrong {
  background: var(--wrong-red);
  border-color: var(--wrong-red);
  color: white;
  animation: shake 0.4s;
}
.quiz-toast {
  position: fixed;
  bottom: 100px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.9);
  color: white;
  padding: 12px 20px;
  border-radius: 30px;
  font-size: 0.9rem;
  z-index: 2000;
  opacity: 0;
  transition: opacity 0.3s;
  pointer-events: none;
  text-align: center;
  width: 90%;
  max-width: 400px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}
.quiz-toast.show {
  opacity: 1;
}
.quiz-result {
  display: none;
  text-align: center;
  padding: 40px 20px;
}
#game-overlay .quiz-result {
  position: relative;
  z-index: 1;
  background: var(--game-panel-bg);
  border-radius: var(--game-panel-radius);
  padding: 34px 28px;
  max-width: var(--game-panel-max-width);
  width: min(var(--game-panel-max-width), calc(100% - 80px));
  max-height: calc(100vh - 80px);
  max-height: calc(100dvh - 80px);
  box-shadow: var(--game-panel-shadow);
  border: var(--game-panel-border);
  overflow: auto;
}
#game-overlay .quiz-result::before {
  content: "";
  position: absolute;
  inset: -2px;
  background:
    radial-gradient(circle at 20% 0%, rgba(0, 210, 255, 0.22), transparent 42%),
    radial-gradient(
      circle at 100% 25%,
      rgba(127, 90, 255, 0.22),
      transparent 48%
    ),
    radial-gradient(
      circle at 50% 120%,
      rgba(255, 206, 84, 0.18),
      transparent 55%
    );
  opacity: 0.9;
  pointer-events: none;
  filter: blur(0.3px);
}
#game-overlay .quiz-result > * {
  position: relative;
  z-index: 1;
}
.result-emoji {
  width: 112px;
  height: 112px;
  margin: 0 auto 16px;
  display: grid;
  place-items: center;
  font-size: 54px;
  border-radius: 32px;
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(8, 18, 34, 0.1);
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.18);
  animation: bounce 1.2s ease-in-out infinite;
}
@media (prefers-color-scheme: dark) {
  .result-emoji {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.14);
    box-shadow: 0 28px 80px rgba(0, 0, 0, 0.45);
  }
}
.result-title {
  font-size: 1.8rem;
  font-weight: 900;
  margin-bottom: 12px;
  color: var(--primary-dark);
  letter-spacing: -0.02em;
}
.result-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 14px 0 14px;
}
.result-stats:empty {
  display: none;
  margin: 0;
}
.result-chip {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  column-gap: 8px;
  row-gap: 2px;
  align-items: center;
  padding: 10px 12px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.66);
  border: 1px solid rgba(8, 18, 34, 0.1);
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.1);
}
.result-chip-icon {
  grid-row: 1 / span 2;
  font-size: 18px;
  opacity: 0.95;
}
.result-chip-label {
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(0, 0, 0, 0.55);
}
.result-chip-value {
  font-size: 15px;
  font-weight: 900;
  color: rgba(8, 18, 34, 0.92);
}
.result-insights {
  display: none;
  margin: 8px 0 18px;
  text-align: left;
}
.result-insights.is-collapsible {
  display: grid;
  gap: 8px;
}
.result-insights:empty {
  display: none;
}
.result-insights-toggle {
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(8, 18, 34, 0.14);
  background: rgba(255, 255, 255, 0.72);
  color: rgba(8, 18, 34, 0.88);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.02em;
  cursor: pointer;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
}
.result-insights-toggle-icon {
  font-size: 14px;
  line-height: 1;
}
.result-insights-toggle-label {
  flex: 1;
}
.result-insights-toggle-caret {
  font-size: 14px;
  transition: transform 220ms ease;
}
.result-insights-toggle[aria-expanded="true"] .result-insights-toggle-caret {
  transform: rotate(180deg);
}
.result-insights-body[hidden] {
  display: none !important;
}
.result-insights-body {
  display: block;
}
.result-cosmos-panel {
  border-radius: 18px;
  border: 1px solid rgba(0, 150, 126, 0.26);
  background:
    radial-gradient(
      420px 180px at 8% 0%,
      rgba(0, 196, 173, 0.14),
      transparent 62%
    ),
    linear-gradient(
      145deg,
      rgba(232, 255, 248, 0.95),
      rgba(236, 247, 255, 0.94)
    );
  box-shadow: 0 16px 34px rgba(0, 100, 90, 0.14);
  padding: 14px 14px 12px;
}
.result-cosmos-title {
  font-size: 0.92rem;
  font-weight: 900;
  color: rgba(0, 83, 72, 0.96);
  letter-spacing: 0.02em;
  margin-bottom: 10px;
}
.result-cosmos-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 10px;
}
.result-cosmos-metric {
  border-radius: 12px;
  border: 1px solid rgba(0, 128, 111, 0.24);
  background: rgba(255, 255, 255, 0.66);
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.result-cosmos-metric span {
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 800;
  color: rgba(0, 83, 72, 0.74);
}
.result-cosmos-metric b {
  font-size: 16px;
  color: rgba(8, 18, 34, 0.94);
}
.result-cosmos-subtitle {
  margin: 10px 0 6px;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(0, 83, 72, 0.7);
}
.result-cosmos-values,
.result-cosmos-cases {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.result-cosmos-chip,
.result-cosmos-case {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  border: 1px solid rgba(0, 118, 103, 0.22);
  background: rgba(255, 255, 255, 0.72);
  color: rgba(0, 83, 72, 0.92);
  font-size: 12px;
  font-weight: 700;
  padding: 4px 10px;
  line-height: 1.2;
}
@media (max-width: 520px) {
  .result-stats {
    grid-template-columns: 1fr;
  }
  .result-cosmos-grid {
    grid-template-columns: 1fr;
  }
}
@media (prefers-color-scheme: dark) {
  .result-title {
    color: rgba(255, 255, 255, 0.92);
  }
  .result-chip {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.35);
  }
  .result-chip-label {
    color: rgba(255, 255, 255, 0.62);
  }
  .result-chip-value {
    color: rgba(255, 255, 255, 0.92);
  }
  .result-insights-toggle {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.14);
    color: rgba(230, 244, 255, 0.92);
    box-shadow: 0 16px 34px rgba(0, 0, 0, 0.34);
  }
  .result-cosmos-panel {
    border-color: rgba(82, 227, 202, 0.34);
    background:
      radial-gradient(
        420px 180px at 8% 0%,
        rgba(61, 205, 177, 0.2),
        transparent 62%
      ),
      linear-gradient(145deg, rgba(11, 42, 51, 0.95), rgba(16, 31, 53, 0.94));
    box-shadow: 0 20px 42px rgba(0, 0, 0, 0.38);
  }
  .result-cosmos-title,
  .result-cosmos-subtitle {
    color: rgba(177, 245, 234, 0.88);
  }
  .result-cosmos-metric {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(119, 242, 220, 0.28);
  }
  .result-cosmos-metric span {
    color: rgba(171, 244, 233, 0.72);
  }
  .result-cosmos-metric b {
    color: rgba(239, 252, 255, 0.94);
  }
  .result-cosmos-chip,
  .result-cosmos-case {
    border-color: rgba(119, 242, 220, 0.28);
    background: rgba(255, 255, 255, 0.07);
    color: rgba(223, 248, 244, 0.92);
  }
}
body[data-theme="dark"] .result-cosmos-panel {
  border-color: rgba(82, 227, 202, 0.34);
  background:
    radial-gradient(
      420px 180px at 8% 0%,
      rgba(61, 205, 177, 0.2),
      transparent 62%
    ),
    linear-gradient(145deg, rgba(11, 42, 51, 0.95), rgba(16, 31, 53, 0.94));
  box-shadow: 0 20px 42px rgba(0, 0, 0, 0.38);
}
body[data-theme="dark"] .result-insights-toggle {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.14);
  color: rgba(230, 244, 255, 0.92);
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.34);
}
body[data-theme="dark"] .result-cosmos-title,
body[data-theme="dark"] .result-cosmos-subtitle {
  color: rgba(177, 245, 234, 0.88);
}
body[data-theme="dark"] .result-cosmos-metric {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(119, 242, 220, 0.28);
}
body[data-theme="dark"] .result-cosmos-metric span {
  color: rgba(171, 244, 233, 0.72);
}
body[data-theme="dark"] .result-cosmos-metric b {
  color: rgba(239, 252, 255, 0.94);
}
body[data-theme="dark"] .result-cosmos-chip,
body[data-theme="dark"] .result-cosmos-case {
  border-color: rgba(119, 242, 220, 0.28);
  background: rgba(255, 255, 255, 0.07);
  color: rgba(223, 248, 244, 0.92);
}
.result-text {
  font-size: 1.05rem;
  margin-bottom: 18px;
  color: #666;
  line-height: 1.55;
}
@media (prefers-color-scheme: dark) {
  #game-overlay .quiz-question-text {
    color: rgba(255, 255, 255, 0.92);
  }
  #game-overlay .quiz-option {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.86);
  }
  #game-overlay .quiz-option::before {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.14);
    color: rgba(255, 255, 255, 0.86);
  }
  #game-overlay .quiz-img {
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.45);
  }
  #game-overlay .result-title {
    color: rgba(255, 255, 255, 0.92);
  }
  #game-overlay .result-text {
    color: rgba(219, 232, 255, 0.78);
  }
}
@keyframes pop {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes shake {
  0%,
  100% {
    transform: translateX(0);
  }
  25% {
    transform: translateX(-5px);
  }
  75% {
    transform: translateX(5px);
  }
}
@keyframes bounce {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}

.training-panel {
  display: none;
  flex-direction: column;
  gap: 16px;
}
.training-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}
.training-title {
  font-size: 1.2rem;
  font-weight: 700;
}
.training-round {
  font-size: 0.85rem;
  color: #666;
  letter-spacing: 0.4px;
}
.training-order-card {
  display: flex;
  gap: 16px;
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(0, 0, 0, 0.05);
  border-radius: 20px;
  padding: 18px;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.08);
}
.training-order-card img {
  width: 110px;
  height: 110px;
  object-fit: cover;
  border-radius: 16px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}
.training-item-meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.training-item-name {
  font-size: 1.1rem;
  font-weight: 700;
}
.training-item-category,
.training-item-description,
.training-item-composition,
.training-item-allergens {
  font-size: 0.85rem;
  color: #555;
}
.training-question {
  background: #f7f9fc;
  border-radius: 18px;
  padding: 18px;
  font-size: 1rem;
  font-weight: 600;
  border: 1px solid rgba(0, 0, 0, 0.05);
}
.training-options {
  display: grid;
  gap: 10px;
}
.training-option {
  background: var(--white);
  border-radius: 16px;
  padding: 14px;
  border: 1px solid #e3e8f1;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06);
  cursor: pointer;
  font-weight: 600;
  transition:
    transform 0.2s,
    border-color 0.2s;
}
.training-option:hover {
  transform: translateY(-2px);
  border-color: var(--primary-blue);
}
.training-option.correct {
  border-color: #00c853;
  background: #e6f4eb;
  color: #076f40;
}
.training-option.wrong {
  border-color: #ff3d00;
  background: #ffe0d4;
  color: #b71c1c;
}
.training-option.good {
  border-color: rgba(0, 165, 180, 0.55);
  background: rgba(0, 165, 180, 0.1);
  color: rgba(0, 98, 108, 0.95);
}
.training-feedback {
  min-height: 24px;
  font-size: 0.9rem;
  color: #444;
}

/* АПСЕЛЛ-ХОД */
.upsell-panel .game-hint-badge {
  margin-top: 10px;
}
.upsell-scene {
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 18px;
  padding: 14px 16px;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.06);
}
.upsell-context {
  font-weight: 800;
  color: rgba(10, 18, 34, 0.92);
  font-size: 1rem;
  line-height: 1.35;
}
.upsell-guest {
  margin-top: 8px;
  color: rgba(10, 18, 34, 0.72);
  font-size: 0.92rem;
  line-height: 1.35;
}
.upsell-meta {
  margin-top: 10px;
  color: var(--game-muted, rgba(10, 18, 34, 0.68));
  font-size: 0.82rem;
  font-weight: 650;
  letter-spacing: 0.02em;
}
.upsell-options {
  margin-top: 12px;
}
.upsell-feedback {
  margin-top: 10px;
  min-height: 22px;
  font-size: 0.95rem;
  font-weight: 650;
  color: rgba(10, 18, 34, 0.78);
}
.upsell-actions {
  margin-top: 8px;
}
.upsell-timer {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 10px;
}
.upsell-timer-bar {
  flex: 1;
  height: 10px;
  border-radius: 999px;
  background: var(--game-track, rgba(0, 0, 0, 0.08));
  overflow: hidden;
  position: relative;
}
.upsell-timer-bar .fill {
  height: 100%;
  width: 0%;
  border-radius: inherit;
  background: linear-gradient(
    90deg,
    rgba(255, 206, 84, 1),
    rgba(255, 61, 0, 1)
  );
  transition: width 0.1s linear;
}
.upsell-timer-text {
  width: 34px;
  text-align: right;
  font-weight: 900;
  letter-spacing: 0.04em;
  color: var(--game-text, rgba(10, 18, 34, 0.88));
}
.leaderboard-section {
  margin-top: 18px;
}
.leaderboard-section--top {
  display: grid;
  gap: 14px;
}
.leaderboard-card {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(132px, 170px) minmax(0, 1fr);
  gap: 20px;
  align-items: stretch;
  background:
    radial-gradient(
      125% 112% at 10% 0%,
      rgba(255, 224, 132, 0.42),
      rgba(255, 255, 255, 0) 52%
    ),
    radial-gradient(
      108% 112% at 100% 100%,
      rgba(112, 188, 255, 0.26),
      rgba(255, 255, 255, 0) 58%
    ),
    linear-gradient(
      152deg,
      rgba(255, 255, 255, 0.988),
      rgba(244, 250, 255, 0.95)
    );
  border-radius: 28px;
  padding: 22px 20px 20px;
  border: 1px solid rgba(255, 218, 145, 0.42);
  box-shadow:
    0 30px 76px rgba(15, 23, 42, 0.17),
    inset 0 1px 0 rgba(255, 255, 255, 0.96),
    inset 0 -30px 54px rgba(255, 222, 128, 0.1);
  isolation: isolate;
  transition:
    box-shadow 0.22s ease,
    border-color 0.22s ease,
    transform 0.22s ease,
    background 0.22s ease;
}
@media (hover: hover) {
  .leaderboard-card:hover {
    transform: translateY(-1px);
    border-color: rgba(255, 228, 172, 0.66);
    box-shadow:
      0 34px 82px rgba(15, 23, 42, 0.2),
      inset 0 1px 0 rgba(255, 255, 255, 0.96),
      inset 0 -30px 58px rgba(255, 222, 128, 0.14);
  }
}
.leaderboard-open-glow,
.leaderboard-open-salute {
  position: absolute;
  pointer-events: none;
  z-index: 0;
  opacity: 0;
}
.leaderboard-open-glow {
  inset: -34% -26%;
  border-radius: 50%;
  background:
    radial-gradient(
      circle at 50% 52%,
      rgba(255, 230, 125, 0.72),
      rgba(255, 230, 125, 0) 56%
    ),
    radial-gradient(
      circle at 50% 34%,
      rgba(255, 255, 255, 0.78),
      rgba(255, 255, 255, 0) 42%
    );
  mix-blend-mode: screen;
  filter: blur(1px);
}
.leaderboard-open-salute {
  bottom: -56px;
  width: 210px;
  height: 210px;
  border-radius: 50%;
  background:
    radial-gradient(
      circle at 50% 50%,
      rgba(255, 242, 186, 0.98) 0 6%,
      rgba(255, 242, 186, 0) 7%
    ),
    radial-gradient(
      circle at 20% 34%,
      rgba(255, 255, 255, 0.96) 0 2.3%,
      rgba(255, 255, 255, 0) 2.8%
    ),
    radial-gradient(
      circle at 36% 18%,
      rgba(255, 228, 122, 0.9) 0 2.5%,
      rgba(255, 228, 122, 0) 3%
    ),
    radial-gradient(
      circle at 62% 16%,
      rgba(255, 207, 86, 0.86) 0 2.1%,
      rgba(255, 207, 86, 0) 2.7%
    ),
    radial-gradient(
      circle at 78% 30%,
      rgba(255, 255, 255, 0.92) 0 2%,
      rgba(255, 255, 255, 0) 2.6%
    ),
    radial-gradient(
      circle at 84% 56%,
      rgba(255, 180, 88, 0.84) 0 1.9%,
      rgba(255, 180, 88, 0) 2.5%
    ),
    radial-gradient(
      circle at 68% 74%,
      rgba(255, 232, 164, 0.9) 0 2.2%,
      rgba(255, 232, 164, 0) 2.9%
    ),
    radial-gradient(
      circle at 36% 82%,
      rgba(255, 255, 255, 0.9) 0 2%,
      rgba(255, 255, 255, 0) 2.5%
    ),
    radial-gradient(
      circle at 14% 66%,
      rgba(255, 196, 104, 0.82) 0 1.8%,
      rgba(255, 196, 104, 0) 2.4%
    ),
    radial-gradient(
      circle at 48% 58%,
      rgba(255, 172, 66, 0.36),
      rgba(255, 172, 66, 0) 60%
    );
  filter: drop-shadow(0 0 18px rgba(255, 194, 86, 0.48));
}
.leaderboard-open-salute--left {
  left: -108px;
  transform-origin: 76% 68%;
}
.leaderboard-open-salute--right {
  right: -108px;
  transform-origin: 24% 68%;
}
.leaderboard-card.is-open-salute {
  border-color: rgba(255, 218, 120, 0.62);
  box-shadow:
    0 28px 72px rgba(15, 23, 42, 0.18),
    0 0 36px rgba(255, 188, 82, 0.46),
    0 0 92px rgba(255, 140, 84, 0.3);
}
.leaderboard-card.is-open-salute::before {
  opacity: 0.9;
  animation: leaderboardBestSheen 1200ms cubic-bezier(0.2, 0.9, 0.2, 1);
}
.leaderboard-card.is-open-salute .leaderboard-open-glow {
  animation: leaderboardBestGlow 1800ms ease-out;
}
.leaderboard-card.is-open-salute .leaderboard-open-salute--left {
  animation: leaderboardBestSaluteLeft 1650ms cubic-bezier(0.16, 0.88, 0.22, 1);
}
.leaderboard-card.is-open-salute .leaderboard-open-salute--right {
  animation: leaderboardBestSaluteRight 1650ms cubic-bezier(0.16, 0.88, 0.22, 1);
}
.leaderboard-card.is-open-salute::after {
  background: linear-gradient(
    135deg,
    rgba(255, 214, 110, 0.95),
    rgba(255, 150, 86, 0.9)
  );
  border-color: rgba(255, 242, 204, 0.68);
  color: rgba(48, 22, 4, 0.96);
  animation: leaderboardBestBadgePulse 1450ms cubic-bezier(0.18, 0.86, 0.24, 1);
}
@keyframes leaderboardBestGlow {
  0% {
    opacity: 0;
    transform: scale(0.74);
  }
  18% {
    opacity: 1;
    transform: scale(0.92);
  }
  62% {
    opacity: 0.84;
    transform: scale(1.08);
  }
  100% {
    opacity: 0;
    transform: scale(1.22);
  }
}
@keyframes leaderboardBestBadgePulse {
  0% {
    transform: translateY(0) scale(0.88) rotate(-7deg);
    box-shadow:
      0 0 0 0 rgba(255, 187, 78, 0.54),
      0 12px 24px rgba(15, 23, 42, 0.16);
    text-shadow: none;
    filter: saturate(1);
  }
  24% {
    transform: translateY(-2px) scale(1.09) rotate(-2deg);
    box-shadow:
      0 0 0 10px rgba(255, 187, 78, 0.24),
      0 16px 32px rgba(15, 23, 42, 0.2);
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.66);
    filter: saturate(1.18);
  }
  60% {
    transform: translateY(0) scale(1.02) rotate(1deg);
    box-shadow:
      0 0 0 18px rgba(255, 187, 78, 0.1),
      0 12px 26px rgba(15, 23, 42, 0.16);
    text-shadow: 0 0 5px rgba(255, 255, 255, 0.42);
    filter: saturate(1.08);
  }
  100% {
    transform: translateY(0) scale(1) rotate(0deg);
    box-shadow:
      0 0 0 22px rgba(255, 187, 78, 0),
      0 8px 16px rgba(15, 23, 42, 0.14);
    text-shadow: none;
    filter: saturate(1);
  }
}
@keyframes leaderboardBestSaluteLeft {
  0% {
    opacity: 0;
    transform: translate(-54px, 44px) rotate(-30deg) scale(0.36);
  }
  20% {
    opacity: 1;
    transform: translate(-16px, 4px) rotate(-14deg) scale(0.92);
  }
  60% {
    opacity: 0.88;
    transform: translate(12px, -36px) rotate(-2deg) scale(1.24);
  }
  100% {
    opacity: 0;
    transform: translate(24px, -58px) rotate(4deg) scale(1.38);
  }
}
@keyframes leaderboardBestSaluteRight {
  0% {
    opacity: 0;
    transform: translate(54px, 44px) rotate(30deg) scale(0.36);
  }
  20% {
    opacity: 1;
    transform: translate(16px, 4px) rotate(14deg) scale(0.92);
  }
  60% {
    opacity: 0.88;
    transform: translate(-12px, -36px) rotate(2deg) scale(1.24);
  }
  100% {
    opacity: 0;
    transform: translate(-24px, -58px) rotate(-4deg) scale(1.38);
  }
}
@keyframes leaderboardBestSaluteLeftMobile {
  0% {
    opacity: 0;
    transform: translate(-36px, 26px) rotate(-26deg) scale(0.44);
  }
  20% {
    opacity: 1;
    transform: translate(-10px, 2px) rotate(-12deg) scale(0.86);
  }
  60% {
    opacity: 0.86;
    transform: translate(8px, -24px) rotate(-1deg) scale(1.12);
  }
  100% {
    opacity: 0;
    transform: translate(16px, -38px) rotate(3deg) scale(1.22);
  }
}
@keyframes leaderboardBestSaluteRightMobile {
  0% {
    opacity: 0;
    transform: translate(36px, 26px) rotate(26deg) scale(0.44);
  }
  20% {
    opacity: 1;
    transform: translate(10px, 2px) rotate(12deg) scale(0.86);
  }
  60% {
    opacity: 0.86;
    transform: translate(-8px, -24px) rotate(1deg) scale(1.12);
  }
  100% {
    opacity: 0;
    transform: translate(-16px, -38px) rotate(-3deg) scale(1.22);
  }
}
@keyframes leaderboardBestSheen {
  0% {
    transform: translateX(-12%) translateY(-4%) scale(1);
  }
  52% {
    transform: translateX(4%) translateY(0%) scale(1.02);
  }
  100% {
    transform: translateX(0%) translateY(0%) scale(1);
  }
}
.leaderboard-card::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.86;
  background:
    radial-gradient(
      620px 220px at 20% -50px,
      rgba(255, 255, 255, 0.78),
      rgba(255, 255, 255, 0) 62%
    ),
    linear-gradient(180deg, rgba(255, 255, 255, 0.32), rgba(255, 255, 255, 0));
}
.leaderboard-card::after {
  content: attr(data-badge);
  position: absolute;
  top: 14px;
  left: 14px;
  padding: 8px 12px;
  border-radius: 999px;
  background: linear-gradient(
    135deg,
    rgba(52, 58, 74, 0.9),
    rgba(27, 33, 48, 0.82)
  );
  border: 1px solid rgba(255, 255, 255, 0.28);
  color: rgba(255, 255, 255, 0.94);
  font-weight: 900;
  letter-spacing: 0.06em;
  font-size: 9px;
  text-transform: uppercase;
  backdrop-filter: blur(9px);
  transform-origin: 8% 18%;
  will-change: transform, box-shadow, text-shadow, filter;
  box-shadow: 0 14px 30px rgba(15, 23, 42, 0.2);
}
.leaderboard-card > * {
  position: relative;
  z-index: 1;
}
.leaderboard-card > .leaderboard-open-glow,
.leaderboard-card > .leaderboard-open-salute {
  position: absolute;
  z-index: 0;
}
@media (max-width: 640px) {
  .leaderboard-open-salute {
    width: 158px;
    height: 158px;
    bottom: -34px;
    filter: drop-shadow(0 0 12px rgba(255, 194, 86, 0.42));
  }
  .leaderboard-open-salute--left {
    left: -82px;
  }
  .leaderboard-open-salute--right {
    right: -82px;
  }
  .leaderboard-card.is-open-salute .leaderboard-open-salute--left {
    animation-name: leaderboardBestSaluteLeftMobile;
    animation-duration: 1500ms;
  }
  .leaderboard-card.is-open-salute .leaderboard-open-salute--right {
    animation-name: leaderboardBestSaluteRightMobile;
    animation-duration: 1500ms;
  }
  .leaderboard-card.is-open-salute::after {
    animation-duration: 1300ms;
  }
}
.leaderboard-card.is-activity-mode,
.leaderboard-card.is-hype-mode {
  background:
    radial-gradient(
      120% 120% at 18% 0%,
      rgba(77, 214, 255, 0.25),
      rgba(255, 255, 255, 0) 55%
    ),
    radial-gradient(
      120% 120% at 100% 100%,
      rgba(76, 212, 163, 0.22),
      rgba(255, 255, 255, 0) 55%
    ),
    var(--game-panel-bg);
}
#leaderboard-top-card {
  cursor: pointer;
}
.leaderboard-top-avatar-shell {
  position: relative;
  flex: 0 0 auto;
  width: 170px;
  height: 170px;
  display: grid;
  place-items: center;
  align-self: start;
  margin-top: 30px;
}
.leaderboard-top-avatar-glow,
.leaderboard-top-avatar-ring,
.leaderboard-top-avatar-sheen {
  position: absolute;
  pointer-events: none;
}
.leaderboard-top-avatar-glow {
  inset: 8px;
  border-radius: 38px;
  background: radial-gradient(
    circle at 64% 70%,
    rgba(92, 207, 255, 0.24),
    rgba(92, 207, 255, 0) 58%
  );
  filter: blur(14px);
  opacity: 0.64;
}
.leaderboard-top-avatar-ring {
  inset: 0;
  border-radius: 40px;
  background: linear-gradient(
    145deg,
    rgba(255, 236, 179, 0.98),
    rgba(116, 219, 255, 0.94)
  );
  box-shadow: 0 18px 34px rgba(40, 93, 156, 0.16);
}
.leaderboard-top-avatar-sheen {
  display: none;
}
.leaderboard-avatar {
  width: 88px;
  height: 88px;
  border-radius: 22px;
  object-fit: cover;
  border: 1px solid rgba(255, 255, 255, 0.86);
  box-shadow:
    0 18px 46px rgba(0, 0, 0, 0.22),
    0 0 0 4px rgba(255, 232, 154, 0.32);
  background: rgba(0, 0, 0, 0.12);
}
#best-employee-photo {
  position: relative;
  z-index: 1;
  width: 150px;
  height: 150px;
  border-radius: 36px;
  border: 2px solid rgba(255, 255, 255, 0.86);
  box-shadow:
    0 24px 44px rgba(15, 23, 42, 0.22),
    0 0 0 4px rgba(255, 228, 152, 0.22);
}
.leaderboard-top-head {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
#leaderboard-top-card > .leaderboard-top-switch {
  position: absolute;
  top: 10px;
  right: 12px;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  width: fit-content;
  padding: 3px;
  border-radius: 999px;
  border: 1px solid rgba(149, 179, 214, 0.4);
  background: rgba(244, 250, 255, 0.82);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.76);
}
.leaderboard-top-tab {
  appearance: none;
  border: 1px solid transparent;
  background: transparent;
  color: rgba(43, 76, 115, 0.76);
  min-height: 22px;
  padding: 0 8px;
  border-radius: 999px;
  font-size: 0.54rem;
  font-weight: 900;
  letter-spacing: 0.035em;
  cursor: pointer;
  transition:
    border-color 0.18s ease,
    background 0.18s ease,
    color 0.18s ease,
    transform 0.18s ease,
    box-shadow 0.18s ease;
}
.leaderboard-top-tab.is-active {
  border-color: rgba(78, 174, 255, 0.5);
  background: linear-gradient(
    135deg,
    rgba(236, 247, 255, 0.96),
    rgba(218, 240, 255, 0.92)
  );
  color: rgba(10, 70, 122, 0.96);
  box-shadow: 0 7px 16px rgba(43, 124, 201, 0.14);
}
.leaderboard-top-tab.is-disabled,
.leaderboard-top-tab:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  box-shadow: none;
}
@media (hover: hover) {
  .leaderboard-top-tab:hover {
    transform: translateY(-1px);
    border-color: rgba(70, 171, 255, 0.54);
  }
  .leaderboard-top-tab.is-disabled:hover,
  .leaderboard-top-tab:disabled:hover {
    transform: none;
    border-color: rgba(129, 170, 218, 0.42);
  }
}
.leaderboard-card.is-hero-pinned .leaderboard-top-tab.is-active {
  border-color: rgba(255, 183, 72, 0.58);
  background: linear-gradient(
    135deg,
    rgba(255, 247, 226, 0.98),
    rgba(255, 232, 175, 0.92)
  );
  color: rgba(128, 79, 7, 0.95);
}
.leaderboard-name {
  order: 1;
  font-size: clamp(1.56rem, 4.6vw, 1.92rem);
  font-weight: 980;
  letter-spacing: -0.03em;
  line-height: 0.98;
  color: rgba(8, 18, 34, 0.96);
}
.leaderboard-role {
  font-size: 1rem;
  letter-spacing: 0.01em;
  font-weight: 760;
  color: rgba(8, 18, 34, 0.68);
}
.leaderboard-top-note {
  display: none;
  margin-top: -2px;
  align-items: center;
  width: fit-content;
  min-height: 20px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid rgba(106, 178, 255, 0.24);
  background: rgba(223, 240, 255, 0.56);
  font-size: 0.68rem;
  font-weight: 840;
  letter-spacing: 0.01em;
  color: rgba(19, 67, 112, 0.82);
}
.leaderboard-card.is-activity-mode .leaderboard-top-note {
  display: inline-flex;
}
.leaderboard-top-metrics {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 8px;
}
.leaderboard-points {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas:
    "icon score"
    "icon label";
  align-items: center;
  column-gap: 9px;
  row-gap: 2px;
  margin-top: 2px;
  padding: 10px 13px;
  border-radius: 17px;
  background: linear-gradient(
    135deg,
    rgba(255, 247, 215, 0.98),
    rgba(255, 232, 160, 0.86)
  );
  border: 1px solid rgba(255, 204, 77, 0.42);
  color: rgba(156, 95, 0, 0.98);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.82),
    0 12px 24px rgba(255, 188, 82, 0.16);
}
.leaderboard-points-icon {
  grid-area: icon;
  font-size: 1.06rem;
  line-height: 1;
  align-self: center;
}
#best-employee-score {
  grid-area: score;
  font-size: 1.38rem;
  font-weight: 980;
  letter-spacing: -0.01em;
  line-height: 1;
}
#best-employee-metric-label {
  grid-area: label;
  font-size: 0.6rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.9;
}
.leaderboard-points[data-mode="monthActive"] {
  background: linear-gradient(
    135deg,
    rgba(222, 252, 243, 0.98),
    rgba(191, 242, 226, 0.9)
  );
  border-color: rgba(47, 184, 140, 0.34);
  color: rgba(8, 102, 76, 0.96);
}
.leaderboard-hype {
  margin-top: 0;
  width: fit-content;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255, 126, 76, 0.24);
  background: linear-gradient(
    135deg,
    rgba(255, 245, 236, 0.95),
    rgba(255, 232, 214, 0.88)
  );
  color: rgba(154, 62, 25, 0.9);
  font-size: 0.7rem;
  font-weight: 900;
  letter-spacing: 0.02em;
}
.leaderboard-top-main {
  min-width: 0;
  display: grid;
  align-content: start;
  gap: 9px;
  flex: 1 1 auto;
  padding-top: 30px;
}
.leaderboard-team-progress {
  margin-top: 3px;
  padding: 11px 12px;
  border-radius: 16px;
  border: 1px solid rgba(112, 196, 255, 0.34);
  background: linear-gradient(
    135deg,
    rgba(241, 249, 255, 0.96),
    rgba(229, 243, 255, 0.9)
  );
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72);
}
.leaderboard-team-progress-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(21, 82, 135, 0.82);
}
.leaderboard-team-progress-head strong {
  font-size: 0.88rem;
  letter-spacing: 0;
  color: rgba(11, 54, 99, 0.96);
}
.leaderboard-team-progress-track {
  position: relative;
  overflow: hidden;
  margin-top: 8px;
  height: 10px;
  border-radius: 999px;
  background: rgba(57, 106, 154, 0.12);
}
.leaderboard-team-progress-fill {
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(
    90deg,
    rgba(76, 180, 255, 0.96),
    rgba(0, 214, 255, 0.92)
  );
  box-shadow: 0 6px 18px rgba(0, 180, 255, 0.28);
  transition: width 0.22s ease;
}
.leaderboard-team-progress-meta {
  margin-top: 7px;
  font-size: 0.8rem;
  font-weight: 860;
  color: rgba(8, 18, 34, 0.8);
}
.leaderboard-team-progress[data-state="mid"] .leaderboard-team-progress-fill {
  background: linear-gradient(
    90deg,
    rgba(76, 180, 255, 0.96),
    rgba(82, 232, 187, 0.92)
  );
}
.leaderboard-team-progress[data-state="done"] {
  border-color: rgba(110, 222, 160, 0.34);
  background: linear-gradient(
    135deg,
    rgba(241, 255, 247, 0.96),
    rgba(229, 251, 239, 0.92)
  );
}
.leaderboard-team-progress[data-state="done"] .leaderboard-team-progress-fill {
  background: linear-gradient(
    90deg,
    rgba(62, 204, 129, 0.96),
    rgba(100, 235, 170, 0.94)
  );
  box-shadow: 0 8px 22px rgba(62, 204, 129, 0.3);
}
.leaderboard-top-meta {
  margin-top: 1px;
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  padding: 7px 8px;
  border-radius: 14px;
  border: 1px solid rgba(124, 169, 221, 0.28);
  background: rgba(239, 247, 255, 0.74);
}
.leaderboard-top-dots {
  display: none;
}
.leaderboard-top-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: rgba(111, 142, 176, 0.35);
  transition:
    transform 0.2s ease,
    background 0.2s ease,
    box-shadow 0.2s ease;
}
.leaderboard-top-dot.is-active {
  background: rgba(44, 158, 255, 0.92);
  box-shadow: 0 0 0 4px rgba(44, 158, 255, 0.18);
  transform: scale(1.05);
}
.leaderboard-card.is-activity-mode .leaderboard-top-dot.is-active {
  background: rgba(23, 182, 140, 0.92);
  box-shadow: 0 0 0 4px rgba(23, 182, 140, 0.18);
}
.leaderboard-card.is-hero-rotating .leaderboard-top-main,
.leaderboard-card.is-hero-rotating .leaderboard-top-avatar-shell {
  animation: leaderboardHeroSwap 1150ms cubic-bezier(0.2, 0.9, 0.2, 1);
}
@keyframes leaderboardHeroSwap {
  0% {
    opacity: 0.42;
    transform: translateY(5px) scale(0.99);
    filter: saturate(0.92);
  }
  40% {
    opacity: 0.86;
    transform: translateY(-2px) scale(1.01);
    filter: saturate(1.06);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: saturate(1);
  }
}
.leaderboard-top-chip {
  display: inline-flex;
  align-items: center;
  min-height: 23px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid var(--league-accent-strong, rgba(8, 18, 34, 0.16));
  background: var(--league-accent-soft, rgba(8, 18, 34, 0.07));
  color: rgba(8, 18, 34, 0.8);
  font-size: 0.63rem;
  font-weight: 860;
  letter-spacing: 0.028em;
}
.leaderboard-top-chip:not(.leaderboard-top-chip--tier) {
  opacity: 0.92;
}
.leaderboard-top-chip--tier {
  border-color: rgba(70, 182, 255, 0.34);
  background: linear-gradient(
    135deg,
    rgba(236, 247, 255, 0.94),
    rgba(223, 239, 255, 0.9)
  );
  color: rgba(20, 84, 142, 0.94);
}
.leaderboard-top-chip--duel {
  border-color: rgba(255, 140, 82, 0.42);
  background: linear-gradient(
    135deg,
    rgba(255, 238, 220, 0.9),
    rgba(255, 214, 184, 0.78)
  );
  color: rgba(112, 42, 6, 0.94);
}
.leaderboard-top-chip--duel[data-tone="active"] {
  border-color: rgba(255, 131, 70, 0.48);
  background: linear-gradient(
    135deg,
    rgba(255, 233, 209, 0.92),
    rgba(255, 199, 167, 0.84)
  );
}
.leaderboard-top-chip--duel[data-tone="warm"] {
  border-color: rgba(255, 122, 58, 0.56);
  background: linear-gradient(
    135deg,
    rgba(255, 225, 194, 0.94),
    rgba(255, 178, 134, 0.88)
  );
}
.leaderboard-top-chip--duel[data-tone="hot"] {
  border-color: rgba(255, 98, 40, 0.62);
  background: linear-gradient(
    135deg,
    rgba(255, 202, 168, 0.96),
    rgba(255, 141, 87, 0.92)
  );
  color: rgba(88, 24, 2, 0.98);
  box-shadow: 0 8px 20px rgba(255, 116, 52, 0.24);
}
.leaderboard-top-chip--battle {
  border-color: rgba(95, 201, 255, 0.42);
  background: linear-gradient(
    135deg,
    rgba(228, 247, 255, 0.94),
    rgba(202, 236, 255, 0.84)
  );
  color: rgba(10, 79, 130, 0.95);
}
.leaderboard-top-chip--battle[data-tone="warm"] {
  border-color: rgba(77, 197, 255, 0.5);
  background: linear-gradient(
    135deg,
    rgba(214, 244, 255, 0.96),
    rgba(174, 231, 255, 0.9)
  );
  box-shadow: 0 8px 20px rgba(69, 175, 255, 0.16);
}
.leaderboard-top-chip--battle[data-tone="hot"] {
  border-color: rgba(45, 184, 255, 0.62);
  background: linear-gradient(
    135deg,
    rgba(204, 241, 255, 0.98),
    rgba(140, 220, 255, 0.94)
  );
  color: rgba(4, 57, 102, 0.98);
  box-shadow: 0 10px 24px rgba(57, 173, 255, 0.24);
}
#leaderboard-top-card[data-league-tier="bronze"] {
  border-color: rgba(210, 154, 114, 0.44);
  background:
    radial-gradient(
      120% 110% at 10% 0%,
      rgba(244, 187, 142, 0.34),
      rgba(255, 255, 255, 0) 52%
    ),
    radial-gradient(
      108% 112% at 100% 100%,
      rgba(117, 185, 255, 0.24),
      rgba(255, 255, 255, 0) 58%
    ),
    linear-gradient(
      152deg,
      rgba(255, 253, 251, 0.988),
      rgba(245, 250, 255, 0.95)
    );
}
#leaderboard-top-card[data-league-tier="silver"] {
  border-color: rgba(186, 201, 219, 0.48);
  background:
    radial-gradient(
      120% 110% at 10% 0%,
      rgba(226, 236, 246, 0.34),
      rgba(255, 255, 255, 0) 52%
    ),
    radial-gradient(
      108% 112% at 100% 100%,
      rgba(120, 192, 255, 0.24),
      rgba(255, 255, 255, 0) 58%
    ),
    linear-gradient(
      152deg,
      rgba(255, 255, 255, 0.99),
      rgba(244, 250, 255, 0.95)
    );
}
#leaderboard-top-card[data-league-tier="gold"] {
  border-color: rgba(240, 193, 94, 0.52);
}
#leaderboard-top-card[data-league-tier="platinum"] {
  border-color: rgba(125, 203, 255, 0.52);
  background:
    radial-gradient(
      120% 110% at 10% 0%,
      rgba(195, 228, 255, 0.36),
      rgba(255, 255, 255, 0) 52%
    ),
    radial-gradient(
      108% 112% at 100% 100%,
      rgba(113, 196, 255, 0.28),
      rgba(255, 255, 255, 0) 58%
    ),
    linear-gradient(
      152deg,
      rgba(250, 254, 255, 0.992),
      rgba(241, 248, 255, 0.95)
    );
}
#leaderboard-top-card[data-league-tier="bronze"] .leaderboard-top-avatar-ring {
  background: linear-gradient(
    145deg,
    rgba(243, 192, 151, 0.98),
    rgba(109, 198, 255, 0.9)
  );
}
#leaderboard-top-card[data-league-tier="silver"] .leaderboard-top-avatar-ring {
  background: linear-gradient(
    145deg,
    rgba(227, 237, 246, 0.98),
    rgba(114, 202, 255, 0.92)
  );
}
#leaderboard-top-card[data-league-tier="gold"] .leaderboard-top-avatar-ring {
  background: linear-gradient(
    145deg,
    rgba(255, 234, 178, 0.99),
    rgba(116, 219, 255, 0.94)
  );
}
#leaderboard-top-card[data-league-tier="platinum"]
  .leaderboard-top-avatar-ring {
  background: linear-gradient(
    145deg,
    rgba(214, 240, 255, 0.99),
    rgba(126, 225, 255, 0.96)
  );
}
.leaderboard-push-fab {
  position: absolute;
  top: 12px;
  left: 12px;
  width: 34px;
  height: 34px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.72);
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.94),
    rgba(235, 245, 255, 0.9)
  );
  color: rgba(16, 52, 108, 0.92);
  font-size: 17px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.16);
  transition:
    transform 0.16s ease,
    box-shadow 0.16s ease,
    border-color 0.16s ease,
    color 0.16s ease;
  z-index: 3;
}
.leaderboard-push-fab:hover {
  transform: translateY(-1px);
  box-shadow: 0 16px 34px rgba(15, 23, 42, 0.2);
}
.leaderboard-push-fab.is-active {
  border-color: rgba(106, 207, 147, 0.78);
  background: linear-gradient(
    135deg,
    rgba(244, 255, 248, 0.96),
    rgba(224, 248, 236, 0.94)
  );
  color: rgba(18, 118, 66, 0.95);
}
.leaderboard-push-fab.is-active::after {
  content: "";
  position: absolute;
  right: 4px;
  bottom: 4px;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: rgba(24, 166, 92, 0.98);
  box-shadow: 0 0 0 3px rgba(24, 166, 92, 0.2);
}
.leaderboard-push-fab.is-busy {
  animation: leaderboardPushBusyPulse 860ms ease-in-out infinite;
}
.leaderboard-push-fab:disabled {
  opacity: 0.64;
  cursor: not-allowed;
  transform: none;
  box-shadow: 0 10px 20px rgba(15, 23, 42, 0.12);
}
.league-push-status {
  font-size: 0.68rem;
  font-weight: 760;
  color: rgba(8, 18, 34, 0.66);
  line-height: 1.2;
}
.league-push-status[hidden] {
  display: none !important;
}
.league-push-status[data-state="success"] {
  color: rgba(18, 112, 62, 0.95);
}
.league-push-status[data-state="warn"] {
  color: rgba(146, 88, 8, 0.95);
}
.league-push-status[data-state="error"] {
  color: rgba(166, 35, 35, 0.95);
}
@keyframes leaderboardPushBusyPulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.06);
  }
  100% {
    transform: scale(1);
  }
}
.leaderboard-sales-badge {
  margin-top: 4px;
  display: inline-block;
  width: fit-content;
  max-width: min(100%, 340px);
  padding: 4px 9px;
  border-radius: 999px;
  border: 1px solid rgba(143, 198, 255, 0.34);
  background: rgba(0, 165, 180, 0.12);
  color: rgba(0, 92, 102, 0.94);
  font-size: 0.66rem;
  font-weight: 850;
  letter-spacing: 0.01em;
  line-height: 1.3;
  white-space: normal;
  overflow-wrap: anywhere;
}
.leaderboard-sales-badge.is-success {
  border-color: rgba(96, 204, 120, 0.45);
  background: rgba(96, 204, 120, 0.14);
  color: rgba(18, 94, 44, 0.95);
}
.leaderboard-sales-badge.is-failed {
  border-color: rgba(236, 141, 141, 0.42);
  background: rgba(236, 141, 141, 0.14);
  color: rgba(122, 36, 46, 0.96);
}
.leaderboard-sales-badge.is-pending {
  border-color: rgba(143, 198, 255, 0.34);
  background: rgba(0, 165, 180, 0.12);
  color: rgba(0, 92, 102, 0.94);
}
.leaderboard-alert {
  margin-top: 12px;
  font-size: 0.92rem;
  color: var(--game-muted, rgba(0, 0, 0, 0.68));
  font-weight: 750;
  letter-spacing: 0.01em;
}
.sales-mission-card {
  margin-top: 12px;
  border-radius: 20px;
  border: 1px solid rgba(162, 223, 255, 0.38);
  background:
    radial-gradient(
      100% 120% at 0% 0%,
      rgba(255, 215, 64, 0.18),
      rgba(255, 255, 255, 0) 56%
    ),
    radial-gradient(
      120% 120% at 100% 100%,
      rgba(0, 210, 255, 0.14),
      rgba(255, 255, 255, 0) 58%
    ),
    linear-gradient(
      150deg,
      rgba(255, 255, 255, 0.96),
      rgba(243, 249, 255, 0.92)
    );
  box-shadow: 0 18px 42px rgba(15, 23, 42, 0.12);
  padding: 12px;
}
.sales-mission-title {
  font-size: 0.74rem;
  font-weight: 930;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(0, 86, 97, 0.92);
}
.sales-mission-task {
  margin-top: 8px;
  font-size: 0.96rem;
  font-weight: 860;
  color: rgba(8, 18, 34, 0.92);
  line-height: 1.28;
}
.sales-mission-meta {
  margin-top: 5px;
  font-size: 0.76rem;
  color: rgba(8, 18, 34, 0.66);
  font-weight: 700;
}
.sales-mission-actions {
  margin-top: 10px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.sales-mission-btn {
  min-height: 38px;
  border-radius: 12px;
  border: 1px solid rgba(164, 208, 255, 0.42);
  background: rgba(255, 255, 255, 0.88);
  color: rgba(8, 18, 34, 0.86);
  font-size: 0.79rem;
  font-weight: 860;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition:
    transform 0.16s ease,
    box-shadow 0.16s ease,
    border-color 0.16s ease;
}
.sales-mission-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 24px rgba(15, 23, 42, 0.14);
}
.sales-mission-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}
.sales-mission-btn.is-success {
  border-color: rgba(112, 214, 136, 0.52);
  background: rgba(112, 214, 136, 0.14);
  color: rgba(16, 98, 44, 0.94);
}
.sales-mission-btn.is-muted {
  border-color: rgba(188, 197, 220, 0.56);
  background: rgba(232, 236, 245, 0.68);
  color: rgba(64, 74, 96, 0.92);
}
.sales-mission-status {
  margin-top: 9px;
  min-height: 18px;
  font-size: 0.75rem;
  font-weight: 780;
  color: rgba(8, 18, 34, 0.7);
}
.sales-mission-status.is-success {
  color: rgba(16, 98, 44, 0.96);
}
.sales-mission-status.is-failed {
  color: rgba(120, 42, 50, 0.95);
}
.sales-mission-status.is-pending {
  color: rgba(0, 86, 97, 0.94);
}
.leaderboard-list {
  margin-top: 16px;
  display: grid;
  gap: 10px;
}
.leaderboard-row {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 14px;
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0)),
    var(--game-choice-bg);
  border: 1px solid var(--game-choice-border);
  box-shadow: var(--game-choice-shadow);
  gap: 12px;
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    background 0.18s ease;
}
.leaderboard-row.is-rank-moving {
  z-index: 2;
  transition:
    transform 0.46s cubic-bezier(0.2, 0.9, 0.2, 1),
    box-shadow 0.18s ease,
    background 0.18s ease;
}
.leaderboard-row.is-rank-enter {
  animation: leaderboardRowEnter 0.42s cubic-bezier(0.2, 0.9, 0.2, 1);
}
.leaderboard-row:hover {
  transform: translateY(-1px);
  box-shadow: 0 18px 38px rgba(15, 23, 42, 0.16);
}
.leaderboard-row.is-me {
  outline: 2px solid rgba(0, 210, 255, 0.35);
  background: linear-gradient(
    135deg,
    rgba(0, 210, 255, 0.1),
    rgba(127, 90, 255, 0.08)
  );
}
.leaderboard-row.is-top1 {
  background: linear-gradient(
    135deg,
    rgba(255, 213, 79, 0.18),
    rgba(255, 255, 255, 0.02)
  );
}
.leaderboard-row.is-top2 {
  background: linear-gradient(
    135deg,
    rgba(205, 214, 227, 0.16),
    rgba(255, 255, 255, 0.02)
  );
}
.leaderboard-row.is-top3 {
  background: linear-gradient(
    135deg,
    rgba(205, 127, 50, 0.16),
    rgba(255, 255, 255, 0.02)
  );
}
.leaderboard-row-left {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  flex: 1 1 auto;
}
.leaderboard-row-left > div {
  min-width: 0;
}
.leaderboard-row-avatar {
  width: 36px;
  height: 36px;
  border-radius: 14px;
  object-fit: cover;
  border: 1px solid rgba(255, 255, 255, 0.42);
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.12);
}
.leaderboard-row strong {
  font-size: 0.95rem;
  line-height: 1.15;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  color: var(--game-text, rgba(8, 18, 34, 0.92));
}
.leaderboard-rank-delta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 18px;
  padding: 0 6px;
  border-radius: 999px;
  border: 1px solid rgba(8, 18, 34, 0.14);
  background: rgba(255, 255, 255, 0.78);
  font-size: 0.62rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  line-height: 1;
}
.leaderboard-rank-delta.is-up {
  color: rgba(22, 84, 0, 0.95);
  border-color: rgba(88, 204, 2, 0.44);
  background: rgba(88, 204, 2, 0.16);
}
.leaderboard-rank-delta.is-down {
  color: rgba(142, 30, 46, 0.95);
  border-color: rgba(255, 120, 120, 0.36);
  background: rgba(255, 120, 120, 0.14);
}
.leaderboard-rank-delta.is-new {
  color: rgba(0, 86, 97, 0.96);
  border-color: rgba(0, 165, 180, 0.34);
  background: rgba(0, 210, 255, 0.12);
}
.leaderboard-rank-delta.is-hold {
  color: rgba(8, 18, 34, 0.64);
  border-color: rgba(8, 18, 34, 0.16);
  background: rgba(255, 255, 255, 0.72);
}
.leaderboard-row span {
  font-size: 0.9rem;
  line-height: 1.2;
  color: var(--game-muted, rgba(0, 0, 0, 0.65));
}
.leaderboard-heat-chip {
  margin-top: 4px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 18px;
  padding: 0 8px;
  border-radius: 999px;
  border: 1px solid rgba(8, 18, 34, 0.14);
  background: rgba(255, 255, 255, 0.74);
  color: rgba(8, 18, 34, 0.68);
  font-size: 0.62rem;
  font-weight: 840;
  letter-spacing: 0.02em;
}
.leaderboard-heat-chip.is-hot {
  border-color: rgba(255, 138, 94, 0.44);
  background: rgba(255, 138, 94, 0.18);
  color: rgba(131, 50, 19, 0.96);
}
.leaderboard-heat-chip.is-warm {
  border-color: rgba(255, 194, 64, 0.44);
  background: rgba(255, 194, 64, 0.16);
  color: rgba(120, 78, 8, 0.96);
}
.leaderboard-heat-chip.is-active {
  border-color: rgba(0, 176, 209, 0.34);
  background: rgba(0, 176, 209, 0.14);
  color: rgba(0, 84, 104, 0.96);
}
.leaderboard-heat-chip.is-idle {
  border-color: rgba(8, 18, 34, 0.14);
  background: rgba(255, 255, 255, 0.72);
  color: rgba(8, 18, 34, 0.6);
}
.leaderboard-sales-inline {
  margin-top: 4px;
  display: inline-block;
  width: fit-content;
  max-width: 100%;
  padding: 3px 8px;
  border-radius: 10px;
  border: 1px solid rgba(151, 208, 255, 0.34);
  background: rgba(0, 165, 180, 0.1);
  color: rgba(0, 84, 94, 0.92);
  font-size: 0.68rem;
  font-weight: 820;
  letter-spacing: 0.01em;
  line-height: 1.3;
  white-space: normal;
  overflow-wrap: anywhere;
}
.leaderboard-sales-inline.is-success {
  border-color: rgba(96, 204, 120, 0.45);
  background: rgba(96, 204, 120, 0.14);
  color: rgba(20, 98, 46, 0.96);
}
.leaderboard-sales-inline.is-failed {
  border-color: rgba(236, 141, 141, 0.44);
  background: rgba(236, 141, 141, 0.15);
  color: rgba(122, 40, 50, 0.96);
}
.leaderboard-row .xp {
  font-weight: 900;
  color: rgba(255, 215, 64, 0.96);
  white-space: nowrap;
  padding: 8px 10px;
  border-radius: 999px;
  background: rgba(255, 215, 64, 0.1);
  border: 1px solid rgba(255, 215, 64, 0.16);
}
.leaderboard-row-right {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}
.leaderboard-reactions-group {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}
.leaderboard-reactions-group--top {
  margin-top: 8px;
}
.leaderboard-react-emoji {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1em;
}
.leaderboard-react-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-height: 34px;
  padding: 7px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255, 111, 64, 0.3);
  background: rgba(255, 111, 64, 0.12);
  color: rgba(188, 63, 18, 0.94);
  font-size: 0.8rem;
  font-weight: 850;
  line-height: 1;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition:
    transform 0.16s ease,
    box-shadow 0.16s ease,
    background 0.16s ease,
    border-color 0.16s ease,
    color 0.16s ease;
}
.leaderboard-react-btn[data-react-emoji="clap"] {
  border-color: rgba(125, 165, 255, 0.34);
  background: rgba(125, 165, 255, 0.14);
  color: rgba(29, 73, 162, 0.94);
}
.leaderboard-react-btn[data-react-emoji="muscle"] {
  border-color: rgba(84, 186, 132, 0.38);
  background: rgba(84, 186, 132, 0.14);
  color: rgba(16, 109, 57, 0.96);
}
.leaderboard-react-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 24px rgba(255, 111, 64, 0.18);
}
.leaderboard-react-btn .leaderboard-react-count {
  font-variant-numeric: tabular-nums;
}
.leaderboard-react-btn.is-active {
  background: linear-gradient(
    135deg,
    rgba(255, 111, 64, 0.95),
    rgba(255, 72, 0, 0.88)
  );
  border-color: rgba(255, 106, 58, 0.88);
  color: rgba(255, 255, 255, 0.98);
  box-shadow: 0 14px 28px rgba(255, 92, 44, 0.28);
}
.leaderboard-react-btn[data-react-emoji="clap"].is-active {
  background: linear-gradient(
    135deg,
    rgba(110, 150, 255, 0.95),
    rgba(68, 108, 246, 0.9)
  );
  border-color: rgba(122, 162, 255, 0.88);
  box-shadow: 0 14px 28px rgba(80, 118, 255, 0.24);
}
.leaderboard-react-btn[data-react-emoji="muscle"].is-active {
  background: linear-gradient(
    135deg,
    rgba(70, 190, 120, 0.95),
    rgba(35, 166, 100, 0.9)
  );
  border-color: rgba(98, 212, 145, 0.86);
  box-shadow: 0 14px 28px rgba(34, 175, 108, 0.24);
}
.leaderboard-react-btn.is-pending,
.leaderboard-react-btn:disabled {
  opacity: 0.62;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}
.leaderboard-top-react-btn {
  margin-top: 0;
  min-height: 34px;
  padding: 7px 11px;
  font-size: 0.8rem;
  justify-self: start;
}
.leaderboard-row-right .leaderboard-reactions-group {
  flex: 0 0 auto;
}
.leaderboard-row-right .leaderboard-react-btn {
  min-height: 31px;
  min-width: 42px;
  padding: 6px 7px;
  gap: 4px;
  font-size: 0.74rem;
}
.leaderboard-row-right .leaderboard-react-count {
  font-size: 0.68rem;
}
.leaderboard-react-btn.is-bump {
  animation: leaderboardReactionBump 0.46s cubic-bezier(0.2, 0.9, 0.22, 1);
}
.leaderboard-reaction-picker {
  position: fixed;
  z-index: 90000;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.26);
  background: rgba(18, 24, 34, 0.96);
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.34);
  opacity: 0;
  transform: translateY(4px) scale(0.98);
  pointer-events: none;
  transition:
    opacity 0.16s ease,
    transform 0.16s ease;
}
.leaderboard-reaction-picker.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}
.leaderboard-reaction-picker-btn {
  appearance: none;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.96);
  border-radius: 999px;
  min-height: 36px;
  min-width: 48px;
  padding: 6px 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  font-weight: 800;
  cursor: pointer;
}
.leaderboard-reaction-picker-btn .emoji {
  font-size: 1rem;
}
.leaderboard-reaction-picker-btn .count {
  font-size: 0.72rem;
  font-variant-numeric: tabular-nums;
}
.leaderboard-reaction-picker-btn.is-active {
  background: linear-gradient(
    135deg,
    rgba(255, 136, 78, 0.95),
    rgba(255, 84, 18, 0.92)
  );
  border-color: rgba(255, 170, 132, 0.78);
  box-shadow: 0 10px 24px rgba(255, 96, 32, 0.28);
}

.leaderboard-row[data-rank="1"] .leaderboard-row-left strong::before,
.leaderboard-row[data-rank="2"] .leaderboard-row-left strong::before,
.leaderboard-row[data-rank="3"] .leaderboard-row-left strong::before {
  display: inline-block;
  margin-right: 2px;
}
.leaderboard-row[data-rank="1"] .leaderboard-row-left strong::before {
  content: "🥇";
}
.leaderboard-row[data-rank="2"] .leaderboard-row-left strong::before {
  content: "🥈";
}
.leaderboard-row[data-rank="3"] .leaderboard-row-left strong::before {
  content: "🥉";
}
.leaderboard-row[data-heat="hot"] {
  border-color: rgba(255, 138, 94, 0.38);
}
.leaderboard-row[data-heat="warm"] {
  border-color: rgba(255, 194, 64, 0.34);
}
.leaderboard-row[data-heat="active"] {
  border-color: rgba(0, 176, 209, 0.3);
}
@keyframes leaderboardRowEnter {
  0% {
    opacity: 0;
    transform: translateY(8px) scale(0.985);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
@keyframes leaderboardReactionBump {
  0% {
    transform: translateY(0) scale(1);
  }
  36% {
    transform: translateY(-2px) scale(1.09);
  }
  100% {
    transform: translateY(0) scale(1);
  }
}

.quiz-view-pane[data-quiz-pane="rating"] {
  --league-accent: rgba(205, 127, 50, 0.95);
  --league-accent-soft: rgba(205, 127, 50, 0.18);
  --league-accent-strong: rgba(205, 127, 50, 0.32);
}
.quiz-view-pane[data-quiz-pane="rating"][data-league-tier="silver"] {
  --league-accent: rgba(160, 176, 198, 0.98);
  --league-accent-soft: rgba(160, 176, 198, 0.18);
  --league-accent-strong: rgba(160, 176, 198, 0.34);
}
.quiz-view-pane[data-quiz-pane="rating"][data-league-tier="gold"] {
  --league-accent: rgba(255, 194, 64, 0.98);
  --league-accent-soft: rgba(255, 194, 64, 0.2);
  --league-accent-strong: rgba(255, 194, 64, 0.38);
}
.quiz-view-pane[data-quiz-pane="rating"][data-league-tier="platinum"] {
  --league-accent: rgba(96, 232, 255, 0.96);
  --league-accent-soft: rgba(96, 232, 255, 0.2);
  --league-accent-strong: rgba(96, 232, 255, 0.38);
}

.rating-hero {
  position: relative;
  overflow: hidden;
  margin-top: 6px;
  padding: 16px 18px;
  border-radius: 24px;
  border: 1px solid rgba(8, 18, 34, 0.08);
  background:
    radial-gradient(
      140% 130% at 8% 0%,
      rgba(0, 210, 255, 0.16),
      rgba(255, 255, 255, 0) 58%
    ),
    radial-gradient(
      120% 120% at 100% 100%,
      rgba(127, 90, 255, 0.16),
      rgba(255, 255, 255, 0) 58%
    ),
    linear-gradient(
      150deg,
      rgba(255, 255, 255, 0.97),
      rgba(244, 248, 255, 0.92)
    );
  box-shadow: 0 24px 58px rgba(15, 23, 42, 0.14);
}
.rating-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    120deg,
    rgba(255, 255, 255, 0) 32%,
    rgba(255, 255, 255, 0.28) 48%,
    rgba(255, 255, 255, 0) 66%
  );
  opacity: 0.58;
}
.rating-hero-kicker,
.rating-hero-title,
.rating-hero-sub {
  position: relative;
  z-index: 1;
}
.rating-hero-kicker {
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(8, 18, 34, 0.62);
}
.rating-hero-title {
  margin-top: 6px;
  font-size: 1.34rem;
  font-weight: 950;
  letter-spacing: -0.02em;
  color: rgba(8, 18, 34, 0.94);
}
.rating-hero-sub {
  margin-top: 6px;
  font-size: 0.92rem;
  line-height: 1.4;
  color: rgba(8, 18, 34, 0.72);
}
.leaderboard-card,
.team-motivation-card,
.sales-mission-card,
.weekly-reward,
.league-captain,
.league-roster,
.league-season,
.league-events,
.rating-user-card,
.leaderboard-controls,
.rating-podium-wrap,
.league-you-now {
  backdrop-filter: blur(8px);
}
.team-motivation {
  margin-top: 14px;
  margin-bottom: 14px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.team-motivation-card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: 20px;
  border: 1px solid rgba(8, 18, 34, 0.12);
  background:
    radial-gradient(
      120% 120% at 0% 0%,
      rgba(0, 210, 255, 0.1),
      rgba(255, 255, 255, 0) 58%
    ),
    radial-gradient(
      120% 120% at 100% 100%,
      rgba(255, 180, 70, 0.1),
      rgba(255, 255, 255, 0) 62%
    ),
    linear-gradient(160deg, rgba(255, 255, 255, 0.96), rgba(246, 249, 255, 0.9));
  padding: 13px 13px 12px;
  box-shadow: 0 20px 46px rgba(15, 23, 42, 0.11);
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    border-color 0.18s ease;
}
.team-motivation-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(
    90deg,
    var(--league-accent, rgba(255, 215, 64, 0.84)),
    rgba(0, 210, 255, 0.84)
  );
  opacity: 0.78;
  z-index: 0;
}
.team-motivation-card::after {
  content: "";
  position: absolute;
  width: 220px;
  height: 220px;
  right: -126px;
  top: -138px;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(255, 255, 255, 0.52),
    rgba(255, 255, 255, 0)
  );
  pointer-events: none;
  z-index: 0;
}
.team-motivation-card > * {
  position: relative;
  z-index: 1;
}
.team-motivation-title {
  font-size: 0.76rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(8, 18, 34, 0.74);
}
.team-motivation-tier {
  margin-top: 6px;
  font-size: 1.08rem;
  font-weight: 950;
  color: rgba(8, 18, 34, 0.94);
}
.team-motivation-sub {
  margin-top: 5px;
  font-size: 0.78rem;
  line-height: 1.35;
  color: rgba(8, 18, 34, 0.66);
}
.team-motivation-progress {
  margin-top: 8px;
  height: 9px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(8, 18, 34, 0.12);
}
.team-motivation-progress-fill {
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(
    90deg,
    var(--league-accent, rgba(255, 215, 64, 0.95)),
    rgba(0, 210, 255, 0.88)
  );
  transition: width 260ms ease;
}
.team-motivation-label {
  margin-top: 7px;
  font-size: 0.76rem;
  font-weight: 800;
  color: rgba(8, 18, 34, 0.74);
}
.team-challenge-milestones {
  margin-top: 8px;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 4px;
}
.team-challenge-milestone {
  min-height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  border: 1px solid rgba(8, 18, 34, 0.14);
  background: rgba(255, 255, 255, 0.72);
  color: rgba(8, 18, 34, 0.54);
  font-size: 0.6rem;
  font-weight: 860;
  letter-spacing: 0.02em;
  transition:
    transform 0.16s ease,
    border-color 0.16s ease,
    background 0.16s ease,
    color 0.16s ease;
}
.team-challenge-milestone.is-done {
  border-color: var(--league-accent-strong, rgba(255, 215, 64, 0.38));
  background: var(--league-accent-soft, rgba(255, 215, 64, 0.18));
  color: rgba(8, 18, 34, 0.86);
}
.team-challenge-milestone.is-next {
  transform: translateY(-1px);
  border-color: rgba(0, 210, 255, 0.4);
  color: rgba(0, 84, 104, 0.96);
}
.league-insights-card {
  grid-column: 1 / -1;
  border-color: rgba(0, 165, 180, 0.26);
  background:
    radial-gradient(
      140% 120% at 0% 0%,
      rgba(0, 210, 255, 0.14),
      rgba(255, 255, 255, 0) 58%
    ),
    radial-gradient(
      120% 120% at 100% 100%,
      rgba(255, 215, 64, 0.16),
      rgba(255, 255, 255, 0) 62%
    ),
    linear-gradient(
      160deg,
      rgba(255, 255, 255, 0.98),
      rgba(245, 250, 255, 0.92)
    );
}
.league-breakdown {
  margin-top: 8px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.league-breakdown-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border-radius: 12px;
  border: 1px solid rgba(8, 18, 34, 0.1);
  background: rgba(255, 255, 255, 0.64);
  padding: 7px 9px;
  font-size: 0.74rem;
  color: rgba(8, 18, 34, 0.72);
}
.league-breakdown-row strong {
  font-size: 0.78rem;
  font-weight: 900;
  color: rgba(8, 18, 34, 0.9);
}
.league-spark-grid {
  margin-top: 8px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.league-spark-card {
  border-radius: 12px;
  border: 1px solid rgba(8, 18, 34, 0.1);
  background: rgba(255, 255, 255, 0.66);
  padding: 7px 8px;
}
.league-spark-title {
  font-size: 0.66rem;
  font-weight: 860;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: rgba(8, 18, 34, 0.7);
}
.league-sparkline {
  display: block;
  width: 100%;
  height: 38px;
  margin-top: 4px;
}
.league-sparkline-line {
  fill: none;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.league-sparkline-area {
  opacity: 0.22;
}
.league-sparkline-dot {
  stroke: #fff;
  stroke-width: 1;
}
.league-sparkline-line.is-user,
.league-sparkline-dot.is-user {
  stroke: rgba(255, 162, 84, 0.98);
}
.league-sparkline-area.is-user {
  fill: rgba(255, 162, 84, 0.74);
}
.league-sparkline-line.is-team,
.league-sparkline-dot.is-team {
  stroke: rgba(0, 176, 209, 0.96);
}
.league-sparkline-area.is-team {
  fill: rgba(0, 176, 209, 0.68);
}
.league-sparkline-dot.is-user {
  fill: rgba(255, 162, 84, 0.98);
}
.league-sparkline-dot.is-team {
  fill: rgba(0, 176, 209, 0.96);
}
.league-spark-meta {
  margin-top: 3px;
  font-size: 0.64rem;
  font-weight: 760;
  color: rgba(8, 18, 34, 0.62);
}
.league-duel-widget {
  margin-top: 8px;
  border-radius: 12px;
  border: 1px solid rgba(8, 18, 34, 0.1);
  background:
    radial-gradient(
      130% 120% at 100% 0%,
      rgba(255, 176, 92, 0.16),
      rgba(255, 255, 255, 0) 58%
    ),
    rgba(255, 255, 255, 0.68);
  padding: 8px 9px;
}
.league-duel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.league-duel-title {
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: rgba(8, 18, 34, 0.8);
}
.league-duel-rate {
  display: inline-flex;
  align-items: center;
  min-height: 21px;
  padding: 0 8px;
  border-radius: 999px;
  border: 1px solid rgba(255, 131, 70, 0.3);
  background: rgba(255, 244, 232, 0.86);
  color: rgba(122, 44, 8, 0.88);
  font-size: 0.62rem;
  font-weight: 860;
  letter-spacing: 0.02em;
}
.league-duel-widget[data-tone="warm"] .league-duel-rate,
.league-duel-widget[data-tone="hot"] .league-duel-rate {
  border-color: rgba(255, 114, 52, 0.44);
  background: rgba(255, 224, 198, 0.92);
}
.league-duel-widget[data-tone="hot"] .league-duel-rate {
  border-color: rgba(255, 96, 40, 0.58);
  background: linear-gradient(
    135deg,
    rgba(255, 220, 190, 0.96),
    rgba(255, 172, 132, 0.9)
  );
  color: rgba(86, 24, 2, 0.96);
}
.league-duel-meta {
  margin-top: 5px;
  font-size: 0.64rem;
  font-weight: 760;
  color: rgba(8, 18, 34, 0.68);
}
.league-duel-history {
  margin-top: 7px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.league-duel-pill {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  max-width: 100%;
  padding: 0 8px;
  border-radius: 999px;
  border: 1px solid rgba(8, 18, 34, 0.12);
  background: rgba(255, 255, 255, 0.82);
  color: rgba(8, 18, 34, 0.82);
  font-size: 0.62rem;
  font-weight: 820;
  letter-spacing: 0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.league-duel-pill.is-win {
  border-color: rgba(59, 176, 100, 0.38);
  background: rgba(109, 221, 149, 0.18);
  color: rgba(12, 88, 34, 0.96);
}
.league-duel-pill.is-loss {
  border-color: rgba(255, 117, 117, 0.34);
  background: rgba(255, 126, 126, 0.14);
  color: rgba(132, 26, 44, 0.95);
}
.league-duel-pill.is-draw {
  border-color: rgba(130, 146, 168, 0.34);
  background: rgba(192, 202, 218, 0.22);
  color: rgba(53, 64, 84, 0.92);
}
.league-duel-empty {
  width: 100%;
  border-radius: 10px;
  border: 1px dashed rgba(8, 18, 34, 0.18);
  background: rgba(255, 255, 255, 0.54);
  padding: 6px 8px;
  font-size: 0.63rem;
  font-weight: 740;
  color: rgba(8, 18, 34, 0.62);
}
.league-insight-notes {
  margin-top: 8px;
  display: grid;
  gap: 6px;
}
.league-insight-note {
  margin-top: 0;
  border-radius: 12px;
  border: 1px solid rgba(8, 18, 34, 0.12);
  border-left: 3px solid rgba(0, 165, 180, 0.42);
  background: rgba(255, 255, 255, 0.72);
  padding: 7px 9px;
  font-weight: 700;
}
.league-goals-card {
  grid-column: 1 / -1;
  border-color: rgba(255, 166, 94, 0.34);
  background:
    radial-gradient(
      140% 130% at 100% 0%,
      rgba(255, 215, 64, 0.2),
      rgba(255, 255, 255, 0) 56%
    ),
    radial-gradient(
      120% 120% at 0% 100%,
      rgba(255, 161, 119, 0.15),
      rgba(255, 255, 255, 0) 58%
    ),
    linear-gradient(
      160deg,
      rgba(255, 255, 255, 0.98),
      rgba(255, 250, 244, 0.92)
    );
}
.league-goals-list {
  margin-top: 8px;
  display: grid;
  gap: 7px;
}
.league-goal-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border-radius: 12px;
  border: 1px solid rgba(8, 18, 34, 0.1);
  background: rgba(255, 255, 255, 0.64);
  padding: 7px 9px;
  font-size: 0.74rem;
  color: rgba(8, 18, 34, 0.74);
}
.league-goal-row.is-done {
  border-color: rgba(35, 171, 101, 0.36);
  background: rgba(85, 206, 140, 0.16);
}
.league-goal-row .value {
  font-weight: 900;
  color: rgba(8, 18, 34, 0.92);
}
.league-goals-claim {
  margin-top: 10px;
  min-height: 34px;
  border-radius: 10px;
  border: 1px solid rgba(8, 18, 34, 0.12);
  background: linear-gradient(
    135deg,
    rgba(255, 215, 64, 0.32),
    rgba(255, 162, 83, 0.26)
  );
  color: rgba(8, 18, 34, 0.92);
  font-weight: 900;
  cursor: pointer;
}
.league-captain,
.league-roster,
.league-season {
  margin-top: 12px;
  margin-bottom: 12px;
  padding: 13px 13px 12px;
  border-radius: 20px;
  border: 1px solid rgba(8, 18, 34, 0.12);
  background:
    radial-gradient(
      130% 120% at 0% 0%,
      rgba(0, 210, 255, 0.1),
      rgba(255, 255, 255, 0) 58%
    ),
    radial-gradient(
      130% 120% at 100% 100%,
      rgba(255, 215, 64, 0.1),
      rgba(255, 255, 255, 0) 62%
    ),
    linear-gradient(
      160deg,
      rgba(255, 255, 255, 0.98),
      rgba(245, 249, 255, 0.92)
    );
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.11);
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    border-color 0.18s ease;
}
.league-captain-title {
  font-size: 0.98rem;
  font-weight: 900;
  color: rgba(8, 18, 34, 0.92);
}
.league-captain-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.league-captain-live {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid rgba(87, 160, 255, 0.28);
  background: rgba(255, 255, 255, 0.76);
  color: rgba(70, 108, 182, 0.94);
  font-size: 0.76rem;
  font-weight: 900;
  letter-spacing: 0.08em;
}
.league-captain-main {
  margin-top: 10px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px;
  align-items: start;
}
.league-captain-avatar-wrap {
  position: relative;
}
.league-captain-avatar,
.league-captain-avatar-fallback {
  width: 100px;
  height: 100px;
  border-radius: 28px;
}
.league-captain-avatar {
  display: block;
  object-fit: cover;
  border: 1px solid rgba(255, 255, 255, 0.78);
  box-shadow: 0 18px 34px rgba(15, 23, 42, 0.16);
  background: rgba(8, 18, 34, 0.08);
}
.league-captain-avatar-fallback {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.78);
  box-shadow: 0 18px 34px rgba(15, 23, 42, 0.16);
  background: linear-gradient(
    145deg,
    rgba(255, 215, 64, 0.28),
    rgba(255, 255, 255, 0.84)
  );
  color: rgba(8, 18, 34, 0.72);
  font-size: 1.75rem;
  font-weight: 900;
}
.league-captain-copy {
  min-width: 0;
  display: grid;
  gap: 8px;
}
.league-captain-kicker {
  font-size: 0.74rem;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(8, 18, 34, 0.56);
}
.league-captain-name {
  font-size: 1.15rem;
  font-weight: 900;
  color: rgba(8, 18, 34, 0.9);
}
.league-captain-role {
  font-size: 0.84rem;
  font-weight: 700;
  color: rgba(8, 18, 34, 0.72);
}
.league-captain-note {
  font-size: 0.76rem;
  line-height: 1.42;
  color: rgba(8, 18, 34, 0.62);
}
.league-captain-stats {
  display: grid;
  gap: 10px;
}
.league-captain-score-card {
  display: grid;
  gap: 2px;
  padding: 14px 16px;
  border-radius: 18px;
  border: 1px solid rgba(8, 18, 34, 0.1);
  background: rgba(255, 255, 255, 0.72);
}
.league-captain-score-card strong {
  font-size: clamp(2.2rem, 8vw, 3.1rem);
  line-height: 0.96;
  letter-spacing: -0.05em;
  color: rgba(170, 118, 44, 0.96);
}
.league-captain-score-card span {
  font-size: 0.94rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(8, 18, 34, 0.72);
}
.league-captain-mini {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.league-captain-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid rgba(87, 160, 255, 0.2);
  background: rgba(255, 255, 255, 0.68);
  font-size: 0.8rem;
  font-weight: 850;
  color: rgba(70, 108, 182, 0.94);
}
.league-captain-meta {
  font-size: 0.76rem;
  line-height: 1.42;
  color: rgba(8, 18, 34, 0.66);
}
.league-season-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.league-season-kicker {
  font-size: 0.72rem;
  color: rgba(8, 18, 34, 0.64);
}
.league-season-current {
  margin-top: 9px;
  border-radius: 13px;
  border: 1px solid rgba(8, 18, 34, 0.12);
  background: rgba(255, 255, 255, 0.72);
  padding: 8px 10px;
  font-size: 0.78rem;
  color: rgba(8, 18, 34, 0.8);
}
.league-season-list {
  margin-top: 8px;
  display: grid;
  gap: 7px;
}
.league-season-item {
  border-radius: 13px;
  border: 1px solid rgba(8, 18, 34, 0.12);
  background: rgba(255, 255, 255, 0.7);
  padding: 8px 10px;
}
.league-season-item-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 0.74rem;
  font-weight: 800;
  color: rgba(8, 18, 34, 0.78);
}
.league-season-item-sub {
  margin-top: 2px;
  font-size: 0.72rem;
  color: rgba(8, 18, 34, 0.62);
}

.league-roster-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.league-roster-head-side {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.league-roster-toggle {
  appearance: none;
  border: 1px solid rgba(8, 18, 34, 0.14);
  background: rgba(8, 18, 34, 0.05);
  color: rgba(8, 18, 34, 0.78);
  min-height: 27px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 850;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition:
    transform 0.14s ease,
    box-shadow 0.14s ease,
    border-color 0.14s ease,
    background 0.14s ease;
}

.league-roster-toggle:focus-visible {
  outline: none;
  border-color: rgba(0, 210, 255, 0.58);
  box-shadow: 0 0 0 3px rgba(0, 210, 255, 0.16);
}

.league-roster-list {
  margin-top: 9px;
  display: grid;
  gap: 8px;
}

.league-roster-list.is-animating {
  will-change: height;
}

.league-roster-row {
  appearance: none;
  border: 1px solid rgba(8, 18, 34, 0.12);
  background: rgba(255, 255, 255, 0.72);
  border-radius: 14px;
  padding: 8px 9px;
  width: 100%;
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  text-align: left;
  cursor: pointer;
  transition:
    border-color 0.16s ease,
    transform 0.16s ease,
    box-shadow 0.16s ease,
    background 0.16s ease;
}

.league-roster-tail {
  border-radius: 12px;
  border: 1px dashed rgba(8, 18, 34, 0.2);
  background: rgba(255, 255, 255, 0.58);
  padding: 8px 10px;
  font-size: 0.72rem;
  font-weight: 760;
  color: rgba(8, 18, 34, 0.66);
  text-align: center;
}

.league-roster-row.is-enter,
.league-roster-tail.is-enter {
  animation: leagueRosterItemReveal 340ms cubic-bezier(0.22, 0.9, 0.24, 1) both;
}

@keyframes leagueRosterItemReveal {
  0% {
    opacity: 0;
    transform: translateY(8px) scale(0.985);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.league-roster-row:focus-visible {
  outline: none;
  border-color: rgba(0, 210, 255, 0.56);
  box-shadow: 0 0 0 3px rgba(0, 210, 255, 0.14);
}

.league-roster-row[data-rank="1"] {
  border-color: rgba(255, 215, 64, 0.38);
  background: linear-gradient(
    135deg,
    rgba(255, 215, 64, 0.22),
    rgba(255, 255, 255, 0.74)
  );
}

.league-roster-row[data-rank="2"] {
  border-color: rgba(185, 198, 222, 0.42);
  background: linear-gradient(
    135deg,
    rgba(205, 214, 227, 0.2),
    rgba(255, 255, 255, 0.74)
  );
}

.league-roster-row[data-rank="3"] {
  border-color: rgba(205, 127, 50, 0.38);
  background: linear-gradient(
    135deg,
    rgba(205, 127, 50, 0.18),
    rgba(255, 255, 255, 0.74)
  );
}

.league-roster-row.is-me {
  border-color: rgba(0, 210, 255, 0.48);
  box-shadow: inset 0 0 0 1px rgba(0, 210, 255, 0.18);
}

.league-roster-rank {
  min-width: 32px;
  font-size: 0.74rem;
  font-weight: 900;
  color: rgba(8, 18, 34, 0.74);
}

.league-roster-avatar {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.76);
  box-shadow: 0 10px 22px rgba(15, 23, 42, 0.16);
  background: rgba(8, 18, 34, 0.08);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.league-roster-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.league-roster-avatar-fallback {
  font-size: 0.76rem;
  font-weight: 900;
  color: rgba(8, 18, 34, 0.76);
}

.league-roster-main {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.league-roster-name {
  font-size: 0.82rem;
  font-weight: 900;
  color: rgba(8, 18, 34, 0.9);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.league-roster-role {
  font-size: 0.7rem;
  color: rgba(8, 18, 34, 0.62);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.league-roster-score {
  justify-self: end;
  font-size: 0.76rem;
  font-weight: 900;
  color: rgba(255, 153, 0, 0.92);
}

@media (hover: hover) {
  .league-roster-row:hover {
    transform: translateY(-1px);
    border-color: rgba(8, 18, 34, 0.2);
    box-shadow: 0 16px 30px rgba(15, 23, 42, 0.14);
  }
  .league-roster-toggle:hover {
    transform: translateY(-1px);
    border-color: rgba(8, 18, 34, 0.2);
    box-shadow: 0 10px 22px rgba(15, 23, 42, 0.12);
  }
}

@media (prefers-reduced-motion: reduce) {
  .league-roster-list {
    transition: none !important;
  }
  .league-roster-row.is-enter,
  .league-roster-tail.is-enter {
    animation: none !important;
  }
}

.league-events {
  margin-top: 12px;
  margin-bottom: 12px;
  padding: 13px 13px 12px;
  border-radius: 20px;
  border: 1px solid rgba(8, 18, 34, 0.12);
  background:
    radial-gradient(
      130% 120% at 0% 0%,
      rgba(80, 180, 255, 0.1),
      rgba(255, 255, 255, 0) 58%
    ),
    radial-gradient(
      130% 120% at 100% 100%,
      rgba(255, 215, 64, 0.1),
      rgba(255, 255, 255, 0) 62%
    ),
    linear-gradient(
      160deg,
      rgba(255, 255, 255, 0.97),
      rgba(245, 249, 255, 0.92)
    );
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.11);
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    border-color 0.18s ease;
}
.league-events-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.league-events-clear {
  border-radius: 999px;
  border: 1px solid rgba(8, 18, 34, 0.14);
  background: rgba(8, 18, 34, 0.05);
  color: rgba(8, 18, 34, 0.76);
  min-height: 28px;
  padding: 0 10px;
  font-size: 0.72rem;
  font-weight: 800;
  cursor: pointer;
}
.league-events-list {
  margin-top: 10px;
  display: grid;
  gap: 7px;
}
.league-event-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border-radius: 13px;
  border: 1px solid rgba(8, 18, 34, 0.12);
  background: rgba(255, 255, 255, 0.74);
  padding: 8px 10px;
}
.league-event-main {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}
.league-event-icon {
  width: 24px;
  height: 24px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(8, 18, 34, 0.08);
  font-size: 0.78rem;
  flex-shrink: 0;
}
.league-event-text {
  font-size: 0.78rem;
  color: rgba(8, 18, 34, 0.84);
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.league-event-time {
  font-size: 0.7rem;
  color: rgba(8, 18, 34, 0.56);
  font-weight: 700;
  flex-shrink: 0;
}
.league-events-empty {
  border-radius: 12px;
  border: 1px dashed rgba(8, 18, 34, 0.16);
  background: rgba(255, 255, 255, 0.54);
  color: rgba(8, 18, 34, 0.62);
  padding: 10px;
  font-size: 0.76rem;
}

.weekly-reward {
  margin-top: 12px;
  margin-bottom: 12px;
  padding: 14px 14px 12px;
  border-radius: 22px;
  border: 1px solid rgba(8, 18, 34, 0.08);
  background:
    radial-gradient(
      120% 120% at 6% 0%,
      rgba(255, 215, 64, 0.16),
      rgba(255, 255, 255, 0) 56%
    ),
    radial-gradient(
      120% 120% at 100% 100%,
      rgba(0, 210, 255, 0.1),
      rgba(255, 255, 255, 0) 58%
    ),
    linear-gradient(
      150deg,
      rgba(255, 255, 255, 0.97),
      rgba(245, 248, 255, 0.92)
    );
  box-shadow: 0 22px 52px rgba(15, 23, 42, 0.12);
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    border-color 0.18s ease;
}
.weekly-reward-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 8px;
  margin-bottom: 10px;
}
.weekly-reward-copy {
  min-width: 0;
  display: grid;
  gap: 4px;
}
.weekly-reward-title {
  font-size: 1.04rem;
  font-weight: 950;
  letter-spacing: -0.01em;
  color: rgba(8, 18, 34, 0.94);
}
.weekly-reward-sub {
  font-size: 0.82rem;
  color: rgba(8, 18, 34, 0.66);
}
.weekly-reward-timer {
  width: fit-content;
  margin-top: 2px;
  padding: 4px 9px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.02em;
  color: rgba(8, 18, 34, 0.78);
  background: rgba(8, 18, 34, 0.06);
  border: 1px solid rgba(8, 18, 34, 0.12);
}
.weekly-reward-timer[data-state="ended"] {
  color: rgba(113, 70, 0, 0.95);
  background: rgba(255, 215, 64, 0.2);
  border-color: rgba(255, 215, 64, 0.34);
}
.weekly-reward-podium {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.weekly-reward-item {
  display: grid;
  gap: 4px;
  align-content: start;
  min-height: 108px;
  padding: 12px 10px;
  border-radius: 16px;
  border: 1px solid rgba(8, 18, 34, 0.1);
  background: rgba(255, 255, 255, 0.78);
}
.weekly-reward-item.is-rank-1 {
  background: linear-gradient(
    135deg,
    rgba(255, 215, 64, 0.2),
    rgba(255, 255, 255, 0.66)
  );
  border-color: rgba(255, 215, 64, 0.34);
}
.weekly-reward-item.is-rank-2 {
  background: linear-gradient(
    135deg,
    rgba(205, 214, 227, 0.2),
    rgba(255, 255, 255, 0.66)
  );
  border-color: rgba(205, 214, 227, 0.34);
}
.weekly-reward-item.is-rank-3 {
  background: linear-gradient(
    135deg,
    rgba(205, 127, 50, 0.2),
    rgba(255, 255, 255, 0.66)
  );
  border-color: rgba(205, 127, 50, 0.34);
}
.weekly-reward-rank {
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.02em;
  color: rgba(8, 18, 34, 0.78);
}
.weekly-reward-name {
  font-size: 0.82rem;
  font-weight: 800;
  color: rgba(8, 18, 34, 0.9);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.weekly-reward-meta {
  font-size: 0.74rem;
  color: rgba(8, 18, 34, 0.64);
}
.weekly-reward-bonus {
  margin-top: 2px;
  width: fit-content;
  padding: 3px 7px;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 900;
  letter-spacing: 0.02em;
  color: rgba(113, 70, 0, 0.95);
  background: rgba(255, 215, 64, 0.18);
  border: 1px solid rgba(255, 215, 64, 0.3);
}
.weekly-reward-note {
  margin-top: 10px;
  font-size: 0.84rem;
  font-weight: 700;
  color: rgba(8, 18, 34, 0.72);
}
@media (hover: hover) {
  .team-motivation-card:hover,
  .league-captain:hover,
  .league-roster:hover,
  .league-season:hover,
  .league-events:hover,
  .weekly-reward:hover {
    transform: translateY(-2px);
    box-shadow: 0 24px 52px rgba(15, 23, 42, 0.16);
    border-color: rgba(8, 18, 34, 0.18);
  }
}

.rating-wrapper {
  padding: 18px 0 22px;
  max-width: 760px;
  margin: 0 auto;
}

.rating-title {
  font-size: 26px;
  margin-bottom: 14px;
  color: var(--game-text, rgba(8, 18, 34, 0.92));
  letter-spacing: -0.02em;
}

.rating-user-card {
  display: flex;
  align-items: center;
  gap: 14px;
  background:
    radial-gradient(
      120% 120% at 0% 0%,
      rgba(0, 210, 255, 0.12),
      rgba(255, 255, 255, 0) 55%
    ),
    radial-gradient(
      120% 120% at 100% 100%,
      rgba(127, 90, 255, 0.1),
      rgba(255, 255, 255, 0) 55%
    ),
    var(--game-panel-bg);
  border-radius: 22px;
  padding: 15px;
  margin-bottom: 25px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  box-shadow: 0 22px 60px rgba(15, 23, 42, 0.12);
}
.league-view-switch {
  margin: -10px 0 10px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px;
  border-radius: 999px;
  border: 1px solid rgba(8, 18, 34, 0.14);
  background: rgba(255, 255, 255, 0.9);
}
.league-view-btn {
  border: 0;
  border-radius: 999px;
  min-height: 30px;
  padding: 0 12px;
  background: transparent;
  color: rgba(8, 18, 34, 0.7);
  font-size: 0.76rem;
  font-weight: 850;
  cursor: pointer;
}
.league-view-btn.is-active {
  background: linear-gradient(
    135deg,
    rgba(255, 215, 64, 0.25),
    rgba(0, 210, 255, 0.22)
  );
  color: rgba(8, 18, 34, 0.92);
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.12);
}
.league-nearby-cta {
  margin-top: 8px;
  min-height: 34px;
  border-radius: 999px;
  border: 1px solid rgba(8, 18, 34, 0.16);
  background: linear-gradient(
    135deg,
    rgba(255, 215, 64, 0.24),
    rgba(255, 174, 94, 0.18)
  );
  color: rgba(8, 18, 34, 0.88);
  font-size: 0.76rem;
  font-weight: 900;
  padding: 0 12px;
  cursor: pointer;
}
#league-full-wrap[hidden] {
  display: none !important;
}

.rating-avatar {
  width: 72px;
  height: 72px;
  border-radius: 22px;
  object-fit: cover;
  border: 1px solid rgba(255, 255, 255, 0.42);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.18);
  background: rgba(0, 0, 0, 0.1);
}

.rating-user-info {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.rating-user-name {
  font-size: 18px;
  font-weight: 900;
  color: var(--game-text, rgba(8, 18, 34, 0.92));
}

.rating-user-points {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(255, 215, 64, 0.12);
  border: 1px solid rgba(255, 215, 64, 0.2);
  font-size: 0.95rem;
  font-weight: 900;
  color: rgba(255, 200, 64, 0.98);
}
.rating-level,
.rating-rank {
  font-size: 0.92rem;
  color: var(--game-muted, rgba(0, 0, 0, 0.68));
  font-weight: 700;
  letter-spacing: 0.01em;
}
.rating-rank--form {
  width: fit-content;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid rgba(0, 165, 180, 0.24);
  background: rgba(0, 210, 255, 0.09);
  color: rgba(0, 96, 115, 0.96);
}
.rating-rank--form span {
  font-weight: 900;
  color: rgba(0, 76, 92, 0.98);
}
.rating-rank-shift {
  width: fit-content;
  margin-top: 2px;
  padding: 5px 9px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.02em;
  border: 1px solid rgba(8, 18, 34, 0.12);
  background: rgba(255, 255, 255, 0.78);
  color: rgba(8, 18, 34, 0.76);
}
.rating-rank-shift[data-move="up"] {
  border-color: rgba(88, 204, 2, 0.42);
  background: rgba(88, 204, 2, 0.16);
  color: rgba(22, 84, 0, 0.94);
}
.rating-rank-shift[data-move="down"] {
  border-color: rgba(255, 120, 120, 0.36);
  background: rgba(255, 120, 120, 0.14);
  color: rgba(142, 30, 46, 0.95);
}
.rating-rank-shift.is-pop {
  animation: rankShiftPop 520ms cubic-bezier(0.2, 0.9, 0.2, 1);
}

.rating-podium-wrap {
  position: relative;
  overflow: hidden;
  margin-top: 14px;
  border-radius: 22px;
  border: 1px solid rgba(8, 18, 34, 0.1);
  background:
    radial-gradient(
      140% 130% at 50% 0%,
      var(--league-accent-soft, rgba(255, 215, 64, 0.16)),
      rgba(255, 255, 255, 0) 58%
    ),
    rgba(255, 255, 255, 0.82);
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.1);
  padding: 10px;
}
.rating-podium-wrap.is-top3-surge {
  animation: top3SurgeWrap 680ms cubic-bezier(0.2, 0.9, 0.2, 1);
}
.rating-podium-wrap.is-top3-surge::after {
  content: "";
  position: absolute;
  inset: -50% -20%;
  pointer-events: none;
  background: radial-gradient(
    circle,
    var(--league-accent-soft, rgba(255, 215, 64, 0.24)),
    rgba(255, 255, 255, 0)
  );
  animation: top3SurgeHalo 1200ms ease-out;
}

.rating-subtitle--podium {
  margin-top: 0;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.rating-subtitle--podium::before {
  content: "LIVE";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 24px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid rgba(86, 180, 255, 0.28);
  background: linear-gradient(
    135deg,
    rgba(238, 247, 255, 0.96),
    rgba(228, 242, 255, 0.9)
  );
  color: rgba(18, 86, 148, 0.9);
  font-size: 0.64rem;
  font-weight: 900;
  letter-spacing: 0.14em;
}

.rating-podium {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: end;
  gap: 12px;
}

.rating-podium-item {
  position: relative;
  overflow: hidden;
  --podium-rank-border: rgba(255, 194, 90, 0.58);
  --podium-rank-glow: rgba(255, 184, 84, 0.28);
  --podium-rank-sparkle-filter: none;
  border-radius: 20px;
  border: 1px solid rgba(8, 18, 34, 0.12);
  background:
    radial-gradient(
      120% 120% at 8% 0%,
      rgba(255, 255, 255, 0.42),
      rgba(255, 255, 255, 0) 50%
    ),
    linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(246, 250, 255, 0.9));
  box-shadow: 0 16px 36px rgba(15, 23, 42, 0.12);
  padding: 12px 12px 0;
  display: grid;
  justify-items: center;
  text-align: center;
  min-height: 184px;
  cursor: pointer;
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    border-color 0.18s ease;
}
.rating-podium-item::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -46px;
  width: 130px;
  height: 130px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(
    circle,
    var(--league-accent-soft, rgba(255, 215, 64, 0.2)),
    rgba(255, 255, 255, 0)
  );
  pointer-events: none;
}
.rating-podium-item::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  background:
    radial-gradient(
      circle at 18% 24%,
      rgba(255, 255, 255, 0.9) 0 1.3px,
      rgba(255, 255, 255, 0) 2px
    ),
    radial-gradient(
      circle at 30% 12%,
      rgba(255, 226, 142, 0.86) 0 1.5px,
      rgba(255, 226, 142, 0) 2.2px
    ),
    radial-gradient(
      circle at 58% 18%,
      rgba(255, 255, 255, 0.88) 0 1.2px,
      rgba(255, 255, 255, 0) 1.9px
    ),
    radial-gradient(
      circle at 76% 26%,
      rgba(255, 198, 102, 0.84) 0 1.2px,
      rgba(255, 198, 102, 0) 2px
    ),
    radial-gradient(
      circle at 86% 52%,
      rgba(255, 255, 255, 0.8) 0 1px,
      rgba(255, 255, 255, 0) 1.8px
    ),
    radial-gradient(
      circle at 68% 74%,
      rgba(255, 213, 124, 0.84) 0 1.2px,
      rgba(255, 213, 124, 0) 2px
    ),
    radial-gradient(
      circle at 36% 82%,
      rgba(255, 255, 255, 0.78) 0 1px,
      rgba(255, 255, 255, 0) 1.6px
    ),
    radial-gradient(
      circle at 12% 72%,
      rgba(255, 185, 96, 0.8) 0 1px,
      rgba(255, 185, 96, 0) 1.7px
    );
}
.rating-podium-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 38px rgba(15, 23, 42, 0.16);
}
.rating-podium-item:focus-visible {
  outline: 3px solid rgba(0, 210, 255, 0.36);
  outline-offset: 3px;
}

.rating-podium-item.is-rank-1 {
  --podium-rank-border: rgba(255, 202, 94, 0.72);
  --podium-rank-glow: rgba(255, 188, 78, 0.34);
  --podium-rank-sparkle-filter: saturate(1.08);
  min-height: 216px;
  transform: translateY(-8px);
  border-color: var(--league-accent-strong, rgba(255, 215, 64, 0.4));
  background:
    radial-gradient(
      120% 120% at 50% 0%,
      rgba(255, 217, 112, 0.38),
      rgba(255, 255, 255, 0) 56%
    ),
    linear-gradient(180deg, rgba(255, 252, 239, 0.96), rgba(255, 247, 221, 0.9));
  box-shadow: 0 26px 54px rgba(15, 23, 42, 0.18);
}
.rating-podium-item.is-rank-1:hover {
  transform: translateY(-10px);
}

.rating-podium-item.is-rank-2 {
  --podium-rank-border: rgba(188, 206, 238, 0.7);
  --podium-rank-glow: rgba(168, 196, 238, 0.28);
  --podium-rank-sparkle-filter: hue-rotate(196deg) saturate(0.84)
    brightness(1.06);
  min-height: 198px;
  border-color: rgba(205, 214, 227, 0.52);
  background:
    radial-gradient(
      120% 120% at 50% 0%,
      rgba(196, 214, 244, 0.28),
      rgba(255, 255, 255, 0) 56%
    ),
    linear-gradient(
      180deg,
      rgba(248, 251, 255, 0.96),
      rgba(236, 242, 251, 0.92)
    );
}

.rating-podium-item.is-rank-3 {
  --podium-rank-border: rgba(221, 154, 108, 0.72);
  --podium-rank-glow: rgba(214, 132, 78, 0.28);
  --podium-rank-sparkle-filter: hue-rotate(-14deg) saturate(1.06)
    brightness(1.03);
  min-height: 180px;
  border-color: rgba(205, 127, 50, 0.46);
  background:
    radial-gradient(
      120% 120% at 50% 0%,
      rgba(228, 168, 126, 0.28),
      rgba(255, 255, 255, 0) 56%
    ),
    linear-gradient(
      180deg,
      rgba(255, 248, 243, 0.96),
      rgba(246, 237, 230, 0.92)
    );
}
.rating-podium-item.is-rank-1 .rating-podium-xp {
  color: rgba(232, 150, 24, 0.98);
}
.rating-podium-item.is-rank-2 .rating-podium-xp {
  color: rgba(98, 120, 162, 0.96);
}
.rating-podium-item.is-rank-3 .rating-podium-xp {
  color: rgba(168, 92, 46, 0.96);
}

.rating-podium-item.is-me {
  outline: none;
  box-shadow:
    0 14px 34px rgba(15, 23, 42, 0.1),
    inset 0 0 0 2px rgba(0, 210, 255, 0.52);
}
.rating-podium-item.is-rank-1.is-me {
  box-shadow:
    0 24px 50px rgba(15, 23, 42, 0.18),
    inset 0 0 0 2px rgba(0, 210, 255, 0.56);
}
.rating-podium-item.is-top3-surge {
  animation: top3SurgeCard 950ms cubic-bezier(0.2, 0.9, 0.2, 1);
  box-shadow: 0 28px 58px rgba(255, 192, 84, 0.34);
}
.rating-podium-item.is-top3-surge.is-me {
  box-shadow:
    0 28px 58px rgba(255, 192, 84, 0.34),
    inset 0 0 0 2px rgba(0, 210, 255, 0.56);
}
.rating-podium-wrap.is-top3-showcase {
  animation: top3ShowcaseWrap 1160ms cubic-bezier(0.18, 0.9, 0.24, 1);
}
.rating-podium-wrap.is-top3-showcase::before {
  content: "";
  position: absolute;
  inset: -40% -8%;
  pointer-events: none;
  background: conic-gradient(
    from 200deg at 50% 50%,
    rgba(255, 215, 64, 0),
    rgba(255, 215, 64, 0.2),
    rgba(0, 210, 255, 0.2),
    rgba(255, 215, 64, 0)
  );
  animation: top3ShowcaseSweep 1200ms ease-out;
}
.rating-podium-item.is-top3-showcase {
  animation: top3ShowcaseCard 980ms cubic-bezier(0.18, 0.9, 0.24, 1);
  border-color: var(--podium-rank-border, rgba(255, 194, 90, 0.58));
  box-shadow: 0 22px 46px var(--podium-rank-glow, rgba(255, 184, 84, 0.28));
}
.rating-podium-item.is-top3-showcase.is-rank-1 {
  animation-name: top3ShowcaseCardGold;
}
.rating-podium-item.is-top3-showcase.is-rank-2 {
  animation-name: top3ShowcaseCardSilver;
}
.rating-podium-item.is-top3-showcase.is-rank-3 {
  animation-name: top3ShowcaseCardBronze;
}
.rating-podium-item.is-top3-showcase .rating-podium-medal {
  animation: top3ShowcaseMedal 980ms cubic-bezier(0.18, 0.9, 0.24, 1);
}
.rating-podium-item.is-top3-showcase.is-rank-1 .rating-podium-medal {
  animation-name: top3ShowcaseMedalGold;
}
.rating-podium-item.is-top3-showcase.is-rank-2 .rating-podium-medal {
  animation-name: top3ShowcaseMedalSilver;
}
.rating-podium-item.is-top3-showcase.is-rank-3 .rating-podium-medal {
  animation-name: top3ShowcaseMedalBronze;
}
.rating-podium-item.is-top3-showcase .rating-podium-avatar-wrap {
  box-shadow: 0 16px 34px var(--podium-rank-glow, rgba(255, 194, 84, 0.32));
}
.rating-podium-item.is-top3-showcase::before {
  animation: top3ShowcaseAura 980ms ease-out;
}
.rating-podium-item.is-top3-showcase::after {
  animation: top3ShowcaseSparkle 980ms ease-out;
  filter: var(--podium-rank-sparkle-filter, none);
}
.rating-podium-item.is-top3-showcase.is-me {
  box-shadow:
    0 22px 46px var(--podium-rank-glow, rgba(255, 184, 84, 0.28)),
    inset 0 0 0 2px rgba(0, 210, 255, 0.62);
}

.rating-podium-head {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}

.rating-podium-medal {
  width: 30px;
  height: 30px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  border: 1px solid rgba(8, 18, 34, 0.08);
  background: rgba(255, 255, 255, 0.76);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

.rating-podium-rank {
  font-size: 0.64rem;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(8, 18, 34, 0.72);
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.68);
  border: 1px solid rgba(8, 18, 34, 0.08);
}
.rating-podium-item.is-rank-1 .rating-podium-medal {
  background: linear-gradient(
    135deg,
    rgba(255, 235, 168, 0.96),
    rgba(255, 208, 89, 0.88)
  );
  border-color: rgba(237, 176, 56, 0.28);
}
.rating-podium-item.is-rank-2 .rating-podium-medal {
  background: linear-gradient(
    135deg,
    rgba(238, 244, 252, 0.96),
    rgba(203, 216, 233, 0.9)
  );
  border-color: rgba(156, 176, 208, 0.26);
}
.rating-podium-item.is-rank-3 .rating-podium-medal {
  background: linear-gradient(
    135deg,
    rgba(246, 225, 210, 0.96),
    rgba(224, 167, 125, 0.88)
  );
  border-color: rgba(179, 109, 63, 0.28);
}

.rating-podium-avatar-wrap {
  margin-top: 6px;
  width: 58px;
  height: 58px;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.48);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.14);
  background: rgba(12, 18, 30, 0.14);
}

.rating-podium-avatar {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.rating-podium-avatar-fallback {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  font-size: 1rem;
  font-weight: 900;
  color: #fff;
  background: linear-gradient(
    135deg,
    rgba(45, 93, 255, 0.72),
    rgba(0, 210, 255, 0.56)
  );
}

.rating-podium-name {
  margin-top: 8px;
  font-size: 0.82rem;
  font-weight: 900;
  color: rgba(8, 18, 34, 0.9);
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.rating-podium-role {
  margin-top: 2px;
  font-size: 0.68rem;
  color: rgba(8, 18, 34, 0.62);
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.rating-podium-shift {
  margin-top: 5px;
  min-height: 18px;
  min-width: 32px;
  padding: 0 6px;
  border-radius: 999px;
  border: 1px solid rgba(8, 18, 34, 0.14);
  background: rgba(255, 255, 255, 0.72);
  font-size: 0.62rem;
  font-weight: 900;
  letter-spacing: 0.05em;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: rgba(8, 18, 34, 0.68);
}
.rating-podium-shift.is-up {
  color: rgba(22, 84, 0, 0.95);
  border-color: rgba(88, 204, 2, 0.44);
  background: rgba(88, 204, 2, 0.16);
}
.rating-podium-shift.is-down {
  color: rgba(142, 30, 46, 0.95);
  border-color: rgba(255, 120, 120, 0.36);
  background: rgba(255, 120, 120, 0.14);
}
.rating-podium-shift.is-new {
  color: rgba(0, 86, 97, 0.96);
  border-color: rgba(0, 165, 180, 0.34);
  background: rgba(0, 210, 255, 0.12);
}

.rating-podium-xp {
  margin-top: 6px;
  font-size: 0.8rem;
  font-weight: 900;
  color: rgba(255, 175, 48, 0.98);
}

.rating-podium-base {
  margin-top: auto;
  width: calc(100% + 20px);
  height: 28px;
  border-radius: 14px 14px 0 0;
  background: linear-gradient(
    180deg,
    rgba(8, 18, 34, 0.14),
    rgba(8, 18, 34, 0.06)
  );
  border-top: 1px solid rgba(8, 18, 34, 0.12);
}

.rating-podium-item.is-rank-1 .rating-podium-base {
  height: 36px;
}

@keyframes rankShiftPop {
  0% {
    transform: scale(1);
  }
  45% {
    transform: scale(1.06);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes top3SurgeWrap {
  0% {
    transform: translateY(0) scale(1);
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.1);
  }
  40% {
    transform: translateY(-2px) scale(1.01);
    box-shadow: 0 30px 64px rgba(255, 194, 64, 0.24);
  }
  100% {
    transform: translateY(0) scale(1);
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.1);
  }
}
@keyframes top3SurgeHalo {
  0% {
    opacity: 0.76;
    transform: scale(0.84);
  }
  100% {
    opacity: 0;
    transform: scale(1.08);
  }
}
@keyframes top3SurgeCard {
  0% {
    transform: translateY(0) scale(1);
  }
  30% {
    transform: translateY(-8px) scale(1.04);
  }
  70% {
    transform: translateY(-2px) scale(1.015);
  }
  100% {
    transform: translateY(0) scale(1);
  }
}
@keyframes top3ShowcaseWrap {
  0% {
    transform: translateY(0) scale(1);
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.1);
  }
  34% {
    transform: translateY(-1px) scale(1.006);
    box-shadow: 0 28px 58px rgba(255, 194, 84, 0.24);
  }
  100% {
    transform: translateY(0) scale(1);
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.1);
  }
}
@keyframes top3ShowcaseSweep {
  0% {
    opacity: 0;
    transform: rotate(-8deg) scale(0.94);
  }
  24% {
    opacity: 0.72;
  }
  100% {
    opacity: 0;
    transform: rotate(8deg) scale(1.08);
  }
}
@keyframes top3ShowcaseCard {
  0% {
    transform: translateY(0) scale(1);
  }
  28% {
    transform: translateY(-6px) scale(1.03);
  }
  72% {
    transform: translateY(-1px) scale(1.012);
  }
  100% {
    transform: translateY(0) scale(1);
  }
}
@keyframes top3ShowcaseCardGold {
  0% {
    transform: translateY(0) scale(1);
  }
  28% {
    transform: translateY(-8px) scale(1.042);
  }
  72% {
    transform: translateY(-2px) scale(1.016);
  }
  100% {
    transform: translateY(0) scale(1);
  }
}
@keyframes top3ShowcaseCardSilver {
  0% {
    transform: translateY(0) scale(1);
  }
  28% {
    transform: translateY(-6px) scale(1.03) rotate(-0.5deg);
  }
  72% {
    transform: translateY(-1px) scale(1.012) rotate(0.25deg);
  }
  100% {
    transform: translateY(0) scale(1) rotate(0deg);
  }
}
@keyframes top3ShowcaseCardBronze {
  0% {
    transform: translateY(0) scale(1);
  }
  28% {
    transform: translateY(-5px) scale(1.024) rotate(0.6deg);
  }
  72% {
    transform: translateY(-1px) scale(1.01) rotate(-0.3deg);
  }
  100% {
    transform: translateY(0) scale(1) rotate(0deg);
  }
}
@keyframes top3ShowcaseMedal {
  0% {
    transform: translateY(0) scale(1) rotate(0deg);
  }
  36% {
    transform: translateY(-2px) scale(1.2) rotate(-7deg);
  }
  72% {
    transform: translateY(-1px) scale(1.08) rotate(3deg);
  }
  100% {
    transform: translateY(0) scale(1) rotate(0deg);
  }
}
@keyframes top3ShowcaseMedalGold {
  0% {
    transform: translateY(0) scale(1) rotate(0deg);
  }
  36% {
    transform: translateY(-3px) scale(1.24) rotate(-8deg);
  }
  72% {
    transform: translateY(-1px) scale(1.1) rotate(3deg);
  }
  100% {
    transform: translateY(0) scale(1) rotate(0deg);
  }
}
@keyframes top3ShowcaseMedalSilver {
  0% {
    transform: translateY(0) scale(1) rotate(0deg);
  }
  36% {
    transform: translateY(-2px) scale(1.18) rotate(7deg);
  }
  72% {
    transform: translateY(-1px) scale(1.06) rotate(-2deg);
  }
  100% {
    transform: translateY(0) scale(1) rotate(0deg);
  }
}
@keyframes top3ShowcaseMedalBronze {
  0% {
    transform: translateY(0) scale(1) rotate(0deg);
  }
  36% {
    transform: translateY(-2px) scale(1.14) rotate(-5deg);
  }
  72% {
    transform: translateY(-1px) scale(1.04) rotate(2deg);
  }
  100% {
    transform: translateY(0) scale(1) rotate(0deg);
  }
}
@keyframes top3ShowcaseAura {
  0% {
    opacity: 0.6;
    transform: translateX(-50%) scale(0.72);
  }
  100% {
    opacity: 0;
    transform: translateX(-50%) scale(1.08);
  }
}
@keyframes top3ShowcaseSparkle {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  24% {
    opacity: 0.96;
  }
  100% {
    opacity: 0;
    transform: scale(1.16);
  }
}

.rating-subtitle {
  margin-top: 20px;
  font-size: 18px;
  font-weight: 900;
  letter-spacing: -0.02em;
  color: var(--game-text, rgba(8, 18, 34, 0.92));
}

.league-mode-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 22px;
  margin-left: 8px;
  padding: 0 9px;
  border-radius: 999px;
  border: 1px solid rgba(109, 166, 238, 0.34);
  background: rgba(230, 242, 255, 0.78);
  color: rgba(26, 71, 122, 0.86);
  font-size: 0.62rem;
  font-weight: 840;
  letter-spacing: 0.02em;
  white-space: nowrap;
  vertical-align: middle;
}

.league-mode-chip--hero {
  margin-left: 0;
}

.leaderboard {
  margin-top: 10px;
  display: grid;
  gap: 10px;
}

@media (max-width: 520px) {
  .team-motivation {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .league-breakdown {
    grid-template-columns: 1fr;
  }
  .league-spark-grid {
    grid-template-columns: 1fr;
  }
  .league-duel-head {
    align-items: flex-start;
    flex-direction: column;
    gap: 5px;
  }
  .league-duel-rate {
    font-size: 0.6rem;
    min-height: 20px;
  }
  .league-duel-meta {
    font-size: 0.62rem;
  }
  .league-duel-pill {
    font-size: 0.6rem;
    min-height: 21px;
    max-width: 100%;
  }
  .league-breakdown-row {
    font-size: 0.72rem;
  }
  .league-goal-row {
    font-size: 0.72rem;
  }
  .league-insight-note {
    font-size: 0.72rem;
  }
  .league-captain,
  .league-roster,
  .league-season {
    padding: 10px;
    border-radius: 16px;
  }
  .league-roster-row {
    padding: 7px 8px;
    border-radius: 12px;
    gap: 7px;
  }
  .league-roster-head {
    align-items: flex-start;
  }
  .league-roster-head-side {
    display: grid;
    justify-items: end;
    gap: 4px;
  }
  .league-roster-toggle {
    min-height: 24px;
    padding: 0 8px;
    font-size: 0.62rem;
  }
  .league-roster-rank {
    min-width: 28px;
    font-size: 0.7rem;
  }
  .league-roster-avatar {
    width: 34px;
    height: 34px;
    border-radius: 10px;
  }
  .league-roster-name {
    font-size: 0.76rem;
  }
  .league-roster-role {
    font-size: 0.66rem;
  }
  .league-roster-score {
    font-size: 0.72rem;
  }
  .league-roster-tail {
    font-size: 0.68rem;
    padding: 7px 8px;
  }
  .league-mode-chip {
    margin-left: 6px;
    min-height: 20px;
    padding: 0 8px;
    font-size: 0.58rem;
  }
  .league-season-head {
    display: grid;
    gap: 2px;
  }
  .league-events {
    padding: 10px;
    border-radius: 16px;
  }
  .league-event-row {
    padding: 7px 8px;
  }
  .league-view-switch {
    width: 100%;
    justify-content: space-between;
    margin-top: -4px;
  }
  .league-you-now {
    top: 6px;
    padding: 9px 10px;
    border-radius: 14px;
  }
  .league-you-now-main {
    gap: 6px;
  }
  .league-you-now-kicker {
    font-size: 0.62rem;
  }
  .league-you-now-metric strong {
    font-size: 0.78rem;
  }
  .league-you-now-badge {
    max-width: 100%;
    font-size: 0.61rem;
    padding: 4px 8px;
  }
  .league-view-btn {
    flex: 1;
    min-width: 0;
    padding: 0 10px;
  }
  .team-motivation-card {
    padding: 11px;
    border-radius: 16px;
  }
  .leaderboard-section--top {
    gap: 10px;
  }
  .rating-hero {
    margin-top: 4px;
    padding: 12px 13px 11px;
    border-radius: 18px;
  }
  .rating-hero-kicker {
    font-size: 0.66rem;
    letter-spacing: 0.16em;
  }
  .rating-hero-title {
    font-size: 1.02rem;
    margin-top: 4px;
  }
  .rating-hero-sub {
    font-size: 0.78rem;
    margin-top: 4px;
    line-height: 1.32;
  }
  .weekly-reward {
    padding: 12px;
    border-radius: 18px;
  }
  .weekly-reward-title {
    font-size: 0.95rem;
  }
  .weekly-reward-sub {
    font-size: 0.76rem;
  }
  .weekly-reward-timer {
    font-size: 0.68rem;
    padding: 3px 8px;
  }
  .weekly-reward-podium {
    grid-template-columns: 1fr;
    gap: 7px;
  }
  .weekly-reward-item {
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 8px;
    padding: 9px 10px;
  }
  .weekly-reward-meta {
    display: none;
  }
  .rating-wrapper {
    padding: 14px 0 18px;
  }
  .rating-title {
    font-size: 22px;
  }
  .rating-user-card {
    padding: 14px;
    gap: 12px;
    margin-bottom: 18px;
  }
  .rating-avatar {
    width: 64px;
    height: 64px;
    border-radius: 18px;
  }
  .rating-user-name {
    font-size: 16px;
  }
  .rating-user-points {
    font-size: 0.9rem;
    padding: 7px 10px;
  }
  .rating-level,
  .rating-rank {
    font-size: 0.9rem;
  }
  .rating-rank--form {
    padding: 4px 9px;
  }
  .rating-podium {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .rating-podium-item,
  .rating-podium-item.is-rank-1,
  .rating-podium-item.is-rank-2,
  .rating-podium-item.is-rank-3 {
    min-height: auto;
    transform: none;
    border-radius: 14px;
    grid-template-columns: auto 1fr auto;
    grid-template-areas:
      "head head head"
      "avatar name xp"
      "avatar role shift"
      "base base base";
    align-items: center;
    justify-items: start;
    text-align: left;
    padding: 10px 10px 0;
  }
  .rating-podium-head {
    grid-area: head;
  }
  .rating-podium-avatar-wrap {
    grid-area: avatar;
    margin-top: 2px;
    width: 50px;
    height: 50px;
    border-radius: 14px;
  }
  .rating-podium-name {
    grid-area: name;
    margin-top: 0;
    padding-left: 8px;
  }
  .rating-podium-role {
    grid-area: role;
    margin-top: 0;
    padding-left: 8px;
  }
  .rating-podium-shift {
    grid-area: shift;
    margin-top: 0;
    justify-self: end;
  }
  .rating-podium-xp {
    grid-area: xp;
    margin-top: 0;
    justify-self: end;
  }
  .rating-podium-base {
    grid-area: base;
    width: 100%;
    margin-top: 8px;
    height: 16px;
    border-radius: 10px 10px 0 0;
  }
  .rating-podium-item.is-me,
  .rating-podium-item.is-rank-1.is-me,
  .rating-podium-item.is-top3-surge.is-me,
  .rating-podium-item.is-top3-showcase.is-me {
    box-shadow:
      0 12px 26px rgba(15, 23, 42, 0.14),
      inset 0 0 0 2px rgba(0, 210, 255, 0.52);
  }
  .rating-podium-wrap {
    overflow: visible;
  }
  .rating-subtitle--podium {
    margin-bottom: 8px;
    font-size: 1rem;
  }
  .rating-subtitle--podium::before {
    min-height: 21px;
    padding: 0 8px;
    font-size: 0.56rem;
    letter-spacing: 0.12em;
  }

  .leaderboard-row {
    padding: 11px 12px;
  }
  .leaderboard-row strong {
    font-size: 14px;
  }
  .leaderboard-row span {
    font-size: 12px;
  }
  .leaderboard-card {
    grid-template-columns: 112px minmax(0, 1fr);
    gap: 10px;
    padding: 15px 13px 13px;
    border-radius: 22px;
  }
  .leaderboard-top-avatar-shell {
    width: 122px;
    height: 122px;
    margin-top: 38px;
  }
  .leaderboard-top-head {
    gap: 4px;
  }
  #leaderboard-top-card > .leaderboard-top-switch {
    top: 10px;
    right: 10px;
    padding: 2px;
    gap: 4px;
  }
  .leaderboard-top-tab {
    min-height: 19px;
    padding: 0 7px;
    font-size: 0.46rem;
    letter-spacing: 0.03em;
  }
  .leaderboard-name {
    font-size: 1.2rem;
  }
  .leaderboard-role {
    font-size: 0.76rem;
  }
  .leaderboard-top-note {
    min-height: 19px;
    padding: 0 8px;
    font-size: 0.58rem;
  }
  .leaderboard-top-main {
    padding-top: 36px;
    gap: 6px;
  }
  .leaderboard-top-metrics {
    grid-template-columns: 1fr;
    gap: 6px;
  }
  .leaderboard-points {
    padding: 8px 10px;
  }
  #best-employee-score {
    font-size: 1.14rem;
  }
  #best-employee-metric-label {
    font-size: 0.55rem;
  }
  .leaderboard-hype {
    padding: 5px 8px;
    font-size: 0.62rem;
  }
  .leaderboard-top-react-btn {
    justify-self: start;
  }
  .leaderboard-team-progress {
    padding: 8px 9px 9px;
    border-radius: 16px;
  }
  .leaderboard-team-progress-head {
    font-size: 0.62rem;
  }
  .leaderboard-team-progress-head strong {
    font-size: 0.76rem;
  }
  .leaderboard-team-progress-meta {
    font-size: 0.69rem;
  }
  .leaderboard-top-chip {
    min-height: 21px;
    padding: 0 7px;
    font-size: 0.56rem;
  }
  .leaderboard-top-meta {
    padding: 5px 6px;
    border-radius: 12px;
    gap: 5px;
  }
  .leaderboard-top-dots {
    gap: 5px;
  }
  .leaderboard-top-dot {
    width: 7px;
    height: 7px;
  }
  .leaderboard-sales-badge {
    max-width: 100%;
    font-size: 0.58rem;
    padding: 3px 7px;
  }
  .leaderboard-sales-inline {
    max-width: 100%;
    font-size: 0.62rem;
    padding: 3px 7px;
  }
  .sales-mission-card {
    padding: 10px;
    border-radius: 16px;
  }
  .sales-mission-task {
    font-size: 0.88rem;
  }
  .sales-mission-meta,
  .sales-mission-status {
    font-size: 0.7rem;
  }
  .sales-mission-btn {
    min-height: 34px;
    font-size: 0.72rem;
  }
  .leaderboard-row .xp {
    padding: 7px 9px;
    font-size: 13px;
  }
  .leaderboard-row-right {
    gap: 6px;
  }
  .leaderboard-reactions-group {
    gap: 4px;
  }
  .leaderboard-react-btn {
    min-height: 30px;
    padding: 6px 8px;
    font-size: 12px;
  }
  .leaderboard-top-react-btn {
    min-height: 31px;
    padding: 5px 9px;
    font-size: 0.72rem;
  }
  .leaderboard-push-fab {
    top: 10px;
    left: 10px;
    width: 30px;
    height: 30px;
    border-radius: 10px;
    font-size: 15px;
  }
  .leaderboard-top-avatar-ring {
    border-radius: 30px;
  }
  .leaderboard-top-avatar-glow {
    inset: 6px;
    border-radius: 30px;
  }
  #best-employee-photo {
    width: 108px;
    height: 108px;
    border-radius: 26px;
  }
  .league-push-status {
    font-size: 0.64rem;
  }
}

@media (prefers-color-scheme: dark) {
  .rating-hero {
    border: 1px solid rgba(255, 255, 255, 0.12);
    background:
      radial-gradient(
        140% 130% at 8% 0%,
        rgba(0, 210, 255, 0.24),
        rgba(0, 0, 0, 0) 58%
      ),
      radial-gradient(
        120% 120% at 100% 100%,
        rgba(127, 90, 255, 0.24),
        rgba(0, 0, 0, 0) 58%
      ),
      linear-gradient(150deg, rgba(18, 22, 34, 0.92), rgba(10, 13, 22, 0.86));
    box-shadow: 0 30px 70px rgba(0, 0, 0, 0.55);
  }
  .rating-hero-kicker {
    color: rgba(219, 232, 255, 0.65);
  }
  .rating-hero-title {
    color: rgba(255, 255, 255, 0.94);
  }
  .rating-hero-sub {
    color: rgba(219, 232, 255, 0.78);
  }
  .team-motivation-card {
    border-color: rgba(255, 255, 255, 0.12);
    background:
      radial-gradient(
        130% 120% at 0% 0%,
        rgba(0, 210, 255, 0.2),
        rgba(0, 0, 0, 0) 58%
      ),
      radial-gradient(
        120% 120% at 100% 100%,
        rgba(255, 215, 64, 0.16),
        rgba(0, 0, 0, 0) 62%
      ),
      linear-gradient(160deg, rgba(24, 30, 46, 0.9), rgba(12, 16, 28, 0.86));
  }
  .team-motivation-card::before {
    opacity: 0.9;
  }
  .team-motivation-title,
  .team-motivation-tier {
    color: rgba(255, 255, 255, 0.92);
  }
  .team-motivation-sub,
  .team-motivation-label {
    color: rgba(219, 232, 255, 0.72);
  }
  .leaderboard-top-chip {
    border-color: var(--league-accent-strong, rgba(255, 215, 64, 0.34));
    background: var(--league-accent-soft, rgba(255, 255, 255, 0.1));
    color: rgba(236, 244, 255, 0.92);
  }
  .leaderboard-top-tab {
    border-color: rgba(122, 175, 232, 0.34);
    background: rgba(28, 42, 66, 0.62);
    color: rgba(212, 236, 255, 0.84);
  }
  #leaderboard-top-card > .leaderboard-top-switch {
    border-color: rgba(122, 175, 232, 0.34);
    background: rgba(22, 34, 54, 0.64);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
  }
  .leaderboard-top-tab.is-active {
    border-color: rgba(115, 196, 255, 0.5);
    background: linear-gradient(
      135deg,
      rgba(36, 68, 102, 0.84),
      rgba(28, 54, 84, 0.8)
    );
    color: rgba(237, 248, 255, 0.95);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.26);
  }
  .leaderboard-card.is-hero-pinned .leaderboard-top-tab.is-active {
    border-color: rgba(255, 204, 118, 0.58);
    background: linear-gradient(
      135deg,
      rgba(84, 62, 25, 0.84),
      rgba(72, 52, 21, 0.78)
    );
    color: rgba(255, 233, 176, 0.96);
  }
  .leaderboard-name {
    color: rgba(255, 255, 255, 0.96);
  }
  .leaderboard-role {
    color: rgba(219, 232, 255, 0.72);
  }
  .leaderboard-top-note {
    color: rgba(196, 224, 255, 0.84);
    border-color: rgba(121, 189, 255, 0.34);
    background: rgba(44, 72, 106, 0.56);
  }
  .leaderboard-points {
    background: linear-gradient(
      135deg,
      rgba(91, 70, 15, 0.94),
      rgba(120, 84, 10, 0.88)
    );
    border-color: rgba(255, 208, 98, 0.34);
    color: rgba(255, 234, 178, 0.98);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
  }
  .leaderboard-points[data-mode="monthActive"] {
    background: linear-gradient(
      135deg,
      rgba(24, 84, 68, 0.92),
      rgba(18, 66, 54, 0.88)
    );
    border-color: rgba(82, 222, 186, 0.42);
    color: rgba(198, 255, 236, 0.96);
  }
  .leaderboard-hype {
    border-color: rgba(255, 145, 95, 0.34);
    background: linear-gradient(
      135deg,
      rgba(92, 42, 20, 0.9),
      rgba(67, 29, 14, 0.88)
    );
    color: rgba(255, 220, 202, 0.96);
  }
  .leaderboard-top-dot {
    background: rgba(174, 201, 231, 0.32);
  }
  .leaderboard-top-dot.is-active {
    background: rgba(114, 196, 255, 0.95);
    box-shadow: 0 0 0 4px rgba(114, 196, 255, 0.2);
  }
  .leaderboard-card.is-activity-mode .leaderboard-top-dot.is-active {
    background: rgba(96, 232, 196, 0.96);
    box-shadow: 0 0 0 4px rgba(96, 232, 196, 0.2);
  }
  .leaderboard-team-progress {
    border-color: rgba(118, 198, 255, 0.24);
    background: linear-gradient(
      135deg,
      rgba(24, 42, 68, 0.92),
      rgba(15, 30, 52, 0.9)
    );
  }
  .leaderboard-team-progress-head {
    color: rgba(184, 225, 255, 0.82);
  }
  .leaderboard-team-progress-head strong {
    color: rgba(244, 250, 255, 0.96);
  }
  .leaderboard-team-progress-track {
    background: rgba(255, 255, 255, 0.12);
  }
  .leaderboard-team-progress-meta {
    color: rgba(219, 232, 255, 0.74);
  }
  .leaderboard-top-chip--tier {
    border-color: rgba(118, 198, 255, 0.34);
    background: linear-gradient(
      135deg,
      rgba(28, 58, 86, 0.9),
      rgba(21, 42, 66, 0.88)
    );
    color: rgba(217, 240, 255, 0.96);
  }
  .rating-podium-medal {
    border-color: rgba(255, 255, 255, 0.14);
    background: rgba(255, 255, 255, 0.08);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
  }
  .rating-podium-rank {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.12);
  }
  .team-motivation-progress {
    background: rgba(255, 255, 255, 0.14);
  }
  .team-challenge-milestone {
    border-color: rgba(255, 255, 255, 0.16);
    background: rgba(255, 255, 255, 0.06);
    color: rgba(219, 232, 255, 0.72);
  }
  .team-challenge-milestone.is-done {
    border-color: var(--league-accent-strong, rgba(255, 215, 64, 0.42));
    background: var(--league-accent-soft, rgba(255, 215, 64, 0.22));
    color: rgba(255, 244, 219, 0.96);
  }
  .team-challenge-milestone.is-next {
    border-color: rgba(0, 210, 255, 0.42);
    color: rgba(214, 246, 255, 0.96);
  }
  .league-spark-card {
    border-color: rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.06);
  }
  .league-spark-title {
    color: rgba(219, 232, 255, 0.72);
  }
  .league-spark-meta {
    color: rgba(219, 232, 255, 0.66);
  }
  .league-breakdown-row {
    border-color: rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.06);
    color: rgba(219, 232, 255, 0.72);
  }
  .league-breakdown-row strong {
    color: rgba(255, 255, 255, 0.9);
  }
  .league-insight-note {
    border-color: rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.06);
    border-left-color: rgba(0, 210, 255, 0.52);
    color: rgba(219, 232, 255, 0.76);
  }
  .league-insights-card {
    border-color: rgba(0, 210, 255, 0.34);
    background:
      radial-gradient(
        130% 120% at 0% 0%,
        rgba(0, 210, 255, 0.28),
        rgba(0, 0, 0, 0) 58%
      ),
      radial-gradient(
        120% 120% at 100% 100%,
        rgba(255, 215, 64, 0.2),
        rgba(0, 0, 0, 0) 62%
      ),
      linear-gradient(160deg, rgba(24, 30, 46, 0.92), rgba(11, 16, 30, 0.88));
  }
  .league-goals-card {
    border-color: rgba(255, 174, 94, 0.34);
    background:
      radial-gradient(
        140% 130% at 100% 0%,
        rgba(255, 215, 64, 0.26),
        rgba(0, 0, 0, 0) 56%
      ),
      radial-gradient(
        120% 120% at 0% 100%,
        rgba(255, 144, 99, 0.2),
        rgba(0, 0, 0, 0) 58%
      ),
      linear-gradient(160deg, rgba(30, 25, 24, 0.9), rgba(20, 14, 14, 0.86));
  }
  .league-goal-row {
    border-color: rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.06);
    color: rgba(219, 232, 255, 0.76);
  }
  .league-goal-row .value {
    color: rgba(255, 255, 255, 0.9);
  }
  .league-goal-row.is-done {
    border-color: rgba(128, 228, 156, 0.45);
    background: rgba(63, 160, 92, 0.3);
  }
  .league-goals-claim {
    border-color: rgba(255, 255, 255, 0.16);
    background: linear-gradient(
      135deg,
      rgba(255, 215, 64, 0.28),
      rgba(255, 162, 83, 0.22)
    );
    color: rgba(255, 244, 219, 0.96);
  }
  .league-captain,
  .league-roster,
  .league-season {
    border-color: rgba(255, 255, 255, 0.12);
    background:
      radial-gradient(
        130% 120% at 0% 0%,
        rgba(0, 210, 255, 0.18),
        rgba(0, 0, 0, 0) 58%
      ),
      radial-gradient(
        120% 120% at 100% 100%,
        rgba(255, 215, 64, 0.14),
        rgba(0, 0, 0, 0) 62%
      ),
      linear-gradient(160deg, rgba(23, 29, 44, 0.9), rgba(11, 16, 28, 0.86));
    box-shadow: 0 18px 42px rgba(0, 0, 0, 0.36);
  }
  .league-captain-title,
  .league-captain-name {
    color: rgba(255, 255, 255, 0.9);
  }
  .league-captain-meta,
  .league-season-kicker,
  .league-roster-role,
  .league-season-item-sub,
  .league-season-current {
    color: rgba(219, 232, 255, 0.72);
  }
  .league-roster-row {
    border-color: rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.06);
  }
  .league-roster-toggle {
    border-color: rgba(255, 255, 255, 0.16);
    background: rgba(255, 255, 255, 0.08);
    color: rgba(219, 232, 255, 0.82);
  }
  .league-roster-row[data-rank="1"] {
    border-color: rgba(255, 215, 64, 0.42);
    background: linear-gradient(
      135deg,
      rgba(255, 215, 64, 0.2),
      rgba(255, 255, 255, 0.08)
    );
  }
  .league-roster-row[data-rank="2"] {
    border-color: rgba(205, 214, 227, 0.42);
    background: linear-gradient(
      135deg,
      rgba(205, 214, 227, 0.16),
      rgba(255, 255, 255, 0.08)
    );
  }
  .league-roster-row[data-rank="3"] {
    border-color: rgba(205, 127, 50, 0.42);
    background: linear-gradient(
      135deg,
      rgba(205, 127, 50, 0.16),
      rgba(255, 255, 255, 0.08)
    );
  }
  .league-roster-row.is-me {
    border-color: rgba(0, 210, 255, 0.46);
    box-shadow: inset 0 0 0 1px rgba(0, 210, 255, 0.26);
  }
  .league-roster-rank {
    color: rgba(219, 232, 255, 0.74);
  }
  .league-roster-name {
    color: rgba(255, 255, 255, 0.9);
  }
  .league-roster-avatar {
    border-color: rgba(255, 255, 255, 0.24);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.34);
    background: rgba(255, 255, 255, 0.08);
  }
  .league-roster-avatar-fallback {
    color: rgba(219, 232, 255, 0.86);
  }
  .league-roster-score {
    color: rgba(255, 202, 97, 0.96);
  }
  .league-roster-tail {
    border-color: rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.04);
    color: rgba(219, 232, 255, 0.72);
  }
  .league-season-current,
  .league-season-item {
    border-color: rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.06);
  }
  .league-season-item-top {
    color: rgba(255, 255, 255, 0.86);
  }
  .league-events {
    border-color: rgba(255, 255, 255, 0.12);
    background:
      radial-gradient(
        130% 120% at 0% 0%,
        rgba(80, 180, 255, 0.18),
        rgba(0, 0, 0, 0) 58%
      ),
      radial-gradient(
        120% 120% at 100% 100%,
        rgba(255, 215, 64, 0.14),
        rgba(0, 0, 0, 0) 62%
      ),
      linear-gradient(160deg, rgba(22, 28, 42, 0.9), rgba(11, 16, 28, 0.86));
    box-shadow: 0 18px 42px rgba(0, 0, 0, 0.36);
  }
  .league-events-clear {
    border-color: rgba(255, 255, 255, 0.16);
    background: rgba(255, 255, 255, 0.08);
    color: rgba(219, 232, 255, 0.82);
  }
  .league-event-row {
    border-color: rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.06);
  }
  .league-event-icon {
    background: rgba(255, 255, 255, 0.1);
  }
  .league-event-text {
    color: rgba(255, 255, 255, 0.88);
  }
  .league-event-time {
    color: rgba(219, 232, 255, 0.66);
  }
  .league-events-empty {
    border-color: rgba(255, 255, 255, 0.18);
    background: rgba(255, 255, 255, 0.05);
    color: rgba(219, 232, 255, 0.72);
  }
  .league-view-switch {
    border-color: rgba(255, 255, 255, 0.18);
    background: rgba(255, 255, 255, 0.08);
  }
  .league-view-btn {
    color: rgba(219, 232, 255, 0.74);
  }
  .league-view-btn.is-active {
    color: rgba(255, 255, 255, 0.96);
  }
  .league-nearby-cta {
    border-color: rgba(255, 255, 255, 0.16);
    background: linear-gradient(
      135deg,
      rgba(255, 215, 64, 0.28),
      rgba(255, 162, 83, 0.22)
    );
    color: rgba(255, 244, 219, 0.96);
  }
  .league-you-now {
    border-color: var(--league-accent-strong, rgba(255, 215, 64, 0.34));
    background:
      radial-gradient(
        120% 120% at 0% 0%,
        var(--league-accent-soft, rgba(255, 215, 64, 0.2)),
        rgba(0, 0, 0, 0) 56%
      ),
      rgba(20, 24, 36, 0.88);
    box-shadow: 0 18px 42px rgba(0, 0, 0, 0.38);
  }
  .league-you-now-kicker {
    color: rgba(219, 232, 255, 0.66);
  }
  .league-you-now-metric .label {
    color: rgba(219, 232, 255, 0.64);
  }
  .league-you-now-metric strong {
    color: rgba(255, 255, 255, 0.92);
  }
  .league-you-now-shift {
    border-color: rgba(255, 255, 255, 0.16);
    background: rgba(255, 255, 255, 0.1);
    color: rgba(236, 242, 255, 0.84);
  }
  .league-you-now.is-top3-surge .league-you-now-shift {
    border-color: rgba(255, 215, 64, 0.46);
    background: rgba(255, 215, 64, 0.24);
    color: rgba(255, 244, 219, 0.98);
  }
  .weekly-reward {
    border: 1px solid rgba(255, 255, 255, 0.12);
    background:
      radial-gradient(
        120% 120% at 6% 0%,
        rgba(255, 215, 64, 0.22),
        rgba(0, 0, 0, 0) 56%
      ),
      radial-gradient(
        120% 120% at 100% 100%,
        rgba(0, 210, 255, 0.14),
        rgba(0, 0, 0, 0) 58%
      ),
      linear-gradient(150deg, rgba(20, 24, 36, 0.92), rgba(10, 13, 22, 0.86));
    box-shadow: 0 28px 60px rgba(0, 0, 0, 0.52);
  }
  .weekly-reward-title {
    color: rgba(255, 255, 255, 0.92);
  }
  .weekly-reward-sub {
    color: rgba(219, 232, 255, 0.7);
  }
  .weekly-reward-timer {
    color: rgba(236, 242, 255, 0.86);
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.2);
  }
  .weekly-reward-timer[data-state="ended"] {
    color: rgba(255, 239, 181, 0.94);
    background: rgba(255, 215, 64, 0.22);
    border-color: rgba(255, 215, 64, 0.38);
  }
  .weekly-reward-item {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
  }
  .weekly-reward-rank,
  .weekly-reward-name {
    color: rgba(255, 255, 255, 0.88);
  }
  .weekly-reward-meta,
  .weekly-reward-note {
    color: rgba(219, 232, 255, 0.72);
  }
  .leaderboard-sales-badge {
    border-color: rgba(140, 210, 255, 0.34);
    background: rgba(56, 164, 198, 0.22);
    color: rgba(214, 242, 255, 0.92);
  }
  .leaderboard-sales-badge.is-success {
    border-color: rgba(128, 228, 156, 0.45);
    background: rgba(63, 160, 92, 0.34);
    color: rgba(228, 255, 236, 0.96);
  }
  .leaderboard-sales-badge.is-failed {
    border-color: rgba(236, 147, 147, 0.42);
    background: rgba(168, 72, 84, 0.34);
    color: rgba(255, 225, 228, 0.96);
  }
  .leaderboard-sales-inline {
    border-color: rgba(140, 210, 255, 0.34);
    background: rgba(56, 164, 198, 0.18);
    color: rgba(214, 242, 255, 0.92);
  }
  .leaderboard-sales-inline.is-success {
    border-color: rgba(128, 228, 156, 0.45);
    background: rgba(63, 160, 92, 0.3);
    color: rgba(228, 255, 236, 0.96);
  }
  .leaderboard-sales-inline.is-failed {
    border-color: rgba(236, 147, 147, 0.42);
    background: rgba(168, 72, 84, 0.3);
    color: rgba(255, 225, 228, 0.96);
  }
  .leaderboard-heat-chip {
    border-color: rgba(255, 255, 255, 0.16);
    background: rgba(255, 255, 255, 0.08);
    color: rgba(219, 232, 255, 0.76);
  }
  .leaderboard-heat-chip.is-hot {
    border-color: rgba(255, 144, 104, 0.46);
    background: rgba(255, 144, 104, 0.22);
    color: rgba(255, 224, 209, 0.96);
  }
  .leaderboard-heat-chip.is-warm {
    border-color: rgba(255, 194, 64, 0.44);
    background: rgba(255, 194, 64, 0.2);
    color: rgba(255, 241, 196, 0.96);
  }
  .leaderboard-heat-chip.is-active {
    border-color: rgba(0, 210, 255, 0.38);
    background: rgba(0, 210, 255, 0.18);
    color: rgba(214, 246, 255, 0.96);
  }
  .leaderboard-heat-chip.is-idle {
    border-color: rgba(255, 255, 255, 0.16);
    background: rgba(255, 255, 255, 0.08);
    color: rgba(219, 232, 255, 0.72);
  }
  .sales-mission-card {
    border-color: rgba(140, 210, 255, 0.3);
    background:
      radial-gradient(
        120% 120% at 0% 0%,
        rgba(255, 215, 64, 0.2),
        rgba(0, 0, 0, 0) 56%
      ),
      radial-gradient(
        120% 120% at 100% 100%,
        rgba(0, 210, 255, 0.14),
        rgba(0, 0, 0, 0) 58%
      ),
      linear-gradient(150deg, rgba(18, 24, 36, 0.92), rgba(10, 13, 22, 0.86));
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.46);
  }
  .sales-mission-title {
    color: rgba(195, 234, 255, 0.86);
  }
  .sales-mission-task {
    color: rgba(250, 253, 255, 0.96);
  }
  .sales-mission-meta {
    color: rgba(219, 232, 255, 0.72);
  }
  .sales-mission-btn {
    border-color: rgba(255, 255, 255, 0.16);
    background: rgba(255, 255, 255, 0.08);
    color: rgba(236, 246, 255, 0.94);
  }
  .sales-mission-btn.is-success {
    border-color: rgba(98, 212, 145, 0.62);
    background: rgba(35, 166, 100, 0.3);
    color: rgba(228, 255, 236, 0.96);
  }
  .sales-mission-btn.is-muted {
    border-color: rgba(196, 206, 230, 0.34);
    background: rgba(196, 206, 230, 0.16);
    color: rgba(226, 235, 252, 0.92);
  }
  .sales-mission-status {
    color: rgba(219, 232, 255, 0.72);
  }
  .rating-rank--form {
    border-color: rgba(0, 210, 255, 0.34);
    background: rgba(0, 210, 255, 0.18);
    color: rgba(214, 246, 255, 0.96);
  }
  .rating-rank--form span {
    color: rgba(241, 252, 255, 0.98);
  }
  .rating-podium-wrap {
    border-color: rgba(255, 255, 255, 0.12);
    background:
      radial-gradient(
        140% 130% at 50% 0%,
        var(--league-accent-soft, rgba(255, 215, 64, 0.2)),
        rgba(0, 0, 0, 0) 58%
      ),
      rgba(255, 255, 255, 0.05);
    box-shadow: 0 24px 52px rgba(0, 0, 0, 0.36);
  }
  .rating-podium-shift {
    border-color: rgba(255, 255, 255, 0.14);
    background: rgba(255, 255, 255, 0.08);
    color: rgba(219, 232, 255, 0.78);
  }
}
@media (prefers-color-scheme: dark) and (hover: hover) {
  .team-motivation-card:hover,
  .league-captain:hover,
  .league-roster:hover,
  .league-season:hover,
  .league-events:hover,
  .weekly-reward:hover {
    border-color: rgba(255, 255, 255, 0.22);
    box-shadow: 0 24px 52px rgba(0, 0, 0, 0.42);
  }
}

body[data-theme="dark"] .rating-hero {
  border: 1px solid rgba(255, 255, 255, 0.12);
  background:
    radial-gradient(
      140% 130% at 8% 0%,
      rgba(0, 210, 255, 0.24),
      rgba(0, 0, 0, 0) 58%
    ),
    radial-gradient(
      120% 120% at 100% 100%,
      rgba(127, 90, 255, 0.24),
      rgba(0, 0, 0, 0) 58%
    ),
    linear-gradient(150deg, rgba(18, 22, 34, 0.92), rgba(10, 13, 22, 0.86));
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.55);
}
body[data-theme="dark"] .rating-hero-kicker {
  color: rgba(219, 232, 255, 0.65);
}
body[data-theme="dark"] .rating-hero-title {
  color: rgba(255, 255, 255, 0.94);
}
body[data-theme="dark"] .rating-hero-sub {
  color: rgba(219, 232, 255, 0.78);
}
body[data-theme="dark"] .team-motivation-card {
  border-color: rgba(255, 255, 255, 0.12);
  background:
    radial-gradient(
      130% 120% at 0% 0%,
      rgba(0, 210, 255, 0.2),
      rgba(0, 0, 0, 0) 58%
    ),
    radial-gradient(
      120% 120% at 100% 100%,
      rgba(255, 215, 64, 0.16),
      rgba(0, 0, 0, 0) 62%
    ),
    linear-gradient(160deg, rgba(24, 30, 46, 0.9), rgba(12, 16, 28, 0.86));
}
body[data-theme="dark"] .team-motivation-card::before {
  opacity: 0.9;
}
body[data-theme="dark"] .team-motivation-title,
body[data-theme="dark"] .team-motivation-tier {
  color: rgba(255, 255, 255, 0.92);
}
body[data-theme="dark"] .team-motivation-sub,
body[data-theme="dark"] .team-motivation-label {
  color: rgba(219, 232, 255, 0.72);
}
body[data-theme="dark"] .leaderboard-top-chip {
  border-color: var(--league-accent-strong, rgba(255, 215, 64, 0.34));
  background: var(--league-accent-soft, rgba(255, 255, 255, 0.1));
  color: rgba(236, 244, 255, 0.92);
}
body[data-theme="dark"] .leaderboard-top-chip--duel {
  border-color: rgba(255, 158, 103, 0.48);
  background: linear-gradient(
    135deg,
    rgba(97, 54, 28, 0.74),
    rgba(67, 36, 18, 0.82)
  );
  color: rgba(255, 225, 197, 0.96);
}
body[data-theme="dark"] .leaderboard-top-chip--duel[data-tone="hot"] {
  border-color: rgba(255, 122, 60, 0.62);
  background: linear-gradient(
    135deg,
    rgba(118, 54, 20, 0.82),
    rgba(87, 36, 12, 0.88)
  );
  box-shadow: 0 12px 26px rgba(255, 104, 40, 0.28);
}
body[data-theme="dark"] .leaderboard-top-chip--battle {
  border-color: rgba(96, 198, 255, 0.42);
  background: linear-gradient(
    135deg,
    rgba(19, 59, 82, 0.78),
    rgba(11, 41, 63, 0.86)
  );
  color: rgba(214, 241, 255, 0.96);
}
body[data-theme="dark"] .leaderboard-top-chip--battle[data-tone="hot"] {
  border-color: rgba(56, 190, 255, 0.58);
  background: linear-gradient(
    135deg,
    rgba(22, 80, 108, 0.84),
    rgba(12, 56, 80, 0.9)
  );
  box-shadow: 0 12px 26px rgba(29, 162, 255, 0.22);
}
body[data-theme="dark"] .team-motivation-progress {
  background: rgba(255, 255, 255, 0.14);
}
body[data-theme="dark"] .team-challenge-milestone {
  border-color: rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.06);
  color: rgba(219, 232, 255, 0.72);
}
body[data-theme="dark"] .team-challenge-milestone.is-done {
  border-color: var(--league-accent-strong, rgba(255, 215, 64, 0.42));
  background: var(--league-accent-soft, rgba(255, 215, 64, 0.22));
  color: rgba(255, 244, 219, 0.96);
}
body[data-theme="dark"] .team-challenge-milestone.is-next {
  border-color: rgba(0, 210, 255, 0.42);
  color: rgba(214, 246, 255, 0.96);
}
body[data-theme="dark"] .league-spark-card {
  border-color: rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.06);
}
body[data-theme="dark"] .league-spark-title {
  color: rgba(219, 232, 255, 0.72);
}
body[data-theme="dark"] .league-spark-meta {
  color: rgba(219, 232, 255, 0.66);
}
body[data-theme="dark"] .league-duel-widget {
  border-color: rgba(255, 255, 255, 0.12);
  background:
    radial-gradient(
      130% 120% at 100% 0%,
      rgba(255, 182, 110, 0.24),
      rgba(0, 0, 0, 0) 58%
    ),
    rgba(255, 255, 255, 0.06);
}
body[data-theme="dark"] .league-duel-title {
  color: rgba(255, 236, 220, 0.9);
}
body[data-theme="dark"] .league-duel-rate {
  border-color: rgba(255, 158, 103, 0.42);
  background: rgba(97, 54, 28, 0.62);
  color: rgba(255, 228, 205, 0.95);
}
body[data-theme="dark"] .league-duel-widget[data-tone="hot"] .league-duel-rate {
  border-color: rgba(255, 122, 60, 0.62);
  background: linear-gradient(
    135deg,
    rgba(118, 54, 20, 0.82),
    rgba(87, 36, 12, 0.88)
  );
  color: rgba(255, 234, 216, 0.98);
}
body[data-theme="dark"] .league-duel-meta {
  color: rgba(219, 232, 255, 0.7);
}
body[data-theme="dark"] .league-duel-pill {
  border-color: rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.08);
  color: rgba(236, 244, 255, 0.9);
}
body[data-theme="dark"] .league-duel-pill.is-win {
  border-color: rgba(106, 207, 147, 0.44);
  background: rgba(49, 152, 89, 0.34);
  color: rgba(210, 255, 225, 0.96);
}
body[data-theme="dark"] .league-duel-pill.is-loss {
  border-color: rgba(255, 126, 126, 0.44);
  background: rgba(176, 52, 72, 0.34);
  color: rgba(255, 221, 225, 0.96);
}
body[data-theme="dark"] .league-duel-pill.is-draw {
  border-color: rgba(165, 176, 196, 0.42);
  background: rgba(107, 120, 143, 0.34);
  color: rgba(230, 236, 246, 0.94);
}
body[data-theme="dark"] .league-duel-empty {
  border-color: rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.05);
  color: rgba(219, 232, 255, 0.72);
}
body[data-theme="dark"] .league-breakdown-row {
  border-color: rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.06);
  color: rgba(219, 232, 255, 0.72);
}
body[data-theme="dark"] .league-breakdown-row strong {
  color: rgba(255, 255, 255, 0.9);
}
body[data-theme="dark"] .league-insight-note {
  border-color: rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.06);
  border-left-color: rgba(0, 210, 255, 0.52);
  color: rgba(219, 232, 255, 0.76);
}
body[data-theme="dark"] .league-insights-card {
  border-color: rgba(0, 210, 255, 0.34);
  background:
    radial-gradient(
      130% 120% at 0% 0%,
      rgba(0, 210, 255, 0.28),
      rgba(0, 0, 0, 0) 58%
    ),
    radial-gradient(
      120% 120% at 100% 100%,
      rgba(255, 215, 64, 0.2),
      rgba(0, 0, 0, 0) 62%
    ),
    linear-gradient(160deg, rgba(24, 30, 46, 0.92), rgba(11, 16, 30, 0.88));
}
body[data-theme="dark"] .league-goals-card {
  border-color: rgba(255, 174, 94, 0.34);
  background:
    radial-gradient(
      140% 130% at 100% 0%,
      rgba(255, 215, 64, 0.26),
      rgba(0, 0, 0, 0) 56%
    ),
    radial-gradient(
      120% 120% at 0% 100%,
      rgba(255, 144, 99, 0.2),
      rgba(0, 0, 0, 0) 58%
    ),
    linear-gradient(160deg, rgba(30, 25, 24, 0.9), rgba(20, 14, 14, 0.86));
}
body[data-theme="dark"] .league-goal-row {
  border-color: rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.06);
  color: rgba(219, 232, 255, 0.76);
}
body[data-theme="dark"] .league-goal-row .value {
  color: rgba(255, 255, 255, 0.9);
}
body[data-theme="dark"] .league-goal-row.is-done {
  border-color: rgba(128, 228, 156, 0.45);
  background: rgba(63, 160, 92, 0.3);
}
body[data-theme="dark"] .league-goals-claim {
  border-color: rgba(255, 255, 255, 0.16);
  background: linear-gradient(
    135deg,
    rgba(255, 215, 64, 0.28),
    rgba(255, 162, 83, 0.22)
  );
  color: rgba(255, 244, 219, 0.96);
}
body[data-theme="dark"] .league-captain,
body[data-theme="dark"] .league-roster,
body[data-theme="dark"] .league-season {
  border-color: rgba(255, 255, 255, 0.12);
  background:
    radial-gradient(
      130% 120% at 0% 0%,
      rgba(0, 210, 255, 0.18),
      rgba(0, 0, 0, 0) 58%
    ),
    radial-gradient(
      120% 120% at 100% 100%,
      rgba(255, 215, 64, 0.14),
      rgba(0, 0, 0, 0) 62%
    ),
    linear-gradient(160deg, rgba(23, 29, 44, 0.9), rgba(11, 16, 28, 0.86));
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.36);
}
body[data-theme="dark"] .league-captain-title,
body[data-theme="dark"] .league-captain-name {
  color: rgba(255, 255, 255, 0.9);
}
body[data-theme="dark"] .league-captain-meta,
body[data-theme="dark"] .league-season-kicker,
body[data-theme="dark"] .league-roster-role,
body[data-theme="dark"] .league-season-item-sub,
body[data-theme="dark"] .league-season-current {
  color: rgba(219, 232, 255, 0.72);
}
body[data-theme="dark"] .league-roster-row {
  border-color: rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.06);
}
body[data-theme="dark"] .league-roster-toggle {
  border-color: rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.08);
  color: rgba(219, 232, 255, 0.82);
}
body[data-theme="dark"] .league-roster-row[data-rank="1"] {
  border-color: rgba(255, 215, 64, 0.42);
  background: linear-gradient(
    135deg,
    rgba(255, 215, 64, 0.2),
    rgba(255, 255, 255, 0.08)
  );
}
body[data-theme="dark"] .league-roster-row[data-rank="2"] {
  border-color: rgba(205, 214, 227, 0.42);
  background: linear-gradient(
    135deg,
    rgba(205, 214, 227, 0.16),
    rgba(255, 255, 255, 0.08)
  );
}
body[data-theme="dark"] .league-roster-row[data-rank="3"] {
  border-color: rgba(205, 127, 50, 0.42);
  background: linear-gradient(
    135deg,
    rgba(205, 127, 50, 0.16),
    rgba(255, 255, 255, 0.08)
  );
}
body[data-theme="dark"] .league-roster-row.is-me {
  border-color: rgba(0, 210, 255, 0.46);
  box-shadow: inset 0 0 0 1px rgba(0, 210, 255, 0.26);
}
body[data-theme="dark"] .league-roster-rank {
  color: rgba(219, 232, 255, 0.74);
}
body[data-theme="dark"] .league-roster-name {
  color: rgba(255, 255, 255, 0.9);
}
body[data-theme="dark"] .league-roster-avatar {
  border-color: rgba(255, 255, 255, 0.24);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.34);
  background: rgba(255, 255, 255, 0.08);
}
body[data-theme="dark"] .league-roster-avatar-fallback {
  color: rgba(219, 232, 255, 0.86);
}
body[data-theme="dark"] .league-roster-score {
  color: rgba(255, 202, 97, 0.96);
}
body[data-theme="dark"] .league-roster-tail {
  border-color: rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.04);
  color: rgba(219, 232, 255, 0.72);
}
body[data-theme="dark"] .league-mode-chip {
  border-color: rgba(122, 177, 243, 0.38);
  background: rgba(33, 58, 98, 0.58);
  color: rgba(206, 229, 255, 0.92);
}
body[data-theme="dark"] .league-season-current,
body[data-theme="dark"] .league-season-item {
  border-color: rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.06);
}
body[data-theme="dark"] .league-season-item-top {
  color: rgba(255, 255, 255, 0.86);
}
body[data-theme="dark"] .league-events {
  border-color: rgba(255, 255, 255, 0.12);
  background:
    radial-gradient(
      130% 120% at 0% 0%,
      rgba(80, 180, 255, 0.18),
      rgba(0, 0, 0, 0) 58%
    ),
    radial-gradient(
      120% 120% at 100% 100%,
      rgba(255, 215, 64, 0.14),
      rgba(0, 0, 0, 0) 62%
    ),
    linear-gradient(160deg, rgba(22, 28, 42, 0.9), rgba(11, 16, 28, 0.86));
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.36);
}
body[data-theme="dark"] .league-events-clear {
  border-color: rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.08);
  color: rgba(219, 232, 255, 0.82);
}
body[data-theme="dark"] .league-event-row {
  border-color: rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.06);
}
body[data-theme="dark"] .league-event-icon {
  background: rgba(255, 255, 255, 0.1);
}
body[data-theme="dark"] .league-event-text {
  color: rgba(255, 255, 255, 0.88);
}
body[data-theme="dark"] .league-event-time {
  color: rgba(219, 232, 255, 0.66);
}
body[data-theme="dark"] .league-events-empty {
  border-color: rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.05);
  color: rgba(219, 232, 255, 0.72);
}
body[data-theme="dark"] .league-view-switch {
  border-color: rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.08);
}
body[data-theme="dark"] .league-view-btn {
  color: rgba(219, 232, 255, 0.74);
}
body[data-theme="dark"] .league-view-btn.is-active {
  color: rgba(255, 255, 255, 0.96);
}
body[data-theme="dark"] .league-nearby-cta {
  border-color: rgba(255, 255, 255, 0.16);
  background: linear-gradient(
    135deg,
    rgba(255, 215, 64, 0.28),
    rgba(255, 162, 83, 0.22)
  );
  color: rgba(255, 244, 219, 0.96);
}
body[data-theme="dark"] .league-you-now {
  border-color: var(--league-accent-strong, rgba(255, 215, 64, 0.34));
  background:
    radial-gradient(
      120% 120% at 0% 0%,
      var(--league-accent-soft, rgba(255, 215, 64, 0.2)),
      rgba(0, 0, 0, 0) 56%
    ),
    rgba(20, 24, 36, 0.88);
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.38);
}
body[data-theme="dark"] .league-you-now-kicker {
  color: rgba(219, 232, 255, 0.66);
}
body[data-theme="dark"] .league-you-now-metric .label {
  color: rgba(219, 232, 255, 0.64);
}
body[data-theme="dark"] .league-you-now-metric strong {
  color: rgba(255, 255, 255, 0.92);
}
body[data-theme="dark"] .league-you-now-shift {
  border-color: rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.1);
  color: rgba(236, 242, 255, 0.84);
}
body[data-theme="dark"] .league-you-now-badge {
  border-color: rgba(255, 160, 109, 0.42);
  background: linear-gradient(
    135deg,
    rgba(87, 48, 24, 0.76),
    rgba(61, 33, 16, 0.84)
  );
  color: rgba(255, 227, 203, 0.95);
}
body[data-theme="dark"] .league-you-now-badge[data-kind="battle"] {
  border-color: rgba(79, 191, 255, 0.44);
  background: linear-gradient(
    135deg,
    rgba(17, 61, 84, 0.78),
    rgba(10, 43, 62, 0.86)
  );
  color: rgba(212, 240, 255, 0.96);
}
body[data-theme="dark"] .league-you-now-badge[data-tone="hot"] {
  border-color: rgba(255, 122, 60, 0.64);
  background: linear-gradient(
    135deg,
    rgba(108, 50, 20, 0.84),
    rgba(82, 34, 12, 0.9)
  );
  box-shadow: 0 12px 26px rgba(255, 104, 40, 0.3);
}
body[data-theme="dark"]
  .league-you-now-badge[data-kind="battle"][data-tone="hot"] {
  border-color: rgba(56, 192, 255, 0.62);
  background: linear-gradient(
    135deg,
    rgba(20, 78, 106, 0.84),
    rgba(11, 57, 82, 0.9)
  );
  box-shadow: 0 12px 26px rgba(27, 159, 255, 0.24);
}
body[data-theme="dark"] .league-you-now.is-top3-surge .league-you-now-shift {
  border-color: rgba(255, 215, 64, 0.46);
  background: rgba(255, 215, 64, 0.24);
  color: rgba(255, 244, 219, 0.98);
}
body[data-theme="dark"] .weekly-reward {
  border: 1px solid rgba(255, 255, 255, 0.12);
  background:
    radial-gradient(
      120% 120% at 6% 0%,
      rgba(255, 215, 64, 0.22),
      rgba(0, 0, 0, 0) 56%
    ),
    radial-gradient(
      120% 120% at 100% 100%,
      rgba(0, 210, 255, 0.14),
      rgba(0, 0, 0, 0) 58%
    ),
    linear-gradient(150deg, rgba(20, 24, 36, 0.92), rgba(10, 13, 22, 0.86));
  box-shadow: 0 28px 60px rgba(0, 0, 0, 0.52);
}
body[data-theme="dark"] .weekly-reward-title {
  color: rgba(255, 255, 255, 0.92);
}
body[data-theme="dark"] .weekly-reward-sub {
  color: rgba(219, 232, 255, 0.7);
}
body[data-theme="dark"] .weekly-reward-timer {
  color: rgba(236, 242, 255, 0.86);
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.2);
}
body[data-theme="dark"] .weekly-reward-timer[data-state="ended"] {
  color: rgba(255, 239, 181, 0.94);
  background: rgba(255, 215, 64, 0.22);
  border-color: rgba(255, 215, 64, 0.38);
}
body[data-theme="dark"] .weekly-reward-item {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
}
body[data-theme="dark"] .weekly-reward-rank,
body[data-theme="dark"] .weekly-reward-name {
  color: rgba(255, 255, 255, 0.88);
}
body[data-theme="dark"] .weekly-reward-meta,
body[data-theme="dark"] .weekly-reward-note {
  color: rgba(219, 232, 255, 0.72);
}
body[data-theme="dark"] .leaderboard-sales-badge {
  border-color: rgba(140, 210, 255, 0.34);
  background: rgba(56, 164, 198, 0.22);
  color: rgba(214, 242, 255, 0.92);
}
body[data-theme="dark"] .leaderboard-sales-badge.is-success {
  border-color: rgba(128, 228, 156, 0.45);
  background: rgba(63, 160, 92, 0.34);
  color: rgba(228, 255, 236, 0.96);
}
body[data-theme="dark"] .leaderboard-sales-badge.is-failed {
  border-color: rgba(236, 147, 147, 0.42);
  background: rgba(168, 72, 84, 0.34);
  color: rgba(255, 225, 228, 0.96);
}
body[data-theme="dark"] .leaderboard-sales-inline {
  border-color: rgba(140, 210, 255, 0.34);
  background: rgba(56, 164, 198, 0.18);
  color: rgba(214, 242, 255, 0.92);
}
body[data-theme="dark"] .leaderboard-sales-inline.is-success {
  border-color: rgba(128, 228, 156, 0.45);
  background: rgba(63, 160, 92, 0.3);
  color: rgba(228, 255, 236, 0.96);
}
body[data-theme="dark"] .leaderboard-sales-inline.is-failed {
  border-color: rgba(236, 147, 147, 0.42);
  background: rgba(168, 72, 84, 0.3);
  color: rgba(255, 225, 228, 0.96);
}
body[data-theme="dark"] .leaderboard-heat-chip {
  border-color: rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.08);
  color: rgba(219, 232, 255, 0.76);
}
body[data-theme="dark"] .leaderboard-heat-chip.is-hot {
  border-color: rgba(255, 144, 104, 0.46);
  background: rgba(255, 144, 104, 0.22);
  color: rgba(255, 224, 209, 0.96);
}

body[data-theme="dark"] .leaderboard-heat-chip.is-warm {
  border-color: rgba(255, 194, 64, 0.44);
  background: rgba(255, 194, 64, 0.2);
  color: rgba(255, 241, 196, 0.96);
}
body[data-theme="dark"] .leaderboard-heat-chip.is-active {
  border-color: rgba(0, 210, 255, 0.38);
  background: rgba(0, 210, 255, 0.18);
  color: rgba(214, 246, 255, 0.96);
}
body[data-theme="dark"] .leaderboard-heat-chip.is-idle {
  border-color: rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.08);
  color: rgba(219, 232, 255, 0.72);
}
body[data-theme="dark"] .sales-mission-card {
  border-color: rgba(140, 210, 255, 0.3);
  background:
    radial-gradient(
      120% 120% at 0% 0%,
      rgba(255, 215, 64, 0.2),
      rgba(0, 0, 0, 0) 56%
    ),
    radial-gradient(
      120% 120% at 100% 100%,
      rgba(0, 210, 255, 0.14),
      rgba(0, 0, 0, 0) 58%
    ),
    linear-gradient(150deg, rgba(18, 24, 36, 0.92), rgba(10, 13, 22, 0.86));
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.46);
}
body[data-theme="dark"] .sales-mission-title {
  color: rgba(195, 234, 255, 0.86);
}
body[data-theme="dark"] .sales-mission-task {
  color: rgba(250, 253, 255, 0.96);
}
body[data-theme="dark"] .sales-mission-meta {
  color: rgba(219, 232, 255, 0.72);
}
body[data-theme="dark"] .sales-mission-btn {
  border-color: rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.08);
  color: rgba(236, 246, 255, 0.94);
}
body[data-theme="dark"] .sales-mission-btn.is-success {
  border-color: rgba(98, 212, 145, 0.62);
  background: rgba(35, 166, 100, 0.3);
  color: rgba(228, 255, 236, 0.96);
}
body[data-theme="dark"] .sales-mission-btn.is-muted {
  border-color: rgba(196, 206, 230, 0.34);
  background: rgba(196, 206, 230, 0.16);
  color: rgba(226, 235, 252, 0.92);
}
body[data-theme="dark"] .sales-mission-status {
  color: rgba(219, 232, 255, 0.72);
}
body[data-theme="dark"] .leaderboard-card {
  border-color: rgba(255, 214, 122, 0.34);
  background:
    radial-gradient(
      125% 112% at 10% 0%,
      rgba(255, 214, 112, 0.28),
      rgba(0, 0, 0, 0) 52%
    ),
    radial-gradient(
      108% 112% at 100% 100%,
      rgba(111, 173, 255, 0.2),
      rgba(0, 0, 0, 0) 58%
    ),
    linear-gradient(152deg, rgba(20, 24, 36, 0.96), rgba(11, 15, 26, 0.92));
  box-shadow:
    0 32px 78px rgba(0, 0, 0, 0.56),
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    inset 0 -30px 54px rgba(255, 214, 112, 0.1);
}
body[data-theme="dark"] .leaderboard-card::before {
  opacity: 0.52;
}
body[data-theme="dark"] .leaderboard-top-avatar-glow {
  background: radial-gradient(
    circle at 64% 70%,
    rgba(92, 207, 255, 0.16),
    rgba(92, 207, 255, 0) 58%
  );
}
body[data-theme="dark"] .leaderboard-top-avatar-ring {
  background: linear-gradient(
    145deg,
    rgba(255, 214, 110, 0.92),
    rgba(74, 184, 255, 0.88)
  );
  box-shadow: 0 16px 30px rgba(0, 0, 0, 0.28);
}
body[data-theme="dark"] #best-employee-photo {
  border-color: rgba(255, 255, 255, 0.94);
  box-shadow:
    0 24px 44px rgba(0, 0, 0, 0.4),
    0 0 0 4px rgba(255, 215, 120, 0.26);
}
body[data-theme="dark"] .leaderboard-name {
  color: rgba(255, 255, 255, 0.96);
}
body[data-theme="dark"] .leaderboard-role {
  color: rgba(219, 232, 255, 0.72);
}
body[data-theme="dark"] .leaderboard-top-note {
  color: rgba(196, 224, 255, 0.84);
  border-color: rgba(121, 189, 255, 0.34);
  background: rgba(44, 72, 106, 0.56);
}
body[data-theme="dark"] .leaderboard-top-switch {
  border-color: rgba(122, 175, 232, 0.34);
  background: rgba(22, 34, 54, 0.64);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
body[data-theme="dark"] .leaderboard-top-tab {
  border-color: transparent;
  background: transparent;
  color: rgba(212, 236, 255, 0.84);
}
body[data-theme="dark"] .leaderboard-top-tab.is-active {
  border-color: rgba(115, 196, 255, 0.5);
  background: linear-gradient(
    135deg,
    rgba(36, 68, 102, 0.84),
    rgba(28, 54, 84, 0.8)
  );
  color: rgba(237, 248, 255, 0.95);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.26);
}
body[data-theme="dark"]
  .leaderboard-card.is-hero-pinned
  .leaderboard-top-tab.is-active {
  border-color: rgba(255, 204, 118, 0.58);
  background: linear-gradient(
    135deg,
    rgba(84, 62, 25, 0.84),
    rgba(72, 52, 21, 0.78)
  );
  color: rgba(255, 233, 176, 0.96);
}
body[data-theme="dark"] .leaderboard-points {
  background: linear-gradient(
    135deg,
    rgba(91, 70, 15, 0.94),
    rgba(120, 84, 10, 0.88)
  );
  border-color: rgba(255, 208, 98, 0.4);
  color: rgba(255, 234, 178, 0.98);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 12px 26px rgba(0, 0, 0, 0.24);
}
body[data-theme="dark"] .leaderboard-points[data-mode="monthActive"] {
  background: linear-gradient(
    135deg,
    rgba(24, 84, 68, 0.92),
    rgba(18, 66, 54, 0.88)
  );
  border-color: rgba(82, 222, 186, 0.42);
  color: rgba(198, 255, 236, 0.96);
}
body[data-theme="dark"] #best-employee-score {
  color: rgba(255, 244, 208, 0.98);
}
body[data-theme="dark"] #best-employee-metric-label {
  color: rgba(255, 231, 170, 0.84);
}
body[data-theme="dark"] .leaderboard-hype {
  border-color: rgba(255, 145, 95, 0.3);
  background: linear-gradient(
    135deg,
    rgba(92, 42, 20, 0.82),
    rgba(67, 29, 14, 0.76)
  );
  color: rgba(255, 220, 202, 0.9);
}
body[data-theme="dark"] .leaderboard-top-dot {
  background: rgba(174, 201, 231, 0.32);
}
body[data-theme="dark"] .leaderboard-top-dot.is-active {
  background: rgba(114, 196, 255, 0.95);
  box-shadow: 0 0 0 4px rgba(114, 196, 255, 0.2);
}
body[data-theme="dark"]
  .leaderboard-card.is-activity-mode
  .leaderboard-top-dot.is-active {
  background: rgba(96, 232, 196, 0.96);
  box-shadow: 0 0 0 4px rgba(96, 232, 196, 0.2);
}
body[data-theme="dark"] .leaderboard-team-progress {
  border-color: rgba(118, 198, 255, 0.24);
  background: linear-gradient(
    135deg,
    rgba(24, 42, 68, 0.92),
    rgba(15, 30, 52, 0.9)
  );
}
body[data-theme="dark"] .leaderboard-team-progress-head {
  color: rgba(184, 225, 255, 0.82);
}
body[data-theme="dark"] .leaderboard-team-progress-head strong {
  color: rgba(244, 250, 255, 0.96);
}
body[data-theme="dark"] .leaderboard-team-progress-track {
  background: rgba(255, 255, 255, 0.12);
}
body[data-theme="dark"] .leaderboard-team-progress-meta {
  color: rgba(219, 232, 255, 0.74);
}
body[data-theme="dark"] .leaderboard-top-meta {
  border-color: rgba(129, 186, 248, 0.26);
  background: rgba(25, 40, 62, 0.62);
}
body[data-theme="dark"] .leaderboard-top-chip--tier {
  border-color: rgba(118, 198, 255, 0.34);
  background: linear-gradient(
    135deg,
    rgba(28, 58, 86, 0.9),
    rgba(21, 42, 66, 0.88)
  );
  color: rgba(217, 240, 255, 0.96);
}
body[data-theme="dark"] .leaderboard-sales-badge.is-success {
  border-color: rgba(98, 212, 145, 0.5);
  background: rgba(35, 166, 100, 0.22);
  color: rgba(228, 255, 236, 0.96);
}
body[data-theme="dark"] .leaderboard-sales-badge.is-failed {
  border-color: rgba(255, 132, 132, 0.42);
  background: rgba(201, 64, 84, 0.2);
  color: rgba(255, 218, 224, 0.96);
}
body[data-theme="dark"] .leaderboard-sales-badge.is-pending {
  border-color: rgba(125, 194, 255, 0.4);
  background: rgba(36, 116, 176, 0.22);
  color: rgba(214, 241, 255, 0.95);
}
body[data-theme="dark"] #leaderboard-top-card[data-league-tier="bronze"] {
  border-color: rgba(217, 158, 114, 0.44);
  background:
    radial-gradient(
      120% 110% at 10% 0%,
      rgba(209, 132, 78, 0.28),
      rgba(0, 0, 0, 0) 52%
    ),
    radial-gradient(
      108% 112% at 100% 100%,
      rgba(104, 176, 248, 0.2),
      rgba(0, 0, 0, 0) 58%
    ),
    linear-gradient(152deg, rgba(34, 25, 20, 0.95), rgba(16, 18, 28, 0.92));
}
body[data-theme="dark"] #leaderboard-top-card[data-league-tier="silver"] {
  border-color: rgba(184, 204, 226, 0.4);
  background:
    radial-gradient(
      120% 110% at 10% 0%,
      rgba(141, 168, 194, 0.28),
      rgba(0, 0, 0, 0) 52%
    ),
    radial-gradient(
      108% 112% at 100% 100%,
      rgba(103, 177, 248, 0.2),
      rgba(0, 0, 0, 0) 58%
    ),
    linear-gradient(152deg, rgba(22, 29, 42, 0.95), rgba(11, 15, 26, 0.92));
}
body[data-theme="dark"] #leaderboard-top-card[data-league-tier="gold"] {
  border-color: rgba(244, 193, 98, 0.48);
}
body[data-theme="dark"] #leaderboard-top-card[data-league-tier="platinum"] {
  border-color: rgba(127, 208, 255, 0.48);
  background:
    radial-gradient(
      120% 110% at 10% 0%,
      rgba(102, 176, 230, 0.3),
      rgba(0, 0, 0, 0) 52%
    ),
    radial-gradient(
      108% 112% at 100% 100%,
      rgba(86, 198, 255, 0.24),
      rgba(0, 0, 0, 0) 58%
    ),
    linear-gradient(152deg, rgba(19, 30, 45, 0.95), rgba(10, 15, 26, 0.92));
}
body[data-theme="dark"]
  #leaderboard-top-card[data-league-tier="bronze"]
  .leaderboard-top-avatar-ring {
  background: linear-gradient(
    145deg,
    rgba(210, 148, 104, 0.96),
    rgba(73, 168, 231, 0.88)
  );
}
body[data-theme="dark"]
  #leaderboard-top-card[data-league-tier="silver"]
  .leaderboard-top-avatar-ring {
  background: linear-gradient(
    145deg,
    rgba(170, 198, 223, 0.96),
    rgba(73, 182, 241, 0.9)
  );
}
body[data-theme="dark"]
  #leaderboard-top-card[data-league-tier="gold"]
  .leaderboard-top-avatar-ring {
  background: linear-gradient(
    145deg,
    rgba(255, 210, 112, 0.96),
    rgba(74, 184, 255, 0.88)
  );
}
body[data-theme="dark"]
  #leaderboard-top-card[data-league-tier="platinum"]
  .leaderboard-top-avatar-ring {
  background: linear-gradient(
    145deg,
    rgba(151, 221, 255, 0.98),
    rgba(90, 228, 255, 0.92)
  );
}
body[data-theme="dark"] .leaderboard-push-fab {
  border-color: rgba(255, 255, 255, 0.24);
  background: linear-gradient(
    135deg,
    rgba(31, 36, 49, 0.94),
    rgba(18, 22, 33, 0.94)
  );
  color: rgba(205, 232, 255, 0.94);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.42);
}
body[data-theme="dark"] .leaderboard-push-fab.is-active {
  border-color: rgba(103, 224, 156, 0.72);
  background: linear-gradient(
    135deg,
    rgba(23, 61, 42, 0.96),
    rgba(18, 45, 34, 0.96)
  );
  color: rgba(185, 255, 216, 0.98);
}
body[data-theme="dark"] .rating-rank--form {
  border-color: rgba(0, 210, 255, 0.34);
  background: rgba(0, 210, 255, 0.18);
  color: rgba(214, 246, 255, 0.96);
}
body[data-theme="dark"] .rating-rank--form span {
  color: rgba(241, 252, 255, 0.98);
}
body[data-theme="dark"] .rating-rank-shift {
  color: rgba(236, 242, 255, 0.84);
  border-color: rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.1);
}
body[data-theme="dark"] .rating-rank-shift[data-move="up"] {
  color: rgba(179, 255, 207, 0.95);
  border-color: rgba(88, 204, 2, 0.4);
  background: rgba(88, 204, 2, 0.18);
}
body[data-theme="dark"] .rating-rank-shift[data-move="down"] {
  color: rgba(255, 188, 197, 0.95);
  border-color: rgba(255, 120, 120, 0.4);
  background: rgba(255, 120, 120, 0.18);
}
@media (hover: hover) {
  body[data-theme="dark"] .team-motivation-card:hover,
  body[data-theme="dark"] .league-captain:hover,
  body[data-theme="dark"] .league-roster:hover,
  body[data-theme="dark"] .league-season:hover,
  body[data-theme="dark"] .league-events:hover,
  body[data-theme="dark"] .weekly-reward:hover {
    border-color: rgba(255, 255, 255, 0.22);
    box-shadow: 0 24px 52px rgba(0, 0, 0, 0.42);
  }
}
body[data-theme="dark"] .rating-podium-item {
  border-color: rgba(255, 255, 255, 0.14);
  background:
    radial-gradient(
      120% 120% at 8% 0%,
      rgba(255, 255, 255, 0.1),
      rgba(255, 255, 255, 0) 50%
    ),
    rgba(255, 255, 255, 0.06);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.4);
}
body[data-theme="dark"] .rating-podium-wrap {
  border-color: rgba(255, 255, 255, 0.12);
  background:
    radial-gradient(
      140% 130% at 50% 0%,
      var(--league-accent-soft, rgba(255, 215, 64, 0.2)),
      rgba(0, 0, 0, 0) 58%
    ),
    rgba(255, 255, 255, 0.05);
  box-shadow: 0 24px 52px rgba(0, 0, 0, 0.36);
}
body[data-theme="dark"] .rating-podium-item.is-rank-1 {
  border-color: rgba(255, 215, 64, 0.4);
  background:
    radial-gradient(
      120% 120% at 50% 0%,
      rgba(255, 215, 64, 0.2),
      rgba(255, 255, 255, 0) 56%
    ),
    rgba(255, 255, 255, 0.08);
}
body[data-theme="dark"] .rating-podium-item.is-rank-2 {
  border-color: rgba(188, 206, 238, 0.28);
  background:
    radial-gradient(
      120% 120% at 50% 0%,
      rgba(188, 206, 238, 0.18),
      rgba(255, 255, 255, 0) 56%
    ),
    rgba(255, 255, 255, 0.07);
}
body[data-theme="dark"] .rating-podium-item.is-rank-3 {
  border-color: rgba(221, 154, 108, 0.3);
  background:
    radial-gradient(
      120% 120% at 50% 0%,
      rgba(221, 154, 108, 0.18),
      rgba(255, 255, 255, 0) 56%
    ),
    rgba(255, 255, 255, 0.07);
}
body[data-theme="dark"] .rating-podium-medal {
  border-color: rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.08);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
body[data-theme="dark"] .rating-podium-rank {
  color: rgba(219, 232, 255, 0.72);
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.12);
}
body[data-theme="dark"] .rating-podium-name {
  color: rgba(255, 255, 255, 0.92);
}
body[data-theme="dark"] .rating-podium-role {
  color: rgba(219, 232, 255, 0.7);
}
body[data-theme="dark"] .rating-podium-shift {
  border-color: rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.08);
  color: rgba(219, 232, 255, 0.78);
}
body[data-theme="dark"] .rating-podium-base {
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.16),
    rgba(255, 255, 255, 0.06)
  );
  border-top-color: rgba(255, 255, 255, 0.12);
}

.profile-panel {
  display: flex;
  align-items: center;
  gap: 18px;
  border-radius: 18px;
  padding: 18px;
  margin-bottom: 25px;
  flex-wrap: wrap;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(6px);
}

.profile-settings-panel .profile-panel {
  padding: 0;
  margin-bottom: 10px;
  background: transparent;
  border: none;
  backdrop-filter: none;
}

.profile-photo-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  min-width: 120px;
}

.profile-preview-img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid #111;
  background: #111;
  box-shadow: inset 0 0 12px rgba(0, 0, 0, 0.55);
}

.profile-photo-btn {
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 999px;
  padding: 6px 14px;
  color: #fff;
  font-weight: 600;
  cursor: pointer;
  transition:
    background 0.2s,
    transform 0.2s;
}

.profile-photo-btn:hover {
  background: rgba(255, 255, 255, 0.25);
}

.profile-avatar-action-btn {
  margin-top: 8px;
  width: 100%;
  text-align: center;
}

.profile-photo-frame {
  width: 116px;
  height: 116px;
  border-radius: 50%;
  padding: 4px;
  background: conic-gradient(
    from 180deg,
    rgba(255, 255, 255, 0.12),
    var(--profile-accent, #1da1f2),
    rgba(255, 255, 255, 0.1),
    var(--profile-accent, #1da1f2)
  );
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow:
    0 16px 34px rgba(0, 0, 0, 0.32),
    0 0 0 1px rgba(255, 255, 255, 0.06) inset;
}

.profile-photo-frame::after {
  content: "";
  position: absolute;
  top: 8px;
  right: 12px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.8);
  box-shadow: 0 8px 18px rgba(255, 255, 255, 0.4);
}

.profile-settings-panel .profile-photo-frame {
  width: 112px;
  height: 112px;
  padding: 3px;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.1),
    rgba(255, 255, 255, 0.04)
  );
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow:
    0 18px 40px rgba(0, 0, 0, 0.35),
    0 0 0 6px rgba(29, 161, 242, 0.12);
}

.profile-settings-panel .profile-photo-frame::after {
  display: none;
}

.profile-settings-panel .profile-preview-img {
  border: none;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

.profile-card .profile-display-avatar {
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.35);
}

.profile-card-main {
  display: flex;
  align-items: flex-start;
  gap: 18px;
}

.profile-card-avatar {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.profile-card-avatar .profile-photo-frame {
  width: 128px;
  height: 128px;
}

.profile-display-avatar {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid #111;
  background: #111;
  box-shadow: inset 0 0 12px rgba(0, 0, 0, 0.55);
}

.profile-card-info {
  flex: 1;
  color: #fff;
  min-width: 0;
}

.profile-hero-kicker {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid rgba(126, 227, 255, 0.36);
  background: rgba(126, 227, 255, 0.12);
  color: rgba(220, 245, 255, 0.94);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 900;
  margin-bottom: 8px;
}

.profile-hero-headline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.profile-share-card-btn {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.24);
  background: linear-gradient(
    145deg,
    rgba(255, 255, 255, 0.16),
    rgba(255, 255, 255, 0.06)
  );
  color: rgba(233, 245, 255, 0.96);
  font-size: 16px;
  font-weight: 900;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.24);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition:
    transform 0.16s ease,
    box-shadow 0.16s ease,
    border-color 0.16s ease;
}

.profile-share-card-btn:hover {
  transform: translateY(-1px);
  border-color: rgba(156, 224, 255, 0.54);
  box-shadow:
    0 12px 26px rgba(0, 0, 0, 0.3),
    0 0 0 1px rgba(156, 224, 255, 0.18) inset;
}

.profile-share-card-btn:active {
  transform: translateY(0) scale(0.97);
}

.profile-card-name {
  font-size: 1.64rem;
  font-weight: 900;
  margin-bottom: 4px;
  letter-spacing: 0.01em;
  text-shadow: 0 8px 22px rgba(0, 0, 0, 0.46);
}

.profile-card-role {
  font-size: 0.9rem;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  font-weight: 600;
  opacity: 0.8;
  margin-bottom: 8px;
}

.profile-hero-day-kpi {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 28px;
  margin-bottom: 8px;
  padding: 5px 11px;
  border-radius: 999px;
  border: 1px solid rgba(128, 219, 255, 0.34);
  background: linear-gradient(
    135deg,
    rgba(87, 204, 255, 0.2),
    rgba(117, 173, 255, 0.12)
  );
  color: rgba(228, 245, 255, 0.95);
  font-size: 0.78rem;
  font-weight: 820;
  letter-spacing: 0.02em;
}

.profile-card-meta {
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.85);
  margin-bottom: 8px;
  line-height: 1.3;
}

.profile-card-meta[hidden] {
  display: none !important;
}

.profile-weekly-goals {
  margin-bottom: 10px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 14px;
  background: linear-gradient(
    150deg,
    rgba(255, 255, 255, 0.12),
    rgba(255, 255, 255, 0.04)
  );
  padding: 9px 9px 7px;
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.22);
}

.profile-weekly-goals-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 9px;
}

.profile-weekly-goals-title {
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(205, 230, 251, 0.82);
  font-weight: 850;
}

.profile-weekly-goals-score {
  font-size: 12px;
  color: rgba(236, 248, 255, 0.95);
  font-weight: 900;
}

.profile-weekly-goal + .profile-weekly-goal {
  margin-top: 8px;
}

.profile-weekly-goal-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.profile-weekly-goal-name {
  font-size: 11px;
  color: rgba(211, 231, 249, 0.84);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.profile-weekly-goal-value {
  font-size: 12px;
  font-weight: 850;
  color: rgba(247, 251, 255, 0.98);
}

.profile-weekly-goal-bar {
  margin-top: 5px;
  height: 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  overflow: hidden;
}

.profile-weekly-goal-fill {
  display: block;
  width: 0%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(
    90deg,
    rgba(255, 189, 86, 0.95),
    rgba(92, 221, 255, 0.92)
  );
  box-shadow: 0 0 14px rgba(99, 210, 255, 0.32);
  transition: width 0.36s ease;
}

.profile-weekly-chart {
  margin-bottom: 10px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: linear-gradient(
    155deg,
    rgba(255, 255, 255, 0.11),
    rgba(255, 255, 255, 0.04)
  );
  padding: 8px 9px 7px;
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.22);
}

.profile-weekly-chart-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(203, 229, 249, 0.82);
  font-weight: 850;
}

.profile-weekly-chart-head #profile-weekly-chart-meta {
  letter-spacing: 0.08em;
  font-size: 10px;
}

.profile-weekly-chart-svg {
  display: block;
  width: 100%;
  height: 70px;
  margin-top: 6px;
}

.profile-weekly-chart .spark-grid {
  stroke: rgba(255, 255, 255, 0.12);
  stroke-width: 1;
}

.profile-weekly-chart .spark-grid-today {
  stroke: rgba(150, 229, 255, 0.86);
  stroke-width: 1.25;
  stroke-dasharray: 2.2 2;
  filter: drop-shadow(0 0 3px rgba(120, 231, 255, 0.32));
}

.profile-weekly-chart .spark-area-xp {
  fill: rgba(255, 196, 93, 0.2);
}

.profile-weekly-chart .spark-line-xp {
  fill: none;
  stroke: rgba(255, 201, 108, 0.98);
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.profile-weekly-chart .spark-line-streak {
  fill: none;
  stroke: rgba(96, 226, 255, 0.96);
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 4 4;
}

.profile-weekly-chart .spark-dot-xp {
  fill: rgba(255, 202, 111, 1);
  filter: drop-shadow(0 0 6px rgba(255, 202, 111, 0.52));
}

.profile-weekly-chart .spark-dot-streak {
  fill: rgba(120, 231, 255, 1);
  filter: drop-shadow(0 0 6px rgba(120, 231, 255, 0.48));
}

.profile-weekly-chart-legend {
  margin-top: 4px;
  display: flex;
  gap: 12px;
  font-size: 11px;
  color: rgba(215, 235, 251, 0.86);
}

.profile-weekly-chart-legend span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.profile-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
}

.profile-dot--xp {
  background: rgba(255, 202, 111, 0.96);
}

.profile-dot--streak {
  background: rgba(120, 231, 255, 0.96);
}

.profile-weekly-chart-days {
  margin-top: 4px;
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 4px;
  color: rgba(190, 217, 240, 0.78);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-align: center;
}

.profile-hero-timeline-wrap {
  position: relative;
  margin-bottom: 9px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 16px;
  background:
    radial-gradient(
      115% 140% at 100% 0%,
      rgba(106, 222, 255, 0.18),
      rgba(255, 255, 255, 0) 52%
    ),
    linear-gradient(
      155deg,
      rgba(255, 255, 255, 0.11),
      rgba(255, 255, 255, 0.04)
    );
  padding: 8px 8px 7px;
  box-shadow: 0 18px 36px rgba(0, 0, 0, 0.24);
  overflow: hidden;
}

.profile-hero-timeline-wrap::before {
  content: "";
  position: absolute;
  left: 10px;
  right: 10px;
  top: 30px;
  height: 1px;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0),
    rgba(162, 223, 255, 0.5),
    rgba(255, 255, 255, 0)
  );
  pointer-events: none;
}

.profile-hero-timeline-title {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: rgba(205, 228, 249, 0.86);
  margin-bottom: 7px;
  font-weight: 850;
}

.profile-hero-timeline-title::before {
  content: "✦";
  color: rgba(255, 201, 108, 0.95);
  font-size: 10px;
  line-height: 1;
}

.profile-hero-timeline {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 1px 1px 3px;
  scrollbar-width: thin;
  scroll-snap-type: x proximity;
  overscroll-behavior-inline: contain;
}

.profile-hero-timeline::-webkit-scrollbar {
  height: 6px;
}

.profile-hero-timeline::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.26);
  border-radius: 999px;
}

.profile-hero-ach-chip {
  position: relative;
  display: inline-grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 9px;
  min-height: 46px;
  padding: 9px 11px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: linear-gradient(
    145deg,
    rgba(255, 255, 255, 0.16),
    rgba(255, 255, 255, 0.06)
  );
  color: rgba(246, 251, 255, 0.96);
  font-size: 0.76rem;
  font-weight: 850;
  letter-spacing: 0.01em;
  white-space: normal;
  flex: 0 0 auto;
  min-width: min(252px, 76vw);
  scroll-snap-align: start;
  box-shadow:
    0 12px 22px rgba(0, 0, 0, 0.2),
    0 0 0 1px rgba(255, 255, 255, 0.06) inset;
  overflow: hidden;
}

.profile-hero-ach-chip.is-featured {
  min-width: min(286px, 88vw);
  min-height: 54px;
  padding: 10px 12px;
  border-color: rgba(170, 231, 255, 0.5);
  background:
    radial-gradient(
      100% 120% at 100% 0%,
      rgba(116, 224, 255, 0.22),
      rgba(255, 255, 255, 0) 54%
    ),
    linear-gradient(145deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.08));
  box-shadow:
    0 16px 28px rgba(0, 0, 0, 0.24),
    0 0 0 1px rgba(170, 231, 255, 0.18) inset;
}

.profile-hero-ach-chip.is-featured .icon {
  width: 24px;
  height: 24px;
}

.profile-hero-ach-chip.is-featured .label {
  font-size: 0.79rem;
}

.profile-hero-ach-chip.is-compact {
  min-width: min(210px, 64vw);
  min-height: 41px;
  padding: 7px 10px;
  gap: 7px;
  border-radius: 14px;
}

.profile-hero-ach-chip.is-compact .icon {
  width: 20px;
  height: 20px;
  font-size: 0.87em;
}

.profile-hero-ach-chip.is-compact .label {
  -webkit-line-clamp: 1;
  line-height: 1.12;
  font-size: 0.72rem;
}

.profile-hero-ach-chip.is-compact .meta {
  min-height: 18px;
  padding: 1px 7px;
  font-size: 0.64rem;
}

.profile-hero-ach-chip::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  bottom: 8px;
  width: 3px;
  border-radius: 3px;
  background: linear-gradient(
    180deg,
    rgba(120, 230, 255, 0.95),
    rgba(255, 202, 105, 0.92)
  );
  opacity: 0.8;
}

.profile-hero-ach-chip .icon {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.22);
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.2);
  font-size: 0.95em;
  line-height: 1;
}

.profile-hero-ach-chip .label {
  min-width: 0;
  max-width: none;
  overflow-wrap: anywhere;
  line-height: 1.16;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.profile-hero-ach-chip .meta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 20px;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  background: rgba(8, 18, 34, 0.24);
  color: rgba(205, 230, 252, 0.88);
  font-size: 0.68rem;
  font-weight: 700;
  white-space: nowrap;
}

.profile-hero-ach-chip.is-premium {
  border-color: rgba(255, 226, 140, 0.58);
  background: linear-gradient(
    145deg,
    rgba(255, 228, 160, 0.22),
    rgba(255, 210, 110, 0.14)
  );
  color: rgba(255, 244, 212, 0.99);
}

.profile-hero-ach-chip.is-fresh {
  border-color: rgba(135, 239, 200, 0.6);
  background: linear-gradient(
    145deg,
    rgba(82, 216, 171, 0.24),
    rgba(88, 192, 255, 0.16)
  );
  box-shadow:
    0 12px 26px rgba(0, 0, 0, 0.24),
    0 0 0 1px rgba(135, 239, 200, 0.22) inset;
}

.profile-hero-ach-chip.is-fresh::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  border: 1px solid rgba(177, 255, 227, 0.55);
  opacity: 0.24;
  animation: profileFreshPulse 2.6s ease-in-out infinite;
  pointer-events: none;
}

.profile-hero-ach-chip.is-empty {
  border-style: dashed;
  color: rgba(201, 224, 246, 0.84);
  min-width: 100%;
  justify-content: center;
  text-align: center;
}

@keyframes profileFreshPulse {
  0%,
  100% {
    opacity: 0.18;
    box-shadow: 0 0 0 0 rgba(157, 255, 221, 0.3);
  }
  50% {
    opacity: 0.5;
    box-shadow: 0 0 0 10px rgba(157, 255, 221, 0);
  }
}

.profile-hero-timeline.is-animating .profile-hero-ach-chip {
  opacity: 0;
  transform: translateY(8px) scale(0.98);
  animation: profileHeroAchIn 420ms cubic-bezier(0.2, 0.85, 0.24, 1) forwards;
  animation-delay: calc(var(--ach-stagger, 0) * 90ms);
}

@keyframes profileHeroAchIn {
  0% {
    opacity: 0;
    transform: translateY(8px) scale(0.98);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.profile-quick-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 10px;
}

.profile-service-battle-card {
  position: relative;
  overflow: hidden;
  margin: 6px 0 10px;
  padding: 12px 12px 11px;
  border-radius: 16px;
  border: 1px solid rgba(124, 220, 255, 0.24);
  background:
    radial-gradient(
      120% 120% at 0% 0%,
      rgba(89, 214, 255, 0.14),
      rgba(255, 255, 255, 0) 56%
    ),
    linear-gradient(
      155deg,
      rgba(255, 255, 255, 0.13),
      rgba(255, 255, 255, 0.05)
    );
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.2);
}

.profile-service-battle-card::before {
  content: "";
  position: absolute;
  inset: auto -18% -58% auto;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(86, 204, 255, 0.24),
    rgba(86, 204, 255, 0)
  );
  pointer-events: none;
}

.profile-service-battle-head {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.profile-service-battle-kicker {
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(198, 228, 248, 0.84);
}

.profile-service-battle-badge {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid rgba(121, 212, 255, 0.26);
  background: rgba(9, 31, 52, 0.34);
  color: rgba(234, 247, 255, 0.92);
  font-size: 11px;
  font-weight: 820;
}

.profile-service-battle-grid {
  position: relative;
  z-index: 1;
  margin-top: 10px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.profile-service-battle-metric {
  min-width: 0;
  display: grid;
  gap: 4px;
  padding: 9px 10px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(6, 16, 34, 0.26);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.profile-service-battle-metric span {
  font-size: 10px;
  font-weight: 760;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(194, 220, 240, 0.72);
}

.profile-service-battle-metric strong {
  font-size: 1rem;
  font-weight: 920;
  color: rgba(255, 255, 255, 0.98);
  line-height: 1.05;
}

@media (max-width: 480px) {
  .profile-service-battle-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.profile-service-battle-card[data-tone="warm"] {
  border-color: rgba(102, 215, 255, 0.32);
  box-shadow:
    0 16px 34px rgba(0, 0, 0, 0.22),
    0 0 0 1px rgba(84, 202, 255, 0.08) inset;
}

.profile-service-battle-card[data-tone="hot"] {
  border-color: rgba(74, 209, 255, 0.42);
  box-shadow:
    0 18px 38px rgba(0, 0, 0, 0.24),
    0 0 28px rgba(66, 192, 255, 0.12);
}

.profile-pill {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.25);
}

.profile-pill-k {
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
}

.profile-pill-v {
  font-size: 14px;
  font-weight: 900;
  color: #fff;
}

.profile-showcase-grid {
  margin-top: 8px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
}

.profile-showcase-item {
  --showcase-accent: rgba(121, 223, 255, 0.36);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: linear-gradient(
    155deg,
    rgba(255, 255, 255, 0.14),
    rgba(255, 255, 255, 0.05)
  );
  padding: 10px 12px 9px;
  min-height: 68px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  box-shadow:
    0 12px 24px rgba(0, 0, 0, 0.24),
    0 0 0 1px rgba(255, 255, 255, 0.05) inset;
  transform: translateY(0) scale(1);
  transition:
    transform 0.24s ease,
    box-shadow 0.24s ease,
    border-color 0.24s ease;
  animation: profileShowcaseFloat 8.4s ease-in-out infinite;
  animation-delay: var(--showcase-delay, 0s);
  will-change: transform, box-shadow, filter;
}

.profile-showcase-item:nth-child(1) {
  --showcase-accent: rgba(121, 223, 255, 0.44);
  --showcase-delay: 0s;
}
.profile-showcase-item:nth-child(2) {
  --showcase-accent: rgba(255, 205, 118, 0.46);
  --showcase-delay: 0.9s;
}
.profile-showcase-item:nth-child(3) {
  --showcase-accent: rgba(133, 244, 196, 0.44);
  --showcase-delay: 1.8s;
}
.profile-showcase-item:nth-child(4) {
  --showcase-accent: rgba(192, 174, 255, 0.46);
  --showcase-delay: 2.7s;
}

.profile-showcase-item::before {
  content: "";
  position: absolute;
  inset: -20% 50% auto -26%;
  height: 88%;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    var(--showcase-accent),
    rgba(255, 255, 255, 0)
  );
  pointer-events: none;
  z-index: 0;
  animation: profileShowcaseAura 7.4s ease-in-out infinite;
  animation-delay: var(--showcase-delay, 0s);
}

.profile-showcase-item::after {
  content: attr(data-icon);
  position: absolute;
  top: 8px;
  right: 8px;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  background: rgba(7, 15, 30, 0.42);
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.22);
  z-index: 1;
  animation: profileShowcaseBadgePulse 6.8s ease-in-out infinite;
  animation-delay: var(--showcase-delay, 0s);
}

.profile-showcase-item:hover {
  transform: translateY(-2px) scale(1.01);
  border-color: rgba(176, 232, 255, 0.34);
  box-shadow:
    0 16px 30px rgba(0, 0, 0, 0.28),
    0 0 0 1px rgba(255, 255, 255, 0.08) inset;
}

@keyframes profileShowcaseFloat {
  0%,
  100% {
    transform: translateY(0) scale(1);
  }
  50% {
    transform: translateY(-2px) scale(1.006);
  }
}

@keyframes profileShowcaseAura {
  0%,
  100% {
    opacity: 0.46;
    transform: scale(1) translateX(0);
  }
  50% {
    opacity: 0.78;
    transform: scale(1.08) translateX(4px);
  }
}

@keyframes profileShowcaseBadgePulse {
  0%,
  100% {
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.22);
    transform: scale(1);
  }
  50% {
    box-shadow:
      0 8px 18px rgba(0, 0, 0, 0.3),
      0 0 0 1px rgba(255, 255, 255, 0.26) inset;
    transform: scale(1.05);
  }
}

@media (prefers-reduced-motion: reduce) {
  .profile-showcase-item,
  .profile-showcase-item::before,
  .profile-showcase-item::after {
    animation: none !important;
    transition: none !important;
  }
}

.profile-showcase-k {
  position: relative;
  z-index: 1;
  padding-right: 30px;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(198, 220, 248, 0.82);
}

.profile-showcase-v {
  position: relative;
  z-index: 1;
  margin-top: 4px;
  font-size: 1.03rem;
  font-weight: 850;
  color: rgba(255, 255, 255, 0.98);
  line-height: 1.15;
  text-shadow: 0 6px 14px rgba(0, 0, 0, 0.28);
}

.profile-card-hint {
  margin-top: 10px;
  font-size: 0.82rem;
  color: rgba(201, 225, 246, 0.82);
}

.profile-settings-primary-btn {
  padding: 10px 18px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.4);
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  font-weight: 600;
  cursor: pointer;
  transition:
    background 0.2s,
    transform 0.2s;
}

.profile-settings-primary-btn:hover {
  background: rgba(255, 255, 255, 0.2);
  transform: translateY(-1px);
}

.profile-settings-backdrop {
  position: fixed;
  inset: 0;
  background: var(--ui-backdrop);
  backdrop-filter: blur(10px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity 0.2s ease,
    visibility 0.2s ease;
  z-index: var(--z-profile-settings-backdrop);
  display: block;
}

.profile-settings-backdrop[hidden] {
  display: none !important;
}

.profile-settings-backdrop.active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.subwindow-backdrop {
  position: fixed;
  inset: 0;
  background: var(--ui-backdrop);
  backdrop-filter: blur(10px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity 0.2s ease,
    visibility 0.2s ease;
  z-index: var(--z-subwindow-backdrop);
}

.subwindow-backdrop[hidden] {
  display: none !important;
}

.subwindow-backdrop.active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.subwindow {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  background:
    radial-gradient(
      circle at 20% 0%,
      rgba(255, 255, 255, 0.1),
      transparent 40%
    ),
    linear-gradient(180deg, rgba(12, 16, 30, 0.99), rgba(7, 10, 20, 0.99));
  transform: translateY(10px);
  opacity: 0;
  pointer-events: none;
  transition:
    opacity 0.2s ease,
    transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: var(--z-subwindow);
}

.subwindow[hidden] {
  display: none !important;
}

.subwindow.active {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.subwindow-head {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: calc(12px + env(safe-area-inset-top)) 16px 12px;
  background: linear-gradient(
    180deg,
    rgba(12, 16, 30, 0.98),
    rgba(12, 16, 30, 0.75),
    rgba(12, 16, 30, 0)
  );
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.2);
}

.subwindow-title {
  font-size: 1.05rem;
  font-weight: 900;
  letter-spacing: 0.2px;
  color: #fff;
}

.subwindow-close {
  width: 40px;
  height: 40px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  cursor: pointer;
}

.subwindow-close:active {
  transform: scale(0.96);
}

.subwindow-body {
  flex: 1;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  padding: 16px 16px
    calc(24px + env(safe-area-inset-bottom) + var(--keyboard-inset, 0px));
}

.subwindow-nav {
  position: sticky;
  top: 0;
  z-index: 1;
  margin: -6px 0 12px;
  padding: 10px 10px;
  border-radius: 16px;
  background: var(--ui-surface);
  border: 1px solid var(--ui-border);
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  backdrop-filter: blur(10px);
}

.subwindow-chip {
  border: 1px solid var(--ui-border-2);
  background: var(--ui-surface-2);
  color: var(--ui-text);
  padding: 8px 10px;
  border-radius: 999px;
  font-weight: 800;
  font-size: 0.85rem;
  cursor: pointer;
}

.subwindow-chip.active {
  border-color: rgb(var(--profile-accent-rgb, 29 161 242) / 0.65);
  background: linear-gradient(
    135deg,
    rgb(var(--profile-accent-rgb, 29 161 242) / 0.28),
    rgba(255, 255, 255, 0.06)
  );
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.2);
}

.subwindow-chip.ghost {
  margin-left: auto;
  background: transparent;
}

.subwindow-chip:active {
  transform: scale(0.98);
}

#profile-subwindow-body {
  max-width: 760px;
  margin: 0 auto;
  width: 100%;
}

#profile-subwindow-body .profile-card {
  margin: 0;
  width: 100%;
}

.profile-subwindow-extras {
  margin-top: 14px;
}

.profile-extras {
  display: grid;
  gap: 12px;
}

.profile-extras-card {
  border-radius: 18px;
  padding: 14px;
  background: var(--ui-surface);
  border: 1px solid var(--ui-border);
  box-shadow: var(--ui-shadow-lg);
  color: var(--ui-text);
}

.profile-extras-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.profile-extras-head.compact {
  align-items: baseline;
}

.profile-extras-title {
  font-weight: 950;
  letter-spacing: 0.2px;
  color: #fff;
}

.profile-extras-sub {
  margin-top: 4px;
  font-size: 0.9rem;
  color: var(--ui-muted);
}

.profile-accent-dot {
  width: 14px;
  height: 14px;
  border-radius: 999px;
  border: 2px solid rgba(255, 255, 255, 0.35);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.28);
  flex-shrink: 0;
}

.profile-meter {
  margin-top: 10px;
  height: 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  overflow: hidden;
  border: 1px solid var(--ui-border);
}

.profile-meter-fill {
  height: 100%;
  background: linear-gradient(
    90deg,
    rgb(var(--profile-accent-rgb, 29 161 242) / 1),
    rgba(127, 90, 255, 0.85)
  );
  border-radius: inherit;
  transition: width 0.35s ease;
}

.profile-extras-actions {
  margin-top: 12px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.profile-extras-btn {
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid var(--ui-border-2);
  background: linear-gradient(
    135deg,
    rgb(var(--profile-accent-rgb, 29 161 242) / 0.28),
    rgba(255, 255, 255, 0.06)
  );
  color: #fff;
  font-weight: 850;
  cursor: pointer;
}

.profile-extras-btn.secondary {
  background: var(--ui-surface-2);
}

.profile-extras-btn:active {
  transform: scale(0.99);
}

.profile-tips {
  margin-top: 10px;
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.92rem;
  line-height: 1.35;
}

.profile-tip {
  margin-top: 6px;
}

.profile-goals {
  margin-top: 10px;
  display: grid;
  gap: 10px;
}

.profile-goal-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.profile-goal-name {
  font-weight: 850;
  color: rgba(255, 255, 255, 0.92);
}

.profile-goal-val {
  font-size: 0.9rem;
  color: var(--ui-muted);
}

.profile-goal-bar {
  margin-top: 8px;
  height: 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid var(--ui-border);
  overflow: hidden;
}

.profile-goal-fill {
  height: 100%;
  background: linear-gradient(
    90deg,
    rgb(var(--profile-accent-rgb, 29 161 242) / 1),
    rgba(127, 90, 255, 0.85)
  );
  border-radius: inherit;
  transition: width 0.35s ease;
}

.profile-milestones-meta {
  margin-top: 10px;
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.84);
}

.profile-milestones-next {
  margin-top: 8px;
  font-size: 0.84rem;
  color: var(--ui-muted);
}

.profile-milestones-rail {
  margin-top: 10px;
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 4px;
  scrollbar-width: thin;
}

.profile-milestones-rail::-webkit-scrollbar {
  height: 6px;
}

.profile-milestones-rail::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.25);
  border-radius: 999px;
}

.profile-milestone-chip {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 5px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.92);
  font-size: 0.78rem;
  font-weight: 850;
  letter-spacing: 0.02em;
  white-space: nowrap;
  flex: 0 0 auto;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  font-family: inherit;
  line-height: 1.1;
}

.profile-milestone-chip[aria-pressed="true"] {
  transform: translateY(-1px);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.26);
}

.profile-milestone-chip[data-ms-state="done"] {
  border-color: rgba(103, 221, 176, 0.45);
  background: rgba(103, 221, 176, 0.16);
  color: rgba(210, 255, 236, 0.98);
}

.profile-milestone-chip[data-ms-state="current"] {
  border-color: rgba(126, 227, 255, 0.55);
  background: rgba(126, 227, 255, 0.2);
  color: rgba(231, 250, 255, 0.99);
  box-shadow: 0 0 0 1px rgba(126, 227, 255, 0.16) inset;
}

.profile-milestone-chip[data-ms-state="next"] {
  border-style: dashed;
  color: rgba(204, 226, 247, 0.88);
}

.profile-milestone-chip[data-ms-tone="premium"] {
  border-color: rgba(255, 226, 140, 0.58);
  background: rgba(255, 210, 110, 0.18);
  color: rgba(255, 244, 212, 0.99);
}

.profile-milestone-chip[data-ms-state="current"][data-ms-tone="premium"] {
  box-shadow:
    0 0 0 1px rgba(255, 227, 152, 0.24) inset,
    0 6px 16px rgba(255, 177, 66, 0.28);
}

.profile-milestone-detail {
  margin-top: 10px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.06);
  padding: 10px 12px;
}

.profile-milestone-detail-title {
  font-size: 0.9rem;
  font-weight: 900;
  color: rgba(255, 255, 255, 0.96);
}

.profile-milestone-detail-line {
  margin-top: 6px;
  font-size: 0.84rem;
  color: rgba(222, 238, 255, 0.88);
  line-height: 1.35;
}

.profile-stats-grid {
  margin-top: 10px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.profile-stat {
  border-radius: 14px;
  padding: 10px 12px;
  background: var(--ui-surface);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.profile-stat-k {
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
}

.profile-stat-v {
  margin-top: 6px;
  font-size: 18px;
  font-weight: 950;
  color: #fff;
}

.profile-mini-row {
  margin-top: 10px;
  font-size: 0.92rem;
  color: rgba(255, 255, 255, 0.8);
  padding-top: 10px;
  border-top: 1px solid var(--ui-border);
}

.profile-mini-strong {
  color: rgba(255, 255, 255, 0.96);
  font-weight: 850;
}

.profile-badges {
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.profile-badge-mini {
  width: 40px;
  height: 40px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--ui-surface-2);
  border: 1px solid var(--ui-border);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.25);
  font-size: 20px;
}

.profile-empty {
  margin-top: 10px;
  color: var(--ui-muted);
}

@media (max-width: 520px) {
  .league-captain-head {
    gap: 8px;
  }
  .league-captain-title {
    font-size: 0.92rem;
  }
  .league-captain-live {
    min-height: 26px;
    padding: 0 11px;
    font-size: 0.7rem;
  }
  .league-captain-main {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
    gap: 10px;
  }
  .league-captain-avatar,
  .league-captain-avatar-fallback {
    width: 92px;
    height: 92px;
    border-radius: 24px;
  }
  .league-captain-copy {
    width: 100%;
  }
  .league-captain-kicker,
  .league-captain-role,
  .league-captain-note,
  .league-captain-meta {
    text-align: center;
  }
  .league-captain-stats {
    justify-items: center;
  }
  .league-captain-score-card {
    width: 100%;
    max-width: 240px;
  }
  .league-captain-mini {
    justify-content: center;
  }
  .profile-extras-actions {
    grid-template-columns: 1fr;
  }
  .profile-stats-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .profile-card-main {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 14px;
  }
  .profile-card-avatar .profile-photo-frame {
    width: 120px;
    height: 120px;
  }
  .profile-card {
    padding: 18px 14px 16px;
    border-radius: 24px;
  }
  .profile-card-info {
    width: 100%;
  }
  .profile-card-name {
    font-size: clamp(1.65rem, 8.4vw, 2rem);
    line-height: 1.06;
    margin-bottom: 4px;
    letter-spacing: -0.02em;
    overflow-wrap: anywhere;
  }
  .profile-card-role {
    font-size: 0.78rem;
    letter-spacing: 0.14em;
    margin-bottom: 8px;
  }
  .profile-card-meta {
    margin-bottom: 7px;
    font-size: 0.82rem;
    line-height: 1.34;
  }
  .profile-hero-headline {
    width: 100%;
    align-items: center;
  }
  .profile-share-card-btn {
    width: 32px;
    height: 32px;
    border-radius: 10px;
    font-size: 15px;
  }
  .profile-hero-day-kpi {
    width: 100%;
    justify-content: center;
    text-align: center;
    font-size: 0.74rem;
  }
  .profile-weekly-goals,
  .profile-weekly-chart {
    padding: 9px 8px 8px;
  }
  .profile-weekly-goal-name,
  .profile-weekly-goal-value {
    font-size: 10px;
  }
  .profile-weekly-chart-legend {
    justify-content: center;
    gap: 10px;
  }
  .profile-weekly-chart-days {
    font-size: 9px;
    letter-spacing: 0.08em;
    gap: 2px;
  }
  .profile-showcase-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
  }
  .profile-showcase-item {
    min-height: 64px;
    padding: 9px 10px 8px;
  }
  .profile-showcase-item::after {
    top: 7px;
    right: 7px;
    width: 20px;
    height: 20px;
    font-size: 11px;
  }
  .profile-showcase-k {
    padding-right: 26px;
  }
  .profile-showcase-v {
    font-size: 0.98rem;
  }
  .profile-hero-timeline {
    justify-content: flex-start;
  }
  .profile-hero-ach-chip {
    min-width: min(250px, 82vw);
  }
  .profile-hero-ach-chip.is-featured {
    min-width: min(280px, 90vw);
  }
  .profile-hero-ach-chip.is-compact {
    min-width: min(206px, 74vw);
  }
  .profile-showcase-v,
  .profile-card-hint {
    overflow-wrap: anywhere;
  }
}


#progress-subwindow-body {
  max-width: 900px;
  margin: 0 auto;
  width: 100%;
  --game-text: rgba(255, 255, 255, 0.92);
  --game-muted: rgba(219, 232, 255, 0.74);
  --game-panel-bg: rgba(255, 255, 255, 0.06);
  --game-choice-bg: rgba(255, 255, 255, 0.06);
  --game-choice-border: rgba(255, 255, 255, 0.12);
  --game-choice-shadow: 0 18px 44px rgba(0, 0, 0, 0.28);
}

#progress-subwindow-body .profile-main-right {
  width: 100%;
  max-width: 760px;
  margin: 0 auto;
}

#progress-subwindow-body .rating-subtitle {
  margin-top: 0;
  color: rgba(255, 255, 255, 0.92);
}

#progress-subwindow-body .leaderboard-row:hover {
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.3);
}

#progress-subwindow-body #cert-section hr {
  border-top-color: rgba(255, 255, 255, 0.12);
}

#progress-subwindow-body #cert-section .modal-h2,
#progress-subwindow-body #cert-title {
  color: rgba(255, 255, 255, 0.96);
}

#progress-subwindow-body .cert-wrapper {
  margin-top: 12px;
}

#progress-subwindow-body .generate-cert-btn {
  border-radius: 14px;
  box-shadow: 0 14px 34px rgba(212, 175, 55, 0.22);
}

#progress-subwindow-body .generate-cert-btn:active {
  transform: translateY(1px);
}

@media (min-width: 768px) {
  .subwindow {
    inset: 22px;
    border-radius: 22px;
    box-shadow: 0 40px 90px rgba(0, 0, 0, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.12);
  }
}

.profile-settings-panel {
  position: fixed;
  left: 50%;
  bottom: 0;
  width: min(720px, calc(100vw - 24px));
  margin: 0;
  border-radius: 22px 22px 0 0;
  padding: 12px 12px
    calc(12px + env(safe-area-inset-bottom) + var(--keyboard-inset, 0px));
  background: linear-gradient(
    180deg,
    rgba(16, 20, 36, 0.98),
    rgba(9, 12, 24, 0.98)
  );
  border: 1px solid var(--ui-border);
  box-shadow: 0 -20px 60px rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(14px);
  flex-direction: column;
  gap: 12px;
  opacity: 0;
  transform: translateX(-50%) translateY(110%);
  transition:
    opacity 0.25s ease,
    transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  max-height: min(92vh, 860px);
  max-height: min(92dvh, 860px);
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  display: flex;
  pointer-events: none;
  z-index: var(--z-profile-settings);
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.28) transparent;
}

.profile-settings-panel.open {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
}

.profile-settings-panel::-webkit-scrollbar {
  width: 8px;
}

.profile-settings-panel::-webkit-scrollbar-track {
  background: transparent;
}

.profile-settings-panel::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.28);
  border-radius: 999px;
}

.profile-settings-nav {
  position: sticky;
  top: 58px;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
  padding: 6px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
}

.profile-settings-nav-btn {
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.04);
  color: rgba(255, 255, 255, 0.86);
  min-height: 34px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition:
    background 0.2s ease,
    border-color 0.2s ease,
    transform 0.15s ease,
    color 0.2s ease;
}

.profile-settings-nav-btn.active {
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.16),
    rgba(29, 161, 242, 0.2)
  );
  border-color: rgba(255, 255, 255, 0.24);
  color: #fff;
}

.profile-settings-nav-btn:active {
  transform: scale(0.99);
}

.profile-section-block {
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.04);
  padding: 12px;
}

.profile-section-head {
  margin-bottom: 10px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.profile-section-head--toggle {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.profile-section-toggle-btn {
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.92);
  border-radius: 999px;
  padding: 7px 12px;
  min-height: 34px;
  font-size: 0.78rem;
  font-weight: 800;
  cursor: pointer;
  transition:
    transform 0.2s ease,
    background 0.2s ease,
    border-color 0.2s ease;
}

.profile-section-toggle-btn:active {
  transform: scale(0.98);
}

.profile-section-block.is-open .profile-section-toggle-btn {
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.16),
    rgba(29, 161, 242, 0.22)
  );
  border-color: rgba(255, 255, 255, 0.3);
}

.profile-section-collapsible {
  display: grid;
  grid-template-rows: 0fr;
  transition:
    grid-template-rows 0.25s ease,
    margin-top 0.25s ease;
  margin-top: 0;
}

.profile-section-collapsible-inner {
  min-height: 0;
  overflow: hidden;
}

.profile-section-block.is-open .profile-section-collapsible {
  grid-template-rows: 1fr;
  margin-top: 10px;
}

.profile-section-title {
  color: rgba(255, 255, 255, 0.95);
  font-size: 14px;
  font-weight: 900;
  letter-spacing: 0.01em;
}

.profile-section-sub {
  color: rgba(255, 255, 255, 0.62);
  font-size: 12px;
}

.profile-settings-sheet-head {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 4px 8px;
  margin: -12px -12px 6px;
  background: linear-gradient(
    180deg,
    rgba(16, 20, 36, 0.98),
    rgba(16, 20, 36, 0.65),
    rgba(16, 20, 36, 0)
  );
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.profile-settings-sheet-title {
  font-weight: 900;
  color: #fff;
  letter-spacing: 0.2px;
  font-size: 1.05rem;
}

.profile-settings-x {
  width: 40px;
  height: 40px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  cursor: pointer;
}

.profile-settings-x:active {
  transform: scale(0.96);
}

.profile-save-status {
  min-height: 18px;
  margin-top: 6px;
  font-size: 0.85rem;
  color: rgba(166, 255, 200, 0.95);
}

.profile-save-status.error {
  color: rgba(255, 160, 170, 0.95);
}

.profile-close-settings-btn {
  width: 100%;
  padding: 14px 16px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: #fff;
  font-weight: 800;
  cursor: pointer;
  transition:
    transform 0.2s,
    background 0.2s;
}

.profile-close-settings-btn:active {
  transform: scale(0.99);
}

.profile-settings-sticky-actions {
  position: sticky;
  bottom: 8px;
  z-index: 3;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  padding: 10px;
  border-radius: 14px;
  background: linear-gradient(
    180deg,
    rgba(16, 20, 36, 0),
    rgba(16, 20, 36, 0.92) 24%,
    rgba(16, 20, 36, 0.98)
  );
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  transition:
    opacity 0.2s ease,
    transform 0.2s ease;
}

.profile-settings-sticky-actions.is-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.profile-account {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.profile-account-row {
  display: grid;
  grid-template-columns: 56px 1fr auto;
  gap: 10px;
  align-items: center;
}

.profile-account-k {
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
}

.profile-account-v {
  font-family:
    ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
    "Courier New", monospace;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.92);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.profile-account-btn {
  padding: 8px 10px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.92);
  font-weight: 700;
  cursor: pointer;
}

.profile-account-btn:active {
  transform: scale(0.99);
}

.profile-account-btn--danger {
  border-color: rgba(255, 120, 120, 0.3);
  background: rgba(255, 82, 82, 0.1);
}

.profile-account--security {
  margin-top: 10px;
}

.profile-security-title {
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.78);
  font-weight: 800;
  margin-bottom: 2px;
}

.staff-auth-content {
  max-width: 540px;
  background:
    radial-gradient(circle at 14% 0%, rgba(0, 210, 255, 0.18), transparent 40%),
    radial-gradient(circle at 100% 14%, rgba(123, 63, 255, 0.2), transparent 42%),
    linear-gradient(180deg, rgba(10, 14, 28, 0.985), rgba(7, 10, 20, 0.985));
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.92);
  box-shadow:
    0 34px 90px rgba(0, 0, 0, 0.56),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
  overflow: hidden;
}
.staff-auth-content .modal-h2 {
  color: rgba(255, 255, 255, 0.96);
}
.staff-auth-content .modal-text {
  color: rgba(255, 255, 255, 0.78);
}
.staff-auth-content .close-modal {
  color: rgba(255, 255, 255, 0.92);
}
.staff-auth-body {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.staff-auth-hero {
  display: grid;
  gap: 10px;
}
.staff-auth-kicker {
  width: fit-content;
  padding: 7px 12px;
  border-radius: 999px;
  border: 1px solid rgba(154, 232, 255, 0.22);
  background: linear-gradient(
    135deg,
    rgba(0, 210, 255, 0.14),
    rgba(123, 63, 255, 0.16)
  );
  color: rgba(226, 246, 255, 0.96);
  font-size: 0.7rem;
  font-weight: 900;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.staff-auth-hero .modal-h2 {
  font-size: clamp(1.9rem, 4vw, 2.35rem);
  letter-spacing: -0.04em;
  margin: 0;
}
.staff-auth-hero .modal-text {
  margin: 0;
  max-width: 32ch;
  line-height: 1.5;
}
.staff-auth-hero-note {
  font-size: 0.86rem;
  color: rgba(214, 228, 255, 0.68);
  line-height: 1.45;
  padding-left: 14px;
  border-left: 2px solid rgba(0, 210, 255, 0.28);
}
.staff-auth-tabs {
  display: flex;
  gap: 10px;
  padding: 6px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.staff-auth-tab {
  flex: 1;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.04);
  color: rgba(255, 255, 255, 0.9);
  border-radius: 12px;
  padding: 10px 12px;
  font-weight: 900;
  cursor: pointer;
  transition:
    transform 0.18s ease,
    background 0.25s ease,
    border-color 0.25s ease;
}
.staff-auth-tab.is-active {
  background: linear-gradient(
    135deg,
    rgba(45, 93, 255, 0.55),
    rgba(123, 63, 255, 0.55)
  );
  border-color: rgba(255, 255, 255, 0.18);
}
.staff-auth-tab:active {
  transform: scale(0.99);
}
.staff-auth-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.staff-auth-label {
  display: flex;
  flex-direction: column;
  gap: 8px;
  color: rgba(255, 255, 255, 0.82);
  font-weight: 800;
  font-size: 0.76rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.staff-auth-label[hidden],
#staff-auth-display-name-wrap[hidden],
#staff-auth-recovery-wrap[hidden],
#staff-auth-back-login[hidden] {
  display: none !important;
}
.staff-auth-pass-wrap {
  position: relative;
}
.staff-auth-input {
  border-radius: 16px;
  padding: 15px 16px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.05);
  color: rgba(255, 255, 255, 0.92);
  outline: none;
  font-size: 1rem;
  transition:
    border-color 0.22s ease,
    background 0.22s ease,
    box-shadow 0.22s ease,
    transform 0.22s ease;
}
.staff-auth-input--with-toggle {
  padding-right: 112px;
}
.staff-auth-pass-toggle {
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  min-width: 88px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.86);
  border-radius: 12px;
  padding: 9px 12px;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition:
    background 0.2s ease,
    border-color 0.2s ease,
    transform 0.18s ease;
}
.staff-auth-pass-toggle:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.22);
}
.staff-auth-pass-toggle:active {
  transform: translateY(-50%) scale(0.98);
}
.staff-auth-pass-toggle[aria-pressed="true"] {
  background: linear-gradient(
    135deg,
    rgba(0, 210, 255, 0.18),
    rgba(123, 63, 255, 0.2)
  );
  border-color: rgba(120, 206, 255, 0.28);
  color: rgba(241, 249, 255, 0.96);
}
.staff-auth-input:focus {
  border-color: rgba(94, 226, 255, 0.4);
  background: rgba(255, 255, 255, 0.07);
  box-shadow:
    0 0 0 4px rgba(0, 210, 255, 0.13),
    0 16px 32px rgba(0, 0, 0, 0.18);
  transform: translateY(-1px);
}
.staff-auth-error {
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255, 120, 120, 0.26);
  background: rgba(255, 82, 82, 0.1);
  color: rgba(255, 255, 255, 0.92);
  font-weight: 800;
  font-size: 12px;
}
.staff-auth-submit {
  border: none;
  border-radius: 18px;
  padding: 16px 16px;
  font-weight: 900;
  color: #fff;
  cursor: pointer;
  background: linear-gradient(
    135deg,
    rgba(36, 106, 255, 0.98),
    rgba(119, 63, 255, 0.98)
  );
  box-shadow:
    0 22px 44px rgba(20, 38, 102, 0.34),
    0 8px 18px rgba(111, 73, 255, 0.24);
  font-size: 1rem;
  letter-spacing: 0.01em;
}
.staff-auth-submit:hover {
  transform: translateY(-1px);
}
.staff-auth-submit:active {
  transform: scale(0.99);
}
.staff-auth-submit-note {
  margin-top: -2px;
  font-size: 0.84rem;
  line-height: 1.45;
  color: rgba(214, 228, 255, 0.64);
}
.staff-auth-secondary {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 4px;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.staff-auth-secondary-title {
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.48);
}
.staff-auth-secondary-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.staff-auth-ghost {
  border-radius: 16px;
  padding: 13px 14px;
  font-weight: 900;
  cursor: pointer;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.045);
  color: rgba(255, 255, 255, 0.92);
  transition:
    transform 0.18s ease,
    background 0.2s ease,
    border-color 0.2s ease;
}
.staff-auth-ghost:hover {
  background: rgba(255, 255, 255, 0.075);
  border-color: rgba(255, 255, 255, 0.22);
}
.staff-auth-ghost:active {
  transform: scale(0.99);
}
.staff-auth-secondary-actions .staff-auth-ghost {
  background: rgba(255, 255, 255, 0.04);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
.staff-auth-skip-link {
  margin-top: 2px;
  align-self: center;
  border: 0;
  background: transparent;
  color: rgba(214, 228, 255, 0.62);
  font-weight: 700;
  font-size: 0.9rem;
  padding: 6px 8px 0;
  cursor: pointer;
}
.staff-auth-skip-link:hover {
  color: rgba(255, 255, 255, 0.86);
}

@media (min-width: 768px) {
  .profile-settings-panel {
    bottom: 16px;
    border-radius: 22px;
    max-height: min(90vh, 860px);
  }
}

@media (max-width: 520px) {
  .profile-settings-panel {
    left: 0;
    width: 100%;
    border-radius: 20px 20px 0 0;
    padding: 10px 12px
      calc(12px + env(safe-area-inset-bottom) + var(--keyboard-inset, 0px));
    max-height: min(96vh, 960px);
    max-height: min(96dvh, 960px);
    transform: translateY(110%);
  }

  .profile-settings-panel.open {
    transform: translateY(0);
  }

  .profile-settings-sheet-head {
    padding: 10px 4px 8px;
    margin: -10px -12px 6px;
  }

  .profile-settings-nav {
    top: 52px;
    display: flex;
    grid-template-columns: none;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 6px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .profile-settings-nav::-webkit-scrollbar {
    display: none;
  }
  .profile-settings-nav-btn {
    flex: 0 0 auto;
    min-width: max-content;
    padding: 0 12px;
    white-space: nowrap;
  }
  .profile-section-block {
    padding: 10px;
    border-radius: 16px;
  }
  .profile-settings-sticky-actions {
    gap: 8px;
    padding: 8px;
    bottom: 6px;
  }
}

.profile-card {
  --profile-accent: #1da1f2;
  position: relative;
  padding: 24px;
  border-radius: 30px;
  background: linear-gradient(
    135deg,
    rgba(12, 17, 31, 0.95),
    rgba(24, 27, 43, 0.9)
  );
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.55);
  margin-bottom: 24px;
  overflow: hidden;
  color: #f6f6f9;
}

.profile-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(
      circle at 25% -10%,
      rgba(255, 255, 255, 0.25),
      transparent 45%
    ),
    radial-gradient(
      circle at 80% 0%,
      rgba(255, 255, 255, 0.15),
      transparent 35%
    );
  pointer-events: none;
}

.profile-card::after {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: 28px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  pointer-events: none;
}

.profile-card[data-profile-league-tier="bronze"] {
  background: linear-gradient(
    140deg,
    rgba(28, 22, 18, 0.94),
    rgba(43, 29, 24, 0.9)
  );
  border-color: rgba(216, 154, 112, 0.36);
}

.profile-card[data-profile-league-tier="silver"] {
  background: linear-gradient(
    140deg,
    rgba(20, 27, 39, 0.95),
    rgba(35, 43, 58, 0.9)
  );
  border-color: rgba(184, 208, 232, 0.36);
}

.profile-card[data-profile-league-tier="gold"] {
  background: linear-gradient(
    140deg,
    rgba(34, 23, 10, 0.94),
    rgba(51, 33, 14, 0.9)
  );
  border-color: rgba(255, 209, 116, 0.42);
}

.profile-card[data-profile-league-tier="platinum"] {
  background: linear-gradient(
    140deg,
    rgba(12, 25, 42, 0.95),
    rgba(19, 39, 62, 0.92)
  );
  border-color: rgba(121, 243, 255, 0.46);
}

.profile-card[data-profile-league-tier]
  .profile-card-avatar
  .profile-photo-frame {
  box-shadow:
    0 18px 40px rgba(0, 0, 0, 0.42),
    0 0 0 1px rgba(255, 255, 255, 0.12) inset,
    0 0 0 6px rgba(120, 225, 255, 0.1);
}

.profile-card[data-profile-league-tier="bronze"]
  .profile-card-avatar
  .profile-photo-frame {
  box-shadow:
    0 18px 40px rgba(0, 0, 0, 0.42),
    0 0 0 1px rgba(255, 255, 255, 0.12) inset,
    0 0 24px rgba(235, 164, 113, 0.42);
}

.profile-card[data-profile-league-tier="silver"]
  .profile-card-avatar
  .profile-photo-frame {
  box-shadow:
    0 18px 40px rgba(0, 0, 0, 0.42),
    0 0 0 1px rgba(255, 255, 255, 0.12) inset,
    0 0 26px rgba(187, 215, 245, 0.44);
}

.profile-card[data-profile-league-tier="gold"]
  .profile-card-avatar
  .profile-photo-frame {
  box-shadow:
    0 18px 40px rgba(0, 0, 0, 0.42),
    0 0 0 1px rgba(255, 255, 255, 0.12) inset,
    0 0 28px rgba(255, 207, 109, 0.5);
}

.profile-card[data-profile-league-tier="platinum"]
  .profile-card-avatar
  .profile-photo-frame {
  box-shadow:
    0 18px 40px rgba(0, 0, 0, 0.42),
    0 0 0 1px rgba(255, 255, 255, 0.12) inset,
    0 0 30px rgba(111, 237, 255, 0.54);
}

.profile-onboarding {
  display: flex;
  align-items: center;
  gap: 14px;
  background: rgba(23, 24, 39, 0.7);
  border-radius: 16px;
  padding: 16px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  margin-top: 18px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4);
}

.profile-onboarding-icon {
  font-size: 1.6rem;
}

.profile-onboarding-text {
  flex: 1;
}

.profile-onboarding-text strong {
  display: block;
  font-weight: 700;
  margin-bottom: 4px;
  color: #fff;
}

.profile-onboarding-text p {
  margin: 0;
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.9rem;
}

.profile-onboarding-dismiss-btn {
  border-radius: 999px;
  padding: 6px 14px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  font-weight: 600;
}

.profile-settings {
  display: flex;
  align-items: center;
  gap: 12px;
  justify-content: space-between;
  flex-wrap: wrap;
  width: 100%;
  margin-top: 12px;
}

.profile-color-row {
  flex: 1 1 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.profile-color-label {
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
}

.profile-color-palette {
  margin-left: auto;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.profile-color-dot {
  width: 18px;
  height: 18px;
  border-radius: 999px;
  border: 2px solid rgba(255, 255, 255, 0.25);
  padding: 0;
  appearance: none;
  -webkit-appearance: none;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.28);
  cursor: pointer;
  transition:
    transform 0.15s ease,
    border-color 0.15s ease,
    box-shadow 0.15s ease;
}

.profile-color-dot:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.65);
  outline-offset: 2px;
}

.profile-color-dot.active {
  border-color: rgba(255, 255, 255, 0.95);
  transform: scale(1.08);
  box-shadow:
    0 0 0 3px rgba(255, 255, 255, 0.12),
    0 10px 22px rgba(0, 0, 0, 0.34);
}

.profile-settings-btn {
  padding: 10px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: #fff;
  font-weight: 600;
  cursor: pointer;
  transition:
    background 0.2s,
    transform 0.2s;
}

.profile-settings-btn:hover {
  background: rgba(255, 255, 255, 0.2);
  transform: translateY(-1px);
}

.profile-color-swatch {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.6);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.35);
  background: var(--profile-accent, #1da1f2);
  animation: pulse-accent 3.6s ease-in-out infinite;
}

@keyframes pulse-accent {
  0%,
  100% {
    box-shadow:
      0 0 0 0 rgba(255, 255, 255, 0.6),
      0 8px 18px rgba(0, 0, 0, 0.35);
  }
  50% {
    box-shadow:
      0 0 10px 6px rgba(255, 255, 255, 0.25),
      0 12px 24px rgba(0, 0, 0, 0.45);
  }
}

.profile-details {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
  min-width: 200px;
}

.profile-label {
  font-size: 0.85rem;
  letter-spacing: 0.3px;
  color: rgba(255, 255, 255, 0.8);
  display: block;
}

.profile-field-hint {
  display: block;
  margin-top: 6px;
  font-size: 0.76rem;
  color: rgba(255, 255, 255, 0.62);
}

.profile-mini-preview {
  margin-top: 6px;
  border-radius: 14px;
  padding: 10px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: linear-gradient(
    140deg,
    rgba(255, 255, 255, 0.09),
    rgba(255, 255, 255, 0.04)
  );
}

.profile-mini-preview-title {
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.66);
  margin-bottom: 8px;
}

.profile-mini-preview-card {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 10px;
}

.profile-mini-preview-avatar-wrap {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(10, 12, 22, 0.8);
  position: relative;
  flex-shrink: 0;
}

.profile-mini-preview-avatar {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.profile-mini-preview-avatar-fallback {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  color: #fff;
  font-size: 1rem;
  background: linear-gradient(
    135deg,
    rgba(45, 93, 255, 0.5),
    rgba(29, 161, 242, 0.42)
  );
}

.profile-mini-preview-main {
  min-width: 0;
}

.profile-mini-preview-name {
  font-size: 0.95rem;
  font-weight: 850;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.profile-mini-preview-role {
  margin-top: 2px;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.72);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.profile-mini-preview-bio {
  margin-top: 4px;
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.82);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.profile-label-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.profile-counter {
  font-size: 0.76rem;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.62);
  font-variant-numeric: tabular-nums;
  user-select: none;
}

.profile-actions-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.profile-input {
  width: 100%;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  background: rgba(255, 255, 255, 0.05);
  color: #fff;
  font-size: 1rem;
  outline: none;
  transition:
    border-color 0.2s,
    box-shadow 0.2s;
}

.profile-input:focus {
  border-color: var(--primary-blue, #5ddcff);
  box-shadow: 0 0 0 2px rgba(93, 220, 255, 0.25);
}

.profile-password-row {
  position: relative;
}

.profile-password-row .profile-input {
  padding-right: 96px;
}

.profile-password-toggle {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  min-height: 30px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.92);
  font-size: 0.74rem;
  font-weight: 700;
  cursor: pointer;
}

.profile-password-toggle:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.profile-password-strength {
  margin-top: 8px;
  padding: 8px 9px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.04);
}

.profile-password-strength-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.profile-password-strength-label {
  font-size: 0.76rem;
  color: rgba(255, 255, 255, 0.82);
}

.profile-password-strength-score {
  font-size: 0.74rem;
  color: rgba(255, 255, 255, 0.62);
  font-variant-numeric: tabular-nums;
}

.profile-password-strength-track {
  margin-top: 7px;
  height: 7px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  overflow: hidden;
}

.profile-password-strength-fill {
  width: 0%;
  height: 100%;
  display: block;
  border-radius: inherit;
  transition:
    width 0.22s ease,
    background 0.22s ease;
  background: rgba(255, 255, 255, 0.32);
}

.profile-password-strength-fill[data-tone="weak"] {
  background: linear-gradient(
    90deg,
    rgba(255, 97, 126, 0.95),
    rgba(255, 133, 98, 0.95)
  );
}

.profile-password-strength-fill[data-tone="medium"] {
  background: linear-gradient(
    90deg,
    rgba(255, 174, 94, 0.95),
    rgba(255, 209, 86, 0.95)
  );
}

.profile-password-strength-fill[data-tone="good"] {
  background: linear-gradient(
    90deg,
    rgba(64, 214, 178, 0.95),
    rgba(93, 220, 255, 0.95)
  );
}

.profile-password-strength-fill[data-tone="strong"] {
  background: linear-gradient(
    90deg,
    rgba(80, 227, 194, 0.98),
    rgba(86, 160, 255, 0.98)
  );
}

.profile-password-checklist {
  margin-top: 8px;
  display: grid;
  gap: 4px;
}

.profile-password-check {
  font-size: 0.73rem;
  color: rgba(255, 255, 255, 0.58);
  position: relative;
  padding-left: 16px;
}

.profile-password-check::before {
  content: "•";
  position: absolute;
  left: 2px;
  top: 0;
  color: rgba(255, 255, 255, 0.44);
}

.profile-password-check.ok {
  color: rgba(153, 255, 197, 0.95);
}

.profile-password-check.ok::before {
  content: "✓";
  color: rgba(153, 255, 197, 0.98);
}

.profile-password-check.bad {
  color: rgba(255, 172, 180, 0.95);
}

.profile-password-check.bad::before {
  content: "✕";
  color: rgba(255, 160, 170, 0.98);
}

.profile-save-btn {
  align-self: flex-start;
  background: linear-gradient(90deg, #ff9a9e, #fecfef, #ff7eb3);
  color: #1a1a1a;
  border: none;
  border-radius: 12px;
  padding: 10px 18px;
  font-weight: 700;
  cursor: pointer;
  transition:
    transform 0.2s,
    box-shadow 0.2s;
}

.profile-save-btn.secondary {
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.18);
}

.profile-save-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none !important;
  box-shadow: none !important;
}

.profile-save-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(255, 255, 255, 0.25);
}

.is-success-pop {
  animation: profile-success-pop 620ms cubic-bezier(0.2, 0.9, 0.2, 1);
}

@keyframes profile-success-pop {
  0% {
    transform: scale(1);
  }
  40% {
    transform: scale(1.03);
  }
  70% {
    transform: scale(0.995);
  }
  100% {
    transform: scale(1);
  }
}

.progress-enhancement {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  margin-bottom: 25px;
  align-items: stretch;
}

.progress-dashboard {
  background: linear-gradient(
    145deg,
    rgba(7, 8, 24, 0.92),
    rgba(14, 20, 38, 0.88)
  );
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 18px;
  padding: 16px;
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.22);
  margin-bottom: 16px;
  overflow: hidden;
}
.progress-dashboard-top {
  display: flex;
  align-items: center;
  gap: 14px;
}
.progress-ring {
  width: 92px;
  height: 92px;
  border-radius: 50%;
  background: conic-gradient(
    var(--accent, #1da1f2) var(--p, 0%),
    rgba(255, 255, 255, 0.1) 0
  );
  position: relative;
  flex-shrink: 0;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35);
}
.progress-ring::after {
  content: "";
  position: absolute;
  inset: 10px;
  border-radius: 50%;
  background: rgba(10, 12, 20, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.progress-ring-center {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 1;
  text-align: center;
  gap: 2px;
}
.progress-ring-level {
  font-size: 26px;
  font-weight: 900;
  color: #fff;
  line-height: 1;
}
.progress-ring-label {
  font-size: 11px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.72);
}
.progress-dashboard-text {
  min-width: 0;
  color: rgba(255, 255, 255, 0.92);
}
.progress-dashboard-title {
  font-weight: 850;
  letter-spacing: 0.2px;
  font-size: 1rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.progress-dashboard-sub {
  margin-top: 4px;
  font-size: 0.9rem;
  color: rgba(219, 232, 255, 0.9);
}
.progress-dashboard-mini {
  margin-top: 6px;
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.72);
}
.progress-metrics {
  margin-top: 12px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.progress-metric {
  border-radius: 14px;
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.metric-label {
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
}
.metric-value {
  margin-top: 6px;
  font-size: 18px;
  font-weight: 900;
  color: #fff;
}
.progress-last {
  margin-top: 10px;
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.82);
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
@media (max-width: 520px) {
  .progress-dashboard-top {
    align-items: flex-start;
  }
  .progress-dashboard-title {
    font-size: 0.98rem;
  }
  .progress-ring {
    width: 86px;
    height: 86px;
  }
  .progress-ring::after {
    inset: 9px;
  }
}

body[data-luna-level-tier="tier-50"] .profile-card,
body[data-luna-level-tier="tier-50"] .profile-extras-card {
  border-color: rgba(85, 205, 255, 0.34);
  box-shadow: 0 18px 44px rgba(48, 156, 255, 0.2);
}
body[data-luna-level-tier="tier-50"] .profile-photo-frame {
  background: conic-gradient(
    from 180deg,
    rgba(124, 240, 255, 0.34),
    rgba(62, 173, 255, 0.95),
    rgba(124, 240, 255, 0.24),
    rgba(62, 173, 255, 0.95)
  );
}
body[data-luna-level-tier="tier-50"] .progress-ring {
  --accent: #5fd7ff;
  box-shadow: 0 14px 32px rgba(39, 171, 255, 0.32);
}

body[data-luna-level-tier="tier-100"] .profile-card,
body[data-luna-level-tier="tier-100"] .profile-extras-card {
  border-color: rgba(121, 227, 255, 0.45);
  box-shadow: 0 22px 52px rgba(77, 191, 255, 0.26);
}
body[data-luna-level-tier="tier-100"] .profile-photo-frame {
  background: conic-gradient(
    from 180deg,
    rgba(144, 255, 245, 0.38),
    rgba(71, 209, 255, 1),
    rgba(120, 176, 255, 0.28),
    rgba(71, 209, 255, 1)
  );
  box-shadow:
    0 18px 40px rgba(49, 165, 255, 0.4),
    0 0 0 1px rgba(160, 246, 255, 0.22) inset;
}
body[data-luna-level-tier="tier-100"] .progress-ring {
  --accent: #5ce4ff;
  box-shadow: 0 16px 36px rgba(59, 185, 255, 0.38);
}

body[data-luna-level-tier="tier-150"] .profile-card,
body[data-luna-level-tier="tier-150"] .profile-extras-card {
  border-color: rgba(255, 224, 120, 0.5);
  box-shadow: 0 24px 58px rgba(255, 190, 87, 0.26);
}
body[data-luna-level-tier="tier-150"] .profile-photo-frame {
  background: conic-gradient(
    from 180deg,
    rgba(255, 246, 191, 0.5),
    rgba(255, 205, 105, 1),
    rgba(255, 228, 159, 0.35),
    rgba(255, 205, 105, 1)
  );
  box-shadow:
    0 18px 42px rgba(255, 178, 72, 0.45),
    0 0 0 1px rgba(255, 244, 176, 0.3) inset;
}
body[data-luna-level-tier="tier-150"] .progress-ring {
  --accent: #ffd56d;
  box-shadow: 0 16px 38px rgba(255, 187, 73, 0.42);
}

body[data-luna-level-tier="tier-200"] .profile-card,
body[data-luna-level-tier="tier-200"] .profile-extras-card {
  border-color: rgba(255, 225, 129, 0.64);
  box-shadow: 0 26px 64px rgba(255, 196, 74, 0.34);
}
body[data-luna-level-tier="tier-200"] .profile-photo-frame,
body[data-luna-level-tier="tier-200"] .rating-avatar {
  box-shadow:
    0 0 0 2px rgba(255, 232, 167, 0.24),
    0 20px 50px rgba(255, 196, 74, 0.46);
}
body[data-luna-level-tier="tier-200"] .progress-ring {
  --accent: #ffe08f;
  box-shadow: 0 20px 45px rgba(255, 200, 76, 0.5);
}
body[data-luna-level-tier="tier-200"] .profile-card-name {
  text-shadow:
    0 0 12px rgba(255, 236, 176, 0.58),
    0 0 30px rgba(255, 196, 74, 0.5);
  animation: lunaTierNameGlow 2.8s ease-in-out infinite;
}

@keyframes lunaTierNameGlow {
  0% {
    text-shadow:
      0 0 10px rgba(255, 236, 176, 0.42),
      0 0 22px rgba(255, 196, 74, 0.36);
  }
  50% {
    text-shadow:
      0 0 16px rgba(255, 245, 205, 0.74),
      0 0 40px rgba(255, 196, 74, 0.64);
  }
  100% {
    text-shadow:
      0 0 10px rgba(255, 236, 176, 0.42),
      0 0 22px rgba(255, 196, 74, 0.36);
  }
}

@media (prefers-reduced-motion: reduce) {
  body[data-luna-level-tier="tier-200"] .profile-card-name {
    animation: none;
  }
}

.level-milestone-popup {
  position: fixed;
  left: 50%;
  top: calc(env(safe-area-inset-top, 0px) + 86px);
  width: min(92vw, 460px);
  transform: translate(-50%, -12px) scale(0.96);
  opacity: 0;
  pointer-events: none;
  z-index: 28010;
  border-radius: 20px;
  padding: 14px 14px 12px;
  border: 1px solid rgba(126, 191, 255, 0.44);
  background:
    radial-gradient(
      120% 180% at 0% 0%,
      rgba(124, 240, 255, 0.22),
      rgba(124, 240, 255, 0) 56%
    ),
    radial-gradient(
      120% 170% at 100% 100%,
      rgba(116, 125, 255, 0.18),
      rgba(116, 125, 255, 0) 54%
    ),
    linear-gradient(165deg, rgba(11, 26, 64, 0.94), rgba(8, 18, 38, 0.92));
  box-shadow:
    0 24px 56px rgba(2, 8, 23, 0.52),
    0 0 0 1px rgba(179, 226, 255, 0.24) inset;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition:
    transform 0.26s ease,
    opacity 0.26s ease;
}

.level-milestone-popup-spark {
  position: absolute;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
  background: radial-gradient(
    circle,
    rgba(255, 246, 188, 0.98),
    rgba(255, 209, 121, 0.34) 55%,
    rgba(255, 209, 121, 0) 100%
  );
  box-shadow: 0 0 18px rgba(255, 208, 122, 0.46);
}
.level-milestone-popup-spark--1 {
  top: 14px;
  left: 82px;
}
.level-milestone-popup-spark--2 {
  top: 62px;
  right: 58px;
  width: 10px;
  height: 10px;
}
.level-milestone-popup-spark--3 {
  bottom: 26px;
  left: 54px;
  width: 9px;
  height: 9px;
}

.level-milestone-popup.is-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, 0) scale(1);
}

.level-milestone-popup[data-tone="aqua"] {
  border-color: rgba(126, 255, 238, 0.48);
  background:
    radial-gradient(
      120% 180% at 0% 0%,
      rgba(126, 255, 238, 0.24),
      rgba(126, 255, 238, 0) 56%
    ),
    radial-gradient(
      120% 170% at 100% 100%,
      rgba(116, 181, 255, 0.2),
      rgba(116, 181, 255, 0) 54%
    ),
    linear-gradient(165deg, rgba(8, 34, 58, 0.94), rgba(7, 24, 44, 0.92));
}

.level-milestone-popup[data-tone="gold"] {
  border-color: rgba(255, 224, 137, 0.58);
  background:
    radial-gradient(
      120% 180% at 0% 0%,
      rgba(255, 224, 137, 0.26),
      rgba(255, 224, 137, 0) 56%
    ),
    radial-gradient(
      120% 170% at 100% 100%,
      rgba(255, 170, 84, 0.24),
      rgba(255, 170, 84, 0) 54%
    ),
    linear-gradient(165deg, rgba(54, 32, 8, 0.95), rgba(24, 16, 7, 0.92));
}

.level-milestone-popup.is-premium {
  border-color: rgba(255, 229, 147, 0.76);
  box-shadow:
    0 26px 64px rgba(52, 28, 3, 0.56),
    0 0 0 1px rgba(255, 236, 173, 0.28) inset;
}
.level-milestone-popup.is-premium .level-milestone-popup-head {
  color: rgba(255, 242, 201, 0.92);
  text-shadow: 0 0 14px rgba(255, 216, 122, 0.42);
}
.level-milestone-popup.is-premium .level-milestone-popup-orb {
  background:
    radial-gradient(
      circle at 28% 24%,
      rgba(255, 255, 255, 0.62),
      rgba(255, 255, 255, 0) 42%
    ),
    radial-gradient(
      circle at 68% 72%,
      rgba(255, 228, 141, 0.6),
      rgba(255, 228, 141, 0) 56%
    ),
    linear-gradient(145deg, rgba(255, 222, 124, 0.95), rgba(255, 154, 62, 0.93));
  box-shadow:
    0 18px 40px rgba(255, 171, 64, 0.56),
    inset 0 0 0 1px rgba(255, 246, 219, 0.62);
  animation: levelMilestoneOrbPulse 1.7s ease-in-out infinite;
}
.level-milestone-popup.is-premium .level-milestone-popup-title {
  color: rgba(255, 248, 226, 0.98);
  text-shadow: 0 0 14px rgba(255, 209, 106, 0.42);
}
.level-milestone-popup.is-premium .level-milestone-popup-chip {
  border-color: rgba(255, 238, 183, 0.62);
  background: rgba(255, 218, 133, 0.24);
  color: rgba(255, 246, 214, 0.99);
}
.level-milestone-popup.is-premium .level-milestone-popup-spark {
  opacity: 1;
  animation: levelMilestoneSparkle 1.9s ease-in-out infinite;
}
.level-milestone-popup.is-premium .level-milestone-popup-spark--2 {
  animation-delay: 0.42s;
}
.level-milestone-popup.is-premium .level-milestone-popup-spark--3 {
  animation-delay: 0.86s;
}
.level-milestone-popup.is-premium.is-burst {
  animation: levelMilestoneBurst 0.84s cubic-bezier(0.2, 0.92, 0.26, 1);
}

.level-milestone-popup-close {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 30px;
  height: 30px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.26);
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.92);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}

.level-milestone-popup-head {
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  font-weight: 900;
  color: rgba(206, 239, 255, 0.86);
}

.level-milestone-popup-main {
  margin-top: 8px;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  align-items: center;
}

.level-milestone-popup-orb {
  width: 78px;
  height: 78px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.08em;
  color: #fff7da;
  background:
    radial-gradient(
      circle at 28% 24%,
      rgba(255, 255, 255, 0.58),
      rgba(255, 255, 255, 0) 42%
    ),
    radial-gradient(
      circle at 68% 72%,
      rgba(120, 164, 255, 0.48),
      rgba(120, 164, 255, 0) 56%
    ),
    linear-gradient(145deg, rgba(255, 201, 90, 0.88), rgba(255, 139, 57, 0.86));
  box-shadow:
    0 14px 34px rgba(255, 163, 74, 0.38),
    inset 0 0 0 1px rgba(255, 244, 209, 0.42);
}

.level-milestone-popup-title {
  font-size: 1.06rem;
  line-height: 1.16;
  font-weight: 950;
  color: rgba(247, 251, 255, 0.98);
}

.level-milestone-popup-sub {
  margin-top: 5px;
  font-size: 0.88rem;
  line-height: 1.34;
  color: rgba(196, 230, 255, 0.88);
}

.level-milestone-popup-foot {
  margin-top: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.level-milestone-popup-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 28px;
  padding: 5px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255, 228, 140, 0.42);
  background: rgba(255, 211, 114, 0.16);
  color: rgba(255, 236, 180, 0.98);
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.02em;
}

.level-milestone-popup-tip {
  font-size: 0.74rem;
  color: rgba(193, 224, 249, 0.82);
}

@keyframes levelMilestoneOrbPulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.045);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes levelMilestoneSparkle {
  0% {
    transform: translateY(0) scale(0.8);
    opacity: 0.2;
  }
  50% {
    transform: translateY(-6px) scale(1.05);
    opacity: 1;
  }
  100% {
    transform: translateY(0) scale(0.8);
    opacity: 0.24;
  }
}

@keyframes levelMilestoneBurst {
  0% {
    transform: translate(-50%, -10px) scale(0.92);
  }
  55% {
    transform: translate(-50%, 0) scale(1.02);
  }
  100% {
    transform: translate(-50%, 0) scale(1);
  }
}

@media (max-width: 540px) {
  .level-milestone-popup {
    top: calc(env(safe-area-inset-top, 0px) + 78px);
    padding: 12px 12px 10px;
  }
  .level-milestone-popup-main {
    gap: 10px;
  }
  .level-milestone-popup-orb {
    width: 68px;
    height: 68px;
    font-size: 12px;
  }
  .level-milestone-popup-title {
    font-size: 1rem;
  }
  .level-milestone-popup-sub {
    font-size: 0.84rem;
  }
  .level-milestone-popup-tip {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .level-milestone-popup {
    transition: opacity 0.2s ease;
    transform: translate(-50%, 0) scale(1);
  }
  .level-milestone-popup.is-premium .level-milestone-popup-orb,
  .level-milestone-popup.is-premium .level-milestone-popup-spark,
  .level-milestone-popup.is-premium.is-burst {
    animation: none;
  }
  .profile-hero-timeline.is-animating .profile-hero-ach-chip {
    animation: none;
    opacity: 1;
    transform: none;
  }
  .profile-hero-ach-chip.is-fresh::after {
    animation: none;
    opacity: 0.22;
    box-shadow: none;
  }
}

.best-employee-month {
  position: relative;
  background:
    radial-gradient(
      620px 220px at 8% -20%,
      rgba(0, 210, 255, 0.34),
      rgba(0, 0, 0, 0) 58%
    ),
    radial-gradient(
      520px 260px at 102% -24%,
      rgba(255, 198, 102, 0.3),
      rgba(0, 0, 0, 0) 62%
    ),
    linear-gradient(170deg, rgba(10, 22, 46, 0.96), rgba(6, 12, 30, 0.96));
  padding: 18px 16px 14px;
  border-radius: 16px;
  text-align: center;
  border: 1px solid rgba(136, 224, 255, 0.34);
  box-shadow:
    0 22px 56px rgba(0, 0, 0, 0.42),
    inset 0 1px 0 rgba(255, 255, 255, 0.18);
  overflow: hidden;
}

.best-employee-month::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    115deg,
    rgba(255, 255, 255, 0) 24%,
    rgba(255, 255, 255, 0.24) 46%,
    rgba(255, 255, 255, 0) 62%
  );
  transform: translateX(-130%);
  animation: bestEmployeeSweep 8.8s ease-in-out infinite;
  opacity: 0.56;
}
.best-employee-month::after {
  content: "";
  position: absolute;
  inset: -1px;
  pointer-events: none;
  opacity: 0.72;
  border-radius: inherit;
  background: radial-gradient(
    660px 220px at 50% -120px,
    rgba(255, 255, 255, 0.32),
    rgba(255, 255, 255, 0) 60%
  );
}
.best-employee-month > * {
  position: relative;
  z-index: 1;
}
.best-employee-headline {
  display: grid;
  justify-items: center;
  gap: 8px;
  margin-bottom: 10px;
}
.best-employee-title-chip {
  min-height: 24px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid rgba(255, 208, 122, 0.52);
  background: linear-gradient(
    135deg,
    rgba(255, 223, 166, 0.28),
    rgba(255, 181, 102, 0.22)
  );
  color: rgba(255, 233, 194, 0.98);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.64rem;
  font-weight: 860;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.best-employee-label {
  font-size: 0.76rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(255, 214, 132, 0.96);
  text-shadow: 0 10px 24px rgba(255, 183, 82, 0.32);
}

.best-employee-orb {
  position: absolute;
  z-index: 0;
  width: 132px;
  height: 132px;
  border-radius: 999px;
  filter: blur(10px);
  opacity: 0.5;
  pointer-events: none;
}
.best-employee-orb--left {
  top: -58px;
  left: -48px;
  background: radial-gradient(
    circle,
    rgba(0, 226, 255, 0.48) 0%,
    rgba(0, 226, 255, 0) 68%
  );
}
.best-employee-orb--right {
  top: -44px;
  right: -52px;
  background: radial-gradient(
    circle,
    rgba(255, 195, 112, 0.56) 0%,
    rgba(255, 195, 112, 0) 70%
  );
}
.best-employee-shine {
  position: absolute;
  z-index: 0;
  left: 50%;
  top: 102px;
  width: 220px;
  height: 84px;
  transform: translateX(-50%);
  background: radial-gradient(
    ellipse at center,
    rgba(255, 214, 126, 0.34),
    rgba(255, 214, 126, 0) 70%
  );
  pointer-events: none;
}
.best-employee-avatar-wrap {
  position: relative;
  width: 120px;
  height: 120px;
  margin: 2px auto 8px;
  display: grid;
  place-items: center;
}
.best-employee-avatar-ring {
  position: absolute;
  inset: 0;
  border-radius: 30px;
  background: conic-gradient(
    from 120deg,
    rgba(255, 214, 126, 0.86),
    rgba(90, 232, 255, 0.9),
    rgba(255, 214, 126, 0.86)
  );
  filter: drop-shadow(0 12px 30px rgba(0, 210, 255, 0.34));
  animation: bestEmployeeRingSpin 9.4s linear infinite;
}
.best-employee-avatar-ring::after {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: 27px;
  background: linear-gradient(
    180deg,
    rgba(10, 20, 42, 0.96),
    rgba(8, 15, 31, 0.98)
  );
}
#achievements-modal .best-employee-month .leaderboard-avatar {
  position: relative;
  z-index: 1;
  width: 110px;
  height: 110px;
  border-radius: 26px;
  border: 1px solid rgba(255, 255, 255, 0.44);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.44);
}

#achievements-modal .best-employee-month .leaderboard-name {
  margin-top: 8px;
  color: rgba(255, 255, 255, 0.98);
  font-size: 1.85rem;
  font-weight: 940;
  letter-spacing: -0.015em;
  text-shadow: 0 12px 30px rgba(0, 0, 0, 0.54);
}

#achievements-modal .best-employee-month .leaderboard-role {
  margin-top: 4px;
  color: rgba(219, 232, 255, 0.86);
  font-size: 0.98rem;
}
#achievements-modal .best-employee-month .leaderboard-sales-badge {
  margin-top: 8px;
  border-color: rgba(108, 228, 255, 0.56);
  background: linear-gradient(
    135deg,
    rgba(0, 203, 235, 0.28),
    rgba(0, 129, 224, 0.2)
  );
  color: rgba(217, 248, 255, 0.98);
}
#achievements-modal .best-employee-month .leaderboard-points {
  margin-top: 10px;
  min-height: 38px;
  padding: 8px 16px;
  border-radius: 999px;
  border-color: rgba(255, 218, 128, 0.54);
  background: linear-gradient(
    135deg,
    rgba(255, 214, 122, 0.3),
    rgba(255, 163, 80, 0.24)
  );
  color: rgba(255, 238, 206, 0.98);
  font-size: 1.08rem;
  font-weight: 930;
  box-shadow: 0 12px 30px rgba(255, 181, 92, 0.24);
}
#achievements-modal .best-employee-month .leaderboard-hype {
  margin-top: 9px;
  margin-left: auto;
  margin-right: auto;
  width: fit-content;
  color: rgba(255, 224, 214, 0.96);
  border-color: rgba(255, 177, 144, 0.54);
  background: linear-gradient(
    135deg,
    rgba(255, 160, 110, 0.3),
    rgba(255, 104, 70, 0.24)
  );
}
#achievements-modal .best-employee-month .leaderboard-top-react-btn {
  margin-top: 9px;
  margin-left: auto;
  margin-right: auto;
  background: rgba(255, 129, 84, 0.2);
  border-color: rgba(255, 152, 116, 0.38);
  color: rgba(255, 214, 197, 0.96);
}
#achievements-modal .best-employee-month .leaderboard-top-react-btn.is-active {
  background: linear-gradient(
    135deg,
    rgba(255, 124, 72, 0.95),
    rgba(255, 73, 0, 0.9)
  );
  border-color: rgba(255, 146, 100, 0.84);
  color: rgba(255, 255, 255, 0.98);
}
.best-employee-caption {
  margin-top: 10px;
  font-size: 0.72rem;
  font-weight: 760;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(191, 219, 255, 0.84);
}

.best-employee-month.is-ceremony {
  animation: bestEmployeeCeremonyPop 1180ms cubic-bezier(0.2, 0.92, 0.22, 1);
}
.best-employee-month.is-ceremony::after {
  animation: bestEmployeeCeremonyHalo 1180ms ease-out;
}
.best-employee-month.is-ceremony .best-employee-orb--left {
  animation: bestEmployeeOrbLiftLeft 1180ms ease-out;
}
.best-employee-month.is-ceremony .best-employee-orb--right {
  animation: bestEmployeeOrbLiftRight 1180ms ease-out;
}
.best-employee-month.is-ceremony .best-employee-avatar-wrap {
  animation: bestEmployeeAvatarShowcase 1180ms cubic-bezier(0.2, 0.9, 0.18, 1);
}
.best-employee-month.is-ceremony .best-employee-avatar-ring {
  animation:
    bestEmployeeRingSpin 9.4s linear infinite,
    bestEmployeeRingPulse 1180ms ease-out;
}

@keyframes bestEmployeeRingSpin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
@keyframes bestEmployeeSweep {
  0% {
    transform: translateX(-130%);
    opacity: 0;
  }
  18% {
    opacity: 0.46;
  }
  42% {
    transform: translateX(120%);
    opacity: 0.52;
  }
  100% {
    transform: translateX(120%);
    opacity: 0;
  }
}
@keyframes bestEmployeeCeremonyPop {
  0% {
    transform: translateY(8px) scale(0.95);
    opacity: 0.36;
  }
  36% {
    transform: translateY(-2px) scale(1.015);
    opacity: 1;
  }
  68% {
    transform: translateY(0) scale(1.006);
  }
  100% {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
}
@keyframes bestEmployeeCeremonyHalo {
  0% {
    opacity: 0.24;
  }
  34% {
    opacity: 0.92;
  }
  100% {
    opacity: 0.72;
  }
}
@keyframes bestEmployeeOrbLiftLeft {
  0% {
    transform: translate(-14px, 12px) scale(0.84);
    opacity: 0.2;
  }
  40% {
    transform: translate(0, 0) scale(1.04);
    opacity: 0.68;
  }
  100% {
    transform: translate(0, 0) scale(1);
    opacity: 0.5;
  }
}
@keyframes bestEmployeeOrbLiftRight {
  0% {
    transform: translate(14px, 10px) scale(0.82);
    opacity: 0.2;
  }
  40% {
    transform: translate(0, 0) scale(1.05);
    opacity: 0.72;
  }
  100% {
    transform: translate(0, 0) scale(1);
    opacity: 0.5;
  }
}
@keyframes bestEmployeeAvatarShowcase {
  0% {
    transform: translateY(9px) scale(0.88);
  }
  34% {
    transform: translateY(-2px) scale(1.07);
  }
  68% {
    transform: translateY(0) scale(1.02);
  }
  100% {
    transform: translateY(0) scale(1);
  }
}
@keyframes bestEmployeeRingPulse {
  0% {
    filter: drop-shadow(0 6px 16px rgba(0, 210, 255, 0.22));
  }
  32% {
    filter: drop-shadow(0 18px 40px rgba(0, 210, 255, 0.56));
  }
  100% {
    filter: drop-shadow(0 12px 30px rgba(0, 210, 255, 0.34));
  }
}

@media (max-width: 520px) {
  .best-employee-month {
    padding: 14px 12px 12px;
    border-radius: 14px;
  }
  .best-employee-label {
    font-size: 0.64rem;
    letter-spacing: 0.18em;
  }
  .best-employee-title-chip {
    font-size: 0.56rem;
    min-height: 21px;
    padding: 0 8px;
  }
  .best-employee-avatar-wrap {
    width: 106px;
    height: 106px;
    margin-bottom: 6px;
  }
  .best-employee-avatar-ring {
    border-radius: 26px;
  }
  .best-employee-avatar-ring::after {
    border-radius: 23px;
  }
  #achievements-modal .best-employee-month .leaderboard-avatar {
    width: 94px;
    height: 94px;
    border-radius: 22px;
  }
  #achievements-modal .best-employee-month .leaderboard-name {
    font-size: 1.46rem;
  }
  #achievements-modal .best-employee-month .leaderboard-role {
    font-size: 0.84rem;
  }
  #achievements-modal .best-employee-month .leaderboard-points {
    font-size: 0.94rem;
    min-height: 34px;
    padding: 7px 12px;
  }
  .best-employee-caption {
    font-size: 0.64rem;
    letter-spacing: 0.05em;
  }
}

@media (prefers-reduced-motion: reduce) {
  .best-employee-month::before,
  .best-employee-avatar-ring,
  .best-employee-month.is-ceremony,
  .best-employee-month.is-ceremony .best-employee-orb,
  .best-employee-month.is-ceremony .best-employee-avatar-wrap {
    animation: none !important;
  }
}

.modal-leaderboard-wrapper {
  position: relative;
  background:
    radial-gradient(
      circle at 20% 0%,
      rgba(127, 90, 255, 0.12),
      transparent 48%
    ),
    linear-gradient(180deg, rgba(16, 22, 40, 0.84), rgba(10, 14, 26, 0.88));
  border-radius: 16px;
  padding: 16px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.3);
  overflow: hidden;
}

.modal-leaderboard-wrapper::after {
  content: "";
  position: absolute;
  inset: -1px;
  pointer-events: none;
  opacity: 0.55;
  background: radial-gradient(
    600px 220px at 50% -120px,
    rgba(255, 255, 255, 0.22),
    rgba(255, 255, 255, 0) 60%
  );
}
.modal-leaderboard {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.saleskit-board-card {
  position: relative;
  background:
    radial-gradient(
      640px 220px at 8% -20%,
      rgba(0, 210, 255, 0.24),
      transparent 60%
    ),
    radial-gradient(
      620px 240px at 98% -30%,
      rgba(255, 182, 72, 0.2),
      transparent 62%
    ),
    linear-gradient(180deg, rgba(18, 27, 48, 0.94), rgba(8, 13, 28, 0.94));
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 16px;
  padding: 16px;
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.34);
  display: grid;
  gap: 12px;
  min-height: 340px;
  overflow: hidden;
}

.saleskit-board-card::after {
  content: "";
  position: absolute;
  inset: -1px;
  pointer-events: none;
  opacity: 0.58;
  background: radial-gradient(
    540px 190px at 50% -120px,
    rgba(255, 255, 255, 0.22),
    rgba(255, 255, 255, 0) 62%
  );
}

.saleskit-board-card > * {
  position: relative;
  z-index: 1;
}

.saleskit-board-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.saleskit-board-heading {
  min-width: 0;
}

.saleskit-board-kicker {
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(185, 240, 255, 0.88);
  margin-bottom: 4px;
}

.saleskit-board-title {
  font-size: 1.02rem;
  font-weight: 820;
  color: rgba(255, 255, 255, 0.97);
  line-height: 1.15;
}

.saleskit-board-switch {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.16);
}

.saleskit-board-mode-btn {
  min-height: 30px;
  border: 0;
  border-radius: 999px;
  padding: 0 12px;
  background: transparent;
  color: rgba(220, 234, 255, 0.86);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition:
    transform 0.2s ease,
    background 0.2s ease,
    color 0.2s ease,
    box-shadow 0.2s ease;
}

.saleskit-board-mode-btn:hover {
  color: rgba(255, 255, 255, 0.96);
}

.saleskit-board-mode-btn.is-active {
  background: linear-gradient(
    135deg,
    rgba(0, 210, 255, 0.3),
    rgba(0, 154, 188, 0.25)
  );
  color: rgba(255, 255, 255, 0.98);
  box-shadow: 0 10px 20px rgba(0, 120, 170, 0.3);
}

.saleskit-board-top {
  display: grid;
  grid-template-columns: 74px 1fr;
  gap: 12px;
  align-items: center;
  padding: 10px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.16);
}

.saleskit-board-top-avatar-wrap {
  width: 74px;
  height: 74px;
}

.saleskit-board-top-avatar {
  width: 74px;
  height: 74px;
  border-radius: 20px;
  object-fit: cover;
  border: 2px solid rgba(255, 255, 255, 0.46);
  box-shadow:
    0 14px 32px rgba(0, 0, 0, 0.38),
    0 0 24px rgba(0, 210, 255, 0.22);
}

.saleskit-board-top-avatar--ghost {
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  color: rgba(255, 255, 255, 0.95);
  background: linear-gradient(
    145deg,
    rgba(42, 62, 101, 0.82),
    rgba(25, 37, 66, 0.88)
  );
}

.saleskit-board-top-copy {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.saleskit-board-top-rank {
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(186, 220, 255, 0.78);
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.saleskit-board-top-chip {
  display: inline-flex;
  align-items: center;
  min-height: 18px;
  padding: 0 7px;
  border-radius: 999px;
  border: 1px solid rgba(255, 220, 146, 0.55);
  background: rgba(255, 190, 84, 0.16);
  color: rgba(255, 231, 184, 0.98);
  font-size: 0.62rem;
  letter-spacing: 0.05em;
  font-weight: 780;
}

.saleskit-board-top-name {
  font-size: 1.08rem;
  font-weight: 860;
  color: rgba(255, 255, 255, 0.98);
  line-height: 1.14;
}

.saleskit-board-top-role {
  font-size: 0.78rem;
  color: rgba(219, 232, 255, 0.78);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.saleskit-board-top-meta {
  margin-top: 3px;
  font-size: 0.78rem;
  color: rgba(255, 219, 147, 0.98);
  font-weight: 700;
}

.saleskit-board-top.is-leader-swap {
  animation: saleskitLeaderSwap 0.9s cubic-bezier(0.2, 0.9, 0.2, 1);
}

.saleskit-board-top.is-leader-swap .saleskit-board-top-avatar {
  animation: saleskitLeaderAvatar 1.05s cubic-bezier(0.2, 0.9, 0.2, 1);
}

.saleskit-board-top.is-leader-swap .saleskit-board-top-name {
  animation: saleskitLeaderNameGlow 1.05s ease;
}

@keyframes saleskitLeaderSwap {
  0% {
    transform: translateY(8px) scale(0.99);
    opacity: 0.65;
    border-color: rgba(255, 255, 255, 0.08);
  }
  45% {
    transform: translateY(0) scale(1.01);
    opacity: 1;
    border-color: rgba(0, 210, 255, 0.52);
  }
  100% {
    transform: translateY(0) scale(1);
    opacity: 1;
    border-color: rgba(255, 255, 255, 0.16);
  }
}

@keyframes saleskitLeaderAvatar {
  0% {
    transform: scale(0.9);
    filter: saturate(0.92);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.24);
  }
  35% {
    transform: scale(1.08);
    filter: saturate(1.08);
    box-shadow:
      0 0 0 8px rgba(0, 210, 255, 0.16),
      0 16px 38px rgba(0, 0, 0, 0.34);
  }
  100% {
    transform: scale(1);
    filter: saturate(1);
    box-shadow:
      0 14px 32px rgba(0, 0, 0, 0.38),
      0 0 24px rgba(0, 210, 255, 0.22);
  }
}

@keyframes saleskitLeaderNameGlow {
  0% {
    text-shadow: 0 0 0 rgba(173, 243, 255, 0);
  }
  48% {
    text-shadow:
      0 0 18px rgba(173, 243, 255, 0.42),
      0 0 28px rgba(0, 210, 255, 0.22);
  }
  100% {
    text-shadow: 0 0 0 rgba(173, 243, 255, 0);
  }
}

.saleskit-board-empty {
  grid-column: 1 / -1;
  padding: 8px 10px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.08);
  color: rgba(219, 232, 255, 0.82);
  font-size: 0.84rem;
}

.saleskit-board-my {
  border-radius: 12px;
  padding: 8px 10px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: linear-gradient(
    135deg,
    rgba(255, 215, 70, 0.16),
    rgba(255, 154, 0, 0.12)
  );
}

.saleskit-board-my-line {
  display: flex;
  align-items: center;
  gap: 8px;
  color: rgba(255, 243, 214, 0.95);
  font-size: 0.82rem;
  font-weight: 650;
}

.saleskit-board-my-rank {
  min-width: 38px;
  height: 24px;
  padding: 0 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.26);
  font-weight: 850;
}

.saleskit-board-list {
  display: grid;
  gap: 8px;
  max-height: 260px;
  overflow: auto;
  padding-right: 2px;
}

.saleskit-board-row {
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.07);
  color: rgba(255, 255, 255, 0.92);
  border-radius: 12px;
  min-height: 48px;
  padding: 7px 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  text-align: left;
  cursor: pointer;
  transition:
    transform 0.2s ease,
    background 0.2s ease,
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}

.saleskit-board-row:hover {
  transform: translateY(-1px);
  background: rgba(255, 255, 255, 0.11);
  border-color: rgba(158, 224, 255, 0.34);
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.24);
}

.saleskit-board-row.is-me {
  border-color: rgba(255, 224, 132, 0.5);
  background: linear-gradient(
    135deg,
    rgba(255, 215, 70, 0.17),
    rgba(255, 154, 0, 0.11)
  );
}

.saleskit-board-row-left {
  display: flex;
  align-items: center;
  min-width: 0;
  gap: 8px;
}

.saleskit-board-row-rank {
  width: 34px;
  color: rgba(193, 225, 255, 0.86);
  font-size: 0.8rem;
  font-weight: 760;
  flex-shrink: 0;
}

.saleskit-board-row-avatar {
  width: 30px;
  height: 30px;
  border-radius: 9px;
  object-fit: cover;
  border: 1px solid rgba(255, 255, 255, 0.3);
  flex-shrink: 0;
}

.saleskit-board-row-avatar--ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.13);
  color: rgba(255, 255, 255, 0.86);
  font-size: 0.76rem;
  font-weight: 750;
}

.saleskit-board-row-id {
  display: grid;
  min-width: 0;
}

.saleskit-board-row-id strong {
  font-size: 0.86rem;
  line-height: 1.15;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.saleskit-board-row-id small {
  font-size: 0.73rem;
  color: rgba(214, 229, 255, 0.74);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.saleskit-board-row-score {
  padding: 6px 9px;
  border-radius: 999px;
  border: 1px solid rgba(255, 220, 153, 0.46);
  background: rgba(255, 190, 84, 0.14);
  color: rgba(255, 231, 184, 0.98);
  font-size: 0.8rem;
  font-weight: 760;
  flex-shrink: 0;
}

@media (max-width: 680px) {
  .saleskit-board-head {
    flex-direction: column;
    align-items: stretch;
  }
  .saleskit-board-switch {
    width: 100%;
    justify-content: space-between;
  }
  .saleskit-board-mode-btn {
    flex: 1;
  }
  .saleskit-board-top {
    grid-template-columns: 62px 1fr;
  }
  .saleskit-board-top-avatar-wrap,
  .saleskit-board-top-avatar {
    width: 62px;
    height: 62px;
    border-radius: 16px;
  }
}

/* МОДАЛЬНОЕ ОКНО */
.modal-overlay.active {
  opacity: 1;
  visibility: visible;
}
.modal-title-row.centered {
  justify-content: center;
  margin-bottom: 20px;
}
#cert-section {
  margin-top: 30px;
  display: none;
  text-align: center;
}
#cert-section hr {
  border: 0;
  border-top: 1px solid #eee;
  margin-bottom: 20px;
}
#cert-section .modal-h2 {
  font-size: 1.2rem;
  margin-bottom: 10px;
}
#ai-mic {
  background: #eee;
  color: #333;
  margin-right: 5px;
  border: none;
  border-radius: 8px;
  padding: 6px 10px;
  cursor: pointer;
}
/* ИСПРАВЛЕННЫЕ СТИЛИ МОДАЛКИ */
/* === ИСПРАВЛЕННЫЙ СТИЛЬ КАРТОЧКИ ТОВАРА (SCROLL) === */

.modal-content {
  background: var(--surface-modal); /* Почти непрозрачный для читаемости */
  width: 100%;
  max-width: 600px;
  height: 92vh;
  height: 92dvh;
  max-height: 92vh;
  max-height: 92dvh;
  margin: 0 auto;
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  position: relative;
  transform: translateY(100%);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);

  /* ГЛАВНОЕ ИЗМЕНЕНИЕ: Скроллим ВСЮ карточку целиком */
  display: block;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
  touch-action: pan-y pinch-zoom;
  z-index: var(--z-modal-content);
  color: var(--surface-modal-text);
  border: 1px solid var(--surface-modal-border);
  box-shadow: var(--surface-modal-shadow);
}

/* Декоративная "ручка" сверху, как в iOS */
.modal-content::before {
  content: "";
  position: sticky;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  width: 40px;
  height: 5px;
  background: var(--surface-modal-grip);
  border-radius: 10px;
  z-index: 60;
  display: block;
  margin-bottom: -5px; /* Чтобы не занимала место */
}

.modal-content .modal-image-wrapper {
  background: var(--surface-modal-image);
}
.modal-content .modal-h2 {
  color: var(--surface-modal-title);
}
.modal-content .modal-en {
  color: var(--surface-modal-sub);
}
.modal-content .info-block {
  border-bottom: 1px solid var(--surface-modal-divider);
}
.modal-content .info-label {
  color: var(--surface-modal-label);
}
.modal-content .info-text {
  color: var(--surface-modal-text);
}
#cert-section hr {
  border-top-color: var(--surface-modal-divider);
}
#ai-mic {
  background: var(--surface-modal-mic-bg);
  border: 1px solid var(--surface-modal-mic-border);
  color: var(--surface-modal-mic-text);
}

.modal-overlay.active .modal-content {
  transform: translateY(0);
}
@media (min-width: 768px) {
  .modal-overlay {
    align-items: center;
    padding: 20px;
  }
  .modal-content {
    height: auto;
    max-height: 85vh;
    border-radius: var(--radius-xl);
    transform: translateY(20px);
  }
}

@media (max-width: 767px) {
  .modal-overlay {
    align-items: flex-end;
    padding-top: 8px;
  }
  .modal-content {
    height: 93vh;
    height: 93dvh;
    max-height: 93vh;
    max-height: 93dvh;
    border-radius: 22px 22px 0 0;
  }
  .modal-content::before {
    top: 6px;
  }
  #product-modal .modal-image-wrapper {
    height: min(38vh, 300px);
  }
  #product-modal .modal-body {
    padding-top: 20px;
  }
  #product-modal .modal-h2 {
    font-size: 1.7rem;
  }
  #product-modal .modal-en {
    margin-bottom: 18px;
  }
}

/* Staff auth modal must stay readable in light theme */
#staff-auth-modal .modal-content {
  background:
    radial-gradient(circle at 18% 0%, rgba(0, 210, 255, 0.12), transparent 42%),
    radial-gradient(
      circle at 100% 18%,
      rgba(127, 90, 255, 0.12),
      transparent 48%
    ),
    linear-gradient(180deg, rgba(16, 18, 30, 0.98), rgba(10, 12, 20, 0.98));
  color: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.55);
}
#staff-auth-modal .modal-content::before {
  background: rgba(255, 255, 255, 0.22);
}
#staff-auth-modal .modal-h2 {
  color: rgba(255, 255, 255, 0.96);
}
#staff-auth-modal .modal-text {
  color: rgba(255, 255, 255, 0.78);
}
#staff-auth-modal .close-modal {
  color: rgba(255, 255, 255, 0.92);
}
#staff-auth-modal .staff-auth-input::placeholder {
  color: rgba(255, 255, 255, 0.55);
}
#staff-auth-modal .staff-auth-input {
  -webkit-text-fill-color: rgba(255, 255, 255, 0.92);
}

@media (max-width: 560px) {
  .staff-auth-content {
    max-width: none;
  }
  .staff-auth-secondary-actions {
    grid-template-columns: 1fr;
  }
  .staff-auth-hero .modal-h2 {
    font-size: 1.8rem;
  }
  .staff-auth-hero-note,
  .staff-auth-submit-note {
    font-size: 0.82rem;
  }
  .staff-auth-input--with-toggle {
    padding-right: 104px;
  }
  .staff-auth-pass-toggle {
    min-width: 80px;
    padding: 8px 10px;
    font-size: 0.74rem;
  }
}

.modal-image-wrapper {
  position: relative;
  width: 100%;
  height: 350px;
  background: #eee;
  border-radius: 25px 25px 0 0;
  overflow: hidden;
}
#product-modal .modal-image-wrapper::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(
      520px 220px at 50% 0%,
      rgba(0, 0, 0, 0.1),
      rgba(0, 0, 0, 0) 60%
    ),
    linear-gradient(180deg, rgba(0, 0, 0, 0.18), rgba(0, 0, 0, 0) 32%),
    linear-gradient(0deg, rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0) 55%);
  opacity: 0.9;
  pointer-events: none;
}
#product-modal .modal-image-wrapper::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  box-shadow: inset 0 -80px 90px rgba(0, 0, 0, 0.12);
  pointer-events: none;
  z-index: 1;
}
#product-modal .modal-header-img {
  transform: scale(1.02);
  filter: saturate(1.02) contrast(1.02);
}

@media (max-width: 520px) {
  .modal-image-wrapper {
    height: min(42vh, 320px);
  }
}

.modal-header-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition:
    opacity 0.4s ease-in,
    transform 0.45s ease;
}

.img-loader {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 30px;
  height: 30px;
  border: 3px solid #ddd;
  border-top: 3px solid var(--primary-blue);
  border-radius: 50%;
  animation: spin 1s linear infinite;
  z-index: 1;
  display: none;
}

.modal-body {
  padding: 25px 20px calc(40px + env(safe-area-inset-bottom, 0px)) 20px;
  background: transparent;
}

.close-modal-wrapper {
  position: sticky;
  top: 0;
  width: 100%;
  height: 0;
  z-index: 50;
  overflow: visible;
  display: flex;
  justify-content: flex-end;
  padding-right: 15px;
  pointer-events: none;
}

.close-modal {
  pointer-events: auto;
  position: absolute;
  top: calc(12px + env(safe-area-inset-top, 0px));
  right: calc(12px + env(safe-area-inset-right, 0px));
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.5);
  color: white;
  border: 1px solid rgba(255, 255, 255, 0.2);
  font-size: 24px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  backdrop-filter: blur(10px);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}
.close-modal:active {
  transform: scale(0.9);
}
.close-modal-bottom-btn {
  width: 100%;
  padding: 16px;
  margin-top: 25px;
  background-color: var(--light-bg);
  color: var(--text-gray);
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 12px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s;
}
.close-modal-bottom-btn:active {
  background-color: #e0e2e6;
}
.modal-title-row {
  display: flex;
  justify-content: space-between;
  align-items: start;
  margin-bottom: 5px;
}
.modal-h2 {
  font-size: 1.8rem;
  font-weight: 800;
  color: var(--primary-dark);
  line-height: 1.1;
  letter-spacing: -0.5px;
}
.modal-price-lg {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--primary-blue);
}
.modal-en {
  font-family: "PT Serif", serif;
  font-size: 1.2rem;
  color: #888;
  font-style: italic;
  margin-bottom: 25px;
}
.modal-en.modal-en--facts {
  font-family: "Montserrat", sans-serif;
  font-style: normal;
  font-size: 0.95rem;
  color: rgba(8, 18, 34, 0.72);
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
@media (prefers-color-scheme: dark) {
  .modal-en.modal-en--facts {
    color: rgba(219, 232, 255, 0.78);
  }
}
.info-block {
  margin-bottom: 25px;
  padding-bottom: 15px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}
.info-label {
  font-size: 0.85rem;
  text-transform: uppercase;
  color: #999;
  font-weight: 800;
  margin-bottom: 10px;
  letter-spacing: 0.5px;
}
.info-text {
  font-size: 1.05rem;
  line-height: 1.6;
}
#product-modal .fact-full-content {
  font-family: "Montserrat", sans-serif;
  font-size: 1.12rem;
  line-height: 1.7;
  color: rgba(8, 18, 34, 0.92);
  font-weight: 600;
  white-space: pre-wrap;
}
@media (prefers-color-scheme: dark) {
  #product-modal .fact-full-content {
    color: rgba(255, 255, 255, 0.86);
  }
}

.fact-modal-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 14px 0 16px;
}
.fact-badge.fact-badge--inline {
  margin-bottom: 0;
}
.fact-modal-meta {
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-size: 0.75rem;
  color: rgba(0, 0, 0, 0.55);
}
@media (prefers-color-scheme: dark) {
  .fact-modal-meta {
    color: rgba(255, 255, 255, 0.62);
  }
}
.fact-action-btn {
  flex: 1 1 160px;
  border-radius: 16px;
  padding: 12px 12px;
  border: 1px solid rgba(8, 18, 34, 0.1);
  background: rgba(0, 0, 0, 0.03);
  font-weight: 900;
  cursor: pointer;
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    background 0.18s ease;
  color: rgba(8, 18, 34, 0.86);
}
.fact-action-btn.primary {
  border: none;
  background: linear-gradient(120deg, #00d2ff, #7f5aff);
  color: #0b1021;
  box-shadow: 0 16px 36px rgba(0, 210, 255, 0.22);
}
.fact-action-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 16px 34px rgba(15, 23, 42, 0.12);
}
.fact-action-btn:active {
  transform: translateY(0) scale(0.99);
}
@media (prefers-color-scheme: dark) {
  .fact-action-btn {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.14);
    color: rgba(255, 255, 255, 0.9);
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.35);
  }
}

.fact-modal-nav {
  display: flex;
  gap: 10px;
  margin-top: 14px;
  flex-wrap: wrap;
}
.fact-nav-btn {
  flex: 1;
  border-radius: 16px;
  padding: 12px 12px;
  border: 1px solid rgba(8, 18, 34, 0.1);
  background: rgba(255, 255, 255, 0.65);
  font-weight: 900;
  cursor: pointer;
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    background 0.18s ease;
  color: rgba(8, 18, 34, 0.86);
}
.fact-nav-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 16px 34px rgba(15, 23, 42, 0.12);
}
.fact-nav-btn:active {
  transform: translateY(0) scale(0.99);
}
@media (prefers-color-scheme: dark) {
  .fact-nav-btn {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.14);
    color: rgba(255, 255, 255, 0.9);
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.35);
  }
}

.fact-storybar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 4px 0 12px;
}

.fact-story-timer {
  height: 4px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.1);
  overflow: hidden;
  margin: 0 0 14px;
}
.fact-story-timer-fill {
  display: block;
  width: 100%;
  height: 100%;
  transform: scaleX(0);
  transform-origin: left;
  background: linear-gradient(90deg, #00d2ff, #7f5aff);
  animation: factStoryFill var(--story-duration, 9000ms) linear forwards;
}
.fact-story-timer.is-paused .fact-story-timer-fill {
  animation-play-state: paused;
}
@keyframes factStoryFill {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}
.fact-story-segs {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
}
.fact-story-segs[data-count="3"] {
  grid-template-columns: repeat(3, 1fr);
}
.fact-story-segs[data-count="4"] {
  grid-template-columns: repeat(4, 1fr);
}
.fact-story-segs[data-count="5"] {
  grid-template-columns: repeat(5, 1fr);
}
.fact-story-segs[data-count="6"] {
  grid-template-columns: repeat(6, 1fr);
}
.fact-story-segs[data-count="7"] {
  grid-template-columns: repeat(7, 1fr);
}
.fact-story-segs .fact-story-seg {
  min-width: 0;
}
.fact-story-seg {
  height: 6px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.1);
  overflow: hidden;
}
.fact-story-seg.is-active {
  background: linear-gradient(90deg, #00d2ff, #7f5aff);
  box-shadow: 0 10px 22px rgba(0, 210, 255, 0.18);
}
.fact-story-label {
  font-weight: 900;
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(0, 0, 0, 0.55);
  white-space: nowrap;
}
@media (prefers-color-scheme: dark) {
  .fact-story-seg {
    background: rgba(255, 255, 255, 0.12);
  }
  .fact-story-label {
    color: rgba(255, 255, 255, 0.62);
  }
  .fact-story-timer {
    background: rgba(255, 255, 255, 0.14);
  }
}
.fact-story-actions {
  margin-top: 12px;
}

/* Facts stories: fullscreen story-view (mobile) */
@media (max-width: 640px) {
  #product-modal.fact-story-mode {
    align-items: stretch;
  }
  #product-modal.fact-story-mode .modal-content {
    width: 100%;
    max-width: none;
    height: 100vh;
    height: 100dvh;
    max-height: none;
    border-radius: 0;
    background:
      radial-gradient(
        circle at 20% 0%,
        rgba(255, 255, 255, 0.12),
        transparent 42%
      ),
      linear-gradient(180deg, rgba(12, 16, 30, 0.98), rgba(7, 10, 20, 0.98));
  }
  #product-modal.fact-story-mode .modal-content::before {
    display: none;
  }
  #product-modal.fact-story-mode .modal-image-wrapper {
    height: min(46vh, 420px);
    border-radius: 0;
  }
  #product-modal.fact-story-mode .modal-header-img {
    opacity: 1;
  }
  #product-modal.fact-story-mode .modal-body {
    padding: 18px 16px calc(28px + env(safe-area-inset-bottom));
  }
  #product-modal.fact-story-mode .modal-h2 {
    color: rgba(255, 255, 255, 0.92);
  }
  #product-modal.fact-story-mode .modal-en.modal-en--facts {
    color: rgba(219, 232, 255, 0.78);
  }
  #product-modal.fact-story-mode .fact-full-content {
    color: rgba(255, 255, 255, 0.9);
  }
  #product-modal.fact-story-mode .close-modal-bottom-btn {
    display: none;
  }
  #product-modal.fact-story-mode .fact-action-btn,
  #product-modal.fact-story-mode .fact-nav-btn {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.14);
    color: rgba(255, 255, 255, 0.9);
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.35);
  }
  #product-modal.fact-story-mode .fact-action-btn.primary {
    border: none;
    color: #0b1021;
  }
}
.pairing-item {
  background: var(--light-bg);
  padding: 15px;
  border-radius: 12px;
  border: 1px solid rgba(0, 0, 0, 0.05);
  cursor: pointer;
  margin-bottom: 10px;
  position: relative;
  transition: 0.2s;
}
.pairing-item::after {
  content: "➔";
  position: absolute;
  top: 15px;
  right: 15px;
  font-size: 12px;
  color: var(--primary-blue);
  opacity: 0.5;
}
.pairing-item:active {
  transform: scale(0.98);
  background-color: #f0f0f0;
}
.pairing-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
  padding-right: 20px;
}
.pairing-name {
  font-weight: 700;
  font-size: 1rem;
  color: var(--primary-dark);
}
.pairing-price {
  font-weight: 700;
  color: var(--primary-blue);
  font-size: 0.9rem;
}
.pairing-reason {
  font-size: 0.95rem;
  color: #666;
  font-style: italic;
  border-left: 3px solid var(--accent-yellow);
  padding-left: 12px;
  margin-top: 8px;
}
.guest-story {
  background: linear-gradient(to right, rgba(255, 215, 70, 0.15), transparent);
  border-left: 4px solid var(--accent-yellow);
  padding: 20px;
  font-style: italic;
  color: var(--primary-dark);
  border-radius: 0 12px 12px 0;
  font-weight: 500;
  font-size: 1.05rem;
}

/* УМНЫЕ ТЕГИ */
.smart-tag {
  color: var(--primary-blue);
  cursor: pointer;
  font-weight: 500;
  transition: all 0.2s;
  border-bottom: 1px dashed rgba(60, 85, 150, 0.4);
}
.smart-tag:hover {
  color: var(--wrong-red);
  background-color: rgba(60, 85, 150, 0.1);
  border-radius: 4px;
}

#back-to-top {
  position: fixed;
  bottom: calc(var(--nav-height) + var(--safe-area-bottom) + 20px);
  right: 20px;
  width: 55px;
  height: 55px;
  background: var(--primary-dark);
  color: white;
  border-radius: 50%;
  border: none;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 24px;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transform: translateY(20px);
  transition: all 0.3s;
  z-index: 900;
}
#back-to-top.visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
.hidden {
  display: none !important;
}

/* УМНЫЙ РАНДОМАЙЗЕР */
.random-grid-buttons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 15px;
  width: 100%;
  max-width: 400px;
  margin-top: 20px;
}
.spin-btn-mode {
  padding: 20px 10px;
  border: none;
  border-radius: 16px;
  font-size: 1rem;
  font-weight: 700;
  color: white;
  cursor: pointer;
  transition:
    transform 0.2s,
    box-shadow 0.2s;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}
.spin-btn-mode:active {
  transform: scale(0.95);
}

.quiz-toast {
  position: fixed;
  bottom: 20%; /* Чуть выше низа */
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: rgba(40, 44, 52, 0.95); /* Темный фон */
  color: white;
  padding: 15px 20px;
  border-radius: 16px;
  font-size: 0.95rem;
  line-height: 1.4;
  z-index: 3000;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  text-align: center;
  width: 90%;
  max-width: 400px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

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

.quiz-toast b {
  color: var(--accent-yellow);
  display: block;
  margin-bottom: 5px;
  font-size: 1.1rem;
}
/* Цвета кнопок */
.mode-driver {
  background: linear-gradient(135deg, #00b09b, #96c93d);
} /* Зеленый */
.mode-party {
  background: linear-gradient(135deg, #ff512f, #dd2476);
} /* Красный */
.mode-relax {
  background: linear-gradient(135deg, #4b6cb7, #182848);
} /* Синий */
.mode-chaos {
  background: linear-gradient(135deg, #833ab4, #fd1d1d, #fcb045);
} /* Радуга */

.random-slot-text {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--primary-blue);
  margin-top: 20px;
  height: 30px;
  opacity: 0.8;
}
@media (prefers-color-scheme: dark) {
  .card-img-container {
    filter: brightness(0.9); /* Чуть приглушаем яркость картинок в темноте */
  }
  .modal-image-wrapper img {
    filter: brightness(0.9);
  }
}
@keyframes micPulse {
  0% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(255, 61, 0, 0.7);
  }
  70% {
    transform: scale(1.1);
    box-shadow: 0 0 0 10px rgba(255, 61, 0, 0);
  }
  100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(255, 61, 0, 0);
  }
}
.mic-active {
  animation: micPulse 1.5s infinite;
  background: var(--wrong-red) !important;
  color: white !important;
}

/* ЭФФЕКТ 3D КАРТОЧЕК (только на устройствах с hover) */
@media (hover: hover) and (pointer: fine) {
  .card {
    transition:
      transform 0.1s ease,
      box-shadow 0.2s ease;
    transform-style: preserve-3d;
    perspective: 1000px;
  }
  /* Блик на карточке */
  .card::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background:
      radial-gradient(
        520px 220px at 30% 0%,
        rgba(255, 255, 255, 0.22),
        rgba(255, 255, 255, 0) 62%
      ),
      linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.22) 0%,
        rgba(255, 255, 255, 0) 58%
      );
    opacity: 0;
    transition: opacity 0.2s;
    pointer-events: none;
    border-radius: inherit;
  }
  .card:hover::after,
  .card:active::after {
    opacity: 1;
  }
}

@keyframes like-bounce {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.4);
  }
  100% {
    transform: scale(1);
  }
}

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

/* КОНФЕТТИ (CANVAS) */
#confetti-canvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 10060;
}

.profile-btn {
  margin-left: auto;
  min-height: 40px;
  background:
    radial-gradient(
      140% 160% at 18% 22%,
      rgba(255, 255, 255, 0.14),
      rgba(255, 255, 255, 0.06) 55%,
      rgba(0, 0, 0, 0.1) 100%
    ),
    rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(212, 175, 55, 0.4); /* Золотая рамка */
  border-radius: 999px;
  padding: 8px 12px;
  display: flex;
  align-items: center;
  gap: 7px;
  cursor: pointer;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    border-color 0.18s ease,
    background 0.18s ease;
  box-shadow:
    0 14px 38px rgba(0, 0, 0, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.16);
  position: relative;
  text-transform: uppercase;
  overflow: hidden;
}
.profile-btn::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  background:
    radial-gradient(
      120px 46px at 20% 30%,
      rgba(255, 255, 255, 0.2),
      rgba(255, 255, 255, 0) 70%
    ),
    linear-gradient(
      90deg,
      rgba(212, 175, 55, 0),
      rgba(212, 175, 55, 0.14),
      rgba(212, 175, 55, 0)
    );
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms ease;
}
.profile-btn:hover {
  border-color: rgba(212, 175, 55, 0.56);
  box-shadow:
    0 16px 44px rgba(0, 0, 0, 0.24),
    0 0 22px rgba(212, 175, 55, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.18);
  transform: translateY(-1px);
}
.profile-btn:hover::after {
  opacity: 1;
}

.profile-btn:active {
  transform: scale(0.97);
  background: rgba(212, 175, 55, 0.14);
}

.profile-icon {
  font-size: 1.1rem;
}

.profile-text {
  color: var(--accent-yellow); /* Золотой текст */
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  text-shadow: 0 10px 22px rgba(0, 0, 0, 0.25);
}

.profile-btn:focus-visible {
  outline: 3px solid rgba(0, 210, 255, 0.28);
  outline-offset: 4px;
}

@media (max-width: 520px) {
  header {
    padding: calc(12px + env(safe-area-inset-top, 0px)) var(--header-pad-x)
      calc(8px + var(--header-overlap)) var(--header-pad-x);
    border-radius: 0 0 24px 24px;
  }
  header::after {
    left: calc(var(--header-pad-x) - 1px);
    right: calc(var(--header-pad-x) - 1px);
    bottom: calc(var(--header-overlap) + 5px);
    opacity: 0.5;
  }
  .header-shell {
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: 8px;
  }
  header .live-logo {
    min-width: clamp(164px, 46vw, 220px);
    justify-self: center;
  }
  .header-left-actions,
  .header-right-actions {
    flex-direction: row;
    align-items: center;
    gap: 8px;
  }
  .header-left-actions {
    justify-content: flex-start;
  }
  .header-right-actions {
    justify-content: flex-end;
  }
  .header-right-row {
    display: none;
  }
  .header-left-actions .profile-text {
    display: none;
  }
  .header-left-actions .profile-btn {
    width: 38px;
    height: 38px;
    min-height: 38px;
    padding: 0;
    border-radius: 12px;
    justify-content: center;
  }
  .header-left-actions .profile-icon {
    font-size: 16px;
  }
  .header-left-actions .lang-toggle {
    display: none;
  }
  .header-left-actions .lang-btn {
    height: 28px;
    padding: 0 8px;
    font-size: 11px;
  }

  .header-right-actions .support-btn {
    min-width: 36px;
    width: 36px;
    height: 36px;
    padding: 0;
    justify-content: center;
    border-radius: 12px;
    gap: 0;
  }
  .header-right-actions .support-btn-label {
    display: none;
  }
  .header-right-actions .support-btn-icon {
    width: 18px;
    height: 18px;
    font-size: 8px;
    letter-spacing: 0.06em;
    border-radius: 6px;
  }
}
@media (max-width: 360px) {
  .header-left-actions .profile-btn {
    padding-left: 0;
    padding-right: 0;
  }
}

/* Всплывающий бейдж начисления XP */
.xp-badge {
  position: fixed;
  top: 80px;
  right: 18px;
  padding: 10px 14px;
  background: rgba(0, 0, 0, 0.75);
  border: 1px solid rgba(120, 200, 255, 0.35);
  border-radius: 12px;
  color: #e9f6ff;
  font-weight: 700;
  box-shadow:
    0 12px 24px rgba(0, 0, 0, 0.35),
    0 0 12px rgba(120, 200, 255, 0.18);
  animation: xpFloat 1.2s ease forwards;
  z-index: 9999;
}
.xp-badge.xp-badge--streak {
  background:
    linear-gradient(135deg, rgba(255, 196, 75, 0.18), rgba(255, 95, 109, 0.14)),
    rgba(0, 0, 0, 0.78);
  border: 1px solid rgba(255, 210, 120, 0.45);
  color: rgba(255, 246, 230, 0.98);
  box-shadow:
    0 16px 30px rgba(0, 0, 0, 0.38),
    0 0 18px rgba(255, 196, 75, 0.22);
}

/* Пасхалка за 3×7 серий */
.streak-secret-overlay {
  position: fixed;
  inset: 0;
  z-index: 10020;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(2, 3, 12, 0.62);
  backdrop-filter: blur(10px);
  animation: streakOverlayIn 220ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
.streak-secret-overlay.is-leaving {
  animation: streakOverlayOut 200ms ease both;
}
.streak-secret-card {
  width: min(540px, 100%);
  border-radius: 28px;
  padding: 22px 20px;
  color: rgba(255, 255, 255, 0.96);
  border: 1px solid rgba(255, 255, 255, 0.14);
  background:
    radial-gradient(
      1200px 420px at 20% -30%,
      rgba(127, 90, 255, 0.55),
      transparent 60%
    ),
    radial-gradient(
      900px 420px at 110% 0%,
      rgba(0, 210, 255, 0.35),
      transparent 58%
    ),
    radial-gradient(
      800px 520px at 50% 120%,
      rgba(255, 196, 75, 0.22),
      transparent 60%
    ),
    rgba(12, 14, 24, 0.92);
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.55);
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.streak-secret-card::before {
  content: "";
  position: absolute;
  inset: -40%;
  background:
    radial-gradient(
      circle at 25% 15%,
      rgba(255, 255, 255, 0.22) 0 1px,
      transparent 2px
    ),
    radial-gradient(
      circle at 70% 30%,
      rgba(255, 255, 255, 0.18) 0 1px,
      transparent 2px
    ),
    radial-gradient(
      circle at 45% 70%,
      rgba(255, 255, 255, 0.14) 0 1px,
      transparent 2px
    ),
    radial-gradient(
      circle at 85% 75%,
      rgba(255, 255, 255, 0.16) 0 1px,
      transparent 2px
    );
  opacity: 0.7;
  animation: streakStarsDrift 2.6s ease-in-out infinite;
  pointer-events: none;
  z-index: 0;
}
.streak-secret-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    110deg,
    transparent,
    rgba(255, 255, 255, 0.12),
    transparent
  );
  transform: translateX(-70%);
  animation: streakShimmer 1.6s ease 1;
  pointer-events: none;
  z-index: 0;
}
.streak-secret-kicker {
  position: relative;
  z-index: 1;
  font-size: 0.72rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  opacity: 0.78;
  font-weight: 800;
}
.streak-secret-title {
  position: relative;
  z-index: 1;
  margin-top: 8px;
  font-size: 1.6rem;
  font-weight: 900;
  letter-spacing: 0.2px;
}
.streak-secret-sub {
  position: relative;
  z-index: 1;
  margin-top: 8px;
  font-size: 1rem;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.82);
}
.streak-secret-badge {
  position: relative;
  z-index: 1;
  margin-top: 14px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.35);
  font-weight: 900;
  letter-spacing: 0.12em;
}
@keyframes streakOverlayIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes streakOverlayOut {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(10px);
  }
}
@keyframes streakStarsDrift {
  0%,
  100% {
    transform: translate3d(0, 0, 0) scale(1);
    opacity: 0.65;
  }
  50% {
    transform: translate3d(12px, -8px, 0) scale(1.02);
    opacity: 0.85;
  }
}
@keyframes streakShimmer {
  0% {
    transform: translateX(-70%);
    opacity: 0;
  }
  15% {
    opacity: 0.9;
  }
  100% {
    transform: translateX(70%);
    opacity: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .streak-secret-overlay,
  .streak-secret-overlay.is-leaving {
    animation: none !important;
  }
  .streak-secret-card::before,
  .streak-secret-card::after {
    animation: none !important;
  }
}
@keyframes xpFloat {
  0% {
    opacity: 0;
    transform: translateY(8px) scale(0.95);
  }
  20% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  80% {
    opacity: 1;
    transform: translateY(-10px) scale(1);
  }
  100% {
    opacity: 0;
    transform: translateY(-16px) scale(0.97);
  }
}

/* Индикатор онлайн в таблице лидеров */
.leaderboard-row-online {
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-left: 6px;
  border-radius: 50%;
  background: rgba(33, 235, 155, 0.92);
  box-shadow:
    0 0 0 2px rgba(33, 235, 155, 0.16),
    0 0 12px rgba(33, 235, 155, 0.42);
}

.rating-nearby-wrap {
  margin-top: 14px;
}

.league-you-now {
  position: sticky;
  top: 10px;
  z-index: 8;
  margin: 4px 0 10px;
  border-radius: 16px;
  border: 1px solid var(--league-accent-strong, rgba(8, 18, 34, 0.14));
  background:
    radial-gradient(
      120% 120% at 0% 0%,
      var(--league-accent-soft, rgba(255, 215, 64, 0.14)),
      rgba(255, 255, 255, 0) 56%
    ),
    rgba(255, 255, 255, 0.92);
  box-shadow: 0 14px 32px rgba(15, 23, 42, 0.14);
  padding: 10px 12px;
  backdrop-filter: blur(8px);
}
.league-you-now-kicker {
  font-size: 0.66rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(8, 18, 34, 0.62);
}
.league-you-now-main {
  margin-top: 6px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.league-you-now-metric {
  display: grid;
  gap: 1px;
}
.league-you-now-metric .label {
  font-size: 0.64rem;
  color: rgba(8, 18, 34, 0.58);
}
.league-you-now-metric strong {
  font-size: 0.86rem;
  font-weight: 900;
  color: rgba(8, 18, 34, 0.92);
}
.league-you-now-shift {
  margin-top: 7px;
  width: fit-content;
  padding: 4px 8px;
  border-radius: 999px;
  border: 1px solid rgba(8, 18, 34, 0.14);
  background: rgba(255, 255, 255, 0.74);
  font-size: 0.66rem;
  font-weight: 860;
  color: rgba(8, 18, 34, 0.72);
}
.league-you-now-badge {
  margin-top: 7px;
  width: fit-content;
  max-width: 100%;
  padding: 4px 9px;
  border-radius: 999px;
  border: 1px solid rgba(255, 141, 86, 0.42);
  background: linear-gradient(
    135deg,
    rgba(255, 240, 224, 0.9),
    rgba(255, 214, 184, 0.78)
  );
  color: rgba(104, 41, 7, 0.92);
  font-size: 0.65rem;
  font-weight: 860;
  letter-spacing: 0.01em;
  line-height: 1.24;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.league-you-now-badge[data-tone="active"] {
  border-color: rgba(255, 132, 72, 0.48);
}
.league-you-now-badge[data-tone="warm"] {
  border-color: rgba(255, 118, 52, 0.56);
  background: linear-gradient(
    135deg,
    rgba(255, 228, 198, 0.94),
    rgba(255, 178, 138, 0.86)
  );
}
.league-you-now-badge[data-tone="hot"] {
  border-color: rgba(255, 98, 40, 0.64);
  background: linear-gradient(
    135deg,
    rgba(255, 204, 170, 0.96),
    rgba(255, 145, 91, 0.9)
  );
  color: rgba(82, 22, 2, 0.98);
  box-shadow: 0 10px 24px rgba(255, 116, 52, 0.24);
}
.league-you-now-badge[data-kind="battle"] {
  border-color: rgba(76, 193, 255, 0.46);
  background: linear-gradient(
    135deg,
    rgba(228, 246, 255, 0.94),
    rgba(201, 234, 255, 0.86)
  );
  color: rgba(10, 74, 118, 0.95);
}
.league-you-now-badge[data-kind="battle"][data-tone="warm"] {
  border-color: rgba(58, 188, 255, 0.54);
  background: linear-gradient(
    135deg,
    rgba(214, 242, 255, 0.96),
    rgba(171, 227, 255, 0.92)
  );
  box-shadow: 0 10px 24px rgba(60, 177, 255, 0.18);
}
.league-you-now-badge[data-kind="battle"][data-tone="hot"] {
  border-color: rgba(27, 174, 255, 0.64);
  background: linear-gradient(
    135deg,
    rgba(198, 237, 255, 0.98),
    rgba(138, 218, 255, 0.94)
  );
  color: rgba(6, 52, 93, 0.98);
  box-shadow: 0 12px 26px rgba(53, 171, 255, 0.24);
}
.league-you-now-shift[data-move="up"] {
  border-color: rgba(88, 204, 2, 0.4);
  background: rgba(88, 204, 2, 0.16);
  color: rgba(22, 84, 0, 0.96);
}
.league-you-now-shift[data-move="down"] {
  border-color: rgba(255, 120, 120, 0.36);
  background: rgba(255, 120, 120, 0.14);
  color: rgba(142, 30, 46, 0.95);
}
.league-you-now.is-top3-surge {
  animation: top3SurgeNow 760ms cubic-bezier(0.2, 0.9, 0.2, 1);
  border-color: var(--league-accent-strong, rgba(255, 194, 64, 0.42));
  box-shadow: 0 24px 56px rgba(255, 194, 64, 0.24);
}
.league-you-now.is-top3-surge .league-you-now-shift {
  border-color: rgba(255, 194, 64, 0.48);
  background: rgba(255, 194, 64, 0.22);
  color: rgba(120, 78, 8, 0.98);
}
@keyframes top3SurgeNow {
  0% {
    transform: translateY(0) scale(1);
  }
  35% {
    transform: translateY(-2px) scale(1.01);
  }
  100% {
    transform: translateY(0) scale(1);
  }
}

.rating-subtitle--nearby {
  margin-top: 0;
}

.leaderboard-controls {
  position: relative;
  display: grid;
  gap: 10px;
  margin: 12px 0 10px;
  padding: 12px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 16px 44px rgba(0, 0, 0, 0.16);
  backdrop-filter: blur(8px);
}

.leaderboard-controls-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.lb-seg {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.lb-seg.lb-seg--2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.lb-seg-btn {
  appearance: none;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(20, 22, 28, 0.55);
  color: rgba(255, 255, 255, 0.88);
  border-radius: 14px;
  padding: 10px 10px;
  font-weight: 850;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition:
    transform 0.16s ease,
    background 0.16s ease,
    box-shadow 0.16s ease,
    border-color 0.16s ease;
}

.lb-seg-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 16px 30px rgba(0, 0, 0, 0.22);
}

.lb-seg-btn.is-active {
  background: linear-gradient(
    135deg,
    rgba(0, 210, 255, 0.2),
    rgba(127, 90, 255, 0.18)
  );
  border-color: rgba(124, 92, 255, 0.46);
  color: rgba(255, 255, 255, 0.96);
  box-shadow: 0 18px 38px rgba(127, 90, 255, 0.14);
}

.lb-seg-btn:focus {
  outline: none;
  box-shadow: 0 0 0 4px rgba(124, 92, 255, 0.18);
}

.leaderboard--nearby .leaderboard-row {
  padding: 10px 12px;
}

@media (max-width: 520px) {
  .leaderboard-controls {
    padding: 10px;
  }
  .lb-seg {
    gap: 6px;
  }
  .lb-seg-btn {
    padding: 10px 8px;
    font-size: 13px;
  }
  .leaderboard-card::after {
    top: 10px;
    left: 10px;
  }
  .leaderboard-push-fab {
    top: 9px;
    left: 9px;
  }
  #leaderboard-top-card > .leaderboard-top-switch {
    top: 8px;
    right: 8px;
  }
  #best-employee-photo {
    width: 102px;
    height: 102px;
    border-radius: 24px;
  }
  .leaderboard--nearby .leaderboard-row {
    padding: 10px 10px;
  }
  .leaderboard--nearby .leaderboard-row strong {
    font-size: 13px;
  }
  .leaderboard--nearby .leaderboard-row span {
    font-size: 12px;
  }
}

/* Мобильные правки для игровых панелей */
@media (max-width: 640px) {
  body.game-mode #game-overlay .game-panel .game-screen {
    width: 100%;
    height: 100%;
    padding: 0;
    border-radius: 0;
    box-sizing: border-box;
  }
  body.game-mode #game-overlay .game-panel .game-body {
    overflow: auto;
    max-height: none;
  }
  #quiz-img {
    max-width: 100%;
    height: auto;
  }
  .game-actions,
  #quiz-actions,
  #quiz-result-actions {
    position: sticky;
    bottom: 0;
    padding-top: 10px;
    padding-bottom: env(safe-area-inset-bottom);
    background: linear-gradient(
      180deg,
      rgba(255, 255, 255, 0) 0%,
      rgba(255, 255, 255, 0.85) 35%,
      rgba(255, 255, 255, 0.96) 100%
    );
  }
  .quiz-question-text {
    font-size: 1.05rem;
    line-height: 1.3;
  }
}

@media (max-width: 640px) and (prefers-color-scheme: dark) {
  .game-actions,
  #quiz-actions,
  #quiz-result-actions {
    background: linear-gradient(
      180deg,
      rgba(18, 19, 28, 0) 0%,
      rgba(18, 19, 28, 0.72) 35%,
      rgba(10, 12, 20, 0.9) 100%
    );
  }
}
/* Красная точка уведомления */
.profile-badge {
  position: absolute;
  top: -2px;
  right: -2px;
  width: 10px;
  height: 10px;
  background-color: var(--wrong-red);
  border-radius: 50%;
  border: 2px solid #1a1a25;
}

/* Убираем старую круглую кнопку, если стили остались */
.achievements-btn {
  /* Оставляем стили только для кнопки установки PWA */
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: var(--accent-yellow);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 18px;
  cursor: pointer;
  backdrop-filter: blur(5px);
}

/* ОБНОВИ ЭТОТ СТИЛЬ */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8); /* Чуть темнее фон */
  z-index: var(--z-modal-overlay); /* Самый высокий приоритет */
  opacity: 0;
  visibility: hidden;
  transition: 0.3s;
  display: flex;
  align-items: flex-end;
  pointer-events: none;
  backdrop-filter: blur(8px);
}

.modal-overlay.active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.modal-overlay[aria-hidden="true"] {
  pointer-events: none !important;
}

#product-modal.is-from-oracle {
  background: rgba(0, 0, 0, 0.86);
}
#product-modal.is-from-oracle .modal-content {
  transform: translateY(100%) scale(0.985);
  will-change: transform;
}
#product-modal.is-from-oracle.active .modal-content {
  transform: translateY(0) scale(1);
}

#product-modal {
  align-items: flex-start;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
  padding-top: 20px;
  padding-bottom: 20px;
}

#product-modal .modal-content {
  display: block;
  height: auto;
  max-height: none;
  min-height: 0;
  overflow: visible;
  border-radius: var(--radius-xl);
}

#product-modal.scroll-ready .modal-content {
  transform: none !important;
  transition: none !important;
  will-change: auto;
}

#product-modal .modal-body {
  overflow: visible;
  touch-action: auto;
}

@media (max-width: 767px) {
  #product-modal {
    padding-top: 8px;
    padding-bottom: max(8px, env(safe-area-inset-bottom, 0px));
  }

  #product-modal .modal-content {
    height: auto;
    max-height: none;
    min-height: min(93vh, 93dvh);
  }
}

/* Тёмная тема только для "Мой прогресс" (не ломает карточку товара) */
#achievements-modal .modal-content {
  background:
    radial-gradient(
      circle at 20% 0%,
      rgba(255, 255, 255, 0.12),
      transparent 40%
    ),
    linear-gradient(180deg, rgba(12, 16, 30, 0.98), rgba(7, 10, 20, 0.98));
  color: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.12);
  max-width: 860px;
  height: min(92vh, 920px);
  height: min(92dvh, 920px);
  max-height: 92vh;
  max-height: 92dvh;
  border-radius: 28px 28px 0 0;
}

#achievements-modal .modal-content::before {
  background: rgba(255, 255, 255, 0.22);
}

#achievements-modal .modal-body {
  padding: 12px 16px 18px;
}

#achievements-modal .modal-h2 {
  color: #fff;
}

#achievements-modal .info-label {
  color: rgba(255, 255, 255, 0.7);
}

#achievements-modal .info-text,
#achievements-modal .fact-full-content {
  color: rgba(255, 255, 255, 0.92);
}

#achievements-modal #cert-section hr {
  border-top-color: rgba(255, 255, 255, 0.12);
}

#achievements-modal .close-modal {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.18);
  top: calc(12px + env(safe-area-inset-top));
  right: calc(12px + env(safe-area-inset-right));
}

#achievements-modal .close-modal-bottom-btn {
  background: linear-gradient(
    135deg,
    rgba(0, 210, 255, 0.18),
    rgba(127, 90, 255, 0.18)
  );
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(10px);
}

#achievements-modal .close-modal-bottom-btn:active {
  background: linear-gradient(
    135deg,
    rgba(0, 210, 255, 0.14),
    rgba(127, 90, 255, 0.14)
  );
}

#achievements-modal.subwindow-open.active .modal-content {
  transform: translateY(0) scale(0.985);
  filter: saturate(0.9) brightness(0.92);
  overflow: hidden;
}

#achievements-modal.profile-settings-open.active .modal-content {
  overflow: visible;
}

@media (min-width: 768px) {
  #achievements-modal .modal-content {
    height: auto;
    max-height: 88vh;
    border-radius: 26px;
  }
}

@media (max-width: 767px) {
  #achievements-modal.profile-settings-open.active .modal-content {
    transform: translateY(0) scale(1);
    filter: none;
  }
}

/* === ИСПРАВЛЕНИЕ КЛИКАБЕЛЬНОСТИ === */
header {
  position: relative;
  z-index: 500 !important; /* Поднимаем шапку выше контента */
}

.profile-btn {
  pointer-events: auto !important; /* Разрешаем клики принудительно */
  cursor: pointer;
  z-index: 501; /* Кнопка еще выше */
}

/* Убираем блокировку от загрузчика, если он завис прозрачным */
#loader-wrapper {
  pointer-events: auto;
}

#loader-wrapper.hidden {
  pointer-events: none;
}

#sticky-nav-wrapper {
  z-index: 490;
}

/* Шапка + табы внутри "Мой прогресс" */
#achievements-modal .progress-modal-head {
  position: sticky;
  top: 0;
  z-index: 40;
  margin: -12px -16px 14px;
  padding: calc(12px + env(safe-area-inset-top)) 16px 12px;
  background: linear-gradient(
    180deg,
    rgba(12, 16, 30, 0.98),
    rgba(12, 16, 30, 0.72),
    rgba(12, 16, 30, 0)
  );
  box-shadow: 0 22px 50px rgba(0, 0, 0, 0.22);
  backdrop-filter: blur(14px);
}

#achievements-modal .progress-modal-head .modal-title-row.centered {
  margin-bottom: 10px;
}

#achievements-modal .profile-hub-nav {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  position: relative;
  isolation: isolate;
  --hub-columns: 5;
  --hub-gap: 8px;
  --hub-active-index: 0;
  --hub-track-w: calc(
    (100% - ((var(--hub-columns) - 1) * var(--hub-gap))) / var(--hub-columns)
  );
}

#achievements-modal .profile-hub-nav::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: var(--hub-track-w);
  height: 100%;
  border-radius: 14px;
  background: radial-gradient(
    circle at 50% 0%,
    rgb(var(--profile-accent-rgb, 29 161 242) / 0.28),
    rgba(255, 255, 255, 0)
  );
  transform: translateX(
    calc(var(--hub-active-index) * (var(--hub-track-w) + var(--hub-gap)))
  );
  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
  z-index: 0;
}

#achievements-modal .profile-hub-btn {
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: linear-gradient(
    140deg,
    rgba(255, 255, 255, 0.07),
    rgba(255, 255, 255, 0.02)
  );
  color: rgba(224, 236, 255, 0.92);
  border-radius: 14px;
  min-height: 52px;
  padding: 8px 8px 7px;
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 4px;
  cursor: pointer;
  transition:
    transform 0.16s ease,
    border-color 0.16s ease,
    background 0.16s ease,
    box-shadow 0.16s ease;
  position: relative;
  overflow: hidden;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 1;
}

#achievements-modal .profile-hub-btn-icon {
  font-size: 17px;
  line-height: 1;
}

#achievements-modal .profile-hub-btn-label {
  font-size: 11px;
  font-weight: 850;
  letter-spacing: 0.01em;
  line-height: 1;
  white-space: nowrap;
}

#achievements-modal .profile-hub-btn:hover {
  border-color: rgba(255, 255, 255, 0.24);
}

#achievements-modal .profile-hub-btn:active {
  transform: scale(0.99);
}

#achievements-modal .profile-hub-btn.is-active {
  background: linear-gradient(
    135deg,
    rgb(var(--profile-accent-rgb, 29 161 242) / 0.38),
    rgba(0, 210, 255, 0.18)
  );
  border-color: rgb(var(--profile-accent-rgb, 29 161 242) / 0.72);
  color: #fff;
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.3);
  animation: hubPulse 3.4s ease-in-out infinite;
}

#achievements-modal .profile-hub-btn--settings {
  background: linear-gradient(
    145deg,
    rgba(255, 255, 255, 0.13),
    rgba(255, 255, 255, 0.03)
  );
}

#achievements-modal .profile-hub-btn::after {
  content: "";
  position: absolute;
  inset: -35% auto -35% -65%;
  width: 44%;
  transform: rotate(16deg);
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0),
    rgba(255, 255, 255, 0.34),
    rgba(255, 255, 255, 0)
  );
  opacity: 0;
  pointer-events: none;
}

#achievements-modal .profile-hub-btn.is-active::after {
  opacity: 0.9;
  animation: hubSheen 2.8s cubic-bezier(0.16, 1, 0.3, 1) infinite;
}

#achievements-modal .profile-hub-btn:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 3px rgb(var(--profile-accent-rgb, 29 161 242) / 0.36),
    0 14px 30px rgba(0, 0, 0, 0.3);
}

@keyframes hubSheen {
  0% {
    transform: translateX(0) rotate(16deg);
  }
  100% {
    transform: translateX(540%) rotate(16deg);
  }
}

@keyframes hubPulse {
  0%,
  100% {
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.3);
  }
  50% {
    box-shadow:
      0 16px 36px rgba(0, 0, 0, 0.38),
      0 0 0 1px rgb(var(--profile-accent-rgb, 29 161 242) / 0.3) inset;
  }
}

@keyframes profileHeroAvatarPulse {
  0%,
  80%,
  100% {
    box-shadow:
      0 20px 38px rgba(0, 0, 0, 0.42),
      0 0 0 1px rgba(255, 255, 255, 0.09) inset,
      0 0 36px rgba(126, 227, 255, 0.26);
    filter: brightness(1);
  }
  88% {
    box-shadow:
      0 22px 42px rgba(0, 0, 0, 0.48),
      0 0 0 1px rgba(255, 255, 255, 0.12) inset,
      0 0 56px rgba(126, 227, 255, 0.46),
      0 0 0 8px rgba(126, 227, 255, 0.14);
    filter: brightness(1.07);
  }
}

@keyframes profileHeroKpiPulse {
  0%,
  82%,
  100% {
    transform: translateY(0) scale(1);
    box-shadow: none;
  }
  89% {
    transform: translateY(-1px) scale(1.015);
    box-shadow:
      0 10px 22px rgba(97, 198, 255, 0.3),
      0 0 0 1px rgba(163, 231, 255, 0.24) inset;
  }
}

#achievements-modal .profile-main-grid {
  grid-template-columns: 1fr !important;
}

#achievements-modal.profile-view-profile .profile-main-right {
  display: none !important;
}

#achievements-modal.profile-view-progress .profile-main-left {
  display: none !important;
}

#achievements-modal.profile-view-progress .profile-main-right {
  display: block !important;
}

#achievements-modal .profile-main-left,
#achievements-modal .profile-main-right {
  will-change: transform, opacity, filter;
}

#achievements-modal .hub-pane-in {
  animation: hubPaneIn 0.34s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes hubPaneIn {
  0% {
    opacity: 0;
    transform: translateY(10px) scale(0.985);
    filter: saturate(0.9);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: saturate(1);
  }
}

#achievements-modal .profile-quick-stats {
  display: none !important;
}

#achievements-modal .profile-card {
  padding: 18px 13px 12px;
  border-radius: 24px;
  background:
    radial-gradient(
      130% 120% at 50% -20%,
      rgba(94, 215, 255, 0.22),
      rgba(255, 255, 255, 0) 55%
    ),
    linear-gradient(168deg, rgba(9, 18, 40, 0.95), rgba(21, 26, 46, 0.92));
  border-color: rgba(138, 210, 255, 0.28);
  box-shadow: 0 26px 54px rgba(0, 0, 0, 0.52);
}

#achievements-modal .profile-card::before {
  background:
    radial-gradient(
      circle at 10% 0%,
      rgba(255, 255, 255, 0.26),
      rgba(255, 255, 255, 0) 42%
    ),
    radial-gradient(
      circle at 90% 0%,
      rgba(126, 227, 255, 0.26),
      rgba(255, 255, 255, 0) 34%
    );
}

#achievements-modal .profile-card-main {
  gap: 10px;
}

#achievements-modal .profile-card-avatar .profile-photo-frame {
  width: 138px;
  height: 138px;
  box-shadow:
    0 20px 38px rgba(0, 0, 0, 0.42),
    0 0 0 1px rgba(255, 255, 255, 0.09) inset,
    0 0 36px rgba(126, 227, 255, 0.26);
  animation: profileHeroAvatarPulse 11.4s ease-in-out infinite;
  will-change: box-shadow, filter;
}

#achievements-modal .profile-card-info {
  width: 100%;
}

#achievements-modal .profile-hero-kicker {
  padding: 5px 12px;
  border-color: rgba(126, 227, 255, 0.5);
  background: rgba(126, 227, 255, 0.16);
  margin: 0 auto;
  justify-content: center;
  text-align: center;
}

#achievements-modal .profile-card-name {
  font-size: clamp(1.8rem, 8.8vw, 2.2rem);
  line-height: 1.04;
  text-shadow:
    0 10px 28px rgba(0, 0, 0, 0.5),
    0 0 20px rgba(126, 227, 255, 0.28);
}

#achievements-modal .profile-card-role {
  font-size: 0.96rem;
  letter-spacing: 0.08em;
  color: rgba(220, 238, 255, 0.9);
  margin-bottom: 7px;
}

#achievements-modal .profile-card-meta {
  font-size: 0.94rem;
  line-height: 1.3;
  color: rgba(233, 244, 255, 0.9);
  margin-bottom: 8px;
}

#achievements-modal .profile-hero-headline {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 30px;
  margin-bottom: 6px;
}

#achievements-modal .profile-share-card-btn {
  width: 36px;
  height: 36px;
  border-radius: 11px;
  position: absolute;
  right: 0;
  top: -14px;
  z-index: 2;
}

#achievements-modal .profile-hero-day-kpi {
  margin-bottom: 8px;
  border-color: rgba(153, 228, 255, 0.46);
  background: linear-gradient(
    135deg,
    rgba(108, 220, 255, 0.28),
    rgba(150, 167, 255, 0.2)
  );
  animation: profileHeroKpiPulse 10.8s ease-in-out infinite;
  transform-origin: 50% 50%;
  will-change: transform, box-shadow;
}

#achievements-modal .profile-weekly-goals,
#achievements-modal .profile-weekly-chart {
  border-color: rgba(255, 255, 255, 0.22);
  background: linear-gradient(
    150deg,
    rgba(255, 255, 255, 0.15),
    rgba(255, 255, 255, 0.06)
  );
}

#achievements-modal .profile-weekly-chart-svg {
  height: 74px;
}

#achievements-modal .profile-hero-timeline-wrap {
  border-color: rgba(255, 255, 255, 0.2);
  background:
    radial-gradient(
      120% 145% at 100% 0%,
      rgba(118, 227, 255, 0.2),
      rgba(255, 255, 255, 0) 56%
    ),
    linear-gradient(
      155deg,
      rgba(255, 255, 255, 0.14),
      rgba(255, 255, 255, 0.05)
    );
}

#achievements-modal .profile-hero-ach-chip {
  border-color: rgba(255, 255, 255, 0.24);
  background: linear-gradient(
    145deg,
    rgba(255, 255, 255, 0.18),
    rgba(255, 255, 255, 0.07)
  );
}

#achievements-modal .profile-hero-ach-chip.is-featured {
  border-color: rgba(171, 234, 255, 0.54);
  background:
    radial-gradient(
      105% 120% at 100% 0%,
      rgba(118, 229, 255, 0.24),
      rgba(255, 255, 255, 0) 58%
    ),
    linear-gradient(145deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0.1));
  box-shadow:
    0 16px 30px rgba(0, 0, 0, 0.28),
    0 0 0 1px rgba(171, 234, 255, 0.18) inset;
}

#achievements-modal .profile-hero-ach-chip.is-compact {
  border-color: rgba(255, 255, 255, 0.2);
  background: linear-gradient(
    145deg,
    rgba(255, 255, 255, 0.14),
    rgba(255, 255, 255, 0.06)
  );
}

#achievements-modal .profile-hero-timeline-title {
  color: rgba(214, 234, 255, 0.84);
}

#achievements-modal .profile-showcase-grid {
  margin-top: 8px;
  gap: 8px;
}

#achievements-modal .profile-showcase-item {
  min-height: 70px;
  border-radius: 15px;
  background: linear-gradient(
    150deg,
    rgba(255, 255, 255, 0.16),
    rgba(255, 255, 255, 0.06)
  );
  border-color: rgba(255, 255, 255, 0.24);
  box-shadow:
    0 14px 28px rgba(0, 0, 0, 0.28),
    0 0 0 1px rgba(255, 255, 255, 0.06) inset;
}

#achievements-modal .profile-showcase-item::after {
  background: rgba(9, 20, 40, 0.46);
  border-color: rgba(255, 255, 255, 0.24);
}

#achievements-modal .profile-showcase-k {
  color: rgba(203, 223, 247, 0.82);
}

#achievements-modal .profile-showcase-v {
  font-size: 1.08rem;
  line-height: 1.14;
}

#achievements-modal .profile-card-hint {
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  text-align: center;
  color: rgba(206, 226, 248, 0.86);
}

#achievements-modal .profile-tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  width: 100%;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  padding: 6px;
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.3);
}

#achievements-modal .profile-tab-btn {
  border: 1px solid transparent;
  background: transparent;
  color: rgba(219, 232, 255, 0.88);
  padding: 10px 10px;
  min-height: 44px;
  border-radius: 12px;
  font-weight: 900;
  cursor: pointer;
  transition:
    background 0.16s ease,
    transform 0.16s ease,
    border-color 0.16s ease;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

#achievements-modal .profile-tab-btn:active {
  transform: scale(0.99);
}

#achievements-modal .profile-tab-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 4px rgba(124, 92, 255, 0.18);
}

#achievements-modal .profile-tab-btn.active {
  background: linear-gradient(
    135deg,
    rgb(var(--profile-accent-rgb, 29 161 242) / 0.26),
    rgba(127, 90, 255, 0.22)
  );
  border-color: rgba(255, 255, 255, 0.12);
  color: #fff;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.22);
}

.profile-tab-pane {
  display: none;
}
.profile-tab-pane.active {
  display: block;
}

@media (max-width: 640px) {
  #achievements-modal .modal-body {
    padding: 10px 12px 16px;
  }
  #achievements-modal .progress-modal-head {
    margin: -10px -12px 12px;
    padding: calc(10px + env(safe-area-inset-top)) 12px 10px;
  }
  #achievements-modal .profile-hub-nav {
    gap: 7px;
    --hub-gap: 7px;
  }
  #achievements-modal .profile-hub-btn {
    border-radius: 12px;
    min-height: 52px;
    padding: 8px 5px 7px;
    gap: 5px;
  }
  #achievements-modal .profile-hub-btn-icon {
    font-size: 15px;
  }
  #achievements-modal .profile-hub-btn-label {
    font-size: 10px;
  }
  #achievements-modal .progress-hub {
    padding: 14px;
    border-radius: 16px;
  }
  #achievements-modal .progress-hub-stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
  }
  #achievements-modal .progress-hub-stat {
    padding: 9px 10px;
    border-radius: 13px;
  }
  #achievements-modal .progress-hub-v {
    font-size: 17px;
  }
  #achievements-modal .profile-hub-btn-label {
    white-space: normal;
    line-height: 1.08;
    letter-spacing: 0.01em;
    text-align: center;
  }
  #achievements-modal .profile-share-card-btn {
    top: -12px;
    right: 2px;
  }
  #achievements-modal .profile-weekly-chart-svg {
    height: 66px;
  }
  #achievements-modal .profile-weekly-goals-title,
  #achievements-modal .profile-weekly-goal-name {
    letter-spacing: 0.12em;
  }
}

@media (max-width: 360px) {
  #achievements-modal .profile-showcase-grid {
    grid-template-columns: 1fr;
  }
  #achievements-modal .profile-hub-btn {
    min-height: 54px;
  }
  #achievements-modal .profile-hub-btn-icon {
    font-size: 14px;
  }
  #achievements-modal .profile-hub-btn-label {
    font-size: 9.2px;
  }
}

#progress-dashboard,
#progress-leaders,
#progress-achievements,
#cert-section {
  scroll-margin-top: 92px;
}

#achievements-modal .counter-pop {
  animation: counterPop 0.42s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes counterPop {
  0% {
    transform: scale(1);
    filter: brightness(1);
  }
  45% {
    transform: scale(1.08);
    filter: brightness(1.2);
    text-shadow: 0 0 12px rgb(var(--profile-accent-rgb, 29 161 242) / 0.38);
  }
  100% {
    transform: scale(1);
    filter: brightness(1);
    text-shadow: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  #achievements-modal .profile-hub-btn,
  #achievements-modal .profile-hub-btn::after,
  #achievements-modal .hub-pane-in,
  #achievements-modal .counter-pop,
  #achievements-modal .profile-card-avatar .profile-photo-frame,
  #achievements-modal .profile-hero-day-kpi {
    animation: none !important;
    transition: none !important;
  }
}

/* Хаб на входе в "Мой прогресс" */
.progress-hub {
  margin: 6px 0 14px;
  padding: 16px;
  border-radius: 18px;
  background:
    radial-gradient(
      circle at 20% 0%,
      rgb(var(--profile-accent-rgb, 29 161 242) / 0.2),
      transparent 42%
    ),
    linear-gradient(180deg, rgba(12, 16, 30, 0.92), rgba(9, 12, 24, 0.9));
  border: 1px solid var(--ui-border);
  box-shadow: var(--ui-shadow-lg);
  color: var(--ui-text);
}

.progress-hub-title {
  font-weight: 950;
  letter-spacing: 0.2px;
  color: #fff;
}

.progress-hub-sub {
  margin-top: 4px;
  font-size: 0.9rem;
  color: rgba(219, 232, 255, 0.85);
}

.progress-hub-stats {
  margin-top: 12px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.progress-hub-stat {
  border-radius: 14px;
  padding: 10px 12px;
  background: var(--ui-surface);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.progress-hub-k {
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
}

.progress-hub-v {
  margin-top: 6px;
  font-size: 18px;
  font-weight: 950;
  color: #fff;
}

.progress-hub-actions {
  margin-top: 12px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.progress-hub-btn {
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: linear-gradient(
    135deg,
    rgb(var(--profile-accent-rgb, 29 161 242) / 0.28),
    rgba(255, 255, 255, 0.06)
  );
  color: #fff;
  font-weight: 850;
  cursor: pointer;
}

.progress-hub-btn.secondary {
  background: var(--ui-surface-2);
}

.progress-hub-btn:active {
  transform: scale(0.99);
}

.progress-hub-last {
  margin-top: 10px;
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.8);
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

@media (max-width: 520px) {
  .progress-hub-actions {
    grid-template-columns: 1fr;
  }
}
/* ===== LUNA Splash / Loader Overlay ===== */
.luna-splash {
  --luna-tint-rgb: 140, 120, 255;
  --luna-tint-soft: rgba(var(--luna-tint-rgb), 0.25);
  --luna-tint-strong: rgba(var(--luna-tint-rgb), 0.45);
  --luna-tint-stronger: rgba(var(--luna-tint-rgb), 0.9);
  --luna-tint-glow: rgba(var(--luna-tint-rgb), 0.7);
  --luna-tint-ui: rgba(var(--luna-tint-rgb), 0.25);
  --luna-tint-ui-hover: rgba(var(--luna-tint-rgb), 0.33);
  position: fixed;
  inset: 0;
  z-index: 999999;
  display: grid;
  place-items: center;
  background: radial-gradient(
    1200px 800px at 50% 35%,
    rgba(120, 90, 255, 0.25),
    rgba(10, 14, 30, 0.95) 55%,
    rgba(6, 8, 18, 0.98)
  );
  overflow: hidden;
  opacity: 1;
  pointer-events: auto;
  transition:
    opacity 0.45s ease,
    transform 0.45s ease;
  transform: translateZ(0);
}

.luna-splash.is-hidden {
  opacity: 0;
  pointer-events: none;
  transform: scale(1.01);
}

.luna-splash__stars {
  position: absolute;
  inset: -20%;
  background:
    radial-gradient(
      2px 2px at 10% 20%,
      rgba(255, 255, 255, 0.8) 40%,
      transparent 41%
    ),
    radial-gradient(
      1px 1px at 30% 70%,
      rgba(255, 255, 255, 0.7) 40%,
      transparent 41%
    ),
    radial-gradient(
      2px 2px at 60% 35%,
      rgba(255, 255, 255, 0.75) 40%,
      transparent 41%
    ),
    radial-gradient(
      1px 1px at 85% 55%,
      rgba(255, 255, 255, 0.6) 40%,
      transparent 41%
    ),
    radial-gradient(
      2px 2px at 75% 80%,
      rgba(255, 255, 255, 0.75) 40%,
      transparent 41%
    ),
    radial-gradient(
      1px 1px at 50% 15%,
      rgba(255, 255, 255, 0.6) 40%,
      transparent 41%
    );
  filter: drop-shadow(0 0 10px rgba(140, 120, 255, 0.35));
  animation: lunaStars 10s linear infinite;
  opacity: 0.85;
}

@keyframes lunaStars {
  from {
    transform: translate3d(0, 0, 0) rotate(0deg);
  }
  to {
    transform: translate3d(0, 0, 0) rotate(360deg);
  }
}

.luna-splash__content {
  position: relative;
  width: min(520px, 92vw);
  padding: 28px 24px 22px;
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(10px);
  text-align: center;
}

.luna-splash__logoWrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  margin-bottom: 16px;
}

.luna-splash__ring {
  width: 160px;
  height: 160px;
  border-radius: 999px;
  border: 2px solid rgba(255, 255, 255, 0.18);
  box-shadow:
    inset 0 0 30px var(--luna-tint-soft),
    0 0 40px var(--luna-tint-soft);
  position: relative;
  animation: lunaSpin 1.3s linear infinite;
}

.luna-splash__ring::before {
  content: "";
  position: absolute;
  inset: 10px;
  border-radius: 999px;
  border: 2px dashed rgba(255, 255, 255, 0.2);
  opacity: 0.9;
}

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

.luna-splash__logo {
  font-size: 40px;
  font-weight: 800;
  letter-spacing: 6px;
  color: rgba(255, 255, 255, 0.92);
  text-shadow: 0 0 18px var(--luna-tint-strong);
  margin-top: -128px;
}

.luna-splash__subtitle {
  font-size: 14px;
  letter-spacing: 2px;
  opacity: 0.8;
}

.luna-splash__status {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 18px 0 14px;
  font-size: 14px;
  opacity: 0.9;
}

.luna-splash__dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: var(--luna-tint-stronger);
  box-shadow: 0 0 18px var(--luna-tint-glow);
  animation: lunaPulse 0.9s ease-in-out infinite;
}

@keyframes lunaPulse {
  0%,
  100% {
    transform: scale(1);
    opacity: 0.8;
  }
  50% {
    transform: scale(1.35);
    opacity: 1;
  }
}

.luna-splash__btn {
  width: 100%;
  padding: 14px 14px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: var(--luna-tint-ui);
  color: rgba(255, 255, 255, 0.92);
  font-weight: 700;
  cursor: pointer;
  transition:
    transform 0.12s ease,
    background 0.2s ease,
    opacity 0.2s ease;
}

.luna-splash__btn:hover {
  transform: translateY(-1px);
  background: var(--luna-tint-ui-hover);
}
.luna-splash__btn:active {
  transform: translateY(0);
}
.luna-splash__btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.luna-splash__hint {
  margin-top: 10px;
  font-size: 12px;
  opacity: 0.7;
}

.profile-main-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin-top: 10px;
}
.profile-main-left,
.profile-main-right {
  min-width: 0;
}
@media (min-width: 960px) {
  .profile-main-grid {
    grid-template-columns: 0.95fr 1.3fr;
    align-items: start;
  }
}

/* ============================================================
   LUNA Single Portal Mode
   ============================================================ */

.access-mode-chip {
  display: none;
}

body.single-portal-mode .access-mode-chip,
body.single-portal-mode #qr-share-btn,
body.single-portal-mode .home-view-toggle,
body.single-portal-mode .tag-toggle-btn {
  display: none !important;
}

body.single-portal-mode .quiz-view-tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: 760px;
}

body.single-portal-mode .quiz-view-tab {
  flex: 0 0 auto;
}

/* Stoplist modal */
.stoplist-modal-content .modal-body {
  padding-bottom: 14px;
}
.stoplist-controls {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 10px;
}
.stoplist-segment {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
}
.stoplist-seg-btn {
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.92);
  border-radius: 14px;
  padding: 10px 10px;
  font-weight: 900;
  font-size: 13px;
  cursor: pointer;
}
.stoplist-seg-btn.is-active {
  border-color: rgba(255, 59, 48, 0.3);
  background: rgba(255, 59, 48, 0.12);
}
.stoplist-search input {
  width: 100%;
  padding: 12px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.95);
  font-weight: 800;
}
.stoplist-search input::placeholder {
  color: rgba(255, 255, 255, 0.55);
}
.stoplist-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.stoplist-chip {
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.88);
  border-radius: 999px;
  padding: 8px 10px;
  font-weight: 900;
  font-size: 12px;
  cursor: pointer;
}
.stoplist-chip.is-active {
  border-color: rgba(110, 210, 255, 0.4);
  background: rgba(110, 210, 255, 0.12);
}
.stoplist-chip-count {
  opacity: 0.75;
  font-weight: 900;
}
.stoplist-only {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: rgba(255, 255, 255, 0.82);
  font-weight: 900;
  font-size: 13px;
}
.stoplist-only input {
  width: 18px;
  height: 18px;
  accent-color: rgba(255, 59, 48, 0.92);
}
.stoplist-list {
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 56vh;
  overflow: auto;
  padding-right: 2px;
}
.stoplist-actions {
  display: flex;
  gap: 10px;
  margin-top: 10px;
}
.stoplist-actions > * {
  flex: 1 1 0;
}
.stoplist-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.06);
  border-radius: 16px;
  padding: 10px 12px;
}
.stoplist-row.is-stopped {
  border-color: rgba(255, 59, 48, 0.28);
  box-shadow: 0 0 0 1px rgba(255, 59, 48, 0.1);
}
.stoplist-row-main {
  min-width: 0;
}
.stoplist-row-title {
  font-weight: 900;
  color: rgba(255, 255, 255, 0.95);
  font-size: 14px;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.stoplist-row-sub {
  margin-top: 2px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.7);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.stoplist-btn {
  flex-shrink: 0;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.92);
  padding: 10px 12px;
  border-radius: 14px;
  font-weight: 900;
  font-size: 12px;
  cursor: pointer;
}
.stoplist-btn.is-on {
  border-color: rgba(255, 59, 48, 0.28);
  background: rgba(255, 59, 48, 0.12);
}
.stoplist-error {
  margin-top: 10px;
  border: 1px solid rgba(255, 59, 48, 0.24);
  border-radius: 12px;
  background: rgba(255, 59, 48, 0.12);
  color: rgba(255, 205, 205, 0.96);
  font-weight: 800;
  font-size: 12px;
  padding: 9px 10px;
}

body:not([data-theme="dark"]) .stoplist-seg-btn,
body:not([data-theme="dark"]) .stoplist-search input,
body:not([data-theme="dark"]) .stoplist-chip,
body:not([data-theme="dark"]) .stoplist-row,
body:not([data-theme="dark"]) .stoplist-btn {
  border: 1px solid rgba(8, 18, 34, 0.12);
  background: rgba(8, 18, 34, 0.04);
  color: rgba(8, 18, 34, 0.92);
}
body:not([data-theme="dark"]) .stoplist-search input::placeholder {
  color: rgba(8, 18, 34, 0.45);
}
body:not([data-theme="dark"]) .stoplist-row-title {
  color: rgba(8, 18, 34, 0.92);
}
body:not([data-theme="dark"]) .stoplist-row-sub {
  color: rgba(8, 18, 34, 0.62);
}
body:not([data-theme="dark"]) .stoplist-only {
  color: rgba(8, 18, 34, 0.78);
}
body:not([data-theme="dark"]) .stoplist-btn.is-on {
  border-color: rgba(255, 59, 48, 0.2);
  background: rgba(255, 59, 48, 0.1);
}
body:not([data-theme="dark"]) .stoplist-error {
  border-color: rgba(190, 40, 30, 0.18);
  background: rgba(255, 59, 48, 0.1);
  color: rgba(120, 20, 12, 0.9);
}

.pro-only-content {
  max-width: 520px;
}

.qr-share-content {
  max-width: 620px;
}

.qr-share-btn {
  margin-left: 8px;
  height: 36px;
  padding: 0 12px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  background:
    radial-gradient(
      140% 180% at 18% 18%,
      rgba(255, 255, 255, 0.18),
      rgba(255, 255, 255, 0.06) 55%,
      rgba(0, 0, 0, 0.1) 100%
    ),
    linear-gradient(130deg, rgba(0, 210, 255, 0.18), rgba(127, 90, 255, 0.16));
  border: 1px solid rgba(0, 210, 255, 0.24);
  box-shadow:
    0 14px 34px rgba(15, 23, 42, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.5);
  color: rgba(255, 255, 255, 0.92);
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  backdrop-filter: blur(8px) saturate(1.2);
  -webkit-backdrop-filter: blur(8px) saturate(1.2);
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    border-color 0.18s ease,
    background 0.18s ease;
}

.lang-toggle {
  margin-left: 8px;
  height: 36px;
  padding: 3px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow:
    0 14px 34px rgba(15, 23, 42, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.4);
  backdrop-filter: blur(8px) saturate(1.2);
  -webkit-backdrop-filter: blur(8px) saturate(1.2);
}

.lang-btn {
  height: 30px;
  padding: 0 10px;
  border-radius: 999px;
  border: 0;
  background: transparent;
  color: rgba(255, 255, 255, 0.86);
  font-weight: 900;
  font-size: 12px;
  letter-spacing: 0.08em;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition:
    background 0.18s ease,
    color 0.18s ease,
    transform 0.18s ease;
}

.lang-btn[aria-pressed="true"] {
  background: linear-gradient(
    120deg,
    rgba(0, 210, 255, 0.92),
    rgba(127, 90, 255, 0.88)
  );
  color: #0b1021;
}

.lang-btn:active {
  transform: translateY(1px);
}

.lang-btn:focus-visible {
  outline: 3px solid rgba(0, 210, 255, 0.22);
  outline-offset: 3px;
}

.qr-lang-row {
  margin-top: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.qr-lang-label {
  font-weight: 800;
  font-size: 13px;
  color: rgba(8, 18, 34, 0.86);
}

.qr-lang-hint {
  margin-top: 6px;
  font-size: 12px;
  color: rgba(8, 18, 34, 0.62);
}

.qr-share-content .qr-lang-toggle {
  background: rgba(0, 0, 0, 0.06);
  border: 1px solid rgba(8, 18, 34, 0.1);
  box-shadow:
    0 10px 26px rgba(15, 23, 42, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.55);
}

.qr-share-content .qr-lang-toggle .lang-btn {
  color: rgba(8, 18, 34, 0.72);
}

@media (prefers-color-scheme: dark) {
  .qr-lang-label {
    color: rgba(255, 255, 255, 0.9);
  }
  .qr-lang-hint {
    color: rgba(255, 255, 255, 0.62);
  }
  .qr-share-content .qr-lang-toggle {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.14);
    box-shadow:
      0 16px 40px rgba(0, 0, 0, 0.35),
      inset 0 1px 0 rgba(255, 255, 255, 0.12);
  }
  .qr-share-content .qr-lang-toggle .lang-btn {
    color: rgba(255, 255, 255, 0.86);
  }
}

.qr-share-btn:hover {
  border-color: rgba(0, 210, 255, 0.34);
  box-shadow:
    0 18px 44px rgba(15, 23, 42, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.56);
  background:
    radial-gradient(
      140% 180% at 18% 18%,
      rgba(255, 255, 255, 0.22),
      rgba(255, 255, 255, 0.08) 55%,
      rgba(0, 210, 255, 0.06) 100%
    ),
    linear-gradient(130deg, rgba(0, 210, 255, 0.2), rgba(127, 90, 255, 0.18));
}

.qr-share-btn:active {
  transform: translateY(1px);
}

.qr-share-btn:focus-visible {
  outline: 3px solid rgba(0, 210, 255, 0.22);
  outline-offset: 3px;
}

.qr-share-btn-icon {
  font-size: 12px;
  line-height: 1;
  font-weight: 1000;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.qr-share-btn-label {
  font-size: 12px;
  line-height: 1;
  font-weight: 800;
  opacity: 0.86;
}

.support-btn {
  min-width: 124px;
  height: 38px;
  padding: 0 12px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  text-decoration: none;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(
      120% 160% at 12% 10%,
      rgba(255, 255, 255, 0.24),
      rgba(255, 255, 255, 0.05) 58%,
      rgba(0, 0, 0, 0.1) 100%
    ),
    linear-gradient(136deg, rgba(31, 168, 227, 0.94), rgba(0, 210, 255, 0.86));
  border: 1px solid rgba(8, 126, 184, 0.44);
  box-shadow:
    0 14px 30px rgba(12, 42, 72, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.44);
  color: rgba(255, 255, 255, 0.92);
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  backdrop-filter: blur(8px) saturate(1.15);
  -webkit-backdrop-filter: blur(8px) saturate(1.15);
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    filter 0.18s ease,
    border-color 0.18s ease;
  will-change: transform, box-shadow, filter;
}

.support-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(
      180px 90px at 15% 12%,
      rgba(255, 255, 255, 0.22),
      transparent 66%
    ),
    radial-gradient(
      220px 120px at 100% 0%,
      rgba(16, 108, 160, 0.18),
      transparent 68%
    );
  opacity: 0.9;
  pointer-events: none;
  z-index: 0;
}
.support-btn::after {
  content: "";
  position: absolute;
  inset: -60% -40%;
  background: linear-gradient(
    105deg,
    rgba(255, 255, 255, 0) 40%,
    rgba(255, 255, 255, 0.28) 52%,
    rgba(255, 255, 255, 0) 64%
  );
  transform: translateX(-55%) rotate(-9deg);
  opacity: 0.14;
  pointer-events: none;
  z-index: 0;
  transition:
    opacity 220ms ease,
    transform 480ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform, opacity;
}
.support-btn > * {
  position: relative;
  z-index: 1;
}

.support-btn:hover {
  border-color: rgba(8, 126, 184, 0.56);
  box-shadow:
    0 18px 38px rgba(12, 42, 72, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.54);
  filter: brightness(1.04);
}
.support-btn:hover::after {
  opacity: 0.2;
  transform: translateX(8%) rotate(-9deg);
}

.support-btn:active {
  transform: translateY(1px) scale(0.995);
}

.support-btn:focus-visible {
  outline: 3px solid rgba(8, 126, 184, 0.3);
  outline-offset: 3px;
}

.support-btn-icon {
  width: 22px;
  height: 22px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  font-size: 9px;
  line-height: 1;
  font-weight: 900;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  background: rgba(10, 58, 92, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.26);
  position: relative;
  transition:
    transform 0.18s ease,
    filter 0.18s ease;
}

.support-btn-label {
  font-size: 11.5px;
  line-height: 1;
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: none;
  opacity: 0.92;
}

@media (prefers-reduced-motion: no-preference) {
  .support-btn::after {
    animation: supportShine 7.4s ease-in-out infinite;
  }
}
@keyframes supportShine {
  0%,
  72% {
    opacity: 0.04;
    transform: translateX(-55%) rotate(-9deg);
  }
  82% {
    opacity: 0.2;
  }
  100% {
    opacity: 0.06;
    transform: translateX(46%) rotate(-9deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .support-btn::after {
    animation: none !important;
  }
}

@media (max-width: 420px) {
  .qr-share-btn {
    padding: 0 10px;
  }
  .qr-share-btn-label {
    display: none;
  }
  .support-btn {
    min-width: 34px;
    width: 34px;
    padding: 0;
    gap: 0;
  }
  .support-btn-label {
    display: none;
  }
  .support-btn-icon {
    width: 17px;
    height: 17px;
    font-size: 7.5px;
  }
}

.qr-share-box {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 16px;
  align-items: center;
  margin-top: 14px;
}

.qr-share-qr {
  position: relative;
  width: 100%;
  max-width: 300px;
  aspect-ratio: 1 / 1;
  border-radius: 22px;
  padding: 18px;
  box-sizing: border-box;
  background: radial-gradient(
    120% 140% at 16% 10%,
    rgba(0, 210, 255, 0.22),
    rgba(255, 255, 255, 0.96) 58%,
    rgba(255, 255, 255, 0.96) 100%
  );
  border: 1px solid rgba(8, 18, 34, 0.1);
  box-shadow:
    0 16px 46px rgba(0, 0, 0, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.65);
}

.qr-share-qr::after {
  content: "";
  position: absolute;
  inset: 10px;
  border-radius: 18px;
  pointer-events: none;
  opacity: 0.95;
  background:
    /* top-left */
    linear-gradient(90deg, rgba(0, 210, 255, 0.62), rgba(127, 90, 255, 0)) 0 0 /
      34px 2px no-repeat,
    linear-gradient(180deg, rgba(0, 210, 255, 0.56), rgba(127, 90, 255, 0)) 0
      0 / 2px 34px no-repeat,
    /* top-right */
    linear-gradient(270deg, rgba(0, 210, 255, 0.62), rgba(127, 90, 255, 0)) 100%
      0 / 34px 2px no-repeat,
    linear-gradient(180deg, rgba(0, 210, 255, 0.56), rgba(127, 90, 255, 0)) 100%
      0 / 2px 34px no-repeat,
    /* bottom-left */
    linear-gradient(90deg, rgba(127, 90, 255, 0.56), rgba(0, 210, 255, 0)) 0
      100% / 34px 2px no-repeat,
    linear-gradient(0deg, rgba(127, 90, 255, 0.52), rgba(0, 210, 255, 0)) 0
      100% / 2px 34px no-repeat,
    /* bottom-right */
    linear-gradient(270deg, rgba(127, 90, 255, 0.56), rgba(0, 210, 255, 0)) 100%
      100% / 34px 2px no-repeat,
    linear-gradient(0deg, rgba(127, 90, 255, 0.52), rgba(0, 210, 255, 0)) 100%
      100% / 2px 34px no-repeat;
}

.qr-share-svg {
  width: 100%;
  height: 100%;
  border-radius: 16px;
  overflow: hidden;
  background: #ffffff;
  display: none;
  box-shadow:
    0 0 0 1px rgba(8, 18, 34, 0.1),
    0 14px 30px rgba(0, 0, 0, 0.14);
}

.qr-share-svg svg {
  width: 100%;
  height: 100%;
  display: block;
}

.qr-share-img {
  width: 100%;
  height: 100%;
  display: block;
  border-radius: 16px;
  object-fit: contain;
  background: #ffffff;
  border: 0;
  box-shadow:
    0 0 0 1px rgba(8, 18, 34, 0.1),
    0 14px 30px rgba(0, 0, 0, 0.14);
}

.qr-share-qr.has-svg .qr-share-svg {
  display: block;
}
.qr-share-qr.has-svg .qr-share-img {
  display: none;
}

.qr-share-link {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.qr-share-link .close-modal-bottom-btn {
  margin-top: 0;
  padding: 14px 16px;
  border-radius: 14px;
  font-size: 0.98rem;
}

.qr-share-link .close-modal-bottom-btn.is-ghost {
  background: rgba(0, 0, 0, 0.06);
  border: 1px solid rgba(8, 18, 34, 0.12);
  color: rgba(8, 18, 34, 0.86);
}

.qr-share-link .close-modal-bottom-btn.is-primary {
  background: linear-gradient(120deg, #00d2ff, #7f5aff);
  border: none;
  color: #0b1021;
}

.qr-share-link .close-modal-bottom-btn.is-disabled {
  opacity: 0.55;
  pointer-events: none;
}

@media (prefers-color-scheme: dark) {
  .qr-share-link .close-modal-bottom-btn {
    background-color: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.9);
  }
  .qr-share-link .close-modal-bottom-btn:active {
    background-color: rgba(255, 255, 255, 0.1);
  }
  .qr-share-link .close-modal-bottom-btn.is-ghost {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.9);
  }
  .qr-share-link .close-modal-bottom-btn.is-primary {
    color: #0b1021;
  }
}

.qr-share-url {
  width: 100%;
  padding: 12px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(0, 0, 0, 0.22);
  color: rgba(255, 255, 255, 0.92);
  font-size: 13px;
}

@media (max-width: 640px) {
  .qr-share-box {
    grid-template-columns: 1fr;
    justify-items: center;
  }
  .qr-share-link {
    width: 100%;
  }
}

/* ===== Visual Upgrade Pack (6/7/8/9/10/11/12) ===== */
.luna-empty-state {
  grid-column: 1/-1;
  display: grid;
  justify-items: center;
  gap: 9px;
  text-align: center;
  border-radius: 20px;
  border: 1px solid rgba(8, 18, 34, 0.12);
  background:
    radial-gradient(
      140% 120% at 0% 0%,
      rgba(0, 210, 255, 0.12),
      rgba(255, 255, 255, 0) 56%
    ),
    radial-gradient(
      120% 120% at 100% 100%,
      rgba(127, 90, 255, 0.12),
      rgba(255, 255, 255, 0) 58%
    ),
    rgba(255, 255, 255, 0.84);
  padding: 22px 16px 18px;
}
.luna-empty-icon {
  width: 52px;
  height: 52px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  font-size: 1.32rem;
  border: 1px solid rgba(8, 18, 34, 0.1);
  background: rgba(255, 255, 255, 0.84);
}
.luna-empty-title {
  font-size: 1rem;
  font-weight: 900;
  color: rgba(8, 18, 34, 0.92);
}
.luna-empty-sub {
  max-width: 520px;
  font-size: 0.86rem;
  color: rgba(8, 18, 34, 0.66);
}
.luna-empty-cta {
  margin-top: 3px;
  min-height: 38px;
  border-radius: 12px;
  padding: 0 14px;
  border: 1px solid rgba(8, 18, 34, 0.14);
  background: rgba(255, 255, 255, 0.84);
  color: rgba(8, 18, 34, 0.86);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
}
.luna-empty-cta:hover {
  transform: translateY(-1px);
}

.menu-grid.is-skeleton {
  align-items: stretch;
}
.grid-skeleton-card {
  border-radius: 24px;
  overflow: hidden;
  border: 1px solid rgba(8, 18, 34, 0.1);
  background: rgba(255, 255, 255, 0.8);
  box-shadow: 0 18px 34px rgba(15, 23, 42, 0.1);
}
.grid-skeleton-img {
  width: 100%;
  aspect-ratio: 16 / 11;
  background: linear-gradient(
    90deg,
    rgba(8, 18, 34, 0.08),
    rgba(8, 18, 34, 0.16),
    rgba(8, 18, 34, 0.08)
  );
  background-size: 200% 100%;
  animation: lunaSkeletonPulse 1.15s linear infinite;
}
.grid-skeleton-content {
  padding: 14px;
  display: grid;
  gap: 8px;
}
.grid-skeleton-line {
  height: 10px;
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    rgba(8, 18, 34, 0.08),
    rgba(8, 18, 34, 0.16),
    rgba(8, 18, 34, 0.08)
  );
  background-size: 200% 100%;
  animation: lunaSkeletonPulse 1.15s linear infinite;
}
.grid-skeleton-line.w-80 {
  width: 80%;
}
.grid-skeleton-line.w-55 {
  width: 55%;
}
.grid-skeleton-line.w-92 {
  width: 92%;
}
.grid-skeleton-line.w-70 {
  width: 70%;
}

.profile-extras--skeleton .profile-extras-card {
  pointer-events: none;
}
.profile-skeleton-line,
.profile-skeleton-meter,
.profile-skeleton-pill,
.profile-skeleton-stat {
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.1),
    rgba(255, 255, 255, 0.24),
    rgba(255, 255, 255, 0.1)
  );
  background-size: 200% 100%;
  animation: lunaSkeletonPulse 1.15s linear infinite;
}
.profile-skeleton-line {
  height: 11px;
  border-radius: 999px;
  margin-bottom: 9px;
}
.profile-skeleton-line.w-42 {
  width: 42%;
}
.profile-skeleton-line.w-64 {
  width: 64%;
}
.profile-skeleton-meter {
  margin-top: 4px;
  height: 10px;
  border-radius: 999px;
}
.profile-skeleton-row {
  margin-top: 12px;
  display: flex;
  gap: 8px;
}
.profile-skeleton-pill {
  height: 30px;
  flex: 1;
  border-radius: 999px;
}
.profile-skeleton-statgrid {
  margin-top: 10px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.profile-skeleton-stat {
  height: 56px;
  border-radius: 12px;
}

.profile-quick-actions {
  margin-top: 10px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.profile-quick-action {
  min-height: 36px;
  border-radius: 11px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.9);
  font-size: 0.72rem;
  font-weight: 800;
  cursor: pointer;
}
.profile-quick-action:hover {
  transform: translateY(-1px);
}

.learning-path-chip--focus {
  cursor: pointer;
  user-select: none;
}
.learning-path-chip--focus[data-mode="on"] {
  color: rgba(22, 84, 0, 0.94);
  border-color: rgba(88, 204, 2, 0.44);
  background: rgba(88, 204, 2, 0.16);
}
.learning-path-panel.is-focus-mode .learning-step {
  opacity: 0.46;
  transform: scale(0.986);
  transition:
    opacity 220ms ease,
    transform 220ms ease;
}
.learning-path-panel.is-focus-mode .learning-step.is-active {
  opacity: 1;
  transform: scale(1);
}
.learning-path-panel.is-focus-mode .learning-step.is-active .learning-step-btn {
  box-shadow: 0 24px 50px rgba(88, 204, 2, 0.22);
}
.learning-path-panel.is-focus-mode .learning-finish-card,
.learning-path-panel.is-focus-mode .learning-reward-day {
  opacity: 0.66;
}

.section-reveal {
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity 420ms ease,
    transform 420ms cubic-bezier(0.2, 0.9, 0.2, 1);
}
.section-reveal.is-section-visible {
  opacity: 1;
  transform: translateY(0);
}

@keyframes lunaSkeletonPulse {
  0% {
    background-position: 0% 0%;
  }
  100% {
    background-position: 200% 0%;
  }
}

body[data-theme="dark"] .luna-empty-state {
  border-color: rgba(255, 255, 255, 0.14);
  background:
    radial-gradient(
      140% 120% at 0% 0%,
      rgba(0, 210, 255, 0.18),
      rgba(0, 0, 0, 0) 56%
    ),
    radial-gradient(
      120% 120% at 100% 100%,
      rgba(127, 90, 255, 0.18),
      rgba(0, 0, 0, 0) 58%
    ),
    rgba(255, 255, 255, 0.06);
}
body[data-theme="dark"] .luna-empty-icon {
  border-color: rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.1);
}
body[data-theme="dark"] .luna-empty-title {
  color: rgba(255, 255, 255, 0.92);
}
body[data-theme="dark"] .luna-empty-sub {
  color: rgba(219, 232, 255, 0.74);
}
body[data-theme="dark"] .luna-empty-cta {
  color: rgba(255, 255, 255, 0.86);
  border-color: rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.08);
}
body[data-theme="dark"] .leaderboard-rank-delta {
  border-color: rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.1);
}
body[data-theme="dark"] .grid-skeleton-card {
  border-color: rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.06);
}

@media (max-width: 640px) {
  .card {
    border-radius: 20px;
  }
  .card-content {
    padding: 14px 13px 12px;
    gap: 8px;
  }
  .card-title {
    font-size: 0.98rem;
    line-height: 1.24;
  }
  .card-subtitle {
    font-size: 0.84rem;
  }
  .luna-load-more {
    min-height: var(--size-load-more-min-height-mobile);
  }
  .luna-empty-state {
    border-radius: 16px;
    padding: 18px 12px 14px;
  }
  .luna-empty-cta {
    min-height: 40px;
    width: 100%;
  }
  .profile-quick-actions {
    grid-template-columns: 1fr;
  }
  .profile-skeleton-statgrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .section-reveal {
    transform: translateY(12px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .section-reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .grid-skeleton-img,
  .grid-skeleton-line,
  .profile-skeleton-line,
  .profile-skeleton-meter,
  .profile-skeleton-pill,
  .profile-skeleton-stat {
    animation: none !important;
  }
  .learning-step-btn.is-onboarding-glow,
  .learning-finish-btn.is-onboarding-glow,
  .learning-reward-btn.is-onboarding-glow {
    animation: none !important;
  }
  .leaderboard-card.is-open-salute::before,
  .leaderboard-card.is-open-salute::after,
  .leaderboard-card.is-open-salute .leaderboard-open-glow,
  .leaderboard-card.is-open-salute .leaderboard-open-salute {
    animation: none !important;
  }
  .leaderboard-card.is-open-salute .leaderboard-open-glow,
  .leaderboard-card.is-open-salute .leaderboard-open-salute {
    display: none !important;
  }
  .rating-podium-wrap.is-top3-showcase,
  .rating-podium-item.is-top3-showcase,
  .rating-podium-item.is-top3-showcase .rating-podium-medal,
  .rating-podium-item.is-top3-showcase .rating-podium-avatar-wrap,
  .rating-podium-item.is-top3-showcase::before,
  .rating-podium-item.is-top3-showcase::after {
    animation: none !important;
  }
  .rating-podium-wrap.is-top3-showcase::before,
  .rating-podium-item.is-top3-showcase::after {
    display: none !important;
  }
  .rating-podium-wrap.is-top3-surge,
  .rating-podium-item.is-top3-surge,
  .league-you-now.is-top3-surge {
    animation: none !important;
  }
  .rating-podium-wrap.is-top3-surge::after {
    display: none !important;
  }
}

/* Render optimization for long feeds/lists on mobile and low-end devices */
@supports (content-visibility: auto) {
  .menu-grid .card,
  .menu-grid.facts-grid .fact-card-large,
  .game-block,
  .coach-card,
  .learning-step {
    content-visibility: auto;
    contain-intrinsic-size: 280px;
  }
}

/* Popup overlays restored after cleanup: avatar crop + user profile */
#avatar-preview-popup,
#user-profile-popup {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(12px, 3.2vw, 28px);
  background: rgba(3, 9, 24, 0.7);
  backdrop-filter: blur(8px) saturate(120%);
  -webkit-backdrop-filter: blur(8px) saturate(120%);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  overflow-y: auto;
  transition:
    opacity 220ms ease,
    visibility 220ms ease;
}

#avatar-preview-popup {
  z-index: var(--z-avatar-preview);
}

#user-profile-popup {
  z-index: calc(var(--z-avatar-preview) - 10);
}

#avatar-preview-popup.show,
#user-profile-popup.show {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.avatar-preview-box {
  width: min(540px, 100%);
  max-height: min(92vh, 820px);
  border-radius: 22px;
  padding: 16px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background:
    radial-gradient(
      120% 140% at 0% 0%,
      rgba(0, 210, 255, 0.18),
      rgba(0, 0, 0, 0) 56%
    ),
    radial-gradient(
      140% 140% at 100% 100%,
      rgba(127, 90, 255, 0.16),
      rgba(0, 0, 0, 0) 58%
    ),
    linear-gradient(160deg, rgba(11, 17, 34, 0.96), rgba(8, 12, 26, 0.94));
  box-shadow: 0 28px 64px rgba(0, 0, 0, 0.46);
  color: rgba(255, 255, 255, 0.94);
}

.avatar-preview-stage-wrap {
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.05);
  padding: 8px;
}

.avatar-preview-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 14px;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.38);
  touch-action: none;
  cursor: grab;
}

.avatar-preview-stage.is-dragging {
  cursor: grabbing;
}

#avatar-preview-img {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  transform-origin: center center;
  max-width: none;
  user-select: none;
  pointer-events: none;
}

.avatar-preview-controls {
  margin-top: 12px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 10px;
  align-items: center;
}

.avatar-preview-zoom-label {
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(219, 232, 255, 0.8);
}

.avatar-preview-zoom {
  width: 100%;
  accent-color: rgb(var(--profile-accent-rgb, 29 161 242) / 1);
}

.avatar-preview-reset-btn {
  min-height: 34px;
  border-radius: 10px;
  padding: 0 12px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.92);
  font-size: 0.74rem;
  font-weight: 700;
  cursor: pointer;
}

.avatar-preview-meta {
  margin-top: 10px;
  min-height: 1.2em;
  font-size: 0.78rem;
  color: rgba(219, 232, 255, 0.82);
}

.avatar-preview-actions {
  margin-top: 14px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

#avatar-approve-btn,
#avatar-cancel-btn {
  min-height: 42px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.92);
  font-weight: 800;
  cursor: pointer;
}

#avatar-approve-btn {
  border-color: rgba(0, 210, 255, 0.42);
  background: linear-gradient(
    135deg,
    rgba(0, 210, 255, 0.24),
    rgba(127, 90, 255, 0.26)
  );
}

#avatar-approve-btn:disabled {
  opacity: 0.62;
  cursor: default;
}

.user-profile-card {
  width: min(420px, 100%);
  border-radius: 22px;
  padding: 18px 16px 16px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background:
    radial-gradient(
      130% 120% at 0% 0%,
      rgba(0, 210, 255, 0.18),
      rgba(0, 0, 0, 0) 56%
    ),
    radial-gradient(
      130% 130% at 100% 100%,
      rgba(127, 90, 255, 0.15),
      rgba(0, 0, 0, 0) 60%
    ),
    linear-gradient(160deg, rgba(12, 18, 36, 0.96), rgba(8, 13, 28, 0.95));
  box-shadow: 0 24px 56px rgba(0, 0, 0, 0.46);
  color: rgba(255, 255, 255, 0.93);
  text-align: center;
  position: relative;
}

#user-profile-close {
  position: absolute;
  right: 10px;
  top: 10px;
  width: 34px;
  height: 34px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.94);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
}

.user-profile-avatar-wrap {
  width: 88px;
  height: 88px;
  margin: 2px auto 10px;
  border-radius: 50%;
  position: relative;
  border: 2px solid rgba(255, 255, 255, 0.32);
  overflow: hidden;
  background: rgba(255, 255, 255, 0.08);
}

#user-profile-avatar {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.user-profile-online-dot {
  position: absolute;
  right: 2px;
  bottom: 2px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid rgba(8, 13, 28, 0.96);
  background: rgba(255, 255, 255, 0.4);
}

.user-profile-online-dot.is-online {
  background: #23d160;
}

.user-profile-online-dot.is-typing {
  background: #ffd746;
}

#user-profile-name {
  font-size: 1.24rem;
  font-weight: 900;
  line-height: 1.18;
  color: rgba(255, 255, 255, 0.96);
  word-break: break-word;
}

.user-profile-meta,
.user-profile-sub,
.user-profile-bio,
.user-profile-status {
  margin-top: 8px;
  color: rgba(219, 232, 255, 0.82);
}

.user-profile-meta {
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.user-profile-sub {
  font-size: 0.83rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.84);
}

.user-profile-badge {
  margin-top: 8px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.24);
  background: rgba(255, 215, 64, 0.24);
  color: rgba(255, 246, 219, 0.96);
  padding: 4px 10px;
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.user-profile-bio {
  font-size: 0.84rem;
  line-height: 1.38;
  color: rgba(219, 232, 255, 0.84);
}

.user-profile-chips {
  margin-top: 12px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.user-profile-chip {
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.08);
  padding: 7px 6px;
}

.user-profile-chip .k {
  display: block;
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(219, 232, 255, 0.72);
}

.user-profile-chip .v {
  display: block;
  margin-top: 3px;
  font-size: 0.92rem;
  font-weight: 900;
  color: rgba(255, 255, 255, 0.94);
}

.user-profile-status {
  font-size: 0.78rem;
}

.user-profile-actions {
  margin-top: 12px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.user-profile-actions.user-profile-actions-secondary {
  grid-template-columns: 1fr;
}

.user-profile-actions button {
  min-height: 40px;
  border-radius: 11px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.92);
  font-size: 0.8rem;
  font-weight: 800;
  cursor: pointer;
}

#user-profile-share-btn {
  border-color: rgba(0, 210, 255, 0.44);
  background: linear-gradient(
    135deg,
    rgba(0, 210, 255, 0.24),
    rgba(127, 90, 255, 0.24)
  );
}

#user-profile-congrats-btn {
  border-color: rgba(255, 214, 102, 0.5);
  background: linear-gradient(
    135deg,
    rgba(255, 196, 73, 0.26),
    rgba(255, 129, 91, 0.22)
  );
}

@media (max-width: 640px) {
  #avatar-preview-popup,
  #user-profile-popup {
    align-items: flex-end;
    padding: 12px;
  }

  .avatar-preview-box,
  .user-profile-card {
    width: 100%;
    border-radius: 18px;
  }

  .user-profile-chips {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .avatar-preview-controls {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .avatar-preview-reset-btn {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  #avatar-preview-popup,
  #user-profile-popup {
    transition: none;
  }
}

/* Flavor indicators: modal + list cards */
.flavor-portrait {
  margin: 0 0 10px;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(8, 18, 34, 0.1);
  background:
    radial-gradient(
      120% 120% at 0% 0%,
      rgba(0, 210, 255, 0.12),
      rgba(0, 0, 0, 0) 60%
    ),
    linear-gradient(140deg, rgba(255, 255, 255, 0.96), rgba(246, 250, 255, 0.9));
  box-shadow: 0 12px 26px rgba(15, 23, 42, 0.08);
}

.flavor-portrait-head {
  display: grid;
  gap: 2px;
  margin-bottom: 8px;
}

.flavor-portrait-kicker {
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: rgba(8, 18, 34, 0.55);
}

.flavor-portrait-title {
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: rgba(8, 18, 34, 0.92);
}

.flavor-portrait-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.flavor-portrait-chip {
  font-size: 0.72rem;
  padding: 6px 10px;
}

.flavor-portrait-reasons {
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.flavor-reason-tag {
  display: inline-flex;
  align-items: center;
  padding: 4px 8px;
  border-radius: 999px;
  font-size: 0.68rem;
  line-height: 1;
  font-weight: 700;
  color: rgba(8, 18, 34, 0.76);
  background: rgba(8, 18, 34, 0.07);
  border: 1px solid rgba(8, 18, 34, 0.1);
}

.flavor-reason-tag.is-muted {
  opacity: 0.72;
}

.flavor-summary {
  margin: 0 0 12px;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(8, 18, 34, 0.08);
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.94),
    rgba(247, 250, 255, 0.92)
  );
  color: rgba(8, 18, 34, 0.78);
  font-size: 0.88rem;
  line-height: 1.4;
  letter-spacing: 0.01em;
  transition:
    color 220ms ease,
    border-color 220ms ease,
    box-shadow 220ms ease;
}

.flavor-summary.ready {
  color: rgba(8, 18, 34, 0.92);
  border-color: rgba(0, 210, 255, 0.26);
  box-shadow: 0 12px 26px rgba(0, 210, 255, 0.12);
}

.flavor-grid {
  display: grid;
  gap: 10px;
  margin: 0 0 18px;
}

.flavor-item {
  display: grid;
  gap: 6px;
}

.flavor-label {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  font-size: 0.8rem;
  color: rgba(8, 18, 34, 0.74);
}

.flavor-label span:first-child {
  font-weight: 700;
  letter-spacing: 0.02em;
}

.flavor-label span:last-child {
  font-weight: 800;
  color: rgba(8, 18, 34, 0.9);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

.flavor-bar-bg {
  height: 10px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(8, 18, 34, 0.08);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.08);
}

.flavor-bar-fill {
  height: 100%;
  width: 0%;
  border-radius: 999px;
  position: relative;
  transition: width 420ms cubic-bezier(0.22, 1, 0.36, 1);
}

.flavor-bar-fill::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -42%;
  width: 42%;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0),
    rgba(255, 255, 255, 0.42),
    rgba(255, 255, 255, 0)
  );
  pointer-events: none;
  opacity: 0;
}

.flavor-bar-fill[data-loading="true"]::after {
  opacity: 1;
  animation: flavorShimmer 1.2s linear infinite;
}

@keyframes flavorShimmer {
  from {
    left: -42%;
  }
  to {
    left: 100%;
  }
}

.flavor-bar-fill.fill-sweet {
  background: linear-gradient(90deg, #ff9f7a, #ffce73);
  box-shadow: 0 4px 14px rgba(255, 159, 122, 0.36);
}
.flavor-bar-fill.fill-spicy {
  background: linear-gradient(90deg, #ff5f5f, #ff8f3f);
  box-shadow: 0 4px 14px rgba(255, 95, 95, 0.34);
}
.flavor-bar-fill.fill-salty {
  background: linear-gradient(90deg, #42d7d3, #79f0d8);
  box-shadow: 0 4px 14px rgba(66, 215, 211, 0.34);
}
.flavor-bar-fill.fill-hearty {
  background: linear-gradient(90deg, #ffb648, #ff7d47);
  box-shadow: 0 4px 14px rgba(255, 125, 71, 0.34);
}
.flavor-bar-fill.fill-sour {
  background: linear-gradient(90deg, #b7e75f, #76d46d);
  box-shadow: 0 4px 14px rgba(118, 212, 109, 0.34);
}
.flavor-bar-fill.fill-bitter {
  background: linear-gradient(90deg, #7a8f9f, #5f6f80);
  box-shadow: 0 4px 14px rgba(95, 111, 128, 0.34);
}
.flavor-bar-fill.fill-strong {
  background: linear-gradient(90deg, #5ea2ff, #2a6cff);
  box-shadow: 0 4px 14px rgba(42, 108, 255, 0.32);
}
.flavor-bar-fill.fill-coffee {
  background: linear-gradient(90deg, #a06b42, #7a4e2f);
  box-shadow: 0 4px 14px rgba(122, 78, 47, 0.34);
}

.card-flavor-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.card-flavor-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 8px;
  border-radius: 999px;
  border: 1px solid transparent;
  font-size: 0.67rem;
  line-height: 1;
  white-space: nowrap;
}

.card-flavor-pill-label {
  font-weight: 700;
  letter-spacing: 0.01em;
}

.card-flavor-pill-value {
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

.card-flavor-pill.fill-sweet {
  color: #b85630;
  background: rgba(255, 163, 118, 0.18);
  border-color: rgba(255, 163, 118, 0.32);
}
.card-flavor-pill.fill-spicy {
  color: #b83f26;
  background: rgba(255, 112, 84, 0.16);
  border-color: rgba(255, 112, 84, 0.3);
}
.card-flavor-pill.fill-salty {
  color: #0c7b78;
  background: rgba(83, 220, 206, 0.18);
  border-color: rgba(83, 220, 206, 0.3);
}
.card-flavor-pill.fill-hearty {
  color: #c7661c;
  background: rgba(255, 176, 80, 0.2);
  border-color: rgba(255, 176, 80, 0.34);
}
.card-flavor-pill.fill-sour {
  color: #4d8e2d;
  background: rgba(154, 222, 90, 0.2);
  border-color: rgba(154, 222, 90, 0.34);
}
.card-flavor-pill.fill-bitter {
  color: #435666;
  background: rgba(122, 143, 159, 0.18);
  border-color: rgba(122, 143, 159, 0.3);
}
.card-flavor-pill.fill-strong {
  color: #2356bf;
  background: rgba(94, 162, 255, 0.2);
  border-color: rgba(94, 162, 255, 0.34);
}
.card-flavor-pill.fill-coffee {
  color: #6f4429;
  background: rgba(160, 107, 66, 0.2);
  border-color: rgba(160, 107, 66, 0.34);
}

@media (max-width: 640px) {
  .flavor-portrait {
    padding: 11px 12px;
  }

  .flavor-portrait-title {
    font-size: 0.93rem;
  }

  .flavor-portrait-chip {
    font-size: 0.67rem;
    padding: 5px 8px;
  }

  .flavor-reason-tag {
    font-size: 0.64rem;
  }

  .flavor-summary {
    padding: 11px 12px;
    font-size: 0.84rem;
  }

  .flavor-label {
    font-size: 0.78rem;
  }

  .flavor-bar-bg {
    height: 9px;
  }

  .card-flavor-pill {
    font-size: 0.64rem;
    padding: 5px 7px;
  }
}

@media (prefers-color-scheme: dark) {
  .flavor-portrait {
    border-color: rgba(255, 255, 255, 0.14);
    background:
      radial-gradient(
        120% 120% at 0% 0%,
        rgba(0, 210, 255, 0.17),
        rgba(0, 0, 0, 0) 60%
      ),
      linear-gradient(
        140deg,
        rgba(255, 255, 255, 0.08),
        rgba(255, 255, 255, 0.03)
      );
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.3);
  }

  .flavor-portrait-kicker {
    color: rgba(219, 232, 255, 0.65);
  }

  .flavor-portrait-title {
    color: rgba(255, 255, 255, 0.94);
  }

  .flavor-reason-tag {
    color: rgba(219, 232, 255, 0.84);
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.14);
  }

  .flavor-summary {
    border-color: rgba(255, 255, 255, 0.14);
    background: linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.08),
      rgba(255, 255, 255, 0.03)
    );
    color: rgba(219, 232, 255, 0.82);
  }

  .flavor-summary.ready {
    color: rgba(255, 255, 255, 0.95);
    border-color: rgba(0, 210, 255, 0.34);
    box-shadow: 0 14px 32px rgba(0, 210, 255, 0.16);
  }

  .flavor-label {
    color: rgba(219, 232, 255, 0.76);
  }

  .flavor-label span:last-child {
    color: rgba(255, 255, 255, 0.93);
  }

  .flavor-bar-bg {
    background: rgba(255, 255, 255, 0.12);
  }

  .card-flavor-pill {
    color: rgba(255, 255, 255, 0.88);
  }
}

body[data-theme="dark"] .flavor-summary {
  border-color: rgba(255, 255, 255, 0.14);
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.08),
    rgba(255, 255, 255, 0.03)
  );
  color: rgba(219, 232, 255, 0.82);
}

body[data-theme="dark"] .flavor-portrait {
  border-color: rgba(255, 255, 255, 0.14);
  background:
    radial-gradient(
      120% 120% at 0% 0%,
      rgba(0, 210, 255, 0.17),
      rgba(0, 0, 0, 0) 60%
    ),
    linear-gradient(
      140deg,
      rgba(255, 255, 255, 0.08),
      rgba(255, 255, 255, 0.03)
    );
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.3);
}

body[data-theme="dark"] .flavor-portrait-kicker {
  color: rgba(219, 232, 255, 0.65);
}

body[data-theme="dark"] .flavor-portrait-title {
  color: rgba(255, 255, 255, 0.94);
}

body[data-theme="dark"] .flavor-reason-tag {
  color: rgba(219, 232, 255, 0.84);
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.14);
}

body[data-theme="dark"] .flavor-summary.ready {
  color: rgba(255, 255, 255, 0.95);
  border-color: rgba(0, 210, 255, 0.34);
  box-shadow: 0 14px 32px rgba(0, 210, 255, 0.16);
}

body[data-theme="dark"] .flavor-label {
  color: rgba(219, 232, 255, 0.76);
}

body[data-theme="dark"] .flavor-label span:last-child {
  color: rgba(255, 255, 255, 0.93);
}

body[data-theme="dark"] .flavor-bar-bg {
  background: rgba(255, 255, 255, 0.12);
}

body[data-theme="dark"] .card-flavor-pill {
  color: rgba(255, 255, 255, 0.88);
}

/* ===== Practice Readability Upgrade (2026-02-23) ===== */
#quiz-container {
  padding-top: 12px;
}

#quiz-container .game-shell {
  max-width: 980px;
  border-radius: 32px;
  padding: 22px 22px 24px;
  gap: 20px;
  border: 1px solid rgba(8, 18, 34, 0.08);
  box-shadow: 0 26px 66px rgba(15, 23, 42, 0.14);
}

#quiz-container .game-shell-header {
  align-items: flex-start;
  gap: 12px;
}

#quiz-container .game-shell-title {
  font-size: clamp(1.25rem, 1.9vw, 1.55rem);
  line-height: 1.15;
}

#quiz-container .game-shell-hint {
  margin-top: 4px;
  font-size: 0.9rem;
  line-height: 1.4;
  color: rgba(8, 18, 34, 0.66);
}

#quiz-container .game-shell-meta {
  min-width: 220px;
  align-items: stretch;
}

#quiz-container .game-shell-progress {
  width: 100%;
  height: 10px;
}

#quiz-container .game-shell-xp {
  display: inline-flex;
  justify-content: flex-end;
  font-size: 0.76rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

#quiz-container .game-shell-skillline {
  margin-top: 8px;
  padding-top: 12px;
  font-size: 0.88rem;
  line-height: 1.35;
  color: rgba(8, 18, 34, 0.72);
}

#quiz-container .game-shell-body {
  gap: 18px;
}

#quiz-container .practice-focus-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

#quiz-container .practice-focus-card {
  border-radius: 16px;
  border: 1px solid rgba(8, 18, 34, 0.1);
  touch-action: pan-y pinch-zoom;
  background:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.92),
      rgba(248, 252, 255, 0.88)
    ),
    radial-gradient(
      120px 50px at 50% -15%,
      rgba(0, 210, 255, 0.12),
      rgba(255, 255, 255, 0)
    );
  box-shadow: 0 14px 32px rgba(15, 23, 42, 0.1);
  padding: 11px 12px;
  display: grid;
  gap: 3px;
}

#quiz-container .practice-focus-label {
  font-size: 0.64rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(8, 18, 34, 0.58);
  font-weight: 900;
}

#quiz-container .practice-focus-value {
  font-size: 0.95rem;
  line-height: 1.2;
  font-weight: 900;
  color: rgba(8, 18, 34, 0.94);
}

#quiz-container .practice-focus-sub {
  font-size: 0.72rem;
  line-height: 1.3;
  color: rgba(8, 18, 34, 0.64);
}

#quiz-container .practice-quick-actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

#quiz-container .practice-duel-callout {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  padding: 18px 18px 17px;
  border-radius: 24px;
  border: 1px solid rgba(91, 125, 255, 0.18);
  background:
    radial-gradient(220px 140px at 100% 0%, rgba(117, 136, 255, 0.2), transparent 72%),
    radial-gradient(180px 120px at 0% 100%, rgba(80, 219, 193, 0.16), transparent 74%),
    linear-gradient(145deg, rgba(248, 251, 255, 0.98), rgba(239, 245, 255, 0.96));
  box-shadow:
    0 20px 42px rgba(15, 23, 42, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.82);
  text-align: left;
}

#quiz-container .practice-duel-callout::after {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: 23px;
  border: 1px solid rgba(255, 255, 255, 0.58);
  pointer-events: none;
}

#quiz-container .practice-duel-callout__copy {
  display: grid;
  gap: 6px;
}

#quiz-container .practice-duel-callout__kicker {
  font-size: 0.66rem;
  font-weight: 900;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(86, 92, 201, 0.88);
}

#quiz-container .practice-duel-callout__title {
  font-size: clamp(1.02rem, 1.8vw, 1.28rem);
  line-height: 1.12;
  font-weight: 950;
  color: rgba(24, 26, 40, 0.96);
}

#quiz-container .practice-duel-callout__sub {
  font-size: 0.87rem;
  line-height: 1.45;
  color: rgba(24, 26, 40, 0.68);
}

#quiz-container .practice-duel-callout__cta {
  display: grid;
  justify-items: center;
  gap: 8px;
  min-width: 92px;
}

#quiz-container .practice-duel-callout__icon {
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  border-radius: 18px;
  background: linear-gradient(135deg, #68d4ff, #6d85ff);
  color: white;
  font-size: 24px;
  box-shadow: 0 14px 28px rgba(74, 143, 255, 0.22);
}

#quiz-container .practice-duel-callout__label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  padding: 0 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.82);
  border: 1px solid rgba(93, 131, 201, 0.16);
  color: #37547e;
  font-size: 0.76rem;
  font-weight: 850;
}

#quiz-container .practice-quick-btn {
  border: 1px solid rgba(8, 18, 34, 0.12);
  border-radius: 14px;
  touch-action: pan-y pinch-zoom;
  background:
    linear-gradient(
      160deg,
      rgba(255, 255, 255, 0.95),
      rgba(247, 252, 255, 0.9)
    ),
    radial-gradient(
      140px 50px at 80% -10%,
      rgba(0, 210, 255, 0.12),
      rgba(255, 255, 255, 0)
    );
  box-shadow: 0 14px 30px rgba(15, 23, 42, 0.1);
  min-height: 68px;
  padding: 10px 11px;
  text-align: left;
  display: grid;
  gap: 4px;
  cursor: pointer;
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease,
    border-color 0.2s ease;
}

#quiz-container .practice-quick-btn:hover {
  transform: translateY(-1px);
  border-color: rgba(0, 162, 255, 0.34);
  box-shadow: 0 18px 36px rgba(10, 34, 66, 0.14);
}

#quiz-container .practice-quick-btn:focus-visible {
  outline: 2px solid rgba(0, 162, 255, 0.62);
  outline-offset: 2px;
}

#quiz-container .practice-quick-btn:disabled {
  opacity: 0.62;
  cursor: not-allowed;
  transform: none;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.08);
}

#quiz-container .practice-quick-title {
  font-size: 0.7rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  font-weight: 900;
  color: rgba(8, 18, 34, 0.66);
}

#quiz-container .practice-quick-sub {
  font-size: 0.84rem;
  line-height: 1.34;
  font-weight: 800;
  color: rgba(8, 18, 34, 0.9);
}

#quiz-container .practice-quick-btn.is-resume {
  border-color: rgba(0, 169, 225, 0.24);
}

#quiz-container .practice-quick-btn.is-next {
  border-color: rgba(0, 150, 126, 0.24);
  background:
    linear-gradient(
      160deg,
      rgba(245, 255, 251, 0.95),
      rgba(236, 251, 247, 0.9)
    ),
    radial-gradient(
      160px 60px at 75% -10%,
      rgba(0, 150, 126, 0.18),
      rgba(255, 255, 255, 0)
    );
}

#quiz-container .learning-path-panel,
#quiz-container .coach-hub {
  border-radius: 20px;
  padding: 14px;
  margin-bottom: 0;
}

#quiz-container .learning-path-title,
#quiz-container .coach-hub-title {
  font-size: 1.08rem;
}

#quiz-container .learning-path-sub {
  font-size: 0.82rem;
  line-height: 1.45;
}

#quiz-container .learning-step:nth-child(odd),
#quiz-container .learning-step:nth-child(even) {
  padding-left: 0;
  padding-right: 0;
}

#quiz-container .learning-path-track::before {
  left: 23px;
  width: 6px;
  opacity: 0.6;
}

#quiz-container .learning-step:not(:last-child)::after {
  left: 20px;
  top: 66px;
  width: 4px;
  box-shadow: 0 8px 18px rgba(88, 204, 2, 0.12);
}

#quiz-container .learning-step-btn {
  grid-template-columns: 50px minmax(0, 1fr) auto;
  grid-template-areas:
    "icon main state"
    "icon main cta";
  min-height: 84px;
  border-radius: 16px;
  gap: 8px 10px;
  padding: 10px 11px;
}

#quiz-container .learning-step-btn .learning-node-core {
  grid-area: icon;
}

#quiz-container .learning-step-btn .learning-step-main {
  grid-area: main;
}

#quiz-container .learning-step-btn .learning-step-state {
  grid-area: state;
  justify-self: end;
}

#quiz-container .learning-step-btn .learning-step-cta {
  grid-area: cta;
  justify-self: end;
}

#quiz-container .learning-step-main {
  gap: 4px;
}

#quiz-container .learning-step-title {
  font-size: 0.93rem;
  line-height: 1.3;
}

#quiz-container .learning-step-meta {
  font-size: 0.76rem;
}

#quiz-container .learning-step-state,
#quiz-container .learning-step-cta {
  font-size: 0.6rem;
}

#quiz-container .coach-hub-grid {
  gap: 12px;
}

#quiz-container .coach-hub-grid .coach-card:first-child {
  grid-column: 1 / -1;
}

#quiz-container .coach-card {
  border-radius: 15px;
  padding: 11px;
  gap: 7px;
}

#quiz-container .coach-card-title {
  font-size: 0.86rem;
}

#quiz-container .coach-card-sub,
#quiz-container .coach-role-item,
#quiz-container .coach-mission-row {
  font-size: 0.75rem;
  line-height: 1.38;
}

#quiz-container .coach-card-sub b {
  font-variant-numeric: tabular-nums;
}

#quiz-container .coach-card-btn {
  min-height: 34px;
  border-radius: 11px;
  font-size: 0.7rem;
}

@media (max-width: 860px) {
  #quiz-container .practice-focus-strip {
    grid-template-columns: 1fr;
  }

  #quiz-container .practice-quick-actions {
    grid-template-columns: 1fr;
  }

  #quiz-container .coach-hub-grid {
    grid-template-columns: 1fr;
  }

  #quiz-container .coach-hub-grid .coach-card:first-child {
    grid-column: auto;
  }
}

@media (max-width: 640px) {
  #quiz-container .game-shell {
    border-radius: 24px;
    padding: 14px 12px 16px;
    gap: 14px;
  }

  #quiz-container .game-shell-header {
    gap: 10px;
  }

  #quiz-container .game-shell-meta {
    min-width: 0;
    width: 100%;
    align-items: stretch;
  }

  #quiz-container .game-shell-xp {
    justify-content: flex-start;
  }

  #quiz-container .learning-step-btn {
    grid-template-columns: 44px 1fr;
    grid-template-areas:
      "icon main"
      "state state"
      "cta cta";
    min-height: 0;
  }

  #quiz-container .learning-step-btn .learning-step-state,
  #quiz-container .learning-step-btn .learning-step-cta {
    justify-self: start;
  }
}

body[data-theme="dark"] #quiz-container .practice-focus-card {
  border-color: rgba(255, 255, 255, 0.14);
  background:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.07),
      rgba(255, 255, 255, 0.04)
    ),
    radial-gradient(
      120px 50px at 50% -15%,
      rgba(0, 210, 255, 0.14),
      rgba(255, 255, 255, 0)
    );
  box-shadow: 0 16px 38px rgba(0, 0, 0, 0.34);
}

body[data-theme="dark"] #quiz-container .practice-focus-label {
  color: rgba(219, 232, 255, 0.64);
}

body[data-theme="dark"] #quiz-container .practice-focus-value {
  color: rgba(255, 255, 255, 0.92);
}

body[data-theme="dark"] #quiz-container .practice-focus-sub {
  color: rgba(219, 232, 255, 0.74);
}

body[data-theme="dark"] #quiz-container .practice-quick-btn {
  border-color: rgba(255, 255, 255, 0.14);
  background:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.08),
      rgba(255, 255, 255, 0.04)
    ),
    radial-gradient(
      120px 50px at 50% -15%,
      rgba(0, 210, 255, 0.14),
      rgba(255, 255, 255, 0)
    );
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.36);
}

body[data-theme="dark"] #quiz-container .practice-quick-title {
  color: rgba(219, 232, 255, 0.68);
}

body[data-theme="dark"] #quiz-container .practice-quick-sub {
  color: rgba(255, 255, 255, 0.92);
}

body[data-theme="dark"] #quiz-container .practice-quick-btn.is-next {
  border-color: rgba(106, 236, 216, 0.3);
  background:
    linear-gradient(180deg, rgba(0, 180, 150, 0.12), rgba(255, 255, 255, 0.03)),
    radial-gradient(
      120px 50px at 50% -15%,
      rgba(0, 210, 255, 0.14),
      rgba(255, 255, 255, 0)
    );
}

body[data-theme="dark"] #quiz-container .game-shell-hint,
body[data-theme="dark"] #quiz-container .game-shell-skillline {
  color: rgba(219, 232, 255, 0.72);
}

@media (prefers-color-scheme: dark) {
  #quiz-container .practice-focus-card {
    border-color: rgba(255, 255, 255, 0.14);
    background:
      linear-gradient(
        180deg,
        rgba(255, 255, 255, 0.07),
        rgba(255, 255, 255, 0.04)
      ),
      radial-gradient(
        120px 50px at 50% -15%,
        rgba(0, 210, 255, 0.14),
        rgba(255, 255, 255, 0)
      );
    box-shadow: 0 16px 38px rgba(0, 0, 0, 0.34);
  }

  #quiz-container .practice-focus-label {
    color: rgba(219, 232, 255, 0.64);
  }

  #quiz-container .practice-focus-value {
    color: rgba(255, 255, 255, 0.92);
  }

  #quiz-container .practice-focus-sub {
    color: rgba(219, 232, 255, 0.74);
  }

  #quiz-container .practice-quick-btn {
    border-color: rgba(255, 255, 255, 0.14);
    background:
      linear-gradient(
        180deg,
        rgba(255, 255, 255, 0.08),
        rgba(255, 255, 255, 0.04)
      ),
      radial-gradient(
        120px 50px at 50% -15%,
        rgba(0, 210, 255, 0.14),
        rgba(255, 255, 255, 0)
      );
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.36);
  }

  #quiz-container .practice-quick-title {
    color: rgba(219, 232, 255, 0.68);
  }

  #quiz-container .practice-quick-sub {
    color: rgba(255, 255, 255, 0.92);
  }

  #quiz-container .practice-quick-btn.is-next {
    border-color: rgba(106, 236, 216, 0.3);
    background:
      linear-gradient(
        180deg,
        rgba(0, 180, 150, 0.12),
        rgba(255, 255, 255, 0.03)
      ),
      radial-gradient(
        120px 50px at 50% -15%,
        rgba(0, 210, 255, 0.14),
        rgba(255, 255, 255, 0)
      );
  }

  #quiz-container .game-shell-hint,
  #quiz-container .game-shell-skillline {
    color: rgba(219, 232, 255, 0.72);
  }
}

/* ===== Practice Focus Interactions (2026-02-23) ===== */
#quiz-container .practice-focus-card[role="button"] {
  cursor: pointer;
  transition:
    transform 0.22s ease,
    box-shadow 0.22s ease,
    border-color 0.22s ease,
    background 0.22s ease;
  will-change: transform;
}

#quiz-container .practice-focus-card[role="button"]:hover {
  transform: translateY(-2px);
  border-color: rgba(0, 154, 255, 0.34);
  box-shadow: 0 18px 36px rgba(10, 34, 66, 0.16);
}

#quiz-container .practice-focus-card[role="button"]:active {
  transform: translateY(0);
  box-shadow: 0 10px 22px rgba(10, 34, 66, 0.14);
}

#quiz-container .practice-focus-card[role="button"]:focus-visible {
  outline: 2px solid rgba(0, 162, 255, 0.68);
  outline-offset: 2px;
  border-color: rgba(0, 162, 255, 0.48);
}

#quiz-container .coach-card.is-practice-anchor {
  border-color: rgba(0, 188, 255, 0.55);
  box-shadow:
    0 0 0 2px rgba(0, 188, 255, 0.24),
    0 18px 40px rgba(0, 24, 56, 0.24);
  animation: coachAnchorPulse 0.9s ease;
}

@keyframes coachAnchorPulse {
  0% {
    transform: translateY(0) scale(1);
  }
  35% {
    transform: translateY(-2px) scale(1.01);
  }
  100% {
    transform: translateY(0) scale(1);
  }
}

body[data-theme="dark"]
  #quiz-container
  .practice-focus-card[role="button"]:hover {
  border-color: rgba(85, 201, 255, 0.55);
  box-shadow: 0 20px 42px rgba(0, 0, 0, 0.42);
}

body[data-theme="dark"]
  #quiz-container
  .practice-focus-card[role="button"]:focus-visible {
  outline-color: rgba(132, 220, 255, 0.86);
  border-color: rgba(132, 220, 255, 0.62);
}

body[data-theme="dark"] #quiz-container .coach-card.is-practice-anchor {
  border-color: rgba(101, 220, 255, 0.68);
  box-shadow:
    0 0 0 2px rgba(101, 220, 255, 0.22),
    0 20px 44px rgba(0, 0, 0, 0.5);
}

@media (prefers-reduced-motion: reduce) {
  #quiz-container .practice-focus-card[role="button"],
  #quiz-container .coach-card.is-practice-anchor {
    transition: none;
    animation: none;
  }
}

/* ===== Galaxy Fast Portal Cue (2026-02-23) ===== */
.galaxy-planet.is-portal-fast {
  border-color: rgba(190, 248, 255, 0.92);
  box-shadow:
    0 0 0 2px rgba(108, 221, 255, 0.45),
    0 28px 64px rgba(0, 0, 0, 0.56);
  animation: galaxyPortalFastFlash 0.46s ease-out;
}

.galaxy-planet.is-portal-fast .planet-emoji {
  filter: drop-shadow(0 0 18px rgba(122, 228, 255, 0.72));
}

@keyframes galaxyPortalFastFlash {
  0% {
    transform: scale(1);
    filter: brightness(1);
  }
  45% {
    transform: scale(1.045);
    filter: brightness(1.25);
  }
  100% {
    transform: scale(1);
    filter: brightness(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .galaxy-planet.is-portal-fast {
    animation: none;
  }
}

/* ===== Practice Visual Polish (2026-02-23) ===== */
#quiz-container .game-shell {
  background:
    radial-gradient(
      760px 220px at 8% -20%,
      rgba(0, 210, 255, 0.12),
      transparent 58%
    ),
    radial-gradient(
      760px 260px at 98% 0%,
      rgba(255, 206, 84, 0.12),
      transparent 62%
    ),
    linear-gradient(
      150deg,
      rgba(255, 255, 255, 0.96),
      rgba(246, 250, 255, 0.94)
    );
}

#quiz-container .game-shell-title {
  letter-spacing: -0.015em;
}

#quiz-container .game-shell-hint {
  max-width: 56ch;
  line-height: 1.46;
}

#quiz-container .game-shell-skillline {
  max-width: 72ch;
  line-height: 1.46;
}

#quiz-container .game-block {
  padding: 22px 22px 20px;
}

#quiz-container .game-block-title {
  font-size: clamp(1.06rem, 1.2vw, 1.2rem);
  line-height: 1.24;
}

#quiz-container .game-block-desc {
  font-size: 0.92rem;
  line-height: 1.48;
  color: rgba(8, 18, 34, 0.72);
}

#quiz-container .game-block-submeta {
  letter-spacing: 0.16em;
}

#quiz-container .game-block-progress .track {
  height: 8px;
}

#quiz-container .game-block-progress .progress-label {
  letter-spacing: 0.14em;
}

#quiz-container .quiz-menu-btn {
  min-height: 152px;
  padding: 16px 48px 16px 16px;
  gap: 8px;
}

#quiz-container .quiz-menu-btn::after {
  top: 16px;
}

#quiz-container .quiz-menu-btn .game-card-title {
  font-size: 1.07rem;
  line-height: 1.26;
  font-weight: 800;
}

#quiz-container .quiz-menu-btn .game-card-desc {
  font-size: 0.86rem;
  line-height: 1.48;
  max-width: 60ch;
}

#quiz-container .game-hero-sub {
  max-width: 62ch;
  line-height: 1.5;
}

#quiz-container .practice-focus-card {
  min-height: 86px;
  align-content: start;
}

#quiz-container .practice-quick-btn {
  min-height: 76px;
}

#quiz-container .learning-path-panel,
#quiz-container .coach-hub {
  border: 1px solid rgba(8, 18, 34, 0.1);
  background:
    radial-gradient(
      720px 180px at 10% -30%,
      rgba(0, 210, 255, 0.1),
      transparent 56%
    ),
    linear-gradient(
      150deg,
      rgba(255, 255, 255, 0.94),
      rgba(246, 250, 255, 0.92)
    );
  box-shadow: 0 20px 44px rgba(15, 23, 42, 0.1);
}

#quiz-container .learning-step-btn {
  min-height: 90px;
}

#quiz-container .coach-card {
  min-height: 118px;
}

#game-overlay {
  --game-card-radius: 22px;
  --game-card-pad: 15px 15px 13px;
  --game-label-size: 11.5px;
  --game-label-ls: 0.14em;
  --game-gap: 13px;
  --game-answers-gap: 12px;
  --game-option-font: 1rem;
  --game-option-pad: 15px 16px;
  --game-option-radius: 18px;
}

#game-overlay .game-topbar {
  padding: 13px 14px;
  backdrop-filter: blur(10px);
}

#game-overlay .game-title {
  font-size: 16px;
  font-weight: 800;
  letter-spacing: -0.01em;
}

#game-overlay .game-meta {
  padding: 11px 14px 13px;
}

#game-overlay .game-round {
  font-size: 13px;
  line-height: 1.34;
  font-weight: 800;
}

#game-overlay .game-progress {
  height: 8px;
}

#game-overlay .game-body {
  padding: 16px;
  padding-bottom: calc(18px + env(safe-area-inset-bottom));
  scrollbar-width: thin;
  scrollbar-color: rgba(8, 18, 34, 0.25) transparent;
}

#game-overlay .game-body::-webkit-scrollbar {
  width: 8px;
}

#game-overlay .game-body::-webkit-scrollbar-thumb {
  background: rgba(8, 18, 34, 0.25);
  border-radius: 999px;
}

#game-overlay .training-option,
#game-overlay .quiz-option,
#game-overlay .conflict-btn,
#game-overlay .memory-option,
#game-overlay .allergen-option,
#game-overlay .grape-option {
  min-height: 72px;
  line-height: 1.36;
}

#game-overlay .quiz-option::before,
#game-overlay #conflict-options.conflict-options .conflict-btn::before {
  width: 30px;
  height: 30px;
}

#game-overlay #conflict-game-container .guest-bubble {
  font-size: 1.08rem;
  line-height: 1.5;
  padding: 19px 17px 17px;
}

#game-overlay #conflict-game-container .conflict-coachline,
#game-overlay #conflict-game-container .conflict-explanation {
  line-height: 1.46;
}

body[data-theme="dark"] #quiz-container .game-shell {
  background:
    radial-gradient(
      780px 220px at 8% -20%,
      rgba(0, 210, 255, 0.12),
      transparent 60%
    ),
    radial-gradient(
      780px 260px at 98% 0%,
      rgba(106, 236, 216, 0.12),
      transparent 62%
    ),
    linear-gradient(150deg, rgba(15, 17, 27, 0.95), rgba(10, 12, 21, 0.93));
  border-color: rgba(255, 255, 255, 0.14);
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.5);
}

body[data-theme="dark"] #quiz-container .game-block-desc,
body[data-theme="dark"] #quiz-container .quiz-menu-btn .game-card-desc {
  color: rgba(219, 232, 255, 0.78);
}

body[data-theme="dark"] #quiz-container .learning-path-panel,
body[data-theme="dark"] #quiz-container .coach-hub {
  border-color: rgba(255, 255, 255, 0.14);
  background:
    radial-gradient(
      760px 180px at 10% -30%,
      rgba(0, 210, 255, 0.11),
      transparent 58%
    ),
    linear-gradient(
      150deg,
      rgba(255, 255, 255, 0.08),
      rgba(255, 255, 255, 0.04)
    );
  box-shadow: 0 24px 56px rgba(0, 0, 0, 0.42);
}

body[data-theme="dark"] #game-overlay .game-body {
  scrollbar-color: rgba(255, 255, 255, 0.28) transparent;
}

body[data-theme="dark"] #game-overlay .game-body::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.28);
}

@media (max-width: 640px) {
  #quiz-container .game-block {
    padding: 16px 14px 14px;
  }

  #quiz-container .quiz-menu-btn {
    min-height: 126px;
    padding: 14px 42px 14px 14px;
    gap: 7px;
  }

  #quiz-container .quiz-menu-btn .game-card-title {
    font-size: 1.02rem;
  }

  #quiz-container .quiz-menu-btn .game-card-desc {
    font-size: 0.84rem;
    line-height: 1.42;
  }

  #quiz-container .practice-focus-card {
    min-height: 0;
  }

  #quiz-container .practice-quick-btn {
    min-height: 70px;
  }

  #game-overlay .game-body {
    padding: 14px 12px;
    padding-bottom: calc(16px + env(safe-area-inset-bottom));
  }

  #game-overlay .training-option,
  #game-overlay .quiz-option,
  #game-overlay .conflict-btn,
  #game-overlay .memory-option,
  #game-overlay .allergen-option,
  #game-overlay .grape-option {
    min-height: 66px;
  }

  #game-overlay #conflict-game-container .guest-bubble {
    font-size: 1.02rem;
    line-height: 1.46;
    padding: 17px 14px 14px;
  }
}

/* ===== Oracle Readability Rework (2026-02-23) ===== */
#oracle-game-panel .game-round {
  font-weight: 850;
  color: rgba(8, 18, 34, 0.82);
}

#oracle-game-panel #randomizer-container {
  min-height: 0;
  padding: 14px;
  border-radius: 24px;
  border: 1px solid rgba(8, 18, 34, 0.1);
  background:
    radial-gradient(
      760px 240px at 10% -10%,
      rgba(0, 210, 255, 0.12),
      transparent 60%
    ),
    radial-gradient(
      760px 240px at 96% 0%,
      rgba(255, 206, 84, 0.12),
      transparent 62%
    ),
    linear-gradient(
      160deg,
      rgba(255, 255, 255, 0.97),
      rgba(246, 250, 255, 0.95)
    );
  box-shadow: 0 20px 48px rgba(15, 23, 42, 0.12);
  backdrop-filter: none;
}

#oracle-game-panel .oracle-shell {
  max-width: 780px;
  align-items: stretch;
  gap: 14px;
}

#oracle-game-panel .oracle-orb {
  width: 88px;
  height: 88px;
  margin: 0 auto;
  border-color: rgba(8, 18, 34, 0.12);
  box-shadow:
    0 0 24px rgba(0, 174, 220, 0.28),
    inset 0 0 36px rgba(255, 255, 255, 0.24);
}

#oracle-game-panel .oracle-card-wrapper {
  gap: 12px;
}

#oracle-game-panel .oracle-card {
  border-radius: 22px;
  padding: 16px;
  background: rgba(255, 255, 255, 0.98);
  border: 1px solid rgba(8, 18, 34, 0.1);
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.1);
  backdrop-filter: none;
}

#oracle-game-panel .oracle-head {
  margin-bottom: 4px;
}

#oracle-game-panel .oracle-sub {
  color: rgba(8, 18, 34, 0.62);
  letter-spacing: 0.14em;
}

#oracle-game-panel .oracle-name {
  color: rgba(8, 18, 34, 0.94);
  font-size: 1.05rem;
}

#oracle-game-panel .oracle-step-title {
  font-size: 0.94rem;
  font-weight: 900;
  letter-spacing: 0.01em;
  color: rgba(8, 18, 34, 0.92);
}

#oracle-game-panel .oracle-step-hint {
  margin-top: 2px;
  margin-bottom: 10px;
  font-size: 0.84rem;
  line-height: 1.42;
  color: rgba(8, 18, 34, 0.66);
}

#oracle-game-panel .oracle-segment {
  margin: 8px 0 12px;
  padding: 4px;
  border-radius: 12px;
  background: rgba(8, 18, 34, 0.05);
  border: 1px solid rgba(8, 18, 34, 0.08);
}

#oracle-game-panel .oracle-seg {
  font-weight: 850;
  color: rgba(8, 18, 34, 0.74);
}

#oracle-game-panel .oracle-seg.is-active {
  color: rgba(8, 18, 34, 0.92);
  background: #fff;
  border-color: rgba(0, 150, 225, 0.3);
  box-shadow: 0 10px 22px rgba(15, 23, 42, 0.08);
}

#oracle-game-panel .oracle-section-title {
  margin-bottom: 8px;
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(8, 18, 34, 0.6);
}

#oracle-game-panel .oracle-grid {
  gap: 10px;
}

#oracle-game-panel .oracle-chip {
  min-height: 76px;
  padding: 11px;
  border-radius: 14px;
  border: 1px solid rgba(8, 18, 34, 0.12);
  background: #fff;
  box-shadow: 0 10px 26px rgba(15, 23, 42, 0.08);
  color: rgba(8, 18, 34, 0.9);
}

#oracle-game-panel .oracle-chip::after {
  opacity: 0.18;
}

#oracle-game-panel .oracle-chip .oracle-chip-emoji {
  border-color: rgba(8, 18, 34, 0.1);
  background: rgba(242, 248, 255, 0.96);
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.1);
}

#oracle-game-panel .oracle-chip .oracle-chip-text {
  color: rgba(8, 18, 34, 0.94);
  font-size: 0.92rem;
}

#oracle-game-panel .oracle-chip .oracle-chip-sub {
  color: rgba(8, 18, 34, 0.66);
  font-size: 0.78rem;
  line-height: 1.26;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
}

#oracle-game-panel .oracle-chip.is-selected {
  border-color: rgba(0, 150, 225, 0.42);
  background: linear-gradient(
    145deg,
    rgba(232, 248, 255, 0.96),
    rgba(245, 252, 255, 0.94)
  );
  box-shadow: 0 14px 30px rgba(0, 150, 225, 0.14);
}

#oracle-game-panel .oracle-chip:focus-visible {
  box-shadow:
    0 0 0 3px rgba(0, 162, 255, 0.28),
    0 12px 28px rgba(15, 23, 42, 0.12);
}

#oracle-game-panel .oracle-loading {
  align-items: stretch;
  text-align: left;
  padding: 4px 0 0;
  gap: 9px;
}

#oracle-game-panel .oracle-step-title--loading {
  margin-bottom: 0;
}

#oracle-game-panel .oracle-step-hint--loading {
  margin-bottom: 4px;
}

#oracle-game-panel .spinner {
  align-self: flex-start;
  margin-bottom: 0;
}

#oracle-game-panel .oracle-loading-text {
  color: rgba(8, 18, 34, 0.92);
  font-size: 0.96rem;
}

#oracle-game-panel .oracle-loading-sub {
  margin-top: 0;
  color: rgba(8, 18, 34, 0.66);
}

#oracle-game-panel .oracle-loading-card {
  width: 100%;
  margin-top: 2px;
  border-color: rgba(8, 18, 34, 0.1);
  background: linear-gradient(
    150deg,
    rgba(255, 255, 255, 0.98),
    rgba(244, 249, 255, 0.96)
  );
  box-shadow: 0 14px 30px rgba(15, 23, 42, 0.1);
}

#oracle-game-panel .oracle-loading-slot {
  width: 100%;
  margin-top: 4px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(8, 18, 34, 0.1);
  background: rgba(242, 247, 252, 0.92);
  color: rgba(8, 18, 34, 0.8);
}

#oracle-game-panel .oracle-preview {
  width: 100%;
  margin-top: 6px;
  padding: 12px;
  border-radius: 14px;
  border: 1px solid rgba(8, 18, 34, 0.1);
  background: rgba(255, 255, 255, 0.96);
  box-shadow: none;
}

#oracle-game-panel .oracle-line-header {
  color: rgba(8, 18, 34, 0.78);
}

#oracle-game-panel .oracle-bar {
  background: rgba(8, 18, 34, 0.12);
}

#oracle-game-panel .oracle-note {
  margin-top: 8px;
  border-radius: 12px;
  border-color: rgba(8, 18, 34, 0.1);
  background: rgba(248, 252, 255, 0.92);
  color: rgba(8, 18, 34, 0.72);
}

#oracle-game-panel .oracle-stage-line {
  display: flex;
  justify-content: flex-start;
  gap: 8px;
}

#oracle-game-panel .stage-pill {
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(8, 18, 34, 0.12);
  background: rgba(242, 247, 252, 0.92);
  color: rgba(8, 18, 34, 0.66);
  font-size: 0.65rem;
  font-weight: 900;
  letter-spacing: 0.08em;
}

#oracle-game-panel .stage-pill.is-active {
  transform: none;
  animation: none;
  border-color: rgba(0, 150, 225, 0.36);
  background: linear-gradient(
    145deg,
    rgba(227, 248, 255, 0.98),
    rgba(242, 252, 255, 0.96)
  );
  color: rgba(0, 79, 130, 0.92);
  box-shadow: 0 8px 18px rgba(0, 150, 225, 0.12);
}

#oracle-game-panel .oracle-status-panel {
  border-radius: 16px;
  padding: 12px 14px;
  border: 1px solid rgba(8, 18, 34, 0.1);
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 12px 24px rgba(15, 23, 42, 0.08);
}

#oracle-game-panel .oracle-status-label {
  margin-bottom: 3px;
  color: rgba(8, 18, 34, 0.52);
  letter-spacing: 0.12em;
}

#oracle-game-panel .oracle-status-detail {
  color: rgba(8, 18, 34, 0.92);
  font-size: 0.95rem;
  font-weight: 850;
  line-height: 1.36;
}

#oracle-game-panel .oracle-status-hint {
  margin-top: 6px;
  min-height: 1.2em;
  color: rgba(8, 18, 34, 0.66);
  font-size: 0.82rem;
  letter-spacing: 0.01em;
  text-transform: none;
}

#oracle-game-panel .oracle-last {
  margin-top: 10px;
  border-radius: 14px;
  border: 1px solid rgba(8, 18, 34, 0.1);
  background: rgba(248, 252, 255, 0.95);
  box-shadow: 0 12px 26px rgba(15, 23, 42, 0.1);
}

#oracle-game-panel .oracle-last-label {
  color: rgba(8, 18, 34, 0.56);
}

#oracle-game-panel .oracle-last-name {
  color: rgba(8, 18, 34, 0.9);
}

#oracle-game-panel .oracle-last-note {
  color: rgba(8, 18, 34, 0.66);
}

#oracle-game-panel .oracle-hint-badge {
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid rgba(8, 18, 34, 0.12);
  color: rgba(8, 18, 34, 0.84);
  box-shadow: 0 12px 26px rgba(15, 23, 42, 0.12);
  backdrop-filter: none;
}

#oracle-game-panel .oracle-hint-badge::after {
  opacity: 0.22;
}

body[data-theme="dark"] #oracle-game-panel #randomizer-container {
  border-color: rgba(255, 255, 255, 0.14);
  background:
    radial-gradient(
      780px 240px at 10% -10%,
      rgba(0, 210, 255, 0.14),
      transparent 60%
    ),
    radial-gradient(
      780px 240px at 96% 0%,
      rgba(106, 236, 216, 0.14),
      transparent 62%
    ),
    linear-gradient(160deg, rgba(12, 14, 24, 0.95), rgba(10, 12, 20, 0.94));
  box-shadow: 0 26px 62px rgba(0, 0, 0, 0.52);
}

body[data-theme="dark"] #oracle-game-panel .game-round {
  color: rgba(219, 232, 255, 0.82);
}

body[data-theme="dark"] #oracle-game-panel .oracle-card {
  border-color: rgba(255, 255, 255, 0.14);
  background: rgba(10, 12, 20, 0.92);
  box-shadow: 0 22px 52px rgba(0, 0, 0, 0.46);
}

body[data-theme="dark"] #oracle-game-panel .oracle-sub {
  color: rgba(219, 232, 255, 0.68);
}

body[data-theme="dark"] #oracle-game-panel .oracle-name,
body[data-theme="dark"] #oracle-game-panel .oracle-step-title {
  color: rgba(255, 255, 255, 0.94);
}

body[data-theme="dark"] #oracle-game-panel .oracle-step-hint,
body[data-theme="dark"] #oracle-game-panel .oracle-status-hint,
body[data-theme="dark"] #oracle-game-panel .oracle-chip .oracle-chip-sub,
body[data-theme="dark"] #oracle-game-panel .oracle-note {
  color: rgba(219, 232, 255, 0.76);
}

body[data-theme="dark"] #oracle-game-panel .oracle-segment {
  border-color: rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.06);
}

body[data-theme="dark"] #oracle-game-panel .oracle-seg {
  color: rgba(219, 232, 255, 0.78);
}

body[data-theme="dark"] #oracle-game-panel .oracle-seg.is-active {
  color: rgba(255, 255, 255, 0.96);
  border-color: rgba(106, 236, 216, 0.3);
  background: rgba(255, 255, 255, 0.14);
}

body[data-theme="dark"] #oracle-game-panel .oracle-section-title {
  color: rgba(219, 232, 255, 0.64);
}

body[data-theme="dark"] #oracle-game-panel .oracle-chip {
  border-color: rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.92);
}

body[data-theme="dark"] #oracle-game-panel .oracle-chip .oracle-chip-text {
  color: rgba(255, 255, 255, 0.94);
}

body[data-theme="dark"] #oracle-game-panel .oracle-chip .oracle-chip-emoji {
  border-color: rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.08);
}

body[data-theme="dark"] #oracle-game-panel .oracle-chip.is-selected {
  border-color: rgba(106, 236, 216, 0.34);
  background: linear-gradient(
    145deg,
    rgba(0, 180, 150, 0.18),
    rgba(255, 255, 255, 0.08)
  );
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.4);
}

body[data-theme="dark"] #oracle-game-panel .oracle-loading-text,
body[data-theme="dark"] #oracle-game-panel .oracle-status-detail {
  color: rgba(255, 255, 255, 0.92);
}

body[data-theme="dark"] #oracle-game-panel .oracle-loading-card,
body[data-theme="dark"] #oracle-game-panel .oracle-loading-slot,
body[data-theme="dark"] #oracle-game-panel .oracle-preview,
body[data-theme="dark"] #oracle-game-panel .oracle-note,
body[data-theme="dark"] #oracle-game-panel .oracle-last,
body[data-theme="dark"] #oracle-game-panel .oracle-status-panel {
  border-color: rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.08);
}

body[data-theme="dark"] #oracle-game-panel .oracle-line-header,
body[data-theme="dark"] #oracle-game-panel .oracle-last-label,
body[data-theme="dark"] #oracle-game-panel .oracle-last-name,
body[data-theme="dark"] #oracle-game-panel .oracle-last-note,
body[data-theme="dark"] #oracle-game-panel .oracle-status-label {
  color: rgba(219, 232, 255, 0.78);
}

body[data-theme="dark"] #oracle-game-panel .oracle-bar {
  background: rgba(255, 255, 255, 0.18);
}

body[data-theme="dark"] #oracle-game-panel .stage-pill {
  border-color: rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.08);
  color: rgba(219, 232, 255, 0.72);
}

body[data-theme="dark"] #oracle-game-panel .stage-pill.is-active {
  border-color: rgba(106, 236, 216, 0.34);
  background: rgba(0, 180, 150, 0.2);
  color: rgba(206, 255, 245, 0.96);
}

body[data-theme="dark"] #oracle-game-panel .oracle-hint-badge {
  border-color: rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.9);
}

@media (max-width: 640px) {
  #oracle-game-panel #randomizer-container {
    padding: 10px 8px;
    border-radius: 18px;
  }

  #oracle-game-panel .oracle-shell {
    gap: 10px;
  }

  #oracle-game-panel .oracle-orb {
    width: 72px;
    height: 72px;
  }

  #oracle-game-panel .oracle-card {
    padding: 13px;
    border-radius: 18px;
  }

  #oracle-game-panel .oracle-step-title {
    font-size: 0.89rem;
  }

  #oracle-game-panel .oracle-step-hint {
    font-size: 0.8rem;
    line-height: 1.35;
  }

  #oracle-game-panel .oracle-grid {
    grid-template-columns: 1fr;
  }

  #oracle-game-panel .oracle-chip {
    min-height: 68px;
    padding: 10px 10px;
  }

  #oracle-game-panel .oracle-chip .oracle-chip-text {
    font-size: 0.9rem;
  }

  #oracle-game-panel .oracle-chip .oracle-chip-sub {
    font-size: 0.76rem;
  }

  #oracle-game-panel .oracle-status-panel {
    padding: 11px 12px;
  }

  #oracle-game-panel .stage-pill {
    font-size: 0.62rem;
  }
}

/* ===== Practice Compact Hub (2026-02-23) ===== */
#quiz-container .practice-hub-nav {
  position: sticky;
  top: 6px;
  z-index: 7;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  padding: 6px;
  border-radius: 15px;
  border: 1px solid rgba(8, 18, 34, 0.1);
  background: linear-gradient(
    160deg,
    rgba(255, 255, 255, 0.95),
    rgba(246, 250, 255, 0.93)
  );
  box-shadow: 0 12px 24px rgba(15, 23, 42, 0.1);
  backdrop-filter: blur(8px);
}

#quiz-container .practice-hub-tab {
  min-height: 40px;
  border: 1px solid transparent;
  border-radius: 11px;
  touch-action: pan-y pinch-zoom;
  background: transparent;
  color: rgba(8, 18, 34, 0.68);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  cursor: pointer;
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    border-color 0.18s ease,
    background 0.18s ease;
}

#quiz-container .practice-hub-tab:hover {
  transform: translateY(-1px);
  border-color: rgba(0, 162, 255, 0.24);
}

#quiz-container .practice-hub-tab.is-active {
  color: rgba(8, 18, 34, 0.92);
  border-color: rgba(0, 162, 255, 0.34);
  background: linear-gradient(
    145deg,
    rgba(229, 248, 255, 0.98),
    rgba(246, 252, 255, 0.94)
  );
  box-shadow: 0 10px 20px rgba(0, 162, 255, 0.14);
}

#quiz-container .practice-hub-tab:focus-visible {
  outline: 2px solid rgba(0, 162, 255, 0.62);
  outline-offset: 2px;
}

#quiz-container .practice-hub-glance {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

#quiz-container .practice-hub-glance-card {
  border: 1px solid rgba(8, 18, 34, 0.1);
  border-radius: 16px;
  touch-action: pan-y pinch-zoom;
  padding: 10px 11px;
  background:
    linear-gradient(
      160deg,
      rgba(255, 255, 255, 0.95),
      rgba(247, 252, 255, 0.9)
    ),
    radial-gradient(
      180px 70px at 84% -15%,
      rgba(0, 210, 255, 0.1),
      rgba(255, 255, 255, 0)
    );
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.1);
  display: grid;
  gap: 4px;
  text-align: left;
  cursor: pointer;
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    border-color 0.18s ease;
}

#quiz-container .practice-hub-glance-card:hover {
  transform: translateY(-1px);
  border-color: rgba(0, 162, 255, 0.3);
  box-shadow: 0 16px 34px rgba(10, 34, 66, 0.14);
}

#quiz-container .practice-hub-glance-card:focus-visible {
  outline: 2px solid rgba(0, 162, 255, 0.62);
  outline-offset: 2px;
}

#quiz-container .practice-hub-glance-title {
  font-size: 0.75rem;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(8, 18, 34, 0.68);
}

#quiz-container .practice-hub-glance-meta {
  font-size: 0.92rem;
  font-weight: 900;
  line-height: 1.2;
  color: rgba(8, 18, 34, 0.94);
}

#quiz-container .practice-hub-glance-sub {
  font-size: 0.76rem;
  line-height: 1.35;
  color: rgba(8, 18, 34, 0.62);
}

#quiz-container .practice-hub-pane {
  display: grid;
  gap: 12px;
}

#quiz-container .practice-hub-pane[hidden] {
  display: none !important;
}

#quiz-container[data-practice-hub-tab="games"]
  .practice-hub-pane[data-practice-hub-pane="games"] {
  animation: practiceHubPaneIn 220ms ease;
}

#quiz-container[data-practice-hub-tab="track"]
  .practice-hub-pane[data-practice-hub-pane="track"] {
  animation: practiceHubPaneIn 220ms ease;
}

#quiz-container[data-practice-hub-tab="coach"]
  .practice-hub-pane[data-practice-hub-pane="coach"] {
  animation: practiceHubPaneIn 220ms ease;
}

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

body[data-theme="dark"] #quiz-container .practice-hub-nav {
  border-color: rgba(255, 255, 255, 0.14);
  background: linear-gradient(
    160deg,
    rgba(255, 255, 255, 0.1),
    rgba(255, 255, 255, 0.06)
  );
  box-shadow: 0 16px 38px rgba(0, 0, 0, 0.42);
}

body[data-theme="dark"] #quiz-container .practice-hub-tab {
  color: rgba(219, 232, 255, 0.72);
}

body[data-theme="dark"] #quiz-container .practice-hub-tab.is-active {
  color: rgba(255, 255, 255, 0.94);
  border-color: rgba(106, 236, 216, 0.3);
  background: linear-gradient(
    145deg,
    rgba(0, 180, 150, 0.2),
    rgba(255, 255, 255, 0.1)
  );
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.34);
}

body[data-theme="dark"] #quiz-container .practice-hub-glance-card {
  border-color: rgba(255, 255, 255, 0.14);
  background:
    linear-gradient(
      160deg,
      rgba(255, 255, 255, 0.1),
      rgba(255, 255, 255, 0.06)
    ),
    radial-gradient(
      180px 70px at 84% -15%,
      rgba(0, 210, 255, 0.12),
      rgba(255, 255, 255, 0)
    );
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.38);
}

body[data-theme="dark"] #quiz-container .practice-hub-glance-title {
  color: rgba(219, 232, 255, 0.68);
}

body[data-theme="dark"] #quiz-container .practice-hub-glance-meta {
  color: rgba(255, 255, 255, 0.92);
}

body[data-theme="dark"] #quiz-container .practice-hub-glance-sub {
  color: rgba(219, 232, 255, 0.76);
}

@media (max-width: 860px) {
  #quiz-container .practice-hub-glance {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  #quiz-container .practice-hub-nav {
    top: 4px;
    gap: 6px;
    padding: 5px;
    border-radius: 13px;
  }

  #quiz-container .practice-hub-tab {
    min-height: 36px;
    font-size: 0.68rem;
  }

  #quiz-container .practice-hub-glance-card {
    border-radius: 14px;
    padding: 9px 10px;
    gap: 3px;
  }

  #quiz-container .practice-hub-glance-title {
    font-size: 0.7rem;
  }

  #quiz-container .practice-hub-glance-meta {
    font-size: 0.86rem;
  }

  #quiz-container .practice-hub-glance-sub {
    font-size: 0.74rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  #quiz-container .practice-hub-tab,
  #quiz-container .practice-hub-glance-card {
    transition: none;
  }

  #quiz-container .practice-hub-pane {
    animation: none !important;
  }
}

/* ===== Galaxy COSMOS Philosophy (2026-02-23) ===== */
.galaxy-moon-core {
  border: 0;
  padding: 0;
  background: none;
  appearance: none;
  -webkit-appearance: none;
  font: inherit;
  color: inherit;
  cursor: pointer;
}

.galaxy-moon-core:focus-visible {
  outline: none;
}

.galaxy-moon-core:hover .moon-core-disk,
.galaxy-moon-core:focus-visible .moon-core-disk {
  transform: translateY(-1px) scale(1.04);
}

.galaxy-moon-core:focus-visible .moon-core-disk {
  box-shadow:
    0 0 0 3px rgba(122, 228, 255, 0.45),
    0 18px 48px rgba(6, 14, 36, 0.54),
    inset 0 -10px 18px rgba(140, 170, 210, 0.2);
}

.moon-core-action {
  position: absolute;
  left: 50%;
  top: calc(50% + min(42vw, 214px) * 0.48);
  transform: translateX(-50%);
  padding: 5px 10px;
  border-radius: 999px;
  border: 1px solid rgba(146, 212, 255, 0.36);
  background: linear-gradient(
    180deg,
    rgba(10, 24, 56, 0.74),
    rgba(7, 18, 42, 0.72)
  );
  color: rgba(219, 244, 255, 0.96);
  font-size: 0.6rem;
  font-weight: 900;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  white-space: nowrap;
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.24);
  z-index: 6;
}

.galaxy-moon-core.is-cosmos-pulse .moon-core-glow {
  animation: cosmosMoonGlow 720ms ease-out;
}

.galaxy-moon-core.is-cosmos-pulse .moon-core-disk {
  animation: cosmosMoonDisk 720ms ease-out;
}

@keyframes cosmosMoonGlow {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  45% {
    transform: scale(1.18);
    opacity: 0.92;
  }
  100% {
    transform: scale(1.02);
    opacity: 1;
  }
}

@keyframes cosmosMoonDisk {
  0% {
    transform: scale(1);
  }
  48% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1.03);
  }
}

#cosmos-philosophy-modal .cosmos-philosophy-modal-content {
  position: relative;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  max-width: 900px;
  width: min(900px, calc(100% - 16px));
  height: min(92vh, 920px);
  height: min(92dvh, 920px);
  max-height: 92vh;
  max-height: 92dvh;
  border-radius: 28px 28px 0 0;
  background:
    radial-gradient(
      760px 220px at 8% -12%,
      rgba(0, 210, 255, 0.16),
      transparent 58%
    ),
    radial-gradient(
      760px 220px at 92% 0%,
      rgba(255, 206, 84, 0.12),
      transparent 62%
    ),
    linear-gradient(
      160deg,
      rgba(255, 255, 255, 0.98),
      rgba(244, 249, 255, 0.95)
    );
  border: 1px solid rgba(8, 18, 34, 0.12);
}

#cosmos-philosophy-modal .cosmos-philosophy-modal-content::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.16;
  background: repeating-linear-gradient(
    115deg,
    rgba(8, 18, 34, 0.06) 0px,
    rgba(8, 18, 34, 0.06) 1px,
    transparent 1px,
    transparent 5px
  );
  mix-blend-mode: multiply;
}

#cosmos-philosophy-modal .cosmos-philosophy-body {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 14px;
  padding: 14px 14px 18px;
}

.cosmos-philosophy-hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  border-radius: 20px;
  border: 1px solid rgba(8, 18, 34, 0.1);
  background: rgba(255, 255, 255, 0.74);
  box-shadow: 0 16px 34px rgba(15, 23, 42, 0.1);
  padding: 13px 14px;
}

.cosmos-philosophy-hero::after {
  content: "";
  position: absolute;
  inset: -1px;
  pointer-events: none;
  z-index: 0;
  opacity: 0.52;
  background:
    radial-gradient(
      420px 160px at 4% -16%,
      rgba(255, 255, 255, 0.56),
      transparent 60%
    ),
    linear-gradient(
      118deg,
      rgba(255, 255, 255, 0) 36%,
      rgba(255, 255, 255, 0.38) 50%,
      rgba(255, 255, 255, 0) 64%
    );
}

.cosmos-philosophy-hero > * {
  position: relative;
  z-index: 1;
}

.cosmos-philosophy-kicker {
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 900;
  color: rgba(8, 18, 34, 0.62);
}

.cosmos-editorial-row {
  margin-top: 6px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.cosmos-editorial-chip,
.cosmos-editorial-issue {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 20px;
  border-radius: 999px;
  padding: 2px 8px;
  font-size: 0.62rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.cosmos-editorial-chip {
  color: rgba(8, 18, 34, 0.84);
  border: 1px solid rgba(8, 18, 34, 0.16);
  background: rgba(255, 255, 255, 0.68);
}

.cosmos-editorial-issue {
  color: rgba(0, 86, 124, 0.92);
  border: 1px solid rgba(0, 162, 255, 0.26);
  background: rgba(223, 244, 255, 0.88);
}

.cosmos-philosophy-title {
  margin: 6px 0 0;
  font-size: clamp(1.15rem, 2.1vw, 1.46rem);
  line-height: 1.2;
  letter-spacing: -0.01em;
}

.cosmos-philosophy-desc {
  margin: 8px 0 0;
  color: rgba(8, 18, 34, 0.72);
  font-size: 0.9rem;
  line-height: 1.45;
}

.cosmos-philosophy-desc--editorial::first-letter {
  float: left;
  margin: 4px 7px 0 0;
  font-size: 1.95rem;
  line-height: 0.9;
  font-weight: 900;
  color: rgba(8, 18, 34, 0.88);
}

.cosmos-philosophy-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.cosmos-card {
  border-radius: 16px;
  border: 1px solid rgba(8, 18, 34, 0.1);
  background: rgba(255, 255, 255, 0.86);
  box-shadow: 0 14px 30px rgba(15, 23, 42, 0.08);
  padding: 11px 12px;
}

.cosmos-card h3 {
  margin: 0 0 8px;
  font-size: 0.92rem;
  font-weight: 900;
  color: rgba(8, 18, 34, 0.92);
}

.cosmos-card p {
  margin: 0;
  font-size: 0.84rem;
  line-height: 1.44;
  color: rgba(8, 18, 34, 0.76);
}

.cosmos-card--formula {
  grid-column: 1 / -1;
}

.cosmos-pairs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.cosmos-pairs--compact {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.cosmos-pair {
  border-radius: 12px;
  border: 1px solid rgba(8, 18, 34, 0.1);
  background: rgba(245, 251, 255, 0.92);
  padding: 8px 9px;
  display: grid;
  gap: 4px;
}

.cosmos-pair span {
  font-size: 0.66rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  color: rgba(8, 18, 34, 0.54);
  text-transform: uppercase;
}

.cosmos-pair b {
  font-size: 0.83rem;
  line-height: 1.3;
  color: rgba(8, 18, 34, 0.92);
}

.cosmos-divider {
  margin: 9px 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    rgba(8, 18, 34, 0.06),
    rgba(8, 18, 34, 0.16),
    rgba(8, 18, 34, 0.06)
  );
}

.cosmos-list {
  margin: 0;
  padding-left: 18px;
  display: grid;
  gap: 6px;
  color: rgba(8, 18, 34, 0.78);
  font-size: 0.84rem;
  line-height: 1.4;
}

.cosmos-expert-strip {
  display: grid;
  grid-template-columns: minmax(240px, 0.82fr) minmax(0, 1.18fr);
  align-items: stretch;
  gap: 12px;
}

.cosmos-expert-identity {
  border-radius: 18px;
  border: 1px solid rgba(8, 18, 34, 0.1);
  background: rgba(255, 255, 255, 0.88);
  box-shadow: 0 14px 30px rgba(15, 23, 42, 0.08);
  padding: 11px 12px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  margin: 0;
}

.cosmos-expert-photo-wrap {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  padding: 4px;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: linear-gradient(
    145deg,
    rgba(0, 171, 225, 0.28),
    rgba(255, 206, 84, 0.22)
  );
  box-shadow: 0 12px 24px rgba(15, 23, 42, 0.14);
}

.cosmos-expert-photo-wrap::after {
  content: "";
  position: absolute;
  inset: -24%;
  background: linear-gradient(
    120deg,
    rgba(255, 255, 255, 0) 36%,
    rgba(255, 255, 255, 0.74) 50%,
    rgba(255, 255, 255, 0) 64%
  );
  transform: translateX(-140%) rotate(14deg);
  opacity: 0;
  pointer-events: none;
  z-index: 3;
}

.cosmos-expert-photo {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid rgba(255, 255, 255, 0.92);
  background: rgba(230, 238, 248, 0.92);
}

.cosmos-expert-copy {
  min-width: 0;
  display: grid;
  gap: 3px;
  align-content: center;
  text-align: left;
}

.cosmos-expert-kicker {
  font-size: 0.64rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 900;
  color: rgba(8, 18, 34, 0.56);
}

.cosmos-expert-name {
  font-size: 1rem;
  font-weight: 900;
  line-height: 1.2;
  color: rgba(8, 18, 34, 0.92);
  text-wrap: balance;
}

.cosmos-expert-role {
  font-size: 0.78rem;
  line-height: 1.35;
  color: rgba(8, 18, 34, 0.66);
  font-weight: 700;
}

.cosmos-quote {
  margin: 0;
  padding: 13px 14px;
  border-radius: 18px;
  border: 1px solid rgba(8, 18, 34, 0.12);
  background: linear-gradient(
    145deg,
    rgba(228, 248, 255, 0.86),
    rgba(241, 251, 255, 0.92)
  );
  box-shadow: 0 14px 30px rgba(15, 23, 42, 0.08);
}

.cosmos-quote p {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.5;
  font-style: italic;
  color: rgba(8, 18, 34, 0.86);
}

.cosmos-quote footer {
  margin-top: 8px;
  font-size: 0.76rem;
  font-weight: 800;
  color: rgba(8, 18, 34, 0.62);
}

.cosmos-quote--solo {
  margin-top: 0;
}

.cosmos-quote--inline {
  min-height: 100%;
  display: grid;
  align-content: center;
  text-align: center;
}

.cosmos-quote--editorial {
  position: relative;
  text-align: center;
  padding: 16px 16px 14px 52px;
  border-color: rgba(8, 18, 34, 0.14);
  background:
    linear-gradient(
      150deg,
      rgba(244, 250, 255, 0.95),
      rgba(234, 246, 255, 0.9)
    ),
    radial-gradient(
      220px 80px at 20% 0%,
      rgba(255, 255, 255, 0.5),
      rgba(255, 255, 255, 0)
    );
}

.cosmos-quote--editorial::before {
  content: "“";
  position: absolute;
  left: 14px;
  top: 2px;
  font-size: 3.2rem;
  line-height: 1;
  font-weight: 900;
  color: rgba(8, 18, 34, 0.42);
}

.cosmos-quote--editorial p {
  font-size: 1.02rem;
  line-height: 1.62;
  text-wrap: balance;
}

.cosmos-philosophy-grid--editorial .cosmos-card {
  background:
    linear-gradient(
      160deg,
      rgba(255, 255, 255, 0.9),
      rgba(248, 252, 255, 0.84)
    ),
    radial-gradient(
      180px 64px at 82% -10%,
      rgba(0, 210, 255, 0.08),
      rgba(255, 255, 255, 0)
    );
  border-color: rgba(8, 18, 34, 0.12);
}

body[data-theme="dark"] .moon-core-action {
  border-color: rgba(132, 220, 255, 0.34);
  background: linear-gradient(
    180deg,
    rgba(18, 31, 60, 0.8),
    rgba(14, 22, 42, 0.78)
  );
  color: rgba(225, 246, 255, 0.96);
}

body[data-theme="dark"]
  #cosmos-philosophy-modal
  .cosmos-philosophy-modal-content {
  background:
    radial-gradient(
      760px 240px at 8% -12%,
      rgba(0, 210, 255, 0.16),
      transparent 58%
    ),
    radial-gradient(
      760px 220px at 92% 0%,
      rgba(106, 236, 216, 0.12),
      transparent 62%
    ),
    linear-gradient(160deg, rgba(12, 14, 24, 0.97), rgba(10, 12, 20, 0.95));
  border-color: rgba(255, 255, 255, 0.14);
}

body[data-theme="dark"]
  #cosmos-philosophy-modal
  .cosmos-philosophy-modal-content::after {
  opacity: 0.12;
  background: repeating-linear-gradient(
    115deg,
    rgba(255, 255, 255, 0.14) 0px,
    rgba(255, 255, 255, 0.14) 1px,
    transparent 1px,
    transparent 5px
  );
  mix-blend-mode: screen;
}

body[data-theme="dark"] .cosmos-philosophy-hero,
body[data-theme="dark"] .cosmos-card,
body[data-theme="dark"] .cosmos-quote {
  border-color: rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.08);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.34);
}

body[data-theme="dark"] .cosmos-expert-identity {
  border-color: rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.08);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.34);
}

body[data-theme="dark"] .cosmos-expert-photo-wrap {
  background: linear-gradient(
    145deg,
    rgba(106, 236, 216, 0.3),
    rgba(115, 180, 255, 0.22)
  );
}

body[data-theme="dark"] .cosmos-expert-photo {
  border-color: rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.08);
}

body[data-theme="dark"] .cosmos-philosophy-kicker,
body[data-theme="dark"] .cosmos-quote footer,
body[data-theme="dark"] .cosmos-pair span,
body[data-theme="dark"] .cosmos-expert-kicker {
  color: rgba(219, 232, 255, 0.68);
}

body[data-theme="dark"] .cosmos-philosophy-title,
body[data-theme="dark"] .cosmos-card h3,
body[data-theme="dark"] .cosmos-pair b,
body[data-theme="dark"] .cosmos-quote p,
body[data-theme="dark"] .cosmos-expert-name {
  color: rgba(255, 255, 255, 0.93);
}

body[data-theme="dark"] .cosmos-philosophy-desc,
body[data-theme="dark"] .cosmos-card p,
body[data-theme="dark"] .cosmos-list,
body[data-theme="dark"] .cosmos-expert-role {
  color: rgba(219, 232, 255, 0.78);
}

body[data-theme="dark"] .cosmos-pair {
  border-color: rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.06);
}

body[data-theme="dark"] .cosmos-divider {
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.08),
    rgba(255, 255, 255, 0.24),
    rgba(255, 255, 255, 0.08)
  );
}

body[data-theme="dark"] .cosmos-editorial-chip {
  color: rgba(255, 255, 255, 0.9);
  border-color: rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.1);
}

body[data-theme="dark"] .cosmos-editorial-issue {
  color: rgba(206, 255, 245, 0.95);
  border-color: rgba(106, 236, 216, 0.36);
  background: rgba(0, 180, 150, 0.18);
}

body[data-theme="dark"] .cosmos-philosophy-desc--editorial::first-letter {
  color: rgba(255, 255, 255, 0.94);
}

body[data-theme="dark"] .cosmos-quote--editorial {
  border-color: rgba(255, 255, 255, 0.16);
  background:
    linear-gradient(
      150deg,
      rgba(255, 255, 255, 0.1),
      rgba(255, 255, 255, 0.06)
    ),
    radial-gradient(
      220px 80px at 20% 0%,
      rgba(255, 255, 255, 0.2),
      rgba(255, 255, 255, 0)
    );
}

body[data-theme="dark"] .cosmos-quote--editorial::before {
  color: rgba(219, 232, 255, 0.44);
}

@media (max-width: 860px) {
  .cosmos-philosophy-grid {
    grid-template-columns: 1fr;
  }

  .cosmos-expert-strip {
    grid-template-columns: 1fr;
  }

  .cosmos-pairs,
  .cosmos-pairs--compact {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .moon-core-action {
    font-size: 0.55rem;
    padding: 4px 8px;
    letter-spacing: 0.1em;
  }

  #cosmos-philosophy-modal .cosmos-philosophy-modal-content {
    width: calc(100% - 8px);
    border-radius: 20px 20px 0 0;
  }

  #cosmos-philosophy-modal .cosmos-philosophy-body {
    padding: 12px 10px 16px;
    gap: 10px;
  }

  .cosmos-philosophy-hero,
  .cosmos-card,
  .cosmos-quote {
    padding: 10px;
    border-radius: 14px;
  }

  .cosmos-expert-identity {
    border-radius: 14px;
    padding: 10px 9px;
    gap: 9px;
    grid-template-columns: 86px minmax(0, 1fr);
  }

  .cosmos-expert-photo-wrap {
    width: 86px;
    height: 86px;
    justify-self: center;
  }

  .cosmos-quote--inline {
    border-radius: 14px;
    text-align: left;
  }

  .cosmos-quote--editorial {
    padding: 12px 10px 10px 36px;
  }

  .cosmos-quote--editorial::before {
    left: 10px;
    top: 0;
    font-size: 2.45rem;
  }

  .cosmos-expert-name {
    font-size: 0.9rem;
  }

  .cosmos-expert-kicker {
    font-size: 0.56rem;
    letter-spacing: 0.1em;
  }

  .cosmos-expert-role {
    font-size: 0.71rem;
    line-height: 1.32;
  }

  .cosmos-philosophy-desc,
  .cosmos-card p,
  .cosmos-list {
    font-size: 0.81rem;
  }

  .cosmos-pairs,
  .cosmos-pairs--compact {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .galaxy-moon-core,
  .galaxy-moon-core .moon-core-disk,
  .galaxy-moon-core .moon-core-glow {
    transition: none !important;
    animation: none !important;
  }
}

/* ===== COSMOS Motion Polish (2026-02-23) ===== */
#cosmos-philosophy-modal .cosmos-philosophy-hero,
#cosmos-philosophy-modal .cosmos-philosophy-grid,
#cosmos-philosophy-modal .cosmos-expert-strip,
#cosmos-philosophy-modal #cosmos-philosophy-close-btn {
  opacity: 0;
  transform: translateY(12px) scale(0.985);
}

#cosmos-philosophy-modal .cosmos-quote {
  opacity: 0;
  transform: translateX(14px) scale(0.985);
}

#cosmos-philosophy-modal .cosmos-expert-photo-wrap {
  opacity: 0;
  transform: scale(0.9);
}

#cosmos-philosophy-modal.active .cosmos-philosophy-hero {
  animation: cosmosFadeUp 420ms cubic-bezier(0.2, 0.9, 0.2, 1) 20ms both;
}

#cosmos-philosophy-modal.active .cosmos-philosophy-grid {
  animation: cosmosFadeUp 460ms cubic-bezier(0.2, 0.9, 0.2, 1) 90ms both;
}

#cosmos-philosophy-modal.active .cosmos-expert-strip {
  animation: cosmosFadeUp 500ms cubic-bezier(0.2, 0.9, 0.2, 1) 150ms both;
}

#cosmos-philosophy-modal.active .cosmos-quote {
  animation: cosmosSlideRight 520ms cubic-bezier(0.2, 0.9, 0.2, 1) 210ms both;
}

#cosmos-philosophy-modal.active .cosmos-expert-photo-wrap {
  animation: cosmosPhotoIn 560ms cubic-bezier(0.16, 1, 0.3, 1) 240ms both;
}

#cosmos-philosophy-modal.active .cosmos-expert-photo-wrap::after {
  animation: cosmosPhotoSheen 940ms cubic-bezier(0.2, 0.9, 0.2, 1) 360ms both;
}

#cosmos-philosophy-modal.active #cosmos-philosophy-close-btn {
  animation: cosmosFadeUp 420ms cubic-bezier(0.2, 0.9, 0.2, 1) 260ms both;
}

@keyframes cosmosFadeUp {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.985);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes cosmosSlideLeft {
  from {
    opacity: 0;
    transform: translateX(-14px) scale(0.985);
  }
  to {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}

@keyframes cosmosSlideRight {
  from {
    opacity: 0;
    transform: translateX(14px) scale(0.985);
  }
  to {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}

@keyframes cosmosPhotoIn {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes cosmosPhotoSheen {
  0% {
    opacity: 0;
    transform: translateX(-140%) rotate(14deg);
  }
  14% {
    opacity: 0.88;
  }
  68% {
    opacity: 0.74;
    transform: translateX(84%) rotate(14deg);
  }
  100% {
    opacity: 0;
    transform: translateX(148%) rotate(14deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  #cosmos-philosophy-modal .cosmos-philosophy-hero,
  #cosmos-philosophy-modal .cosmos-philosophy-grid,
  #cosmos-philosophy-modal .cosmos-expert-strip,
  #cosmos-philosophy-modal .cosmos-quote,
  #cosmos-philosophy-modal .cosmos-expert-photo-wrap,
  #cosmos-philosophy-modal #cosmos-philosophy-close-btn {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }

  #cosmos-philosophy-modal .cosmos-expert-photo-wrap::after {
    animation: none !important;
    opacity: 0 !important;
  }
}

/* ===== Practice Usability Pass (2026-02-23) ===== */
#quiz-container .quiz-view-tabs {
  position: sticky;
  top: 0;
  z-index: 9;
  backdrop-filter: blur(8px);
}

#quiz-container .game-filters {
  position: sticky;
  top: 58px;
  z-index: 8;
  padding: 6px;
  border-radius: 14px;
  border: 1px solid rgba(8, 18, 34, 0.1);
  background: linear-gradient(
    160deg,
    rgba(255, 255, 255, 0.94),
    rgba(246, 250, 255, 0.92)
  );
  box-shadow: 0 12px 24px rgba(15, 23, 42, 0.1);
}

#quiz-container .quiz-menu-btn .game-card-title {
  text-wrap: balance;
}

#quiz-container .quiz-menu-btn .game-card-desc {
  max-width: 62ch;
}

#quiz-container .leaderboard-row-left {
  min-width: 0;
  flex: 1 1 auto;
}

#quiz-container .leaderboard-row-left strong,
#quiz-container .leaderboard-row-left span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#quiz-container .leaderboard-row .xp {
  flex: 0 0 auto;
}
#quiz-container .leaderboard-row-right {
  flex: 0 0 auto;
}

#game-overlay .game-back,
#game-overlay .game-close {
  min-height: 36px;
}

#game-overlay #conflict-options.conflict-options .conflict-btn {
  text-wrap: pretty;
}

#oracle-game-panel .oracle-chip {
  align-items: flex-start;
}

#oracle-game-panel .oracle-chip .oracle-chip-copy {
  min-width: 0;
}

body[data-theme="dark"] #quiz-container .game-filters {
  border-color: rgba(255, 255, 255, 0.14);
  background: linear-gradient(
    160deg,
    rgba(255, 255, 255, 0.1),
    rgba(255, 255, 255, 0.06)
  );
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.42);
}

@media (max-width: 640px) {
  #quiz-container .game-filters {
    top: 54px;
    border-radius: 12px;
    padding: 5px;
  }

  #quiz-container .quiz-menu-btn .game-card-desc {
    max-width: 100%;
  }

  #game-overlay .game-back,
  #game-overlay .game-close {
    min-height: 34px;
  }
}

.luna-sw-update {
  position: fixed;
  left: 50%;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 14px);
  transform: translateX(-50%) translateY(10px);
  width: min(640px, calc(100% - 20px));
  z-index: 200000;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 11px 12px;
  border-radius: 14px;
  border: 1px solid rgba(0, 210, 255, 0.34);
  background:
    radial-gradient(
      120% 120% at 0% 0%,
      rgba(0, 210, 255, 0.18),
      rgba(255, 255, 255, 0) 58%
    ),
    radial-gradient(
      120% 120% at 100% 100%,
      rgba(255, 215, 64, 0.14),
      rgba(255, 255, 255, 0) 58%
    ),
    rgba(255, 255, 255, 0.98);
  box-shadow: 0 18px 38px rgba(15, 23, 42, 0.2);
  backdrop-filter: blur(12px);
  opacity: 0;
  pointer-events: none;
  transition:
    opacity 0.2s ease,
    transform 0.2s ease;
}

.luna-sw-update.is-visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
}

.luna-sw-update__text {
  font-size: 0.84rem;
  font-weight: 760;
  color: rgba(8, 18, 34, 0.84);
  line-height: 1.3;
}

.luna-sw-update__actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.luna-sw-update__actions button {
  min-height: 34px;
  border-radius: 10px;
  border: 1px solid rgba(8, 18, 34, 0.14);
  background: rgba(255, 255, 255, 0.92);
  color: rgba(8, 18, 34, 0.84);
  font-size: 0.75rem;
  font-weight: 840;
  letter-spacing: 0.01em;
  padding: 0 12px;
  cursor: pointer;
}

#pwa-update-refresh {
  border-color: rgba(0, 210, 255, 0.38);
  background: rgba(0, 210, 255, 0.14);
  color: rgba(0, 80, 96, 0.95);
}

#pwa-update-dismiss {
  border-color: rgba(8, 18, 34, 0.16);
}

@media (max-width: 640px) {
  .luna-sw-update {
    grid-template-columns: 1fr;
    justify-items: stretch;
    gap: 8px;
    padding: 10px;
    border-radius: 12px;
  }
  .luna-sw-update__text {
    font-size: 0.76rem;
  }
  .luna-sw-update__actions {
    width: 100%;
  }
  .luna-sw-update__actions button {
    flex: 1 1 50%;
    min-height: 32px;
    font-size: 0.71rem;
    padding: 0 8px;
  }
}

/* ===== Practice Premium Refresh (2026-02-28) ===== */
#quiz-container .game-shell-body {
  overflow: visible;
}

#quiz-container .game-hero {
  --hero-ring-progress: 0%;
  border: 1px solid rgba(0, 170, 190, 0.22);
  box-shadow: 0 24px 64px rgba(8, 26, 52, 0.16);
}

#quiz-container .game-hero-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

#quiz-container .game-hero-highlight {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 26px;
  border-radius: 999px;
  padding: 0 10px;
  border: 1px solid rgba(8, 18, 34, 0.12);
  background: rgba(255, 255, 255, 0.82);
  color: rgba(8, 18, 34, 0.82);
  font-size: 0.66rem;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

#quiz-container .game-hero[data-hero-tone="role"] .game-hero-highlight {
  border-color: rgba(255, 180, 55, 0.34);
  background: rgba(255, 231, 173, 0.72);
  color: rgba(106, 68, 0, 0.96);
}

#quiz-container .game-hero[data-hero-tone="done"] .game-hero-highlight {
  border-color: rgba(98, 208, 130, 0.34);
  background: rgba(214, 255, 223, 0.72);
  color: rgba(25, 98, 47, 0.95);
}

#quiz-container .game-hero[data-hero-tone="next"] .game-hero-highlight {
  border-color: rgba(0, 170, 190, 0.34);
  background: rgba(198, 247, 255, 0.75);
  color: rgba(0, 90, 104, 0.95);
}

#quiz-container .game-hero-burst {
  position: absolute;
  width: 160px;
  height: 160px;
  border-radius: 999px;
  pointer-events: none;
  filter: blur(2px);
  opacity: 0.42;
  background: radial-gradient(
    circle,
    rgba(255, 255, 255, 0.68),
    rgba(255, 255, 255, 0)
  );
  animation: practiceHeroAura 4.6s ease-in-out infinite;
}

#quiz-container .game-hero-burst--left {
  left: -84px;
  top: -82px;
}

#quiz-container .game-hero-burst--right {
  right: -84px;
  bottom: -86px;
  animation-delay: 1.6s;
}

#quiz-container .game-hero-health {
  margin-top: 11px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items: stretch;
}

#quiz-container .game-hero-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

#quiz-container .game-hero-stat {
  border-radius: 13px;
  border: 1px solid rgba(8, 18, 34, 0.1);
  background: rgba(255, 255, 255, 0.74);
  padding: 7px 8px 6px;
  min-width: 0;
}

#quiz-container .game-hero-stat-k {
  display: block;
  font-size: 0.62rem;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(8, 18, 34, 0.58);
}

#quiz-container .game-hero-stat-v {
  display: block;
  margin-top: 3px;
  color: rgba(8, 18, 34, 0.93);
  font-size: 0.8rem;
  font-weight: 900;
  letter-spacing: 0.02em;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

#quiz-container .game-hero-ring {
  width: 66px;
  height: 66px;
  position: relative;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: conic-gradient(
    from -90deg,
    rgba(0, 170, 190, 0.95) var(--hero-ring-progress),
    rgba(8, 18, 34, 0.14) 0
  );
  box-shadow: 0 16px 34px rgba(8, 26, 52, 0.15);
}

#quiz-container .game-hero-ring::after {
  content: "";
  position: absolute;
  width: 50px;
  height: 50px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(8, 18, 34, 0.1);
}

#quiz-container .game-hero-ring-val {
  position: relative;
  z-index: 1;
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  color: rgba(8, 18, 34, 0.88);
}

#quiz-container .game-filters {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

#quiz-container .game-filter-chip {
  min-width: 0;
  border-radius: 14px;
  padding: 9px 10px;
  letter-spacing: 0.08em;
  font-size: 0.7rem;
}

#quiz-container .practice-shift-strip {
  position: relative;
  top: auto;
  z-index: auto;
  border: 1px solid rgba(8, 18, 34, 0.1);
  border-radius: 16px;
  padding: 10px 11px 11px;
  background:
    linear-gradient(
      160deg,
      rgba(255, 255, 255, 0.94),
      rgba(245, 252, 255, 0.9)
    ),
    radial-gradient(
      320px 120px at 8% -20%,
      rgba(0, 210, 255, 0.14),
      rgba(255, 255, 255, 0)
    );
  box-shadow: 0 14px 28px rgba(15, 23, 42, 0.1);
  backdrop-filter: blur(8px);
}

#quiz-container .practice-insights-shell .practice-focus-strip {
  align-self: stretch;
}

#quiz-container .practice-insights-shell .practice-duel-callout {
  min-height: 100%;
  align-self: stretch;
}

#quiz-container .practice-shift-kicker {
  font-size: 0.62rem;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(8, 18, 34, 0.58);
  margin-bottom: 8px;
}

#quiz-container .practice-shift-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

#quiz-container .practice-shift-item {
  border-radius: 12px;
  border: 1px solid rgba(8, 18, 34, 0.1);
  background: rgba(255, 255, 255, 0.76);
  padding: 7px 8px;
  min-width: 0;
}

#quiz-container .practice-shift-item-k {
  font-size: 0.58rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(8, 18, 34, 0.56);
}

#quiz-container .practice-shift-item-v {
  margin-top: 3px;
  font-size: 0.75rem;
  font-weight: 900;
  color: rgba(8, 18, 34, 0.88);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#quiz-container .practice-shift-strip[data-mission-state="done"] {
  border-color: rgba(98, 208, 130, 0.34);
}

#quiz-container .skill-map {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

#quiz-container .skill-item {
  border-radius: 16px;
  padding: 10px 11px;
  border: 1px solid rgba(8, 18, 34, 0.12);
  background:
    linear-gradient(
      160deg,
      rgba(255, 255, 255, 0.9),
      rgba(245, 250, 255, 0.88)
    ),
    radial-gradient(
      220px 70px at 90% -15%,
      rgba(0, 210, 255, 0.12),
      rgba(255, 255, 255, 0) 70%
    );
  box-shadow: 0 10px 24px rgba(8, 18, 34, 0.08);
}

#quiz-container .skill-item-head {
  margin-bottom: 7px;
  min-width: 0;
}

#quiz-container .skill-item-copy {
  min-width: 0;
}

#quiz-container .skill-item-copy .skill-label,
#quiz-container .skill-item-copy .skill-meta {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#quiz-container .skill-road-rank {
  margin-left: auto;
  min-width: 22px;
  min-height: 22px;
  border-radius: 999px;
  border: 1px solid rgba(8, 18, 34, 0.12);
  display: inline-grid;
  place-items: center;
  font-size: 0.64rem;
  font-weight: 900;
  color: rgba(8, 18, 34, 0.72);
  background: rgba(255, 255, 255, 0.72);
}

#quiz-container .skill-item-flags {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin: 0 0 6px;
}

#quiz-container .skill-item-flag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 20px;
  border-radius: 999px;
  border: 1px solid rgba(8, 18, 34, 0.1);
  background: rgba(255, 255, 255, 0.72);
  padding: 0 8px;
  font-size: 0.62rem;
  font-weight: 900;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: rgba(8, 18, 34, 0.72);
}

#quiz-container .skill-road-next {
  margin-top: 6px;
  font-size: 0.68rem;
  color: rgba(8, 18, 34, 0.66);
}

#quiz-container .skill-item[data-skill-state="top"] .skill-road-rank {
  border-color: rgba(255, 180, 55, 0.38);
  background: rgba(255, 232, 181, 0.84);
  color: rgba(116, 78, 0, 0.95);
}

#quiz-container .quiz-menu-btn {
  border-width: 1px;
  border-color: rgba(8, 18, 34, 0.1);
}

#quiz-container .quiz-menu-btn .game-card-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: flex-start;
  min-height: 22px;
  border-radius: 999px;
  padding: 0 8px;
  border: 1px solid rgba(8, 18, 34, 0.11);
  background: rgba(255, 255, 255, 0.75);
  color: rgba(8, 18, 34, 0.74);
  font-size: 0.62rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-top: 2px;
}

#quiz-container .quiz-menu-btn[data-card-tone="recommended"] {
  border-color: rgba(255, 188, 74, 0.42);
  box-shadow:
    0 20px 44px rgba(255, 188, 74, 0.18),
    0 14px 30px rgba(8, 18, 34, 0.12);
}

#quiz-container .quiz-menu-btn[data-card-tone="recommended"] .game-card-badge {
  border-color: rgba(255, 188, 74, 0.4);
  background: rgba(255, 237, 194, 0.88);
  color: rgba(120, 74, 0, 0.95);
}

#quiz-container .quiz-menu-btn[data-card-tone="next"] {
  border-color: rgba(0, 170, 190, 0.34);
  box-shadow:
    0 22px 48px rgba(0, 170, 190, 0.16),
    0 14px 30px rgba(8, 18, 34, 0.12);
}

#quiz-container .quiz-menu-btn[data-card-tone="next"] .game-card-badge {
  border-color: rgba(0, 170, 190, 0.34);
  background: rgba(195, 247, 255, 0.9);
  color: rgba(0, 84, 97, 0.95);
}

#quiz-container .quiz-menu-btn[data-card-tone="done"] {
  border-color: rgba(98, 208, 130, 0.36);
  box-shadow:
    0 20px 42px rgba(64, 186, 104, 0.16),
    0 14px 30px rgba(8, 18, 34, 0.12);
}

#quiz-container .quiz-menu-btn[data-card-tone="done"] .game-card-badge {
  border-color: rgba(98, 208, 130, 0.35);
  background: rgba(214, 255, 223, 0.9);
  color: rgba(25, 98, 47, 0.95);
}

#quiz-container .quiz-menu-btn[data-card-tone="locked"] .game-card-badge {
  border-color: rgba(255, 133, 108, 0.32);
  background: rgba(255, 222, 213, 0.9);
  color: rgba(132, 43, 22, 0.95);
}

#quiz-container .quiz-menu-btn .game-card-title,
#quiz-container .quiz-menu-btn .game-card-desc,
#quiz-container .quiz-menu-btn .game-card-pill {
  overflow-wrap: anywhere;
}

#quiz-container .practice-empty-state {
  border-radius: 18px;
  border: 1px dashed rgba(8, 18, 34, 0.2);
  background: linear-gradient(
    160deg,
    rgba(255, 255, 255, 0.8),
    rgba(243, 251, 255, 0.82)
  );
  box-shadow: 0 14px 28px rgba(8, 18, 34, 0.08);
  text-align: center;
  padding: 14px 12px 12px;
}

#quiz-container .practice-empty-icon {
  font-size: 1.45rem;
  margin-bottom: 6px;
}

#quiz-container .practice-empty-title {
  font-size: 0.95rem;
  font-weight: 900;
  color: rgba(8, 18, 34, 0.9);
}

#quiz-container .practice-empty-sub {
  margin-top: 5px;
  font-size: 0.78rem;
  color: rgba(8, 18, 34, 0.66);
  line-height: 1.4;
}

#quiz-container .practice-empty-btn {
  margin-top: 10px;
  min-height: 34px;
  border-radius: 11px;
  border: 1px solid rgba(0, 170, 190, 0.28);
  background: rgba(195, 247, 255, 0.88);
  color: rgba(0, 84, 97, 0.95);
  font-size: 0.74rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0 12px;
}

#quiz-container .practice-onboarding {
  position: sticky;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 14px);
  z-index: 12;
  pointer-events: none;
  opacity: 0;
  transform: translateY(8px);
  transition:
    opacity 0.2s ease,
    transform 0.2s ease;
}

#quiz-container .practice-onboarding.is-visible {
  opacity: 1;
  transform: translateY(0);
}

#quiz-container .practice-onboarding-card {
  pointer-events: auto;
  border-radius: 16px;
  border: 1px solid rgba(0, 170, 190, 0.3);
  background:
    radial-gradient(
      220px 90px at 0% 0%,
      rgba(0, 210, 255, 0.16),
      rgba(255, 255, 255, 0) 62%
    ),
    linear-gradient(
      160deg,
      rgba(255, 255, 255, 0.96),
      rgba(245, 252, 255, 0.96)
    );
  box-shadow: 0 16px 34px rgba(8, 26, 52, 0.16);
  padding: 11px 11px 10px;
}

#quiz-container .practice-onboarding-kicker {
  font-size: 0.6rem;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(8, 18, 34, 0.6);
}

#quiz-container .practice-onboarding-title {
  margin-top: 4px;
  font-size: 0.9rem;
  font-weight: 900;
  color: rgba(8, 18, 34, 0.9);
}

#quiz-container .practice-onboarding-list {
  margin: 8px 0 0;
  padding-left: 18px;
  display: grid;
  gap: 4px;
  color: rgba(8, 18, 34, 0.72);
  font-size: 0.76rem;
  line-height: 1.35;
}

#quiz-container .practice-onboarding-actions {
  margin-top: 9px;
  display: flex;
  gap: 8px;
}

#quiz-container .practice-onboarding-btn {
  flex: 1;
  min-height: 33px;
  border-radius: 10px;
  border: 1px solid rgba(0, 170, 190, 0.28);
  background: rgba(195, 247, 255, 0.92);
  color: rgba(0, 84, 97, 0.95);
  font-size: 0.7rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

#quiz-container .practice-onboarding-btn.is-ghost {
  border-color: rgba(8, 18, 34, 0.12);
  background: rgba(255, 255, 255, 0.9);
  color: rgba(8, 18, 34, 0.76);
}

@keyframes practiceHeroAura {
  0%,
  100% {
    transform: scale(1);
    opacity: 0.28;
  }
  50% {
    transform: scale(1.14);
    opacity: 0.56;
  }
}

body[data-theme="dark"] #quiz-container .game-hero {
  border-color: rgba(160, 245, 255, 0.22);
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.42);
}

body[data-theme="dark"] #quiz-container .game-hero-highlight,
body[data-theme="dark"] #quiz-container .game-hero-stat,
body[data-theme="dark"] #quiz-container .practice-shift-item,
body[data-theme="dark"] #quiz-container .skill-item,
body[data-theme="dark"] #quiz-container .skill-item-flag,
body[data-theme="dark"] #quiz-container .skill-road-rank,
body[data-theme="dark"] #quiz-container .quiz-menu-btn .game-card-badge,
body[data-theme="dark"] #quiz-container .practice-empty-state,
body[data-theme="dark"] #quiz-container .practice-onboarding-card {
  background: rgba(255, 255, 255, 0.09);
  border-color: rgba(255, 255, 255, 0.16);
  color: rgba(255, 255, 255, 0.86);
}

body[data-theme="dark"] #quiz-container .practice-shift-strip,
body[data-theme="dark"] #quiz-container .game-filters {
  background: linear-gradient(
    160deg,
    rgba(255, 255, 255, 0.11),
    rgba(255, 255, 255, 0.07)
  );
  border-color: rgba(255, 255, 255, 0.16);
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.42);
}

body[data-theme="dark"] #quiz-container .practice-shift-item-k,
body[data-theme="dark"] #quiz-container .practice-shift-item-v,
body[data-theme="dark"] #quiz-container .skill-road-next,
body[data-theme="dark"] #quiz-container .practice-empty-sub,
body[data-theme="dark"] #quiz-container .practice-onboarding-list {
  color: rgba(219, 232, 255, 0.8);
}

body[data-theme="dark"] #quiz-container .practice-secondary-shell {
  border-color: rgba(255, 255, 255, 0.12);
  background:
    linear-gradient(
      160deg,
      rgba(255, 255, 255, 0.08),
      rgba(255, 255, 255, 0.05)
    ),
    radial-gradient(
      280px 120px at 0% 0%,
      rgba(0, 210, 255, 0.08),
      rgba(255, 255, 255, 0) 72%
    );
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.34);
}

@media (max-width: 900px) {
  #quiz-container .practice-launch-grid,
  #quiz-container .practice-insights-shell {
    grid-template-columns: 1fr;
  }
  #quiz-container .practice-shift-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  #quiz-container .skill-map {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  #quiz-container .practice-today-shell {
    gap: 10px;
  }
  #quiz-container .practice-launch-grid {
    gap: 10px;
  }
  #quiz-container .practice-secondary-shell {
    margin-top: 16px;
    padding: 14px;
  }
  #quiz-container .practice-quick-actions {
    grid-template-columns: 1fr;
  }
  #quiz-container .game-hero-head {
    align-items: flex-start;
  }
  #quiz-container .game-hero-health {
    grid-template-columns: 1fr;
  }
  #quiz-container .game-hero-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  #quiz-container .game-hero-ring {
    justify-self: end;
    width: 60px;
    height: 60px;
  }
  #quiz-container .game-hero-ring::after {
    width: 46px;
    height: 46px;
  }
  #quiz-container .game-filters {
    top: 54px;
    grid-template-columns: 1fr;
  }
  #quiz-container .practice-shift-strip {
    padding: 9px;
    border-radius: 14px;
  }
  #quiz-container .practice-shift-grid {
    gap: 7px;
  }
  #quiz-container .quiz-menu-btn {
    max-width: 100%;
  }
  #quiz-container .practice-onboarding-actions {
    flex-direction: column;
  }
}

@media (prefers-reduced-motion: reduce) {
  #quiz-container .game-hero-burst,
  #quiz-container .practice-onboarding,
  #quiz-container .quiz-menu-btn {
    animation: none !important;
    transition: none !important;
  }
}

/* ===== Practice Game Visual Audit Refresh ===== */
#game-overlay #allergen-game-container {
  --audit-accent-a: 0 174 192;
  --audit-accent-b: 255 118 89;
  --audit-surface: 243 251 253;
}
#game-overlay #training-game-container {
  --audit-accent-a: 0 169 180;
  --audit-accent-b: 255 198 92;
  --audit-surface: 246 251 255;
}
#game-overlay #conflict-game-container {
  --audit-accent-a: 255 116 66;
  --audit-accent-b: 255 200 97;
  --audit-surface: 255 247 243;
}
#game-overlay #upsell-game-container {
  --audit-accent-a: 255 151 78;
  --audit-accent-b: 255 104 123;
  --audit-surface: 255 248 242;
}
#game-overlay #recipe-game-container {
  --audit-accent-a: 255 172 68;
  --audit-accent-b: 0 187 151;
  --audit-surface: 255 252 246;
}
#game-overlay #flashcards-container {
  --audit-accent-a: 58 156 255;
  --audit-accent-b: 255 128 86;
  --audit-surface: 245 249 255;
}
#game-overlay #memory-game-container {
  --audit-accent-a: 24 190 184;
  --audit-accent-b: 137 214 97;
  --audit-surface: 243 252 248;
}
#game-overlay #quiz-game {
  --audit-accent-a: 38 163 255;
  --audit-accent-b: 255 190 92;
  --audit-surface: 244 249 255;
}

#game-overlay
  :is(
    #allergen-game-container,
    #training-game-container,
    #conflict-game-container,
    #upsell-game-container,
    #recipe-game-container,
    #flashcards-container,
    #memory-game-container,
    #quiz-game
  ) {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(
      130% 120% at 0% 0%,
      rgb(var(--audit-accent-a) / 0.18),
      transparent 46%
    ),
    radial-gradient(
      120% 120% at 100% 0%,
      rgb(var(--audit-accent-b) / 0.18),
      transparent 48%
    ),
    linear-gradient(
      155deg,
      rgba(255, 255, 255, 0.985),
      rgb(var(--audit-surface) / 0.98)
    );
  border: 1px solid rgba(255, 255, 255, 0.82);
  box-shadow:
    0 30px 76px rgba(15, 23, 42, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.94);
}

#game-overlay
  :is(
    #allergen-game-container,
    #training-game-container,
    #conflict-game-container,
    #upsell-game-container,
    #recipe-game-container,
    #flashcards-container,
    #memory-game-container,
    #quiz-game
  )::before,
#game-overlay
  :is(
    #allergen-game-container,
    #training-game-container,
    #conflict-game-container,
    #upsell-game-container,
    #recipe-game-container,
    #flashcards-container,
    #memory-game-container,
    #quiz-game
  )::after {
  content: "";
  position: absolute;
  pointer-events: none;
  z-index: 0;
}

#game-overlay
  :is(
    #allergen-game-container,
    #training-game-container,
    #conflict-game-container,
    #upsell-game-container,
    #recipe-game-container,
    #flashcards-container,
    #memory-game-container,
    #quiz-game
  )::before {
  top: -140px;
  left: -84px;
  width: 320px;
  height: 320px;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgb(var(--audit-accent-a) / 0.28),
    transparent 70%
  );
  filter: blur(6px);
}

#game-overlay
  :is(
    #allergen-game-container,
    #training-game-container,
    #conflict-game-container,
    #upsell-game-container,
    #recipe-game-container,
    #flashcards-container,
    #memory-game-container,
    #quiz-game
  )::after {
  right: -140px;
  bottom: -190px;
  width: 360px;
  height: 360px;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgb(var(--audit-accent-b) / 0.22),
    transparent 72%
  );
  filter: blur(6px);
}

#game-overlay
  :is(
    #allergen-game-container,
    #training-game-container,
    #conflict-game-container,
    #upsell-game-container,
    #recipe-game-container,
    #flashcards-container,
    #memory-game-container,
    #quiz-game
  )
  .game-screen {
  position: relative;
  z-index: 1;
  background: transparent;
}

#game-overlay
  :is(
    #allergen-game-container,
    #training-game-container,
    #conflict-game-container,
    #upsell-game-container,
    #recipe-game-container,
    #flashcards-container,
    #memory-game-container,
    #quiz-game
  )
  .game-topbar {
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.82),
    rgba(255, 255, 255, 0.58)
  );
  border-bottom: 1px solid rgba(255, 255, 255, 0.56);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

#game-overlay
  :is(
    #allergen-game-container,
    #training-game-container,
    #conflict-game-container,
    #upsell-game-container,
    #recipe-game-container,
    #flashcards-container,
    #memory-game-container,
    #quiz-game
  )
  .game-title {
  background: linear-gradient(
    135deg,
    rgba(8, 18, 34, 0.98),
    rgb(var(--audit-accent-a) / 0.9)
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

#game-overlay
  :is(
    #allergen-game-container,
    #training-game-container,
    #conflict-game-container,
    #upsell-game-container,
    #recipe-game-container,
    #flashcards-container,
    #memory-game-container,
    #quiz-game
  )
  :is(.game-back, .game-close) {
  border: 1px solid rgb(var(--audit-accent-a) / 0.16);
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.94),
    rgba(248, 250, 254, 0.88)
  );
  box-shadow:
    0 10px 24px rgba(15, 23, 42, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.92);
  color: rgba(8, 18, 34, 0.78);
}

#game-overlay
  :is(
    #allergen-game-container,
    #training-game-container,
    #conflict-game-container,
    #upsell-game-container,
    #recipe-game-container,
    #flashcards-container,
    #memory-game-container,
    #quiz-game
  )
  .game-meta {
  display: grid;
  grid-template-columns: auto auto 1fr;
  align-items: center;
  gap: 10px 12px;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.74),
    rgba(255, 255, 255, 0.38)
  );
  border-bottom: 1px solid rgba(255, 255, 255, 0.48);
}

#game-overlay
  :is(
    #allergen-game-container,
    #training-game-container,
    #conflict-game-container,
    #upsell-game-container,
    #recipe-game-container,
    #memory-game-container,
    #quiz-game
  )
  .game-progress {
  grid-column: 1 / -1;
  background: rgba(255, 255, 255, 0.66);
  box-shadow: inset 0 1px 2px rgba(8, 18, 34, 0.06);
}

#game-overlay
  :is(
    #allergen-game-container,
    #training-game-container,
    #conflict-game-container,
    #upsell-game-container,
    #recipe-game-container,
    #memory-game-container,
    #quiz-game
  )
  .game-progress
  .fill {
  background: linear-gradient(
    90deg,
    rgb(var(--audit-accent-b)),
    rgb(var(--audit-accent-a))
  );
  box-shadow: 0 10px 22px rgb(var(--audit-accent-a) / 0.24);
}

#game-overlay
  :is(
    #allergen-game-container,
    #training-game-container,
    #upsell-game-container,
    #recipe-game-container,
    #memory-game-container,
    #quiz-game
  )
  .game-round,
#game-overlay #quiz-game .quiz-streak,
#game-overlay #memory-game-container .memory-progress-info {
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.72);
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.9),
    rgba(248, 250, 255, 0.76)
  );
  box-shadow: 0 10px 22px rgba(15, 23, 42, 0.08);
}

#game-overlay
  :is(
    #allergen-game-container,
    #training-game-container,
    #upsell-game-container,
    #recipe-game-container,
    #memory-game-container,
    #quiz-game
  )
  .game-round {
  padding: 10px 14px;
  color: rgba(8, 18, 34, 0.78);
}

#game-overlay #quiz-game .quiz-streak {
  margin-left: 0;
  align-self: stretch;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
}

#game-overlay #memory-game-container .memory-progress-info {
  margin-left: 0;
  padding: 8px 12px;
  gap: 2px;
}

#game-overlay #memory-game-container .memory-progress-info span {
  letter-spacing: 0.12em;
}

#game-overlay #conflict-game-container .game-round {
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

#game-overlay
  :is(
    #allergen-game-container,
    #training-game-container,
    #conflict-game-container,
    #upsell-game-container,
    #recipe-game-container,
    #flashcards-container,
    #memory-game-container,
    #quiz-game
  )
  .game-body {
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.16),
    rgba(255, 255, 255, 0.03)
  );
}

#game-overlay
  :is(
    #allergen-game-container,
    #training-game-container,
    #conflict-game-container,
    #upsell-game-container,
    #recipe-game-container,
    #flashcards-container,
    #memory-game-container,
    #quiz-game
  )
  .game-hint-badge {
  background: linear-gradient(
    135deg,
    rgb(var(--audit-accent-a) / 0.14),
    rgb(var(--audit-accent-b) / 0.18)
  );
  border-color: rgb(var(--audit-accent-a) / 0.16);
  color: rgba(8, 18, 34, 0.76);
  box-shadow: 0 14px 26px rgb(var(--audit-accent-a) / 0.14);
}

#game-overlay
  :is(
    #allergen-game-container,
    #training-game-container,
    #conflict-game-container,
    #upsell-game-container,
    #recipe-game-container,
    #flashcards-container,
    #memory-game-container,
    #quiz-game
  )
  :is(.game-primary, .game-secondary) {
  border-radius: 18px;
  min-height: 52px;
  font-weight: 850;
  letter-spacing: 0.01em;
}

#game-overlay
  :is(
    #allergen-game-container,
    #training-game-container,
    #conflict-game-container,
    #upsell-game-container,
    #recipe-game-container,
    #flashcards-container,
    #memory-game-container,
    #quiz-game
  )
  .game-primary {
  background: linear-gradient(
    135deg,
    rgb(var(--audit-accent-a)),
    rgb(var(--audit-accent-b))
  );
  border: 1px solid rgb(var(--audit-accent-a) / 0.24);
  box-shadow: 0 18px 34px rgb(var(--audit-accent-a) / 0.24);
}

#game-overlay
  :is(
    #allergen-game-container,
    #training-game-container,
    #conflict-game-container,
    #upsell-game-container,
    #recipe-game-container,
    #flashcards-container,
    #memory-game-container,
    #quiz-game
  )
  .game-secondary {
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.9),
    rgba(248, 250, 255, 0.78)
  );
  border: 1px solid rgb(var(--audit-accent-a) / 0.16);
  box-shadow: 0 12px 26px rgba(15, 23, 42, 0.08);
  color: rgba(8, 18, 34, 0.78);
}

@media (hover: hover) {
  #game-overlay
    :is(
      #allergen-game-container,
      #training-game-container,
      #conflict-game-container,
      #upsell-game-container,
      #recipe-game-container,
      #flashcards-container,
      #memory-game-container,
      #quiz-game
    )
    :is(.game-back, .game-close, .game-primary, .game-secondary):hover {
    transform: translateY(-1px);
    box-shadow: 0 16px 32px rgba(15, 23, 42, 0.12);
  }
}

#game-overlay
  :is(
    #training-game-container,
    #upsell-game-container,
    #memory-game-container,
    #quiz-game
  )
  :is(.training-option, .memory-option, .quiz-option) {
  border: 1px solid rgba(8, 18, 34, 0.08);
  background: linear-gradient(
    160deg,
    rgba(255, 255, 255, 0.97),
    rgba(250, 252, 255, 0.92)
  );
  box-shadow:
    0 16px 32px rgba(15, 23, 42, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.84);
  color: rgba(8, 18, 34, 0.88);
}

@media (hover: hover) {
  #game-overlay
    :is(
      #training-game-container,
      #upsell-game-container,
      #memory-game-container,
      #quiz-game
    )
    :is(.training-option, .memory-option, .quiz-option):hover {
    border-color: rgb(var(--audit-accent-a) / 0.3);
    box-shadow:
      0 20px 38px rgba(15, 23, 42, 0.12),
      0 0 0 1px rgb(var(--audit-accent-a) / 0.08);
  }
}

#game-overlay #quiz-game .quiz-option::before {
  background: rgb(var(--audit-accent-a) / 0.1);
  border-color: rgb(var(--audit-accent-a) / 0.16);
  color: rgb(var(--audit-accent-a) / 0.98);
}

#game-overlay #quiz-game :is(.quiz-option.correct, .quiz-option.wrong)::before {
  background: rgba(255, 255, 255, 0.18);
  border-color: rgba(255, 255, 255, 0.3);
  color: #fff;
}

#game-overlay
  :is(#training-game-container, #upsell-game-container, #quiz-game)
  :is(.training-option.correct, .quiz-option.correct) {
  background: linear-gradient(
    135deg,
    rgba(0, 200, 83, 0.92),
    rgba(0, 165, 180, 0.88)
  );
  border-color: rgba(0, 200, 83, 0.75);
  color: #fff;
  box-shadow: 0 18px 34px rgba(0, 200, 83, 0.24);
}

#game-overlay
  :is(#training-game-container, #upsell-game-container, #quiz-game)
  :is(.training-option.wrong, .quiz-option.wrong) {
  background: linear-gradient(
    135deg,
    rgba(255, 61, 0, 0.92),
    rgba(255, 138, 0, 0.88)
  );
  border-color: rgba(255, 61, 0, 0.75);
  color: #fff;
  box-shadow: 0 18px 34px rgba(255, 61, 0, 0.22);
}

#game-overlay #training-game-container .training-option.good {
  background: linear-gradient(
    135deg,
    rgba(0, 165, 180, 0.14),
    rgba(255, 206, 84, 0.12)
  );
  border-color: rgba(0, 165, 180, 0.38);
  color: rgba(0, 98, 108, 0.96);
  box-shadow: 0 16px 30px rgba(0, 165, 180, 0.14);
}

#game-overlay #memory-game-container .memory-option.selected {
  border-color: rgba(0, 165, 180, 0.56);
  background: linear-gradient(
    145deg,
    rgba(0, 165, 180, 0.12),
    rgba(255, 255, 255, 0.96)
  );
  box-shadow: 0 18px 34px rgba(0, 165, 180, 0.14);
}

#game-overlay
  #memory-game-container
  .memory-option.selected
  .memory-option-meta {
  color: rgba(0, 98, 108, 0.92);
}

#game-overlay #memory-game-container .memory-option.correct-reveal {
  background: linear-gradient(
    135deg,
    rgba(0, 200, 83, 0.9),
    rgba(0, 165, 180, 0.82)
  );
  border-color: rgba(0, 200, 83, 0.72);
  color: #fff;
  box-shadow: 0 18px 36px rgba(0, 200, 83, 0.24);
}

#game-overlay #memory-game-container .memory-option.extra-reveal {
  background: linear-gradient(
    135deg,
    rgba(255, 61, 0, 0.9),
    rgba(255, 138, 0, 0.84)
  );
  border-color: rgba(255, 61, 0, 0.74);
  color: #fff;
  box-shadow: 0 18px 36px rgba(255, 61, 0, 0.22);
}

#game-overlay #memory-game-container .memory-option.missed-reveal {
  outline: 3px solid rgba(255, 206, 84, 0.72);
  outline-offset: 2px;
}

#game-overlay #memory-game-container .memory-option.wrong-reveal {
  opacity: 0.58;
  filter: grayscale(0.2);
}

#game-overlay
  #memory-game-container
  :is(.memory-option.correct-reveal, .memory-option.extra-reveal)
  :is(.memory-option-title, .memory-option-meta) {
  color: #fff;
}

/* Training */
#game-overlay #training-game-container .training-order-card {
  display: grid;
  grid-template-columns: 118px minmax(0, 1fr);
  align-items: center;
  gap: 16px;
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(
      180px 120px at 0% 0%,
      rgb(var(--audit-accent-b) / 0.18),
      transparent 72%
    ),
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.96),
      rgba(246, 252, 255, 0.92)
    );
  border: 1px solid rgb(var(--audit-accent-a) / 0.14);
  box-shadow:
    0 20px 42px rgba(15, 23, 42, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.84);
}

#game-overlay #training-game-container .training-order-card::before {
  content: "";
  position: absolute;
  inset: auto -42px -42px auto;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgb(var(--audit-accent-a) / 0.16),
    transparent 72%
  );
  pointer-events: none;
}

#game-overlay #training-game-container .training-order-card img {
  width: 118px;
  height: 118px;
  border-radius: 22px;
  border: 2px solid rgba(255, 255, 255, 0.82);
  box-shadow: 0 18px 30px rgba(15, 23, 42, 0.14);
}

#game-overlay #training-game-container .training-item-meta {
  gap: 8px;
}

#game-overlay #training-game-container .training-order-card.is-no-image {
  grid-template-columns: minmax(0, 1fr);
}

#game-overlay
  #training-game-container
  .training-order-card.is-no-image
  .training-item-meta {
  grid-column: 1;
}

#game-overlay #training-game-container .training-item-name {
  font-size: 1.2rem;
  font-weight: 900;
  color: rgba(8, 18, 34, 0.94);
  line-height: 1.18;
}

#game-overlay #training-game-container .training-item-category {
  display: inline-flex;
  width: fit-content;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgb(var(--audit-accent-a) / 0.1);
  color: rgb(var(--audit-accent-a) / 0.98);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

#game-overlay
  #training-game-container
  :is(
    .training-item-description,
    .training-item-composition,
    .training-item-allergens
  ) {
  color: rgba(8, 18, 34, 0.7);
  line-height: 1.45;
}

#game-overlay
  #training-game-container
  :is(.training-item-composition, .training-item-allergens):not(:empty) {
  padding: 8px 10px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.56);
  border: 1px solid rgba(8, 18, 34, 0.06);
}

#game-overlay #training-game-container .training-question {
  position: relative;
  padding: 22px 20px 18px;
  border-radius: 24px;
  border: 1px solid rgb(var(--audit-accent-a) / 0.12);
  background: linear-gradient(
    145deg,
    rgba(255, 255, 255, 0.96),
    rgba(248, 252, 255, 0.92)
  );
  box-shadow:
    0 18px 38px rgba(15, 23, 42, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.82);
  font-size: 1.06rem;
  font-weight: 850;
  color: rgba(8, 18, 34, 0.92);
}

#game-overlay #training-game-container .training-question::before {
  content: "Задача";
  display: block;
  margin-bottom: 10px;
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgb(var(--audit-accent-a) / 0.92);
}

#game-overlay #training-game-container .training-feedback:not(:empty) {
  box-shadow: 0 16px 34px rgba(15, 23, 42, 0.1);
}

/* Upsell */
#game-overlay #upsell-game-container .upsell-scene {
  position: relative;
  overflow: hidden;
  padding: 18px;
  border-radius: 24px;
  border: 1px solid rgb(var(--audit-accent-a) / 0.12);
  background:
    radial-gradient(
      200px 120px at 100% 0%,
      rgb(var(--audit-accent-b) / 0.16),
      transparent 74%
    ),
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.96),
      rgba(255, 249, 244, 0.94)
    );
  box-shadow:
    0 18px 40px rgba(15, 23, 42, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.84);
}

#game-overlay #upsell-game-container .upsell-scene::before {
  content: "Сценарий";
  display: inline-flex;
  margin-bottom: 12px;
  padding: 6px 11px;
  border-radius: 999px;
  background: rgb(var(--audit-accent-a) / 0.1);
  color: rgb(var(--audit-accent-a) / 0.96);
  font-size: 0.7rem;
  font-weight: 900;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

#game-overlay #upsell-game-container .upsell-context {
  font-size: 1.04rem;
  line-height: 1.42;
}

#game-overlay #upsell-game-container .upsell-guest {
  margin-top: 12px;
  padding: 12px 14px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.62);
  border: 1px solid rgba(8, 18, 34, 0.06);
  color: rgba(8, 18, 34, 0.74);
}

#game-overlay #upsell-game-container .upsell-meta:not(:empty) {
  margin-top: 12px;
  display: inline-flex;
  width: fit-content;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgb(var(--audit-accent-a) / 0.12);
  box-shadow: 0 10px 22px rgba(15, 23, 42, 0.08);
}

#game-overlay #upsell-game-container .upsell-timer {
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgb(var(--audit-accent-a) / 0.12);
  box-shadow: 0 12px 26px rgba(15, 23, 42, 0.08);
}

#game-overlay #upsell-game-container .upsell-timer-bar {
  height: 12px;
  background: rgba(8, 18, 34, 0.08);
}

#game-overlay #upsell-game-container .upsell-timer-text {
  width: auto;
  min-width: 42px;
  padding: 8px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.86);
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.08);
}

#game-overlay #upsell-game-container .upsell-feedback:not(:empty) {
  margin-top: 12px;
  padding: 16px;
  border-radius: 22px;
  border: 1px solid rgb(var(--audit-accent-a) / 0.12);
  background: linear-gradient(
    145deg,
    rgba(255, 255, 255, 0.96),
    rgba(250, 252, 255, 0.92)
  );
  box-shadow:
    0 18px 38px rgba(15, 23, 42, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.82);
}

#game-overlay #upsell-game-container .upsell-feedback-title {
  font-size: 0.76rem;
  font-weight: 900;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgb(var(--audit-accent-a) / 0.92);
  margin-bottom: 10px;
}

#game-overlay #upsell-game-container .upsell-feedback-line {
  line-height: 1.46;
  color: rgba(8, 18, 34, 0.86);
}

#game-overlay
  #upsell-game-container
  .upsell-feedback-line
  + .upsell-feedback-line {
  margin-top: 6px;
}

#game-overlay #upsell-game-container .upsell-feedback-line.is-muted {
  color: rgba(8, 18, 34, 0.66);
}

#game-overlay #upsell-game-container .upsell-feedback-values {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

#game-overlay #upsell-game-container .upsell-feedback-chip {
  display: inline-flex;
  align-items: center;
  padding: 7px 11px;
  border-radius: 999px;
  background: rgb(var(--audit-accent-a) / 0.1);
  border: 1px solid rgb(var(--audit-accent-a) / 0.14);
  color: rgba(8, 18, 34, 0.86);
  font-size: 0.78rem;
  font-weight: 850;
}

#game-overlay #upsell-game-container .upsell-feedback-case {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(8, 18, 34, 0.08);
}

/* Recipe */
#game-overlay #recipe-game-container .game-body {
  display: flex;
  flex-direction: column;
}

#game-overlay #recipe-game-container .recipe-target-card {
  max-width: none;
  border-radius: 26px;
  padding: 24px 20px 18px;
  background:
    radial-gradient(
      220px 120px at 0% 0%,
      rgb(var(--audit-accent-b) / 0.14),
      transparent 74%
    ),
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.97),
      rgba(255, 251, 245, 0.94)
    );
  border: 1px solid rgb(var(--audit-accent-a) / 0.12);
  box-shadow:
    0 20px 42px rgba(15, 23, 42, 0.11),
    inset 0 1px 0 rgba(255, 255, 255, 0.84);
}

#game-overlay #recipe-game-container .recipe-target-label {
  color: rgb(var(--audit-accent-a) / 0.96);
}

#game-overlay #recipe-game-container .recipe-target-name {
  font-size: 1.42rem;
}

#game-overlay #recipe-game-container .recipe-target-desc {
  max-width: 34ch;
  margin: 0 auto;
}

#game-overlay #recipe-game-container .recipe-selected-area {
  position: relative;
  min-height: 88px;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 16px;
  background: linear-gradient(
    145deg,
    rgba(255, 255, 255, 0.92),
    rgba(252, 254, 249, 0.9)
  );
  border: 1px dashed rgb(var(--audit-accent-a) / 0.26);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.78),
    0 14px 30px rgba(15, 23, 42, 0.08);
}

#game-overlay #recipe-game-container .recipe-selected-area::before {
  content: "Вы выбрали";
  position: absolute;
  top: -11px;
  left: 14px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgb(var(--audit-accent-a) / 0.16);
  color: rgb(var(--audit-accent-a) / 0.94);
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

#game-overlay #recipe-game-container .recipe-selected-placeholder {
  font-style: normal;
  color: rgba(8, 18, 34, 0.56);
}

#game-overlay #recipe-game-container .recipe-selected-list {
  justify-content: flex-start;
}

#game-overlay #recipe-game-container .recipe-selected-chip {
  padding: 8px 12px;
  border-radius: 999px;
  background: linear-gradient(
    135deg,
    rgb(var(--audit-accent-a)),
    rgb(var(--audit-accent-b))
  );
  box-shadow: 0 12px 24px rgb(var(--audit-accent-a) / 0.22);
}

#game-overlay #recipe-game-container .recipe-options-grid {
  grid-template-columns: repeat(auto-fit, minmax(112px, 1fr));
  gap: 10px;
  max-height: none;
  overflow: visible;
  margin-bottom: 0;
}

#game-overlay #recipe-game-container .recipe-chip {
  min-height: 58px;
  padding: 12px 10px;
  border-radius: 18px;
  background: linear-gradient(
    160deg,
    rgba(255, 255, 255, 0.96),
    rgba(253, 253, 249, 0.92)
  );
  border: 1px solid rgba(8, 18, 34, 0.08);
  box-shadow:
    0 12px 28px rgba(15, 23, 42, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.82);
}

#game-overlay #recipe-game-container .recipe-chip.is-selected {
  background: linear-gradient(
    135deg,
    rgb(var(--audit-accent-a)),
    rgb(var(--audit-accent-b))
  );
  box-shadow: 0 16px 30px rgb(var(--audit-accent-a) / 0.22);
}

#game-overlay #recipe-game-container .recipe-chip.is-correct {
  background: linear-gradient(
    135deg,
    rgba(0, 200, 83, 0.92),
    rgba(0, 165, 180, 0.88)
  ) !important;
  border-color: rgba(0, 200, 83, 0.72) !important;
  color: #fff !important;
  box-shadow: 0 18px 34px rgba(0, 200, 83, 0.22);
}

#game-overlay #recipe-game-container .recipe-chip.is-wrong {
  background: linear-gradient(
    135deg,
    rgba(255, 61, 0, 0.92),
    rgba(255, 138, 0, 0.88)
  ) !important;
  border-color: rgba(255, 61, 0, 0.72) !important;
  color: #fff !important;
  box-shadow: 0 18px 34px rgba(255, 61, 0, 0.22);
}

#game-overlay #recipe-game-container .recipe-actions {
  position: sticky;
  left: auto;
  right: auto;
  bottom: calc(6px + env(safe-area-inset-bottom));
  margin-top: 16px;
  padding-top: 12px;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0),
    rgba(253, 252, 248, 0.92) 24%,
    rgba(253, 252, 248, 0.98)
  );
  border-top: 1px solid rgba(255, 255, 255, 0.58);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* Memory */
#game-overlay #memory-game-container .memory-timer {
  height: 60px;
  border-radius: 22px;
  background: linear-gradient(
    145deg,
    rgba(255, 255, 255, 0.92),
    rgba(245, 253, 250, 0.9)
  );
  border: 1px solid rgb(var(--audit-accent-a) / 0.12);
  box-shadow:
    0 16px 34px rgba(15, 23, 42, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.82);
}

#game-overlay #memory-game-container .memory-timer::before {
  content: "Время на запоминание";
  position: absolute;
  left: 16px;
  top: 11px;
  z-index: 1;
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgb(var(--audit-accent-a) / 0.92);
}

#game-overlay #memory-game-container .memory-timer-fill {
  background: linear-gradient(
    90deg,
    rgb(var(--audit-accent-b)),
    rgb(var(--audit-accent-a))
  );
}

#game-overlay #memory-game-container .memory-seconds {
  right: 10px;
  top: 50%;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.08);
  color: rgba(8, 18, 34, 0.82);
}

#game-overlay #memory-game-container .memory-phase-title {
  position: relative;
  padding: 18px 16px 16px;
  border-radius: 22px;
  border: 1px solid rgb(var(--audit-accent-a) / 0.12);
  background: linear-gradient(
    145deg,
    rgba(255, 255, 255, 0.96),
    rgba(245, 253, 250, 0.9)
  );
  box-shadow:
    0 16px 34px rgba(15, 23, 42, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.82);
  color: rgba(8, 18, 34, 0.9);
}

#game-overlay #memory-game-container .memory-phase-title::before {
  content: "Этап";
  display: block;
  margin-bottom: 8px;
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgb(var(--audit-accent-a) / 0.92);
}

#game-overlay #memory-game-container .ticket-items {
  border-radius: 22px;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.98),
    rgba(252, 255, 249, 0.94)
  );
  border: 1px solid rgba(8, 18, 34, 0.07);
  box-shadow:
    0 16px 34px rgba(15, 23, 42, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.84);
}

#game-overlay #memory-game-container .ticket-id {
  margin-top: 12px;
  display: inline-flex;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.8);
  border: 1px solid rgb(var(--audit-accent-a) / 0.12);
  box-shadow: 0 10px 22px rgba(15, 23, 42, 0.08);
  color: rgba(8, 18, 34, 0.74);
  font-weight: 800;
}

#game-overlay #memory-game-container .memory-option {
  min-height: 72px;
  border-radius: 18px;
  padding: 12px;
}

/* Quiz */
#game-overlay #quiz-game #quiz-question.quiz-question-text {
  position: relative;
  margin-bottom: 18px;
  padding: 22px 18px 18px;
  border-radius: 24px;
  border: 1px solid rgb(var(--audit-accent-a) / 0.12);
  background:
    radial-gradient(
      220px 110px at 100% 0%,
      rgb(var(--audit-accent-b) / 0.12),
      transparent 74%
    ),
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.97),
      rgba(246, 252, 255, 0.93)
    );
  box-shadow:
    0 20px 40px rgba(15, 23, 42, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.84);
  color: rgba(8, 18, 34, 0.94);
}

#game-overlay #quiz-game #quiz-question.quiz-question-text::before {
  content: "Вопрос";
  display: block;
  margin-bottom: 10px;
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgb(var(--audit-accent-a) / 0.92);
}

#game-overlay #quiz-game .quiz-img {
  border-radius: 24px;
  border: 1px solid rgba(255, 255, 255, 0.72);
  box-shadow:
    0 18px 40px rgba(15, 23, 42, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.78);
}

#game-overlay #quiz-game #quiz-bar {
  min-height: 0;
}

#game-overlay #quiz-game #quiz-bar:not(:empty) {
  margin-top: 14px;
  padding: 14px 15px;
  border-radius: 18px;
  border: 1px solid rgb(var(--audit-accent-a) / 0.12);
  background: linear-gradient(
    145deg,
    rgba(255, 255, 255, 0.94),
    rgba(248, 252, 255, 0.9)
  );
  box-shadow: 0 14px 30px rgba(15, 23, 42, 0.08);
}

#game-overlay #quiz-game .game-shell-xp {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  margin-top: 12px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgb(var(--audit-accent-a) / 0.12);
  background: rgba(255, 255, 255, 0.76);
  box-shadow: 0 10px 22px rgba(15, 23, 42, 0.08);
  color: rgba(8, 18, 34, 0.84);
  font-weight: 850;
}

/* Flashcards */
#game-overlay #flashcards-container .game-body {
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

#game-overlay #flashcards-container .flashcard-scene {
  margin-top: 6px;
}

#game-overlay #flashcards-container .flashcard {
  border-radius: 28px;
  border: 1px solid rgba(255, 255, 255, 0.76);
  box-shadow:
    0 22px 48px rgba(15, 23, 42, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.82);
}

#game-overlay #flashcards-container .flashcard-face {
  border-radius: 28px;
  border: 1px solid rgba(255, 255, 255, 0.62);
}

#game-overlay #flashcards-container .flashcard-front {
  background:
    radial-gradient(
      240px 140px at 0% 0%,
      rgb(var(--audit-accent-b) / 0.18),
      transparent 72%
    ),
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.98),
      rgba(244, 250, 255, 0.94)
    );
}

#game-overlay #flashcards-container .flashcard-back {
  background:
    radial-gradient(
      240px 160px at 100% 0%,
      rgb(var(--audit-accent-b) / 0.22),
      transparent 74%
    ),
    linear-gradient(
      145deg,
      rgba(8, 18, 34, 0.96),
      rgb(var(--audit-accent-a) / 0.72)
    );
}

#game-overlay #flashcards-container .fc-title {
  font-size: 1.36rem;
  font-weight: 900;
  color: rgba(8, 18, 34, 0.94);
  line-height: 1.2;
}

#game-overlay #flashcards-container .fc-content {
  font-size: 1.08rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.96);
}

#game-overlay #flashcards-container .fc-hint {
  margin-top: 12px;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid rgb(var(--audit-accent-a) / 0.12);
  color: rgba(8, 18, 34, 0.68);
  font-size: 0.84rem;
  font-weight: 700;
}

#game-overlay #flashcards-container .flashcard-progress {
  align-self: center;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid rgb(var(--audit-accent-a) / 0.12);
  background: rgba(255, 255, 255, 0.8);
  box-shadow: 0 10px 22px rgba(15, 23, 42, 0.08);
}

#game-overlay #flashcards-container .flashcard-stack {
  margin-bottom: 14px;
}

#game-overlay #flashcards-container .flashcard-stack span {
  background: linear-gradient(
    135deg,
    rgb(var(--audit-accent-a) / 0.32),
    rgb(var(--audit-accent-b) / 0.18)
  );
}

#game-overlay #flashcards-container .fc-btn {
  border-radius: 18px;
  box-shadow: 0 16px 32px rgba(15, 23, 42, 0.16);
}

#game-overlay #flashcards-container .fc-btn-know {
  background: linear-gradient(135deg, #00b894, #72d89d);
}

#game-overlay #flashcards-container .fc-btn-forgot {
  background: linear-gradient(135deg, #ff9a62, #ff6f78);
}

/* Dark theme */
body[data-theme="dark"]
  #game-overlay
  :is(
    #allergen-game-container,
    #training-game-container,
    #conflict-game-container,
    #upsell-game-container,
    #recipe-game-container,
    #flashcards-container,
    #memory-game-container,
    #quiz-game
  ) {
  background:
    radial-gradient(
      130% 120% at 0% 0%,
      rgb(var(--audit-accent-a) / 0.2),
      transparent 46%
    ),
    radial-gradient(
      120% 120% at 100% 0%,
      rgb(var(--audit-accent-b) / 0.18),
      transparent 48%
    ),
    linear-gradient(160deg, rgba(9, 13, 21, 0.98), rgba(16, 20, 31, 0.96));
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow:
    0 34px 84px rgba(0, 0, 0, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

body[data-theme="dark"]
  #game-overlay
  :is(
    #allergen-game-container,
    #training-game-container,
    #conflict-game-container,
    #upsell-game-container,
    #recipe-game-container,
    #flashcards-container,
    #memory-game-container,
    #quiz-game
  )
  .game-topbar,
body[data-theme="dark"]
  #game-overlay
  :is(
    #allergen-game-container,
    #training-game-container,
    #conflict-game-container,
    #upsell-game-container,
    #recipe-game-container,
    #flashcards-container,
    #memory-game-container,
    #quiz-game
  )
  .game-meta {
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.08),
    rgba(255, 255, 255, 0.04)
  );
  border-color: rgba(255, 255, 255, 0.1);
}

body[data-theme="dark"]
  #game-overlay
  :is(
    #allergen-game-container,
    #training-game-container,
    #conflict-game-container,
    #upsell-game-container,
    #recipe-game-container,
    #flashcards-container,
    #memory-game-container,
    #quiz-game
  )
  .game-title {
  background: none;
  color: rgba(255, 255, 255, 0.94);
  -webkit-text-fill-color: rgba(255, 255, 255, 0.94);
}

body[data-theme="dark"]
  #game-overlay
  :is(
    #allergen-game-container,
    #training-game-container,
    #conflict-game-container,
    #upsell-game-container,
    #recipe-game-container,
    #flashcards-container,
    #memory-game-container,
    #quiz-game
  )
  :is(.game-back, .game-close, .game-secondary) {
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.09),
    rgba(255, 255, 255, 0.05)
  );
  border-color: rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.88);
  box-shadow: 0 16px 32px rgba(0, 0, 0, 0.28);
}

body[data-theme="dark"]
  #game-overlay
  :is(
    #allergen-game-container,
    #training-game-container,
    #upsell-game-container,
    #recipe-game-container,
    #memory-game-container,
    #quiz-game
  )
  .game-round,
body[data-theme="dark"] #game-overlay #quiz-game .quiz-streak,
body[data-theme="dark"]
  #game-overlay
  #memory-game-container
  .memory-progress-info,
body[data-theme="dark"] #game-overlay #quiz-game .game-shell-xp,
body[data-theme="dark"]
  #game-overlay
  #flashcards-container
  .flashcard-progress {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.88);
  box-shadow: 0 16px 32px rgba(0, 0, 0, 0.26);
}

body[data-theme="dark"]
  #game-overlay
  :is(
    #training-game-container .training-order-card,
    #training-game-container .training-question,
    #upsell-game-container .upsell-scene,
    #upsell-game-container .upsell-feedback,
    #recipe-game-container .recipe-target-card,
    #recipe-game-container .recipe-selected-area,
    #memory-game-container .memory-timer,
    #memory-game-container .memory-phase-title,
    #memory-game-container .ticket-items,
    #quiz-game #quiz-question.quiz-question-text,
    #quiz-game #quiz-bar:not(:empty),
    #flashcards-container .flashcard-front
  ) {
  background: linear-gradient(
    145deg,
    rgba(255, 255, 255, 0.08),
    rgba(255, 255, 255, 0.05)
  );
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow:
    0 22px 46px rgba(0, 0, 0, 0.34),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
  color: rgba(255, 255, 255, 0.9);
}

body[data-theme="dark"]
  #game-overlay
  :is(
    #training-game-container,
    #upsell-game-container,
    #memory-game-container,
    #quiz-game
  )
  :is(.training-option, .memory-option, .quiz-option),
body[data-theme="dark"] #game-overlay #recipe-game-container .recipe-chip {
  background: linear-gradient(
    160deg,
    rgba(255, 255, 255, 0.1),
    rgba(255, 255, 255, 0.06)
  );
  border-color: rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.9);
  box-shadow:
    0 18px 36px rgba(0, 0, 0, 0.32),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

body[data-theme="dark"]
  #game-overlay
  #flashcards-container
  .flashcard-front
  .fc-title,
body[data-theme="dark"]
  #game-overlay
  #quiz-game
  #quiz-question.quiz-question-text,
body[data-theme="dark"]
  #game-overlay
  #memory-game-container
  .memory-phase-title,
body[data-theme="dark"]
  #game-overlay
  #training-game-container
  .training-item-name {
  color: rgba(255, 255, 255, 0.94);
}

body[data-theme="dark"]
  #game-overlay
  :is(
    #training-game-container .training-item-description,
    #training-game-container .training-item-composition,
    #training-game-container .training-item-allergens,
    #upsell-game-container .upsell-guest,
    #upsell-game-container .upsell-feedback-line,
    #memory-game-container .ticket-name,
    #memory-game-container .memory-option-title
  ) {
  color: rgba(255, 255, 255, 0.78);
}

@media (max-width: 640px) {
  #game-overlay
    :is(
      #allergen-game-container,
      #training-game-container,
      #conflict-game-container,
      #upsell-game-container,
      #recipe-game-container,
      #memory-game-container,
      #quiz-game
    )
    .game-meta {
    grid-template-columns: 1fr;
  }

  #game-overlay
    :is(
      #allergen-game-container,
      #training-game-container,
      #upsell-game-container,
      #recipe-game-container,
      #memory-game-container,
      #quiz-game
    )
    .game-round,
  #game-overlay #quiz-game .quiz-streak,
  #game-overlay #memory-game-container .memory-progress-info {
    width: 100%;
    justify-content: flex-start;
  }

  #game-overlay
    :is(
      #allergen-game-container,
      #training-game-container,
      #conflict-game-container,
      #upsell-game-container,
      #recipe-game-container,
      #flashcards-container,
      #memory-game-container,
      #quiz-game
    )::before {
    top: -160px;
    left: -120px;
    width: 260px;
    height: 260px;
  }

  #game-overlay
    :is(
      #allergen-game-container,
      #training-game-container,
      #conflict-game-container,
      #upsell-game-container,
      #recipe-game-container,
      #flashcards-container,
      #memory-game-container,
      #quiz-game
    )::after {
    right: -150px;
    bottom: -200px;
    width: 280px;
    height: 280px;
  }

  #game-overlay #training-game-container .training-order-card {
    grid-template-columns: 88px minmax(0, 1fr);
    gap: 12px;
    padding: 14px;
  }

  #game-overlay #training-game-container .training-order-card.is-no-image {
    grid-template-columns: minmax(0, 1fr);
  }

  #game-overlay #training-game-container .training-order-card img {
    width: 88px;
    height: 88px;
    border-radius: 18px;
  }

  #game-overlay #recipe-game-container .recipe-options-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #game-overlay #memory-game-container .memory-timer {
    height: 56px;
  }

  #game-overlay #memory-game-container .memory-timer::before {
    left: 14px;
    font-size: 0.62rem;
  }

  #game-overlay #flashcards-container .flashcard-scene {
    min-height: 220px;
    height: 34vh;
  }

  #game-overlay #flashcards-container .fc-title {
    font-size: 1.18rem;
  }

  #game-overlay #flashcards-container .fc-content {
    font-size: 0.98rem;
  }
}

/* ===== Sommelier Structural Rework ===== */
#game-overlay .grape-hero {
  padding: 16px 18px 14px;
  background:
    radial-gradient(
      220px 140px at 100% 0%,
      rgba(var(--grape-accent-c), 0.16),
      transparent 74%
    ),
    linear-gradient(
      150deg,
      rgba(255, 255, 255, 0.98),
      rgba(252, 247, 243, 0.94)
    );
  border: 1px solid rgba(var(--grape-accent-a), 0.1);
  box-shadow:
    0 22px 48px rgba(15, 23, 42, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.84);
}

#game-overlay .grape-hero::before {
  opacity: 0.2;
  background: linear-gradient(
    105deg,
    rgba(255, 255, 255, 0.44),
    rgba(255, 255, 255, 0) 52%
  );
}

#game-overlay .grape-hero::after {
  width: 148px;
  height: 148px;
  inset: auto -28px -52px auto;
  opacity: 0.46;
}

#game-overlay .grape-hero-kicker {
  display: inline-flex;
  align-items: center;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(var(--grape-accent-a), 0.08);
  border: 1px solid rgba(var(--grape-accent-a), 0.12);
  color: rgba(var(--grape-accent-a), 0.94);
  font-size: 0.7rem;
  font-weight: 900;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

#game-overlay .grape-hero-title {
  margin-top: 10px;
  font-size: 1.24rem;
  line-height: 1.06;
  color: rgba(18, 23, 38, 0.97);
  text-shadow: none;
}

#game-overlay .grape-hero-sub {
  display: block;
  margin-top: 7px;
  max-width: 32ch;
  color: rgba(8, 18, 34, 0.64);
}

#game-overlay .grape-mini {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

#game-overlay .grape-mini-chip {
  gap: 10px;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.84);
  border: 1px solid rgba(var(--grape-accent-a), 0.1);
  box-shadow: 0 10px 22px rgba(15, 23, 42, 0.06);
}

#game-overlay .grape-mini-label {
  font-size: 0.64rem;
  font-weight: 900;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(8, 18, 34, 0.52);
}

#game-overlay .grape-mini-value {
  font-size: 0.88rem;
  font-weight: 900;
  color: rgba(8, 18, 34, 0.88);
}

#game-overlay .grape-settings-panel[hidden] {
  display: none !important;
}

#game-overlay .grape-settings-panel {
  margin-top: 12px;
  padding: 16px;
  border-radius: 24px;
  background:
    radial-gradient(
      240px 140px at 0% 0%,
      rgba(var(--grape-accent-b), 0.12),
      transparent 72%
    ),
    linear-gradient(
      155deg,
      rgba(255, 255, 255, 0.97),
      rgba(247, 251, 255, 0.94)
    );
  border: 1px solid rgba(var(--grape-accent-a), 0.1);
  box-shadow:
    0 20px 44px rgba(15, 23, 42, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.84);
}

#game-overlay .grape-settings-head {
  display: grid;
  gap: 4px;
  margin-bottom: 12px;
}

#game-overlay .grape-settings-title {
  font-size: 1rem;
  font-weight: 900;
  color: rgba(8, 18, 34, 0.92);
}

#game-overlay .grape-settings-sub {
  font-size: 0.84rem;
  line-height: 1.45;
  color: rgba(8, 18, 34, 0.62);
}

#game-overlay .grape-settings-group + .grape-settings-group {
  margin-top: 12px;
}

#game-overlay .grape-settings-label {
  margin-bottom: 8px;
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(var(--grape-accent-a), 0.9);
}

#game-overlay #grape-game-container.is-compact .grape-hero-sub,
#game-overlay #grape-game-container.is-compact .grape-mini {
  display: block;
}

#game-overlay #grape-game-container.is-compact .grape-mini {
  display: flex;
}

#game-overlay
  #grape-game-container.is-compact
  .grape-settings-panel
  .grape-mode,
#game-overlay
  #grape-game-container.is-compact
  .grape-settings-panel
  .grape-roundmode,
#game-overlay
  #grape-game-container.is-compact
  .grape-settings-panel
  .grape-deck {
  display: flex;
  width: 100%;
  max-width: 100%;
  flex-wrap: wrap;
  overflow: visible;
}

#game-overlay
  #grape-game-container.is-compact
  .grape-settings-panel
  .grape-mode-note {
  display: block;
  margin-top: 12px;
  padding: 12px 14px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.82);
  border: 1px solid rgba(var(--grape-accent-a), 0.08);
  color: rgba(8, 18, 34, 0.66);
}

#game-overlay .grape-card {
  padding: 18px;
  background:
    radial-gradient(
      240px 150px at 100% 0%,
      rgba(var(--grape-accent-c), 0.12),
      transparent 74%
    ),
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.985),
      rgba(252, 249, 246, 0.96)
    );
  border: 1px solid rgba(var(--grape-accent-a), 0.12);
  box-shadow:
    0 24px 54px rgba(15, 23, 42, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.84);
}

#game-overlay .grape-card::before {
  height: 6px;
  background: linear-gradient(
    90deg,
    rgba(var(--grape-accent-a), 0.94),
    rgba(var(--grape-accent-b), 0.88),
    rgba(var(--grape-accent-c), 0.82)
  );
}

#game-overlay .grape-sheet-kicker {
  display: inline-flex;
  align-items: center;
  margin-bottom: 12px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(var(--grape-accent-a), 0.08);
  border: 1px solid rgba(var(--grape-accent-a), 0.12);
  color: rgba(var(--grape-accent-a), 0.94);
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

#game-overlay .grape-card-head {
  align-items: flex-start;
  margin-bottom: 12px;
}

#game-overlay .grape-question {
  max-width: 15ch;
  font-size: 1.28rem;
  line-height: 1.1;
  color: rgba(20, 25, 40, 0.97);
}

#game-overlay .grape-question::before {
  margin-bottom: 8px;
  color: rgba(var(--grape-accent-a), 0.78);
}

#game-overlay .grape-sheet-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
}

#game-overlay .grape-sheet-pill {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 7px 11px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.88);
  border: 1px solid rgba(var(--grape-accent-a), 0.1);
  box-shadow: 0 10px 22px rgba(15, 23, 42, 0.06);
  color: rgba(8, 18, 34, 0.74);
  font-size: 0.76rem;
  font-weight: 850;
}

#game-overlay .grape-timer {
  gap: 10px;
  padding: 8px 12px 8px 8px;
  min-width: 128px;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(var(--grape-accent-a), 0.1);
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
}

#game-overlay .grape-timer-copy {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

#game-overlay .grape-timer-caption {
  font-size: 0.62rem;
  font-weight: 900;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(8, 18, 34, 0.46);
}

#game-overlay .grape-timer-text {
  min-width: auto;
  font-size: 0.96rem;
  font-weight: 900;
  letter-spacing: -0.01em;
}

#game-overlay .grape-chip-group {
  border-radius: 20px;
  padding: 14px;
  border: 1px solid rgba(var(--grape-accent-a), 0.08);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72);
}

#game-overlay .grape-option {
  align-items: flex-start;
  min-height: 86px;
  padding: 16px;
}

#game-overlay .grape-option-copy {
  flex: 1;
  min-width: 0;
  display: grid;
  gap: 4px;
}

#game-overlay .grape-option-title {
  font-size: 1.02rem;
  line-height: 1.24;
  font-weight: 900;
  color: rgba(8, 18, 34, 0.92);
}

#game-overlay .grape-option-hint {
  font-size: 0.77rem;
  line-height: 1.38;
  font-weight: 800;
  color: rgba(8, 18, 34, 0.58);
}

#game-overlay .grape-option.is-correct .grape-option-title,
#game-overlay .grape-option.is-wrong .grape-option-title,
#game-overlay .grape-option.is-correct .grape-option-hint,
#game-overlay .grape-option.is-wrong .grape-option-hint {
  color: rgba(255, 255, 255, 0.94);
}

#game-overlay .grape-note {
  margin-top: 14px;
  padding: 0;
  background: transparent;
  border: 0;
  min-height: 0;
}

#game-overlay .grape-note-card {
  display: grid;
  gap: 12px;
  padding: 16px;
  border-radius: 22px;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.98),
    rgba(252, 248, 244, 0.95)
  );
  border: 1px solid rgba(var(--grape-accent-a), 0.1);
  box-shadow:
    0 18px 42px rgba(15, 23, 42, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.82);
}

#game-overlay .grape-note-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

#game-overlay .grape-note-status {
  display: grid;
  gap: 6px;
}

#game-overlay .grape-note-badge {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  width: fit-content;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

#game-overlay .grape-note-title {
  font-size: 1rem;
  line-height: 1.18;
  font-weight: 900;
  color: rgba(8, 18, 34, 0.92);
}

#game-overlay .grape-note-score {
  flex: 0 0 auto;
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  padding: 0 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(var(--grape-accent-a), 0.1);
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.07);
  color: rgba(8, 18, 34, 0.88);
  font-size: 0.82rem;
  font-weight: 900;
}

#game-overlay .grape-note-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

#game-overlay .grape-note-item,
#game-overlay .grape-note-section {
  padding: 12px 13px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(var(--grape-accent-a), 0.08);
}

#game-overlay .grape-note-label,
#game-overlay .grape-note-section-title {
  margin-bottom: 6px;
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(var(--grape-accent-a), 0.84);
}

#game-overlay .grape-note-value {
  font-size: 0.95rem;
  line-height: 1.3;
  font-weight: 900;
  color: rgba(8, 18, 34, 0.9);
}

#game-overlay .grape-note-section-body {
  font-size: 0.82rem;
  line-height: 1.48;
  font-weight: 800;
  color: rgba(8, 18, 34, 0.7);
}

#game-overlay .grape-note[data-tone="success"] .grape-note-card {
  background:
    radial-gradient(
      220px 140px at 100% 0%,
      rgba(54, 179, 126, 0.14),
      transparent 72%
    ),
    linear-gradient(
      180deg,
      rgba(247, 255, 250, 0.98),
      rgba(241, 250, 245, 0.96)
    );
  border-color: rgba(54, 179, 126, 0.18);
}

#game-overlay .grape-note[data-tone="success"] .grape-note-badge {
  background: rgba(54, 179, 126, 0.14);
  border: 1px solid rgba(54, 179, 126, 0.22);
  color: rgba(19, 115, 73, 0.96);
}

#game-overlay .grape-note[data-tone="wrong"] .grape-note-card {
  background:
    radial-gradient(
      220px 140px at 100% 0%,
      rgba(255, 122, 69, 0.16),
      transparent 72%
    ),
    linear-gradient(
      180deg,
      rgba(255, 249, 246, 0.98),
      rgba(255, 242, 236, 0.96)
    );
  border-color: rgba(255, 122, 69, 0.18);
}

#game-overlay .grape-note[data-tone="wrong"] .grape-note-badge {
  background: rgba(255, 122, 69, 0.14);
  border: 1px solid rgba(255, 122, 69, 0.22);
  color: rgba(181, 67, 17, 0.96);
}

#game-overlay .grape-note[data-tone="timeout"] .grape-note-card,
#game-overlay .grape-note[data-tone="skip"] .grape-note-card {
  background:
    radial-gradient(
      220px 140px at 100% 0%,
      rgba(243, 190, 83, 0.18),
      transparent 72%
    ),
    linear-gradient(
      180deg,
      rgba(255, 252, 244, 0.98),
      rgba(255, 247, 231, 0.96)
    );
  border-color: rgba(243, 190, 83, 0.22);
}

#game-overlay .grape-note[data-tone="timeout"] .grape-note-badge,
#game-overlay .grape-note[data-tone="skip"] .grape-note-badge {
  background: rgba(243, 190, 83, 0.16);
  border: 1px solid rgba(243, 190, 83, 0.24);
  color: rgba(149, 102, 0, 0.96);
}

@media (max-width: 640px) {
  #game-overlay .grape-hero {
    padding: 15px 16px 14px;
  }

  #game-overlay .grape-hero-title {
    font-size: 1.12rem;
  }

  #game-overlay .grape-hero-sub {
    font-size: 0.84rem;
    max-width: none;
  }

  #game-overlay .grape-settings-panel {
    padding: 14px;
    border-radius: 20px;
  }

  #game-overlay .grape-card {
    padding: 15px;
  }

  #game-overlay .grape-sheet-kicker {
    margin-bottom: 10px;
  }

  #game-overlay .grape-question {
    max-width: none;
    font-size: 1.1rem;
  }

  #game-overlay .grape-sheet-meta {
    gap: 6px;
  }

  #game-overlay .grape-sheet-pill {
    font-size: 0.72rem;
    padding: 6px 10px;
  }

  #game-overlay .grape-timer {
    min-width: 116px;
  }

  #game-overlay .grape-option {
    min-height: 80px;
    padding: 14px;
  }

  #game-overlay .grape-option-title {
    font-size: 0.96rem;
  }

  #game-overlay .grape-option-hint {
    font-size: 0.73rem;
  }

  #game-overlay .grape-note-card {
    padding: 14px;
    gap: 10px;
  }

  #game-overlay .grape-note-head {
    flex-direction: column;
    align-items: stretch;
  }

  #game-overlay .grape-note-score {
    width: fit-content;
  }

  #game-overlay .grape-note-grid {
    grid-template-columns: 1fr;
  }

  #game-overlay .grape-note-value {
    font-size: 0.9rem;
  }

  #game-overlay .grape-note-section-body {
    font-size: 0.78rem;
  }
}

body[data-theme="dark"] #game-overlay .grape-hero,
body[data-theme="dark"] #game-overlay .grape-settings-panel,
body[data-theme="dark"] #game-overlay .grape-card {
  background:
    radial-gradient(
      240px 140px at 100% 0%,
      rgba(var(--grape-accent-c), 0.16),
      transparent 74%
    ),
    linear-gradient(155deg, rgba(11, 16, 26, 0.97), rgba(14, 20, 31, 0.95));
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow:
    0 28px 70px rgba(0, 0, 0, 0.46),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

body[data-theme="dark"] #game-overlay .grape-hero-kicker,
body[data-theme="dark"] #game-overlay .grape-sheet-kicker,
body[data-theme="dark"] #game-overlay .grape-settings-label {
  color: rgba(255, 225, 210, 0.88);
}

body[data-theme="dark"] #game-overlay .grape-hero-title,
body[data-theme="dark"] #game-overlay .grape-settings-title,
body[data-theme="dark"] #game-overlay .grape-question,
body[data-theme="dark"] #game-overlay .grape-option-title {
  color: rgba(255, 255, 255, 0.94);
}

body[data-theme="dark"] #game-overlay .grape-hero-sub,
body[data-theme="dark"] #game-overlay .grape-settings-sub,
body[data-theme="dark"] #game-overlay .grape-option-hint,
body[data-theme="dark"] #game-overlay .grape-mode-note {
  color: rgba(255, 255, 255, 0.72);
}

body[data-theme="dark"]
  #game-overlay
  :is(
    .grape-mini-chip,
    .grape-sheet-pill,
    .grape-timer,
    .grape-settings-panel .grape-mode-note
  ) {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow: 0 16px 32px rgba(0, 0, 0, 0.26);
}

body[data-theme="dark"] #game-overlay .grape-mini-label,
body[data-theme="dark"] #game-overlay .grape-timer-caption {
  color: rgba(255, 255, 255, 0.48);
}

body[data-theme="dark"] #game-overlay .grape-mini-value,
body[data-theme="dark"] #game-overlay .grape-sheet-pill,
body[data-theme="dark"] #game-overlay .grape-timer-text {
  color: rgba(255, 255, 255, 0.9);
}

body[data-theme="dark"]
  #game-overlay
  .grape-option:not(.is-correct):not(.is-wrong) {
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.06))
      padding-box,
    linear-gradient(
        145deg,
        rgba(var(--grape-accent-a), 0.34),
        rgba(var(--grape-accent-b), 0.2),
        rgba(var(--grape-accent-c), 0.18)
      )
      border-box;
  box-shadow: 0 24px 54px rgba(0, 0, 0, 0.42);
}

body[data-theme="dark"] #game-overlay .grape-note-card,
body[data-theme="dark"] #game-overlay .grape-note-item,
body[data-theme="dark"] #game-overlay .grape-note-section,
body[data-theme="dark"] #game-overlay .grape-note-score {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow: 0 18px 34px rgba(0, 0, 0, 0.26);
}

body[data-theme="dark"] #game-overlay .grape-note-title,
body[data-theme="dark"] #game-overlay .grape-note-value {
  color: rgba(255, 255, 255, 0.92);
}

body[data-theme="dark"] #game-overlay .grape-note-section-body {
  color: rgba(255, 255, 255, 0.74);
}

/* ===== Practice + Upsell + Recipe Visual Rework ===== */
#quiz-container .practice-stage-banner {
  position: relative;
  overflow: hidden;
  display: grid;
  gap: 12px;
  margin-bottom: 12px;
  padding: 18px 18px 16px;
  border-radius: 24px;
  background:
    radial-gradient(
      260px 150px at 0% 0%,
      rgba(255, 191, 92, 0.26),
      transparent 72%
    ),
    radial-gradient(
      260px 180px at 100% 0%,
      rgba(0, 198, 168, 0.18),
      transparent 74%
    ),
    linear-gradient(
      145deg,
      rgba(255, 252, 245, 0.98),
      rgba(244, 250, 255, 0.96)
    );
  border: 1px solid rgba(255, 160, 96, 0.16);
  box-shadow:
    0 22px 48px rgba(15, 23, 42, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.82);
}

#quiz-container .practice-today-shell {
  display: grid;
  gap: 12px;
  margin-bottom: 16px;
}

#quiz-container .practice-launch-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  align-items: stretch;
}

#quiz-container .practice-insights-shell {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin-top: 18px;
  align-items: start;
}

#quiz-container .practice-secondary-shell {
  display: grid;
  gap: 14px;
  margin-top: 20px;
  padding: 18px;
  border-radius: 24px;
  border: 1px solid rgba(8, 18, 34, 0.08);
  background:
    linear-gradient(
      160deg,
      rgba(255, 255, 255, 0.92),
      rgba(246, 250, 255, 0.9)
    ),
    radial-gradient(
      280px 120px at 0% 0%,
      rgba(0, 210, 255, 0.08),
      rgba(255, 255, 255, 0) 72%
    );
  box-shadow: 0 16px 38px rgba(15, 23, 42, 0.08);
}

#quiz-container .practice-secondary-head {
  display: grid;
  gap: 4px;
}

#quiz-container .practice-secondary-kicker {
  font-size: 0.62rem;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(8, 18, 34, 0.48);
}

#quiz-container .practice-secondary-title {
  font-size: 0.94rem;
  font-weight: 800;
  color: rgba(8, 18, 34, 0.78);
}

#quiz-container .practice-stage-banner::after {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: 23px;
  border: 1px solid rgba(255, 255, 255, 0.52);
  pointer-events: none;
}

#quiz-container .practice-stage-kicker {
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(168, 88, 24, 0.9);
}

#quiz-container .practice-stage-title {
  font-size: clamp(1.18rem, 2vw, 1.52rem);
  line-height: 1.08;
  font-weight: 950;
  color: rgba(24, 26, 40, 0.96);
  text-wrap: balance;
}

#quiz-container .practice-stage-sub {
  max-width: 60ch;
  font-size: 0.9rem;
  line-height: 1.5;
  color: rgba(24, 26, 40, 0.7);
  text-wrap: pretty;
}

#quiz-container .practice-stage-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

#quiz-container .practice-stage-pill {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 7px 11px;
  border-radius: 999px;
  border: 1px solid rgba(255, 160, 96, 0.18);
  background: rgba(255, 255, 255, 0.78);
  box-shadow: 0 10px 22px rgba(15, 23, 42, 0.07);
  font-size: 0.76rem;
  font-weight: 850;
  color: rgba(24, 26, 40, 0.82);
}

#quiz-container .practice-focus-strip {
  gap: 12px;
}

#quiz-container .practice-focus-strip[hidden],
#quiz-container .practice-hub-glance[hidden] {
  display: none !important;
}

#quiz-container .practice-focus-card {
  position: relative;
  overflow: hidden;
  min-height: 108px;
  border-radius: 20px;
  padding: 15px 15px 14px;
  background:
    radial-gradient(
      170px 110px at 100% 0%,
      rgba(0, 198, 168, 0.12),
      transparent 72%
    ),
    linear-gradient(
      150deg,
      rgba(255, 255, 255, 0.97),
      rgba(249, 252, 255, 0.94)
    );
  border: 1px solid rgba(8, 18, 34, 0.08);
  box-shadow: 0 16px 36px rgba(15, 23, 42, 0.1);
}

#quiz-container .practice-focus-card::after {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  top: 0;
  height: 4px;
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    rgba(255, 172, 68, 0.94),
    rgba(0, 187, 151, 0.86),
    rgba(78, 133, 255, 0.82)
  );
}

#quiz-container .practice-quick-btn {
  position: relative;
  overflow: hidden;
  display: grid;
  align-content: start;
  gap: 8px;
  border-radius: 20px;
  padding: 15px 16px;
  background: linear-gradient(
    150deg,
    rgba(255, 255, 255, 0.98),
    rgba(248, 252, 255, 0.94)
  );
  border: 1px solid rgba(8, 18, 34, 0.08);
  box-shadow: 0 16px 34px rgba(15, 23, 42, 0.1);
  transition:
    transform 180ms ease,
    box-shadow 180ms ease,
    border-color 180ms ease;
}

#quiz-container .practice-quick-btn::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: linear-gradient(
    90deg,
    rgba(255, 176, 74, 0.96),
    rgba(90, 194, 177, 0.82)
  );
  opacity: 0.82;
}

#quiz-container .practice-quick-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 18px 36px rgba(15, 23, 42, 0.12);
}

#quiz-container .practice-quick-actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

#quiz-container .practice-quick-btn.is-next {
  background:
    radial-gradient(
      180px 120px at 100% 0%,
      rgba(255, 189, 86, 0.22),
      transparent 70%
    ),
    linear-gradient(
      150deg,
      rgba(255, 252, 246, 0.98),
      rgba(245, 255, 252, 0.95)
    );
}

#quiz-container .practice-quick-title {
  display: block;
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(24, 26, 40, 0.46);
}

#quiz-container .practice-quick-sub {
  display: block;
  font-size: 1rem;
  line-height: 1.28;
  font-weight: 860;
  color: rgba(24, 26, 40, 0.88);
  text-wrap: balance;
}

#quiz-container .practice-hub-nav {
  top: 6px;
  gap: 10px;
  padding: 7px;
  border-radius: 18px;
  background: linear-gradient(
    160deg,
    rgba(255, 255, 255, 0.96),
    rgba(246, 250, 255, 0.94)
  );
  box-shadow: 0 16px 32px rgba(15, 23, 42, 0.12);
}

#quiz-container .practice-hub-tab {
  min-height: 42px;
  border-radius: 13px;
  font-size: 0.74rem;
  letter-spacing: 0.12em;
}

#quiz-container .practice-hub-tab.is-active {
  background: linear-gradient(
    145deg,
    rgba(255, 247, 235, 0.98),
    rgba(235, 249, 255, 0.96)
  );
  border-color: rgba(255, 160, 96, 0.28);
  box-shadow: 0 12px 24px rgba(255, 160, 96, 0.12);
}

#quiz-container .practice-hub-glance-card {
  min-height: 116px;
  padding: 14px 14px 13px;
  border-radius: 18px;
}

#quiz-container .game-block[data-block="practice"] .quiz-menu-btn {
  touch-action: pan-y pinch-zoom;
  background:
    radial-gradient(
      220px 120px at 100% 0%,
      rgba(255, 191, 92, 0.16),
      transparent 70%
    ),
    linear-gradient(
      150deg,
      rgba(255, 255, 255, 0.98),
      rgba(251, 248, 244, 0.95)
    );
  border-color: rgba(255, 160, 96, 0.14);
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.12);
}

#quiz-container
  .game-block[data-block="practice"]
  .quiz-menu-btn
  .game-card-icon {
  width: 56px;
  height: 56px;
  border-radius: 18px;
  background: linear-gradient(
    145deg,
    rgba(255, 172, 68, 0.18),
    rgba(0, 187, 151, 0.1)
  );
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

#quiz-container
  .game-block[data-block="practice"]
  .quiz-menu-btn[data-game-id="recipe"] {
  background:
    radial-gradient(
      220px 120px at 100% 0%,
      rgba(255, 180, 72, 0.22),
      transparent 70%
    ),
    linear-gradient(
      150deg,
      rgba(255, 252, 244, 0.98),
      rgba(245, 255, 249, 0.95)
    );
}

#quiz-container
  .game-block[data-block="practice"]
  .quiz-menu-btn[data-game-id="upsell"],
#quiz-container
  .game-block[data-block="practice"]
  .quiz-menu-btn[data-game-id="upsell-duel"] {
  background:
    radial-gradient(
      220px 120px at 100% 0%,
      rgba(255, 132, 72, 0.22),
      transparent 70%
    ),
    linear-gradient(
      150deg,
      rgba(255, 248, 244, 0.98),
      rgba(255, 252, 248, 0.95)
    );
}

#quiz-container
  .game-block[data-block="practice"]
  .quiz-menu-btn[data-game-id="memory"] {
  background:
    radial-gradient(
      220px 120px at 100% 0%,
      rgba(90, 170, 255, 0.18),
      transparent 70%
    ),
    linear-gradient(
      150deg,
      rgba(248, 252, 255, 0.98),
      rgba(244, 250, 255, 0.95)
    );
}

#game-overlay #recipe-game-container .game-body {
  gap: 14px;
}

#game-overlay #recipe-game-container .recipe-hero {
  display: grid;
  gap: 12px;
}

#game-overlay #recipe-game-container .recipe-stage {
  display: grid;
  gap: 8px;
  padding: 16px 18px;
  border-radius: 24px;
  background:
    radial-gradient(
      220px 130px at 0% 0%,
      rgba(255, 172, 68, 0.2),
      transparent 72%
    ),
    radial-gradient(
      220px 130px at 100% 0%,
      rgba(0, 187, 151, 0.16),
      transparent 74%
    ),
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.98),
      rgba(251, 253, 248, 0.96)
    );
  border: 1px solid rgba(255, 172, 68, 0.14);
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.1);
}

#game-overlay #recipe-game-container .recipe-stage-kicker {
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(176, 92, 22, 0.92);
}

#game-overlay #recipe-game-container .recipe-stage-title {
  font-size: 1.18rem;
  line-height: 1.08;
  font-weight: 950;
  color: rgba(20, 25, 40, 0.96);
}

#game-overlay #recipe-game-container .recipe-stage-sub {
  font-size: 0.85rem;
  line-height: 1.48;
  color: rgba(20, 25, 40, 0.68);
}

#game-overlay #recipe-game-container .recipe-stage-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

#game-overlay #recipe-game-container .recipe-stage-pill {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 7px 11px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.84);
  border: 1px solid rgba(255, 172, 68, 0.16);
  box-shadow: 0 10px 22px rgba(15, 23, 42, 0.07);
  font-size: 0.74rem;
  font-weight: 850;
  color: rgba(20, 25, 40, 0.82);
}

#game-overlay #recipe-game-container .recipe-target-card {
  text-align: left;
}

#game-overlay #recipe-game-container .recipe-target-desc {
  margin: 0;
  max-width: none;
  color: rgba(20, 25, 40, 0.68);
}

#game-overlay #recipe-game-container .recipe-status[hidden] {
  display: none !important;
}

#game-overlay #recipe-game-container .recipe-status-card {
  display: grid;
  gap: 8px;
  padding: 15px 16px;
  border-radius: 22px;
  background: linear-gradient(
    145deg,
    rgba(255, 255, 255, 0.98),
    rgba(252, 248, 244, 0.96)
  );
  border: 1px solid rgba(255, 172, 68, 0.12);
  box-shadow: 0 16px 34px rgba(15, 23, 42, 0.1);
}

#game-overlay #recipe-game-container .recipe-status-kicker {
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(176, 92, 22, 0.9);
}

#game-overlay #recipe-game-container .recipe-status-title {
  font-size: 1rem;
  line-height: 1.16;
  font-weight: 900;
  color: rgba(20, 25, 40, 0.94);
}

#game-overlay #recipe-game-container .recipe-status-text {
  font-size: 0.84rem;
  line-height: 1.48;
  font-weight: 760;
  color: rgba(20, 25, 40, 0.72);
}

#game-overlay #recipe-game-container .recipe-status-list {
  display: grid;
  gap: 6px;
}

#game-overlay #recipe-game-container .recipe-status-line {
  display: block;
  padding: 9px 11px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(255, 172, 68, 0.1);
  font-size: 0.78rem;
  line-height: 1.42;
  font-weight: 760;
  color: rgba(20, 25, 40, 0.76);
}

#game-overlay
  #recipe-game-container
  .recipe-status[data-tone="success"]
  .recipe-status-card {
  background:
    radial-gradient(
      220px 130px at 100% 0%,
      rgba(54, 179, 126, 0.16),
      transparent 72%
    ),
    linear-gradient(
      145deg,
      rgba(247, 255, 250, 0.98),
      rgba(240, 249, 243, 0.96)
    );
  border-color: rgba(54, 179, 126, 0.18);
}

#game-overlay
  #recipe-game-container
  .recipe-status[data-tone="warn"]
  .recipe-status-card {
  background:
    radial-gradient(
      220px 130px at 100% 0%,
      rgba(255, 140, 76, 0.18),
      transparent 72%
    ),
    linear-gradient(
      145deg,
      rgba(255, 250, 246, 0.98),
      rgba(255, 241, 234, 0.96)
    );
  border-color: rgba(255, 140, 76, 0.18);
}

#game-overlay
  #recipe-game-container
  .recipe-status[data-tone="error"]
  .recipe-status-card {
  background:
    radial-gradient(
      220px 130px at 100% 0%,
      rgba(255, 104, 104, 0.16),
      transparent 72%
    ),
    linear-gradient(
      145deg,
      rgba(255, 247, 247, 0.98),
      rgba(255, 238, 238, 0.96)
    );
  border-color: rgba(255, 104, 104, 0.2);
}

#game-overlay #recipe-game-container .recipe-chip {
  appearance: none;
  -webkit-appearance: none;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

#game-overlay #recipe-game-container .recipe-chip:disabled {
  cursor: default;
}

#game-overlay #recipe-game-container .recipe-selected-chip .close {
  border: 0;
  background: rgba(255, 255, 255, 0.18);
  color: inherit;
}

#game-overlay #upsell-game-container {
  --upsell-accent-a: 0 164 153;
  --upsell-accent-b: 255 156 82;
  --upsell-accent-c: 255 222 130;
}

#game-overlay #upsell-game-container[data-variant="duel"] {
  --upsell-accent-a: 255 132 72;
  --upsell-accent-b: 255 196 76;
  --upsell-accent-c: 183 104 255;
}

#game-overlay #upsell-game-container .upsell-scene {
  display: grid;
  gap: 12px;
  padding: 18px;
  border-radius: 26px;
  background:
    radial-gradient(
      220px 120px at 0% 0%,
      rgba(var(--upsell-accent-b), 0.18),
      transparent 74%
    ),
    radial-gradient(
      220px 140px at 100% 0%,
      rgba(var(--upsell-accent-a), 0.14),
      transparent 76%
    ),
    linear-gradient(
      150deg,
      rgba(255, 255, 255, 0.98),
      rgba(255, 248, 244, 0.95)
    );
  border: 1px solid rgba(var(--upsell-accent-b), 0.18);
  box-shadow:
    0 22px 48px rgba(15, 23, 42, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.84);
}

#game-overlay #upsell-game-container .upsell-scene::before {
  display: none;
}

#game-overlay #upsell-game-container .upsell-scene-kicker {
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(var(--upsell-accent-b), 0.96);
}

#game-overlay #upsell-game-container .upsell-context {
  font-size: 1.14rem;
  line-height: 1.28;
  font-weight: 950;
  color: rgba(20, 25, 40, 0.96);
}

#game-overlay #upsell-game-container .upsell-guest-panel {
  display: grid;
  gap: 8px;
}

#game-overlay #upsell-game-container .upsell-guest-label {
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(20, 25, 40, 0.46);
}

#game-overlay #upsell-game-container .upsell-guest {
  display: block;
  margin-top: 0;
  padding: 14px 16px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.74);
  border: 1px solid rgba(var(--upsell-accent-a), 0.12);
  color: rgba(20, 25, 40, 0.82);
  font-size: 0.98rem;
  line-height: 1.42;
  font-weight: 820;
}

#game-overlay #upsell-game-container .upsell-meta {
  margin-top: 12px;
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
}

#game-overlay #upsell-game-container .upsell-meta-card {
  display: grid;
  gap: 8px;
  padding: 14px 16px;
  border-radius: 22px;
  background: linear-gradient(
    145deg,
    rgba(255, 255, 255, 0.96),
    rgba(252, 248, 244, 0.94)
  );
  border: 1px solid rgba(var(--upsell-accent-a), 0.12);
  box-shadow: 0 16px 34px rgba(15, 23, 42, 0.1);
}

#game-overlay #upsell-game-container .upsell-meta-kicker {
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(var(--upsell-accent-a), 0.92);
}

#game-overlay #upsell-game-container .upsell-meta-copy {
  font-size: 0.86rem;
  line-height: 1.48;
  font-weight: 800;
  color: rgba(20, 25, 40, 0.78);
}

#game-overlay #upsell-game-container .upsell-meta-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

#game-overlay #upsell-game-container .upsell-meta-pill {
  display: inline-flex;
  align-items: center;
  min-height: 29px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.84);
  border: 1px solid rgba(var(--upsell-accent-b), 0.18);
  box-shadow: 0 10px 22px rgba(15, 23, 42, 0.07);
  font-size: 0.74rem;
  font-weight: 850;
  color: rgba(20, 25, 40, 0.8);
}

#game-overlay #upsell-game-container .upsell-timer {
  margin-top: 10px;
  padding: 12px 14px;
  border-radius: 20px;
  background: linear-gradient(
    145deg,
    rgba(255, 255, 255, 0.96),
    rgba(253, 248, 243, 0.93)
  );
  border: 1px solid rgba(var(--upsell-accent-b), 0.16);
  box-shadow: 0 14px 28px rgba(15, 23, 42, 0.08);
}

#game-overlay #upsell-game-container .upsell-timer[hidden],
#game-overlay #upsell-game-container .upsell-timer[aria-hidden="true"] {
  display: none !important;
}

#game-overlay #upsell-game-container .upsell-option-card {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 16px;
  min-height: 118px;
  border-radius: 24px;
  background:
    linear-gradient(
        150deg,
        rgba(255, 255, 255, 0.98),
        rgba(255, 249, 244, 0.95)
      )
      padding-box,
    linear-gradient(
        145deg,
        rgba(var(--upsell-accent-a), 0.24),
        rgba(var(--upsell-accent-b), 0.2),
        rgba(var(--upsell-accent-c), 0.2)
      )
      border-box;
  border: 1px solid transparent;
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.1);
}

#game-overlay #upsell-game-container .upsell-option-mark {
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: linear-gradient(
    145deg,
    rgba(var(--upsell-accent-a), 0.98),
    rgba(var(--upsell-accent-b), 0.9)
  );
  color: #fff;
  font-size: 0.86rem;
  font-weight: 900;
  box-shadow: 0 12px 24px rgba(var(--upsell-accent-a), 0.2);
}

#game-overlay #upsell-game-container .upsell-option-copy {
  display: grid;
  gap: 6px;
  min-width: 0;
  flex: 1;
}

#game-overlay #upsell-game-container .upsell-option-kicker {
  font-size: 0.66rem;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(var(--upsell-accent-a), 0.9);
}

#game-overlay #upsell-game-container .upsell-option-text {
  font-size: 0.96rem;
  line-height: 1.42;
  font-weight: 860;
  color: rgba(20, 25, 40, 0.92);
}

#game-overlay #upsell-game-container .upsell-option-hint {
  font-size: 0.76rem;
  line-height: 1.38;
  font-weight: 760;
  color: rgba(20, 25, 40, 0.58);
}

#game-overlay
  #upsell-game-container
  .upsell-option-card.correct
  .upsell-option-text,
#game-overlay
  #upsell-game-container
  .upsell-option-card.correct
  .upsell-option-hint,
#game-overlay
  #upsell-game-container
  .upsell-option-card.wrong
  .upsell-option-text,
#game-overlay
  #upsell-game-container
  .upsell-option-card.wrong
  .upsell-option-hint,
#game-overlay
  #upsell-game-container
  .upsell-option-card.correct
  .upsell-option-kicker,
#game-overlay
  #upsell-game-container
  .upsell-option-card.wrong
  .upsell-option-kicker {
  color: rgba(255, 255, 255, 0.94);
}

#game-overlay #upsell-game-container .upsell-feedback {
  margin-top: 12px;
  padding: 16px;
  border-radius: 24px;
  background: linear-gradient(
    145deg,
    rgba(255, 255, 255, 0.97),
    rgba(252, 248, 244, 0.95)
  );
  border: 1px solid rgba(var(--upsell-accent-b), 0.14);
  box-shadow: 0 18px 38px rgba(15, 23, 42, 0.1);
}

#game-overlay #upsell-game-container .upsell-feedback-head {
  display: grid;
  gap: 6px;
  margin-bottom: 10px;
}

#game-overlay #upsell-game-container .upsell-feedback-badge {
  width: fit-content;
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(var(--upsell-accent-b), 0.12);
  border: 1px solid rgba(var(--upsell-accent-b), 0.18);
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(165, 84, 20, 0.92);
}

#game-overlay #upsell-game-container .upsell-feedback-title {
  font-size: 1rem;
  line-height: 1.16;
  font-weight: 900;
  color: rgba(20, 25, 40, 0.94);
}

#game-overlay #upsell-game-container .upsell-feedback-block {
  padding: 12px 13px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.74);
  border: 1px solid rgba(var(--upsell-accent-a), 0.1);
}

#game-overlay
  #upsell-game-container
  .upsell-feedback-block
  + .upsell-feedback-block {
  margin-top: 10px;
}

#game-overlay #upsell-game-container .upsell-feedback-label {
  margin-bottom: 6px;
  font-size: 0.66rem;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(var(--upsell-accent-a), 0.88);
}

#game-overlay #upsell-game-container .upsell-feedback-line {
  font-size: 0.86rem;
  line-height: 1.48;
  font-weight: 800;
  color: rgba(20, 25, 40, 0.86);
}

#game-overlay #upsell-game-container .upsell-feedback-line.is-muted {
  margin-top: 6px;
  color: rgba(20, 25, 40, 0.64);
}

#game-overlay #upsell-game-container .upsell-feedback-values {
  margin-top: 10px;
}

#game-overlay #upsell-game-container .upsell-feedback-chip {
  border-color: rgba(var(--upsell-accent-a), 0.18);
  background: rgba(255, 255, 255, 0.84);
  color: rgba(20, 25, 40, 0.8);
}

#game-overlay #upsell-game-container .upsell-feedback-case {
  margin-top: 10px;
  color: rgba(var(--upsell-accent-a), 0.86);
}

@media (min-width: 901px) {
  #quiz-container .practice-launch-grid {
    grid-template-columns: minmax(0, 1.45fr) minmax(280px, 0.95fr);
  }

  #quiz-container .practice-insights-shell {
    grid-template-columns: minmax(0, 1.2fr) minmax(320px, 0.8fr);
  }

  #quiz-container .practice-quick-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  #quiz-container .practice-today-shell {
    gap: 12px;
    margin-bottom: 14px;
  }

  #quiz-container .practice-launch-grid {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  #quiz-container .practice-launch-grid > * {
    width: 100%;
    min-width: 0;
  }

  #quiz-container .practice-insights-shell {
    gap: 12px;
    margin-top: 14px;
  }

  #quiz-container .practice-stage-banner {
    gap: 8px;
    margin-bottom: 0;
    padding: 16px 15px 14px;
    border-radius: 22px;
  }

  #quiz-container .practice-stage-title {
    max-width: none;
    font-size: 1.08rem;
    line-height: 1.06;
  }

  #quiz-container .practice-stage-sub {
    max-width: none;
    font-size: 0.8rem;
    line-height: 1.42;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  #quiz-container .practice-stage-pills {
    display: none;
  }

  #quiz-container .practice-stage-pill {
    min-height: 28px;
    padding: 6px 10px;
    font-size: 0.68rem;
    box-shadow: 0 8px 16px rgba(15, 23, 42, 0.05);
  }

  #quiz-container .practice-quick-btn {
    width: 100%;
    min-height: 86px;
    padding: 14px 14px 15px;
    border-radius: 20px;
    box-shadow: 0 14px 28px rgba(15, 23, 42, 0.08);
  }

  #quiz-container .practice-quick-title {
    font-size: 0.66rem;
    letter-spacing: 0.12em;
  }

  #quiz-container .practice-quick-sub {
    font-size: 0.94rem;
    line-height: 1.24;
  }

  #quiz-container .practice-shift-strip {
    padding: 12px;
    border-radius: 18px;
  }

  #quiz-container .practice-shift-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  #quiz-container .practice-shift-item {
    min-height: 68px;
    padding: 9px 10px;
    border-radius: 13px;
  }

  #quiz-container .practice-shift-item-v {
    white-space: normal;
    line-height: 1.25;
  }

  #quiz-container .practice-focus-card {
    min-height: 98px;
    padding: 14px 14px 13px;
    border-radius: 20px;
  }

  #quiz-container .practice-focus-value {
    font-size: 0.88rem;
  }

  #quiz-container .practice-focus-sub {
    font-size: 0.7rem;
  }

  #quiz-container .practice-duel-callout {
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 16px 15px 15px;
    border-radius: 20px;
  }

  #quiz-container .practice-duel-callout__copy {
    gap: 5px;
  }

  #quiz-container .practice-duel-callout__title {
    font-size: 0.98rem;
  }

  #quiz-container .practice-duel-callout__sub {
    font-size: 0.78rem;
    line-height: 1.4;
  }

  #quiz-container .practice-duel-callout__cta {
    grid-template-columns: auto 1fr;
    justify-items: start;
    align-items: center;
    min-width: 0;
  }

  #quiz-container .practice-duel-callout__icon {
    width: 42px;
    height: 42px;
    border-radius: 14px;
    font-size: 18px;
  }

  #quiz-container .practice-duel-callout__label {
    min-height: 28px;
    padding: 0 12px;
    font-size: 0.68rem;
  }

  #quiz-container .practice-secondary-shell {
    gap: 12px;
    margin-top: 16px;
    padding: 14px;
    border-radius: 20px;
  }

  #quiz-container .practice-secondary-title {
    font-size: 0.88rem;
  }

  #game-overlay #recipe-game-container .recipe-stage,
  #game-overlay #upsell-game-container .upsell-scene,
  #game-overlay #upsell-game-container .upsell-meta-card,
  #game-overlay #upsell-game-container .upsell-feedback {
    padding: 14px;
    border-radius: 20px;
  }

  #game-overlay #recipe-game-container .recipe-target-card {
    padding: 18px 16px 16px;
  }

  #game-overlay #recipe-game-container .recipe-stage-title,
  #game-overlay #upsell-game-container .upsell-context {
    font-size: 1rem;
  }

  #game-overlay #upsell-game-container .upsell-option-card {
    min-height: 104px;
    padding: 14px;
    border-radius: 20px;
  }

  #game-overlay #upsell-game-container .upsell-option-mark {
    width: 34px;
    height: 34px;
    border-radius: 12px;
  }

  #game-overlay #upsell-game-container .upsell-option-text {
    font-size: 0.9rem;
  }

  #game-overlay #upsell-game-container .upsell-option-hint {
    font-size: 0.72rem;
  }
}

body[data-theme="dark"] #quiz-container .practice-stage-banner,
body[data-theme="dark"] #quiz-container .practice-focus-card,
body[data-theme="dark"] #quiz-container .practice-quick-btn,
body[data-theme="dark"] #quiz-container .practice-hub-nav,
body[data-theme="dark"] #quiz-container .practice-hub-glance-card,
body[data-theme="dark"]
  #quiz-container
  .game-block[data-block="practice"]
  .quiz-menu-btn,
body[data-theme="dark"] #game-overlay #recipe-game-container .recipe-stage,
body[data-theme="dark"]
  #game-overlay
  #recipe-game-container
  .recipe-status-card,
body[data-theme="dark"] #game-overlay #upsell-game-container .upsell-scene,
body[data-theme="dark"] #game-overlay #upsell-game-container .upsell-meta-card,
body[data-theme="dark"] #game-overlay #upsell-game-container .upsell-feedback,
body[data-theme="dark"]
  #game-overlay
  #upsell-game-container
  .upsell-feedback-block {
  background: linear-gradient(
    150deg,
    rgba(255, 255, 255, 0.1),
    rgba(255, 255, 255, 0.06)
  );
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow: 0 20px 44px rgba(0, 0, 0, 0.38);
}

body[data-theme="dark"] #quiz-container .practice-stage-title,
body[data-theme="dark"] #quiz-container .practice-focus-value,
body[data-theme="dark"] #quiz-container .practice-hub-glance-meta,
body[data-theme="dark"]
  #quiz-container
  .game-block[data-block="practice"]
  .quiz-menu-btn
  .game-card-title,
body[data-theme="dark"]
  #game-overlay
  #recipe-game-container
  .recipe-stage-title,
body[data-theme="dark"]
  #game-overlay
  #recipe-game-container
  .recipe-status-title,
body[data-theme="dark"] #game-overlay #upsell-game-container .upsell-context,
body[data-theme="dark"]
  #game-overlay
  #upsell-game-container
  .upsell-feedback-title,
body[data-theme="dark"]
  #game-overlay
  #upsell-game-container
  .upsell-option-text {
  color: rgba(255, 255, 255, 0.94);
}

body[data-theme="dark"] #quiz-container .practice-stage-sub,
body[data-theme="dark"] #quiz-container .practice-hub-glance-sub,
body[data-theme="dark"]
  #quiz-container
  .game-block[data-block="practice"]
  .quiz-menu-btn
  .game-card-desc,
body[data-theme="dark"] #game-overlay #recipe-game-container .recipe-stage-sub,
body[data-theme="dark"]
  #game-overlay
  #recipe-game-container
  .recipe-status-text,
body[data-theme="dark"]
  #game-overlay
  #recipe-game-container
  .recipe-status-line,
body[data-theme="dark"] #game-overlay #upsell-game-container .upsell-guest,
body[data-theme="dark"] #game-overlay #upsell-game-container .upsell-meta-copy,
body[data-theme="dark"]
  #game-overlay
  #upsell-game-container
  .upsell-feedback-line,
body[data-theme="dark"]
  #game-overlay
  #upsell-game-container
  .upsell-option-hint {
  color: rgba(255, 255, 255, 0.74);
}

/* ===== Sommelier Compact Pass ===== */
#game-overlay .grape-hero {
  display: grid;
  gap: 6px;
  padding: 12px 14px;
}

#game-overlay .grape-hero-kicker {
  width: fit-content;
  padding: 5px 9px;
  font-size: 0.62rem;
  letter-spacing: 0.14em;
}

#game-overlay .grape-hero-title {
  margin-top: 0;
  font-size: 1.02rem;
  line-height: 1.12;
}

#game-overlay .grape-hero-sub {
  margin-top: 0;
  max-width: none;
  font-size: 0.8rem;
  line-height: 1.35;
}

#game-overlay .grape-mini {
  gap: 6px;
  margin-top: 2px;
}

#game-overlay .grape-mini-chip {
  gap: 8px;
  padding: 6px 10px;
}

#game-overlay .grape-mini-value {
  font-size: 0.8rem;
}

#game-overlay #grape-game-container.is-compact .grape-hero-sub,
#game-overlay #grape-game-container.is-compact .grape-sheet-kicker {
  display: none;
}

#game-overlay .grape-card {
  padding: 14px;
}

#game-overlay .grape-sheet-kicker {
  margin-bottom: 8px;
  padding: 5px 8px;
  font-size: 0.6rem;
  letter-spacing: 0.14em;
}

#game-overlay .grape-card-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 10px;
}

#game-overlay .grape-question {
  max-width: none;
  font-size: 1.08rem;
  line-height: 1.14;
}

#game-overlay .grape-question::before {
  margin-bottom: 5px;
}

#game-overlay .grape-sheet-meta {
  gap: 6px;
  margin-bottom: 10px;
}

#game-overlay .grape-sheet-pill {
  min-height: 28px;
  padding: 6px 10px;
  font-size: 0.72rem;
}

#game-overlay .grape-timer {
  gap: 8px;
  padding: 6px 10px 6px 6px;
  min-width: 106px;
}

#game-overlay .grape-timer-caption {
  font-size: 0.56rem;
  letter-spacing: 0.14em;
}

#game-overlay .grape-timer-text {
  font-size: 0.86rem;
}

#game-overlay .grape-chip-group {
  padding: 11px;
}

#game-overlay .grape-option {
  min-height: 74px;
  padding: 13px 14px;
}

#game-overlay .grape-option-title {
  font-size: 0.94rem;
}

#game-overlay .grape-option-hint {
  font-size: 0.7rem;
}

#game-overlay .grape-note {
  margin-top: 10px;
}

#game-overlay .grape-note-card {
  gap: 10px;
  padding: 14px;
  border-radius: 20px;
}

#game-overlay .grape-note-head {
  gap: 10px;
}

#game-overlay .grape-note-badge {
  min-height: 24px;
  padding: 4px 9px;
  font-size: 0.62rem;
  letter-spacing: 0.12em;
}

#game-overlay .grape-note-title {
  font-size: 0.92rem;
  line-height: 1.16;
}

#game-overlay .grape-note-score {
  min-height: 32px;
  padding: 0 10px;
  font-size: 0.76rem;
}

#game-overlay .grape-note-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

#game-overlay .grape-note-summary-pill {
  padding: 10px 12px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(var(--grape-accent-a), 0.08);
}

#game-overlay .grape-note-summary-label {
  display: block;
  margin-bottom: 4px;
  font-size: 0.6rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(var(--grape-accent-a), 0.84);
}

#game-overlay .grape-note-summary-value {
  display: block;
  font-size: 0.84rem;
  line-height: 1.24;
  font-weight: 900;
  color: rgba(8, 18, 34, 0.9);
}

#game-overlay .grape-note-section {
  padding: 10px 12px;
  border-radius: 16px;
}

#game-overlay .grape-note-section-title {
  margin-bottom: 4px;
  font-size: 0.6rem;
  letter-spacing: 0.12em;
}

#game-overlay .grape-note-section-body {
  font-size: 0.76rem;
  line-height: 1.42;
}

@media (max-width: 640px) {
  #game-overlay .grape-hero {
    padding: 11px 12px;
    gap: 5px;
  }

  #game-overlay .grape-hero-title {
    font-size: 0.96rem;
  }

  #game-overlay .grape-hero-sub {
    display: none;
  }

  #game-overlay .grape-card {
    padding: 12px;
  }

  #game-overlay .grape-sheet-kicker {
    display: none;
  }

  #game-overlay .grape-question {
    font-size: 1rem;
  }

  #game-overlay .grape-question::before {
    margin-bottom: 4px;
    font-size: 0.58rem;
  }

  #game-overlay .grape-timer {
    min-width: 92px;
    padding-right: 8px;
  }

  #game-overlay .grape-timer-caption {
    display: none;
  }

  #game-overlay .grape-option {
    min-height: 72px;
    padding: 12px 13px;
  }

  #game-overlay .grape-option-title {
    font-size: 0.9rem;
  }

  #game-overlay .grape-option-hint {
    font-size: 0.68rem;
  }

  #game-overlay .grape-note-card {
    gap: 8px;
    padding: 12px;
  }

  #game-overlay .grape-note-head {
    align-items: center;
  }

  #game-overlay .grape-note-score {
    min-height: 28px;
    font-size: 0.72rem;
  }

  #game-overlay .grape-note-summary {
    gap: 6px;
  }

  #game-overlay .grape-note-summary-pill,
  #game-overlay .grape-note-section {
    padding: 9px 10px;
  }

  #game-overlay .grape-note-section-body {
    font-size: 0.74rem;
  }
}

body[data-theme="dark"] #game-overlay .grape-note-summary-pill {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.1);
}

body[data-theme="dark"] #game-overlay .grape-note-summary-value {
  color: rgba(255, 255, 255, 0.92);
}

/* ===== Compact Meta Bar ===== */
#game-overlay
  :is(
    #allergen-game-container,
    #training-game-container,
    #upsell-game-container,
    #recipe-game-container,
    #memory-game-container,
    #quiz-game,
    #grape-game-container,
    #oracle-game-panel
  )
  .game-meta {
  grid-template-columns: max-content max-content minmax(0, 1fr);
  gap: 6px 8px;
  padding: 8px 12px 9px;
}

#game-overlay
  :is(
    #allergen-game-container,
    #training-game-container,
    #upsell-game-container,
    #recipe-game-container,
    #memory-game-container,
    #quiz-game,
    #grape-game-container,
    #oracle-game-panel
  )
  .game-progress {
  grid-column: 1 / -1;
  grid-row: 2;
  height: 5px;
}

#game-overlay
  :is(
    #allergen-game-container,
    #training-game-container,
    #upsell-game-container,
    #recipe-game-container,
    #memory-game-container,
    #quiz-game,
    #grape-game-container,
    #oracle-game-panel
  )
  .game-round,
#game-overlay #quiz-game .quiz-streak,
#game-overlay #memory-game-container .memory-progress-info {
  margin: 0;
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 10px;
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

#game-overlay
  :is(
    #allergen-game-container,
    #training-game-container,
    #upsell-game-container,
    #recipe-game-container,
    #memory-game-container,
    #quiz-game,
    #grape-game-container,
    #oracle-game-panel
  )
  .game-round {
  font-size: 11px;
  line-height: 1;
  font-weight: 850;
}

#game-overlay #quiz-game .quiz-streak,
#game-overlay #memory-game-container .memory-progress-info {
  grid-row: 1;
  grid-column: 2;
  align-self: center;
}

#game-overlay #quiz-game .quiz-streak {
  min-height: 30px;
  padding-inline: 10px;
  font-size: 11px;
  line-height: 1;
  align-self: center;
}

#game-overlay #memory-game-container .memory-progress-info {
  flex-direction: row;
  gap: 6px;
  padding-inline: 10px;
}

#game-overlay #memory-game-container .memory-progress-info span {
  font-size: 10px;
  letter-spacing: 0.08em;
  line-height: 1;
}

@media (max-width: 640px) {
  #game-overlay
    :is(
      #allergen-game-container,
      #training-game-container,
      #upsell-game-container,
      #recipe-game-container,
      #memory-game-container,
      #quiz-game,
      #grape-game-container,
      #oracle-game-panel
    )
    .game-meta {
    grid-template-columns: max-content max-content minmax(0, 1fr);
    gap: 6px;
    padding: 7px 10px 8px;
  }

  #game-overlay
    :is(
      #allergen-game-container,
      #training-game-container,
      #upsell-game-container,
      #recipe-game-container,
      #memory-game-container,
      #quiz-game,
      #grape-game-container,
      #oracle-game-panel
    )
    .game-round,
  #game-overlay #quiz-game .quiz-streak,
  #game-overlay #memory-game-container .memory-progress-info {
    width: auto;
    min-height: 28px;
    padding: 5px 9px;
  }

  #game-overlay
    :is(
      #allergen-game-container,
      #training-game-container,
      #upsell-game-container,
      #recipe-game-container,
      #memory-game-container,
      #quiz-game,
      #grape-game-container,
      #oracle-game-panel
    )
    .game-round,
  #game-overlay #quiz-game .quiz-streak {
    font-size: 10px;
  }

  #game-overlay #memory-game-container .memory-progress-info {
    gap: 5px;
    padding-inline: 8px;
  }

  #game-overlay #memory-game-container .memory-progress-info span {
    font-size: 9px;
  }
}

/* ===== Sommelier Color Boost + No Timer ===== */
#game-overlay #grape-game-container .grape-timer {
  display: none !important;
}

#game-overlay #grape-game-container .grape-card-head {
  grid-template-columns: minmax(0, 1fr);
}

#game-overlay .grape-panel .game-screen {
  background:
    radial-gradient(
      1100px 340px at 8% -8%,
      rgba(var(--grape-accent-a), 0.26),
      transparent 58%
    ),
    radial-gradient(
      920px 300px at 100% 2%,
      rgba(var(--grape-accent-b), 0.2),
      transparent 56%
    ),
    radial-gradient(
      860px 280px at 50% 118%,
      rgba(var(--grape-accent-c), 0.16),
      transparent 58%
    ),
    linear-gradient(
      180deg,
      rgba(255, 247, 241, 0.98) 0%,
      rgba(255, 252, 248, 0.98) 36%,
      rgba(245, 249, 252, 1) 100%
    );
}

#game-overlay .grape-panel .game-topbar {
  background:
    radial-gradient(
      520px 180px at 0% 0%,
      rgba(var(--grape-accent-a), 0.14),
      transparent 58%
    ),
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.96),
      rgba(255, 246, 240, 0.92)
    );
  border-bottom-color: rgba(var(--grape-accent-a), 0.16);
  box-shadow: 0 12px 28px rgba(var(--grape-accent-a), 0.08);
}

#game-overlay .grape-panel .game-title {
  color: rgba(35, 24, 30, 0.96);
}

#game-overlay .grape-panel .game-back,
#game-overlay .grape-panel .game-close {
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.96),
    rgba(255, 244, 237, 0.9)
  );
  border-color: rgba(var(--grape-accent-a), 0.14);
  box-shadow: 0 10px 24px rgba(var(--grape-accent-a), 0.08);
}

#game-overlay .grape-panel .game-meta {
  background:
    radial-gradient(
      460px 170px at 0% 0%,
      rgba(var(--grape-accent-b), 0.14),
      transparent 60%
    ),
    linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(255, 248, 243, 0.94));
  border-bottom-color: rgba(var(--grape-accent-a), 0.1);
}

#game-overlay .grape-panel .game-progress {
  background: rgba(var(--grape-accent-a), 0.1);
}

#game-overlay .grape-panel .game-progress .fill {
  box-shadow: 0 0 18px rgba(var(--grape-accent-b), 0.3);
}

#game-overlay .grape-hero {
  background: linear-gradient(
    135deg,
    rgba(var(--grape-accent-a), 0.97),
    rgba(var(--grape-accent-b), 0.95) 58%,
    rgba(var(--grape-accent-c), 0.88) 100%
  );
  border: 1px solid rgba(255, 255, 255, 0.24);
  box-shadow:
    0 24px 52px rgba(var(--grape-accent-a), 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

#game-overlay .grape-hero::before {
  opacity: 0.34;
}

#game-overlay .grape-hero-kicker {
  background: rgba(255, 255, 255, 0.18);
  border-color: rgba(255, 255, 255, 0.22);
  color: rgba(255, 247, 243, 0.9);
}

#game-overlay .grape-hero-title {
  color: rgba(255, 250, 246, 0.98);
  text-shadow: 0 8px 22px rgba(64, 16, 24, 0.18);
}

#game-overlay .grape-hero-sub {
  color: rgba(255, 241, 235, 0.82);
}

#game-overlay .grape-mini-chip {
  background: rgba(255, 255, 255, 0.18);
  border-color: rgba(255, 255, 255, 0.22);
  box-shadow: none;
}

#game-overlay .grape-mini-label {
  color: rgba(255, 245, 239, 0.68);
}

#game-overlay .grape-mini-value {
  color: rgba(255, 255, 255, 0.96);
}

#game-overlay .grape-card {
  background:
    radial-gradient(
      420px 180px at 0% 0%,
      rgba(var(--grape-accent-b), 0.12),
      transparent 60%
    ),
    radial-gradient(
      360px 160px at 100% 0%,
      rgba(var(--grape-accent-c), 0.2),
      transparent 62%
    ),
    linear-gradient(
      160deg,
      rgba(255, 255, 255, 0.985),
      rgba(255, 247, 241, 0.97)
    );
  border-color: rgba(var(--grape-accent-a), 0.14);
  box-shadow:
    0 18px 44px rgba(var(--grape-accent-a), 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

#game-overlay .grape-card::before {
  background: linear-gradient(
    90deg,
    rgba(var(--grape-accent-a), 0.98),
    rgba(var(--grape-accent-b), 0.94),
    rgba(var(--grape-accent-c), 0.9)
  );
}

#game-overlay .grape-sheet-kicker,
#game-overlay .grape-sheet-pill {
  background: rgba(255, 248, 243, 0.96);
  border-color: rgba(var(--grape-accent-a), 0.14);
  box-shadow: 0 10px 20px rgba(var(--grape-accent-a), 0.06);
}

#game-overlay .grape-sheet-kicker,
#game-overlay .grape-question::before,
#game-overlay .grape-chip-group-title,
#game-overlay .grape-options::before,
#game-overlay .grape-note-summary-label,
#game-overlay .grape-note-section-title {
  color: rgba(var(--grape-accent-a), 0.88);
}

#game-overlay .grape-chip-group {
  border-color: rgba(var(--grape-accent-a), 0.1);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.84),
    0 10px 24px rgba(var(--grape-accent-a), 0.05);
}

#game-overlay .grape-chip-group--aroma {
  background:
    radial-gradient(
      260px 120px at 0% 0%,
      rgba(var(--grape-accent-a), 0.13),
      transparent 60%
    ),
    linear-gradient(
      145deg,
      rgba(255, 250, 246, 0.96),
      rgba(255, 245, 240, 0.92)
    );
}

#game-overlay .grape-chip-group--structure {
  background:
    radial-gradient(
      240px 110px at 100% 0%,
      rgba(var(--grape-accent-c), 0.2),
      transparent 60%
    ),
    linear-gradient(
      145deg,
      rgba(255, 252, 246, 0.96),
      rgba(255, 248, 235, 0.92)
    );
}

#game-overlay .grape-option:not(.is-correct):not(.is-wrong) {
  background:
    linear-gradient(
        150deg,
        rgba(255, 255, 255, 0.99),
        rgba(255, 247, 242, 0.96)
      )
      padding-box,
    linear-gradient(
        145deg,
        rgba(var(--grape-accent-a), 0.44),
        rgba(var(--grape-accent-b), 0.26),
        rgba(var(--grape-accent-c), 0.28)
      )
      border-box;
  box-shadow: 0 14px 34px rgba(var(--grape-accent-a), 0.08);
}

#game-overlay .grape-option:not(.is-correct):not(.is-wrong):hover {
  box-shadow: 0 18px 40px rgba(var(--grape-accent-a), 0.12);
}

#game-overlay .grape-option.is-selected:not(.is-correct):not(.is-wrong) {
  background:
    linear-gradient(
        150deg,
        rgba(255, 255, 255, 0.99),
        rgba(255, 243, 236, 0.97)
      )
      padding-box,
    linear-gradient(
        145deg,
        rgba(var(--grape-accent-a), 0.6),
        rgba(var(--grape-accent-b), 0.34),
        rgba(var(--grape-accent-c), 0.34)
      )
      border-box;
  box-shadow: 0 18px 42px rgba(var(--grape-accent-a), 0.16);
}

#game-overlay .grape-option-mark {
  background: linear-gradient(
    145deg,
    rgba(var(--grape-accent-a), 0.98),
    rgba(var(--grape-accent-b), 0.94),
    rgba(var(--grape-accent-c), 0.9)
  );
  box-shadow: 0 14px 30px rgba(var(--grape-accent-a), 0.2);
}

#game-overlay .grape-option-title {
  color: rgba(42, 24, 31, 0.96);
}

#game-overlay .grape-option-hint {
  color: rgba(90, 63, 54, 0.72);
}

#game-overlay .grape-note-card {
  background:
    radial-gradient(
      360px 160px at 100% 0%,
      rgba(var(--grape-accent-c), 0.16),
      transparent 64%
    ),
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.985),
      rgba(255, 247, 241, 0.96)
    );
  border-color: rgba(var(--grape-accent-a), 0.12);
  box-shadow: 0 16px 36px rgba(var(--grape-accent-a), 0.08);
}

#game-overlay .grape-note-summary-pill,
#game-overlay .grape-note-section {
  background: rgba(255, 252, 249, 0.82);
  border-color: rgba(var(--grape-accent-a), 0.1);
}

/* ===== App Recovery Pass ===== */
#game-overlay #grape-game-container .grape-timer {
  display: none !important;
}

#game-overlay #grape-game-container .grape-card-head {
  grid-template-columns: minmax(0, 1fr);
}

#game-overlay .grape-panel .game-screen {
  background:
    radial-gradient(
      980px 320px at 8% -6%,
      rgba(var(--grape-accent-a), 0.18),
      transparent 58%
    ),
    radial-gradient(
      820px 260px at 100% 0%,
      rgba(var(--grape-accent-c), 0.14),
      transparent 56%
    ),
    linear-gradient(
      180deg,
      rgba(255, 248, 243, 0.98) 0%,
      rgba(251, 247, 244, 0.98) 38%,
      rgba(244, 248, 252, 1) 100%
    );
}

#game-overlay .grape-panel .game-topbar {
  background:
    radial-gradient(
      420px 150px at 0% 0%,
      rgba(var(--grape-accent-a), 0.1),
      transparent 58%
    ),
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.96),
      rgba(255, 247, 242, 0.92)
    );
  border-bottom-color: rgba(var(--grape-accent-a), 0.12);
  box-shadow: 0 10px 24px rgba(var(--grape-accent-a), 0.05);
}

#game-overlay .grape-panel .game-title {
  color: rgba(44, 29, 36, 0.96);
}

#game-overlay .grape-panel .game-back,
#game-overlay .grape-panel .game-close {
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.96),
    rgba(252, 246, 241, 0.92)
  );
  border-color: rgba(var(--grape-accent-a), 0.12);
  box-shadow: 0 8px 20px rgba(var(--grape-accent-a), 0.05);
}

#game-overlay .grape-panel .game-meta {
  background:
    radial-gradient(
      440px 150px at 0% 0%,
      rgba(var(--grape-accent-c), 0.1),
      transparent 58%
    ),
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.92),
      rgba(255, 249, 245, 0.94)
    );
}

#game-overlay .grape-hero {
  background:
    radial-gradient(
      260px 120px at 0% 0%,
      rgba(var(--grape-accent-c), 0.16),
      transparent 64%
    ),
    linear-gradient(
      145deg,
      rgba(255, 245, 239, 0.98),
      rgba(255, 238, 232, 0.96) 56%,
      rgba(255, 248, 242, 0.98) 100%
    );
  border: 1px solid rgba(var(--grape-accent-a), 0.16);
  box-shadow:
    0 18px 40px rgba(var(--grape-accent-a), 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.88);
}

#game-overlay .grape-hero::before {
  opacity: 0.14;
}

#game-overlay .grape-hero::after {
  opacity: 0.18;
}

#game-overlay .grape-hero-kicker {
  background: rgba(var(--grape-accent-a), 0.1);
  border-color: rgba(var(--grape-accent-a), 0.14);
  color: rgba(var(--grape-accent-a), 0.92);
}

#game-overlay .grape-hero-title {
  color: rgba(58, 30, 38, 0.96);
  text-shadow: none;
}

#game-overlay .grape-hero-sub {
  color: rgba(103, 68, 61, 0.78);
}

#game-overlay .grape-mini-chip {
  background: rgba(255, 255, 255, 0.76);
  border-color: rgba(var(--grape-accent-a), 0.12);
  box-shadow: 0 8px 18px rgba(var(--grape-accent-a), 0.05);
}

#game-overlay .grape-mini-label {
  color: rgba(var(--grape-accent-a), 0.66);
}

#game-overlay .grape-mini-value {
  color: rgba(58, 30, 38, 0.92);
}

#game-overlay .grape-card {
  background:
    radial-gradient(
      360px 150px at 100% 0%,
      rgba(var(--grape-accent-c), 0.18),
      transparent 62%
    ),
    radial-gradient(
      320px 140px at 0% 0%,
      rgba(var(--grape-accent-b), 0.08),
      transparent 58%
    ),
    linear-gradient(
      160deg,
      rgba(255, 255, 255, 0.985),
      rgba(255, 247, 242, 0.97)
    );
  border-color: rgba(var(--grape-accent-a), 0.14);
  box-shadow:
    0 18px 40px rgba(var(--grape-accent-a), 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

#game-overlay .grape-card::before {
  background: linear-gradient(
    90deg,
    rgba(var(--grape-accent-a), 0.92),
    rgba(var(--grape-accent-b), 0.86),
    rgba(var(--grape-accent-c), 0.88)
  );
}

#game-overlay .grape-sheet-kicker,
#game-overlay .grape-sheet-pill {
  background: rgba(255, 250, 246, 0.98);
  border-color: rgba(var(--grape-accent-a), 0.14);
  box-shadow: 0 8px 18px rgba(var(--grape-accent-a), 0.05);
}

#game-overlay .grape-sheet-kicker,
#game-overlay .grape-question::before,
#game-overlay .grape-chip-group-title,
#game-overlay .grape-options::before,
#game-overlay .grape-note-summary-label,
#game-overlay .grape-note-section-title {
  color: rgba(var(--grape-accent-a), 0.86);
}

#game-overlay .grape-chip-group--aroma {
  background:
    radial-gradient(
      240px 110px at 0% 0%,
      rgba(var(--grape-accent-a), 0.1),
      transparent 60%
    ),
    linear-gradient(
      145deg,
      rgba(255, 250, 246, 0.97),
      rgba(255, 245, 240, 0.94)
    );
}

#game-overlay .grape-chip-group--structure {
  background:
    radial-gradient(
      220px 110px at 100% 0%,
      rgba(var(--grape-accent-c), 0.16),
      transparent 60%
    ),
    linear-gradient(
      145deg,
      rgba(255, 252, 247, 0.97),
      rgba(255, 247, 236, 0.94)
    );
}

#game-overlay .grape-option:not(.is-correct):not(.is-wrong) {
  background:
    linear-gradient(
        150deg,
        rgba(255, 255, 255, 0.99),
        rgba(255, 248, 244, 0.97)
      )
      padding-box,
    linear-gradient(
        145deg,
        rgba(var(--grape-accent-a), 0.3),
        rgba(var(--grape-accent-b), 0.16),
        rgba(var(--grape-accent-c), 0.22)
      )
      border-box;
  box-shadow: 0 12px 28px rgba(var(--grape-accent-a), 0.06);
}

#game-overlay .grape-option:not(.is-correct):not(.is-wrong):hover {
  box-shadow: 0 16px 34px rgba(var(--grape-accent-a), 0.1);
}

#game-overlay .grape-option.is-selected:not(.is-correct):not(.is-wrong) {
  background:
    linear-gradient(
        150deg,
        rgba(255, 255, 255, 0.99),
        rgba(255, 244, 238, 0.98)
      )
      padding-box,
    linear-gradient(
        145deg,
        rgba(var(--grape-accent-a), 0.44),
        rgba(var(--grape-accent-b), 0.24),
        rgba(var(--grape-accent-c), 0.28)
      )
      border-box;
  box-shadow: 0 16px 36px rgba(var(--grape-accent-a), 0.12);
}

#game-overlay .grape-option-mark {
  background: linear-gradient(
    145deg,
    rgba(var(--grape-accent-a), 0.94),
    rgba(var(--grape-accent-b), 0.88),
    rgba(var(--grape-accent-c), 0.86)
  );
  box-shadow: 0 10px 22px rgba(var(--grape-accent-a), 0.14);
}

#game-overlay .grape-option-title {
  color: rgba(50, 30, 37, 0.96);
}

#game-overlay .grape-option-hint {
  color: rgba(96, 68, 60, 0.74);
}

/* ===== Final App Recovery ===== */
#game-overlay #training-game-container .training-order-card.is-no-image {
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
}

#game-overlay
  #training-game-container
  .training-order-card.is-no-image
  .training-item-meta {
  grid-column: 1;
  width: 100%;
  min-width: 0;
  justify-self: stretch;
}

#game-overlay #training-game-container .training-order-card.is-scripted {
  gap: 12px;
  padding: 16px 16px 14px;
  align-items: start;
}

#game-overlay
  #training-game-container
  .training-order-card.is-scripted::before {
  inset: auto -28px -28px auto;
  width: 132px;
  height: 132px;
  opacity: 0.72;
}

#game-overlay
  #training-game-container
  :is(
    .training-item-name,
    .training-item-category,
    .training-item-description,
    .training-item-composition,
    .training-item-allergens
  ) {
  min-width: 0;
  overflow-wrap: normal;
  word-break: normal;
  hyphens: manual;
}

#game-overlay
  #training-game-container
  .training-order-card.is-scripted
  .training-item-name {
  max-width: 18ch;
  font-size: 1.28rem;
  line-height: 1.12;
}

#game-overlay
  #training-game-container
  .training-order-card.is-scripted
  .training-item-description {
  max-width: 40ch;
  font-size: 0.95rem;
  line-height: 1.5;
  color: rgba(8, 18, 34, 0.72);
}

#game-overlay
  #training-game-container
  .training-order-card.is-scripted
  .training-item-composition {
  display: inline-flex;
  width: fit-content;
  padding: 8px 12px;
  border-radius: 15px;
  background: rgb(var(--audit-accent-a) / 0.08);
  border: 1px solid rgb(var(--audit-accent-a) / 0.12);
  color: rgba(8, 18, 34, 0.76);
  font-weight: 800;
}

#game-overlay
  #training-game-container
  .training-order-card.is-scripted
  .training-item-allergens:empty {
  display: none;
}

#game-overlay #grape-game-container .grape-timer {
  display: none !important;
}

#game-overlay #grape-game-container .grape-card-head {
  grid-template-columns: minmax(0, 1fr);
}

#game-overlay #grape-game-container .game-screen {
  background:
    radial-gradient(
      1020px 320px at 7% -8%,
      rgba(var(--grape-accent-a), 0.16),
      transparent 58%
    ),
    radial-gradient(
      860px 300px at 100% 0%,
      rgba(var(--grape-accent-c), 0.18),
      transparent 58%
    ),
    linear-gradient(
      180deg,
      rgba(255, 248, 243, 0.99) 0%,
      rgba(252, 248, 244, 0.99) 36%,
      rgba(245, 249, 252, 1) 100%
    );
}

#game-overlay #grape-game-container .game-topbar {
  background:
    radial-gradient(
      420px 150px at 0% 0%,
      rgba(var(--grape-accent-a), 0.1),
      transparent 58%
    ),
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.97),
      rgba(255, 247, 242, 0.94)
    );
  border-bottom-color: rgba(var(--grape-accent-a), 0.12);
  box-shadow: 0 10px 24px rgba(var(--grape-accent-a), 0.05);
}

#game-overlay #grape-game-container .game-title {
  color: rgba(48, 27, 36, 0.96);
}

#game-overlay #grape-game-container :is(.game-back, .game-close) {
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.97),
    rgba(252, 246, 241, 0.94)
  );
  border-color: rgba(var(--grape-accent-a), 0.12);
  box-shadow: 0 8px 20px rgba(var(--grape-accent-a), 0.05);
}

#game-overlay #grape-game-container .game-meta {
  background:
    radial-gradient(
      440px 150px at 0% 0%,
      rgba(var(--grape-accent-c), 0.1),
      transparent 58%
    ),
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.94),
      rgba(255, 249, 245, 0.96)
    );
}

#game-overlay #grape-game-container .grape-hero {
  background:
    radial-gradient(
      260px 120px at 0% 0%,
      rgba(var(--grape-accent-c), 0.18),
      transparent 64%
    ),
    linear-gradient(
      145deg,
      rgba(255, 245, 239, 0.99),
      rgba(255, 236, 229, 0.97) 56%,
      rgba(255, 247, 241, 0.99) 100%
    );
  border: 1px solid rgba(var(--grape-accent-a), 0.16);
  box-shadow:
    0 18px 40px rgba(var(--grape-accent-a), 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.88);
}

#game-overlay #grape-game-container .grape-hero::before {
  opacity: 0.08;
}

#game-overlay #grape-game-container .grape-hero::after {
  opacity: 0.12;
}

#game-overlay #grape-game-container .grape-hero-kicker {
  background: rgba(var(--grape-accent-a), 0.1);
  border-color: rgba(var(--grape-accent-a), 0.14);
  color: rgba(var(--grape-accent-a), 0.94);
}

#game-overlay #grape-game-container .grape-hero-title {
  color: rgba(76, 28, 42, 0.96);
  -webkit-text-fill-color: rgba(76, 28, 42, 0.96);
  text-shadow: none;
}

#game-overlay #grape-game-container .grape-hero-sub {
  color: rgba(102, 63, 58, 0.82);
}

#game-overlay #grape-game-container .grape-mini-chip {
  background: rgba(255, 255, 255, 0.84);
  border-color: rgba(var(--grape-accent-a), 0.12);
  box-shadow: 0 8px 18px rgba(var(--grape-accent-a), 0.05);
}

#game-overlay #grape-game-container .grape-mini-label {
  color: rgba(var(--grape-accent-a), 0.68);
}

#game-overlay #grape-game-container .grape-mini-value {
  color: rgba(58, 30, 38, 0.92);
}

#game-overlay #grape-game-container .grape-card {
  background:
    radial-gradient(
      360px 150px at 100% 0%,
      rgba(var(--grape-accent-c), 0.18),
      transparent 62%
    ),
    radial-gradient(
      320px 140px at 0% 0%,
      rgba(var(--grape-accent-b), 0.1),
      transparent 58%
    ),
    linear-gradient(
      160deg,
      rgba(255, 255, 255, 0.988),
      rgba(255, 247, 242, 0.975)
    );
  border-color: rgba(var(--grape-accent-a), 0.14);
  box-shadow:
    0 18px 40px rgba(var(--grape-accent-a), 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

#game-overlay #grape-game-container .grape-card::before {
  background: linear-gradient(
    90deg,
    rgba(var(--grape-accent-a), 0.94),
    rgba(var(--grape-accent-b), 0.88),
    rgba(var(--grape-accent-c), 0.88)
  );
}

#game-overlay
  #grape-game-container
  :is(.grape-sheet-kicker, .grape-sheet-pill) {
  background: rgba(255, 250, 246, 0.98);
  border-color: rgba(var(--grape-accent-a), 0.14);
  box-shadow: 0 8px 18px rgba(var(--grape-accent-a), 0.05);
}

#game-overlay
  #grape-game-container
  :is(
    .grape-sheet-kicker,
    .grape-question::before,
    .grape-chip-group-title,
    .grape-options::before,
    .grape-note-summary-label,
    .grape-note-section-title
  ) {
  color: rgba(var(--grape-accent-a), 0.88);
}

#game-overlay #grape-game-container .grape-question {
  color: rgba(42, 24, 31, 0.96);
}

#game-overlay #grape-game-container .grape-chip-group--aroma {
  background:
    radial-gradient(
      240px 110px at 0% 0%,
      rgba(var(--grape-accent-a), 0.11),
      transparent 60%
    ),
    linear-gradient(
      145deg,
      rgba(255, 250, 246, 0.97),
      rgba(255, 245, 240, 0.94)
    );
}

#game-overlay #grape-game-container .grape-chip-group--structure {
  background:
    radial-gradient(
      220px 110px at 100% 0%,
      rgba(var(--grape-accent-c), 0.18),
      transparent 60%
    ),
    linear-gradient(
      145deg,
      rgba(255, 252, 247, 0.97),
      rgba(255, 247, 236, 0.94)
    );
}

#game-overlay
  #grape-game-container
  .grape-option:not(.is-correct):not(.is-wrong) {
  background:
    linear-gradient(
        150deg,
        rgba(255, 255, 255, 0.992),
        rgba(255, 248, 244, 0.975)
      )
      padding-box,
    linear-gradient(
        145deg,
        rgba(var(--grape-accent-a), 0.34),
        rgba(var(--grape-accent-b), 0.18),
        rgba(var(--grape-accent-c), 0.24)
      )
      border-box;
  box-shadow: 0 12px 28px rgba(var(--grape-accent-a), 0.06);
}

#game-overlay
  #grape-game-container
  .grape-option:not(.is-correct):not(.is-wrong):hover {
  box-shadow: 0 16px 34px rgba(var(--grape-accent-a), 0.1);
}

#game-overlay
  #grape-game-container
  .grape-option.is-selected:not(.is-correct):not(.is-wrong) {
  background:
    linear-gradient(
        150deg,
        rgba(255, 255, 255, 0.992),
        rgba(255, 244, 238, 0.98)
      )
      padding-box,
    linear-gradient(
        145deg,
        rgba(var(--grape-accent-a), 0.46),
        rgba(var(--grape-accent-b), 0.24),
        rgba(var(--grape-accent-c), 0.28)
      )
      border-box;
  box-shadow: 0 16px 36px rgba(var(--grape-accent-a), 0.12);
}

#game-overlay #grape-game-container .grape-option-mark {
  background: linear-gradient(
    145deg,
    rgba(var(--grape-accent-a), 0.96),
    rgba(var(--grape-accent-b), 0.9),
    rgba(var(--grape-accent-c), 0.88)
  );
  box-shadow: 0 10px 22px rgba(var(--grape-accent-a), 0.14);
}

#game-overlay #grape-game-container .grape-option-title {
  color: rgba(50, 30, 37, 0.96);
}

#game-overlay #grape-game-container .grape-option-hint {
  color: rgba(96, 68, 60, 0.76);
}

#game-overlay #grape-game-container .grape-note-card {
  background:
    radial-gradient(
      360px 160px at 100% 0%,
      rgba(var(--grape-accent-c), 0.16),
      transparent 64%
    ),
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.988),
      rgba(255, 247, 241, 0.965)
    );
  border-color: rgba(var(--grape-accent-a), 0.12);
  box-shadow: 0 16px 36px rgba(var(--grape-accent-a), 0.08);
}

#game-overlay
  #grape-game-container
  :is(.grape-note-summary-pill, .grape-note-section) {
  background: rgba(255, 252, 249, 0.84);
  border-color: rgba(var(--grape-accent-a), 0.1);
}

@media (max-width: 640px) {
  #game-overlay
    #training-game-container
    .training-order-card.is-scripted
    .training-item-name {
    max-width: none;
    font-size: 1.16rem;
  }

  #game-overlay
    #training-game-container
    .training-order-card.is-scripted
    .training-item-description {
    max-width: none;
    font-size: 0.93rem;
  }
}

/* ===== Delivery Game Redesign ===== */
#game-overlay #training-game-container {
  --service-ink: 18 33 44;
  --service-accent: 0 110 124;
  --service-mint: 97 213 193;
  --service-gold: 245 184 93;
  --service-card-bg: linear-gradient(
    160deg,
    rgba(255, 255, 255, 0.985),
    rgba(246, 252, 251, 0.96)
  );
}

#game-overlay #training-game-container .game-screen {
  background:
    radial-gradient(
      780px 240px at 0% -6%,
      rgba(var(--service-mint), 0.16),
      transparent 58%
    ),
    radial-gradient(
      720px 240px at 100% 0%,
      rgba(var(--service-gold), 0.12),
      transparent 56%
    ),
    linear-gradient(
      180deg,
      rgba(250, 248, 243, 0.99),
      rgba(245, 250, 251, 0.99)
    );
}

#game-overlay #training-game-container .game-topbar {
  background:
    radial-gradient(
      380px 120px at 0% 0%,
      rgba(var(--service-mint), 0.14),
      transparent 58%
    ),
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.96),
      rgba(251, 247, 241, 0.94)
    );
  border-bottom-color: rgba(var(--service-accent), 0.1);
}

#game-overlay #training-game-container .game-title {
  color: rgba(var(--service-accent), 0.96);
}

#game-overlay #training-game-container .training-order-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
  padding: 18px;
  border-radius: 28px;
  border: 1px solid rgba(var(--service-accent), 0.12);
  background:
    radial-gradient(
      220px 120px at 100% 0%,
      rgba(var(--service-mint), 0.16),
      transparent 70%
    ),
    radial-gradient(
      180px 110px at 0% 0%,
      rgba(var(--service-gold), 0.1),
      transparent 72%
    ),
    var(--service-card-bg);
  box-shadow:
    0 18px 42px rgba(15, 23, 42, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.88);
}

#game-overlay #training-game-container .training-order-card:not(.is-no-image) {
  grid-template-columns: 96px minmax(0, 1fr);
  align-items: start;
}

#game-overlay #training-game-container .training-order-card::before {
  inset: auto -34px -34px auto;
  width: 150px;
  height: 150px;
  background: radial-gradient(
    circle,
    rgba(var(--service-accent), 0.12),
    transparent 72%
  );
}

#game-overlay #training-game-container .training-order-card img {
  width: 96px;
  height: 96px;
  border-radius: 22px;
  border: 2px solid rgba(255, 255, 255, 0.84);
  box-shadow: 0 14px 28px rgba(15, 23, 42, 0.12);
}

#game-overlay #training-game-container .training-item-meta {
  display: grid;
  gap: 10px;
  min-width: 0;
}

#game-overlay #training-game-container .training-item-category {
  order: 1;
  display: inline-flex;
  width: fit-content;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(var(--service-accent), 0.1);
  color: rgba(var(--service-accent), 0.96);
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

#game-overlay #training-game-container .training-item-name {
  order: 2;
  font-size: 1.34rem;
  line-height: 1.08;
  font-weight: 950;
  color: rgba(var(--service-ink), 0.96);
  max-width: 16ch;
}

#game-overlay #training-game-container .training-item-description {
  order: 3;
  max-width: 44ch;
  font-size: 0.95rem;
  line-height: 1.48;
  color: rgba(var(--service-ink), 0.72);
}

#game-overlay #training-game-container .training-item-composition {
  order: 4;
  display: grid;
  gap: 6px;
  padding: 12px 14px;
  border-radius: 20px;
  background: linear-gradient(
    145deg,
    rgba(255, 255, 255, 0.84),
    rgba(241, 248, 247, 0.94)
  );
  border: 1px solid rgba(var(--service-accent), 0.12);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.76);
}

#game-overlay #training-game-container .training-callout-kicker {
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(var(--service-accent), 0.88);
}

#game-overlay #training-game-container .training-callout-text {
  font-size: 0.9rem;
  line-height: 1.42;
  color: rgba(var(--service-ink), 0.8);
  font-weight: 760;
}

#game-overlay #training-game-container .training-item-allergens {
  order: 5;
  display: grid;
  gap: 10px;
  padding: 0;
  background: transparent;
  border: 0;
}

#game-overlay #training-game-container .training-focus-wrap {
  display: grid;
  gap: 8px;
}

#game-overlay #training-game-container .training-focus-label {
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(var(--service-accent), 0.82);
}

#game-overlay #training-game-container .training-focus-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

#game-overlay #training-game-container .training-focus-chip {
  display: inline-flex;
  align-items: center;
  padding: 7px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.86);
  border: 1px solid rgba(var(--service-accent), 0.12);
  color: rgba(var(--service-ink), 0.8);
  font-size: 0.78rem;
  font-weight: 820;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.05);
}

#game-overlay #training-game-container .training-brief-note {
  font-size: 0.82rem;
  line-height: 1.42;
  color: rgba(var(--service-ink), 0.68);
}

#game-overlay
  #training-game-container
  #training-question-text.training-question {
  margin-bottom: 0;
  padding: 16px 18px 14px;
  border-radius: 22px;
  background:
    radial-gradient(
      240px 120px at 100% 0%,
      rgba(var(--service-gold), 0.12),
      transparent 72%
    ),
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.98),
      rgba(248, 252, 254, 0.94)
    );
  border-color: rgba(var(--service-accent), 0.12);
  box-shadow: 0 14px 32px rgba(15, 23, 42, 0.08);
  color: rgba(var(--service-ink), 0.94);
  font-size: 1rem;
  line-height: 1.36;
}

#game-overlay
  #training-game-container
  #training-question-text.training-question::before {
  content: "Решение";
  color: rgba(var(--service-accent), 0.88);
}

#game-overlay
  #training-game-container[data-phase="intro"]
  #training-question-text.training-question::before,
#game-overlay
  #training-game-container[data-phase="checklist"]
  #training-question-text.training-question::before {
  content: "Формат";
}

#game-overlay
  #training-game-container[data-phase="review"]
  #training-question-text.training-question::before {
  content: "Повтор";
}

#game-overlay #training-game-container #training-options.training-options {
  gap: 10px;
}

#game-overlay
  #training-game-container
  #training-options.training-options::before {
  content: "Решения";
  color: rgba(var(--service-accent), 0.8);
}

#game-overlay
  #training-game-container[data-phase="intro"]
  #training-options.training-options::before,
#game-overlay
  #training-game-container[data-phase="checklist"]
  #training-options.training-options::before {
  content: "Старт";
}

#game-overlay
  #training-game-container[data-phase="review"]
  #training-options.training-options::before {
  content: "Ответ";
}

#game-overlay #training-game-container .training-option {
  text-align: left;
}

#game-overlay #training-game-container .training-option--decision {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  align-items: start;
  gap: 12px;
  min-height: 84px;
  padding: 14px;
  border-radius: 22px;
  background:
    linear-gradient(
        150deg,
        rgba(255, 255, 255, 0.995),
        rgba(248, 252, 251, 0.97)
      )
      padding-box,
    linear-gradient(
        145deg,
        rgba(var(--service-accent), 0.22),
        rgba(var(--service-mint), 0.18),
        rgba(var(--service-gold), 0.18)
      )
      border-box;
  box-shadow:
    0 14px 30px rgba(15, 23, 42, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.84);
}

#game-overlay #training-game-container .training-option-mark {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 16px;
  background: linear-gradient(
    145deg,
    rgba(var(--service-accent), 0.94),
    rgba(var(--service-mint), 0.9)
  );
  color: #fff;
  font-size: 0.9rem;
  font-weight: 900;
  box-shadow: 0 10px 22px rgba(var(--service-accent), 0.16);
}

#game-overlay #training-game-container .training-option-copy {
  display: grid;
  gap: 4px;
  min-width: 0;
}

#game-overlay #training-game-container .training-option-title {
  display: block;
  color: rgba(var(--service-ink), 0.94);
  font-size: 0.95rem;
  font-weight: 850;
  line-height: 1.34;
}

#game-overlay #training-game-container .training-option-hint {
  display: block;
  color: rgba(var(--service-ink), 0.62);
  font-size: 0.76rem;
  font-weight: 720;
  line-height: 1.3;
}

#game-overlay #training-game-container .training-option--cta {
  display: grid;
  align-items: center;
  min-height: 66px;
  padding: 14px 16px;
  border-radius: 20px;
  background: linear-gradient(
    135deg,
    rgba(var(--service-accent), 0.98),
    rgba(var(--service-mint), 0.92)
  );
  border-color: rgba(var(--service-accent), 0.38);
  box-shadow: 0 16px 34px rgba(var(--service-accent), 0.18);
}

#game-overlay
  #training-game-container
  .training-option--cta
  .training-option-title,
#game-overlay
  #training-game-container
  .training-option--cta
  .training-option-hint {
  color: #fff;
}

#game-overlay #training-game-container .training-option--cta.is-secondary {
  background: linear-gradient(
    150deg,
    rgba(255, 255, 255, 0.99),
    rgba(248, 252, 251, 0.97)
  );
  border-color: rgba(var(--service-accent), 0.14);
  box-shadow: 0 12px 26px rgba(15, 23, 42, 0.07);
}

#game-overlay
  #training-game-container
  .training-option--cta.is-secondary
  .training-option-title {
  color: rgba(var(--service-ink), 0.92);
}

#game-overlay
  #training-game-container
  .training-option--cta.is-secondary
  .training-option-hint {
  color: rgba(var(--service-ink), 0.62);
}

#game-overlay #training-game-container .training-review-actions {
  display: grid;
  gap: 10px;
  margin-top: 6px;
}

#game-overlay
  #training-game-container
  .training-option.correct
  .training-option-mark,
#game-overlay
  #training-game-container
  .training-option.wrong
  .training-option-mark {
  background: rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: none;
}

#game-overlay
  #training-game-container
  .training-option.correct
  :is(.training-option-title, .training-option-hint),
#game-overlay
  #training-game-container
  .training-option.wrong
  :is(.training-option-title, .training-option-hint) {
  color: #fff;
}

#game-overlay #training-game-container #training-feedback.training-feedback {
  margin-top: 10px;
  padding: 16px;
  border-radius: 22px;
  background:
    radial-gradient(
      280px 140px at 100% 0%,
      rgba(var(--service-gold), 0.14),
      transparent 66%
    ),
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.98),
      rgba(248, 251, 250, 0.95)
    );
  border: 1px solid rgba(var(--service-accent), 0.12);
  box-shadow:
    0 16px 34px rgba(15, 23, 42, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.84);
}

#game-overlay
  #training-game-container
  #training-feedback.training-feedback::before {
  display: none;
}

#game-overlay
  #training-game-container
  #training-feedback.training-feedback[data-state="success"] {
  background:
    radial-gradient(
      280px 140px at 100% 0%,
      rgba(0, 200, 83, 0.14),
      transparent 66%
    ),
    linear-gradient(
      145deg,
      rgba(248, 255, 250, 0.98),
      rgba(241, 252, 248, 0.95)
    );
  border-color: rgba(0, 170, 93, 0.18);
}

#game-overlay
  #training-game-container
  #training-feedback.training-feedback[data-state="warning"] {
  background:
    radial-gradient(
      280px 140px at 100% 0%,
      rgba(255, 170, 0, 0.16),
      transparent 66%
    ),
    linear-gradient(
      145deg,
      rgba(255, 251, 244, 0.99),
      rgba(251, 247, 239, 0.95)
    );
  border-color: rgba(214, 150, 33, 0.18);
}

#game-overlay #training-game-container .training-feedback-pill {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  margin-bottom: 10px;
  padding: 6px 11px;
  border-radius: 999px;
  background: rgba(var(--service-accent), 0.08);
  color: rgba(var(--service-accent), 0.92);
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

#game-overlay #training-game-container .training-feedback-title {
  font-size: 1rem;
  font-weight: 900;
  line-height: 1.28;
  color: rgba(var(--service-ink), 0.94);
}

#game-overlay #training-game-container .training-feedback-summary {
  margin-top: 6px;
  font-size: 0.9rem;
  line-height: 1.42;
  color: rgba(var(--service-ink), 0.72);
}

#game-overlay #training-game-container .training-feedback-grid {
  display: grid;
  gap: 10px;
  margin-top: 12px;
}

#game-overlay #training-game-container .training-feedback-block {
  padding: 12px 13px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(var(--service-accent), 0.1);
}

#game-overlay #training-game-container .training-feedback-label {
  font-size: 0.66rem;
  font-weight: 900;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(var(--service-accent), 0.78);
  margin-bottom: 6px;
}

#game-overlay #training-game-container .training-feedback-value {
  font-size: 0.9rem;
  line-height: 1.38;
  font-weight: 820;
  color: rgba(var(--service-ink), 0.9);
}

#game-overlay #training-game-container .training-feedback-note {
  margin-top: 12px;
  font-size: 0.88rem;
  line-height: 1.42;
  color: rgba(var(--service-ink), 0.74);
}

@media (max-width: 640px) {
  #game-overlay #training-game-container .training-order-card {
    gap: 12px;
    padding: 16px;
    border-radius: 24px;
  }

  #game-overlay
    #training-game-container
    .training-order-card:not(.is-no-image) {
    grid-template-columns: 84px minmax(0, 1fr);
    gap: 12px;
  }

  #game-overlay #training-game-container .training-order-card img {
    width: 84px;
    height: 84px;
    border-radius: 18px;
  }

  #game-overlay #training-game-container .training-item-name {
    font-size: 1.16rem;
    max-width: none;
  }

  #game-overlay #training-game-container .training-item-description {
    font-size: 0.9rem;
    max-width: none;
  }

  #game-overlay #training-game-container .training-item-composition {
    padding: 11px 12px;
    border-radius: 18px;
  }

  #game-overlay #training-game-container .training-focus-chip {
    padding: 6px 10px;
    font-size: 0.74rem;
  }

  #game-overlay
    #training-game-container
    #training-question-text.training-question {
    padding: 14px 16px 13px;
    border-radius: 20px;
    font-size: 0.95rem;
  }

  #game-overlay #training-game-container .training-option--decision {
    grid-template-columns: 40px minmax(0, 1fr);
    gap: 10px;
    min-height: 76px;
    padding: 12px;
    border-radius: 18px;
  }

  #game-overlay #training-game-container .training-option-mark {
    width: 34px;
    height: 34px;
    border-radius: 14px;
    font-size: 0.84rem;
  }

  #game-overlay #training-game-container .training-option-title {
    font-size: 0.9rem;
  }

  #game-overlay #training-game-container .training-option-hint {
    font-size: 0.72rem;
  }

  #game-overlay #training-game-container .training-option--cta {
    min-height: 60px;
    padding: 13px 14px;
    border-radius: 18px;
  }

  #game-overlay #training-game-container #training-feedback.training-feedback {
    padding: 14px;
    border-radius: 20px;
  }
}

/* ===== Upsell Duel Compact ===== */
#game-overlay #upsell-game-container .game-body {
  scrollbar-width: none !important;
  scrollbar-color: transparent transparent !important;
  -ms-overflow-style: none;
}

#game-overlay #upsell-game-container .game-body::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important;
  display: none !important;
}

#game-overlay #upsell-game-container .game-body::-webkit-scrollbar-track,
#game-overlay #upsell-game-container .game-body::-webkit-scrollbar-thumb {
  background: transparent !important;
  border: 0 !important;
}

#game-overlay #upsell-game-container .upsell-meta-inline {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

#game-overlay #upsell-game-container .upsell-meta-inline .upsell-meta-pill {
  min-height: 26px;
  padding: 5px 9px;
  box-shadow: none;
}

@media (max-width: 640px) {
  #game-overlay #upsell-game-container[data-variant="duel"] .game-body {
    gap: 8px;
  }

  #game-overlay #upsell-game-container[data-variant="duel"] .upsell-scene {
    padding: 13px 14px 12px;
    border-radius: 20px;
  }

  #game-overlay
    #upsell-game-container[data-variant="duel"]
    .upsell-scene-kicker {
    font-size: 0.62rem;
    letter-spacing: 0.15em;
  }

  #game-overlay #upsell-game-container[data-variant="duel"] .upsell-context {
    font-size: 0.96rem;
    line-height: 1.24;
  }

  #game-overlay
    #upsell-game-container[data-variant="duel"]
    .upsell-guest-panel {
    gap: 6px;
  }

  #game-overlay
    #upsell-game-container[data-variant="duel"]
    .upsell-guest-label {
    display: none;
  }

  #game-overlay #upsell-game-container[data-variant="duel"] .upsell-guest {
    padding: 10px 12px;
    border-radius: 16px;
    font-size: 0.88rem;
    line-height: 1.34;
  }

  #game-overlay #upsell-game-container[data-variant="duel"] .upsell-meta {
    margin-top: 2px;
  }

  #game-overlay #upsell-game-container[data-variant="duel"] .upsell-meta-card {
    display: none;
  }

  #game-overlay
    #upsell-game-container[data-variant="duel"]
    .upsell-meta-inline {
    gap: 6px;
  }

  #game-overlay
    #upsell-game-container[data-variant="duel"]
    .upsell-meta-inline
    .upsell-meta-pill {
    min-height: 24px;
    padding: 4px 8px;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 850;
  }

  #game-overlay #upsell-game-container[data-variant="duel"] .upsell-timer {
    margin-top: 2px;
    padding: 8px 10px;
    border-radius: 16px;
  }

  #game-overlay #upsell-game-container[data-variant="duel"] .upsell-timer-bar {
    height: 8px;
  }

  #game-overlay #upsell-game-container[data-variant="duel"] .upsell-timer-text {
    min-width: 34px;
    padding: 6px 8px;
    font-size: 0.76rem;
  }

  #game-overlay
    #upsell-game-container[data-variant="duel"]
    #upsell-options.upsell-options {
    gap: 8px;
  }

  #game-overlay
    #upsell-game-container[data-variant="duel"]
    #upsell-options.upsell-options::before {
    margin: 0 2px -2px;
    font-size: 0.62rem;
  }

  #game-overlay
    #upsell-game-container[data-variant="duel"]
    .upsell-option-card {
    min-height: 90px;
    padding: 12px;
    gap: 10px;
    border-radius: 18px;
  }

  #game-overlay
    #upsell-game-container[data-variant="duel"]
    .upsell-option-mark {
    width: 32px;
    height: 32px;
    border-radius: 12px;
    font-size: 0.78rem;
  }

  #game-overlay
    #upsell-game-container[data-variant="duel"]
    .upsell-option-copy {
    gap: 4px;
  }

  #game-overlay
    #upsell-game-container[data-variant="duel"]
    .upsell-option-kicker {
    display: none;
  }

  #game-overlay
    #upsell-game-container[data-variant="duel"]
    .upsell-option-text {
    font-size: 0.89rem;
    line-height: 1.32;
  }

  #game-overlay
    #upsell-game-container[data-variant="duel"]
    .upsell-option-hint {
    font-size: 0.69rem;
    line-height: 1.22;
  }

  #game-overlay
    #upsell-game-container[data-variant="duel"]
    #upsell-options.upsell-options.is-resolved
    .upsell-option-card {
    display: none;
  }

  #game-overlay
    #upsell-game-container[data-variant="duel"]
    #upsell-options.upsell-options.is-resolved
    .upsell-option-card.correct,
  #game-overlay
    #upsell-game-container[data-variant="duel"]
    #upsell-options.upsell-options.is-resolved
    .upsell-option-card.wrong {
    display: flex;
  }
}

/* ===== Upsell Duel V2 (Isolated) ===== */
#game-overlay #upsell-game-container[data-layout="duel-v2"] {
  --duel-surface: rgba(255, 255, 255, 0.98);
  --duel-surface-soft: rgba(245, 248, 255, 0.96);
  --duel-border: rgba(50, 74, 124, 0.18);
  --duel-text: rgba(19, 30, 56, 0.96);
  --duel-muted: rgba(45, 58, 92, 0.7);
  --duel-accent: 69 120 255;
  --duel-accent-2: 133 90 255;
  --duel-success: 17 172 106;
  --duel-danger: 224 87 87;
  overflow: hidden;
  scrollbar-width: none !important;
  scrollbar-color: transparent transparent !important;
  border-color: rgba(86, 109, 163, 0.28);
  background:
    radial-gradient(
      120% 90% at 0% -8%,
      rgba(84, 144, 255, 0.16),
      rgba(84, 144, 255, 0) 62%
    ),
    radial-gradient(
      100% 80% at 100% 0%,
      rgba(149, 104, 255, 0.16),
      rgba(149, 104, 255, 0) 60%
    ),
    linear-gradient(165deg, #f1f5ff 0%, #ecf2fb 52%, #e8eef8 100%);
}

#game-overlay #upsell-game-container[data-layout="duel-v2"] .game-screen {
  overflow: hidden;
  scrollbar-width: none !important;
  scrollbar-color: transparent transparent !important;
}

#game-overlay #upsell-game-container[data-layout="duel-v2"]::-webkit-scrollbar,
#game-overlay
  #upsell-game-container[data-layout="duel-v2"]
  .game-screen::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important;
  display: none !important;
}

#game-overlay #upsell-game-container[data-layout="duel-v2"] .game-topbar {
  position: relative;
  align-items: flex-start;
  padding: 12px 14px 10px;
  background: linear-gradient(
    180deg,
    rgba(231, 239, 250, 0.95),
    rgba(226, 236, 249, 0.92)
  );
  border-bottom: 1px solid rgba(74, 95, 148, 0.16);
}

#game-overlay #upsell-game-container[data-layout="duel-v2"] .game-back,
#game-overlay #upsell-game-container[data-layout="duel-v2"] .game-close {
  border: 1px solid rgba(67, 92, 146, 0.2);
  background: rgba(255, 255, 255, 0.88);
  color: rgba(24, 36, 68, 0.88);
  box-shadow: 0 8px 16px rgba(25, 36, 67, 0.08);
}

#game-overlay #upsell-game-container[data-layout="duel-v2"] .game-title {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 0 8px;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  font-size: 1.12rem;
  font-weight: 900;
  line-height: 1.12;
  color: var(--duel-text);
}

#game-overlay #upsell-game-container[data-layout="duel-v2"] .game-title::after {
  content: attr(data-round);
  display: inline-flex;
  align-items: center;
  min-height: 23px;
  padding: 4px 9px;
  border-radius: 999px;
  border: 1px solid rgba(74, 98, 156, 0.2);
  background: rgba(255, 255, 255, 0.9);
  color: rgba(24, 40, 76, 0.88);
  font-size: 0.68rem;
  font-weight: 850;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

#game-overlay
  #upsell-game-container[data-layout="duel-v2"]
  .game-title:not([data-round])::after,
#game-overlay
  #upsell-game-container[data-layout="duel-v2"]
  .game-title[data-round=""]::after {
  content: none;
  display: none;
}

#game-overlay
  #upsell-game-container[data-layout="duel-v2"]
  .game-topbar.has-xp-chip::after {
  content: attr(data-xp-chip);
  position: absolute;
  top: 50%;
  right: 62px;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 4px 9px;
  max-width: 104px;
  border-radius: 999px;
  border: 1px solid rgba(96, 101, 201, 0.28);
  background: linear-gradient(
    140deg,
    rgba(89, 135, 255, 0.2),
    rgba(152, 97, 255, 0.18)
  );
  color: rgba(24, 38, 76, 0.9);
  font-size: 0.64rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  box-shadow: 0 10px 18px rgba(68, 86, 146, 0.12);
}

#game-overlay #upsell-game-container[data-layout="duel-v2"] .game-meta {
  padding: 8px 12px 10px;
  background: transparent;
  border-bottom: 0;
}

#game-overlay
  #upsell-game-container[data-layout="duel-v2"]
  #upsell-round-indicator {
  display: none !important;
}

#game-overlay #upsell-game-container[data-layout="duel-v2"] .game-progress {
  height: 6px;
  background: rgba(48, 71, 123, 0.12);
}

#game-overlay
  #upsell-game-container[data-layout="duel-v2"]
  .game-progress
  .fill {
  background: linear-gradient(
    90deg,
    rgba(64, 125, 255, 0.95),
    rgba(137, 94, 255, 0.95)
  );
}

#game-overlay #upsell-game-container[data-layout="duel-v2"] .game-hint-badge {
  position: static;
  margin: 0 12px 2px;
  width: fit-content;
  padding: 5px 10px;
  border-radius: 999px;
  border: 1px solid rgba(70, 96, 156, 0.18);
  background: rgba(255, 255, 255, 0.86);
  color: rgba(30, 46, 84, 0.78);
  font-size: 0.64rem;
  font-weight: 850;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

#game-overlay #upsell-game-container[data-layout="duel-v2"] .game-body {
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  align-content: start;
  gap: 12px;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  overscroll-behavior: contain;
  padding: 10px 12px calc(12px + env(safe-area-inset-bottom));
  scrollbar-width: none !important;
  scrollbar-color: transparent transparent !important;
}

#game-overlay
  #upsell-game-container[data-layout="duel-v2"]
  .game-body::-webkit-scrollbar,
#game-overlay
  #upsell-game-container[data-layout="duel-v2"]
  .game-body::-webkit-scrollbar-track,
#game-overlay
  #upsell-game-container[data-layout="duel-v2"]
  .game-body::-webkit-scrollbar-thumb,
#game-overlay
  #upsell-game-container[data-layout="duel-v2"]
  #upsell-options.upsell-options::-webkit-scrollbar,
#game-overlay
  #upsell-game-container[data-layout="duel-v2"]
  #upsell-options.upsell-options::-webkit-scrollbar-track,
#game-overlay
  #upsell-game-container[data-layout="duel-v2"]
  #upsell-options.upsell-options::-webkit-scrollbar-thumb {
  width: 0 !important;
  height: 0 !important;
  display: none !important;
  background: transparent !important;
}

#game-overlay #upsell-game-container[data-layout="duel-v2"] .upsell-timer {
  display: none !important;
}

#game-overlay #upsell-game-container[data-layout="duel-v2"] .upsell-scene {
  display: grid;
  gap: 10px;
  padding: 16px;
  border-radius: 20px;
  border: 1px solid var(--duel-border);
  background: var(--duel-surface);
  box-shadow:
    0 16px 32px rgba(15, 24, 46, 0.11),
    inset 0 1px 0 rgba(255, 255, 255, 0.86);
}

#game-overlay
  #upsell-game-container[data-layout="duel-v2"]
  .upsell-scene-kicker {
  font-size: 0.65rem;
  font-weight: 900;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(64, 89, 146, 0.82);
}

#game-overlay #upsell-game-container[data-layout="duel-v2"] .upsell-context {
  color: var(--duel-text);
  font-size: 1.02rem;
  font-weight: 860;
  line-height: 1.28;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

#game-overlay
  #upsell-game-container[data-layout="duel-v2"]
  .upsell-guest-panel {
  display: grid;
  gap: 7px;
}

#game-overlay
  #upsell-game-container[data-layout="duel-v2"]
  .upsell-guest-label {
  display: inline-flex;
  width: fit-content;
  padding: 4px 9px;
  border-radius: 999px;
  background: rgba(223, 233, 255, 0.78);
  color: rgba(48, 72, 129, 0.88);
  font-size: 0.61rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

#game-overlay #upsell-game-container[data-layout="duel-v2"] .upsell-guest {
  margin-top: 0;
  padding: 12px 13px;
  border-radius: 14px;
  border: 1px solid rgba(88, 113, 172, 0.16);
  background: var(--duel-surface-soft);
  color: rgba(33, 47, 79, 0.86);
  font-size: 0.92rem;
  font-weight: 760;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

#game-overlay #upsell-game-container[data-layout="duel-v2"] .upsell-meta {
  margin-top: -4px;
  min-height: 0;
}

#game-overlay #upsell-game-container[data-layout="duel-v2"] .upsell-meta:empty {
  display: none !important;
}

#game-overlay
  #upsell-game-container[data-layout="duel-v2"]
  .upsell-meta-inline {
  gap: 7px;
}

#game-overlay
  #upsell-game-container[data-layout="duel-v2"]
  .upsell-meta-inline
  .upsell-meta-pill {
  border: 1px solid rgba(83, 107, 170, 0.2);
  background: rgba(255, 255, 255, 0.86);
  color: rgba(36, 53, 89, 0.84);
  font-size: 0.67rem;
}

#game-overlay
  #upsell-game-container[data-layout="duel-v2"]
  #upsell-options.upsell-options {
  margin-top: 0;
  gap: 12px;
  overflow: hidden !important;
  scrollbar-width: none !important;
}

#game-overlay
  #upsell-game-container[data-layout="duel-v2"]
  #upsell-options.upsell-options::before {
  margin: 1px 2px 0;
  font-size: 0.64rem;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(53, 74, 125, 0.78);
}

#game-overlay
  #upsell-game-container[data-layout="duel-v2"]
  .upsell-option-card {
  position: relative;
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  align-items: flex-start;
  gap: 12px;
  min-height: 94px;
  padding: 14px;
  border-radius: 18px;
  border: 1px solid rgba(70, 96, 154, 0.18);
  background: rgba(255, 255, 255, 0.98);
  box-shadow:
    0 12px 24px rgba(21, 33, 60, 0.09),
    inset 0 1px 0 rgba(255, 255, 255, 0.88);
  transform: translateY(6px) scale(0.988);
  opacity: 0;
  animation: upsellDuelOptionEnter 300ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
  transition:
    transform 180ms ease,
    box-shadow 180ms ease,
    border-color 180ms ease,
    background 180ms ease;
}

#game-overlay
  #upsell-game-container[data-layout="duel-v2"]
  .upsell-option-card:nth-child(2) {
  animation-delay: 40ms;
}
#game-overlay
  #upsell-game-container[data-layout="duel-v2"]
  .upsell-option-card:nth-child(3) {
  animation-delay: 70ms;
}
#game-overlay
  #upsell-game-container[data-layout="duel-v2"]
  .upsell-option-card:nth-child(4) {
  animation-delay: 100ms;
}

#game-overlay
  #upsell-game-container[data-layout="duel-v2"]
  .upsell-option-card:hover {
  transform: translateY(-1px);
  border-color: rgba(71, 108, 198, 0.38);
  box-shadow: 0 16px 28px rgba(24, 38, 70, 0.14);
}

#game-overlay
  #upsell-game-container[data-layout="duel-v2"]
  .upsell-option-card:active {
  transform: scale(0.985);
}

#game-overlay
  #upsell-game-container[data-layout="duel-v2"]
  .upsell-option-card:focus-visible {
  outline: 0;
  border-color: rgba(77, 119, 252, 0.72);
  box-shadow:
    0 0 0 3px rgba(77, 119, 252, 0.2),
    0 16px 30px rgba(23, 39, 72, 0.14);
}

#game-overlay
  #upsell-game-container[data-layout="duel-v2"]
  .upsell-option-mark {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: linear-gradient(
    140deg,
    rgba(var(--duel-accent), 0.98),
    rgba(var(--duel-accent-2), 0.95)
  );
  box-shadow: 0 10px 18px rgba(66, 95, 168, 0.22);
  color: #fff;
  font-size: 0.82rem;
  font-weight: 900;
}

#game-overlay
  #upsell-game-container[data-layout="duel-v2"]
  .upsell-option-copy {
  display: grid;
  gap: 4px;
}

#game-overlay
  #upsell-game-container[data-layout="duel-v2"]
  .upsell-option-kicker {
  display: inline-flex;
  width: fit-content;
  font-size: 0.62rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(69, 96, 158, 0.82);
}

#game-overlay
  #upsell-game-container[data-layout="duel-v2"]
  .upsell-option-text {
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.32;
  color: rgba(25, 38, 68, 0.95);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

#game-overlay
  #upsell-game-container[data-layout="duel-v2"]
  .upsell-option-hint {
  display: none;
}

#game-overlay
  #upsell-game-container[data-layout="duel-v2"]
  .upsell-option-card.correct {
  border-color: rgba(var(--duel-success), 0.5);
  background: linear-gradient(
    145deg,
    rgba(var(--duel-success), 0.94),
    rgba(39, 200, 132, 0.93)
  );
  box-shadow: 0 16px 30px rgba(16, 132, 84, 0.24);
}

#game-overlay
  #upsell-game-container[data-layout="duel-v2"]
  .upsell-option-card.wrong {
  border-color: rgba(var(--duel-danger), 0.45);
  background: linear-gradient(
    145deg,
    rgba(var(--duel-danger), 0.93),
    rgba(244, 116, 116, 0.9)
  );
  box-shadow: 0 16px 30px rgba(180, 66, 66, 0.22);
}

#game-overlay
  #upsell-game-container[data-layout="duel-v2"]
  .upsell-option-card.correct
  .upsell-option-kicker,
#game-overlay
  #upsell-game-container[data-layout="duel-v2"]
  .upsell-option-card.wrong
  .upsell-option-kicker,
#game-overlay
  #upsell-game-container[data-layout="duel-v2"]
  .upsell-option-card.correct
  .upsell-option-text,
#game-overlay
  #upsell-game-container[data-layout="duel-v2"]
  .upsell-option-card.wrong
  .upsell-option-text {
  color: rgba(255, 255, 255, 0.96);
}

#game-overlay
  #upsell-game-container[data-layout="duel-v2"]
  .upsell-option-card.correct
  .upsell-option-mark,
#game-overlay
  #upsell-game-container[data-layout="duel-v2"]
  .upsell-option-card.wrong
  .upsell-option-mark {
  background: rgba(255, 255, 255, 0.22);
  box-shadow: none;
}

#game-overlay
  #upsell-game-container[data-layout="duel-v2"]
  .upsell-option-card:disabled {
  opacity: 1 !important;
  filter: none !important;
}

#game-overlay
  #upsell-game-container[data-layout="duel-v2"]
  .upsell-option-card.correct
  .upsell-option-kicker,
#game-overlay
  #upsell-game-container[data-layout="duel-v2"]
  .upsell-option-card.wrong
  .upsell-option-kicker,
#game-overlay
  #upsell-game-container[data-layout="duel-v2"]
  .upsell-option-card.correct
  .upsell-option-text,
#game-overlay
  #upsell-game-container[data-layout="duel-v2"]
  .upsell-option-card.wrong
  .upsell-option-text {
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.18);
}

#game-overlay
  #upsell-game-container[data-layout="duel-v2"]
  #upsell-options.upsell-options.is-resolved
  .upsell-option-card {
  display: none;
}

#game-overlay
  #upsell-game-container[data-layout="duel-v2"]
  #upsell-options.upsell-options.is-resolved
  .upsell-option-card.correct,
#game-overlay
  #upsell-game-container[data-layout="duel-v2"]
  #upsell-options.upsell-options.is-resolved
  .upsell-option-card.wrong {
  display: grid;
}

#game-overlay
  #upsell-game-container[data-layout="duel-v2"]
  .upsell-feedback[hidden] {
  display: none !important;
}

#game-overlay #upsell-game-container[data-layout="duel-v2"] .upsell-feedback {
  margin-top: -2px;
  padding: 12px;
  border-radius: 16px;
  border: 1px solid rgba(72, 98, 156, 0.18);
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 14px 28px rgba(22, 34, 62, 0.1);
}

#game-overlay
  #upsell-game-container[data-layout="duel-v2"]
  .upsell-feedback-head {
  display: grid;
  gap: 5px;
  margin-bottom: 6px;
}

#game-overlay
  #upsell-game-container[data-layout="duel-v2"]
  .upsell-feedback-badge {
  min-height: 20px;
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid rgba(77, 108, 176, 0.2);
  background: rgba(236, 243, 255, 0.95);
  color: rgba(51, 75, 130, 0.86);
  font-size: 0.58rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

#game-overlay
  #upsell-game-container[data-layout="duel-v2"]
  .upsell-feedback-title {
  font-size: 0.86rem;
  line-height: 1.24;
  color: rgba(24, 38, 70, 0.92);
}

#game-overlay
  #upsell-game-container[data-layout="duel-v2"]
  .upsell-feedback-block {
  padding: 0;
  border: 0;
  background: transparent;
}

#game-overlay
  #upsell-game-container[data-layout="duel-v2"]
  .upsell-feedback-label,
#game-overlay
  #upsell-game-container[data-layout="duel-v2"]
  .upsell-feedback-values,
#game-overlay
  #upsell-game-container[data-layout="duel-v2"]
  .upsell-feedback-case {
  display: none;
}

#game-overlay
  #upsell-game-container[data-layout="duel-v2"]
  .upsell-feedback-line {
  font-size: 0.82rem;
  line-height: 1.32;
  color: rgba(34, 49, 83, 0.86);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

#game-overlay #upsell-game-container[data-layout="duel-v2"] .upsell-actions {
  margin-top: -2px;
}

#game-overlay
  #upsell-game-container[data-layout="duel-v2"]
  .upsell-actions
  .game-primary {
  border: 1px solid rgba(66, 102, 198, 0.24);
  background: linear-gradient(
    140deg,
    rgba(var(--duel-accent), 0.94),
    rgba(var(--duel-accent-2), 0.92)
  );
  color: #fff;
  box-shadow: 0 12px 24px rgba(66, 94, 164, 0.2);
}

@keyframes upsellDuelOptionEnter {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.988);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@media (max-width: 640px) {
  #game-overlay #upsell-game-container[data-layout="duel-v2"] .game-topbar {
    padding: 11px 12px 9px;
  }

  #game-overlay #upsell-game-container[data-layout="duel-v2"] .game-title {
    font-size: 1.04rem;
  }

  #game-overlay
    #upsell-game-container[data-layout="duel-v2"]
    .game-topbar.has-xp-chip::after {
    top: 50%;
    right: 56px;
    transform: translateY(-50%);
    font-size: 0.58rem;
    min-height: 22px;
    max-width: 92px;
  }

  #game-overlay #upsell-game-container[data-layout="duel-v2"] .game-hint-badge {
    margin: 0 10px 1px;
    font-size: 0.58rem;
  }

  #game-overlay #upsell-game-container[data-layout="duel-v2"] .game-body {
    gap: 10px;
    padding: 9px 10px calc(10px + env(safe-area-inset-bottom));
  }

  #game-overlay #upsell-game-container[data-layout="duel-v2"] .upsell-scene {
    padding: 13px;
    border-radius: 17px;
  }

  #game-overlay #upsell-game-container[data-layout="duel-v2"] .upsell-context {
    font-size: 0.94rem;
  }

  #game-overlay #upsell-game-container[data-layout="duel-v2"] .upsell-guest {
    padding: 10px 11px;
    font-size: 0.85rem;
  }

  #game-overlay
    #upsell-game-container[data-layout="duel-v2"]
    #upsell-options.upsell-options {
    gap: 10px;
  }

  #game-overlay
    #upsell-game-container[data-layout="duel-v2"]
    .upsell-option-card {
    grid-template-columns: 34px minmax(0, 1fr);
    min-height: 86px;
    padding: 12px;
    gap: 10px;
    border-radius: 16px;
  }

  #game-overlay
    #upsell-game-container[data-layout="duel-v2"]
    .upsell-option-mark {
    width: 34px;
    height: 34px;
    font-size: 0.76rem;
  }

  #game-overlay
    #upsell-game-container[data-layout="duel-v2"]
    .upsell-option-text {
    font-size: 0.95rem;
    line-height: 1.28;
    -webkit-line-clamp: 2;
  }

  #game-overlay #upsell-game-container[data-layout="duel-v2"] .upsell-feedback {
    padding: 11px;
    border-radius: 14px;
  }
}

@media (max-width: 390px) {
  #game-overlay
    #upsell-game-container[data-layout="duel-v2"]
    .game-topbar.has-xp-chip::after {
    right: 52px;
    padding: 3px 7px;
    min-height: 20px;
    max-width: 78px;
  }

  #game-overlay #upsell-game-container[data-layout="duel-v2"] .game-title {
    font-size: 0.98rem;
    gap: 4px;
    padding: 0 4px;
  }

  #game-overlay
    #upsell-game-container[data-layout="duel-v2"]
    .game-title::after {
    min-height: 21px;
    padding: 3px 7px;
    font-size: 0.6rem;
  }

  #game-overlay #upsell-game-container[data-layout="duel-v2"] .upsell-scene {
    padding: 12px;
  }

  #game-overlay #upsell-game-container[data-layout="duel-v2"] .upsell-context {
    font-size: 0.9rem;
  }

  #game-overlay
    #upsell-game-container[data-layout="duel-v2"]
    .upsell-option-card {
    min-height: 82px;
    padding: 11px;
  }
}

/* Game UI Design System v1
   Unifies answer-card states and compact round/streak chips across core games.
   Kept isolated at file end to avoid breaking existing game logic. */
:root {
  --game-ui-card-bg: linear-gradient(
    155deg,
    rgba(255, 255, 255, 0.98),
    rgba(244, 249, 255, 0.92)
  );
  --game-ui-card-border: rgba(37, 67, 122, 0.14);
  --game-ui-card-shadow:
    0 14px 28px rgba(15, 23, 42, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.9);
  --game-ui-card-hover-border: rgba(56, 126, 255, 0.42);
  --game-ui-card-hover-bg: linear-gradient(
    155deg,
    rgba(238, 248, 255, 0.98),
    rgba(232, 244, 255, 0.92)
  );
  --game-ui-card-hover-shadow:
    0 18px 34px rgba(30, 64, 144, 0.16), 0 0 0 1px rgba(56, 126, 255, 0.1);
  --game-ui-chip-bg: rgba(255, 255, 255, 0.94);
  --game-ui-chip-border: rgba(37, 67, 122, 0.12);
  --game-ui-chip-color: rgba(25, 42, 74, 0.92);
  --game-ui-selected-border: rgba(33, 168, 191, 0.6);
  --game-ui-selected-bg: linear-gradient(
    150deg,
    rgba(191, 246, 255, 0.58),
    rgba(236, 248, 255, 0.92)
  );
  --game-ui-correct-bg: linear-gradient(
    145deg,
    rgba(14, 196, 121, 0.95),
    rgba(22, 179, 185, 0.92)
  );
  --game-ui-correct-border: rgba(10, 160, 104, 0.74);
  --game-ui-correct-shadow: 0 16px 30px rgba(16, 154, 112, 0.28);
  --game-ui-wrong-bg: linear-gradient(
    145deg,
    rgba(255, 111, 61, 0.96),
    rgba(255, 71, 87, 0.92)
  );
  --game-ui-wrong-border: rgba(217, 74, 51, 0.74);
  --game-ui-wrong-shadow: 0 16px 30px rgba(217, 74, 51, 0.24);
}

#game-overlay
  :is(
    #allergen-game-container,
    #training-game-container,
    #conflict-game-container,
    #memory-game-container,
    #quiz-game,
    #grape-game-container
  )
  :is(.game-round, .quiz-streak) {
  min-height: 24px;
  padding: 4px 11px;
  border-radius: 999px;
  border: 1px solid var(--game-ui-chip-border);
  background: var(--game-ui-chip-bg);
  color: var(--game-ui-chip-color);
  font-size: 0.74rem;
  line-height: 1;
  font-weight: 850;
  letter-spacing: 0.04em;
  text-transform: none;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.08);
}

#game-overlay
  :is(
    #allergen-game-container,
    #training-game-container,
    #conflict-game-container,
    #memory-game-container,
    #quiz-game,
    #grape-game-container
  )
  :is(
    .training-option,
    .quiz-option,
    .memory-option,
    .allergen-option,
    .grape-option,
    .conflict-btn
  ) {
  border: 1px solid var(--game-ui-card-border);
  background: var(--game-ui-card-bg);
  box-shadow: var(--game-ui-card-shadow);
  transition:
    transform 180ms ease,
    border-color 180ms ease,
    box-shadow 180ms ease,
    background 180ms ease,
    filter 180ms ease;
  color: rgba(14, 26, 50, 0.95);
}

@media (hover: hover) {
  #game-overlay
    :is(
      #allergen-game-container,
      #training-game-container,
      #conflict-game-container,
      #memory-game-container,
      #quiz-game,
      #grape-game-container
    )
    :is(
      .training-option,
      .quiz-option,
      .memory-option,
      .allergen-option,
      .grape-option,
      .conflict-btn
    ):hover {
    transform: translateY(-2px);
    border-color: var(--game-ui-card-hover-border);
    background: var(--game-ui-card-hover-bg);
    box-shadow: var(--game-ui-card-hover-shadow);
  }
}

#game-overlay
  :is(
    #allergen-game-container,
    #training-game-container,
    #conflict-game-container,
    #memory-game-container,
    #quiz-game,
    #grape-game-container
  )
  :is(
    .training-option,
    .quiz-option,
    .memory-option,
    .allergen-option,
    .grape-option,
    .conflict-btn
  ):active {
  transform: translateY(0) scale(0.992);
}

#game-overlay
  :is(
    #allergen-game-container,
    #training-game-container,
    #conflict-game-container,
    #memory-game-container,
    #quiz-game,
    #grape-game-container
  )
  :is(
    .training-option,
    .quiz-option,
    .memory-option,
    .allergen-option,
    .grape-option,
    .conflict-btn
  ):focus-visible {
  outline: 3px solid rgba(56, 126, 255, 0.3);
  outline-offset: 2px;
}

#game-overlay
  :is(
    #allergen-game-container,
    #training-game-container,
    #conflict-game-container,
    #memory-game-container,
    #quiz-game,
    #grape-game-container
  )
  :is(
    .allergen-option.is-selected,
    .memory-option.selected,
    .grape-option.is-selected
  ):not(.is-correct):not(.is-wrong) {
  border-color: var(--game-ui-selected-border);
  background: var(--game-ui-selected-bg);
  box-shadow: 0 15px 30px rgba(33, 168, 191, 0.18);
}

#game-overlay
  :is(
    #allergen-game-container,
    #training-game-container,
    #conflict-game-container,
    #memory-game-container,
    #quiz-game,
    #grape-game-container
  )
  :is(
    .training-option.correct,
    .quiz-option.correct,
    .allergen-option.is-correct,
    .grape-option.is-correct,
    .memory-option.correct-reveal,
    .conflict-btn.is-best-answer
  ) {
  border-color: var(--game-ui-correct-border);
  background: var(--game-ui-correct-bg);
  color: #fff;
  box-shadow: var(--game-ui-correct-shadow);
}

#game-overlay
  :is(
    #allergen-game-container,
    #training-game-container,
    #conflict-game-container,
    #memory-game-container,
    #quiz-game,
    #grape-game-container
  )
  :is(
    .training-option.wrong,
    .quiz-option.wrong,
    .allergen-option.is-wrong,
    .grape-option.is-wrong,
    .memory-option.extra-reveal,
    .conflict-btn.is-selected-wrong
  ) {
  border-color: var(--game-ui-wrong-border);
  background: var(--game-ui-wrong-bg);
  color: #fff;
  box-shadow: var(--game-ui-wrong-shadow);
}

#game-overlay #memory-game-container .memory-option.missed-reveal {
  outline: 2px dashed rgba(255, 190, 74, 0.78);
  outline-offset: 2px;
}

#game-overlay #memory-game-container .memory-option.wrong-reveal {
  opacity: 0.52;
  filter: grayscale(0.12);
}

@media (max-width: 640px) {
  #game-overlay
    :is(
      #allergen-game-container,
      #training-game-container,
      #conflict-game-container,
      #memory-game-container,
      #quiz-game,
      #grape-game-container
    )
    :is(.game-round, .quiz-streak) {
    min-height: 22px;
    padding: 3px 10px;
    font-size: 0.7rem;
    letter-spacing: 0.03em;
  }

  #game-overlay
    :is(
      #allergen-game-container,
      #training-game-container,
      #conflict-game-container,
      #memory-game-container,
      #quiz-game,
      #grape-game-container
    )
    :is(
      .training-option,
      .quiz-option,
      .memory-option,
      .allergen-option,
      .grape-option,
      .conflict-btn
    ) {
    border-radius: 16px;
    box-shadow:
      0 10px 22px rgba(15, 23, 42, 0.1),
      inset 0 1px 0 rgba(255, 255, 255, 0.84);
  }
}

body[data-theme="dark"] {
  --game-ui-card-bg: linear-gradient(
    155deg,
    rgba(34, 40, 58, 0.94),
    rgba(17, 22, 35, 0.94)
  );
  --game-ui-card-border: rgba(173, 204, 255, 0.18);
  --game-ui-card-shadow:
    0 16px 30px rgba(0, 0, 0, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  --game-ui-card-hover-border: rgba(116, 202, 255, 0.46);
  --game-ui-card-hover-bg: linear-gradient(
    155deg,
    rgba(36, 46, 70, 0.96),
    rgba(20, 28, 46, 0.96)
  );
  --game-ui-card-hover-shadow:
    0 20px 38px rgba(0, 0, 0, 0.46), 0 0 0 1px rgba(116, 202, 255, 0.12);
  --game-ui-chip-bg: rgba(23, 29, 47, 0.92);
  --game-ui-chip-border: rgba(173, 204, 255, 0.22);
  --game-ui-chip-color: rgba(231, 243, 255, 0.94);
  --game-ui-selected-border: rgba(116, 232, 255, 0.62);
  --game-ui-selected-bg: linear-gradient(
    150deg,
    rgba(24, 129, 168, 0.34),
    rgba(27, 42, 66, 0.9)
  );
}

/* Game UI Design System v1.1
   Unified typography for answer cards in all core games. */
:root {
  --game-ui-answer-title-size: 0.98rem;
  --game-ui-answer-title-weight: 850;
  --game-ui-answer-title-line: 1.34;
  --game-ui-answer-title-color: rgba(14, 26, 50, 0.94);

  --game-ui-answer-hint-size: 0.77rem;
  --game-ui-answer-hint-weight: 760;
  --game-ui-answer-hint-line: 1.35;
  --game-ui-answer-hint-color: rgba(14, 26, 50, 0.62);

  --game-ui-answer-kicker-size: 0.64rem;
  --game-ui-answer-kicker-weight: 900;
  --game-ui-answer-kicker-track: 0.12em;
  --game-ui-answer-kicker-color: rgba(56, 94, 164, 0.88);
}

#game-overlay
  :is(
    #quiz-game .quiz-option,
    #conflict-options.conflict-options .conflict-btn
  ) {
  font-size: var(--game-ui-answer-title-size);
  font-weight: var(--game-ui-answer-title-weight);
  line-height: var(--game-ui-answer-title-line);
  color: var(--game-ui-answer-title-color);
}

#game-overlay
  :is(
    #training-game-container .training-option-title,
    #upsell-game-container .upsell-option-text,
    #grape-game-container .grape-option-title,
    #memory-game-container .memory-option-title
  ) {
  font-size: var(--game-ui-answer-title-size);
  font-weight: var(--game-ui-answer-title-weight);
  line-height: var(--game-ui-answer-title-line);
  color: var(--game-ui-answer-title-color);
  letter-spacing: 0.002em;
}

#game-overlay
  :is(
    #training-game-container .training-option-hint,
    #upsell-game-container .upsell-option-hint,
    #grape-game-container .grape-option-hint
  ) {
  font-size: var(--game-ui-answer-hint-size);
  font-weight: var(--game-ui-answer-hint-weight);
  line-height: var(--game-ui-answer-hint-line);
  color: var(--game-ui-answer-hint-color);
}

#game-overlay #upsell-game-container .upsell-option-kicker {
  font-size: var(--game-ui-answer-kicker-size);
  font-weight: var(--game-ui-answer-kicker-weight);
  letter-spacing: var(--game-ui-answer-kicker-track);
  text-transform: uppercase;
  color: var(--game-ui-answer-kicker-color);
}

#game-overlay #memory-game-container .memory-option-meta {
  font-size: 0.73rem;
  font-weight: 850;
  line-height: 1.2;
  letter-spacing: 0.08em;
}

#game-overlay
  :is(
    #training-game-container
      .training-option.correct
      :is(.training-option-title, .training-option-hint),
    #training-game-container
      .training-option.wrong
      :is(.training-option-title, .training-option-hint),
    #upsell-game-container
      .upsell-option-card.correct
      :is(.upsell-option-kicker, .upsell-option-text, .upsell-option-hint),
    #upsell-game-container
      .upsell-option-card.wrong
      :is(.upsell-option-kicker, .upsell-option-text, .upsell-option-hint),
    #grape-game-container
      .grape-option.is-correct
      :is(.grape-option-title, .grape-option-hint),
    #grape-game-container
      .grape-option.is-wrong
      :is(.grape-option-title, .grape-option-hint),
    #memory-game-container
      :is(.memory-option.correct-reveal, .memory-option.extra-reveal)
      :is(.memory-option-title, .memory-option-meta)
  ) {
  color: rgba(255, 255, 255, 0.96);
}

@media (max-width: 640px) {
  :root {
    --game-ui-answer-title-size: 0.93rem;
    --game-ui-answer-title-line: 1.3;
    --game-ui-answer-hint-size: 0.74rem;
    --game-ui-answer-hint-line: 1.3;
    --game-ui-answer-kicker-size: 0.6rem;
    --game-ui-answer-kicker-track: 0.1em;
  }

  #game-overlay #memory-game-container .memory-option-meta {
    font-size: 0.69rem;
    letter-spacing: 0.07em;
  }
}

body[data-theme="dark"] {
  --game-ui-answer-title-color: rgba(236, 244, 255, 0.94);
  --game-ui-answer-hint-color: rgba(206, 221, 245, 0.74);
  --game-ui-answer-kicker-color: rgba(166, 221, 255, 0.92);
}

/* Game UI Design System v1.2
   Shared vertical rhythm for option cards (compact and consistent). */
:root {
  --game-ui-rhythm-pad-y: 12px;
  --game-ui-rhythm-pad-x: 13px;
  --game-ui-rhythm-gap: 5px;
  --game-ui-rhythm-min: 62px;
  --game-ui-rhythm-mark: 34px;
}

#game-overlay
  :is(
    #allergen-game-container,
    #training-game-container,
    #conflict-game-container,
    #memory-game-container,
    #quiz-game,
    #grape-game-container
  )
  :is(
    .training-option,
    .quiz-option,
    .memory-option,
    .allergen-option,
    .grape-option,
    .conflict-btn
  ) {
  padding: var(--game-ui-rhythm-pad-y) var(--game-ui-rhythm-pad-x);
  min-height: var(--game-ui-rhythm-min);
}

#game-overlay
  :is(
    #training-options.training-options,
    #upsell-options.upsell-options,
    #quiz-options.quiz-options,
    #conflict-options.conflict-options,
    #grape-options.grape-options,
    #allergen-options.allergen-options,
    #memory-options-grid.memory-options-grid
  ) {
  gap: 10px;
}

#game-overlay
  :is(
    #training-game-container .training-option-copy,
    #upsell-game-container .upsell-option-copy,
    #grape-game-container .grape-option-copy
  ) {
  gap: var(--game-ui-rhythm-gap);
}

#game-overlay
  :is(
    #training-game-container .training-option-mark,
    #upsell-game-container .upsell-option-mark,
    #grape-game-container .grape-option-mark
  ) {
  width: var(--game-ui-rhythm-mark);
  height: var(--game-ui-rhythm-mark);
  border-radius: 12px;
  font-size: 0.8rem;
}

#game-overlay #quiz-game .quiz-option {
  gap: 10px;
}

#game-overlay #quiz-game .quiz-option::before {
  width: 26px;
  height: 26px;
  font-size: 11px;
  margin-top: 1px;
}

#game-overlay #conflict-options.conflict-options .conflict-btn::after {
  align-self: center;
}

#game-overlay #memory-game-container .memory-option-meta {
  margin-top: 1px;
}

@media (max-width: 640px) {
  :root {
    --game-ui-rhythm-pad-y: 10px;
    --game-ui-rhythm-pad-x: 11px;
    --game-ui-rhythm-gap: 4px;
    --game-ui-rhythm-min: 56px;
    --game-ui-rhythm-mark: 30px;
  }

  #game-overlay
    :is(
      #training-options.training-options,
      #upsell-options.upsell-options,
      #quiz-options.quiz-options,
      #conflict-options.conflict-options,
      #grape-options.grape-options,
      #allergen-options.allergen-options,
      #memory-options-grid.memory-options-grid
    ) {
    gap: 8px;
  }
}

/* Game UI Design System v1.3
   Stabilized top/header and question block heights to reduce first-screen jumps. */
:root {
  --game-ui-shell-topbar-min: 56px;
  --game-ui-shell-hero-min: 108px;
  --game-ui-shell-question-min: 102px;
  --game-ui-shell-head-min: 40px;
}

#game-overlay
  :is(
    #allergen-game-container,
    #grape-game-container,
    #training-game-container,
    #conflict-game-container,
    #upsell-game-container,
    #recipe-game-container,
    #memory-game-container,
    #quiz-game
  ):not([data-layout="duel-v2"])
  .game-topbar {
  min-height: var(--game-ui-shell-topbar-min);
}

#game-overlay #allergen-game-container:not(.is-compact) .allergen-hero,
#game-overlay #grape-game-container:not(.is-compact) .grape-hero,
#game-overlay #training-game-container .training-order-card,
#game-overlay #conflict-game-container .conflict-scene,
#game-overlay #upsell-game-container:not([data-layout="duel-v2"]) .upsell-scene,
#game-overlay #recipe-game-container .recipe-target-card,
#game-overlay #memory-game-container .memory-phase-title,
#game-overlay #quiz-game #quiz-question.quiz-question-text {
  min-height: var(--game-ui-shell-hero-min);
}

#game-overlay #allergen-game-container:not(.is-compact) .allergen-card,
#game-overlay #grape-game-container:not(.is-compact) .grape-card,
#game-overlay
  #training-game-container
  #training-question-text.training-question {
  min-height: var(--game-ui-shell-question-min);
}

#game-overlay #allergen-game-container .allergen-card-head,
#game-overlay #grape-game-container .grape-card-head {
  min-height: var(--game-ui-shell-head-min);
  align-items: flex-start;
}

#game-overlay #conflict-game-container .guest-bubble {
  min-height: 3.1em;
}

#game-overlay
  #upsell-game-container:not([data-layout="duel-v2"])
  .upsell-context {
  min-height: 2.7em;
}

@media (max-width: 640px) {
  :root {
    --game-ui-shell-topbar-min: 52px;
    --game-ui-shell-hero-min: 92px;
    --game-ui-shell-question-min: 88px;
    --game-ui-shell-head-min: 34px;
  }

  #game-overlay #conflict-game-container .guest-bubble {
    min-height: 2.8em;
  }

  #game-overlay
    #upsell-game-container:not([data-layout="duel-v2"])
    .upsell-context {
    min-height: 2.4em;
  }
}

/* Game UI Design System v1.4
   Tightened flow spacing (topbar -> meta -> hero -> options) for above-the-fold density. */
:root {
  --game-ui-flow-meta-pad-y: 8px;
  --game-ui-flow-meta-pad-x: 12px;
  --game-ui-flow-body-top: 10px;
  --game-ui-flow-body-side: 12px;
  --game-ui-flow-body-bottom: 14px;
  --game-ui-flow-block-gap: 8px;
  --game-ui-flow-hero-gap: 8px;
  --game-ui-flow-progress-h: 5px;
}

#game-overlay
  :is(
    #allergen-game-container,
    #grape-game-container,
    #training-game-container,
    #conflict-game-container,
    #upsell-game-container,
    #recipe-game-container,
    #memory-game-container,
    #quiz-game
  ):not([data-layout="duel-v2"])
  .game-meta {
  padding: var(--game-ui-flow-meta-pad-y) var(--game-ui-flow-meta-pad-x)
    calc(var(--game-ui-flow-meta-pad-y) + 1px);
}

#game-overlay
  :is(
    #allergen-game-container,
    #grape-game-container,
    #training-game-container,
    #conflict-game-container,
    #upsell-game-container,
    #recipe-game-container,
    #memory-game-container,
    #quiz-game
  ):not([data-layout="duel-v2"])
  .game-round {
  margin-bottom: 6px;
}

#game-overlay
  :is(
    #allergen-game-container,
    #grape-game-container,
    #training-game-container,
    #conflict-game-container,
    #upsell-game-container,
    #recipe-game-container,
    #memory-game-container,
    #quiz-game
  ):not([data-layout="duel-v2"])
  .game-progress {
  height: var(--game-ui-flow-progress-h);
}

#game-overlay
  :is(
    #allergen-game-container,
    #grape-game-container,
    #training-game-container,
    #conflict-game-container,
    #upsell-game-container,
    #recipe-game-container,
    #memory-game-container,
    #quiz-game
  ):not([data-layout="duel-v2"])
  .game-body {
  padding: var(--game-ui-flow-body-top) var(--game-ui-flow-body-side)
    calc(var(--game-ui-flow-body-bottom) + env(safe-area-inset-bottom));
  gap: var(--game-ui-flow-block-gap);
}

#game-overlay
  :is(
    #allergen-game-container .allergen-hero,
    #grape-game-container .grape-hero,
    #training-game-container .training-order-card,
    #conflict-game-container .conflict-scene,
    #upsell-game-container:not([data-layout="duel-v2"]) .upsell-scene,
    #recipe-game-container .recipe-target-card,
    #memory-game-container .memory-phase-title,
    #quiz-game #quiz-question.quiz-question-text
  ) {
  margin-bottom: var(--game-ui-flow-hero-gap);
}

#game-overlay
  :is(
    #allergen-options.allergen-options,
    #grape-options.grape-options,
    #training-options.training-options,
    #conflict-options.conflict-options,
    #upsell-options.upsell-options,
    #recipe-options-grid.recipe-options-grid,
    #memory-options-grid.memory-options-grid,
    #quiz-options.quiz-options
  ) {
  margin-top: 0;
}

#game-overlay
  #upsell-game-container:not([data-layout="duel-v2"])
  .upsell-meta:not(:empty),
#game-overlay #upsell-game-container:not([data-layout="duel-v2"]) .upsell-timer,
#game-overlay
  #upsell-game-container:not([data-layout="duel-v2"])
  .upsell-feedback:not(:empty),
#game-overlay #conflict-game-container .conflict-coachline,
#game-overlay #conflict-game-container .conflict-explanation,
#game-overlay #memory-game-container .memory-coachline,
#game-overlay #memory-game-container .memory-timer {
  margin-top: 0;
  margin-bottom: var(--game-ui-flow-block-gap);
}

@media (max-width: 640px) {
  :root {
    --game-ui-flow-meta-pad-y: 7px;
    --game-ui-flow-meta-pad-x: 10px;
    --game-ui-flow-body-top: 8px;
    --game-ui-flow-body-side: 10px;
    --game-ui-flow-body-bottom: 12px;
    --game-ui-flow-block-gap: 7px;
    --game-ui-flow-hero-gap: 7px;
    --game-ui-flow-progress-h: 4px;
  }

  #game-overlay
    :is(
      #allergen-game-container,
      #grape-game-container,
      #training-game-container,
      #conflict-game-container,
      #upsell-game-container,
      #recipe-game-container,
      #memory-game-container,
      #quiz-game
    ):not([data-layout="duel-v2"])
    .game-round {
    margin-bottom: 5px;
  }
}

/* ===== Service Battle MVP ===== */
#game-overlay #service-battle-container .game-round {
  min-height: 24px;
  padding: 4px 11px;
  border-radius: 999px;
  border: 1px solid rgba(112, 170, 255, 0.22);
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.96),
    rgba(236, 246, 255, 0.92)
  );
  color: rgba(16, 37, 72, 0.9);
  font-size: 0.74rem;
  font-weight: 850;
  letter-spacing: 0.04em;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.08);
}

#game-overlay #service-battle-container .game-body {
  padding: 12px 12px calc(16px + env(safe-area-inset-bottom));
  gap: 10px;
}

#game-overlay #service-battle-container .service-battle-hero,
#game-overlay #service-battle-container .service-battle-status-card,
#game-overlay #service-battle-container .service-battle-scenario {
  border: 1px solid rgba(118, 169, 231, 0.18);
  border-radius: 22px;
  background:
    radial-gradient(
      220px 120px at 10% -10%,
      rgba(120, 233, 255, 0.16),
      transparent 72%
    ),
    radial-gradient(
      220px 140px at 100% 0%,
      rgba(255, 205, 123, 0.14),
      transparent 74%
    ),
    linear-gradient(
      160deg,
      rgba(255, 255, 255, 0.98),
      rgba(244, 249, 255, 0.94)
    );
  box-shadow:
    0 16px 32px rgba(15, 23, 42, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.84);
}

#game-overlay #service-battle-container .service-battle-hero {
  display: grid;
  gap: 12px;
  padding: 15px 15px 14px;
}

#game-overlay #service-battle-container .service-battle-hero-copy {
  display: grid;
  gap: 10px;
}

#game-overlay #service-battle-container .service-battle-kicker,
#game-overlay #service-battle-container .service-battle-scenario-kicker {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 28px;
  padding: 0 12px;
  border-radius: 999px;
  font-size: 0.68rem;
  line-height: 1;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

#game-overlay #service-battle-container .service-battle-kicker {
  width: fit-content;
  border: 1px solid rgba(85, 146, 230, 0.18);
  background: rgba(255, 255, 255, 0.82);
  color: rgba(46, 92, 161, 0.9);
}

#game-overlay #service-battle-container .service-battle-hero-title {
  font-size: 1.18rem;
  line-height: 1.08;
  font-weight: 900;
  color: rgba(17, 29, 52, 0.96);
}

#game-overlay #service-battle-container .service-battle-hero-sub,
#game-overlay #service-battle-container .service-battle-status,
#game-overlay #service-battle-container .service-battle-feedback-line,
#game-overlay #service-battle-container .service-battle-scenario-guest {
  font-size: 0.9rem;
  line-height: 1.42;
  color: rgba(35, 56, 89, 0.76);
}

#game-overlay #service-battle-container .service-battle-rules {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

#game-overlay #service-battle-container .service-battle-rule-chip,
#game-overlay #service-battle-container .service-battle-scenario-note-chip {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 11px;
  border-radius: 999px;
  border: 1px solid rgba(114, 160, 223, 0.14);
  background: rgba(255, 255, 255, 0.84);
  font-size: 0.72rem;
  font-weight: 840;
  line-height: 1.2;
  color: rgba(24, 47, 82, 0.84);
}

#game-overlay #service-battle-container .service-battle-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

#game-overlay #service-battle-container .service-battle-stat {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 54px;
  padding: 10px 12px;
  border-radius: 18px;
  border: 1px solid rgba(120, 171, 229, 0.16);
  background: rgba(255, 255, 255, 0.82);
}

#game-overlay #service-battle-container .service-battle-stat-icon {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 12px;
  background: linear-gradient(
    135deg,
    rgba(28, 164, 182, 0.16),
    rgba(255, 193, 94, 0.2)
  );
  font-size: 1rem;
}

#game-overlay #service-battle-container .service-battle-stat-copy {
  display: grid;
  gap: 2px;
}

#game-overlay #service-battle-container .service-battle-stat-label {
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(60, 92, 139, 0.72);
}

#game-overlay #service-battle-container .service-battle-stat-value {
  font-size: 1rem;
  font-weight: 900;
  color: rgba(14, 28, 52, 0.96);
}

#game-overlay #service-battle-container .service-battle-status-card {
  display: grid;
  gap: 10px;
  padding: 14px;
}

#game-overlay #service-battle-container .service-battle-card-label {
  font-size: 0.68rem;
  line-height: 1;
  font-weight: 900;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(67, 100, 148, 0.72);
}

#game-overlay #service-battle-container .service-battle-fleet-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

#game-overlay #service-battle-container .service-battle-fleet-sub {
  font-size: 0.74rem;
  font-weight: 840;
  color: rgba(42, 69, 108, 0.72);
}

#game-overlay #service-battle-container .service-battle-legend {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

#game-overlay #service-battle-container .service-battle-legend-chip {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 62px;
  padding: 10px 11px;
  border-radius: 18px;
  border: 1px solid rgba(114, 160, 223, 0.16);
  background: rgba(255, 255, 255, 0.88);
  color: rgba(21, 44, 79, 0.88);
}

#game-overlay #service-battle-container .service-battle-legend-icon {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 12px;
  background: linear-gradient(
    135deg,
    rgba(94, 171, 255, 0.14),
    rgba(255, 195, 92, 0.18)
  );
  font-size: 1rem;
}

#game-overlay #service-battle-container .service-battle-legend-copy {
  display: grid;
  gap: 2px;
  min-width: 0;
}

#game-overlay #service-battle-container .service-battle-legend-title {
  font-size: 0.79rem;
  font-weight: 900;
}

#game-overlay #service-battle-container .service-battle-legend-meta {
  font-size: 0.68rem;
  font-weight: 760;
  color: rgba(54, 78, 115, 0.68);
}

#game-overlay #service-battle-container .service-battle-legend-chip.is-cleared {
  box-shadow: 0 14px 24px rgba(39, 178, 112, 0.14);
  border-color: rgba(44, 193, 121, 0.22);
}

#game-overlay #service-battle-container .service-battle-legend-chip.is-upsell {
  color: #9d5a05;
}

#game-overlay #service-battle-container .service-battle-legend-chip.is-menu {
  color: #276940;
}

#game-overlay
  #service-battle-container
  .service-battle-legend-chip.is-allergens {
  color: #9c4b13;
}

#game-overlay #service-battle-container .service-battle-legend-chip.is-service {
  color: #2f4b8f;
}

#game-overlay #service-battle-container .service-battle-board-wrap {
  padding: 3px;
  border-radius: 24px;
  background: linear-gradient(
    135deg,
    rgba(117, 197, 255, 0.24),
    rgba(255, 205, 119, 0.18)
  );
  box-shadow: 0 20px 36px rgba(15, 23, 42, 0.08);
}

#game-overlay #service-battle-container .service-battle-board {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 9px;
  padding: 10px;
  border-radius: 21px;
  background:
    linear-gradient(
      180deg,
      rgba(245, 250, 255, 0.98),
      rgba(233, 243, 253, 0.94)
    ),
    linear-gradient(135deg, rgba(25, 91, 185, 0.04), rgba(255, 174, 74, 0.08));
}

#game-overlay #service-battle-container .service-battle-cell {
  position: relative;
  display: grid;
  place-items: center;
  gap: 8px;
  aspect-ratio: 1 / 1;
  min-height: 62px;
  padding: 8px 6px;
  border: 1px solid rgba(113, 158, 216, 0.16);
  border-radius: 18px;
  background:
    radial-gradient(
      circle at 50% 18%,
      rgba(255, 255, 255, 0.88),
      transparent 42%
    ),
    linear-gradient(
      160deg,
      rgba(255, 255, 255, 0.98),
      rgba(227, 238, 250, 0.94)
    );
  box-shadow:
    0 14px 24px rgba(15, 23, 42, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
  color: rgba(17, 33, 61, 0.92);
  transition:
    transform 180ms ease,
    border-color 180ms ease,
    box-shadow 180ms ease,
    background 180ms ease;
}

@media (hover: hover) {
  #game-overlay
    #service-battle-container
    .service-battle-cell:hover:not(:disabled) {
    transform: translateY(-2px);
    border-color: rgba(88, 163, 255, 0.38);
    box-shadow:
      0 18px 28px rgba(15, 23, 42, 0.12),
      0 0 0 1px rgba(88, 163, 255, 0.08);
  }
}

#game-overlay
  #service-battle-container
  .service-battle-cell:active:not(:disabled) {
  transform: translateY(0) scale(0.985);
}

#game-overlay #service-battle-container .service-battle-cell:disabled {
  cursor: default;
}

#game-overlay #service-battle-container .service-battle-cell.is-active {
  border-color: rgba(88, 163, 255, 0.42);
  box-shadow:
    0 0 0 3px rgba(88, 163, 255, 0.12),
    0 18px 30px rgba(15, 23, 42, 0.12);
}

#game-overlay #service-battle-container .service-battle-cell.is-contested {
  border-color: rgba(255, 179, 78, 0.38);
  background: linear-gradient(
    155deg,
    rgba(255, 249, 239, 0.98),
    rgba(247, 238, 223, 0.95)
  );
}

#game-overlay #service-battle-container .service-battle-cell.is-miss {
  border-color: rgba(140, 171, 210, 0.24);
  background: linear-gradient(
    160deg,
    rgba(244, 248, 253, 0.98),
    rgba(219, 229, 241, 0.94)
  );
  color: rgba(78, 107, 142, 0.78);
}

#game-overlay #service-battle-container .service-battle-cell.is-hit {
  border-color: rgba(45, 196, 145, 0.34);
  background: linear-gradient(
    155deg,
    rgba(223, 253, 242, 0.98),
    rgba(187, 245, 227, 0.96)
  );
  color: rgba(14, 86, 62, 0.94);
}

#game-overlay #service-battle-container .service-battle-cell.is-sunk {
  border-color: rgba(255, 148, 67, 0.34);
  background: linear-gradient(
    155deg,
    rgba(255, 242, 221, 0.98),
    rgba(255, 221, 184, 0.96)
  );
  color: rgba(123, 59, 8, 0.96);
  box-shadow: 0 16px 26px rgba(255, 146, 40, 0.18);
}

#game-overlay #service-battle-container .service-battle-cell.is-last-action {
  box-shadow:
    0 0 0 2px rgba(255, 162, 84, 0.35),
    0 18px 30px rgba(15, 23, 42, 0.14);
}

#game-overlay #service-battle-container .service-battle-cell.is-flash::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(
    circle at 50% 50%,
    rgba(255, 255, 255, 0.84),
    rgba(255, 227, 171, 0.16) 60%,
    transparent 82%
  );
  animation: service-battle-cell-flash 340ms ease-out;
}

#game-overlay #service-battle-container .service-battle-cell-coord {
  position: absolute;
  top: 8px;
  left: 9px;
  font-size: 0.63rem;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(90, 115, 148, 0.74);
}

#game-overlay #service-battle-container .service-battle-cell-badge {
  font-size: 1.2rem;
  font-weight: 900;
}

@keyframes service-battle-cell-flash {
  0% {
    opacity: 0.95;
    transform: scale(0.96);
  }
  100% {
    opacity: 0;
    transform: scale(1.06);
  }
}

#game-overlay #service-battle-container .service-battle-scenario {
  display: grid;
  gap: 12px;
  padding: 15px;
}

#game-overlay #service-battle-container .service-battle-scenario-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

#game-overlay #service-battle-container .service-battle-scenario-kicker {
  border: 1px solid rgba(110, 162, 224, 0.18);
  background: rgba(255, 255, 255, 0.88);
  color: rgba(41, 82, 148, 0.94);
}

#game-overlay
  #service-battle-container
  .service-battle-scenario-kicker.is-upsell {
  color: #9d5a05;
}

#game-overlay
  #service-battle-container
  .service-battle-scenario-kicker.is-menu {
  color: #276940;
}

#game-overlay
  #service-battle-container
  .service-battle-scenario-kicker.is-allergens {
  color: #9c4b13;
}

#game-overlay
  #service-battle-container
  .service-battle-scenario-kicker.is-service {
  color: #2f4b8f;
}

#game-overlay #service-battle-container .service-battle-timer {
  display: grid;
  gap: 6px;
  min-width: 92px;
}

#game-overlay #service-battle-container .service-battle-timer-bar {
  overflow: hidden;
  height: 6px;
  border-radius: 999px;
  background: rgba(122, 164, 224, 0.16);
}

#game-overlay #service-battle-container .service-battle-timer-fill {
  width: 100%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #ffbf4a, #ff7b42);
  transition: width 100ms linear;
}

#game-overlay #service-battle-container .service-battle-timer-text {
  justify-self: end;
  font-size: 0.82rem;
  font-weight: 900;
  color: rgba(18, 36, 65, 0.92);
}

#game-overlay #service-battle-container .service-battle-scenario-title,
#game-overlay #service-battle-container .service-battle-feedback-title {
  font-size: 1.06rem;
  line-height: 1.14;
  font-weight: 900;
  color: rgba(16, 29, 52, 0.96);
}

#game-overlay #service-battle-container .service-battle-scenario-guest {
  padding: 12px 13px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.86);
  border: 1px solid rgba(114, 162, 223, 0.15);
}

#game-overlay #service-battle-container .service-battle-scenario-note {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

#game-overlay
  #service-battle-container
  .service-battle-scenario-note-chip.is-emphasis {
  border-color: rgba(82, 146, 255, 0.22);
  background: linear-gradient(
    135deg,
    rgba(226, 241, 255, 0.96),
    rgba(241, 248, 255, 0.92)
  );
  color: rgba(35, 72, 138, 0.9);
}

#game-overlay #service-battle-container .service-battle-answer-list {
  display: grid;
  gap: 9px;
}

#game-overlay #service-battle-container .service-battle-answer {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  width: 100%;
  min-height: 64px;
  padding: 12px 13px;
  border: 1px solid rgba(113, 160, 222, 0.16);
  border-radius: 18px;
  background: linear-gradient(
    160deg,
    rgba(255, 255, 255, 0.98),
    rgba(236, 245, 255, 0.94)
  );
  box-shadow:
    0 14px 24px rgba(15, 23, 42, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.88);
  color: rgba(17, 31, 57, 0.94);
  text-align: left;
  transition:
    transform 180ms ease,
    border-color 180ms ease,
    box-shadow 180ms ease,
    background 180ms ease;
}

@media (hover: hover) {
  #game-overlay
    #service-battle-container
    .service-battle-answer:hover:not(:disabled) {
    transform: translateY(-2px);
    border-color: rgba(88, 163, 255, 0.34);
    box-shadow: 0 18px 28px rgba(15, 23, 42, 0.12);
  }
}

#game-overlay
  #service-battle-container
  .service-battle-answer:active:not(:disabled) {
  transform: translateY(0) scale(0.992);
}

#game-overlay #service-battle-container .service-battle-answer:disabled {
  cursor: default;
}

#game-overlay #service-battle-container .service-battle-answer-mark {
  display: grid;
  place-items: center;
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  border-radius: 12px;
  background: rgba(35, 113, 221, 0.1);
  color: rgba(34, 78, 149, 0.9);
  font-size: 0.82rem;
  font-weight: 900;
}

#game-overlay #service-battle-container .service-battle-answer-text {
  font-size: 0.96rem;
  line-height: 1.36;
  font-weight: 820;
}

#game-overlay #service-battle-container .service-battle-answer.is-correct {
  border-color: rgba(31, 194, 124, 0.34);
  background: linear-gradient(
    160deg,
    rgba(31, 194, 124, 0.96),
    rgba(15, 163, 149, 0.96)
  );
  color: rgba(255, 255, 255, 0.98);
}

#game-overlay
  #service-battle-container
  .service-battle-answer.is-correct
  .service-battle-answer-mark,
#game-overlay
  #service-battle-container
  .service-battle-answer.is-wrong
  .service-battle-answer-mark {
  background: rgba(255, 255, 255, 0.16);
  color: rgba(255, 255, 255, 0.96);
}

#game-overlay #service-battle-container .service-battle-answer.is-wrong {
  border-color: rgba(255, 117, 82, 0.34);
  background: linear-gradient(
    160deg,
    rgba(255, 117, 82, 0.96),
    rgba(255, 93, 46, 0.96)
  );
  color: rgba(255, 255, 255, 0.98);
}

#game-overlay #service-battle-container .service-battle-feedback {
  display: grid;
  gap: 6px;
  padding: 13px;
  border-radius: 18px;
  border: 1px solid rgba(117, 168, 228, 0.16);
  background: rgba(255, 255, 255, 0.84);
}

#game-overlay #service-battle-container .service-battle-feedback.is-correct {
  border-color: rgba(31, 194, 124, 0.24);
  background: linear-gradient(
    160deg,
    rgba(233, 254, 246, 0.98),
    rgba(217, 247, 239, 0.96)
  );
}

#game-overlay #service-battle-container .service-battle-feedback.is-wrong {
  border-color: rgba(255, 181, 82, 0.24);
  background: linear-gradient(
    160deg,
    rgba(255, 250, 235, 0.98),
    rgba(255, 241, 213, 0.96)
  );
}

#game-overlay #service-battle-container .service-battle-feedback-head {
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(66, 102, 151, 0.74);
}

#game-overlay #service-battle-container .service-battle-feedback-line.is-muted {
  color: rgba(35, 56, 89, 0.62);
}

#game-overlay #service-battle-container .service-battle-actions,
#game-overlay #service-battle-container .service-battle-scenario-actions {
  justify-content: stretch;
}

#game-overlay #service-battle-container .service-battle-actions .game-secondary,
#game-overlay
  #service-battle-container
  .service-battle-scenario-actions
  .game-primary {
  width: 100%;
}

#game-overlay
  #service-battle-container[data-battle-category="upsell"]
  .service-battle-scenario {
  border-color: rgba(255, 190, 98, 0.24);
  background:
    radial-gradient(
      220px 140px at 0% 0%,
      rgba(255, 219, 142, 0.22),
      transparent 74%
    ),
    linear-gradient(
      160deg,
      rgba(255, 253, 244, 0.98),
      rgba(255, 247, 232, 0.94)
    );
}

#game-overlay
  #service-battle-container[data-battle-category="menu"]
  .service-battle-scenario {
  border-color: rgba(114, 212, 146, 0.24);
  background:
    radial-gradient(
      220px 140px at 0% 0%,
      rgba(146, 234, 174, 0.18),
      transparent 74%
    ),
    linear-gradient(
      160deg,
      rgba(246, 255, 249, 0.98),
      rgba(236, 252, 242, 0.94)
    );
}

#game-overlay
  #service-battle-container[data-battle-category="allergens"]
  .service-battle-scenario {
  border-color: rgba(255, 177, 113, 0.24);
  background:
    radial-gradient(
      220px 140px at 0% 0%,
      rgba(255, 205, 146, 0.2),
      transparent 74%
    ),
    linear-gradient(
      160deg,
      rgba(255, 250, 244, 0.98),
      rgba(255, 241, 228, 0.94)
    );
}

#game-overlay
  #service-battle-container[data-battle-category="service"]
  .service-battle-scenario {
  border-color: rgba(121, 177, 255, 0.24);
  background:
    radial-gradient(
      220px 140px at 0% 0%,
      rgba(154, 210, 255, 0.18),
      transparent 74%
    ),
    linear-gradient(
      160deg,
      rgba(246, 250, 255, 0.98),
      rgba(235, 243, 255, 0.94)
    );
}

#game-overlay
  #service-battle-container[data-battle-category="upsell"]
  .service-battle-timer-fill {
  background: linear-gradient(90deg, #ffd15f, #ff9a3d);
}

#game-overlay
  #service-battle-container[data-battle-category="menu"]
  .service-battle-timer-fill {
  background: linear-gradient(90deg, #74db91, #29c59b);
}

#game-overlay
  #service-battle-container[data-battle-category="allergens"]
  .service-battle-timer-fill {
  background: linear-gradient(90deg, #ffc96a, #ff8157);
}

#game-overlay
  #service-battle-container[data-battle-category="service"]
  .service-battle-timer-fill {
  background: linear-gradient(90deg, #6dc8ff, #4a8fff);
}

@media (max-width: 640px) {
  #game-overlay #service-battle-container .game-round {
    min-height: 22px;
    padding: 3px 10px;
    font-size: 0.7rem;
  }

  #game-overlay #service-battle-container .game-body {
    padding: 10px 10px calc(14px + env(safe-area-inset-bottom));
    gap: 8px;
  }

  #game-overlay #service-battle-container .service-battle-hero,
  #game-overlay #service-battle-container .service-battle-status-card,
  #game-overlay #service-battle-container .service-battle-scenario {
    border-radius: 20px;
  }

  #game-overlay #service-battle-container .service-battle-hero,
  #game-overlay #service-battle-container .service-battle-scenario,
  #game-overlay #service-battle-container .service-battle-status-card {
    padding: 12px;
  }

  #game-overlay #service-battle-container .service-battle-hero-title {
    font-size: 1.02rem;
  }

  #game-overlay #service-battle-container .service-battle-hero-sub,
  #game-overlay #service-battle-container .service-battle-status,
  #game-overlay #service-battle-container .service-battle-feedback-line,
  #game-overlay #service-battle-container .service-battle-scenario-guest {
    font-size: 0.84rem;
  }

  #game-overlay #service-battle-container .service-battle-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #game-overlay #service-battle-container .service-battle-rules {
    gap: 6px;
  }

  #game-overlay #service-battle-container .service-battle-rule-chip,
  #game-overlay #service-battle-container .service-battle-scenario-note-chip {
    min-height: 26px;
    padding: 0 10px;
    font-size: 0.68rem;
  }

  #game-overlay #service-battle-container .service-battle-stat {
    min-height: 50px;
    padding: 9px 10px;
    border-radius: 16px;
  }

  #game-overlay #service-battle-container .service-battle-stat-icon {
    width: 30px;
    height: 30px;
    border-radius: 10px;
  }

  #game-overlay #service-battle-container .service-battle-legend {
    grid-template-columns: 1fr;
  }

  #game-overlay #service-battle-container .service-battle-legend-chip {
    min-height: 56px;
    padding: 9px 10px;
    border-radius: 16px;
  }

  #game-overlay #service-battle-container .service-battle-legend-icon {
    width: 30px;
    height: 30px;
    border-radius: 10px;
  }

  #game-overlay #service-battle-container .service-battle-board {
    gap: 7px;
    padding: 8px;
  }

  #game-overlay #service-battle-container .service-battle-cell {
    min-height: 54px;
    border-radius: 16px;
  }

  #game-overlay #service-battle-container .service-battle-cell-badge {
    font-size: 1.04rem;
  }

  #game-overlay #service-battle-container .service-battle-cell-coord {
    top: 7px;
    left: 8px;
    font-size: 0.58rem;
  }

  #game-overlay #service-battle-container .service-battle-answer {
    min-height: 58px;
    padding: 11px 12px;
    border-radius: 16px;
  }

  #game-overlay #service-battle-container .service-battle-answer-mark {
    flex-basis: 30px;
    width: 30px;
    height: 30px;
    border-radius: 10px;
    font-size: 0.76rem;
  }

  #game-overlay #service-battle-container .service-battle-answer-text {
    font-size: 0.9rem;
  }

  #game-overlay #service-battle-container .service-battle-scenario-head {
    align-items: flex-start;
    flex-direction: column;
  }

  #game-overlay #service-battle-container .service-battle-timer {
    width: 100%;
  }
}

body[data-theme="dark"] #game-overlay #service-battle-container .game-round {
  border-color: rgba(166, 216, 255, 0.22);
  background: linear-gradient(
    150deg,
    rgba(24, 29, 44, 0.94),
    rgba(18, 24, 38, 0.92)
  );
  color: rgba(235, 244, 255, 0.94);
}

body[data-theme="dark"]
  #game-overlay
  #service-battle-container
  .service-battle-hero,
body[data-theme="dark"]
  #game-overlay
  #service-battle-container
  .service-battle-status-card,
body[data-theme="dark"]
  #game-overlay
  #service-battle-container
  .service-battle-scenario,
body[data-theme="dark"]
  #game-overlay
  #service-battle-container
  .service-battle-board,
body[data-theme="dark"]
  #game-overlay
  #service-battle-container
  .service-battle-stat,
body[data-theme="dark"]
  #game-overlay
  #service-battle-container
  .service-battle-answer,
body[data-theme="dark"]
  #game-overlay
  #service-battle-container
  .service-battle-feedback,
body[data-theme="dark"]
  #game-overlay
  #service-battle-container
  .service-battle-scenario-kicker,
body[data-theme="dark"]
  #game-overlay
  #service-battle-container
  .service-battle-legend-chip,
body[data-theme="dark"]
  #game-overlay
  #service-battle-container
  .service-battle-kicker,
body[data-theme="dark"]
  #game-overlay
  #service-battle-container
  .service-battle-scenario-guest {
  border-color: rgba(171, 205, 255, 0.14);
  background: linear-gradient(
    160deg,
    rgba(24, 31, 49, 0.96),
    rgba(16, 22, 37, 0.94)
  );
  color: rgba(232, 242, 255, 0.94);
  box-shadow:
    0 16px 34px rgba(0, 0, 0, 0.38),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

body[data-theme="dark"]
  #game-overlay
  #service-battle-container
  .service-battle-cell {
  border-color: rgba(171, 205, 255, 0.12);
  background:
    radial-gradient(
      circle at 50% 18%,
      rgba(255, 255, 255, 0.06),
      transparent 42%
    ),
    linear-gradient(160deg, rgba(27, 35, 56, 0.98), rgba(18, 24, 39, 0.96));
  color: rgba(233, 242, 255, 0.92);
  box-shadow:
    0 16px 30px rgba(0, 0, 0, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

body[data-theme="dark"]
  #game-overlay
  #service-battle-container
  .service-battle-cell.is-contested {
  border-color: rgba(255, 192, 88, 0.32);
  background: linear-gradient(
    160deg,
    rgba(58, 43, 18, 0.98),
    rgba(42, 31, 15, 0.96)
  );
}

body[data-theme="dark"]
  #game-overlay
  #service-battle-container
  .service-battle-cell.is-miss {
  border-color: rgba(140, 171, 210, 0.2);
  background: linear-gradient(
    160deg,
    rgba(35, 44, 64, 0.98),
    rgba(26, 34, 51, 0.96)
  );
}

body[data-theme="dark"]
  #game-overlay
  #service-battle-container
  .service-battle-cell.is-hit {
  border-color: rgba(70, 226, 165, 0.32);
  background: linear-gradient(
    160deg,
    rgba(16, 74, 62, 0.98),
    rgba(11, 58, 64, 0.96)
  );
}

body[data-theme="dark"]
  #game-overlay
  #service-battle-container
  .service-battle-cell.is-sunk {
  border-color: rgba(255, 160, 73, 0.3);
  background: linear-gradient(
    160deg,
    rgba(87, 48, 16, 0.98),
    rgba(66, 34, 13, 0.96)
  );
}

body[data-theme="dark"]
  #game-overlay
  #service-battle-container
  .service-battle-answer.is-correct,
body[data-theme="dark"]
  #game-overlay
  #service-battle-container
  .service-battle-answer.is-wrong {
  color: rgba(255, 255, 255, 0.98);
}

body[data-theme="dark"]
  #game-overlay
  #service-battle-container
  .service-battle-rule-chip,
body[data-theme="dark"]
  #game-overlay
  #service-battle-container
  .service-battle-scenario-note-chip,
body[data-theme="dark"]
  #game-overlay
  #service-battle-container
  .service-battle-legend-meta,
body[data-theme="dark"]
  #game-overlay
  #service-battle-container
  .service-battle-fleet-sub,
body[data-theme="dark"]
  #game-overlay
  #service-battle-container
  .service-battle-card-label {
  color: rgba(206, 223, 245, 0.82);
}

body[data-theme="dark"]
  #game-overlay
  #service-battle-container
  .service-battle-rule-chip,
body[data-theme="dark"]
  #game-overlay
  #service-battle-container
  .service-battle-scenario-note-chip {
  border-color: rgba(171, 205, 255, 0.12);
  background: rgba(255, 255, 255, 0.04);
}

/* ===== Practice Track Polish (2026-03-02) ===== */
#quiz-container[data-practice-hub-tab="track"]
  .practice-hub-pane[data-practice-hub-pane="track"] {
  gap: 10px;
}

#quiz-container[data-practice-hub-tab="track"] .learning-path-panel {
  --track-accent-a: 0 170 190;
  --track-accent-b: 96 128 255;
  --track-accent-c: 255 196 88;
  border-radius: 22px;
  padding: 13px 13px 12px;
  border: 1px solid rgba(8, 18, 34, 0.1);
  background:
    radial-gradient(
      190px 120px at 2% -10%,
      rgba(var(--track-accent-a), 0.14),
      transparent 68%
    ),
    radial-gradient(
      180px 120px at 98% -16%,
      rgba(var(--track-accent-c), 0.16),
      transparent 70%
    ),
    linear-gradient(
      160deg,
      rgba(255, 255, 255, 0.97),
      rgba(246, 251, 255, 0.94)
    );
  box-shadow: 0 16px 36px rgba(15, 23, 42, 0.12);
}

#quiz-container[data-practice-hub-tab="track"] .learning-path-head {
  align-items: center;
}

#quiz-container[data-practice-hub-tab="track"] .learning-path-kicker {
  font-size: 0.62rem;
  letter-spacing: 0.16em;
}

#quiz-container[data-practice-hub-tab="track"] .learning-path-title {
  font-size: 0.98rem;
  line-height: 1.12;
}

#quiz-container[data-practice-hub-tab="track"] .learning-path-metrics {
  gap: 6px;
}

#quiz-container[data-practice-hub-tab="track"] .learning-path-chip {
  min-height: 24px;
  padding: 4px 8px;
  font-size: 0.62rem;
  letter-spacing: 0.1em;
}

#quiz-container[data-practice-hub-tab="track"] .learning-path-sub {
  margin-top: 6px;
  font-size: 0.76rem;
  line-height: 1.34;
}

#quiz-container[data-practice-hub-tab="track"] .learning-path-track {
  margin-top: 10px;
  gap: 9px;
  padding: 2px 0 2px;
}

#quiz-container[data-practice-hub-tab="track"] .learning-path-track::before {
  left: 19px;
  width: 3px;
  opacity: 0.55;
  background: linear-gradient(
    180deg,
    rgba(var(--track-accent-a), 0.4),
    rgba(var(--track-accent-b), 0.28)
  );
}

#quiz-container[data-practice-hub-tab="track"] .learning-step:nth-child(odd),
#quiz-container[data-practice-hub-tab="track"] .learning-step:nth-child(even) {
  padding-left: 0;
  padding-right: 0;
}

#quiz-container[data-practice-hub-tab="track"]
  .learning-step:not(:last-child)::after {
  left: 18px;
  top: 58px;
  width: 2px;
  height: calc(100% + 8px);
  border-radius: 999px;
  background: linear-gradient(
    180deg,
    rgba(var(--track-accent-a), 0.48),
    rgba(var(--track-accent-b), 0.34)
  );
  box-shadow: none;
}

#quiz-container[data-practice-hub-tab="track"] .learning-step-btn {
  grid-template-columns: 44px minmax(0, 1fr) auto;
  grid-template-areas:
    "icon main state"
    "icon main cta";
  gap: 7px 9px;
  min-height: 74px;
  padding: 9px 10px;
  border-radius: 15px;
  box-shadow: 0 12px 26px rgba(15, 23, 42, 0.1);
}

#quiz-container[data-practice-hub-tab="track"]
  .learning-step-btn
  .learning-node-core {
  grid-area: icon;
  width: 36px;
  height: 36px;
  font-size: 0.98rem;
}

#quiz-container[data-practice-hub-tab="track"]
  .learning-step-btn
  .learning-step-main {
  grid-area: main;
  gap: 3px;
}

#quiz-container[data-practice-hub-tab="track"]
  .learning-step-btn
  .learning-step-state {
  grid-area: state;
  justify-self: end;
  min-width: 64px;
  height: 23px;
  font-size: 0.56rem;
  letter-spacing: 0.08em;
}

#quiz-container[data-practice-hub-tab="track"]
  .learning-step-btn
  .learning-step-cta {
  grid-area: cta;
  justify-self: end;
  height: 27px;
  padding: 0 8px;
  border-radius: 10px;
  font-size: 0.56rem;
  letter-spacing: 0.08em;
}

#quiz-container[data-practice-hub-tab="track"] .learning-step-title {
  font-size: 0.86rem;
  line-height: 1.24;
}

#quiz-container[data-practice-hub-tab="track"] .learning-step-meta {
  font-size: 0.72rem;
}

#quiz-container[data-practice-hub-tab="track"] .learning-step-badge {
  height: 17px;
  padding: 0 7px;
  font-size: 0.52rem;
}

#quiz-container[data-practice-hub-tab="track"] .learning-step-checkpoint {
  height: 18px;
  padding: 0 7px;
  font-size: 0.52rem;
}

#quiz-container[data-practice-hub-tab="track"]
  .learning-step.is-active
  .learning-step-btn {
  border-color: rgba(var(--track-accent-a), 0.46);
  box-shadow: 0 16px 30px rgba(var(--track-accent-a), 0.16);
}

#quiz-container[data-practice-hub-tab="track"]
  :is(.learning-finish-card, .learning-reward-day) {
  padding: 9px 10px;
  border-radius: 15px;
  grid-template-columns: 36px 1fr auto;
  gap: 8px;
}

#quiz-container[data-practice-hub-tab="track"]
  :is(.learning-finish-icon, .learning-reward-icon) {
  width: 36px;
  height: 36px;
  border-radius: 11px;
  font-size: 0.98rem;
}

#quiz-container[data-practice-hub-tab="track"]
  :is(.learning-finish-title, .learning-reward-title) {
  font-size: 0.8rem;
}

#quiz-container[data-practice-hub-tab="track"]
  :is(.learning-finish-sub, .learning-reward-sub) {
  font-size: 0.7rem;
  line-height: 1.3;
}

#quiz-container[data-practice-hub-tab="track"] .learning-reward-meta {
  font-size: 0.62rem;
  letter-spacing: 0.05em;
}

#quiz-container[data-practice-hub-tab="track"]
  :is(.learning-finish-btn, .learning-reward-btn) {
  height: 29px;
  padding: 0 9px;
  border-radius: 10px;
  font-size: 0.56rem;
}

@media (max-width: 640px) {
  #quiz-container[data-practice-hub-tab="track"] .learning-path-panel {
    border-radius: 18px;
    padding: 11px 10px 10px;
  }

  #quiz-container[data-practice-hub-tab="track"] .learning-path-title {
    font-size: 0.9rem;
  }

  #quiz-container[data-practice-hub-tab="track"] .learning-path-sub {
    font-size: 0.72rem;
  }

  #quiz-container[data-practice-hub-tab="track"] .learning-path-track {
    gap: 8px;
  }

  #quiz-container[data-practice-hub-tab="track"] .learning-path-track::before {
    left: 16px;
  }

  #quiz-container[data-practice-hub-tab="track"]
    .learning-step:not(:last-child)::after {
    left: 15px;
    top: 54px;
  }

  #quiz-container[data-practice-hub-tab="track"] .learning-step-btn {
    grid-template-columns: 38px 1fr;
    grid-template-areas:
      "icon main"
      "state state"
      "cta cta";
    min-height: 0;
    padding: 8px 9px;
  }

  #quiz-container[data-practice-hub-tab="track"]
    .learning-step-btn
    .learning-node-core {
    width: 32px;
    height: 32px;
    font-size: 0.86rem;
  }

  #quiz-container[data-practice-hub-tab="track"]
    .learning-step-btn
    .learning-step-state,
  #quiz-container[data-practice-hub-tab="track"]
    .learning-step-btn
    .learning-step-cta {
    justify-self: start;
  }

  #quiz-container[data-practice-hub-tab="track"]
    :is(.learning-finish-card, .learning-reward-day) {
    grid-template-columns: auto 1fr;
    grid-template-areas:
      "icon main"
      "btn btn";
  }

  #quiz-container[data-practice-hub-tab="track"]
    :is(.learning-finish-icon, .learning-reward-icon) {
    grid-area: icon;
  }

  #quiz-container[data-practice-hub-tab="track"]
    :is(.learning-finish-main, .learning-reward-main) {
    grid-area: main;
  }

  #quiz-container[data-practice-hub-tab="track"]
    :is(.learning-finish-btn, .learning-reward-btn) {
    grid-area: btn;
    justify-self: start;
  }
}

body[data-theme="dark"]
  #quiz-container[data-practice-hub-tab="track"]
  .learning-path-panel {
  border-color: rgba(255, 255, 255, 0.14);
  background:
    radial-gradient(
      220px 140px at 0% -14%,
      rgba(var(--track-accent-a), 0.18),
      transparent 70%
    ),
    radial-gradient(
      210px 130px at 100% -16%,
      rgba(var(--track-accent-c), 0.14),
      transparent 72%
    ),
    linear-gradient(
      160deg,
      rgba(255, 255, 255, 0.08),
      rgba(255, 255, 255, 0.05)
    );
}

body[data-theme="dark"]
  #quiz-container[data-practice-hub-tab="track"]
  .learning-path-track::before {
  background: linear-gradient(
    180deg,
    rgba(var(--track-accent-a), 0.52),
    rgba(var(--track-accent-b), 0.38)
  );
}

body[data-theme="dark"]
  #quiz-container[data-practice-hub-tab="track"]
  .learning-step:not(:last-child)::after {
  background: linear-gradient(
    180deg,
    rgba(var(--track-accent-a), 0.56),
    rgba(var(--track-accent-b), 0.42)
  );
}

/* Upsell: 1v1 + deeper explanation */
#game-overlay #upsell-game-container .upsell-feedback-insights {
  padding-top: 9px;
  border-top: 1px dashed rgba(59, 94, 165, 0.24);
}

#game-overlay #upsell-game-container .upsell-feedback-insight-line {
  font-size: 0.82rem;
  line-height: 1.36;
}

#game-overlay #upsell-game-container .upsell-feedback-line.is-duel-summary {
  margin-top: 6px;
  padding: 7px 9px;
  border-radius: 11px;
  border: 1px solid rgba(72, 109, 190, 0.26);
  background: linear-gradient(
    140deg,
    rgba(227, 239, 255, 0.78),
    rgba(247, 251, 255, 0.88)
  );
  color: rgba(27, 47, 92, 0.9);
  font-weight: 760;
}

#game-overlay
  #upsell-game-container[data-variant="duel1v1"]
  .upsell-meta-inline
  .upsell-meta-pill:first-child {
  border-color: rgba(100, 84, 196, 0.3);
  background: linear-gradient(
    140deg,
    rgba(223, 229, 255, 0.9),
    rgba(241, 237, 255, 0.88)
  );
  color: rgba(45, 42, 114, 0.9);
}

#game-overlay
  #upsell-game-container[data-layout="duel-v2"]
  .upsell-feedback-insight-line {
  -webkit-line-clamp: unset;
}

#game-overlay
  #upsell-game-container[data-layout="duel-v2"]
  .upsell-feedback-line.is-duel-summary {
  font-size: 0.78rem;
  line-height: 1.3;
}

@media (max-width: 420px) {
  #game-overlay #upsell-game-container .upsell-feedback-line.is-duel-summary {
    font-size: 0.74rem;
    padding: 6px 8px;
  }
}

/* ===== Service Battle v2: board-first layout ===== */
#game-overlay #service-battle-container.service-battle-panel {
  overflow: hidden;
  min-height: min(780px, calc(100dvh - 80px));
}

#game-overlay #service-battle-container .service-battle-screen {
  height: 100%;
  min-height: 0;
}

#game-overlay #service-battle-container .game-body {
  position: relative;
  overflow: hidden;
  display: grid;
  padding: 10px 12px calc(14px + env(safe-area-inset-bottom));
}

#game-overlay #service-battle-container .service-battle-topbar-actions {
  gap: 7px;
}

#game-overlay #service-battle-container .service-battle-icon-btn {
  width: 38px;
  height: 38px;
  padding: 0;
  border-radius: 12px;
  border: 1px solid rgba(111, 166, 227, 0.18);
  background: linear-gradient(
    145deg,
    rgba(255, 255, 255, 0.96),
    rgba(236, 246, 255, 0.92)
  );
  box-shadow: 0 12px 24px rgba(15, 23, 42, 0.08);
  color: rgba(28, 74, 137, 0.92);
  font-size: 16px;
  cursor: pointer;
  transition:
    transform 160ms ease,
    box-shadow 160ms ease,
    border-color 160ms ease;
}

@media (hover: hover) {
  #game-overlay
    #service-battle-container
    .service-battle-icon-btn:hover:not(:disabled) {
    transform: translateY(-1px);
    border-color: rgba(78, 151, 235, 0.34);
    box-shadow: 0 16px 28px rgba(15, 23, 42, 0.12);
  }
}

#game-overlay #service-battle-container .service-battle-icon-btn:disabled {
  opacity: 0.48;
  cursor: default;
  transform: none;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.06);
}

#game-overlay #service-battle-container .service-battle-stage {
  height: 100%;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  gap: 10px;
  min-height: 0;
}

#game-overlay #service-battle-container .service-battle-stage-top {
  display: grid;
  gap: 10px;
}

#game-overlay #service-battle-container .service-battle-stage-copy {
  display: grid;
  gap: 6px;
  padding: 11px 12px;
  border-radius: 18px;
  border: 1px solid rgba(118, 169, 231, 0.16);
  background:
    radial-gradient(
      220px 120px at 0% 0%,
      rgba(120, 233, 255, 0.14),
      transparent 72%
    ),
    linear-gradient(
      160deg,
      rgba(255, 255, 255, 0.98),
      rgba(244, 249, 255, 0.94)
    );
  box-shadow: 0 12px 24px rgba(15, 23, 42, 0.07);
}

#game-overlay #service-battle-container .service-battle-status {
  font-size: 0.84rem;
  line-height: 1.36;
  color: rgba(32, 54, 88, 0.74);
}

#game-overlay #service-battle-container .service-battle-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
}

#game-overlay #service-battle-container .service-battle-stat {
  min-height: 0;
  padding: 9px 10px;
  border-radius: 15px;
  gap: 8px;
}

#game-overlay #service-battle-container .service-battle-stat-icon {
  width: 28px;
  height: 28px;
  border-radius: 10px;
  font-size: 0.9rem;
}

#game-overlay #service-battle-container .service-battle-stat-label {
  font-size: 0.62rem;
  letter-spacing: 0.1em;
}

#game-overlay #service-battle-container .service-battle-stat-value {
  font-size: 0.88rem;
}

#game-overlay #service-battle-container .service-battle-board-wrap {
  align-self: stretch;
  display: grid;
  place-items: center;
  padding: 6px;
  min-height: 0;
  border-radius: 26px;
}

#game-overlay #service-battle-container .service-battle-board {
  width: min(100%, 428px);
  height: auto;
  aspect-ratio: 1 / 1;
  align-self: center;
  padding: 10px;
  gap: 9px;
}

#game-overlay #service-battle-container .service-battle-cell {
  min-height: 0;
}

#game-overlay #service-battle-container .service-battle-actions {
  justify-content: stretch;
  align-self: end;
  position: sticky;
  bottom: calc(2px + env(safe-area-inset-bottom));
  z-index: 2;
  padding-top: 6px;
}

#game-overlay
  #service-battle-container
  .service-battle-actions
  .game-secondary {
  width: 100%;
}

#game-overlay #service-battle-container .service-battle-overlay {
  position: absolute;
  inset: 10px 12px calc(14px + env(safe-area-inset-bottom)) 12px;
  z-index: 4;
  display: grid;
  place-items: center;
  padding: 6px;
  border-radius: 26px;
  background: rgba(10, 20, 37, 0.22);
  backdrop-filter: blur(10px);
}

#game-overlay #service-battle-container .service-battle-overlay[hidden] {
  display: none !important;
}

#game-overlay #service-battle-container .service-battle-sheet-card,
#game-overlay #service-battle-container .service-battle-scenario {
  width: min(100%, 520px);
  max-height: 100%;
  overflow: auto;
  scrollbar-width: none;
}

#game-overlay
  #service-battle-container
  .service-battle-sheet-card::-webkit-scrollbar,
#game-overlay
  #service-battle-container
  .service-battle-scenario::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}

#game-overlay #service-battle-container .service-battle-sheet-card {
  padding: 16px;
  border-radius: 24px;
  border: 1px solid rgba(118, 169, 231, 0.18);
  background:
    radial-gradient(
      220px 120px at 0% 0%,
      rgba(120, 233, 255, 0.16),
      transparent 72%
    ),
    linear-gradient(
      160deg,
      rgba(255, 255, 255, 0.99),
      rgba(243, 249, 255, 0.96)
    );
  box-shadow: 0 22px 40px rgba(15, 23, 42, 0.14);
}

#game-overlay #service-battle-container .service-battle-sheet-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

#game-overlay #service-battle-container .service-battle-sheet-kicker {
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(50, 94, 157, 0.84);
}

#game-overlay #service-battle-container .service-battle-sheet-close {
  width: 34px;
  height: 34px;
  padding: 0;
  border-radius: 11px;
  border: 1px solid rgba(110, 162, 224, 0.16);
  background: rgba(255, 255, 255, 0.88);
  color: rgba(34, 70, 124, 0.92);
  font-size: 14px;
  cursor: pointer;
}

#game-overlay #service-battle-container .service-battle-sheet-title {
  margin-top: 12px;
  font-size: 1.06rem;
  line-height: 1.18;
  font-weight: 900;
  color: rgba(16, 29, 52, 0.96);
}

#game-overlay #service-battle-container .service-battle-sheet-body {
  margin-top: 10px;
  display: grid;
  gap: 8px;
  font-size: 0.92rem;
  line-height: 1.45;
  color: rgba(35, 56, 89, 0.78);
}

#game-overlay #service-battle-container .service-battle-sheet-body p {
  margin: 0;
}

#game-overlay #service-battle-container .service-battle-sheet-fleet {
  margin-top: 14px;
  display: grid;
  gap: 10px;
}

#game-overlay #service-battle-container .service-battle-scenario {
  padding: 16px;
  border-radius: 24px;
}

#game-overlay #service-battle-container .service-battle-scenario-actions {
  display: none;
}

#game-overlay #service-battle-container .service-battle-feedback {
  padding: 12px;
}

@media (max-width: 640px) {
  #game-overlay #service-battle-container .service-battle-screen {
    height: 100%;
  }

  #game-overlay #service-battle-container .game-body {
    padding: 8px 10px calc(12px + env(safe-area-inset-bottom));
  }

  #game-overlay #service-battle-container .service-battle-icon-btn {
    width: 34px;
    height: 34px;
    border-radius: 11px;
    font-size: 15px;
  }

  #game-overlay #service-battle-container .service-battle-stage {
    gap: 8px;
  }

  #game-overlay #service-battle-container .service-battle-stage-copy {
    padding: 10px 11px;
    border-radius: 16px;
  }

  #game-overlay #service-battle-container .service-battle-status {
    font-size: 0.8rem;
  }

  #game-overlay #service-battle-container .service-battle-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #game-overlay #service-battle-container .service-battle-board {
    width: min(100%, 360px);
    padding: 8px;
    gap: 7px;
  }

  #game-overlay #service-battle-container .service-battle-cell {
    border-radius: 16px;
  }

  #game-overlay #service-battle-container .service-battle-overlay {
    inset: 8px 10px calc(12px + env(safe-area-inset-bottom)) 10px;
    padding: 2px;
    border-radius: 22px;
  }

  #game-overlay #service-battle-container .service-battle-sheet-card,
  #game-overlay #service-battle-container .service-battle-scenario {
    width: 100%;
    border-radius: 22px;
    padding: 14px;
  }
}

@media (max-height: 760px) {
  #game-overlay #service-battle-container .game-body {
    padding-top: 8px;
    padding-bottom: calc(10px + env(safe-area-inset-bottom));
  }

  #game-overlay #service-battle-container .service-battle-stage {
    gap: 7px;
  }

  #game-overlay #service-battle-container .service-battle-stage-copy {
    padding: 9px 10px;
    gap: 5px;
  }

  #game-overlay #service-battle-container .service-battle-status {
    font-size: 0.78rem;
    line-height: 1.3;
  }

  #game-overlay #service-battle-container .service-battle-stat {
    padding: 8px 9px;
  }

  #game-overlay #service-battle-container .service-battle-board {
    width: min(100%, 332px);
    padding: 7px;
    gap: 6px;
  }

  #game-overlay #service-battle-container .service-battle-cell-coord {
    top: 6px;
    left: 7px;
    font-size: 0.56rem;
  }

  #game-overlay #service-battle-container .service-battle-cell-badge {
    font-size: 1rem;
  }
}

body[data-theme="dark"]
  #game-overlay
  #service-battle-container
  .service-battle-icon-btn {
  border-color: rgba(166, 216, 255, 0.18);
  background: linear-gradient(
    150deg,
    rgba(24, 29, 44, 0.94),
    rgba(18, 24, 38, 0.92)
  );
  color: rgba(235, 244, 255, 0.94);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.24);
}

body[data-theme="dark"]
  #game-overlay
  #service-battle-container
  .service-battle-stage-copy,
body[data-theme="dark"]
  #game-overlay
  #service-battle-container
  .service-battle-sheet-card {
  border-color: rgba(166, 216, 255, 0.18);
  background:
    radial-gradient(
      220px 120px at 0% 0%,
      rgba(73, 156, 255, 0.18),
      transparent 72%
    ),
    linear-gradient(160deg, rgba(18, 24, 38, 0.96), rgba(11, 16, 27, 0.94));
  box-shadow: 0 18px 36px rgba(0, 0, 0, 0.28);
}

body[data-theme="dark"]
  #game-overlay
  #service-battle-container
  .service-battle-sheet-kicker,
body[data-theme="dark"]
  #game-overlay
  #service-battle-container
  .service-battle-kicker {
  color: rgba(184, 224, 255, 0.88);
}

body[data-theme="dark"]
  #game-overlay
  #service-battle-container
  .service-battle-status,
body[data-theme="dark"]
  #game-overlay
  #service-battle-container
  .service-battle-sheet-body {
  color: rgba(219, 232, 255, 0.78);
}

body[data-theme="dark"]
  #game-overlay
  #service-battle-container
  .service-battle-sheet-title {
  color: rgba(255, 255, 255, 0.95);
}

body[data-theme="dark"]
  #game-overlay
  #service-battle-container
  .service-battle-sheet-close {
  border-color: rgba(166, 216, 255, 0.16);
  background: rgba(255, 255, 255, 0.08);
  color: rgba(235, 244, 255, 0.94);
}

body[data-theme="dark"]
  #game-overlay
  #service-battle-container
  .service-battle-overlay {
  background: rgba(3, 8, 18, 0.44);
}

#game-overlay #service-battle-container .service-battle-icon-btn.is-active {
  border-color: rgba(255, 167, 81, 0.44);
  box-shadow: 0 16px 28px rgba(255, 144, 0, 0.18);
}

#game-overlay #service-battle-container .service-battle-duel-hud {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 10px 12px;
  border-radius: 18px;
  border: 1px solid rgba(255, 170, 94, 0.22);
  background:
    radial-gradient(
      180px 100px at 0% 0%,
      rgba(255, 194, 118, 0.18),
      transparent 72%
    ),
    linear-gradient(
      155deg,
      rgba(255, 255, 255, 0.98),
      rgba(255, 248, 241, 0.95)
    );
  box-shadow: 0 12px 24px rgba(15, 23, 42, 0.08);
}

#game-overlay #service-battle-container .service-battle-duel-chip {
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(255, 138, 51, 0.14);
  color: rgba(168, 79, 17, 0.92);
  font-size: 0.62rem;
  font-weight: 900;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

#game-overlay #service-battle-container .service-battle-duel-copy {
  display: grid;
  gap: 3px;
  min-width: 0;
}

#game-overlay #service-battle-container .service-battle-duel-title {
  font-size: 0.86rem;
  line-height: 1.2;
  font-weight: 900;
  color: rgba(23, 35, 58, 0.96);
}

#game-overlay #service-battle-container .service-battle-duel-meta {
  font-size: 0.74rem;
  line-height: 1.25;
  color: rgba(69, 82, 108, 0.76);
}

#game-overlay #service-battle-container .service-battle-duel-scoreboard {
  display: grid;
  gap: 7px;
}

#game-overlay #service-battle-container .service-battle-duel-score-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 8px;
  align-items: center;
}

#game-overlay #service-battle-container .service-battle-duel-player {
  min-width: 0;
  font-size: 0.76rem;
  font-weight: 800;
  color: rgba(19, 33, 61, 0.94);
}

#game-overlay #service-battle-container .service-battle-duel-player-line {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

#game-overlay #service-battle-container .service-battle-duel-reaction-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: 999px;
  border: 1px solid rgba(114, 166, 232, 0.22);
  background: rgba(255, 255, 255, 0.78);
  box-shadow: 0 8px 16px rgba(15, 23, 42, 0.08);
  font-size: 0.8rem;
}

#game-overlay #service-battle-container .service-battle-duel-hearts {
  font-size: 0.72rem;
  letter-spacing: 0.08em;
}

#game-overlay #service-battle-container .service-battle-duel-points {
  font-size: 0.74rem;
  font-weight: 900;
  color: rgba(25, 72, 133, 0.92);
}

#game-overlay #service-battle-container .service-battle-duel-sunk {
  display: grid;
  gap: 3px;
  padding: 6px 8px;
  border-radius: 10px;
  border: 1px solid rgba(120, 167, 226, 0.22);
  background: rgba(255, 255, 255, 0.65);
}

#game-overlay #service-battle-container .service-battle-duel-sunk strong {
  font-size: 0.68rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: rgba(38, 76, 129, 0.86);
}

#game-overlay #service-battle-container .service-battle-duel-sunk span {
  font-size: 0.72rem;
  color: rgba(42, 61, 94, 0.86);
}

#game-overlay #service-battle-container .service-battle-duel-turn {
  display: grid;
  gap: 4px;
}

#game-overlay #service-battle-container .service-battle-duel-turn-head {
  font-size: 0.72rem;
  font-weight: 900;
  color: rgba(22, 54, 103, 0.92);
}

#game-overlay #service-battle-container .service-battle-duel-turn-track {
  height: 6px;
  border-radius: 999px;
  background: rgba(148, 177, 216, 0.24);
  overflow: hidden;
}

#game-overlay #service-battle-container .service-battle-duel-turn-track span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(
    90deg,
    rgba(69, 188, 255, 0.94),
    rgba(94, 123, 255, 0.96)
  );
  transition: width 240ms linear;
}

#game-overlay #service-battle-container .service-battle-duel-feed {
  display: grid;
  gap: 4px;
  padding-top: 2px;
}

#game-overlay #service-battle-container .service-battle-duel-feed-head {
  font-size: 0.64rem;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(51, 85, 134, 0.8);
}

#game-overlay #service-battle-container .service-battle-duel-feed-item {
  display: grid;
  grid-template-columns: auto auto auto 1fr;
  gap: 6px;
  align-items: center;
  font-size: 0.71rem;
  color: rgba(36, 54, 86, 0.86);
}

#game-overlay
  #service-battle-container
  .service-battle-duel-feed-item.is-empty {
  grid-template-columns: 1fr;
  color: rgba(75, 92, 123, 0.68);
}

#game-overlay #service-battle-container .service-battle-duel-feed-actor {
  font-weight: 800;
}

#game-overlay #service-battle-container .service-battle-duel-feed-arrow {
  opacity: 0.7;
}

#game-overlay #service-battle-container .service-battle-duel-feed-cell {
  font-weight: 900;
  color: rgba(26, 66, 122, 0.92);
}

#game-overlay #service-battle-container .service-battle-duel-feed-result {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#game-overlay #service-battle-container .service-battle-duel-reactions {
  display: grid;
  gap: 6px;
}

#game-overlay #service-battle-container .service-battle-duel-reactions-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

#game-overlay #service-battle-container .service-battle-duel-reaction-btn {
  min-width: 42px;
  height: 32px;
  padding: 0 10px;
  border-radius: 11px;
  border: 1px solid rgba(118, 169, 231, 0.22);
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 8px 16px rgba(15, 23, 42, 0.06);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  transition:
    transform 160ms ease,
    border-color 160ms ease,
    box-shadow 160ms ease;
}

@media (hover: hover) {
  #game-overlay
    #service-battle-container
    .service-battle-duel-reaction-btn:hover:not(:disabled) {
    transform: translateY(-1px);
    border-color: rgba(80, 150, 235, 0.36);
    box-shadow: 0 12px 20px rgba(15, 23, 42, 0.1);
  }
}

#game-overlay
  #service-battle-container
  .service-battle-duel-reaction-btn.is-active {
  border-color: rgba(68, 169, 250, 0.44);
  background: linear-gradient(
    140deg,
    rgba(229, 246, 255, 0.98),
    rgba(239, 248, 255, 0.94)
  );
  box-shadow: 0 12px 20px rgba(52, 156, 244, 0.14);
}

#game-overlay
  #service-battle-container
  .service-battle-duel-reaction-btn:disabled {
  opacity: 0.46;
  cursor: default;
}

#game-overlay #service-battle-container .service-battle-duel-leave {
  min-width: 86px;
  padding: 9px 12px;
  border: 1px solid rgba(255, 147, 101, 0.28);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.82);
  color: rgba(139, 57, 24, 0.92);
  font-weight: 800;
  font-size: 0.75rem;
  cursor: pointer;
}

#game-overlay #service-battle-container .service-battle-duel-sheet-card {
  display: grid;
  gap: 12px;
}

#game-overlay #service-battle-container .service-battle-duel-stage {
  display: grid;
  gap: 12px;
}

#game-overlay #service-battle-container .service-battle-duel-banner {
  padding: 11px 12px;
  border-radius: 16px;
  border: 1px solid rgba(110, 162, 224, 0.16);
  background: rgba(235, 246, 255, 0.9);
  color: rgba(29, 71, 124, 0.92);
  font-size: 0.84rem;
  line-height: 1.35;
  font-weight: 700;
}

#game-overlay #service-battle-container .service-battle-duel-banner.is-success {
  border-color: rgba(70, 177, 120, 0.22);
  background: rgba(233, 252, 241, 0.92);
  color: rgba(17, 116, 56, 0.92);
}

#game-overlay #service-battle-container .service-battle-duel-banner.is-warn {
  border-color: rgba(255, 173, 88, 0.24);
  background: rgba(255, 245, 228, 0.94);
  color: rgba(143, 82, 14, 0.92);
}

#game-overlay #service-battle-container .service-battle-duel-state {
  display: grid;
  gap: 14px;
  animation: service-battle-duel-stage-in 320ms cubic-bezier(0.22, 1, 0.36, 1);
}

#game-overlay #service-battle-container .service-battle-duel-versus {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: 10px;
  align-items: center;
}

#game-overlay #service-battle-container .service-battle-duel-versus-badge {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 18px;
  border: 1px solid rgba(123, 171, 233, 0.18);
  background: linear-gradient(
    140deg,
    rgba(255, 255, 255, 0.96),
    rgba(236, 244, 255, 0.92)
  );
  color: rgba(33, 80, 145, 0.92);
  font-size: 0.9rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  box-shadow: 0 14px 24px rgba(15, 23, 42, 0.08);
}

#game-overlay
  #service-battle-container
  .service-battle-duel-versus-badge.is-pulse {
  animation: service-battle-duel-pulse 1.8s ease-in-out infinite;
}

#game-overlay
  #service-battle-container
  .service-battle-duel-versus-badge.is-hot {
  color: rgba(168, 82, 17, 0.94);
  background: linear-gradient(
    140deg,
    rgba(255, 247, 236, 0.98),
    rgba(255, 229, 199, 0.92)
  );
}

#game-overlay #service-battle-container .service-battle-duel-profile {
  display: grid;
  justify-items: center;
  gap: 8px;
  min-width: 0;
  padding: 14px 12px;
  border-radius: 22px;
  border: 1px solid rgba(118, 169, 231, 0.16);
  background:
    radial-gradient(
      220px 110px at 50% 0%,
      rgba(115, 215, 255, 0.1),
      transparent 72%
    ),
    linear-gradient(
      160deg,
      rgba(255, 255, 255, 0.96),
      rgba(242, 248, 255, 0.92)
    );
}

#game-overlay #service-battle-container .service-battle-duel-profile.is-self {
  box-shadow: 0 16px 28px rgba(72, 162, 255, 0.12);
}

#game-overlay
  #service-battle-container
  .service-battle-duel-profile.is-opponent {
  box-shadow: 0 16px 28px rgba(255, 171, 90, 0.1);
}

#game-overlay #service-battle-container .service-battle-duel-profile strong {
  font-size: 0.94rem;
  line-height: 1.15;
  font-weight: 900;
  color: rgba(17, 29, 52, 0.96);
  text-align: center;
}

#game-overlay #service-battle-container .service-battle-duel-profile-label {
  font-size: 0.64rem;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(67, 100, 148, 0.76);
}

#game-overlay #service-battle-container .service-battle-duel-avatar {
  position: relative;
  display: grid;
  place-items: center;
  width: 74px;
  height: 74px;
  border-radius: 24px;
  overflow: hidden;
  border: 1px solid rgba(118, 169, 231, 0.16);
  background: linear-gradient(
    140deg,
    rgba(85, 178, 255, 0.16),
    rgba(255, 187, 94, 0.18)
  );
  color: rgba(34, 70, 124, 0.92);
  font-size: 1rem;
  font-weight: 900;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72);
}

#game-overlay
  #service-battle-container
  .service-battle-duel-avatar.is-opponent {
  background: linear-gradient(
    140deg,
    rgba(255, 191, 124, 0.18),
    rgba(255, 142, 74, 0.2)
  );
}

#game-overlay #service-battle-container .service-battle-duel-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

#game-overlay #service-battle-container .service-battle-duel-waiting,
#game-overlay #service-battle-container .service-battle-duel-inline-call,
#game-overlay #service-battle-container .service-battle-duel-ready {
  display: grid;
  gap: 6px;
  padding: 14px 15px;
  border-radius: 20px;
  border: 1px solid rgba(118, 169, 231, 0.16);
  background: rgba(255, 255, 255, 0.84);
}

#game-overlay #service-battle-container .service-battle-duel-waiting strong,
#game-overlay #service-battle-container .service-battle-duel-inline-copy strong,
#game-overlay #service-battle-container .service-battle-duel-ready-copy strong {
  font-size: 0.92rem;
  line-height: 1.16;
  font-weight: 900;
  color: rgba(19, 31, 56, 0.96);
}

#game-overlay #service-battle-container .service-battle-duel-waiting span,
#game-overlay #service-battle-container .service-battle-duel-inline-copy span,
#game-overlay #service-battle-container .service-battle-duel-ready-copy span {
  font-size: 0.82rem;
  line-height: 1.4;
  color: rgba(60, 80, 114, 0.78);
}

#game-overlay #service-battle-container .service-battle-duel-ready {
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 14px;
}

#game-overlay #service-battle-container .service-battle-duel-ready-ring {
  display: grid;
  place-items: center;
  width: 86px;
  height: 86px;
  border-radius: 50%;
  border: 6px solid rgba(93, 168, 255, 0.14);
  background: radial-gradient(
    circle at 50% 38%,
    rgba(255, 255, 255, 0.96),
    rgba(235, 244, 255, 0.92)
  );
  color: rgba(33, 78, 145, 0.94);
  box-shadow: 0 18px 30px rgba(15, 23, 42, 0.1);
}

#game-overlay #service-battle-container .service-battle-duel-ready-ring span {
  font-size: 1.7rem;
  line-height: 1;
  font-weight: 900;
}

#game-overlay #service-battle-container .service-battle-duel-footer {
  display: flex;
  justify-content: center;
}

#game-overlay #service-battle-container .service-battle-duel-footer.is-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

#game-overlay #service-battle-container .service-battle-duel-list-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(52, 92, 146, 0.82);
}

#game-overlay #service-battle-container .service-battle-duel-incoming,
#game-overlay #service-battle-container .service-battle-duel-list {
  display: grid;
  gap: 10px;
}

#game-overlay #service-battle-container .service-battle-duel-user,
#game-overlay #service-battle-container .service-battle-duel-invite {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 12px;
  border-radius: 18px;
  border: 1px solid rgba(118, 169, 231, 0.16);
  background: rgba(255, 255, 255, 0.84);
}

#game-overlay #service-battle-container .service-battle-duel-user-main {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

#game-overlay #service-battle-container .service-battle-duel-user-copy,
#game-overlay #service-battle-container .service-battle-duel-invite-copy {
  display: grid;
  gap: 4px;
  min-width: 0;
}

#game-overlay #service-battle-container .service-battle-duel-user-copy strong,
#game-overlay
  #service-battle-container
  .service-battle-duel-invite-copy
  strong {
  font-size: 0.9rem;
  line-height: 1.2;
  color: rgba(15, 28, 49, 0.95);
}

#game-overlay #service-battle-container .service-battle-duel-user-copy span,
#game-overlay #service-battle-container .service-battle-duel-invite-copy span {
  font-size: 0.78rem;
  line-height: 1.3;
  color: rgba(67, 80, 106, 0.74);
}

#game-overlay #service-battle-container .service-battle-duel-user-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

#game-overlay #service-battle-container .service-battle-duel-presence-chip {
  display: inline-flex;
  align-items: center;
  min-height: 20px;
  padding: 0 8px;
  border-radius: 999px;
  border: 1px solid rgba(118, 169, 231, 0.24);
  background: rgba(232, 245, 255, 0.8);
  color: rgba(35, 83, 141, 0.9);
  font-size: 0.64rem;
  font-weight: 820;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

#game-overlay
  #service-battle-container
  .service-battle-duel-presence-chip.is-available {
  border-color: rgba(71, 195, 132, 0.34);
  background: rgba(227, 255, 241, 0.82);
  color: rgba(16, 119, 69, 0.92);
}

#game-overlay
  #service-battle-container
  .service-battle-duel-presence-chip.is-waiting {
  border-color: rgba(245, 171, 78, 0.34);
  background: rgba(255, 246, 230, 0.9);
  color: rgba(138, 84, 20, 0.9);
}

#game-overlay
  #service-battle-container
  .service-battle-duel-presence-chip.is-battle {
  border-color: rgba(236, 127, 90, 0.38);
  background: rgba(255, 235, 230, 0.86);
  color: rgba(140, 54, 24, 0.92);
}

#game-overlay #service-battle-container .service-battle-duel-invite-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}

#game-overlay #service-battle-container .service-battle-duel-action {
  min-width: 90px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(118, 169, 231, 0.18);
  background: rgba(255, 255, 255, 0.96);
  color: rgba(29, 71, 124, 0.92);
  font-size: 0.77rem;
  font-weight: 800;
  cursor: pointer;
}

#game-overlay #service-battle-container .service-battle-duel-action.is-primary {
  border-color: rgba(91, 179, 255, 0.22);
  background: linear-gradient(
    135deg,
    rgba(67, 205, 255, 0.14),
    rgba(99, 133, 255, 0.14)
  );
  color: rgba(16, 63, 123, 0.96);
}

#game-overlay #service-battle-container .service-battle-duel-action:disabled {
  opacity: 0.5;
  cursor: default;
}

#game-overlay #service-battle-container .service-battle-duel-empty {
  padding: 14px 12px;
  border-radius: 16px;
  border: 1px dashed rgba(120, 170, 228, 0.32);
  color: rgba(61, 77, 106, 0.7);
  font-size: 0.82rem;
  line-height: 1.35;
  text-align: center;
}

@keyframes service-battle-duel-pulse {
  0%,
  100% {
    transform: scale(1);
    box-shadow: 0 14px 24px rgba(15, 23, 42, 0.08);
  }
  50% {
    transform: scale(1.06);
    box-shadow: 0 18px 30px rgba(91, 160, 255, 0.16);
  }
}

@keyframes service-battle-duel-stage-in {
  0% {
    opacity: 0;
    transform: translateY(14px) scale(0.985);
    filter: blur(8px);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}

#game-overlay
  #service-battle-container[data-mode="online"]
  .service-battle-board-wrap {
  background:
    radial-gradient(
      220px 120px at 50% 0%,
      rgba(255, 180, 105, 0.18),
      transparent 72%
    ),
    linear-gradient(
      160deg,
      rgba(255, 255, 255, 0.98),
      rgba(247, 251, 255, 0.94)
    );
}

@media (max-width: 640px) {
  #game-overlay #service-battle-container .service-battle-duel-hud {
    grid-template-columns: 1fr auto;
    padding: 9px 10px;
  }

  #game-overlay #service-battle-container .service-battle-duel-chip {
    grid-column: 1 / -1;
    justify-self: start;
  }

  #game-overlay #service-battle-container .service-battle-duel-leave {
    min-width: 72px;
    padding: 8px 10px;
  }

  #game-overlay #service-battle-container .service-battle-duel-user,
  #game-overlay #service-battle-container .service-battle-duel-invite {
    grid-template-columns: 1fr;
  }

  #game-overlay #service-battle-container .service-battle-duel-versus {
    grid-template-columns: 1fr;
  }

  #game-overlay #service-battle-container .service-battle-duel-versus-badge {
    width: 44px;
    height: 44px;
    justify-self: center;
  }

  #game-overlay #service-battle-container .service-battle-duel-ready {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
  }

  #game-overlay #service-battle-container .service-battle-duel-ready-ring {
    width: 74px;
    height: 74px;
  }

  #game-overlay #service-battle-container .service-battle-duel-ready-ring span {
    font-size: 1.38rem;
  }

  #game-overlay #service-battle-container .service-battle-duel-action,
  #game-overlay #service-battle-container .service-battle-duel-invite-actions {
    width: 100%;
  }

  #game-overlay #service-battle-container .service-battle-duel-invite-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
}

body[data-theme="dark"]
  #game-overlay
  #service-battle-container
  .service-battle-duel-hud,
body[data-theme="dark"]
  #game-overlay
  #service-battle-container
  .service-battle-duel-user,
body[data-theme="dark"]
  #game-overlay
  #service-battle-container
  .service-battle-duel-invite,
body[data-theme="dark"]
  #game-overlay
  #service-battle-container
  .service-battle-duel-profile,
body[data-theme="dark"]
  #game-overlay
  #service-battle-container
  .service-battle-duel-waiting,
body[data-theme="dark"]
  #game-overlay
  #service-battle-container
  .service-battle-duel-inline-call,
body[data-theme="dark"]
  #game-overlay
  #service-battle-container
  .service-battle-duel-ready,
body[data-theme="dark"]
  #game-overlay
  #service-battle-container[data-mode="online"]
  .service-battle-board-wrap {
  border-color: rgba(166, 216, 255, 0.16);
  background:
    radial-gradient(
      220px 120px at 0% 0%,
      rgba(255, 150, 62, 0.12),
      transparent 72%
    ),
    linear-gradient(160deg, rgba(18, 24, 38, 0.96), rgba(11, 16, 27, 0.94));
}

body[data-theme="dark"]
  #game-overlay
  #service-battle-container
  .service-battle-duel-title,
body[data-theme="dark"]
  #game-overlay
  #service-battle-container
  .service-battle-duel-user-copy
  strong,
body[data-theme="dark"]
  #game-overlay
  #service-battle-container
  .service-battle-duel-invite-copy
  strong,
body[data-theme="dark"]
  #game-overlay
  #service-battle-container
  .service-battle-duel-profile
  strong,
body[data-theme="dark"]
  #game-overlay
  #service-battle-container
  .service-battle-duel-waiting
  strong,
body[data-theme="dark"]
  #game-overlay
  #service-battle-container
  .service-battle-duel-inline-copy
  strong,
body[data-theme="dark"]
  #game-overlay
  #service-battle-container
  .service-battle-duel-ready-copy
  strong {
  color: rgba(245, 248, 255, 0.96);
}

body[data-theme="dark"]
  #game-overlay
  #service-battle-container
  .service-battle-duel-meta,
body[data-theme="dark"]
  #game-overlay
  #service-battle-container
  .service-battle-duel-user-copy
  span,
body[data-theme="dark"]
  #game-overlay
  #service-battle-container
  .service-battle-duel-invite-copy
  span,
body[data-theme="dark"]
  #game-overlay
  #service-battle-container
  .service-battle-duel-empty,
body[data-theme="dark"]
  #game-overlay
  #service-battle-container
  .service-battle-duel-waiting
  span,
body[data-theme="dark"]
  #game-overlay
  #service-battle-container
  .service-battle-duel-inline-copy
  span,
body[data-theme="dark"]
  #game-overlay
  #service-battle-container
  .service-battle-duel-ready-copy
  span,
body[data-theme="dark"]
  #game-overlay
  #service-battle-container
  .service-battle-duel-profile-label,
body[data-theme="dark"]
  #game-overlay
  #service-battle-container
  .service-battle-duel-sunk
  span,
body[data-theme="dark"]
  #game-overlay
  #service-battle-container
  .service-battle-duel-feed-item {
  color: rgba(216, 228, 248, 0.76);
}

body[data-theme="dark"]
  #game-overlay
  #service-battle-container
  .service-battle-duel-player,
body[data-theme="dark"]
  #game-overlay
  #service-battle-container
  .service-battle-duel-points,
body[data-theme="dark"]
  #game-overlay
  #service-battle-container
  .service-battle-duel-turn-head,
body[data-theme="dark"]
  #game-overlay
  #service-battle-container
  .service-battle-duel-feed-cell,
body[data-theme="dark"]
  #game-overlay
  #service-battle-container
  .service-battle-duel-sunk
  strong,
body[data-theme="dark"]
  #game-overlay
  #service-battle-container
  .service-battle-duel-feed-head {
  color: rgba(235, 244, 255, 0.92);
}

body[data-theme="dark"]
  #game-overlay
  #service-battle-container
  .service-battle-duel-reaction-badge {
  border-color: rgba(166, 216, 255, 0.24);
  background: rgba(255, 255, 255, 0.08);
  box-shadow: none;
}

body[data-theme="dark"]
  #game-overlay
  #service-battle-container
  .service-battle-duel-sunk {
  border-color: rgba(166, 216, 255, 0.18);
  background: rgba(255, 255, 255, 0.04);
}

body[data-theme="dark"]
  #game-overlay
  #service-battle-container
  .service-battle-duel-turn-track {
  background: rgba(177, 205, 242, 0.2);
}

body[data-theme="dark"]
  #game-overlay
  #service-battle-container
  .service-battle-duel-action,
body[data-theme="dark"]
  #game-overlay
  #service-battle-container
  .service-battle-duel-leave {
  border-color: rgba(166, 216, 255, 0.14);
  background: rgba(255, 255, 255, 0.06);
  color: rgba(235, 244, 255, 0.94);
}

body[data-theme="dark"]
  #game-overlay
  #service-battle-container
  .service-battle-duel-reaction-btn {
  border-color: rgba(166, 216, 255, 0.16);
  background: rgba(255, 255, 255, 0.06);
  color: rgba(240, 247, 255, 0.96);
  box-shadow: none;
}

body[data-theme="dark"]
  #game-overlay
  #service-battle-container
  .service-battle-duel-reaction-btn.is-active {
  border-color: rgba(86, 198, 255, 0.42);
  background: linear-gradient(
    140deg,
    rgba(42, 86, 158, 0.34),
    rgba(28, 56, 118, 0.32)
  );
}

body[data-theme="dark"]
  #game-overlay
  #service-battle-container
  .service-battle-duel-presence-chip {
  border-color: rgba(166, 216, 255, 0.2);
  background: rgba(255, 255, 255, 0.08);
  color: rgba(226, 238, 255, 0.9);
}

body[data-theme="dark"]
  #game-overlay
  #service-battle-container
  .service-battle-duel-presence-chip.is-available {
  border-color: rgba(63, 206, 145, 0.4);
  background: rgba(28, 96, 64, 0.36);
  color: rgba(175, 250, 212, 0.92);
}

body[data-theme="dark"]
  #game-overlay
  #service-battle-container
  .service-battle-duel-presence-chip.is-waiting {
  border-color: rgba(255, 191, 98, 0.38);
  background: rgba(112, 78, 30, 0.34);
  color: rgba(255, 226, 177, 0.94);
}

body[data-theme="dark"]
  #game-overlay
  #service-battle-container
  .service-battle-duel-presence-chip.is-battle {
  border-color: rgba(255, 139, 107, 0.42);
  background: rgba(116, 50, 35, 0.34);
  color: rgba(255, 212, 198, 0.94);
}

body[data-theme="dark"]
  #game-overlay
  #service-battle-container
  .service-battle-duel-avatar {
  border-color: rgba(166, 216, 255, 0.14);
  background: linear-gradient(
    140deg,
    rgba(68, 118, 214, 0.24),
    rgba(26, 53, 111, 0.32)
  );
  color: rgba(240, 247, 255, 0.96);
}

body[data-theme="dark"]
  #game-overlay
  #service-battle-container
  .service-battle-duel-avatar.is-opponent {
  background: linear-gradient(
    140deg,
    rgba(148, 94, 34, 0.28),
    rgba(74, 42, 18, 0.34)
  );
}

body[data-theme="dark"]
  #game-overlay
  #service-battle-container
  .service-battle-duel-versus-badge,
body[data-theme="dark"]
  #game-overlay
  #service-battle-container
  .service-battle-duel-ready-ring {
  border-color: rgba(166, 216, 255, 0.14);
  background: linear-gradient(
    160deg,
    rgba(18, 24, 38, 0.96),
    rgba(11, 16, 27, 0.94)
  );
  color: rgba(240, 247, 255, 0.96);
}

/* ===== Service Battle Duel HUD refresh ===== */
#game-overlay
  #service-battle-container[data-mode="online"]
  .service-battle-stage {
  grid-template-rows: auto minmax(0, 1fr) auto;
}

#game-overlay
  #service-battle-container[data-mode="online"]
  .service-battle-stage-top {
  display: none;
}

#game-overlay #service-battle-container .service-battle-duel-layout {
  display: grid;
  gap: 9px;
}

#game-overlay #service-battle-container .service-battle-duel-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: 8px;
  align-items: center;
}

#game-overlay #service-battle-container .service-battle-duel-side {
  display: grid;
  gap: 4px;
  padding: 8px 9px;
  border-radius: 12px;
  border: 1px solid rgba(118, 169, 231, 0.2);
  background: rgba(255, 255, 255, 0.7);
}

#game-overlay #service-battle-container .service-battle-duel-side.is-self {
  box-shadow: 0 10px 18px rgba(52, 156, 244, 0.1);
}

#game-overlay #service-battle-container .service-battle-duel-side.is-foe {
  box-shadow: 0 10px 18px rgba(255, 158, 81, 0.08);
}

#game-overlay #service-battle-container .service-battle-duel-side-head {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
}

#game-overlay #service-battle-container .service-battle-duel-side-name {
  min-width: 0;
  font-size: 0.72rem;
  line-height: 1.2;
  font-weight: 900;
  color: rgba(16, 29, 52, 0.95);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#game-overlay #service-battle-container .service-battle-duel-side-stats {
  font-size: 0.66rem;
  line-height: 1.22;
  font-weight: 800;
  color: rgba(33, 63, 108, 0.84);
}

#game-overlay #service-battle-container .service-battle-duel-center {
  display: grid;
  gap: 5px;
  justify-items: center;
}

#game-overlay #service-battle-container .service-battle-duel-turn-main {
  font-size: 0.76rem;
  line-height: 1;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(20, 54, 103, 0.96);
}

#game-overlay #service-battle-container .service-battle-duel-turn-sub {
  font-size: 0.66rem;
  line-height: 1.2;
  color: rgba(45, 67, 99, 0.74);
  text-align: center;
  max-width: 180px;
}

#game-overlay #service-battle-container .service-battle-duel-timer-ring {
  --sb-ring-fill: calc(var(--sb-ring-pct, 0) * 1%);
  position: relative;
  width: 50px;
  height: 50px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: conic-gradient(
    rgba(74, 153, 255, 0.95) var(--sb-ring-fill),
    rgba(197, 212, 236, 0.3) 0
  );
  box-shadow: 0 12px 20px rgba(23, 67, 133, 0.12);
}

#game-overlay
  #service-battle-container
  .service-battle-duel-timer-ring::before {
  content: "";
  position: absolute;
  inset: 5px;
  border-radius: inherit;
  background: linear-gradient(
    150deg,
    rgba(255, 255, 255, 0.96),
    rgba(241, 248, 255, 0.92)
  );
}

#game-overlay #service-battle-container .service-battle-duel-timer-ring span {
  position: relative;
  z-index: 1;
  font-size: 0.76rem;
  font-weight: 900;
  color: rgba(18, 57, 110, 0.96);
}

#game-overlay #service-battle-container .service-battle-duel-phase-track {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 5px;
  width: min(100%, 300px);
}

#game-overlay #service-battle-container .service-battle-duel-phase-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 22px;
  border-radius: 999px;
  border: 1px solid rgba(118, 169, 231, 0.2);
  background: rgba(255, 255, 255, 0.62);
  color: rgba(50, 80, 120, 0.78);
  font-size: 0.59rem;
  font-weight: 860;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

#game-overlay
  #service-battle-container
  .service-battle-duel-phase-chip.is-done {
  border-color: rgba(86, 170, 252, 0.3);
  background: rgba(225, 243, 255, 0.84);
  color: rgba(20, 67, 129, 0.86);
}

#game-overlay
  #service-battle-container
  .service-battle-duel-phase-chip.is-active {
  border-color: rgba(66, 165, 248, 0.48);
  background: linear-gradient(
    130deg,
    rgba(198, 238, 255, 0.95),
    rgba(214, 229, 255, 0.92)
  );
  color: rgba(16, 57, 116, 0.96);
  box-shadow: 0 8px 14px rgba(58, 150, 240, 0.16);
}

#game-overlay #service-battle-container .service-battle-duel-last-line {
  padding: 7px 9px;
  border-radius: 10px;
  border: 1px solid rgba(120, 167, 226, 0.2);
  background: rgba(255, 255, 255, 0.66);
  font-size: 0.72rem;
  line-height: 1.24;
  font-weight: 780;
  color: rgba(27, 63, 113, 0.9);
}

#game-overlay #service-battle-container .service-battle-duel-fleet-panel {
  display: grid;
  gap: 6px;
  padding: 8px;
  border-radius: 12px;
  border: 1px solid rgba(118, 169, 231, 0.2);
  background: rgba(255, 255, 255, 0.72);
}

#game-overlay #service-battle-container .service-battle-duel-fleet-head {
  font-size: 0.66rem;
  font-weight: 900;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: rgba(34, 70, 124, 0.9);
}

#game-overlay #service-battle-container .service-battle-duel-fleet-grid {
  display: grid;
  gap: 5px;
}

#game-overlay #service-battle-container .service-battle-duel-fleet-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 7px;
  align-items: center;
}

#game-overlay
  #service-battle-container
  .service-battle-duel-fleet-row.is-active {
  animation: service-battle-fleet-hit-pulse 560ms ease-out;
}

#game-overlay #service-battle-container .service-battle-duel-fleet-label,
#game-overlay #service-battle-container .service-battle-duel-fleet-count {
  font-size: 0.66rem;
  font-weight: 820;
  color: rgba(30, 60, 106, 0.88);
}

#game-overlay #service-battle-container .service-battle-duel-fleet-track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: 4px;
}

#game-overlay #service-battle-container .service-battle-duel-fleet-seg {
  display: block;
  height: 8px;
  border-radius: 999px;
  border: 1px solid rgba(135, 173, 223, 0.26);
  background: rgba(255, 255, 255, 0.84);
}

#game-overlay #service-battle-container .service-battle-duel-fleet-seg.is-hit {
  border-color: rgba(255, 164, 92, 0.32);
  background: linear-gradient(
    90deg,
    rgba(255, 183, 109, 0.92),
    rgba(255, 128, 82, 0.9)
  );
}

#game-overlay #service-battle-container .service-battle-duel-fleet-empty {
  font-size: 0.68rem;
  color: rgba(66, 84, 114, 0.74);
}

#game-overlay #service-battle-container .service-battle-duel-reactions-row {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

#game-overlay
  #service-battle-container
  .service-battle-cell.is-unknown
  .service-battle-cell-badge {
  opacity: 0.8;
}

#game-overlay #service-battle-container .service-battle-cell.is-locked {
  opacity: 0.74;
  filter: saturate(0.72);
}

#game-overlay
  #service-battle-container
  .service-battle-cell.is-last-action-self {
  box-shadow:
    0 0 0 2px rgba(76, 190, 123, 0.38),
    0 18px 30px rgba(15, 23, 42, 0.12);
}

#game-overlay
  #service-battle-container
  .service-battle-cell.is-last-action-foe {
  box-shadow:
    0 0 0 2px rgba(255, 149, 92, 0.42),
    0 18px 30px rgba(15, 23, 42, 0.12);
}

#game-overlay #service-battle-container .service-battle-cell.is-last-action {
  animation: service-battle-cell-pulse 1.35s ease-in-out infinite;
}

@keyframes service-battle-fleet-hit-pulse {
  0% {
    transform: translateX(0);
  }
  30% {
    transform: translateX(2px);
  }
  60% {
    transform: translateX(-2px);
  }
  100% {
    transform: translateX(0);
  }
}

@keyframes service-battle-cell-pulse {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.04);
  }
}

#game-overlay #service-battle-container .service-battle-scenario {
  width: min(100%, 480px);
  max-height: min(84vh, 640px);
  gap: 10px;
  padding: 14px;
}

#game-overlay #service-battle-container .service-battle-answer {
  padding: 10px 11px;
  border-radius: 14px;
}

#game-overlay #service-battle-container .service-battle-answer-text {
  font-size: 0.92rem;
  line-height: 1.35;
}

@media (max-width: 640px) {
  #game-overlay #service-battle-container .service-battle-duel-hud {
    grid-template-columns: 1fr;
    gap: 7px;
  }

  #game-overlay #service-battle-container .service-battle-duel-leave {
    justify-self: stretch;
    width: 100%;
  }

  #game-overlay #service-battle-container .service-battle-duel-top {
    grid-template-columns: 1fr;
  }

  #game-overlay #service-battle-container .service-battle-duel-center {
    order: -1;
  }

  #game-overlay #service-battle-container .service-battle-duel-phase-track {
    width: 100%;
  }

  #game-overlay #service-battle-container .service-battle-duel-side {
    gap: 3px;
  }
}

body[data-theme="dark"]
  #game-overlay
  #service-battle-container
  .service-battle-duel-side,
body[data-theme="dark"]
  #game-overlay
  #service-battle-container
  .service-battle-duel-last-line,
body[data-theme="dark"]
  #game-overlay
  #service-battle-container
  .service-battle-duel-fleet-panel {
  border-color: rgba(166, 216, 255, 0.16);
  background: rgba(255, 255, 255, 0.06);
}

body[data-theme="dark"]
  #game-overlay
  #service-battle-container
  .service-battle-duel-side-name,
body[data-theme="dark"]
  #game-overlay
  #service-battle-container
  .service-battle-duel-turn-main,
body[data-theme="dark"]
  #game-overlay
  #service-battle-container
  .service-battle-duel-fleet-head {
  color: rgba(235, 244, 255, 0.94);
}

body[data-theme="dark"]
  #game-overlay
  #service-battle-container
  .service-battle-duel-side-stats,
body[data-theme="dark"]
  #game-overlay
  #service-battle-container
  .service-battle-duel-turn-sub,
body[data-theme="dark"]
  #game-overlay
  #service-battle-container
  .service-battle-duel-last-line,
body[data-theme="dark"]
  #game-overlay
  #service-battle-container
  .service-battle-duel-fleet-label,
body[data-theme="dark"]
  #game-overlay
  #service-battle-container
  .service-battle-duel-fleet-count,
body[data-theme="dark"]
  #game-overlay
  #service-battle-container
  .service-battle-duel-fleet-empty {
  color: rgba(217, 230, 250, 0.8);
}

body[data-theme="dark"]
  #game-overlay
  #service-battle-container
  .service-battle-duel-phase-chip {
  border-color: rgba(166, 216, 255, 0.2);
  background: rgba(255, 255, 255, 0.06);
  color: rgba(201, 221, 247, 0.76);
}

body[data-theme="dark"]
  #game-overlay
  #service-battle-container
  .service-battle-duel-phase-chip.is-done {
  border-color: rgba(96, 189, 255, 0.34);
  background: rgba(34, 82, 152, 0.34);
  color: rgba(217, 236, 255, 0.9);
}

body[data-theme="dark"]
  #game-overlay
  #service-battle-container
  .service-battle-duel-phase-chip.is-active {
  border-color: rgba(86, 198, 255, 0.46);
  background: linear-gradient(
    140deg,
    rgba(42, 86, 158, 0.42),
    rgba(28, 56, 118, 0.4)
  );
  color: rgba(236, 246, 255, 0.96);
}

body[data-theme="dark"]
  #game-overlay
  #service-battle-container
  .service-battle-duel-timer-ring::before {
  background: linear-gradient(
    160deg,
    rgba(18, 24, 38, 0.96),
    rgba(11, 16, 27, 0.94)
  );
}

body[data-theme="dark"]
  #game-overlay
  #service-battle-container
  .service-battle-duel-timer-ring
  span {
  color: rgba(240, 247, 255, 0.95);
}

/* ===== League PvP Battle Summary ===== */
.league-you-now-pvp {
  margin-top: 8px;
  padding: 9px 10px 10px;
  border-radius: 14px;
  border: 1px solid rgba(71, 188, 255, 0.24);
  background:
    radial-gradient(
      120% 120% at 0% 0%,
      rgba(92, 213, 255, 0.12),
      rgba(255, 255, 255, 0) 55%
    ),
    linear-gradient(
      145deg,
      rgba(239, 250, 255, 0.92),
      rgba(226, 244, 255, 0.86)
    );
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.46);
}
.league-you-now-pvp[data-tone="warm"] {
  border-color: rgba(45, 182, 255, 0.32);
  box-shadow:
    0 12px 26px rgba(70, 183, 255, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.5);
}
.league-you-now-pvp[data-tone="hot"] {
  border-color: rgba(18, 166, 255, 0.42);
  background:
    radial-gradient(
      120% 120% at 0% 0%,
      rgba(84, 211, 255, 0.18),
      rgba(255, 255, 255, 0) 56%
    ),
    linear-gradient(145deg, rgba(232, 247, 255, 0.96), rgba(195, 232, 255, 0.9));
  box-shadow:
    0 14px 28px rgba(52, 172, 255, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.54);
}
.league-you-now-pvp-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}
.league-you-now-pvp-kicker {
  font-size: 0.62rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(8, 68, 112, 0.8);
}
.league-you-now-pvp-note {
  font-size: 0.62rem;
  font-weight: 760;
  color: rgba(8, 18, 34, 0.58);
}
.league-you-now-pvp-grid {
  margin-top: 8px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.league-you-now-pvp-metric {
  display: grid;
  gap: 2px;
  padding: 7px 8px;
  border-radius: 11px;
  border: 1px solid rgba(90, 175, 235, 0.16);
  background: rgba(255, 255, 255, 0.52);
}
.league-you-now-pvp-metric span {
  font-size: 0.58rem;
  font-weight: 860;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(8, 18, 34, 0.52);
}
.league-you-now-pvp-metric strong {
  font-size: 0.82rem;
  font-weight: 900;
  color: rgba(7, 48, 84, 0.94);
}
@media (max-width: 640px) {
  .league-you-now-pvp-grid {
    gap: 6px;
  }
  .league-you-now-pvp-metric {
    padding: 6px 7px;
  }
  .league-you-now-pvp-note {
    font-size: 0.58rem;
  }
}
body[data-theme="dark"] .league-you-now-pvp {
  border-color: rgba(83, 190, 255, 0.22);
  background:
    radial-gradient(
      120% 120% at 0% 0%,
      rgba(53, 148, 255, 0.18),
      rgba(0, 0, 0, 0) 56%
    ),
    linear-gradient(145deg, rgba(16, 28, 46, 0.94), rgba(10, 20, 34, 0.9));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
body[data-theme="dark"] .league-you-now-pvp-kicker {
  color: rgba(166, 219, 255, 0.82);
}
body[data-theme="dark"] .league-you-now-pvp-note {
  color: rgba(219, 232, 255, 0.62);
}
body[data-theme="dark"] .league-you-now-pvp-metric {
  border-color: rgba(83, 190, 255, 0.14);
  background: rgba(255, 255, 255, 0.04);
}
body[data-theme="dark"] .league-you-now-pvp-metric span {
  color: rgba(219, 232, 255, 0.52);
}
body[data-theme="dark"] .league-you-now-pvp-metric strong {
  color: rgba(240, 247, 255, 0.96);
}

/* ===== Service Battle Global Invite ===== */
.service-battle-global-invite {
  position: fixed;
  z-index: 1200;
  left: 14px;
  right: 14px;
  bottom: calc(88px + env(safe-area-inset-bottom));
  display: grid;
  pointer-events: none;
}

.service-battle-global-invite[hidden] {
  display: none !important;
}

.service-battle-global-invite__card {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 14px;
  border-radius: 22px;
  border: 1px solid rgba(87, 169, 255, 0.22);
  background:
    radial-gradient(
      180px 90px at 0% 0%,
      rgba(95, 216, 255, 0.18),
      transparent 72%
    ),
    radial-gradient(
      180px 90px at 100% 0%,
      rgba(255, 182, 104, 0.16),
      transparent 72%
    ),
    linear-gradient(
      155deg,
      rgba(255, 255, 255, 0.98),
      rgba(241, 248, 255, 0.96)
    );
  box-shadow: 0 22px 36px rgba(15, 23, 42, 0.16);
  pointer-events: auto;
  animation: service-battle-global-invite-in 320ms
    cubic-bezier(0.22, 1, 0.36, 1);
}

.service-battle-global-invite__avatar {
  position: relative;
  overflow: hidden;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 17px;
  border: 1px solid rgba(255, 255, 255, 0.48);
  background: linear-gradient(
    145deg,
    rgba(79, 183, 255, 0.22),
    rgba(255, 190, 112, 0.22)
  );
  color: rgba(22, 68, 126, 0.94);
  font-size: 0.95rem;
  font-weight: 900;
  box-shadow: 0 12px 20px rgba(33, 95, 169, 0.22);
}

.service-battle-global-invite__avatar::after {
  content: "";
  position: absolute;
  inset: -35%;
  background: linear-gradient(
    120deg,
    rgba(255, 255, 255, 0),
    rgba(255, 255, 255, 0.42),
    rgba(255, 255, 255, 0)
  );
  transform: translateX(-110%) rotate(18deg);
  opacity: 0;
}

.service-battle-global-invite__avatar.has-photo {
  background: linear-gradient(
    145deg,
    rgba(255, 255, 255, 0.12),
    rgba(255, 255, 255, 0.04)
  );
}

.service-battle-global-invite__avatar.is-online {
  animation: service-battle-global-avatar-online 1.9s ease-in-out infinite;
}

.service-battle-global-invite__avatar.is-online::after {
  animation: service-battle-global-avatar-sheen 2.8s ease-in-out infinite;
}

.service-battle-global-invite__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

@keyframes service-battle-global-avatar-sheen {
  0%,
  100% {
    transform: translateX(-110%) rotate(18deg);
    opacity: 0;
  }
  18% {
    opacity: 1;
  }
  45% {
    transform: translateX(120%) rotate(18deg);
    opacity: 0;
  }
}

@keyframes service-battle-global-avatar-online {
  0%,
  100% {
    box-shadow:
      0 12px 20px rgba(33, 95, 169, 0.22),
      0 0 0 0 rgba(62, 193, 118, 0);
  }
  50% {
    box-shadow:
      0 14px 24px rgba(33, 95, 169, 0.28),
      0 0 0 8px rgba(62, 193, 118, 0.16);
  }
}

.service-battle-global-invite__copy {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.service-battle-global-invite__kicker {
  font-size: 0.62rem;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(54, 95, 152, 0.78);
}

.service-battle-global-invite__title {
  font-size: 0.92rem;
  line-height: 1.16;
  font-weight: 900;
  color: rgba(17, 29, 52, 0.96);
}

.service-battle-global-invite__meta {
  font-size: 0.78rem;
  line-height: 1.3;
  color: rgba(58, 80, 114, 0.78);
}

.service-battle-global-invite__timer {
  justify-self: start;
  margin-top: 2px;
  min-height: 24px;
  display: inline-flex;
  align-items: center;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid rgba(98, 165, 240, 0.18);
  background: rgba(255, 255, 255, 0.78);
  font-size: 0.68rem;
  font-weight: 860;
  letter-spacing: 0.08em;
  color: rgba(39, 76, 133, 0.9);
}

.service-battle-global-invite__actions {
  display: grid;
  grid-template-columns: auto auto;
  gap: 8px;
}

.service-battle-global-invite__btn {
  min-width: 86px;
  min-height: 40px;
  padding: 0 12px;
  border-radius: 14px;
  border: 1px solid rgba(118, 169, 231, 0.18);
  background: rgba(255, 255, 255, 0.9);
  color: rgba(29, 71, 124, 0.92);
  font-size: 0.77rem;
  font-weight: 800;
  cursor: pointer;
}

.service-battle-global-invite__btn.is-primary {
  border-color: rgba(91, 179, 255, 0.22);
  background: linear-gradient(
    135deg,
    rgba(67, 205, 255, 0.16),
    rgba(99, 133, 255, 0.16)
  );
  color: rgba(16, 63, 123, 0.96);
}

@keyframes service-battle-global-invite-in {
  0% {
    opacity: 0;
    transform: translateY(16px) scale(0.985);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@media (max-width: 640px) {
  .service-battle-global-invite {
    left: 10px;
    right: 10px;
    bottom: calc(84px + env(safe-area-inset-bottom));
  }

  .service-battle-global-invite__card {
    grid-template-columns: 1fr;
    padding: 12px;
    gap: 10px;
  }

  .service-battle-global-invite__avatar {
    width: 44px;
    height: 44px;
    border-radius: 14px;
  }

  .service-battle-global-invite__actions {
    grid-template-columns: 1fr 1fr;
  }

  .service-battle-global-invite__btn {
    min-width: 0;
  }
}

body[data-theme="dark"] .service-battle-global-invite__card {
  border-color: rgba(166, 216, 255, 0.16);
  background:
    radial-gradient(
      180px 90px at 0% 0%,
      rgba(61, 144, 255, 0.18),
      transparent 72%
    ),
    radial-gradient(
      180px 90px at 100% 0%,
      rgba(255, 167, 81, 0.14),
      transparent 72%
    ),
    linear-gradient(155deg, rgba(18, 24, 38, 0.96), rgba(11, 16, 27, 0.94));
  box-shadow: 0 24px 40px rgba(0, 0, 0, 0.3);
}

body[data-theme="dark"] .service-battle-global-invite__avatar {
  border-color: rgba(255, 255, 255, 0.16);
  background: linear-gradient(
    145deg,
    rgba(67, 127, 226, 0.28),
    rgba(90, 55, 17, 0.28)
  );
  color: rgba(240, 247, 255, 0.96);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.35);
}

body[data-theme="dark"] .service-battle-global-invite__kicker {
  color: rgba(166, 219, 255, 0.8);
}

body[data-theme="dark"] .service-battle-global-invite__title {
  color: rgba(245, 248, 255, 0.96);
}

body[data-theme="dark"] .service-battle-global-invite__meta {
  color: rgba(216, 228, 248, 0.76);
}

body[data-theme="dark"] .service-battle-global-invite__timer {
  border-color: rgba(166, 216, 255, 0.16);
  background: rgba(255, 255, 255, 0.06);
  color: rgba(225, 238, 255, 0.92);
}

body[data-theme="dark"] .service-battle-global-invite__btn {
  border-color: rgba(166, 216, 255, 0.14);
  background: rgba(255, 255, 255, 0.06);
  color: rgba(235, 244, 255, 0.94);
}

.quick-duel-global-invite {
  position: fixed;
  right: 18px;
  bottom: calc(84px + env(safe-area-inset-bottom, 0px));
  z-index: 2200;
  width: min(420px, calc(100vw - 24px));
}

.quick-duel-global-invite[hidden] {
  display: none !important;
}

.quick-duel-global-invite__card {
  display: grid;
  grid-template-columns: 68px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  padding: 16px 16px 14px;
  border-radius: 24px;
  border: 1px solid rgba(86, 201, 255, 0.24);
  background:
    radial-gradient(circle at top right, rgba(120, 216, 255, 0.22), transparent 42%),
    linear-gradient(160deg, rgba(250, 252, 255, 0.96), rgba(233, 242, 255, 0.96));
  box-shadow: 0 20px 60px rgba(16, 42, 74, 0.22);
  animation: quick-duel-invite-in 260ms ease-out;
}

.quick-duel-global-invite__avatar {
  width: 68px;
  height: 68px;
  border-radius: 20px;
  overflow: hidden;
  display: grid;
  place-items: center;
  background: linear-gradient(145deg, rgba(96, 205, 255, 0.2), rgba(142, 158, 255, 0.2));
  color: #20486f;
  font-weight: 800;
  font-size: 24px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.7);
}

.quick-duel-global-invite__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.quick-duel-global-invite__copy {
  min-width: 0;
}

.quick-duel-global-invite__kicker {
  font-size: 11px;
  line-height: 1;
  letter-spacing: 0.18em;
  font-weight: 800;
  color: #5683b4;
  margin-bottom: 8px;
}

.quick-duel-global-invite__title {
  font-size: 18px;
  line-height: 1.15;
  font-weight: 800;
  color: #173457;
  margin-bottom: 6px;
}

.quick-duel-global-invite__meta {
  font-size: 13px;
  line-height: 1.35;
  color: rgba(39, 72, 110, 0.82);
}

.quick-duel-global-invite__timer {
  margin-top: 8px;
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.76);
  border: 1px solid rgba(101, 178, 234, 0.2);
  color: #4e6b97;
  font-size: 12px;
  font-weight: 800;
}

.quick-duel-global-invite__actions {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.quick-duel-global-invite__btn {
  min-height: 42px;
  border-radius: 14px;
  border: 1px solid rgba(53, 100, 150, 0.16);
  background: rgba(255, 255, 255, 0.72);
  color: #27486f;
  font-weight: 700;
}

.quick-duel-global-invite__btn.is-primary {
  border-color: rgba(82, 201, 255, 0.36);
  background: linear-gradient(135deg, #68d4ff, #6d85ff);
  color: white;
  box-shadow: 0 10px 22px rgba(74, 143, 255, 0.28);
}

.quick-duel-room-modal {
  position: fixed;
  inset: 0;
  z-index: 2190;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(9, 18, 33, 0.46);
  backdrop-filter: blur(10px);
}

.quick-duel-room-modal[hidden] {
  display: none !important;
}

.quick-duel-room-modal__card {
  position: relative;
  width: min(540px, 100%);
  padding: 28px 24px 22px;
  border-radius: 28px;
  border: 1px solid rgba(105, 213, 255, 0.22);
  background:
    radial-gradient(circle at top right, rgba(114, 212, 255, 0.14), transparent 38%),
    linear-gradient(160deg, rgba(251, 253, 255, 0.98), rgba(237, 244, 255, 0.98));
  box-shadow: 0 24px 70px rgba(10, 30, 56, 0.24);
}

.quick-duel-room-modal.is-active-round .quick-duel-room-modal__card {
  width: min(620px, 100%);
}

.quick-duel-room-modal__close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(48, 79, 115, 0.18);
  background: rgba(255, 255, 255, 0.88);
  color: #27486f;
  font-size: 24px;
  line-height: 1;
}

.quick-duel-room-modal__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid rgba(106, 202, 255, 0.24);
  background: rgba(255, 255, 255, 0.74);
  color: #5683b4;
  font-size: 11px;
  line-height: 1;
  letter-spacing: 0.14em;
  font-weight: 800;
}

.quick-duel-room-modal__title {
  margin-top: 14px;
  font-size: 30px;
  line-height: 1.05;
  font-weight: 900;
  color: #173457;
}

.quick-duel-room-modal__meta {
  margin-top: 8px;
  font-size: 14px;
  line-height: 1.45;
  color: rgba(39, 72, 110, 0.78);
}

.quick-duel-room-modal__versus {
  margin-top: 22px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 56px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
}

.quick-duel-room-modal.is-active-round .quick-duel-room-modal__versus {
  display: none;
}

.quick-duel-room-modal__player {
  min-width: 0;
  padding: 16px 14px;
  border-radius: 22px;
  border: 1px solid rgba(117, 159, 206, 0.18);
  background: rgba(255, 255, 255, 0.74);
  text-align: center;
}

.quick-duel-room-modal__avatar {
  position: relative;
  width: 76px;
  height: 76px;
  margin: 0 auto 12px;
  border-radius: 24px;
  overflow: hidden;
  display: grid;
  place-items: center;
  background: linear-gradient(145deg, rgba(96, 205, 255, 0.2), rgba(142, 158, 255, 0.2));
  color: #20486f;
  font-size: 26px;
  font-weight: 800;
}

.quick-duel-room-modal__avatar.is-online::after {
  content: "";
  position: absolute;
  right: 7px;
  bottom: 7px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #2ad17f;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.88);
}

.quick-duel-room-modal__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.quick-duel-room-modal__player-name {
  font-size: 18px;
  line-height: 1.15;
  font-weight: 800;
  color: #173457;
}

.quick-duel-room-modal__player-state {
  margin-top: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  padding: 0 12px;
  border-radius: 999px;
  background: rgba(232, 240, 250, 0.92);
  color: #6b7e97;
  font-size: 12px;
  font-weight: 700;
}

.quick-duel-room-modal__player-state.is-ready {
  background: rgba(78, 219, 164, 0.16);
  color: #11845d;
}

.quick-duel-lobby__card {
  width: min(620px, 100%);
}

.quick-duel-lobby__list {
  margin-top: 20px;
  display: grid;
  gap: 12px;
}

.quick-duel-lobby__user {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  padding: 14px;
  border-radius: 20px;
  border: 1px solid rgba(117, 159, 206, 0.18);
  background: rgba(255, 255, 255, 0.76);
}

.quick-duel-lobby__user-main {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  min-width: 0;
}

.quick-duel-lobby__avatar {
  width: 58px;
  height: 58px;
  border-radius: 18px;
  overflow: hidden;
  display: grid;
  place-items: center;
  background: linear-gradient(145deg, rgba(96, 205, 255, 0.2), rgba(142, 158, 255, 0.2));
  color: #20486f;
  font-size: 20px;
  font-weight: 800;
}

.quick-duel-lobby__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.quick-duel-lobby__copy {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.quick-duel-lobby__name {
  font-size: 1rem;
  line-height: 1.2;
  font-weight: 800;
  color: #173457;
}

.quick-duel-lobby__meta {
  font-size: 0.82rem;
  line-height: 1.4;
  color: rgba(39, 72, 110, 0.72);
}

.quick-duel-lobby__empty {
  padding: 18px 16px;
  border-radius: 20px;
  border: 1px dashed rgba(117, 159, 206, 0.28);
  background: rgba(255, 255, 255, 0.64);
  color: rgba(39, 72, 110, 0.78);
  font-size: 0.9rem;
  line-height: 1.45;
}

.quick-duel-lobby__empty-actions {
  margin-top: 14px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.quick-duel-room-modal__vs {
  width: 56px;
  height: 56px;
  border-radius: 18px;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, #68d4ff, #6d85ff);
  color: white;
  font-size: 18px;
  font-weight: 900;
  letter-spacing: 0.08em;
  box-shadow: 0 14px 28px rgba(74, 143, 255, 0.22);
}

.quick-duel-room-modal__score {
  margin-top: 16px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: 10px;
  align-items: center;
}

.quick-duel-room-modal.is-active-round .quick-duel-room-modal__score {
  margin-top: 18px;
}

.quick-duel-room-modal__score-card {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 11px 12px;
  border-radius: 16px;
  border: 1px solid rgba(126, 181, 232, 0.2);
  background: rgba(249, 252, 255, 0.92);
  color: #506581;
  font-size: 12px;
  font-weight: 700;
}

.quick-duel-room-modal__score-card strong {
  color: #1a365d;
  font-size: 20px;
  line-height: 1;
  font-weight: 900;
}

.quick-duel-room-modal__score-sep {
  color: #7f92af;
  font-size: 18px;
  font-weight: 900;
}

.quick-duel-room-modal__round {
  margin-top: 16px;
}

.quick-duel-room-modal.is-active-round .quick-duel-room-modal__round {
  margin-top: 18px;
}

.quick-duel-room-modal__round-card {
  display: grid;
  gap: 12px;
  padding: 16px;
  border-radius: 22px;
  border: 1px solid rgba(126, 181, 232, 0.22);
  background:
    radial-gradient(circle at top right, rgba(116, 208, 255, 0.1), transparent 40%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(242, 247, 255, 0.94));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72);
}

.quick-duel-room-modal__round-card.is-resolved {
  border-color: rgba(102, 207, 166, 0.28);
  background:
    radial-gradient(circle at top right, rgba(101, 216, 169, 0.12), transparent 44%),
    linear-gradient(180deg, rgba(249, 255, 252, 0.98), rgba(239, 248, 255, 0.95));
}

.quick-duel-room-modal__round-card.is-finished {
  border-color: rgba(244, 189, 94, 0.28);
  background:
    radial-gradient(circle at top, rgba(255, 218, 143, 0.22), transparent 48%),
    linear-gradient(180deg, rgba(255, 252, 244, 0.98), rgba(245, 243, 255, 0.95));
}

.quick-duel-room-modal__round-badge {
  width: fit-content;
  min-height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  background: rgba(93, 131, 201, 0.12);
  color: #4f6a9a;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
}

.quick-duel-room-modal__round-title {
  color: #1d365c;
  font-size: 17px;
  line-height: 1.35;
  font-weight: 800;
}

.quick-duel-room-modal__round-timer {
  display: grid;
  gap: 8px;
}

.quick-duel-room-modal__round-timer-value {
  width: fit-content;
  min-height: 26px;
  padding: 0 10px;
  border-radius: 999px;
  background: rgba(91, 139, 217, 0.12);
  color: #49689a;
  font-size: 12px;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
}

.quick-duel-room-modal__round-progress {
  height: 8px;
  border-radius: 999px;
  background: rgba(210, 224, 243, 0.78);
  overflow: hidden;
}

.quick-duel-room-modal__round-progress span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #69d2ff, #78e3b1);
  transition: width 220ms linear;
}

.quick-duel-room-modal__options {
  display: grid;
  gap: 10px;
}

.quick-duel-room-modal__option {
  width: 100%;
  padding: 12px 14px;
  border-radius: 15px;
  border: 1px solid rgba(121, 171, 226, 0.22);
  background: rgba(255, 255, 255, 0.98);
  color: #31496d;
  font-size: 14px;
  font-weight: 700;
  text-align: left;
  transition: transform 140ms ease, border-color 140ms ease, box-shadow 140ms ease;
}

.quick-duel-room-modal__option:not(:disabled):active {
  transform: scale(0.99);
}

.quick-duel-room-modal__option.is-selected {
  border-color: rgba(82, 191, 255, 0.46);
  background: linear-gradient(180deg, rgba(232, 249, 255, 0.98), rgba(248, 252, 255, 0.98));
  box-shadow: 0 12px 28px rgba(77, 170, 244, 0.16);
}

.quick-duel-room-modal__option.is-correct {
  border-color: rgba(71, 199, 133, 0.5);
  background: linear-gradient(180deg, rgba(232, 255, 242, 0.98), rgba(246, 255, 250, 0.98));
  color: #166b48;
  box-shadow: 0 12px 28px rgba(54, 177, 116, 0.16);
}

.quick-duel-room-modal__option.is-wrong {
  border-color: rgba(236, 110, 110, 0.42);
  background: linear-gradient(180deg, rgba(255, 239, 239, 0.98), rgba(255, 248, 248, 0.98));
  color: #8f3030;
  box-shadow: 0 12px 28px rgba(214, 104, 104, 0.12);
}

.quick-duel-room-modal__option.is-reveal-correct {
  border-color: rgba(104, 191, 136, 0.3);
  background: linear-gradient(180deg, rgba(243, 255, 248, 0.98), rgba(250, 255, 252, 0.98));
  color: #3a7557;
}

.quick-duel-room-modal__option:disabled {
  opacity: 0.82;
  cursor: default;
}

.quick-duel-room-modal__round-note {
  color: #586a87;
  font-size: 13px;
  line-height: 1.5;
}

.quick-duel-room-modal__status {
  margin-top: 18px;
  padding: 14px 16px;
  border-radius: 18px;
  border: 1px solid rgba(120, 198, 255, 0.2);
  background: rgba(240, 247, 255, 0.94);
  color: #385a82;
  font-size: 14px;
  line-height: 1.5;
  text-align: center;
}

.quick-duel-room-modal.is-active-round .quick-duel-room-modal__status {
  display: none;
}

.quick-duel-room-modal__actions {
  margin-top: 18px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.quick-duel-room-modal.is-active-round .quick-duel-room-modal__actions {
  display: none;
}

.quick-duel-room-modal__btn {
  min-height: 48px;
  border-radius: 16px;
  border: 1px solid rgba(53, 100, 150, 0.16);
  background: rgba(255, 255, 255, 0.72);
  color: #27486f;
  font-size: 15px;
  font-weight: 800;
}

.quick-duel-room-modal__btn.is-primary {
  border-color: rgba(82, 201, 255, 0.36);
  background: linear-gradient(135deg, #68d4ff, #6d85ff);
  color: white;
  box-shadow: 0 10px 22px rgba(74, 143, 255, 0.28);
}

.quick-duel-match-found {
  position: fixed;
  inset: 0;
  z-index: 2210;
  display: grid;
  place-items: center;
  padding: 20px;
  background:
    radial-gradient(circle at top, rgba(107, 211, 255, 0.22), transparent 42%),
    rgba(8, 16, 30, 0.58);
  backdrop-filter: blur(14px);
}

.quick-duel-match-found[hidden] {
  display: none !important;
}

.quick-duel-match-found__stage {
  width: min(560px, 100%);
  display: grid;
  gap: 16px;
  padding: 28px 24px;
  border-radius: 30px;
  border: 1px solid rgba(109, 208, 255, 0.24);
  background:
    radial-gradient(circle at top right, rgba(120, 219, 255, 0.2), transparent 38%),
    linear-gradient(160deg, rgba(251, 253, 255, 0.97), rgba(235, 244, 255, 0.96));
  box-shadow: 0 32px 90px rgba(10, 28, 52, 0.28);
  animation: quick-duel-invite-in 240ms ease-out;
}

.quick-duel-match-found__badge {
  width: fit-content;
  min-height: 30px;
  padding: 0 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.78);
  border: 1px solid rgba(101, 182, 235, 0.22);
  color: #5d7fb1;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.18em;
  display: inline-flex;
  align-items: center;
  text-transform: uppercase;
}

.quick-duel-match-found__title {
  color: #18375f;
  font-size: 34px;
  line-height: 1;
  font-weight: 900;
}

.quick-duel-match-found__versus {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: 16px;
  align-items: center;
}

.quick-duel-match-found__player {
  min-width: 0;
  display: grid;
  justify-items: center;
  gap: 10px;
  padding: 18px 14px;
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(124, 182, 230, 0.18);
}

.quick-duel-match-found__avatar {
  width: 88px;
  height: 88px;
  border-radius: 26px;
  overflow: hidden;
  display: grid;
  place-items: center;
  background: linear-gradient(145deg, rgba(96, 205, 255, 0.2), rgba(142, 158, 255, 0.2));
  color: #20486f;
  font-size: 28px;
  font-weight: 800;
}

.quick-duel-match-found__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.quick-duel-match-found__name {
  color: #18375f;
  font-size: 19px;
  line-height: 1.15;
  font-weight: 800;
  text-align: center;
}

.quick-duel-match-found__vs {
  width: 62px;
  height: 62px;
  border-radius: 20px;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, #68d4ff, #6d85ff);
  color: white;
  font-size: 22px;
  font-weight: 900;
  box-shadow: 0 16px 32px rgba(74, 143, 255, 0.24);
}

.quick-duel-match-found__caption {
  color: #577097;
  font-size: 14px;
  line-height: 1.45;
  text-align: center;
}

.quick-duel-match-found--prep .quick-duel-match-found__stage {
  background:
    radial-gradient(circle at top right, rgba(255, 214, 110, 0.22), transparent 38%),
    linear-gradient(160deg, rgba(255, 252, 245, 0.98), rgba(245, 239, 226, 0.96));
  border-color: rgba(232, 182, 86, 0.24);
}

.quick-duel-match-found__countdown {
  min-height: 120px;
  display: grid;
  place-items: center;
  color: #c8891e;
  font-size: 72px;
  line-height: 1;
  font-weight: 900;
  letter-spacing: -0.04em;
  text-shadow: 0 12px 30px rgba(232, 182, 86, 0.28);
}

.quick-duel-round-resolved,
.quick-duel-final-result {
  position: fixed;
  inset: 0;
  z-index: 2210;
  display: grid;
  place-items: center;
  padding: 20px;
  backdrop-filter: blur(14px);
}

.quick-duel-round-resolved {
  background:
    radial-gradient(circle at top, rgba(92, 217, 188, 0.24), transparent 40%),
    rgba(7, 18, 28, 0.54);
}

.quick-duel-final-result {
  background:
    radial-gradient(circle at top, rgba(255, 212, 110, 0.24), transparent 42%),
    rgba(11, 16, 32, 0.62);
}

.quick-duel-round-resolved[hidden],
.quick-duel-final-result[hidden] {
  display: none !important;
}

.quick-duel-round-resolved__stage,
.quick-duel-final-result__stage {
  width: min(560px, 100%);
  display: grid;
  gap: 14px;
  padding: 28px 24px;
  border-radius: 30px;
  box-shadow: 0 32px 90px rgba(10, 28, 52, 0.28);
  animation: quick-duel-invite-in 240ms ease-out;
}

.quick-duel-round-resolved__stage {
  border: 1px solid rgba(107, 226, 193, 0.26);
  background:
    radial-gradient(circle at top right, rgba(130, 240, 210, 0.22), transparent 38%),
    linear-gradient(160deg, rgba(248, 255, 252, 0.97), rgba(235, 249, 245, 0.96));
}

.quick-duel-round-resolved__stage.is-loss {
  border-color: rgba(241, 140, 140, 0.28);
  background:
    radial-gradient(circle at top right, rgba(255, 183, 183, 0.24), transparent 38%),
    linear-gradient(160deg, rgba(255, 249, 249, 0.98), rgba(255, 240, 240, 0.96));
}

.quick-duel-round-resolved__stage.is-draw {
  border-color: rgba(134, 166, 216, 0.26);
  background:
    radial-gradient(circle at top right, rgba(174, 202, 246, 0.22), transparent 38%),
    linear-gradient(160deg, rgba(248, 252, 255, 0.98), rgba(238, 244, 255, 0.96));
}

.quick-duel-final-result__stage {
  border: 1px solid rgba(244, 198, 96, 0.26);
  background:
    radial-gradient(circle at top right, rgba(255, 222, 140, 0.22), transparent 38%),
    linear-gradient(160deg, rgba(255, 253, 245, 0.98), rgba(247, 241, 255, 0.96));
}

.quick-duel-round-resolved__badge,
.quick-duel-final-result__badge {
  width: fit-content;
  min-height: 30px;
  padding: 0 12px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.18em;
  display: inline-flex;
  align-items: center;
  text-transform: uppercase;
  background: rgba(255, 255, 255, 0.78);
}

.quick-duel-round-resolved__badge {
  border: 1px solid rgba(103, 209, 174, 0.24);
  color: #3c9173;
}

.quick-duel-round-resolved__stage.is-loss .quick-duel-round-resolved__badge {
  border-color: rgba(232, 122, 122, 0.24);
  color: #a34848;
}

.quick-duel-round-resolved__stage.is-draw .quick-duel-round-resolved__badge {
  border-color: rgba(130, 160, 214, 0.24);
  color: #5572a2;
}

.quick-duel-round-resolved__icon {
  width: 76px;
  height: 76px;
  border-radius: 24px;
  display: grid;
  place-items: center;
  font-size: 34px;
  line-height: 1;
  font-weight: 900;
  color: #1c6d55;
  background: rgba(255, 255, 255, 0.76);
  border: 1px solid rgba(103, 209, 174, 0.22);
  box-shadow: 0 18px 42px rgba(56, 145, 115, 0.14);
}

.quick-duel-round-resolved__stage.is-loss .quick-duel-round-resolved__icon {
  color: #a53f3f;
  border-color: rgba(232, 122, 122, 0.24);
  box-shadow: 0 18px 42px rgba(196, 103, 103, 0.12);
}

.quick-duel-round-resolved__stage.is-draw .quick-duel-round-resolved__icon {
  color: #4a689c;
  border-color: rgba(130, 160, 214, 0.24);
  box-shadow: 0 18px 42px rgba(110, 143, 196, 0.12);
}

.quick-duel-final-result__badge {
  border: 1px solid rgba(237, 193, 84, 0.26);
  color: #9a6c14;
}

.quick-duel-round-resolved__title,
.quick-duel-final-result__title {
  font-size: 34px;
  line-height: 1;
  font-weight: 900;
}

.quick-duel-round-resolved__title {
  color: #174a3b;
}

.quick-duel-round-resolved__stage.is-loss .quick-duel-round-resolved__title {
  color: #7f2f2f;
}

.quick-duel-round-resolved__stage.is-draw .quick-duel-round-resolved__title {
  color: #35517f;
}

.quick-duel-final-result__title {
  color: #5a3d08;
}

.quick-duel-round-resolved__caption,
.quick-duel-final-result__caption {
  font-size: 15px;
  line-height: 1.5;
}

.quick-duel-round-resolved__caption {
  color: #4d7467;
}

.quick-duel-round-resolved__stage.is-loss .quick-duel-round-resolved__caption {
  color: #835d5d;
}

.quick-duel-round-resolved__stage.is-draw .quick-duel-round-resolved__caption {
  color: #5a6f91;
}

.quick-duel-final-result__caption {
  color: #7a6434;
}

.quick-duel-round-resolved__score,
.quick-duel-final-result__score {
  min-height: 64px;
  padding: 18px 20px;
  border-radius: 22px;
  display: grid;
  place-items: center;
  font-size: 24px;
  line-height: 1.1;
  font-weight: 900;
  text-align: center;
}

.quick-duel-round-resolved__score {
  border: 1px solid rgba(90, 194, 160, 0.2);
  background: rgba(255, 255, 255, 0.72);
  color: #1f4e42;
}

.quick-duel-round-resolved__stage.is-loss .quick-duel-round-resolved__score {
  border-color: rgba(232, 122, 122, 0.2);
  color: #6f3030;
}

.quick-duel-round-resolved__stage.is-draw .quick-duel-round-resolved__score {
  border-color: rgba(130, 160, 214, 0.2);
  color: #35517f;
}

.quick-duel-final-result__score {
  border: 1px solid rgba(229, 188, 93, 0.24);
  background: rgba(255, 252, 241, 0.82);
  color: #7a5610;
}

@keyframes quick-duel-invite-in {
  from {
    opacity: 0;
    transform: translateY(18px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@media (max-width: 640px) {
  .quick-duel-global-invite {
    right: 12px;
    left: 12px;
    width: auto;
    bottom: calc(82px + env(safe-area-inset-bottom, 0px));
  }

  .quick-duel-room-modal {
    padding: 14px;
  }

  .quick-duel-room-modal__card {
    padding: 24px 16px 18px;
  }

  .quick-duel-room-modal__title {
    font-size: 26px;
  }

  .quick-duel-match-found__title {
    font-size: 28px;
  }

  .quick-duel-round-resolved__title,
  .quick-duel-final-result__title {
    font-size: 28px;
  }

  .quick-duel-room-modal__versus {
    grid-template-columns: 1fr;
  }

  .quick-duel-match-found__versus {
    grid-template-columns: 1fr;
  }

  .quick-duel-room-modal__vs {
    margin: 0 auto;
  }

  .quick-duel-match-found__vs {
    margin: 0 auto;
  }

  .quick-duel-room-modal__score-card strong {
    font-size: 18px;
  }

  .quick-duel-room-modal__round-title {
    font-size: 16px;
  }

  .quick-duel-lobby__user {
    grid-template-columns: 1fr;
  }
}

/* ===== Service Battle Compact Mobile ===== */
@media (max-width: 640px) {
  #game-overlay #service-battle-container .game-meta {
    gap: 4px;
    margin-bottom: 0;
  }

  #game-overlay #service-battle-container .game-round {
    min-height: 34px;
    padding: 0 12px;
    border-radius: 14px;
    font-size: 0.82rem;
  }

  #game-overlay #service-battle-container .game-progress {
    height: 10px;
    border-radius: 999px;
  }

  #game-overlay #service-battle-container .game-topbar {
    gap: 8px;
  }

  #game-overlay #service-battle-container .game-back {
    min-height: 40px;
    padding: 0 14px;
    border-radius: 14px;
    font-size: 0.84rem;
  }

  #game-overlay #service-battle-container .game-title {
    font-size: 0.98rem;
    line-height: 1.05;
  }

  #game-overlay #service-battle-container .service-battle-topbar-actions {
    gap: 5px;
  }

  #game-overlay #service-battle-container .game-meta {
    gap: 5px;
  }

  #game-overlay #service-battle-container .game-body {
    padding: 6px 8px calc(10px + env(safe-area-inset-bottom));
  }

  #game-overlay #service-battle-container .service-battle-stage {
    gap: 6px;
  }

  #game-overlay #service-battle-container .service-battle-stage-top {
    gap: 6px;
  }

  #game-overlay #service-battle-container .service-battle-stage-copy {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 7px;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    border-radius: 0;
  }

  #game-overlay #service-battle-container .service-battle-kicker {
    min-height: 22px;
    padding: 0 8px;
    border-radius: 999px;
    font-size: 0.54rem;
    letter-spacing: 0.12em;
  }

  #game-overlay #service-battle-container .service-battle-status {
    font-size: 0.74rem;
    line-height: 1.2;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  #game-overlay #service-battle-container .service-battle-stats {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 5px;
  }

  #game-overlay #service-battle-container .service-battle-stat {
    min-height: 36px;
    padding: 6px 4px;
    gap: 4px;
    justify-content: center;
    border-radius: 12px;
  }

  #game-overlay #service-battle-container .service-battle-stat-icon {
    width: 20px;
    height: 20px;
    border-radius: 7px;
    font-size: 0.7rem;
  }

  #game-overlay #service-battle-container .service-battle-stat-copy {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    min-width: 0;
  }

  #game-overlay #service-battle-container .service-battle-stat-label {
    display: none;
  }

  #game-overlay #service-battle-container .service-battle-stat-value {
    font-size: 0.82rem;
    line-height: 1;
  }

  #game-overlay #service-battle-container .service-battle-duel-hud {
    grid-template-columns: 1fr auto;
    gap: 7px;
    padding: 8px 9px;
    border-radius: 14px;
  }

  #game-overlay #service-battle-container .service-battle-duel-chip {
    display: none;
  }

  #game-overlay #service-battle-container .service-battle-duel-copy {
    gap: 2px;
  }

  #game-overlay #service-battle-container .service-battle-duel-title {
    font-size: 0.78rem;
    line-height: 1.1;
  }

  #game-overlay #service-battle-container .service-battle-duel-meta {
    font-size: 0.66rem;
    line-height: 1.2;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
  }

  #game-overlay #service-battle-container .service-battle-duel-score-row {
    gap: 6px;
  }

  #game-overlay #service-battle-container .service-battle-duel-hearts {
    font-size: 0.66rem;
    letter-spacing: 0.06em;
  }

  #game-overlay #service-battle-container .service-battle-duel-feed-item {
    font-size: 0.65rem;
    gap: 4px;
  }

  #game-overlay #service-battle-container .service-battle-duel-reaction-btn {
    min-width: 38px;
    height: 30px;
    padding: 0 8px;
    border-radius: 10px;
    font-size: 0.92rem;
  }

  #game-overlay #service-battle-container .service-battle-duel-leave {
    min-width: 62px;
    padding: 7px 8px;
    border-radius: 11px;
    font-size: 0.68rem;
  }

  #game-overlay #service-battle-container .service-battle-board-wrap {
    padding: 3px;
    border-radius: 20px;
  }

  #game-overlay #service-battle-container .service-battle-board {
    width: min(100%, 344px, calc(100dvh - 272px));
    padding: 5px;
    gap: 4px;
  }

  #game-overlay #service-battle-container .service-battle-cell {
    border-radius: 14px;
  }

  #game-overlay #service-battle-container .service-battle-cell-coord {
    top: 6px;
    left: 7px;
    font-size: 0.52rem;
  }

  #game-overlay #service-battle-container .service-battle-cell-badge {
    font-size: 0.96rem;
  }

  #game-overlay
    #service-battle-container
    .service-battle-actions
    .game-secondary {
    min-height: 38px;
    padding: 0 12px;
    border-radius: 14px;
    font-size: 0.84rem;
  }

  #game-overlay #service-battle-container .service-battle-actions {
    bottom: calc(1px + env(safe-area-inset-bottom));
    padding-top: 4px;
  }
}

@media (max-width: 640px) and (max-height: 760px) {
  #game-overlay #service-battle-container .game-back,
  #game-overlay #service-battle-container .service-battle-icon-btn,
  #game-overlay #service-battle-container .game-close {
    min-height: 36px;
    height: 36px;
  }

  #game-overlay #service-battle-container .game-title {
    font-size: 0.88rem;
  }

  #game-overlay #service-battle-container .game-round {
    min-height: 30px;
    padding: 0 10px;
    font-size: 0.76rem;
  }

  #game-overlay #service-battle-container .game-progress {
    height: 8px;
  }

  #game-overlay #service-battle-container .game-body {
    padding: 4px 7px calc(8px + env(safe-area-inset-bottom));
  }

  #game-overlay #service-battle-container .service-battle-status {
    font-size: 0.68rem;
  }

  #game-overlay #service-battle-container .service-battle-stats {
    gap: 4px;
  }

  #game-overlay #service-battle-container .service-battle-stat {
    min-height: 32px;
    padding: 5px 4px;
  }

  #game-overlay #service-battle-container .service-battle-stat-icon {
    width: 18px;
    height: 18px;
    font-size: 0.64rem;
  }

  #game-overlay #service-battle-container .service-battle-stat-value {
    font-size: 0.76rem;
  }

  #game-overlay #service-battle-container .service-battle-duel-hud {
    gap: 6px;
    padding: 6px 7px;
  }

  #game-overlay #service-battle-container .service-battle-duel-title {
    font-size: 0.72rem;
  }

  #game-overlay #service-battle-container .service-battle-duel-meta {
    font-size: 0.62rem;
    line-height: 1.15;
  }

  #game-overlay #service-battle-container .service-battle-duel-feed-item {
    font-size: 0.6rem;
  }

  #game-overlay #service-battle-container .service-battle-board {
    width: min(100%, 316px, calc(100dvh - 236px));
    padding: 3px;
    gap: 4px;
  }

  #game-overlay #service-battle-container .service-battle-cell-badge {
    font-size: 0.88rem;
  }

  #game-overlay
    #service-battle-container
    .service-battle-actions
    .game-secondary {
    min-height: 34px;
    padding: 0 10px;
    font-size: 0.8rem;
  }

  #game-overlay #service-battle-container .service-battle-actions {
    padding-top: 2px;
  }
}

/* Hero card style for League section */
#leaderboard-top-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  padding: 16px 14px 14px;
  border-radius: 20px;
  border: 1px solid rgba(109, 199, 255, 0.34);
  background:
    radial-gradient(
      130% 115% at 8% -8%,
      rgba(0, 204, 255, 0.24),
      rgba(0, 0, 0, 0) 56%
    ),
    radial-gradient(
      92% 78% at 96% 0%,
      rgba(255, 193, 96, 0.22),
      rgba(0, 0, 0, 0) 65%
    ),
    radial-gradient(
      110% 120% at 50% 100%,
      rgba(19, 49, 120, 0.28),
      rgba(0, 0, 0, 0) 70%
    ),
    linear-gradient(180deg, rgba(4, 20, 58, 0.98), rgba(2, 14, 44, 0.985));
  box-shadow:
    0 24px 54px rgba(2, 12, 34, 0.54),
    inset 0 1px 0 rgba(190, 236, 255, 0.16);
}
#leaderboard-top-card::before {
  display: none;
}
#leaderboard-top-card::after {
  display: none;
}
#leaderboard-top-card > .leaderboard-top-switch {
  display: none !important;
}
#leaderboard-top-card .leaderboard-hero-header {
  width: 100%;
  display: grid;
  gap: 10px;
}
#leaderboard-top-card .leaderboard-top-header-row {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
}
#leaderboard-top-card .leaderboard-top-title {
  font-size: 0.9rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 221, 154, 0.96);
}
#leaderboard-top-card .league-mode-chip--hero {
  display: none;
}
#leaderboard-top-card .leaderboard-top-headline {
  display: grid;
  grid-template-columns: 176px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
}
#leaderboard-top-card .leaderboard-top-avatar-shell {
  width: 176px;
  height: 176px;
  margin-top: 0;
  overflow: visible;
}
#leaderboard-top-card .leaderboard-top-avatar-glow {
  inset: 12px;
  border-radius: 42px;
  background: radial-gradient(
    circle at 50% 68%,
    rgba(113, 244, 255, 0.52),
    rgba(113, 244, 255, 0) 62%
  );
  filter: blur(16px);
  opacity: 0.88;
  animation: leaderboardHeroGlowPulse 4.2s ease-in-out infinite;
}
#leaderboard-top-card .leaderboard-top-avatar-ring {
  inset: 4px;
  border-radius: 42px;
  background: linear-gradient(
    150deg,
    rgba(255, 220, 142, 0.98),
    rgba(118, 237, 255, 0.95)
  );
  box-shadow:
    0 14px 30px rgba(0, 0, 0, 0.34),
    0 0 0 1px rgba(212, 250, 255, 0.25);
  animation: leaderboardHeroRingPulse 4.2s ease-in-out infinite;
}
#leaderboard-top-card .leaderboard-top-crown {
  position: absolute;
  top: -12px;
  left: -12px;
  transform: none;
  z-index: 6;
  min-width: 126px;
  min-height: 46px;
  padding: 0 15px 0 12px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid rgba(255, 227, 165, 0.92);
  background: linear-gradient(
    140deg,
    rgba(255, 242, 192, 0.99),
    rgba(255, 194, 82, 0.98)
  );
  box-shadow:
    0 16px 24px rgba(0, 0, 0, 0.38),
    0 0 0 2px rgba(7, 34, 86, 0.46);
  animation:
    leaderboardHeroCrownFloat 2.8s ease-in-out infinite,
    leaderboardHeroCrownPulse 4.2s ease-in-out infinite;
}
#leaderboard-top-card .leaderboard-top-crown::before {
  content: "";
  position: absolute;
  inset: -8px;
  border-radius: 999px;
  z-index: -1;
  background: radial-gradient(
    circle at 34% 40%,
    rgba(255, 224, 130, 0.52),
    rgba(255, 224, 130, 0) 72%
  );
  filter: blur(6px);
}
#leaderboard-top-card .leaderboard-top-crown::after {
  content: "";
  position: absolute;
  right: 10px;
  top: 6px;
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: radial-gradient(
    circle,
    rgba(255, 255, 255, 0.95) 0%,
    rgba(255, 245, 190, 0.88) 40%,
    rgba(255, 245, 190, 0) 74%
  );
  box-shadow: 0 0 12px rgba(255, 235, 167, 0.9);
  animation: leaderboardHeroSparkle 2.4s ease-in-out infinite;
}
#leaderboard-top-card .leaderboard-top-crown-icon {
  font-size: 1.62rem;
  line-height: 1;
  filter: drop-shadow(0 2px 1px rgba(120, 72, 0, 0.35));
}
#leaderboard-top-card .leaderboard-top-crown-text {
  font-size: 0.84rem;
  font-weight: 980;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: rgba(90, 50, 0, 0.95);
}
#leaderboard-top-card #best-employee-photo {
  width: 144px;
  height: 144px;
  border-radius: 34px;
  border: 2px solid rgba(233, 249, 255, 0.96);
  box-shadow:
    0 20px 36px rgba(0, 0, 0, 0.44),
    0 0 0 4px rgba(112, 244, 255, 0.18);
}
#leaderboard-top-card .leaderboard-hero-identity {
  min-width: 0;
  width: 100%;
  display: grid;
  gap: 4px;
}
#leaderboard-top-card .leaderboard-top-head {
  display: block;
}
#leaderboard-top-card .leaderboard-name {
  font-size: 2rem;
  line-height: 0.98;
  letter-spacing: -0.02em;
  color: rgba(248, 251, 255, 0.98);
  text-shadow: none !important;
}
#leaderboard-top-card .leaderboard-role {
  font-size: 1rem;
  font-weight: 760;
  color: rgba(220, 236, 255, 0.92);
  text-shadow: none !important;
}
#leaderboard-top-card .leaderboard-top-note {
  display: none !important;
  align-items: center;
  width: fit-content;
  min-height: 20px;
  padding: 0 9px;
  border-radius: 999px;
  border: 1px solid rgba(126, 205, 255, 0.34);
  background: rgba(31, 101, 176, 0.34);
  color: rgba(212, 237, 255, 0.94);
  font-size: 0.62rem;
  font-weight: 860;
  letter-spacing: 0.02em;
}
#leaderboard-top-card .leaderboard-top-main {
  width: 100%;
  padding-top: 0;
  display: grid;
  gap: 8px;
}
#leaderboard-top-card .leaderboard-top-metrics {
  display: grid;
  gap: 6px;
}
#leaderboard-top-card .leaderboard-points {
  margin-top: 0;
  width: 100%;
  padding: 11px 13px;
  border-radius: 16px;
  border: 1px solid rgba(255, 209, 120, 0.58);
  background: linear-gradient(
    135deg,
    rgba(117, 84, 33, 0.52),
    rgba(74, 56, 27, 0.44)
  );
  color: rgba(255, 220, 137, 0.98);
  box-shadow:
    inset 0 1px 0 rgba(255, 235, 189, 0.2),
    0 14px 28px rgba(0, 0, 0, 0.26);
}
#leaderboard-top-card #best-employee-score {
  font-size: 1.95rem;
  letter-spacing: -0.02em;
  line-height: 0.95;
  color: rgba(255, 223, 145, 0.99);
  text-shadow: none !important;
}
#leaderboard-top-card #best-employee-metric-label {
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  color: rgba(255, 234, 180, 0.96);
}
#leaderboard-top-card .leaderboard-hype {
  margin-top: 0;
  width: fit-content;
  min-height: 25px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid rgba(255, 166, 113, 0.36);
  background: rgba(132, 70, 36, 0.34);
  color: rgba(255, 205, 178, 0.96);
  font-size: 0.65rem;
  font-weight: 860;
}
#leaderboard-top-card .leaderboard-quick-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
#leaderboard-top-card .leaderboard-top-quick-chip,
#leaderboard-top-card .leaderboard-sales-badge,
#leaderboard-top-card .leaderboard-top-react-btn {
  margin-top: 0;
  min-height: 25px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 0.64rem;
  font-weight: 850;
}
#leaderboard-top-card .leaderboard-top-quick-chip {
  border: 1px solid rgba(134, 204, 255, 0.32);
  background: rgba(35, 97, 164, 0.32);
  color: rgba(218, 240, 255, 0.95);
}
#leaderboard-top-card .leaderboard-sales-badge {
  border-color: rgba(126, 206, 255, 0.34);
  background: rgba(62, 121, 193, 0.34);
  color: rgba(214, 241, 255, 0.95);
}
#leaderboard-top-card .leaderboard-top-react-btn {
  display: none !important;
}
#leaderboard-top-card .leaderboard-top-level {
  display: grid;
  gap: 6px;
  padding: 9px 11px;
  border-radius: 12px;
  border: 1px solid rgba(126, 199, 255, 0.28);
  background: rgba(21, 63, 120, 0.34);
}
#leaderboard-top-card .leaderboard-top-level-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 0.72rem;
  font-weight: 850;
  color: rgba(212, 236, 255, 0.94);
}
#leaderboard-top-card .leaderboard-top-level-head strong {
  font-size: 0.78rem;
}
#leaderboard-top-card .leaderboard-top-level-track {
  position: relative;
  overflow: hidden;
  height: 8px;
  border-radius: 999px;
  background: rgba(199, 224, 255, 0.18);
}
#leaderboard-top-card .leaderboard-top-level-fill {
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(
    90deg,
    rgba(255, 199, 89, 0.98),
    rgba(90, 227, 255, 0.96)
  );
  box-shadow: 0 6px 16px rgba(42, 170, 255, 0.28);
  transition: width 0.24s ease;
}
#leaderboard-top-card .leaderboard-top-goal,
#leaderboard-top-card .leaderboard-top-gap {
  padding: 9px 11px;
  border-radius: 12px;
  border: 1px solid rgba(124, 197, 255, 0.26);
  background: rgba(24, 70, 130, 0.28);
  color: rgba(215, 237, 255, 0.95);
  font-size: 0.72rem;
  font-weight: 820;
}
#leaderboard-top-card .leaderboard-top-gap {
  border-color: rgba(255, 191, 128, 0.28);
  background: rgba(108, 65, 36, 0.3);
  color: rgba(255, 224, 190, 0.95);
}
#leaderboard-top-card .leaderboard-top-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}
#leaderboard-top-card .leaderboard-top-action {
  min-height: 34px;
  border-radius: 11px;
  border: 1px solid rgba(130, 200, 255, 0.36);
  background: rgba(30, 90, 154, 0.34);
  color: rgba(224, 243, 255, 0.96);
  font-size: 0.7rem;
  font-weight: 870;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition:
    transform 0.16s ease,
    box-shadow 0.16s ease,
    border-color 0.16s ease;
}
#leaderboard-top-card .leaderboard-top-action:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.24);
}
#leaderboard-top-card .leaderboard-top-action:disabled {
  opacity: 0.56;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}
#leaderboard-top-card .leaderboard-top-action.is-support {
  border-color: rgba(117, 215, 160, 0.42);
  background: rgba(29, 104, 72, 0.36);
}
#leaderboard-top-card .leaderboard-top-action.is-duel {
  border-color: rgba(125, 196, 255, 0.4);
  background: rgba(25, 84, 148, 0.38);
}
#leaderboard-top-card .leaderboard-top-action.is-congrats {
  border-color: rgba(255, 179, 129, 0.4);
  background: rgba(128, 74, 41, 0.36);
}
.league-congrats-overlay {
  position: fixed;
  inset: 0;
  z-index: 32000;
  display: grid;
  place-items: center;
  padding: 24px;
  background:
    radial-gradient(circle at 50% 14%, rgba(255, 215, 140, 0.26), transparent 24%),
    radial-gradient(circle at 18% 82%, rgba(110, 196, 255, 0.22), transparent 30%),
    radial-gradient(circle at 82% 18%, rgba(120, 108, 255, 0.26), transparent 28%),
    linear-gradient(180deg, rgba(7, 11, 24, 0.82), rgba(12, 17, 35, 0.9));
  backdrop-filter: blur(14px) saturate(1.12);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 180ms ease, visibility 180ms ease;
}
.league-congrats-overlay.is-active {
  opacity: 1;
  visibility: visible;
}
.league-congrats-overlay__stage {
  width: min(100%, 560px);
  position: relative;
  overflow: hidden;
  padding: 30px 24px 28px;
  border-radius: 30px;
  border: 1px solid rgba(212, 234, 255, 0.24);
  background:
    linear-gradient(180deg, rgba(24, 30, 58, 0.96), rgba(12, 17, 34, 0.96)),
    radial-gradient(circle at top, rgba(255, 213, 120, 0.14), transparent 44%);
  box-shadow:
    0 28px 90px rgba(4, 10, 25, 0.46),
    0 0 60px rgba(120, 108, 255, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  text-align: center;
  transform: translateY(12px) scale(0.94);
  transition: transform 220ms ease;
}
.league-congrats-overlay__stage::before,
.league-congrats-overlay__stage::after {
  content: "";
  position: absolute;
  inset: -18% auto auto -26%;
  width: 72%;
  height: 180%;
  pointer-events: none;
}
.league-congrats-overlay__stage::before {
  background: linear-gradient(
    102deg,
    transparent 0%,
    rgba(255, 214, 118, 0.04) 18%,
    rgba(255, 214, 118, 0.18) 36%,
    rgba(255, 246, 214, 0.34) 50%,
    rgba(255, 203, 101, 0.22) 62%,
    rgba(255, 214, 118, 0.04) 82%,
    transparent 100%
  );
  transform: rotate(12deg) translateX(-120%);
  filter: blur(1px);
  opacity: 0;
}
.league-congrats-overlay__stage::after {
  inset: auto -18% -42% auto;
  width: 62%;
  height: 62%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 212, 118, 0.18) 0%, rgba(255, 212, 118, 0.05) 44%, transparent 74%);
  filter: blur(10px);
  opacity: 0.8;
}
.league-congrats-overlay.is-active .league-congrats-overlay__stage {
  transform: translateY(0) scale(1);
}
.league-congrats-overlay.is-active .league-congrats-overlay__stage::before {
  opacity: 1;
  animation: leagueCongratsGoldenWave 1350ms cubic-bezier(0.22, 1, 0.36, 1) 120ms both;
}
.league-congrats-overlay__halo {
  position: absolute;
  inset: -12% auto auto 50%;
  width: 280px;
  height: 280px;
  transform: translateX(-50%);
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(255, 219, 141, 0.34) 0%, rgba(255, 219, 141, 0.08) 44%, transparent 68%);
  filter: blur(4px);
  animation: leagueCongratsHaloPulse 1600ms ease-in-out infinite;
  pointer-events: none;
}
.league-congrats-overlay__badge {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 30px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid rgba(255, 227, 170, 0.3);
  background: rgba(255, 218, 136, 0.12);
  color: rgba(255, 232, 191, 0.96);
  font-size: 0.7rem;
  font-weight: 900;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin: 0 auto 14px;
}
.league-congrats-overlay__people {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  margin: 0 auto 16px;
  max-width: 380px;
}
.league-congrats-overlay__person {
  display: grid;
  justify-items: center;
  gap: 8px;
}
.league-congrats-overlay__avatar-wrap {
  width: 86px;
  height: 86px;
  padding: 4px;
  border-radius: 50%;
  background:
    linear-gradient(180deg, rgba(119, 225, 255, 0.9), rgba(114, 120, 255, 0.82));
  box-shadow:
    0 16px 28px rgba(0, 0, 0, 0.24),
    0 0 24px rgba(114, 210, 255, 0.22);
}
.league-congrats-overlay__avatar-wrap--target {
  width: 102px;
  height: 102px;
  background:
    linear-gradient(180deg, rgba(255, 221, 143, 0.98), rgba(255, 165, 104, 0.86));
  box-shadow:
    0 18px 34px rgba(0, 0, 0, 0.28),
    0 0 30px rgba(255, 199, 102, 0.28);
}
.league-congrats-overlay__avatar {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  border-radius: 50%;
  background: linear-gradient(180deg, rgba(255,255,255,0.14), rgba(255,255,255,0.04));
}
.league-congrats-overlay__avatar.is-empty {
  opacity: 0.45;
}
.league-congrats-overlay__name {
  max-width: 10ch;
  color: rgba(239, 246, 255, 0.94);
  font-size: 0.9rem;
  font-weight: 800;
  line-height: 1.1;
  text-align: center;
  text-wrap: balance;
}
.league-congrats-overlay__name--target {
  font-size: 0.98rem;
  color: rgba(255, 239, 208, 0.98);
}
.league-congrats-overlay__versus {
  align-self: center;
  color: rgba(255, 227, 170, 0.96);
  font-size: 1.45rem;
  filter: drop-shadow(0 8px 18px rgba(255, 201, 102, 0.28));
  animation: leagueCongratsVersusPop 980ms cubic-bezier(0.22, 1, 0.36, 1);
}
.league-congrats-overlay__emoji {
  position: relative;
  z-index: 1;
  font-size: clamp(52px, 12vw, 98px);
  line-height: 1;
  margin-bottom: 10px;
  filter: drop-shadow(0 10px 24px rgba(255, 197, 95, 0.26));
  animation: leagueCongratsEmojiBounce 920ms cubic-bezier(0.22, 1, 0.36, 1);
}
.league-congrats-overlay__title {
  position: relative;
  z-index: 1;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(205, 227, 255, 0.78);
  margin-bottom: 12px;
}
.league-congrats-overlay__headline {
  position: relative;
  z-index: 1;
  margin: 0 auto 10px;
  max-width: 14ch;
  font-size: clamp(18px, 4.8vw, 28px);
  font-weight: 900;
  line-height: 1.05;
  letter-spacing: 0.01em;
  color: rgba(255, 236, 198, 0.98);
  text-wrap: balance;
  text-shadow:
    0 0 24px rgba(255, 203, 101, 0.22),
    0 10px 24px rgba(0, 0, 0, 0.22);
}
.league-congrats-overlay__subhead {
  position: relative;
  z-index: 1;
  margin: -2px auto 12px;
  color: rgba(206, 224, 255, 0.72);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}
.league-congrats-overlay__text {
  position: relative;
  z-index: 1;
  font-size: clamp(28px, 7vw, 46px);
  font-weight: 900;
  line-height: 1.04;
  color: #fffdf8;
  text-wrap: balance;
  text-shadow: 0 10px 28px rgba(0, 0, 0, 0.28);
  margin: 0 auto;
  max-width: 12ch;
}
.league-congrats-overlay__caption {
  position: relative;
  z-index: 1;
  margin-top: 14px;
  color: rgba(214, 229, 255, 0.8);
  font-size: 0.92rem;
  line-height: 1.45;
  text-wrap: balance;
}
.league-support-overlay {
  position: fixed;
  inset: 0;
  z-index: 32010;
  display: grid;
  place-items: center;
  padding: 24px;
  background:
    radial-gradient(circle at 50% 18%, rgba(255, 214, 118, 0.34), transparent 24%),
    radial-gradient(circle at 50% 78%, rgba(255, 166, 87, 0.18), transparent 34%),
    linear-gradient(180deg, rgba(21, 12, 3, 0.72), rgba(27, 18, 8, 0.84));
  backdrop-filter: blur(12px) saturate(1.06);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 180ms ease, visibility 180ms ease;
}
.league-support-overlay.is-active {
  opacity: 1;
  visibility: visible;
}
.league-support-overlay__stage {
  position: relative;
  overflow: hidden;
  width: min(100%, 560px);
  padding: 28px 24px 26px;
  border-radius: 30px;
  border: 1px solid rgba(255, 220, 160, 0.34);
  background:
    radial-gradient(circle at top, rgba(255, 223, 138, 0.2), transparent 40%),
    linear-gradient(180deg, rgba(46, 24, 6, 0.96), rgba(24, 15, 5, 0.96));
  box-shadow:
    0 26px 80px rgba(13, 8, 2, 0.42),
    0 0 50px rgba(255, 194, 91, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  text-align: center;
  transform: translateY(10px) scale(0.95);
  transition: transform 220ms ease;
}
.league-support-overlay.is-active .league-support-overlay__stage {
  transform: translateY(0) scale(1);
}
.league-support-overlay__wave {
  position: absolute;
  inset: -10% auto auto -28%;
  width: 76%;
  height: 180%;
  background: linear-gradient(
    102deg,
    transparent 0%,
    rgba(255, 223, 138, 0.04) 14%,
    rgba(255, 223, 138, 0.18) 30%,
    rgba(255, 244, 211, 0.42) 48%,
    rgba(255, 184, 72, 0.24) 62%,
    rgba(255, 223, 138, 0.04) 82%,
    transparent 100%
  );
  transform: rotate(10deg) translateX(-128%);
  opacity: 0;
}
.league-support-overlay.is-active .league-support-overlay__wave {
  animation: leagueSupportGoldenWave 1160ms cubic-bezier(0.22, 1, 0.36, 1) 140ms both;
}
.league-support-overlay__badge,
.league-support-overlay__amount,
.league-support-overlay__headline,
.league-support-overlay__caption,
.league-support-overlay__people {
  position: relative;
  z-index: 1;
}
.league-support-overlay__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 30px;
  padding: 0 14px;
  margin: 0 auto 14px;
  border-radius: 999px;
  border: 1px solid rgba(255, 228, 170, 0.34);
  background: rgba(255, 210, 118, 0.14);
  color: rgba(255, 239, 205, 0.98);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.league-support-overlay__people {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  margin: 0 auto 16px;
  max-width: 360px;
}
.league-support-overlay__person {
  display: grid;
  justify-items: center;
  gap: 8px;
}
.league-support-overlay__avatar-wrap {
  width: 78px;
  height: 78px;
  padding: 4px;
  border-radius: 50%;
  background: linear-gradient(180deg, rgba(255, 226, 145, 0.94), rgba(255, 167, 80, 0.86));
  box-shadow: 0 16px 28px rgba(0, 0, 0, 0.24), 0 0 24px rgba(255, 194, 91, 0.22);
}
.league-support-overlay__avatar-wrap--target {
  width: 92px;
  height: 92px;
}
.league-support-overlay__avatar {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  border-radius: 50%;
  background: linear-gradient(180deg, rgba(255,255,255,0.12), rgba(255,255,255,0.04));
}
.league-support-overlay__avatar.is-empty {
  opacity: 0.45;
}
.league-support-overlay__name {
  max-width: 9ch;
  color: rgba(255, 243, 219, 0.96);
  font-size: 0.88rem;
  font-weight: 800;
  line-height: 1.08;
  text-align: center;
  text-wrap: balance;
}
.league-support-overlay__arrow {
  color: rgba(255, 221, 149, 0.96);
  font-size: 1.6rem;
  filter: drop-shadow(0 8px 18px rgba(255, 194, 91, 0.24));
}
.league-support-overlay__amount {
  font-size: clamp(42px, 12vw, 78px);
  font-weight: 1000;
  line-height: 0.96;
  letter-spacing: -0.03em;
  color: #fff5d6;
  text-shadow:
    0 0 36px rgba(255, 209, 116, 0.3),
    0 14px 36px rgba(0, 0, 0, 0.24);
  margin: 2px 0 10px;
}
.league-support-overlay__headline {
  font-size: clamp(20px, 5vw, 30px);
  font-weight: 900;
  line-height: 1.06;
  color: rgba(255, 236, 198, 0.98);
  text-wrap: balance;
  max-width: 15ch;
  margin: 0 auto 10px;
}
.league-support-overlay__caption {
  color: rgba(255, 228, 190, 0.78);
  font-size: 0.9rem;
  line-height: 1.42;
  max-width: 22ch;
  margin: 0 auto;
  text-wrap: balance;
}

.league-overtake-overlay {
  position: fixed;
  inset: 0;
  z-index: 13000;
  display: grid;
  place-items: center;
  padding: max(20px, env(safe-area-inset-top)) 18px max(24px, env(safe-area-inset-bottom));
  background:
    radial-gradient(circle at 50% 20%, rgba(121, 220, 255, 0.2), transparent 42%),
    radial-gradient(circle at 50% 80%, rgba(120, 140, 255, 0.18), transparent 50%),
    rgba(8, 12, 26, 0.76);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 220ms ease, visibility 220ms ease;
}
.league-overtake-overlay.is-active {
  opacity: 1;
  visibility: visible;
}
.league-overtake-overlay__stage {
  position: relative;
  width: min(100%, 420px);
  padding: 24px 22px 22px;
  border-radius: 30px;
  border: 1px solid rgba(133, 213, 255, 0.28);
  background:
    linear-gradient(180deg, rgba(14, 25, 50, 0.96), rgba(20, 32, 64, 0.94)),
    radial-gradient(circle at top, rgba(255, 255, 255, 0.12), transparent 60%);
  box-shadow:
    0 28px 80px rgba(5, 11, 28, 0.5),
    0 0 0 1px rgba(255, 255, 255, 0.05) inset;
  overflow: hidden;
  isolation: isolate;
}
.league-overtake-overlay__pulse {
  position: absolute;
  inset: -15% -10%;
  background:
    radial-gradient(circle at 50% 50%, rgba(116, 226, 255, 0.24), transparent 30%),
    radial-gradient(circle at 50% 50%, rgba(90, 117, 255, 0.2), transparent 52%);
  filter: blur(6px);
  animation: leagueOvertakePulse 1.8s ease-out both;
}
.league-overtake-overlay.is-top3 .league-overtake-overlay__stage {
  border-color: rgba(255, 214, 116, 0.34);
  background:
    linear-gradient(180deg, rgba(34, 26, 10, 0.96), rgba(42, 32, 12, 0.94)),
    radial-gradient(circle at top, rgba(255, 243, 203, 0.14), transparent 60%);
}
.league-overtake-overlay.is-top3 .league-overtake-overlay__pulse {
  background:
    radial-gradient(circle at 50% 50%, rgba(255, 220, 126, 0.24), transparent 30%),
    radial-gradient(circle at 50% 50%, rgba(255, 174, 80, 0.18), transparent 52%);
}
.league-overtake-overlay__badge,
.league-overtake-overlay__people,
.league-overtake-overlay__headline,
.league-overtake-overlay__rank-jump,
.league-overtake-overlay__caption {
  position: relative;
  z-index: 1;
}
.league-overtake-overlay__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid rgba(130, 224, 255, 0.32);
  background: rgba(255, 255, 255, 0.08);
  color: rgba(228, 246, 255, 0.96);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.league-overtake-overlay.is-top3 .league-overtake-overlay__badge {
  border-color: rgba(255, 214, 116, 0.34);
  background: rgba(255, 216, 129, 0.1);
  color: rgba(255, 244, 214, 0.98);
}
.league-overtake-overlay__people {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}
.league-overtake-overlay__person {
  display: grid;
  justify-items: center;
  gap: 8px;
}
.league-overtake-overlay__avatar-wrap {
  width: 78px;
  height: 78px;
  padding: 3px;
  border-radius: 24px;
  background: linear-gradient(145deg, rgba(127, 243, 255, 0.95), rgba(103, 126, 255, 0.9));
  box-shadow: 0 18px 34px rgba(8, 16, 40, 0.36);
}
.league-overtake-overlay__avatar-wrap--target {
  background: linear-gradient(145deg, rgba(255, 208, 120, 0.92), rgba(255, 149, 86, 0.88));
}
.league-overtake-overlay.is-top3 .league-overtake-overlay__avatar-wrap {
  background: linear-gradient(145deg, rgba(255, 236, 155, 0.95), rgba(255, 181, 74, 0.9));
}
.league-overtake-overlay__avatar {
  width: 100%;
  height: 100%;
  border-radius: 21px;
  object-fit: cover;
  background: rgba(255, 255, 255, 0.12);
}
.league-overtake-overlay__avatar.is-empty {
  opacity: 0.55;
}
.league-overtake-overlay__center {
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  color: #fff3cb;
  font-size: 1.65rem;
  box-shadow: 0 12px 28px rgba(8, 16, 40, 0.24);
}
.league-overtake-overlay.is-top3 .league-overtake-overlay__center {
  color: #fff1ba;
  background: rgba(255, 211, 120, 0.14);
}
.league-overtake-overlay__name {
  color: rgba(241, 248, 255, 0.92);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-align: center;
}
.league-overtake-overlay__headline {
  color: #ffffff;
  font-size: clamp(1.32rem, 3vw, 1.7rem);
  font-weight: 900;
  line-height: 1.06;
  text-align: center;
  text-wrap: balance;
}
.league-overtake-overlay__rank-jump {
  margin-top: 12px;
  color: #7fe8ff;
  font-size: clamp(1.6rem, 5vw, 2.3rem);
  font-weight: 900;
  line-height: 1;
  text-align: center;
  letter-spacing: 0.03em;
  text-shadow: 0 0 24px rgba(127, 232, 255, 0.28);
}
.league-overtake-overlay.is-top3 .league-overtake-overlay__rank-jump {
  color: #ffd974;
  text-shadow: 0 0 24px rgba(255, 217, 116, 0.36);
}
.league-overtake-overlay__caption {
  margin-top: 10px;
  color: rgba(217, 232, 255, 0.74);
  font-size: 0.82rem;
  font-weight: 600;
  text-align: center;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
@keyframes leagueOvertakePulse {
  0% {
    transform: scale(0.88);
    opacity: 0;
  }
  35% {
    opacity: 1;
  }
  100% {
    transform: scale(1.08);
    opacity: 0.8;
  }
}

.league-new-leader-overlay {
  position: fixed;
  inset: 0;
  z-index: 13010;
  display: grid;
  place-items: center;
  padding: max(20px, env(safe-area-inset-top)) 18px max(24px, env(safe-area-inset-bottom));
  background:
    radial-gradient(circle at 50% 18%, rgba(255, 222, 132, 0.22), transparent 42%),
    radial-gradient(circle at 50% 80%, rgba(255, 168, 86, 0.14), transparent 48%),
    rgba(18, 11, 3, 0.8);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 220ms ease, visibility 220ms ease;
}
.league-new-leader-overlay.is-active {
  opacity: 1;
  visibility: visible;
}
.league-new-leader-overlay__stage {
  position: relative;
  width: min(100%, 430px);
  padding: 24px 22px 24px;
  border-radius: 32px;
  border: 1px solid rgba(255, 221, 136, 0.34);
  background:
    linear-gradient(180deg, rgba(46, 29, 7, 0.96), rgba(28, 20, 8, 0.96)),
    radial-gradient(circle at top, rgba(255, 242, 208, 0.12), transparent 60%);
  box-shadow:
    0 28px 80px rgba(12, 8, 2, 0.54),
    0 0 0 1px rgba(255, 255, 255, 0.05) inset;
  overflow: hidden;
  isolation: isolate;
}
.league-new-leader-overlay__glow {
  position: absolute;
  inset: -14% -8%;
  background:
    radial-gradient(circle at 50% 40%, rgba(255, 220, 124, 0.28), transparent 28%),
    radial-gradient(circle at 50% 50%, rgba(255, 171, 80, 0.18), transparent 54%);
  filter: blur(8px);
}
.league-new-leader-overlay__badge,
.league-new-leader-overlay__crown,
.league-new-leader-overlay__people,
.league-new-leader-overlay__headline,
.league-new-leader-overlay__caption {
  position: relative;
  z-index: 1;
}
.league-new-leader-overlay__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 12px;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255, 221, 136, 0.34);
  background: rgba(255, 215, 124, 0.1);
  color: rgba(255, 245, 214, 0.98);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.league-new-leader-overlay__crown {
  text-align: center;
  font-size: 2rem;
  margin-bottom: 8px;
  filter: drop-shadow(0 8px 20px rgba(255, 206, 90, 0.3));
}
.league-new-leader-overlay__people {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  margin-bottom: 14px;
}
.league-new-leader-overlay__person {
  display: grid;
  justify-items: center;
  gap: 8px;
}
.league-new-leader-overlay__avatar-wrap {
  width: 86px;
  height: 86px;
  padding: 3px;
  border-radius: 26px;
  background: linear-gradient(145deg, rgba(255, 232, 153, 0.96), rgba(255, 181, 74, 0.92));
  box-shadow: 0 18px 34px rgba(26, 17, 4, 0.36);
}
.league-new-leader-overlay__avatar-wrap--previous {
  background: linear-gradient(145deg, rgba(205, 215, 230, 0.88), rgba(128, 141, 162, 0.86));
}
.league-new-leader-overlay__avatar {
  width: 100%;
  height: 100%;
  border-radius: 23px;
  object-fit: cover;
  background: rgba(255, 255, 255, 0.1);
}
.league-new-leader-overlay__avatar.is-empty {
  opacity: 0.55;
}
.league-new-leader-overlay__name {
  color: rgba(255, 245, 223, 0.96);
  font-size: 0.84rem;
  font-weight: 800;
  text-align: center;
}
.league-new-leader-overlay__versus {
  width: 50px;
  height: 50px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: rgba(255, 214, 120, 0.12);
  color: #ffe3a2;
  font-size: 1.4rem;
}
.league-new-leader-overlay__headline {
  color: #fff8e2;
  font-size: clamp(1.38rem, 3.4vw, 1.86rem);
  font-weight: 900;
  line-height: 1.08;
  text-align: center;
  text-wrap: balance;
}
.league-new-leader-overlay__caption {
  margin-top: 12px;
  color: rgba(255, 235, 194, 0.78);
  font-size: 0.82rem;
  font-weight: 700;
  text-align: center;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

@keyframes leagueCongratsHaloPulse {
  0%,
  100% {
    opacity: 0.7;
    transform: translateX(-50%) scale(0.94);
  }
  50% {
    opacity: 1;
    transform: translateX(-50%) scale(1.06);
  }
}

@keyframes leagueCongratsEmojiBounce {
  0% {
    opacity: 0;
    transform: translateY(18px) scale(0.82) rotate(-8deg);
  }
  55% {
    opacity: 1;
    transform: translateY(-8px) scale(1.06) rotate(4deg);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1) rotate(0deg);
  }
}

@keyframes leagueCongratsVersusPop {
  0% {
    opacity: 0;
    transform: scale(0.6) rotate(-10deg);
  }
  55% {
    opacity: 1;
    transform: scale(1.12) rotate(6deg);
  }
  100% {
    opacity: 1;
    transform: scale(1) rotate(0deg);
  }
}

@keyframes leagueCongratsGoldenWave {
  0% {
    opacity: 0;
    transform: rotate(12deg) translateX(-128%);
  }
  18% {
    opacity: 1;
  }
  60% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: rotate(12deg) translateX(178%);
  }
}

@keyframes leagueSupportGoldenWave {
  0% {
    opacity: 0;
    transform: rotate(10deg) translateX(-128%);
  }
  16% {
    opacity: 1;
  }
  60% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: rotate(10deg) translateX(182%);
  }
}
}
#leaderboard-top-card .leaderboard-team-progress {
  margin-top: 0;
  padding: 10px 11px;
  border-radius: 14px;
  border-color: rgba(118, 197, 255, 0.32);
  background: rgba(27, 65, 122, 0.44);
}
#leaderboard-top-card .leaderboard-team-progress-head {
  font-size: 0.66rem;
  color: rgba(194, 223, 255, 0.84);
}
#leaderboard-top-card .leaderboard-team-progress-head strong {
  font-size: 0.84rem;
  color: rgba(237, 247, 255, 0.96);
}
#leaderboard-top-card .leaderboard-team-progress-track {
  height: 8px;
  background: rgba(198, 224, 255, 0.2);
}
#leaderboard-top-card .leaderboard-team-progress-meta {
  margin-top: 6px;
  font-size: 0.75rem;
  color: rgba(213, 232, 255, 0.9);
}
#leaderboard-top-card #leaderboard-top-meta {
  margin-top: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
  padding: 0;
  border: 0;
  background: transparent;
}
#leaderboard-top-card #leaderboard-top-meta .leaderboard-top-chip {
  min-height: 34px;
  padding: 7px 9px;
  border-radius: 10px;
  font-size: 0.62rem;
  font-weight: 860;
  line-height: 1.2;
  white-space: normal;
  color: rgba(230, 244, 255, 0.95);
  border-color: rgba(132, 190, 255, 0.36);
  background: rgba(31, 72, 132, 0.42);
}
#leaderboard-top-card #leaderboard-top-meta .leaderboard-top-chip:only-child {
  grid-column: 1 / -1;
}
#leaderboard-top-card .leaderboard-top-dots {
  display: none !important;
}
#leaderboard-top-card .leaderboard-top-chip--tier {
  border-color: rgba(122, 199, 255, 0.38);
  background: rgba(29, 83, 155, 0.44);
}
#leaderboard-top-card .leaderboard-top-chip--duel {
  border-color: rgba(255, 164, 120, 0.42);
  background: rgba(123, 68, 41, 0.42);
  color: rgba(255, 212, 186, 0.96);
}
#leaderboard-top-card .leaderboard-top-chip--battle {
  border-color: rgba(116, 208, 255, 0.42);
  background: rgba(33, 100, 168, 0.44);
}

@keyframes leaderboardHeroGlowPulse {
  0%,
  100% {
    opacity: 0.75;
    transform: scale(0.96);
  }
  50% {
    opacity: 0.98;
    transform: scale(1.06);
  }
}

@keyframes leaderboardHeroRingPulse {
  0%,
  100% {
    box-shadow:
      0 14px 30px rgba(0, 0, 0, 0.34),
      0 0 0 1px rgba(212, 250, 255, 0.25);
  }
  50% {
    box-shadow:
      0 18px 34px rgba(0, 0, 0, 0.42),
      0 0 0 1px rgba(241, 253, 255, 0.5),
      0 0 24px rgba(114, 236, 255, 0.34);
  }
}

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

@keyframes leaderboardHeroCrownPulse {
  0%,
  100% {
    box-shadow:
      0 16px 24px rgba(0, 0, 0, 0.38),
      0 0 0 2px rgba(7, 34, 86, 0.46);
  }
  50% {
    box-shadow:
      0 20px 30px rgba(0, 0, 0, 0.44),
      0 0 0 2px rgba(7, 34, 86, 0.56),
      0 0 18px rgba(255, 224, 130, 0.48);
  }
}

@keyframes leaderboardHeroSparkle {
  0%,
  100% {
    opacity: 0.35;
    transform: scale(0.8);
  }
  50% {
    opacity: 1;
    transform: scale(1.2);
  }
}

@media (max-width: 640px) {
  #leaderboard-top-card {
    gap: 9px;
    padding: 14px 11px 12px;
    border-radius: 16px;
  }
  #leaderboard-top-card .leaderboard-top-title {
    font-size: 0.72rem;
    letter-spacing: 0.08em;
  }
  #leaderboard-top-card .leaderboard-top-headline {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    text-align: center;
    gap: 8px;
  }
  #leaderboard-top-card .leaderboard-top-avatar-shell {
    width: 156px;
    height: 156px;
  }
  #leaderboard-top-card .leaderboard-top-crown {
    top: -10px;
    left: -10px;
    min-width: 108px;
    min-height: 38px;
    padding: 0 12px 0 9px;
    gap: 7px;
  }
  #leaderboard-top-card .leaderboard-top-crown-icon {
    font-size: 1.34rem;
  }
  #leaderboard-top-card .leaderboard-top-crown-text {
    font-size: 0.72rem;
  }
  #leaderboard-top-card #best-employee-photo {
    width: 126px;
    height: 126px;
    border-radius: 30px;
  }
  #leaderboard-top-card .leaderboard-name {
    font-size: 1.7rem;
  }
  #leaderboard-top-card .leaderboard-role {
    font-size: 0.9rem;
  }
  #leaderboard-top-card .leaderboard-top-note {
    justify-self: center;
  }
  #leaderboard-top-card #best-employee-score {
    font-size: 1.74rem;
  }
  #leaderboard-top-card #best-employee-metric-label {
    font-size: 0.61rem;
  }
  #leaderboard-top-card .leaderboard-top-quick-chip,
  #leaderboard-top-card .leaderboard-sales-badge,
  #leaderboard-top-card .leaderboard-top-react-btn,
  #leaderboard-top-card .leaderboard-hype {
    min-height: 22px;
    padding: 0 8px;
    font-size: 0.58rem;
  }
  #leaderboard-top-card .leaderboard-top-actions {
    grid-template-columns: 1fr;
  }
  #leaderboard-top-card .leaderboard-top-action {
    min-height: 32px;
    font-size: 0.66rem;
  }
  #leaderboard-top-card .leaderboard-team-progress-head {
    font-size: 0.62rem;
  }
  #leaderboard-top-card .leaderboard-team-progress-head strong {
    font-size: 0.8rem;
  }
  #leaderboard-top-card .leaderboard-team-progress-meta {
    font-size: 0.72rem;
  }
  #leaderboard-top-card #leaderboard-top-meta {
    gap: 6px;
  }
  #leaderboard-top-card #leaderboard-top-meta .leaderboard-top-chip {
    min-height: 31px;
    padding: 6px 8px;
    font-size: 0.56rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  #leaderboard-top-card .leaderboard-top-avatar-glow,
  #leaderboard-top-card .leaderboard-top-avatar-ring,
  #leaderboard-top-card .leaderboard-top-crown,
  #leaderboard-top-card .leaderboard-top-crown::after {
    animation: none !important;
  }
}

.photo-duel-hud {
  display: grid;
  gap: 12px;
  margin: 10px 0 16px;
  padding: 14px 16px;
  border-radius: 22px;
  background:
    radial-gradient(circle at top right, rgba(110, 178, 255, 0.18), transparent 38%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(242, 248, 255, 0.94));
  border: 1px solid rgba(117, 162, 220, 0.22);
  box-shadow: 0 18px 38px rgba(73, 109, 158, 0.12);
}

.photo-duel-hud__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.photo-duel-hud__badge {
  display: inline-flex;
  align-items: center;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(91, 144, 255, 0.12);
  color: #3f69b6;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.16em;
}

.photo-duel-hud__status {
  color: #203b66;
  font-size: 13px;
  font-weight: 700;
}

.photo-duel-hud__grid {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 10px;
}

.photo-duel-hud__card {
  display: grid;
  gap: 4px;
  padding: 12px 14px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(117, 162, 220, 0.16);
}

.photo-duel-hud__label {
  color: #6f88ad;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

.photo-duel-hud__name {
  color: #183560;
  font-size: 16px;
  font-weight: 800;
}

.photo-duel-hud__meta {
  color: #557199;
  font-size: 13px;
  font-weight: 600;
}

.photo-duel-hud__versus {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 16px;
  background: linear-gradient(180deg, #7ec5ff, #5c82ff);
  color: #fff;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.08em;
  box-shadow: 0 14px 28px rgba(92, 130, 255, 0.28);
}

.league-duel-finished-overlay {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(7, 14, 28, 0.36);
  backdrop-filter: blur(10px);
  z-index: 12000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 220ms ease;
}

.league-duel-finished-overlay.is-active {
  opacity: 1;
}

.league-duel-finished-overlay__stage {
  position: relative;
  width: min(100%, 420px);
  padding: 28px 24px 26px;
  border-radius: 30px;
  overflow: hidden;
  background:
    radial-gradient(circle at top, rgba(126, 197, 255, 0.34), transparent 34%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(242, 248, 255, 0.94));
  border: 1px solid rgba(111, 155, 224, 0.22);
  box-shadow: 0 24px 68px rgba(18, 41, 76, 0.24);
  text-align: center;
}

.league-duel-finished-overlay.is-photo-duel .league-duel-finished-overlay__stage {
  background:
    radial-gradient(circle at top, rgba(255, 213, 114, 0.36), transparent 34%),
    linear-gradient(180deg, rgba(255, 251, 240, 0.98), rgba(255, 245, 222, 0.94));
}

.league-duel-finished-overlay__glow {
  position: absolute;
  inset: auto -16% -42% -16%;
  height: 180px;
  background: radial-gradient(circle, rgba(98, 154, 255, 0.24), transparent 70%);
  filter: blur(16px);
}

.league-duel-finished-overlay.is-photo-duel .league-duel-finished-overlay__glow {
  background: radial-gradient(circle, rgba(255, 189, 66, 0.26), transparent 70%);
}

.league-duel-finished-overlay__badge {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  padding: 7px 12px;
  border-radius: 999px;
  background: rgba(92, 130, 255, 0.12);
  color: #4268b2;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.18em;
}

.league-duel-finished-overlay.is-photo-duel .league-duel-finished-overlay__badge {
  background: rgba(255, 185, 60, 0.16);
  color: #b27417;
}

.league-duel-finished-overlay__people {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
  margin-top: 18px;
}

.league-duel-finished-overlay__person {
  display: grid;
  gap: 10px;
  justify-items: center;
}

.league-duel-finished-overlay__avatar-wrap {
  display: grid;
  place-items: center;
  width: 86px;
  height: 86px;
  padding: 4px;
  border-radius: 28px;
  background: linear-gradient(180deg, rgba(126, 197, 255, 0.55), rgba(92, 130, 255, 0.2));
  box-shadow: 0 16px 30px rgba(61, 102, 176, 0.18);
}

.league-duel-finished-overlay.is-photo-duel .league-duel-finished-overlay__avatar-wrap--winner {
  background: linear-gradient(180deg, rgba(255, 214, 118, 0.88), rgba(255, 184, 58, 0.34));
  box-shadow: 0 18px 34px rgba(196, 137, 27, 0.24);
}

.league-duel-finished-overlay__avatar {
  width: 100%;
  height: 100%;
  border-radius: 24px;
  object-fit: cover;
  background: #eef4ff;
}

.league-duel-finished-overlay__center {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 58px;
  height: 58px;
  border-radius: 20px;
  background: linear-gradient(180deg, #7fc6ff, #5c82ff);
  color: #fff;
  font-size: 26px;
  box-shadow: 0 16px 34px rgba(92, 130, 255, 0.26);
}

.league-duel-finished-overlay.is-photo-duel .league-duel-finished-overlay__center {
  background: linear-gradient(180deg, #ffd86d, #ffb43a);
  box-shadow: 0 16px 34px rgba(255, 180, 58, 0.28);
}

.league-duel-finished-overlay__name {
  color: #1c3760;
  font-size: 16px;
  font-weight: 900;
}

.league-duel-finished-overlay__headline {
  position: relative;
  margin-top: 20px;
  color: #18345d;
  font-size: clamp(28px, 5vw, 36px);
  font-weight: 1000;
  line-height: 1.04;
}

.league-duel-finished-overlay__score {
  position: relative;
  margin-top: 10px;
  color: #4067b4;
  font-size: 38px;
  font-weight: 1000;
  letter-spacing: 0.06em;
}

.league-duel-finished-overlay.is-photo-duel .league-duel-finished-overlay__score {
  color: #b57918;
}

.league-duel-finished-overlay__caption {
  position: relative;
  margin-top: 10px;
  color: #6880a6;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}