:root {
      --bg-primary: #0f0f13;
      --bg-secondary: #17171c;
      --bg-elevated: #212128;
      --bg-elevated-hover: #2b2b34;
      --border-subtle: rgba(255, 255, 255, 0.08);
      --border-focus: rgba(239, 68, 68, 0.65);
      --text-primary: #FFFFFF;
      --text-muted: #E5E7EB;
      --text-secondary: #9CA3AF;
      --btn-red: #EF4444;
      --btn-red-active: #DC2626;
      --accent-green: #22C55E;
      --accent-gold: #FBBF24;
      --accent-orange: #F97316;
      --accent-blue: #0EA5E9;
      --nav-height: 60px;
    }

    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Roboto', Arial, sans-serif;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      -webkit-tap-highlight-color: transparent;
    }

    html,
    body {
      height: 100%;
      width: 100%;
      margin: 0;
      padding: 0;
      overflow: hidden;
      position: fixed;
      inset: 0;
      background-color: var(--bg-primary);
      color: var(--text-primary);
      user-select: none;
    }

    #app {
      height: 100%;
      height: 100dvh;
      width: 100%;
      display: flex;
      flex-direction: column;
      overflow: hidden;
      position: relative;
      background-color: #16161a;
      background-size: cover;
      background-position: center top;
      background-repeat: no-repeat;
    }

    /* Обои главного экрана включаются только после загрузочного (класс ставит
       navigateTo). Пока bgr_main ≈1 МБ едет, он просвечивал сквозь прозрачную
       карточку загрузки: игрок видел главный экран раньше экрана загрузки. */
    #app.app-bg-main {
      background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.05) 0%, rgba(0, 0, 0, 0.08) 50%, rgba(0, 0, 0, 0.35) 100%), url('images/backgrounds/bgr_main.jpg?v=2026.11.08.11');
    }

    /* Text Color Modifiers (CapsGame) */
    .trans--gold,
    .trans--yellow {
      color: var(--accent-gold);
    }

    .trans--orange {
      color: var(--accent-orange);
    }

    .trans--red {
      color: var(--btn-red);
    }

    .trans--green {
      color: var(--accent-green);
    }

    .trans--under {
      text-decoration: underline;
    }

    /* Custom Scrollbar */
    ::-webkit-scrollbar {
      width: 4px;
      height: 4px;
    }

    ::-webkit-scrollbar-track {
      background: transparent;
    }

    ::-webkit-scrollbar-thumb {
      background: rgba(255, 255, 255, 0.12);
      border-radius: 8px;
    }

    /* Button System (CapsGame) */
    .button {
      font-style: normal;
      font-weight: 700;
      font-size: 15px;
      line-height: 20px;
      text-align: center;
      border-radius: 20px;
      border: none;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 12px 20px;
      transition: transform 0.125s ease-in-out, background-color 0.15s ease, box-shadow 0.15s ease;
      text-transform: uppercase;
      letter-spacing: 0.04em;
    }

    .button:active {
      transform: scale(0.96);
    }

    .button-size-large {
      height: 50px;
      width: 100%;
      font-size: 16px;
      font-weight: 800;
    }

    .button-type-primary.button-color-red {
      background-color: var(--btn-red);
      color: #FFFFFF;
      box-shadow: 0 4px 16px rgba(229, 57, 53, 0.45);
    }

    .button-type-primary.button-color-red:active {
      background-color: var(--btn-red-active);
    }

    .button-type-secondary {
      background-color: var(--bg-elevated);
      color: var(--text-muted);
      border: 0.5px solid var(--border-subtle);
    }

    .button-type-nonactive {
      background-color: rgba(255, 255, 255, 0.08);
      color: var(--text-secondary);
      cursor: not-allowed;
      box-shadow: none;
    }

    .button-full {
      width: 100%;
    }

    /* Badge Icon Buttons */
    .badge-icon-button {
      position: relative;
      cursor: pointer;
      border: none;
      background-color: unset;
      padding: 2px 2px;
      display: flex;
      flex-direction: column;
      align-items: center;
      transition: transform 0.125s ease-in-out;
      flex-shrink: 0;
      box-sizing: border-box;
    }

    .badge-icon-button:active {
      transform: scale(0.92);
    }

    .badge-icon-button__icon {
      font-size: 1.25rem;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 30px;
      height: 30px;
    }

    .badge-icon-button__badge {
      margin-top: 1px;
      font-size: 8.5px;
      font-weight: 800;
      color: var(--text-muted);
      background: var(--bg-elevated);
      padding: 1px 5px;
      border-radius: 6px;
      border: 0.5px solid var(--border-subtle);
      white-space: nowrap;
      line-height: 1.15;
    }

    /* Screen Management */
    .screen {
      display: none;
      flex-direction: column;
      flex: 1;
      width: 100%;
      max-width: 480px;
      margin: 0 auto;
      min-height: 0;
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
      padding: 12px 14px calc(var(--nav-height) + env(safe-area-inset-bottom, 0px) + 36px);
      box-sizing: border-box;
    }

    .screen.active {
      display: flex;
      animation: fadeIn 0.2s ease-out forwards;
    }

    @keyframes fadeIn {
      from {
        opacity: 0;
        transform: translateY(4px);
      }

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

    /* Cover / Splash Screen Layout */
    .cover-screen-bg {
      position: relative;
      height: 100%;
      width: 100%;
      display: none;
      flex-direction: column;
      justify-content: space-between;
      align-items: center;
      padding: 16px 18px 24px;
      /* Фон под splash.jpg: пока ~1 МБ картинки в пути, экран загрузки держит
         собственный тёмный слой и не показывает то, что лежит под ним. */
      background-color: var(--bg-primary);
      background-image: linear-gradient(180deg, rgba(18, 18, 20, 0.25) 0%, rgba(18, 18, 20, 0.10) 35%, rgba(18, 18, 20, 0.80) 80%), url('images/backgrounds/splash.jpg?v=2026.11.08.11');
      background-size: cover;
      background-position: center top;
      background-repeat: no-repeat;
      box-sizing: border-box;
      overflow: hidden;
    }

    .cover-screen-bg.active {
      display: flex;
    }

    .cover-top-bar {
      width: 100%;
      display: flex;
      justify-content: flex-end;
      z-index: 10;
    }

    .cover-content-card {
      width: 100%;
      max-width: 360px;
      background: rgba(24, 24, 26, 0.88);
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
      border: 0.5px solid rgba(255, 255, 255, 0.15);
      border-radius: 24px;
      padding: 20px 18px;
      text-align: center;
      box-shadow: 0 12px 40px rgba(0, 0, 0, 0.85);
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 8px;
      z-index: 10;
      animation: modalSlideUp 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    }

    /* Quotes Card on Preloader / Cover Screen */
    .cover-quote-box {
      width: 100%;
      box-sizing: border-box;
      margin-top: 14px;
      margin-bottom: 4px;
      padding: 14px 16px 16px;
      background: linear-gradient(135deg, rgba(35, 30, 24, 0.94) 0%, rgba(20, 20, 24, 0.96) 100%);
      border: 1.5px solid rgba(251, 191, 36, 0.45);
      border-radius: 20px;
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      position: relative;
      overflow: hidden;
      min-height: 86px;
      justify-content: center;
      box-shadow: 0 10px 32px rgba(0, 0, 0, 0.7), 0 0 24px rgba(251, 191, 36, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.18);
      backdrop-filter: blur(18px);
      -webkit-backdrop-filter: blur(18px);
    }
    .cover-quote-box::before {
      content: '';
      position: absolute;
      top: 0;
      left: 10%;
      right: 10%;
      height: 1px;
      background: linear-gradient(90deg, transparent, rgba(251, 191, 36, 0.75), transparent);
    }
    .cover-quote-tag {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-size: 10px;
      font-weight: 800;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: #fbbf24;
      background: rgba(251, 191, 36, 0.16);
      border: 0.5px solid rgba(251, 191, 36, 0.45);
      padding: 3px 10px;
      border-radius: 20px;
      margin-bottom: 8px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    }
    .cover-quote-tag-icon {
      font-size: 11px;
      line-height: 1;
    }
    .cover-quote-text {
      font-size: 0.94rem;
      line-height: 1.5;
      color: #ffffff;
      font-style: italic;
      font-weight: 600;
      letter-spacing: 0.01em;
      transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1), transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      max-width: 310px;
      text-shadow: 0 2px 8px rgba(0, 0, 0, 0.75);
    }
    .cover-quote-fade-out {
      opacity: 0;
      transform: translateY(-5px) scale(0.98);
    }

    /* Home Layout (CapsGame) */
    .home {
      display: flex;
      flex-direction: column;
      flex: 1;
      width: 100%;
    }

    /* Header Bar */
    .home__title {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 6px 12px;
      background: linear-gradient(180deg, rgba(22, 22, 28, 0.96) 0%, rgba(16, 16, 20, 0.94) 100%);
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
      border-bottom: 1px solid rgba(255, 255, 255, 0.08);
      position: sticky;
      top: 0;
      z-index: 50;
      min-height: 50px;
      box-sizing: border-box;
      width: 100%;
      gap: 8px;
      flex-wrap: nowrap;
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35);
    }

    .home__user {
      display: flex;
      align-items: center;
      gap: 6px;
      min-width: 0;
      flex-shrink: 0;
    }

    .header-global-back-btn {
      display: none;
      align-items: center;
      justify-content: center;
      width: 32px;
      height: 32px;
      min-width: 32px;
      background: rgba(255, 255, 255, 0.08);
      border: 1px solid rgba(255, 255, 255, 0.18);
      border-radius: 10px;
      color: #fff;
      font-size: 1.1rem;
      font-weight: 700;
      cursor: pointer;
      transition: all 0.18s ease;
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      flex-shrink: 0;
      margin-right: 4px;
    }
    .header-global-back-btn:active {
      transform: scale(0.92);
      background: rgba(255, 255, 255, 0.2);
    }

    .cap__element-wrapper {
      position: relative;
      width: 34px;
      height: 34px;
      border-radius: 50%;
      background: linear-gradient(135deg, var(--accent-gold), var(--btn-red));
      padding: 2px;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }

    .cap__element {
      width: 100%;
      height: 100%;
      border-radius: 50%;
      background: var(--bg-primary);
      border: none;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.2rem;
      cursor: pointer;
    }

    .cap__element img {
      width: 100%;
      height: 100%;
      border-radius: 50%;
      object-fit: cover;
    }

    .home-leaderboard {
      display: flex;
      flex-direction: column;
      gap: 1px;
      min-width: 0;
      flex-shrink: 0;
      cursor: pointer;
    }

    .home-leaderboard__username {
      font-size: 12px;
      font-weight: 700;
      color: #FFFFFF;
      max-width: 76px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      line-height: 1.2;
    }

    .home-leaderboard__score {
      display: flex;
      align-items: center;
      gap: 3px;
      cursor: pointer;
      line-height: 1;
    }

    .home-leaderboard__score-img {
      font-size: 0.88rem;
    }

    .home-leaderboard__score-points {
      font-size: 9.5px;
      font-weight: 800;
      color: var(--accent-gold);
    }

    .home-leaderboard__progress {
      width: 40px;
      height: 3px;
      background: var(--bg-elevated);
      border-radius: 3px;
      overflow: hidden;
      margin-top: 1px;
    }

    .home-leaderboard__progress-fill {
      height: 100%;
      background: linear-gradient(90deg, var(--accent-gold), var(--accent-green));
      border-radius: 3px;
    }

    .home__title-badges {
      display: flex;
      align-items: center;
      gap: 3px;
      flex-shrink: 0;
      margin-left: auto;
      flex-wrap: nowrap;
    }

    @media (max-width: 390px) {
      .home__title {
        padding: 4px 6px;
        gap: 4px;
      }

      .home__title-badges {
        gap: 2px;
      }

      .badge-icon-button {
        padding: 1px 1px;
      }

      .badge-icon-button__icon {
        width: 28px;
        height: 28px;
        font-size: 1.15rem;
      }

      .badge-icon-button__badge {
        font-size: 7.5px;
        padding: 1px 3px;
        border-radius: 5px;
      }

      .home-leaderboard__username {
        max-width: 62px;
        font-size: 11px;
      }

      .home-leaderboard__progress {
        width: 34px;
      }
    }

    /* Currency / Resource Buttons Bar (Home Screen) */
    .home__profile-buttons {
      display: flex;
      gap: 8px;
      padding: 6px 12px 2px;
      width: 100%;
      justify-content: space-between;
      align-items: center;
      flex-shrink: 0;
      box-sizing: border-box;
    }

    .home__profile {
      flex: 1;
      min-width: 0;
      height: 44px;
      background: linear-gradient(180deg, rgba(30, 30, 36, 0.92) 0%, rgba(20, 20, 24, 0.96) 100%);
      backdrop-filter: blur(14px);
      -webkit-backdrop-filter: blur(14px);
      border: 1px solid rgba(255, 255, 255, 0.1);
      border-radius: 14px;
      padding: 6px 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      color: #FFFFFF;
      font-size: 13.5px;
      font-weight: 800;
      font-variant-numeric: tabular-nums;
      cursor: pointer;
      box-sizing: border-box;
      box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.08);
      transition: transform 0.12s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.15s, box-shadow 0.15s;
    }

    #token-balance {
      white-space: nowrap;
      overflow: visible;
      min-width: 0;
      font-size: inherit;
    }

    .home__profile:active {
      transform: scale(0.96);
      border-color: var(--border-focus);
    }

    .profile-pill-icon {
      font-size: 1.3rem;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }

    .cone-icon {
      display: inline-block;
      width: 1.2em;
      height: 1.2em;
      vertical-align: -0.2em;
      object-fit: contain;
      filter: drop-shadow(0 0 6px rgba(255, 180, 0, 0.75));
    }

    .profile-pill-icon .cone-icon {
      width: 1.45em;
      height: 1.45em;
      vertical-align: middle;
    }

    .home-energy__block {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      font-size: 10.5px;
      color: var(--text-secondary);
      line-height: 1.15;
    }

    .home-energy__num {
      color: var(--accent-green);
      font-weight: 800;
    }

    .home-energy__progress {
      width: 36px;
      height: 3.5px;
      background: var(--bg-elevated);
      border-radius: 3px;
      overflow: hidden;
      margin-top: 2px;
    }

    .home-energy__progress-bar {
      height: 100%;
      background: var(--accent-green);
    }

    /* Center Container & Badges Layout (Fully Responsive & Non-Scrolling) */
    #main-menu.active {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      flex: 1;
      height: 100%;
      min-height: 0;
      max-height: 100%;
      padding-bottom: calc(var(--nav-height) + env(safe-area-inset-bottom, 0px) + 12px);
      box-sizing: border-box;
      overflow: hidden;
    }

    .home__bottom-container {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 4px 12px;
      position: relative;
      flex: 1;
      min-height: 0;
      width: 100%;
      box-sizing: border-box;
    }

    .home__bottom-left-column,
    .home__bottom-right {
      display: flex;
      flex-direction: column;
      gap: 7px;
      z-index: 2;
      align-self: flex-start;
      justify-content: flex-start;
      width: clamp(52px, 14.2vw, 64px);
      box-sizing: border-box;
      margin-top: clamp(18px, 4vh, 32px);
    }

    .offer-badge {
      position: relative;
      background: linear-gradient(180deg, rgba(30, 30, 36, 0.90) 0%, rgba(20, 20, 24, 0.95) 100%);
      backdrop-filter: blur(14px);
      -webkit-backdrop-filter: blur(14px);
      border: 1px solid rgba(255, 255, 255, 0.09);
      border-radius: 16px;
      padding: 4px 3px;
      width: clamp(52px, 14.2vw, 64px);
      height: clamp(52px, 14.2vw, 64px);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      box-sizing: border-box;
      transition: transform 0.12s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.15s, box-shadow 0.15s;
      box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.07);
    }

    .offer-badge:active {
      transform: scale(0.92);
      border-color: rgba(255, 255, 255, 0.3);
    }

    .offer-badge__timer {
      position: absolute;
      top: -5px;
      right: -3px;
      background: var(--bg-elevated);
      color: var(--text-muted);
      font-size: 8.5px;
      font-weight: 800;
      padding: 2px 5px;
      border-radius: 6px;
      border: 0.5px solid rgba(255, 255, 255, 0.2);
      letter-spacing: 0.02em;
      z-index: 3;
      white-space: nowrap;
    }

    .offer-badge__timer--live {
      background: var(--btn-red);
      color: #FFFFFF;
      box-shadow: 0 0 8px rgba(229, 57, 53, 0.7);
    }

    .offer-badge__timer--hot {
      background: var(--accent-orange);
      color: #FFFFFF;
      box-shadow: 0 0 8px rgba(255, 149, 0, 0.7);
    }

    .offer-badge__timer--gold {
      background: var(--accent-gold);
      color: #121214;
    }

    .offer-badge__timer--stars {
      background: linear-gradient(135deg, #ffd700, #ff9500);
      color: #000000;
      font-weight: 900;
      box-shadow: 0 0 8px rgba(255, 215, 0, 0.75);
    }

    .offer-badge__timer--ton {
      background: linear-gradient(135deg, #0088cc, #00ff88);
      color: #000000;
      font-weight: 900;
      box-shadow: 0 0 8px rgba(0, 255, 136, 0.75);
    }

    .offer-badge__timer--vip {
      background: linear-gradient(135deg, #9c27b0, #e91e63);
      color: #FFFFFF;
      font-weight: 900;
      box-shadow: 0 0 8px rgba(233, 30, 99, 0.75);
    }

    .offer-badge__timer--mega {
      background: linear-gradient(135deg, #00f2fe, #4facfe);
      color: #000000;
      font-weight: 900;
      box-shadow: 0 0 10px rgba(0, 242, 254, 0.85);
    }

    .offer-badge--mega {
      border-color: rgba(0, 242, 254, 0.5);
      background: linear-gradient(135deg, rgba(0, 242, 254, 0.15), rgba(24, 24, 26, 0.92));
      box-shadow: 0 0 10px rgba(0, 242, 254, 0.25);
    }

    .offer-badge--mega:active {
      border-color: #00f2fe;
    }

    .offer-badge--stars {
      border-color: rgba(255, 215, 0, 0.4);
      background: linear-gradient(135deg, rgba(255, 215, 0, 0.1), rgba(24, 24, 26, 0.88));
    }

    .offer-badge--stars:active {
      border-color: #ffd700;
    }

    .offer-badge--ton {
      border-color: rgba(0, 136, 204, 0.4);
      background: linear-gradient(135deg, rgba(0, 136, 204, 0.1), rgba(24, 24, 26, 0.88));
    }

    .offer-badge--ton:active {
      border-color: #00ff88;
    }

    .offer-badge__icon {
      font-size: clamp(1.4rem, 3.8vh, 1.65rem);
      line-height: 1;
    }

    .offer-icon-combo {
      position: relative;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: clamp(28px, 7vw, 34px);
      height: clamp(28px, 7vw, 34px);
      margin: 1px 0;
    }

    .offer-cone-img {
      width: clamp(23px, 5.8vw, 28px);
      height: clamp(23px, 5.8vw, 28px);
      object-fit: contain;
      filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.6));
    }

    /* Красный светящийся бейдж бесплатных попыток Мегакуба */
    .cube-counter-badge {
      position: absolute;
      top: -5px;
      right: -8px;
      background: linear-gradient(135deg, #ef4444, #dc2626);
      color: #ffffff;
      font-size: 10px;
      font-weight: 900;
      min-width: 17px;
      height: 17px;
      line-height: 17px;
      border-radius: 9px;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 0 3.5px;
      box-shadow: 0 0 10px rgba(239, 68, 68, 0.95), 0 0 20px rgba(220, 38, 38, 0.75);
      border: 1.5px solid #ffffff;
      z-index: 10;
      pointer-events: none;
      box-sizing: border-box;
      animation: pulseRedBadgeGlow 1.5s infinite ease-in-out;
    }

    @keyframes pulseRedBadgeGlow {
      0%, 100% {
        transform: scale(1);
        box-shadow: 0 0 8px rgba(239, 68, 68, 0.8), 0 0 16px rgba(220, 38, 38, 0.5);
      }
      50% {
        transform: scale(1.18);
        box-shadow: 0 0 14px rgba(255, 59, 48, 1), 0 0 26px rgba(239, 68, 68, 0.85);
      }
    }

    .offer-sub-badge {
      position: absolute;
      bottom: -3px;
      right: -4px;
      font-size: 11px;
      line-height: 1;
      background: rgba(14, 14, 18, 0.96);
      border-radius: 50%;
      padding: 1.5px;
      border: 1px solid rgba(255, 255, 255, 0.35);
      display: flex;
      align-items: center;
      justify-content: center;
      width: 16px;
      height: 16px;
    }

    .offer-sub-badge--mega {
      border-color: #00f2fe;
      box-shadow: 0 0 8px rgba(0, 242, 254, 0.85);
    }

    .offer-sub-badge--stars {
      border-color: #ffd700;
      box-shadow: 0 0 6px rgba(255, 215, 0, 0.7);
    }

    .offer-sub-badge--ton {
      border-color: #00ff88;
      box-shadow: 0 0 6px rgba(0, 255, 136, 0.7);
    }

    .balance-add-btn {
      width: 20px;
      height: 20px;
      border-radius: 50%;
      background: linear-gradient(135deg, #22c55e, #10b981);
      color: #ffffff;
      border: 1px solid rgba(255, 255, 255, 0.45);
      font-size: 14px;
      line-height: 1;
      font-weight: 900;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      margin-left: 5px;
      box-shadow: 0 2px 6px rgba(34, 197, 94, 0.5);
      transition: transform 0.12s, box-shadow 0.15s;
      flex-shrink: 0;
    }

    .balance-add-btn:active {
      transform: scale(0.85);
      box-shadow: 0 1px 3px rgba(34, 197, 94, 0.8);
    }

    .offer-badge__label {
      font-size: 9px;
      font-weight: 800;
      color: var(--text-secondary);
      margin-top: 2px;
      text-align: center;
      white-space: nowrap;
      letter-spacing: 0.02em;
    }

    /* Center Mascot */
    .home__center-mascot {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      z-index: 10;
      text-align: center;
      pointer-events: auto;
      user-select: none;
      -webkit-user-select: none;
      -webkit-tap-highlight-color: transparent;
      touch-action: manipulation;
    }

    .mascot-ambient-glow {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: clamp(140px, 38vw, 180px);
      height: clamp(140px, 38vw, 180px);
      background: radial-gradient(circle, rgba(251, 191, 36, 0.22) 0%, rgba(245, 158, 11, 0.08) 45%, transparent 70%);
      border-radius: 50%;
      pointer-events: none;
      z-index: -1;
      filter: blur(12px);
      animation: mascotAuraPulse 4s ease-in-out infinite alternate;
    }

    @keyframes mascotAuraPulse {
      0% {
        transform: translate(-50%, -50%) scale(0.9);
        opacity: 0.7;
      }
      100% {
        transform: translate(-50%, -50%) scale(1.15);
        opacity: 1;
      }
    }

    .mascot-character {
      font-size: clamp(3.4rem, 9.5vh, 5.0rem);
      filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.6));
      animation: floatMascot 4s ease-in-out infinite;
      transition: transform 0.08s ease;
      user-select: none;
      -webkit-user-select: none;
      display: inline-block;
    }

    .mascot-character.tap-squish {
      transform: scale(0.84) translateY(4px) !important;
      animation: none !important;
    }

    .mascot-character.tap-squish-heavy {
      transform: scale(0.76, 0.88) translateY(7px) !important;
      animation: none !important;
      filter: drop-shadow(0 0 16px rgba(251, 191, 36, 0.5));
    }

    @keyframes floatMascot {

      0%,
      100% {
        transform: translateY(0);
      }

      50% {
        transform: translateY(-4px);
      }
    }

    .mascot-speech-bubble {
      position: absolute;
      bottom: 100%;
      left: 50%;
      transform: translateX(-50%) translateY(-6px);
      background: rgba(22, 22, 26, 0.95);
      color: #ffd700;
      border: 1px solid rgba(255, 215, 0, 0.5);
      border-radius: 12px;
      padding: 6px 12px;
      font-size: 11px;
      font-weight: 800;
      white-space: pre-line;
      max-width: 88vw;
      width: max-content;
      text-align: center;
      line-height: 1.3;
      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.7);
      pointer-events: none;
      z-index: 30;
      animation: bubblePop 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    }

    .mascot-speech-bubble::after {
      content: '';
      position: absolute;
      top: 100%;
      left: 50%;
      transform: translateX(-50%);
      border-width: 6px;
      border-style: solid;
      border-color: rgba(255, 215, 0, 0.5) transparent transparent transparent;
    }

    .mascot-speech-bubble.shake {
      animation: bubbleShake 0.35s ease;
    }

    @keyframes bubblePop {
      0% {
        opacity: 0;
        transform: translateX(-50%) translateY(4px) scale(0.85);
      }

      100% {
        opacity: 1;
        transform: translateX(-50%) translateY(-6px) scale(1);
      }
    }

    @keyframes bubbleShake {

      0%,
      100% {
        transform: translateX(-50%) translateY(-6px) rotate(0deg);
      }

      25% {
        transform: translateX(-50%) translateY(-6px) rotate(-3deg);
      }

      75% {
        transform: translateX(-50%) translateY(-6px) rotate(3deg);
      }
    }

    .mascot-season-tag {
      margin-top: 3px;
      font-size: 8.5px;
      font-weight: 800;
      color: rgba(255, 255, 255, 0.65);
      letter-spacing: 0.08em;
      background: rgba(24, 24, 28, 0.9);
      padding: 3px 9px;
      border-radius: 12px;
      border: 1px solid rgba(255, 255, 255, 0.08);
      white-space: nowrap;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    }

    .mascot-tap-pill {
      margin-top: 4px;
      font-size: 9.5px;
      font-weight: 800;
      color: #fbbf24;
      background: linear-gradient(135deg, rgba(251, 191, 36, 0.15) 0%, rgba(217, 119, 6, 0.1) 100%);
      border: 1px solid rgba(251, 191, 36, 0.38);
      padding: 3px 10px;
      border-radius: 12px;
      display: inline-flex;
      align-items: center;
      gap: 4px;
      user-select: none;
      transition: all 0.15s ease;
      white-space: nowrap;
      box-shadow: 0 2px 10px rgba(251, 191, 36, 0.15);
    }

    .mascot-tap-pill .cone-icon {
      width: 11px;
      height: 11px;
      vertical-align: middle;
      filter: drop-shadow(0 0 4px rgba(255, 180, 0, 0.6));
    }

    .mascot-tap-pill.is-tired {
      color: #ff9800;
      background: rgba(255, 152, 0, 0.12);
      border-color: rgba(255, 152, 0, 0.4);
    }

    .mascot-floating-cone {
      position: absolute;
      pointer-events: none;
      user-select: none;
      font-size: 16px;
      font-weight: 900;
      color: #ffd700;
      text-shadow: 0 2px 8px rgba(0, 0, 0, 0.9);
      z-index: 25;
      display: inline-flex;
      align-items: center;
      gap: 3px;
      animation: floatConeUp 0.75s ease-out forwards;
    }

    .mascot-floating-cone .cone-icon {
      width: 16px;
      height: 16px;
      vertical-align: middle;
      filter: drop-shadow(0 0 6px rgba(255, 180, 0, 0.8));
    }

    @keyframes floatConeUp {
      0% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(0.9);
      }

      40% {
        opacity: 1;
        transform: translate(-50%, calc(-50% - 28px)) scale(1.2);
      }

      100% {
        opacity: 0;
        transform: translate(-50%, calc(-50% - 52px)) scale(0.8);
      }
    }

    /* Home Bottom Action Bar (Always Locked & Ultra Visible) */
    .home__bottom {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 6px 12px 10px;
      gap: 10px;
      width: 100%;
      flex-shrink: 0;
      background: transparent;
      border-top: none;
      box-sizing: border-box;
      z-index: 20;
    }

    .home__bottom-btn {
      width: clamp(52px, 14.2vw, 64px);
      height: clamp(52px, 14.2vw, 64px);
      border-radius: 16px;
      background: linear-gradient(180deg, rgba(30, 30, 36, 0.92) 0%, rgba(20, 20, 24, 0.96) 100%);
      backdrop-filter: blur(14px);
      -webkit-backdrop-filter: blur(14px);
      border: 1px solid rgba(255, 255, 255, 0.09);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      flex-shrink: 0;
      box-sizing: border-box;
      transition: transform 0.12s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.15s, box-shadow 0.15s;
      position: relative;
      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.08);
    }

    .home__bottom-btn:active {
      transform: scale(0.92);
      border-color: rgba(255, 255, 255, 0.3);
    }

    .home__bottom-icon {
      font-size: 1.45rem;
      line-height: 1;
    }

    .home__bottom-btn-label {
      font-size: 8.5px;
      font-weight: 800;
      color: var(--text-secondary);
      margin-top: 2.5px;
      text-align: center;
      white-space: nowrap;
      letter-spacing: 0.02em;
    }

    /* ==================== HOLLOW (ДУПЛО) STYLING ==================== */
    .home__bottom-btn.bonus-ready {
      border-color: rgba(255, 215, 0, 0.75);
      box-shadow: 0 0 16px rgba(255, 215, 0, 0.45);
      animation: bonusPulse 2.2s infinite;
    }

    @keyframes bonusPulse {

      0%,
      100% {
        box-shadow: 0 0 8px rgba(255, 215, 0, 0.25);
        border-color: rgba(255, 215, 0, 0.5);
      }

      50% {
        box-shadow: 0 0 20px rgba(255, 215, 0, 0.85);
        border-color: rgba(255, 215, 0, 1);
      }
    }

    .home-bonus-badge {
      position: absolute;
      top: -6px;
      right: -4px;
      background: linear-gradient(135deg, #ffd700, #ff9500);
      color: #000000;
      font-size: 8.5px;
      font-weight: 900;
      padding: 2px 5px;
      border-radius: 7px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
      pointer-events: none;
      display: none;
      z-index: 5;
      white-space: nowrap;
      border: 0.5px solid rgba(255, 255, 255, 0.6);
    }

    .bonus-ready .home-bonus-badge {
      display: block;
      animation: badgeBounce 1.5s ease-in-out infinite;
    }

    .home-pack-badge {
      left: -4px;
      right: auto;
      background: linear-gradient(135deg, #c084fc, #7c3aed);
      color: #fff;
    }

    @keyframes badgeBounce {

      0%,
      100% {
        transform: scale(1);
      }

      50% {
        transform: scale(1.12);
      }
    }

    .home__bottom-btn.bonus-cooldown .home__bottom-btn-label {
      color: #ffd700;
      font-family: -apple-system, BlinkMacSystemFont, 'Roboto', monospace;
      font-size: 8px;
      font-weight: 800;
      letter-spacing: -0.02em;
    }

    .hollow-modal {
      position: relative !important;
      width: 92% !important;
      max-width: 390px !important;
      max-height: 90vh;
      overflow-y: auto;
      overflow-x: hidden;
      box-sizing: border-box;
      padding: 16px 16px !important;
      text-align: center;
      background: linear-gradient(180deg, #1c1813 0%, #111113 100%) !important;
      border: 1px solid rgba(255, 180, 0, 0.45) !important;
      border-radius: 24px !important;
      box-shadow: 0 16px 48px rgba(0, 0, 0, 0.95), 0 0 35px rgba(255, 180, 0, 0.25) !important;
    }

    .hollow-modal__header {
      margin-bottom: 8px;
      text-align: left;
      padding-right: 36px;
      box-sizing: border-box;
    }

    .hollow-modal__title-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
    }

    .hollow-modal__title {
      font-size: 1.2rem;
      font-weight: 900;
      color: #ffd700;
      margin: 0;
      display: flex;
      align-items: center;
      gap: 6px;
    }

    .hollow-lvl-badge {
      background: linear-gradient(135deg, rgba(255, 215, 0, 0.25), rgba(255, 150, 0, 0.15));
      border: 1px solid rgba(255, 215, 0, 0.6);
      color: #ffd700;
      font-size: 10px;
      font-weight: 900;
      padding: 3px 8px;
      border-radius: 12px;
      letter-spacing: 0.04em;
      white-space: nowrap;
    }

    .hollow-modal__desc {
      font-size: 0.74rem;
      line-height: 1.35;
      color: var(--text-secondary);
      margin: 3px 0 0 0;
    }

    .hollow-hero-wrap {
      position: relative;
      width: 100%;
      height: 135px;
      border-radius: 16px;
      overflow: hidden;
      margin-bottom: 8px;
      border: 1px solid rgba(255, 215, 0, 0.35);
      box-shadow: 0 6px 20px rgba(0, 0, 0, 0.6);
    }

    .hollow-hero-img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }

    .hollow-hero-overlay {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      background: linear-gradient(0deg, rgba(14, 14, 16, 0.95) 0%, rgba(14, 14, 16, 0.4) 65%, transparent 100%);
      padding: 6px 10px 6px;
      display: flex;
      align-items: flex-end;
      justify-content: center;
    }

    .hollow-hero-yield {
      display: flex;
      align-items: center;
      gap: 5px;
      background: rgba(20, 20, 24, 0.88);
      border: 0.5px solid rgba(255, 215, 0, 0.5);
      border-radius: 10px;
      padding: 3px 8px;
      backdrop-filter: blur(8px);
    }

    .hollow-hero-yield-label {
      font-size: 8.5px;
      color: var(--text-secondary);
      font-weight: 700;
    }

    .hollow-hero-yield-val {
      font-size: 12px;
      font-weight: 900;
      color: #ffd700;
      display: flex;
      align-items: center;
      gap: 2px;
    }

    .hollow-harvest-card {
      background: radial-gradient(circle at center, rgba(255, 215, 0, 0.08), rgba(20, 20, 24, 0.6));
      border: 1px solid rgba(255, 215, 0, 0.3);
      border-radius: 14px;
      padding: 8px 10px;
      margin-bottom: 8px;
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    .hollow-claim-btn {
      width: 100%;
      padding: 11px;
      font-size: 0.9rem;
      font-weight: 900;
      border-radius: 12px;
      background: linear-gradient(135deg, #ffd700, #ff9500);
      color: #000000;
      border: none;
      box-shadow: 0 4px 18px rgba(255, 215, 0, 0.45);
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      transition: transform 0.125s ease, filter 0.15s;
    }

    .hollow-claim-btn:active {
      transform: scale(0.96);
    }

    .hollow-upgrade-section {
      background: rgba(20, 20, 24, 0.7);
      border: 0.5px solid rgba(255, 255, 255, 0.12);
      border-radius: 14px;
      padding: 9px 10px;
      margin-bottom: 8px;
      text-align: left;
      box-sizing: border-box;
      width: 100%;
      overflow: hidden;
    }

    .hollow-upgrade-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 6px;
    }

    .hollow-upgrade-title {
      font-size: 0.8rem;
      font-weight: 800;
      color: #ffffff;
    }

    .hollow-upgrade-bonus {
      font-size: 8.5px;
      font-weight: 800;
      color: #00ff88;
      background: rgba(0, 255, 136, 0.12);
      border: 0.5px solid rgba(0, 255, 136, 0.35);
      padding: 2px 5px;
      border-radius: 6px;
    }

    .hollow-upgrade-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 6px;
    }

    .hollow-upgrade-btn {
      padding: 7px 5px;
      border-radius: 10px;
      border: 1px solid var(--border-subtle);
      background: rgba(26, 26, 30, 0.9);
      cursor: pointer;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 2px;
      transition: all 0.15s ease;
    }

    .hollow-upgrade-btn:active {
      transform: scale(0.95);
    }

    .hollow-upgrade-btn--cones {
      border-color: rgba(255, 215, 0, 0.4);
    }

    .hollow-upgrade-btn--cones:active {
      border-color: #ffd700;
      background: rgba(255, 215, 0, 0.12);
    }

    .hollow-upgrade-btn--gram {
      border-color: rgba(0, 136, 204, 0.4);
    }

    .hollow-upgrade-btn--gram:active {
      border-color: #00ff88;
      background: rgba(0, 136, 204, 0.12);
    }

    .hollow-upgrade-btn__top {
      font-size: 8.5px;
      font-weight: 700;
      color: var(--text-secondary);
      display: flex;
      align-items: center;
      gap: 3px;
    }

    .hollow-upgrade-btn__price {
      font-size: 11px;
      font-weight: 900;
      color: #ffffff;
    }

    .hollow-upgrade-btn--cones .hollow-upgrade-btn__price {
      color: #ffd700;
    }

    .hollow-upgrade-btn--gram .hollow-upgrade-btn__price {
      color: #00ff88;
    }

    .hollow-max-level-box {
      font-size: 0.8rem;
      font-weight: 800;
      color: #ffd700;
      text-align: center;
      padding: 6px;
    }

    .hollow-starter-card {
      background: linear-gradient(135deg, rgba(255, 215, 0, 0.16), rgba(156, 39, 176, 0.18));
      border: 1px solid rgba(255, 215, 0, 0.55);
      border-radius: 14px;
      padding: 8px 10px;
      text-align: left;
      position: relative;
      box-shadow: 0 4px 16px rgba(255, 215, 0, 0.18);
    }

    .hollow-starter-card__tag {
      font-size: 7.5px;
      font-weight: 900;
      color: #ffd700;
      letter-spacing: 0.06em;
      margin-bottom: 1px;
    }

    .hollow-starter-card__title {
      font-size: 0.9rem;
      font-weight: 900;
      color: #ffffff;
    }

    .hollow-starter-card__desc {
      font-size: 0.72rem;
      color: var(--text-secondary);
      margin: 1px 0 6px;
    }

    .hollow-starter-card__btn {
      width: 100%;
      padding: 8px;
      font-size: 0.82rem;
      font-weight: 900;
      border-radius: 8px;
      background: linear-gradient(135deg, #0088cc, #9c27b0);
      color: #ffffff;
      border: none;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 5px;
      box-shadow: 0 4px 14px rgba(0, 136, 204, 0.4);
      transition: transform 0.125s ease;
    }

    .hollow-starter-card__btn:active {
      transform: scale(0.96);
    }

    .hollow-mega-cone-box {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      background: linear-gradient(135deg, rgba(168, 85, 247, 0.15), rgba(6, 182, 212, 0.15));
      border: 1px solid rgba(168, 85, 247, 0.4);
      border-radius: 14px;
      padding: 8px 10px;
      margin-top: 8px;
      box-sizing: border-box;
      width: 100%;
      max-width: 100%;
      overflow: hidden;
    }

    .hollow-mega-cone-left {
      display: flex;
      align-items: center;
      gap: 8px;
      min-width: 0;
      flex: 1;
    }

    .hollow-mega-cone-img {
      width: 28px;
      height: 28px;
      object-fit: contain;
      filter: drop-shadow(0 0 6px rgba(168, 85, 247, 0.6));
      flex-shrink: 0;
    }

    .hollow-mega-cone-info {
      text-align: left;
      min-width: 0;
      overflow: hidden;
    }

    .hollow-mega-cone-name {
      font-size: 0.78rem;
      font-weight: 800;
      color: #e9d5ff;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .hollow-mega-cone-inv {
      font-size: 0.68rem;
      color: var(--text-muted);
      white-space: nowrap;
    }

    .hollow-use-mega-btn {
      background: linear-gradient(135deg, #9333ea, #06b6d4);
      color: #fff;
      border: none;
      border-radius: 9px;
      padding: 6px 10px;
      font-size: 0.72rem;
      font-weight: 800;
      cursor: pointer;
      text-transform: uppercase;
      letter-spacing: 0.02em;
      box-shadow: 0 2px 8px rgba(147, 51, 234, 0.4);
      transition: all 0.15s ease;
      flex-shrink: 0;
      white-space: nowrap;
    }

    .hollow-use-mega-btn:active {
      transform: scale(0.96);
    }

    .hollow-use-mega-btn:disabled {
      opacity: 0.5;
      cursor: not-allowed;
      box-shadow: none;
    }

    /* Boar Invasion Card */
    .hollow-boar-card {
      width: 100%;
      background: linear-gradient(135deg, rgba(239, 68, 68, 0.18) 0%, rgba(185, 28, 28, 0.28) 100%);
      border: 2px solid rgba(239, 68, 68, 0.7);
      border-radius: 16px;
      padding: 12px 14px;
      margin-bottom: 12px;
      box-sizing: border-box;
      box-shadow: 0 0 20px rgba(239, 68, 68, 0.25);
      animation: boarPulse 2s infinite alternate;
    }

    @keyframes boarPulse {
      0% {
        border-color: rgba(239, 68, 68, 0.5);
        box-shadow: 0 0 10px rgba(239, 68, 68, 0.2);
      }

      100% {
        border-color: rgba(239, 68, 68, 0.95);
        box-shadow: 0 0 22px rgba(239, 68, 68, 0.45);
      }
    }

    .hollow-boar-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 8px;
    }

    .hollow-boar-badge {
      background: #ef4444;
      color: #fff;
      font-size: 0.72rem;
      font-weight: 800;
      padding: 3px 8px;
      border-radius: 6px;
      letter-spacing: 0.5px;
      text-transform: uppercase;
    }

    .hollow-boar-rate {
      color: #fca5a5;
      font-weight: 800;
      font-size: 0.82rem;
    }

    .hollow-boar-body {
      font-size: 0.8rem;
      color: #fecaca;
      line-height: 1.4;
      margin-bottom: 10px;
    }

    .hollow-boar-eaten {
      margin-top: 6px;
      font-size: 0.82rem;
      color: #fff;
    }

    .hollow-boar-eaten b {
      color: #f87171;
      font-size: 0.95rem;
    }

    .hollow-chase-boar-btn {
      width: 100%;
      background: linear-gradient(135deg, #ef4444 0%, #b91c1c 100%);
      color: #ffffff;
      border: 1px solid rgba(255, 255, 255, 0.3);
      border-radius: 12px;
      padding: 12px 16px;
      font-size: 0.92rem;
      font-weight: 800;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      box-shadow: 0 4px 14px rgba(239, 68, 68, 0.4);
      transition: transform 0.1s ease, filter 0.2s ease;
    }

    .hollow-chase-boar-btn:active {
      transform: scale(0.96);
      filter: brightness(0.9);
    }

    .bonus-timer-grid {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      margin: 6px 0 4px;
    }

    .bonus-timer-box {
      background: #18181a;
      border: 1px solid rgba(255, 255, 255, 0.15);
      border-radius: 10px;
      padding: 4px 7px;
      min-width: 40px;
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    .bonus-timer-box span {
      font-family: -apple-system, BlinkMacSystemFont, 'Roboto', monospace;
      font-size: 1.1rem;
      font-weight: 800;
      color: #FFFFFF;
      line-height: 1.1;
    }

    .bonus-timer-box label {
      font-size: 7px;
      font-weight: 700;
      color: var(--text-secondary);
      text-transform: uppercase;
      margin-top: 1px;
    }

    .bonus-timer-sep {
      font-size: 1.1rem;
      font-weight: 800;
      color: var(--text-secondary);
      margin-top: -6px;
    }

    .bonus-progress-track {
      width: 100%;
      height: 4px;
      background: rgba(255, 255, 255, 0.1);
      border-radius: 4px;
      overflow: hidden;
      margin-top: 6px;
    }

    .bonus-progress-fill {
      height: 100%;
      background: linear-gradient(90deg, #ffd700, #33BD1C);
      border-radius: 4px;
      transition: width 0.3s ease;
    }

    .home__play-main-btn {
      flex: 1;
      height: 52px;
      border-radius: 16px;
      font-size: 17px;
      font-weight: 900;
      letter-spacing: 0.06em;
      background: linear-gradient(135deg, #FF453A 0%, #FF3B30 45%, #D32F2F 100%) !important;
      color: #FFFFFF !important;
      border: 1.5px solid rgba(255, 255, 255, 0.45) !important;
      box-shadow: 0 8px 26px rgba(255, 59, 48, 0.55), 0 2px 6px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.65) !important;
      text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      animation: playBtnGlow 2.5s infinite alternate ease-in-out;
      position: relative;
      overflow: hidden;
      cursor: pointer;
    }

    .home__play-main-btn:active {
      transform: scale(0.96) !important;
      box-shadow: 0 4px 14px rgba(255, 59, 48, 0.7) !important;
    }

    .home__play-main-btn.disabled,
    .home__play-main-btn:disabled {
      opacity: 0.55 !important;
      filter: grayscale(85%) !important;
      cursor: not-allowed !important;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4) !important;
      animation: none !important;
    }

    .home__play-main-btn::after {
      content: '';
      position: absolute;
      top: -50%;
      left: -50%;
      width: 200%;
      height: 200%;
      background: linear-gradient(60deg, transparent, rgba(255, 255, 255, 0.3), transparent);
      transform: rotate(30deg);
      animation: btnShimmer 3.5s infinite;
      pointer-events: none;
    }

    @keyframes playBtnGlow {
      0% {
        box-shadow: 0 4px 18px rgba(255, 59, 48, 0.65), 0 0 12px rgba(255, 69, 58, 0.35);
        transform: scale(1);
      }

      100% {
        box-shadow: 0 6px 24px rgba(255, 59, 48, 0.95), 0 0 20px rgba(255, 69, 58, 0.6);
        transform: scale(1.02);
      }
    }

    @keyframes btnShimmer {
      0% {
        transform: translateX(-100%) rotate(30deg);
      }

      20%,
      100% {
        transform: translateX(100%) rotate(30deg);
      }
    }

    /* ============================================================
       КОМПЛЕКСНАЯ АДАПТАЦИЯ ДЛЯ НЕБОЛЬШИХ ЭКРАНОВ (ОКНА И ШРИФТЫ)
       ============================================================ */

    /* 1. Масштабирование шрифта на компактных экранах */
    html.screen-sm {
      font-size: 15px;
    }

    html.screen-xs {
      font-size: 13.5px;
    }

    /* 2. Адаптация модальных окон (.tutorial-modal, диалоги, попапы) */
    html.screen-sm .tutorial-modal,
    html.screen-short .tutorial-modal {
      padding: 14px 14px;
      border-radius: 20px;
      max-height: min(88vh, 88dvh, calc(var(--app-vh, 100vh) * 0.90));
    }

    html.screen-sm .tutorial-icon-wrap,
    html.screen-short .tutorial-icon-wrap {
      width: 50px;
      height: 50px;
      border-radius: 14px;
      margin-bottom: 8px;
    }

    html.screen-sm .tutorial-icon,
    html.screen-short .tutorial-icon {
      font-size: 1.8rem;
    }

    html.screen-sm .tutorial-title,
    html.screen-short .tutorial-title {
      font-size: 1.12rem;
      margin-bottom: 6px;
      padding-left: 16px;
      padding-right: 16px;
    }

    html.screen-sm .tutorial-text,
    html.screen-short .tutorial-text {
      font-size: 0.8rem;
      line-height: 1.3;
      margin-bottom: 12px;
    }

    html.screen-sm .tutorial-btn,
    html.screen-short .tutorial-btn {
      padding: 10px 16px;
      font-size: 0.88rem;
      border-radius: 14px;
    }

    html.screen-sm .close-modal-btn,
    html.screen-short .close-modal-btn {
      width: 30px;
      height: 30px;
      font-size: 13px;
      top: 8px;
      right: 8px;
    }

    /* Экстра-маленькие экраны (<= 345px или <= 580px высота) */
    html.screen-xs .tutorial-modal,
    html.screen-tiny-h .tutorial-modal {
      padding: 10px 10px;
      border-radius: 16px;
      max-height: min(92vh, 92dvh, calc(var(--app-vh, 100vh) * 0.94));
    }

    html.screen-xs .tutorial-icon-wrap,
    html.screen-tiny-h .tutorial-icon-wrap {
      width: 40px;
      height: 40px;
      border-radius: 11px;
      margin-bottom: 5px;
    }

    html.screen-xs .tutorial-icon,
    html.screen-tiny-h .tutorial-icon {
      font-size: 1.45rem;
    }

    html.screen-xs .tutorial-title,
    html.screen-tiny-h .tutorial-title {
      font-size: 1.0rem;
      margin-bottom: 4px;
    }

    html.screen-xs .tutorial-text,
    html.screen-tiny-h .tutorial-text {
      font-size: 0.74rem;
      line-height: 1.25;
      margin-bottom: 8px;
    }

    html.screen-xs .tutorial-btn,
    html.screen-tiny-h .tutorial-btn {
      padding: 8px 12px;
      font-size: 0.82rem;
      border-radius: 12px;
    }

    /* 3. Адаптация нижних штор (Bottom Sheets) */
    html.screen-sm .bottom-sheet__block,
    html.screen-short .bottom-sheet__block {
      max-height: min(85vh, 85dvh);
      padding: 8px 12px calc(var(--nav-height) + env(safe-area-inset-bottom, 0px) + 8px);
    }

    html.screen-sm .play-bottom-sheet__grid,
    html.screen-short .play-bottom-sheet__grid {
      gap: 6px;
    }

    html.screen-sm .play-bottom-sheet__button,
    html.screen-short .play-bottom-sheet__button {
      padding: 9px 10px;
    }

    html.screen-sm .play-bottom-sheet__title,
    html.screen-short .play-bottom-sheet__title {
      font-size: 0.85rem;
    }

    html.screen-sm .play-bottom-sheet__icon,
    html.screen-short .play-bottom-sheet__icon {
      font-size: 1.25rem;
    }

    html.screen-sm .play-bottom-sheet__description,
    html.screen-short .play-bottom-sheet__description {
      font-size: 0.7rem;
      line-height: 1.2;
    }

    html.screen-xs .play-bottom-sheet__button,
    html.screen-tiny-h .play-bottom-sheet__button {
      padding: 7px 8px;
    }

    html.screen-xs .play-bottom-sheet__title,
    html.screen-tiny-h .play-bottom-sheet__title {
      font-size: 0.8rem;
    }

    html.screen-xs .play-bottom-sheet__description,
    html.screen-tiny-h .play-bottom-sheet__description {
      font-size: 0.65rem;
    }

    /* 4. Адаптация нижней панели навигации (.nav) */
    html.screen-sm .nav {
      padding: 0 3px;
      gap: 2px;
      height: 56px;
    }

    html.screen-sm .nav__item {
      padding: 4px 1px;
      font-size: 8.5px;
    }

    html.screen-sm .nav__item .nav-icon {
      font-size: 1.18rem;
    }

    html.screen-xs .nav {
      padding: 0 1px;
      gap: 0;
      height: 52px;
    }

    html.screen-xs .nav__item {
      padding: 3px 0;
      font-size: 7.8px;
      letter-spacing: -0.3px;
    }

    html.screen-xs .nav__item .nav-icon {
      font-size: 1.05rem;
    }

    /* 5. Адаптация верхней панели и шапки (.home__title, бейджи, рейтинг) */
    html.screen-sm .home__title {
      padding: 4px 8px;
      gap: 4px;
      min-height: 44px;
    }

    html.screen-sm .home__title-badges {
      gap: 3px;
    }

    html.screen-sm .badge-icon-button {
      padding: 2px;
    }

    html.screen-sm .badge-icon-button__icon {
      width: 30px;
      height: 30px;
      font-size: 1.15rem;
    }

    html.screen-sm .badge-icon-button__badge {
      font-size: 8px;
      padding: 1px 3px;
    }

    html.screen-sm .home-leaderboard {
      padding: 2px 6px;
      gap: 4px;
    }

    html.screen-sm .home-leaderboard__username {
      max-width: 60px;
      font-size: 11px;
    }

    html.screen-xs .home__title {
      padding: 3px 5px;
      gap: 2px;
    }

    html.screen-xs .home__title-badges {
      gap: 2px;
    }

    html.screen-xs .badge-icon-button__icon {
      width: 26px;
      height: 26px;
      font-size: 1.05rem;
    }

    html.screen-xs .badge-icon-button__badge {
      font-size: 7px;
      padding: 0 2px;
    }

    html.screen-xs .home-leaderboard__username {
      max-width: 46px;
      font-size: 10px;
    }

    /* 6. Адаптация главного меню и кнопок действий */
    html.screen-sm .home__profile-buttons {
      padding: 4px 8px 0;
      gap: 4px;
    }

    html.screen-sm .home__profile {
      padding: 5px 6px;
      font-size: 11.5px;
    }

    html.screen-short .home__bottom-container {
      padding: 2px 10px;
    }

    html.screen-short .home__bottom-left-column,
    html.screen-short .home__bottom-right {
      gap: 4px;
      width: 44px;
      margin-top: 10px;
    }

    html.screen-short .offer-badge {
      width: 44px;
      height: 44px;
    }

    html.screen-short .offer-badge__icon {
      font-size: 1.25rem;
    }

    html.screen-short .offer-badge__label {
      font-size: 7.5px;
    }

    html.screen-short .mascot-character {
      font-size: 3.0rem;
    }

    html.screen-short .mascot-season-tag {
      font-size: 7px;
      padding: 1px 4px;
    }

    html.screen-short .home__bottom {
      padding: 6px 10px 6px;
      gap: 6px;
    }

    html.screen-short .home__bottom-btn {
      width: 44px;
      height: 44px;
      border-radius: 12px;
    }

    html.screen-short .home__play-main-btn {
      height: 46px;
      font-size: 15px;
    }

    html.screen-tiny-h .home-leaderboard {
      display: none;
    }

    html.screen-tiny-h .offer-badge {
      width: 38px;
      height: 38px;
    }

    html.screen-tiny-h .offer-badge__label {
      display: none;
    }

    html.screen-tiny-h .mascot-character {
      font-size: 2.2rem;
    }

    html.screen-tiny-h .home__bottom-btn {
      width: 38px;
      height: 38px;
      border-radius: 10px;
    }

    html.screen-tiny-h .home__play-main-btn {
      height: 40px;
      font-size: 13.5px;
    }

    /* Стандартные Fallback Media Queries */
    @media (max-width: 385px) {
      .home__title {
        padding: 4px 6px;
        gap: 4px;
      }

      .badge-icon-button__icon {
        width: 28px;
        height: 28px;
        font-size: 1.15rem;
      }

      .badge-icon-button__badge {
        font-size: 7.5px;
        padding: 1px 3px;
      }

      .home-leaderboard__username {
        max-width: 60px;
        font-size: 11px;
      }
    }

    @media (max-width: 345px) {
      .home__title {
        padding: 3px 4px;
        gap: 2px;
      }

      .badge-icon-button__icon {
        width: 25px;
        height: 25px;
        font-size: 1rem;
      }

      .home-leaderboard__username {
        max-width: 45px;
        font-size: 9.5px;
      }

      .nav__item {
        font-size: 7.8px;
      }
    }

    @media (max-height: 660px) {
      .home__title {
        min-height: 42px;
        padding: 3px 8px;
      }

      .home__bottom {
        padding: 6px 8px;
        gap: 6px;
      }

      .home__bottom-container {
        padding: 4px 8px;
      }

      .home__bottom-left-column,
      .home__bottom-right {
        width: 44px;
        margin-top: 10px;
      }

      .offer-badge {
        width: 44px;
        height: 44px;
      }

      .mascot-character {
        font-size: 2.8rem;
      }

      .home__play-main-btn {
        height: 44px;
        font-size: 14px;
      }

      .home__bottom-btn {
        width: 44px;
        height: 44px;
      }
    }

    @media (max-height: 560px) {
      .home-leaderboard {
        display: none;
      }

      .home__bottom-container {
        padding: 2px 6px;
      }

      .home__bottom {
        padding: 4px 6px;
        gap: 4px;
      }

      .home__bottom-left-column,
      .home__bottom-right {
        width: 38px;
        margin-top: 6px;
      }

      .offer-badge {
        width: 38px;
        height: 38px;
      }

      .mascot-character {
        font-size: 2.2rem;
      }

      .home__play-main-btn {
        height: 38px;
        font-size: 13px;
      }

      .home__bottom-btn {
        width: 38px;
        height: 38px;
      }
    }

    /* CapsGame Bottom Sheet (Play Sheet & Modals) */
    .bottom-sheet__wrapper {
      position: fixed;
      inset: 0;
      z-index: 1000;
      display: flex;
      align-items: flex-end;
      visibility: hidden;
      opacity: 0;
      pointer-events: none;
      transition: visibility 0.26s ease, opacity 0.26s ease;
    }

    .bottom-sheet__wrapper.active {
      visibility: visible;
      opacity: 1;
      pointer-events: auto;
    }

    .bottom-sheet__backdrop {
      position: absolute;
      inset: 0;
      background: rgba(0, 0, 0, 0.7);
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      opacity: 0;
      transition: opacity 0.26s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .bottom-sheet__wrapper.active .bottom-sheet__backdrop {
      opacity: 1;
    }

    .bottom-sheet__block {
      position: relative;
      width: 100%;
      background-color: var(--bg-secondary);
      border-radius: 24px 24px 0 0;
      padding: 10px 16px calc(var(--nav-height) + env(safe-area-inset-bottom, 0px) + 14px);
      max-height: 85vh;
      overflow-y: auto;
      border-top: 0.5px solid var(--border-subtle);
      box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.75);
      transform: translateY(100%);
      transition: transform 0.26s cubic-bezier(0.16, 1, 0.3, 1);
      touch-action: pan-y;
      will-change: transform;
    }

    .bottom-sheet__wrapper.active .bottom-sheet__block {
      transform: translateY(0);
    }

    .bottom-sheet__divider-wrap {
      width: 100%;
      padding: 4px 0 12px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      cursor: grab;
      touch-action: none;
      user-select: none;
      -webkit-user-select: none;
    }

    .bottom-sheet__divider-wrap:active {
      cursor: grabbing;
    }

    .bottom-sheet__divider {
      width: 50px;
      height: 5px;
      border-radius: 5px;
      background-color: rgba(255, 255, 255, 0.4);
      margin: 0 auto;
      transition: background-color 0.15s, transform 0.15s;
    }

    .bottom-sheet__divider-wrap:active .bottom-sheet__divider {
      background-color: rgba(255, 255, 255, 0.75);
      transform: scaleX(1.1);
    }

    .play-sheet-header-panel {
      margin-bottom: 12px;
      position: sticky;
      top: 0;
      z-index: 5;
    }

    .play-sheet-energy-badge {
      font-size: 13px;
      background: linear-gradient(135deg, rgba(34, 197, 94, 0.15), rgba(18, 18, 24, 0.95));
      border: 1px solid rgba(34, 197, 94, 0.35);
      box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
      padding: 11px 15px;
      border-radius: 16px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
    }

    .play-sheet-energy-title {
      display: flex;
      align-items: center;
      gap: 6px;
      color: #ffffff;
      font-weight: 700;
      font-size: 0.85rem;
    }

    .play-sheet-energy-val {
      color: #22c55e;
      font-weight: 800;
      font-size: 0.88rem;
      text-shadow: 0 0 10px rgba(34, 197, 94, 0.4);
    }

    .play-bottom-sheet__block {
      margin-bottom: 12px;
    }

    .play-bottom-sheet__energy {
      font-size: 13px;
      color: var(--text-secondary);
      background: var(--bg-elevated);
      padding: 10px 14px;
      border-radius: 14px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      border: 0.5px solid var(--border-subtle);
    }

    .play-bottom-sheet__energy span {
      color: var(--accent-green);
      font-weight: 700;
    }

    .play-bottom-sheet__grid {
      display: flex;
      flex-direction: column;
      gap: 9px;
    }

    .play-bottom-sheet__button {
      width: 100%;
      background-color: var(--bg-elevated);
      border: 0.5px solid var(--border-subtle);
      border-radius: 16px;
      padding: 12px 14px;
      text-align: left;
      cursor: pointer;
      transition: transform 0.125s ease-in-out, border-color 0.15s, background-color 0.15s;
    }

    .play-bottom-sheet__button:active {
      transform: scale(0.98);
      border-color: var(--btn-red);
      background-color: var(--bg-elevated-hover);
    }

    .play-bottom-sheet__button.disabled,
    .play-bottom-sheet__button:disabled {
      opacity: 0.42 !important;
      filter: grayscale(80%) !important;
      cursor: not-allowed !important;
      pointer-events: none !important;
    }

    .play-bottom-sheet__title {
      font-size: 14px;
      font-weight: 700;
      color: #FFFFFF;
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 3px;
    }

    .play-bottom-sheet__icon {
      font-size: 1.35rem;
      margin-right: 6px;
    }

    .play-bottom-sheet__fee {
      font-size: 11px;
      font-weight: 700;
    }

    .play-mode-reward-badge {
      display: inline-flex;
      align-items: center;
      gap: 3px;
      padding: 3px 8px;
      border-radius: 8px;
      background: rgba(255, 215, 0, 0.12);
      border: 1px solid rgba(255, 215, 0, 0.3);
      color: #ffd700;
      font-size: 11px;
      font-weight: 800;
      letter-spacing: 0.02em;
    }

    .play-mode-reward-badge--raid {
      background: rgba(239, 68, 68, 0.14);
      border-color: rgba(239, 68, 68, 0.35);
      color: #f87171;
    }

    .play-mode-reward-badge--gold {
      background: linear-gradient(135deg, rgba(255, 215, 0, 0.25), rgba(255, 149, 0, 0.25));
      border-color: rgba(255, 215, 0, 0.5);
      color: #ffd700;
      text-shadow: 0 0 8px rgba(255, 215, 0, 0.5);
    }

    .play-mode-reward-badge--pink {
      background: rgba(236, 72, 153, 0.16);
      border-color: rgba(236, 72, 153, 0.4);
      color: #f472b6;
    }

    .play-bottom-sheet__description {
      font-size: 11px;
      color: var(--text-secondary);
      line-height: 1.35;
    }

    /* CapsGame Navigation Dock */
    .nav {
      position: fixed;
      bottom: calc(env(safe-area-inset-bottom, 0px) + 8px);
      left: 10px;
      right: 10px;
      max-width: 456px;
      margin: 0 auto;
      height: var(--nav-height);
      background: linear-gradient(180deg, rgba(28, 28, 34, 0.90) 0%, rgba(18, 18, 22, 0.95) 100%);
      backdrop-filter: blur(20px) saturate(180%);
      -webkit-backdrop-filter: blur(20px) saturate(180%);
      border: 1px solid rgba(255, 255, 255, 0.12);
      border-radius: 22px;
      display: flex;
      align-items: center;
      justify-content: space-around;
      padding: 0 4px;
      z-index: 100;
      box-shadow: 0 12px 40px rgba(0, 0, 0, 0.65), inset 0 1px 0 rgba(255, 255, 255, 0.12);
      box-sizing: border-box;
    }

    .nav__item {
      background: transparent;
      border: none;
      color: var(--text-secondary);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 1px;
      flex: 1;
      min-width: 0;
      padding: 5px 1px;
      cursor: pointer;
      font-size: 9.5px;
      font-weight: 600;
      transition: all 0.15s ease-in-out;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .nav__item:active {
      transform: scale(0.92);
    }

    .nav__item .nav-icon {
      font-size: 1.35rem;
      transition: transform 0.15s ease;
      line-height: 1;
    }

    .nav__item--active {
      color: #FFFFFF;
      font-weight: 800;
    }

    .nav__item--active .nav-icon {
      transform: translateY(-2px);
      filter: drop-shadow(0 0 8px rgba(239, 68, 68, 0.7));
    }

    /* List Item Cards (Quests, Games, News) */
    .section-title {
      font-size: 1.3rem;
      font-weight: 800;
      color: #FFFFFF;
      letter-spacing: 0.02em;
      margin-bottom: 8px;
    }

    .list-item {
      background-color: var(--bg-secondary);
      border: 0.5px solid var(--border-subtle);
      border-radius: 16px;
      padding: 12px 14px;
      display: flex;
      align-items: center;
      gap: 12px;
      margin-bottom: 8px;
      cursor: pointer;
      transition: transform 0.125s ease, border-color 0.15s;
    }

    .list-item:active {
      transform: scale(0.98);
      border-color: var(--btn-red);
    }

    .list-item.completed {
      border: 1px solid rgba(51, 189, 28, 0.4);
      background: linear-gradient(135deg, rgba(20, 32, 22, 0.72) 0%, rgba(22, 28, 24, 0.76) 100%);
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35), inset 0 0 14px rgba(51, 189, 28, 0.06);
    }

    .list-item.completed .list-item-icon-box {
      background: rgba(26, 39, 29, 0.75);
      border-color: rgba(51, 189, 28, 0.35);
    }

    .list-item.locked {
      opacity: 0.45;
      cursor: not-allowed;
      border-color: rgba(255, 255, 255, 0.04);
    }

    .list-item-icon-box {
      width: 40px;
      height: 40px;
      border-radius: 12px;
      background: var(--bg-elevated);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.3rem;
      flex-shrink: 0;
      border: 0.5px solid var(--border-subtle);
    }

    .list-item-title {
      font-size: 13px;
      font-weight: 700;
      color: #FFFFFF;
    }

    .list-item-desc {
      font-size: 11px;
      color: var(--text-secondary);
      margin-top: 2px;
      line-height: 1.3;
    }

    .list-item-badge {
      display: inline-block;
      font-size: 10px;
      font-weight: 700;
      color: var(--accent-gold);
      background: var(--bg-elevated);
      padding: 2px 7px;
      border-radius: 6px;
      border: 0.5px solid rgba(255, 215, 0, 0.2);
      margin-top: 3px;
    }

    .list-item.completed .list-item-badge {
      color: var(--accent-green);
      border-color: rgba(51, 189, 28, 0.2);
    }

    /* Rating (Leaderboard) */
    .rating-tabs {
      display: flex;
      gap: 6px;
      margin-bottom: 12px;
      background: var(--bg-secondary);
      padding: 4px;
      border-radius: 14px;
      border: 0.5px solid var(--border-subtle);
    }

    .rating-tab {
      flex: 1;
      padding: 9px 4px;
      background: transparent;
      color: var(--text-secondary);
      border: none;
      border-radius: 10px;
      cursor: pointer;
      font-weight: 700;
      text-transform: uppercase;
      font-size: 11px;
      transition: all 0.15s ease;
      text-align: center;
      white-space: nowrap;
    }

    .rating-tab.active {
      background: var(--btn-red);
      color: white;
      box-shadow: 0 2px 10px rgba(229, 57, 53, 0.4);
    }

    .clan-tag-badge {
      display: inline-flex;
      align-items: center;
      font-size: 0.68rem;
      font-weight: 800;
      color: #38bdf8;
      background: rgba(56, 189, 248, 0.14);
      border: 1px solid rgba(56, 189, 248, 0.35);
      border-radius: 5px;
      padding: 1px 5px;
      letter-spacing: 0.03em;
      vertical-align: middle;
      cursor: pointer;
      transition: transform 0.1s ease, background 0.15s ease;
    }

    .clan-tag-badge:hover {
      background: rgba(56, 189, 248, 0.25);
    }

    .clan-tag-badge:active {
      transform: scale(0.95);
    }

    .user-rank-card {
      background: linear-gradient(135deg, rgba(42, 20, 24, 0.82) 0%, rgba(32, 18, 22, 0.86) 100%);
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      border: 1px solid rgba(229, 57, 53, 0.45);
      border-radius: 16px;
      padding: 12px 14px;
      display: flex;
      align-items: center;
      gap: 12px;
      margin-bottom: 12px;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35), inset 0 0 14px rgba(229, 57, 53, 0.08);
      transition: transform 0.125s ease, border-color 0.15s;
    }

    .user-rank-card:active {
      transform: scale(0.98);
      border-color: var(--btn-red);
    }

    .user-rank-badge {
      font-size: 9px;
      font-weight: 800;
      text-transform: uppercase;
      background: var(--btn-red);
      color: white;
      padding: 2px 6px;
      border-radius: 4px;
      margin-left: 6px;
    }

    /* Reader Screen */
    #reader-screen {
      padding: 0;
      height: 100%;
      flex-direction: column;
    }

    #reader-topbar {
      display: flex;
      align-items: center;
      padding: 10px 16px;
      background: var(--bg-secondary);
      border-bottom: 0.5px solid var(--border-subtle);
      z-index: 10;
    }

    #back-btn {
      background: var(--bg-elevated);
      border: none;
      font-size: 1rem;
      color: var(--text-muted);
      width: 32px;
      height: 32px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      margin-right: 10px;
    }

    #reader-iframe {
      border: none;
      width: 100%;
      flex: 1;
      height: 100%;
    }

    /* Keep-Alive Iframe Pool */
    #iframe-pool {
      position: fixed;
      inset: 0;
      z-index: 9000;
      background: #0a0a0f;
      display: none;
    }
    #iframe-pool iframe {
      position: absolute;
      inset: 0;
      border: none;
      width: 100%;
      height: 100%;
      display: none !important;
    }
    #iframe-pool iframe.pool-active {
      display: block !important;
    }
    .pool-close-btn {
      position: absolute;
      top: max(12px, env(safe-area-inset-top));
      left: 12px;
      z-index: 9010;
      width: 38px;
      height: 38px;
      border-radius: 50%;
      background: rgba(18, 18, 24, 0.85);
      border: 1px solid rgba(255, 255, 255, 0.2);
      color: #fff;
      font-size: 18px;
      font-weight: bold;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
      transition: transform 0.15s ease, background 0.15s ease;
    }
    .pool-close-btn:active {
      transform: scale(0.92);
      background: rgba(40, 40, 50, 0.95);
    }

    /* Modals (CapsGame info__wrapper style) */
    .tutorial-overlay {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.75);
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      display: none;
      align-items: center;
      justify-content: center;
      z-index: 2500;
      padding: 20px;
    }

    .tutorial-overlay.active {
      display: flex;
    }

    #tutorial-overlay.navigation-tour {
      align-items: flex-start;
      padding-top: max(70px, env(safe-area-inset-top));
      background: rgba(10, 10, 14, 0.45);
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
    }
    #tutorial-overlay.navigation-tour.navigation-tour-bottom { align-items: flex-end; padding-bottom: max(24px, env(safe-area-inset-bottom)); }
    #tutorial-overlay.navigation-tour.navigation-tour-roulette { padding-top: max(16px, env(safe-area-inset-top)); }
    .navigation-tour-target { outline: 3px solid #ffd700; outline-offset: 4px; }

    /* Ensure TonConnect modal is always on top of all application overlays and modals */
    tc-root,
    #tc-widget-root,
    [data-tc-root],
    .ton-connect-modal,
    [class*="tc-modal"],
    [class*="tc-root"] {
      position: relative !important;
      z-index: 100000 !important;
    }

    tc-root>*,
    #tc-widget-root>* {
      z-index: 100000 !important;
    }

    .tutorial-overlay {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(10, 10, 14, 0.84);
      backdrop-filter: blur(14px);
      -webkit-backdrop-filter: blur(14px);
      display: none;
      align-items: center;
      justify-content: center;
      z-index: 2500;
      padding: 16px;
    }

    .tutorial-overlay.active {
      display: flex;
    }

    .tutorial-modal {
      background: linear-gradient(180deg, rgba(28, 28, 34, 0.97) 0%, rgba(18, 18, 22, 0.98) 100%);
      backdrop-filter: blur(24px);
      -webkit-backdrop-filter: blur(24px);
      border-radius: 24px;
      padding: clamp(14px, 4vw, 24px) clamp(12px, 3.5vw, 20px);
      max-width: min(360px, 92vw);
      width: 100%;
      max-height: min(88vh, 88dvh, calc(var(--app-vh, 100vh) * 0.90));
      display: flex;
      flex-direction: column;
      overflow-y: auto;
      overflow-x: hidden;
      -webkit-overflow-scrolling: touch;
      text-align: center;
      border: 1px solid rgba(255, 255, 255, 0.12);
      box-shadow: 0 20px 60px rgba(0, 0, 0, 0.8), 0 0 1px rgba(255, 255, 255, 0.2);
      animation: modalSlideUp 0.28s cubic-bezier(0.16, 1, 0.3, 1) forwards;
      position: relative;
      box-sizing: border-box;
    }

    .tutorial-modal::-webkit-scrollbar {
      width: 4px;
    }

    .tutorial-modal::-webkit-scrollbar-thumb {
      background: rgba(255, 255, 255, 0.2);
      border-radius: 4px;
    }

    @keyframes modalSlideUp {
      from {
        transform: translateY(30px) scale(0.96);
        opacity: 0;
      }

      to {
        transform: translateY(0) scale(1);
        opacity: 1;
      }
    }

    .tutorial-icon-wrap {
      position: relative;
      width: 68px;
      height: 68px;
      border-radius: 20px;
      background: linear-gradient(135deg, rgba(236, 72, 153, 0.2), rgba(139, 92, 246, 0.25));
      border: 1px solid rgba(236, 72, 153, 0.45);
      box-shadow: 0 6px 20px rgba(236, 72, 153, 0.25);
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 auto 12px;
    }

    .tutorial-icon {
      font-size: 2.3rem;
      line-height: 1;
      display: block;
      filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.4));
    }

    .tutorial-title {
      font-size: 1.25rem;
      font-weight: 900;
      margin-bottom: 8px;
      background: linear-gradient(135deg, #ffffff, #f472b6);
      -webkit-background-clip: text;
      background-clip: text;
      -webkit-text-fill-color: transparent;
      letter-spacing: 0.01em;
      padding-left: 28px;
      padding-right: 28px;
      box-sizing: border-box;
      word-break: break-word;
    }

    .tutorial-desc {
      font-size: 0.88rem;
      color: rgba(255, 255, 255, 0.72);
      line-height: 1.5;
      margin-bottom: 18px;
      padding-left: 8px;
      padding-right: 8px;
      box-sizing: border-box;
    }

    .tutorial-btn {
      width: 100%;
      background: linear-gradient(135deg, #ec4899, #8b5cf6);
      color: #ffffff;
      border: none;
      border-radius: 14px;
      padding: 13px 20px;
      font-size: 0.95rem;
      font-weight: 800;
      cursor: pointer;
      box-shadow: 0 4px 18px rgba(236, 72, 153, 0.4);
      transition: transform 0.15s, box-shadow 0.15s;
    }

    .tutorial-btn:active {
      transform: scale(0.97);
      box-shadow: 0 2px 10px rgba(236, 72, 153, 0.6);
    }

    /* Form Fields */
    .news-textarea,
    .news-select {
      width: 100%;
      background: var(--bg-primary);
      color: white;
      border: 0.5px solid var(--border-subtle);
      border-radius: 12px;
      padding: 12px;
      font-size: 0.9rem;
      margin-bottom: 12px;
      outline: none;
    }

    .news-textarea:focus,
    .news-select:focus {
      border-color: var(--btn-red);
    }

    .anon-toggle {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 16px;
      justify-content: center;
      cursor: pointer;
      color: var(--text-secondary);
      font-size: 0.85rem;
    }

    .close-modal-btn {
      position: absolute;
      top: 12px;
      right: 12px;
      background: var(--bg-elevated);
      border: 1px solid rgba(255, 255, 255, 0.12);
      color: var(--text-secondary);
      font-size: 1rem;
      width: 30px;
      height: 30px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      z-index: 25;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
      transition: all 0.15s ease;
    }

    .close-modal-btn:hover,
    .close-modal-btn:active {
      background: rgba(255, 255, 255, 0.2);
      color: #fff;
      transform: scale(0.95);
    }

    /* Totalizator (EnotXbet) */
    #tot-screen {
      background: transparent;
      height: 100%;
      position: relative;
      isolation: isolate;
      overflow-y: auto;
      padding: 0 16px 80px;
    }

    #tot-screen::before {
      content: '';
      position: absolute;
      inset: 0;
      background-image: url('images/backgrounds/bgr_toto.png');
      background-size: cover;
      background-position: center;
      z-index: 0;
    }

    #tot-screen::after {
      content: '';
      position: absolute;
      inset: 0;
      background: rgba(18, 18, 20, 0.75);
      z-index: 0;
    }

    #tot-screen .rating-tabs,
    #tot-content {
      position: relative;
      z-index: 1;
    }

    .tot-brand {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      margin: 10px auto 12px;
      padding: 6px 16px;
      width: fit-content;
      border-radius: 999px;
      background: var(--bg-secondary);
      border: 0.5px solid var(--accent-gold);
      position: relative;
      z-index: 1;
    }

    .tot-brand-icon {
      font-size: 1.2rem;
    }

    .tot-brand-text {
      font-weight: 800;
      font-size: 1rem;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--accent-gold);
    }

    .tot-card {
      background: var(--bg-secondary);
      border-radius: 16px;
      padding: 12px;
      margin-bottom: 12px;
      border: 0.5px solid var(--border-subtle);
    }

    .tot-card-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 0.75rem;
      color: var(--text-secondary);
      margin-bottom: 8px;
    }

    .tot-card-header .status-dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: var(--accent-green);
      display: inline-block;
      margin-right: 4px;
    }

    .tot-card-teams {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 12px;
    }

    .tot-team {
      display: flex;
      align-items: center;
      gap: 6px;
      font-weight: 700;
      font-size: 0.9rem;
    }

    .tot-team-flag {
      width: 28px;
      height: 28px;
      border-radius: 50%;
      object-fit: cover;
    }

    .tot-vs {
      font-size: 1rem;
      font-weight: 800;
      color: var(--text-secondary);
    }

    .tot-odds-container {
      display: flex;
      gap: 6px;
      width: 100%;
      margin-top: 8px;
    }

    .tot-side-btn,
    .tot-odds-btn {
      flex: 1;
      min-width: 0;
      background: rgba(255, 255, 255, 0.05);
      border: 1px solid rgba(255, 255, 255, 0.1);
      color: var(--text-primary);
      border-radius: 12px;
      padding: 10px 6px;
      font-size: 0.8rem;
      font-weight: 700;
      text-align: center;
      cursor: pointer;
      transition: all 0.18s cubic-bezier(0.4, 0, 0.2, 1);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 4px;
      user-select: none;
      -webkit-user-select: none;
      position: relative;
      overflow: hidden;
    }

    .tot-side-btn:active,
    .tot-odds-btn:active,
    .tot-side-btn.active,
    .tot-odds-btn.active {
      background: linear-gradient(135deg, rgba(229, 57, 53, 0.35), rgba(255, 149, 0, 0.25));
      border-color: var(--btn-red);
      box-shadow: 0 4px 16px rgba(229, 57, 53, 0.4);
      transform: scale(0.96);
    }

    .tot-side-btn .odds-val,
    .tot-odds-btn .odds-value {
      color: var(--accent-gold);
      font-size: 0.84rem;
      font-weight: 800;
      text-shadow: 0 1px 6px rgba(255, 215, 0, 0.4);
    }

    .tot-side-btn.draw-side {
      background: rgba(100, 100, 115, 0.22);
      border-color: rgba(255, 255, 255, 0.12);
    }

    .bet-currency-tabs {
      display: flex;
      gap: 8px;
      margin-bottom: 12px;
      width: 100%;
    }

    .bet-currency-tab {
      flex: 1;
      padding: 10px 8px;
      background: var(--bg-primary);
      color: var(--text-secondary);
      border: 1px solid var(--border-subtle);
      border-radius: 12px;
      cursor: pointer;
      font-weight: 700;
      font-size: 0.82rem;
      text-align: center;
      transition: all 0.15s ease;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
    }

    .bet-currency-tab.active {
      background: linear-gradient(135deg, rgba(229, 57, 53, 0.3), rgba(255, 149, 0, 0.2));
      border-color: var(--btn-red);
      color: #fff;
      box-shadow: 0 2px 10px rgba(229, 57, 53, 0.3);
    }

    .tot-cg-tabor-badge {
      display: inline-flex;
      align-items: center;
      gap: 3px;
      font-size: 0.62rem;
      font-weight: 700;
      color: #ffd700;
      background: rgba(255, 215, 0, 0.14);
      border: 1px solid rgba(255, 215, 0, 0.35);
      padding: 1px 6px;
      border-radius: 6px;
      white-space: nowrap;
      text-transform: none;
      letter-spacing: 0.2px;
    }

    .tot-amount-chip {
      flex: 1;
      padding: 7px 4px;
      background: rgba(255, 255, 255, 0.05);
      border: 1px solid rgba(255, 255, 255, 0.1);
      border-radius: 8px;
      color: var(--text-muted);
      font-size: 0.72rem;
      font-weight: 700;
      cursor: pointer;
      transition: all 0.12s;
      text-align: center;
    }

    .tot-amount-chip:active {
      background: rgba(229, 57, 53, 0.3);
      border-color: var(--btn-red);
      transform: scale(0.94);
    }

    .tot-admin-tabs-nav {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
      gap: 5px;
      background: rgba(18, 18, 20, 0.8);
      border: 1px solid rgba(255, 255, 255, 0.08);
      border-radius: 12px;
      padding: 4px;
      margin-bottom: 16px;
    }

    .tot-admin-subtab {
      min-width: 0;
      padding: 9px 2px;
      background: transparent;
      border: none;
      border-radius: 10px;
      color: var(--text-secondary);
      font-size: 0.7rem;
      font-weight: 700;
      cursor: pointer;
      transition: all 0.15s;
      text-align: center;
      white-space: nowrap;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 3px;
    }

    .tot-admin-subtab.active {
      background: var(--btn-red);
      color: #fff;
      box-shadow: 0 2px 8px rgba(229, 57, 53, 0.4);
    }

    .tot-admin-badge {
      font-size: 0.65rem;
      padding: 1px 5px;
      border-radius: 10px;
      background: rgba(0, 0, 0, 0.4);
      color: #fff;
      font-weight: 800;
    }

    .tot-card-glass {
      background: rgba(24, 24, 28, 0.85);
      backdrop-filter: blur(12px);
      border: 1px solid rgba(255, 255, 255, 0.08);
      border-radius: 16px;
      padding: 14px;
      margin-bottom: 12px;
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35);
      transition: transform 0.15s ease, border-color 0.15s ease;
    }

    .tot-card-glass:hover {
      border-color: rgba(255, 255, 255, 0.15);
    }

    /* Гербы соперников: два логотипа рядом с названием «vs» вместо растянутой обложки */
    .tot-crests {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      margin-bottom: 10px;
      padding: 8px 0;
      border-radius: 12px;
      background: rgba(255, 255, 255, 0.03);
      border: 1px solid rgba(255, 255, 255, 0.06);
    }

    .tot-crest {
      width: 44px;
      height: 44px;
      object-fit: contain;
      flex-shrink: 0;
      filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.5));
    }

    .tot-crest-vs {
      font-size: 0.72rem;
      font-weight: 800;
      letter-spacing: 0.08em;
      color: var(--text-sec);
      text-transform: uppercase;
    }

    .tot-btn-action-green {
      background: linear-gradient(135deg, #10b981, #059669) !important;
      color: #fff !important;
      border: none !important;
      box-shadow: 0 2px 10px rgba(16, 185, 129, 0.35) !important;
    }

    .tot-btn-action-green:active {
      background: #047857 !important;
      transform: scale(0.96);
    }

    .tot-btn-action-red {
      background: rgba(239, 68, 68, 0.18) !important;
      color: #fca5a5 !important;
      border: 1px solid #ef4444 !important;
    }

    .tot-btn-action-red:active {
      background: rgba(239, 68, 68, 0.35) !important;
      transform: scale(0.96);
    }

    .tot-btn-action-gold {
      background: linear-gradient(135deg, #f59e0b, #d97706) !important;
      color: #000 !important;
      font-weight: 800 !important;
      border: none !important;
      box-shadow: 0 2px 10px rgba(245, 158, 11, 0.35) !important;
    }

    .tot-btn-action-gold:active {
      background: #b45309 !important;
      transform: scale(0.96);
    }

    .tot-btn-action-purple {
      background: linear-gradient(135deg, #8b5cf6, #ec4899) !important;
      color: #fff !important;
      border: none !important;
      box-shadow: 0 2px 12px rgba(139, 92, 246, 0.4) !important;
    }

    .tot-btn-action-purple:active {
      background: #7c3aed !important;
      transform: scale(0.96);
    }

    .tot-btn-action-blue {
      background: linear-gradient(135deg, #0ea5e9, #0284c7) !important;
      color: #fff !important;
      border: none !important;
      box-shadow: 0 2px 10px rgba(14, 165, 233, 0.35) !important;
    }

    .tot-btn-action-blue:active {
      background: #0369a1 !important;
      transform: scale(0.96);
    }

    .profile-stats-modal {
      background: rgba(24, 24, 27, 0.95);
      border: 1px solid rgba(255, 255, 255, 0.12);
      border-radius: 20px;
      backdrop-filter: blur(16px);
      box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6);
    }

    .profile-stat-box {
      background: var(--bg-primary);
      border: 0.5px solid var(--border-subtle);
      border-radius: 14px;
      padding: 12px 14px;
    }

    .profile-score-hero {
      background: linear-gradient(135deg, rgba(255, 215, 0, 0.15), rgba(255, 170, 0, 0.05));
      border: 1px solid rgba(255, 215, 0, 0.4);
      border-radius: 16px;
      padding: 14px;
      text-align: center;
    }

    .profile-grid-2 {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 8px;
    }

    .profile-chip {
      background: rgba(255, 255, 255, 0.04);
      border: 0.5px solid rgba(255, 255, 255, 0.08);
      border-radius: 10px;
      padding: 8px 10px;
      font-size: 0.8rem;
    }

    .profile-chip-title {
      font-size: 0.7rem;
      color: var(--text-secondary);
      margin-bottom: 2px;
    }

    .profile-chip-val {
      font-weight: 700;
      color: var(--text-primary);
    }

    /* ==================== INVENTORY STYLES ==================== */
    .inventory-modal {
      position: relative !important;
      width: 94% !important;
      max-width: 440px !important;
      max-height: 88vh !important;
      display: flex !important;
      flex-direction: column !important;
      padding: 18px 16px 16px !important;
      border: 1px solid rgba(168, 85, 247, 0.5) !important;
      background: linear-gradient(180deg, #191424 0%, #121216 100%) !important;
      box-shadow: 0 10px 40px rgba(168, 85, 247, 0.3) !important;
      border-radius: 24px !important;
      box-sizing: border-box !important;
      overflow: hidden !important;
    }

    #inventory-modal-list {
      flex: 1 1 auto;
      min-height: 0;
      max-height: 60vh;
      overflow-y: auto;
      overflow-x: hidden;
      padding: 2px 4px 10px 2px;
      display: flex;
      flex-direction: column;
      gap: 12px;
      -webkit-overflow-scrolling: touch;
      box-sizing: border-box;
    }

    #inventory-modal-list::-webkit-scrollbar {
      width: 5px;
    }

    #inventory-modal-list::-webkit-scrollbar-track {
      background: rgba(255, 255, 255, 0.05);
      border-radius: 4px;
    }

    #inventory-modal-list::-webkit-scrollbar-thumb {
      background: rgba(168, 85, 247, 0.5);
      border-radius: 4px;
    }

    /* ==================== ACHIEVEMENTS STYLES ==================== */
    .achievements-modal {
      width: 94% !important;
      max-width: 450px !important;
      max-height: 88vh !important;
      display: flex !important;
      flex-direction: column !important;
      padding: 16px 14px 14px !important;
      border: 1px solid rgba(245, 158, 11, 0.45) !important;
      background: linear-gradient(180deg, #1c150c 0%, #121216 100%) !important;
      box-shadow: 0 10px 40px rgba(245, 158, 11, 0.25) !important;
      border-radius: 24px !important;
      box-sizing: border-box !important;
      overflow: hidden !important;
    }

    .achievements-hero-card {
      background: linear-gradient(135deg, rgba(245, 158, 11, 0.18), rgba(239, 68, 68, 0.12));
      border: 1px solid rgba(245, 158, 11, 0.35);
      border-radius: 16px;
      padding: 12px;
      margin-bottom: 10px;
      display: flex;
      flex-direction: column;
      gap: 6px;
      flex-shrink: 0;
    }

    .achievements-tabs-bar {
      display: flex;
      gap: 6px;
      overflow-x: auto;
      padding-bottom: 8px;
      margin-bottom: 8px;
      flex-shrink: 0;
      scrollbar-width: none;
    }

    .achievements-tabs-bar::-webkit-scrollbar {
      display: none;
    }

    .ach-tab-btn {
      padding: 6px 12px;
      border-radius: 12px;
      background: rgba(255, 255, 255, 0.06);
      border: 1px solid rgba(255, 255, 255, 0.12);
      color: var(--text-secondary);
      font-size: 0.75rem;
      font-weight: 700;
      cursor: pointer;
      white-space: nowrap;
      transition: all 0.15s ease;
    }

    .ach-tab-btn.active {
      background: linear-gradient(135deg, #f59e0b, #ef4444);
      color: #fff;
      border-color: #f59e0b;
      box-shadow: 0 2px 10px rgba(245, 158, 11, 0.35);
    }

    #achievements-list {
      flex: 1 1 auto;
      min-height: 0;
      max-height: 56vh;
      overflow-y: auto;
      overflow-x: hidden;
      padding: 2px 4px 10px 2px;
      display: flex;
      flex-direction: column;
      gap: 8px;
      -webkit-overflow-scrolling: touch;
      box-sizing: border-box;
    }

    .ach-card {
      background: rgba(255, 255, 255, 0.03);
      border: 1px solid rgba(255, 255, 255, 0.08);
      border-radius: 14px;
      padding: 10px 12px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      transition: all 0.2s ease;
      width: 100%;
      box-sizing: border-box;
      position: relative;
      cursor: pointer;
      -webkit-tap-highlight-color: transparent;
    }

    .ach-card.expanded {
      align-items: flex-start;
      background: rgba(255, 255, 255, 0.06);
      border-color: rgba(245, 158, 11, 0.25);
    }

    .ach-card.expanded .ach-title {
      white-space: normal;
      overflow: visible;
      flex-wrap: wrap;
    }

    .ach-card.expanded .ach-desc {
      display: block;
      -webkit-line-clamp: unset;
      line-clamp: unset;
      overflow: visible;
      min-height: auto;
    }

    .ach-card.unlocked {
      background: rgba(245, 158, 11, 0.05);
      border-color: rgba(245, 158, 11, 0.3);
    }

    .ach-card.claimable {
      background: linear-gradient(135deg, rgba(16, 185, 129, 0.15), rgba(245, 158, 11, 0.1));
      border-color: rgba(16, 185, 129, 0.5);
      box-shadow: 0 0 12px rgba(16, 185, 129, 0.2);
    }

    .ach-icon-box {
      width: 42px;
      height: 42px;
      border-radius: 12px;
      background: rgba(255, 255, 255, 0.05);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.45rem;
      flex-shrink: 0;
      border: 1px solid rgba(255, 255, 255, 0.1);
    }

    .ach-card.unlocked .ach-icon-box {
      background: rgba(245, 158, 11, 0.15);
      border-color: rgba(245, 158, 11, 0.4);
    }

    .ach-card.claimable .ach-icon-box {
      background: rgba(16, 185, 129, 0.2);
      border-color: #10b981;
      animation: achPulse 1.8s infinite;
    }

    @keyframes achPulse {

      0%,
      100% {
        transform: scale(1);
      }

      50% {
        transform: scale(1.08);
      }
    }

    .ach-info {
      flex: 1 1 auto;
      min-width: 0;
      text-align: left;
      display: flex;
      flex-direction: column;
      gap: 2px;
    }

    .ach-title {
      font-size: 0.86rem;
      font-weight: 800;
      color: #fff;
      display: flex;
      align-items: center;
      gap: 6px;
      line-height: 1.25;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .ach-desc {
      font-size: 0.71rem;
      color: var(--text-secondary);
      line-height: 1.25;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
      text-overflow: ellipsis;
      min-height: 1.8em;
    }

    .ach-reward-row {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 4px;
      margin-top: 1px;
    }

    .ach-reward-label {
      font-size: 0.65rem;
      color: var(--text-secondary);
      font-weight: 600;
    }

    .ach-reward-val {
      font-size: 0.7rem;
      color: #fbbf24;
      font-weight: 800;
      display: inline-flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 3px;
    }

    .ach-progress-bar-bg {
      width: 100%;
      height: 4px;
      background: rgba(255, 255, 255, 0.08);
      border-radius: 3px;
      overflow: hidden;
      margin-top: 3px;
    }

    .ach-progress-bar-fill {
      height: 100%;
      background: linear-gradient(90deg, #f59e0b, #10b981);
      border-radius: 3px;
      transition: width 0.3s ease;
    }

    .ach-action {
      flex-shrink: 0;
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      justify-content: center;
      min-width: 72px;
    }

    .ach-claim-btn {
      padding: 8px 14px;
      min-width: 76px;
      border-radius: 10px;
      background: linear-gradient(135deg, #10b981, #059669);
      color: #fff;
      font-size: 0.76rem;
      font-weight: 800;
      border: none;
      cursor: pointer;
      box-shadow: 0 3px 12px rgba(16, 185, 129, 0.45);
      animation: achPulse 1.5s infinite;
      transition: all 0.15s ease;
      white-space: nowrap;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      box-sizing: border-box;
    }

    .ach-claim-btn:active {
      transform: scale(0.94);
    }

    .ach-badge-done {
      font-size: 0.7rem;
      font-weight: 700;
      color: #10b981;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 3px;
      padding: 5px 8px;
      border-radius: 8px;
      background: rgba(16, 185, 129, 0.12);
      border: 1px solid rgba(16, 185, 129, 0.25);
      white-space: nowrap;
      min-width: 70px;
      text-align: center;
      box-sizing: border-box;
    }

    .ach-badge-locked {
      font-size: 0.7rem;
      font-weight: 700;
      color: #888;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 3px;
      padding: 5px 8px;
      border-radius: 8px;
      background: rgba(255, 255, 255, 0.04);
      border: 1px solid rgba(255, 255, 255, 0.08);
      white-space: nowrap;
      min-width: 65px;
      text-align: center;
      box-sizing: border-box;
    }

    @media (max-width: 360px) {
      .ach-card {
        padding: 8px 8px;
        gap: 6px;
      }

      .ach-icon-box {
        width: 34px;
        height: 34px;
        font-size: 1.2rem;
      }

      .ach-title {
        font-size: 0.78rem;
      }

      .ach-desc {
        font-size: 0.65rem;
      }

      .ach-reward-val {
        font-size: 0.65rem;
      }

      .ach-claim-btn {
        padding: 6px 10px;
        min-width: 64px;
        font-size: 0.7rem;
      }

      .ach-badge-done,
      .ach-badge-locked {
        padding: 4px 6px;
        min-width: 58px;
        font-size: 0.64rem;
      }
    }

    /* ==================== SETTINGS MODAL STYLES ==================== */
    .settings-modal {
      width: 88% !important;
      max-width: 380px !important;
      max-height: 90vh !important;
      padding: 20px 18px 18px !important;
    }

    .settings-section {
      flex-shrink: 0;
      background: var(--bg-elevated);
      border: 1px solid var(--border-subtle);
      border-radius: 14px;
      padding: 12px 14px;
    }

    .settings-section__label {
      font-size: 0.72rem;
      font-weight: 700;
      color: var(--text-secondary);
      text-transform: uppercase;
      letter-spacing: 0.06em;
      margin-bottom: 10px;
    }

    .settings-action-btn {
      width: 100%;
      display: flex;
      align-items: center;
      gap: 10px;
      background: var(--bg-primary);
      border: 1px solid var(--border-subtle);
      border-radius: 11px;
      padding: 11px 14px;
      cursor: pointer;
      font-size: 0.92rem;
      font-weight: 600;
      color: var(--text-primary);
      transition: background 0.15s, transform 0.1s;
    }

    .settings-action-btn:active {
      transform: scale(0.97);
      background: var(--bg-elevated);
    }

    .settings-action-badge {
      margin-left: auto;
      font-size: 0.7rem;
      font-weight: 800;
      color: var(--text-secondary);
      background: var(--bg-elevated);
      border: 1px solid var(--border-subtle);
      border-radius: 6px;
      padding: 2px 7px;
    }

    .settings-lang-row {
      display: flex;
      gap: 8px;
    }

    .settings-lang-btn {
      flex: 1;
      padding: 10px 8px;
      border-radius: 11px;
      border: 1.5px solid var(--border-subtle);
      background: var(--bg-primary);
      color: var(--text-primary);
      font-size: 0.88rem;
      font-weight: 600;
      cursor: pointer;
      transition: background 0.15s, border-color 0.15s, transform 0.1s;
    }

    .settings-lang-btn:active {
      transform: scale(0.96);
    }

    .settings-lang-btn.active {
      background: rgba(56, 189, 248, 0.15);
      border-color: #38bdf8;
      color: #38bdf8;
    }

    /* Sound Settings Controls */
    .settings-sound-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      padding: 4px 0 6px;
    }

    #settings-notifications .settings-sound-row { min-height: 44px; }
    #settings-notifications .settings-sound-title { white-space: normal; text-align: left; }
    #settings-notifications input:disabled + .settings-toggle-slider { opacity: 0.45; cursor: wait; }
    #settings-notifications input:focus-visible + .settings-toggle-slider { outline: 2px solid #fff; outline-offset: 3px; }

    /* Один общий индикатор фокуса для клавиатуры и ТВ-пультов: раньше он был
       только у переключателей уведомлений, остальные кнопки не подсвечивались. */
    button:focus-visible,
    [role="button"]:focus-visible,
    a:focus-visible,
    input:focus-visible,
    select:focus-visible,
    textarea:focus-visible {
      outline: 2px solid #fff;
      outline-offset: 2px;
    }

    .settings-sound-info {
      display: flex;
      align-items: center;
      gap: 10px;
      min-width: 0;
    }

    .settings-sound-icon {
      font-size: 1.35rem;
      line-height: 1;
      flex-shrink: 0;
      transition: transform 0.15s ease;
    }

    .settings-sound-title {
      font-size: 0.92rem;
      font-weight: 600;
      color: var(--text-primary);
      white-space: nowrap;
    }

    .settings-sound-status {
      font-size: 0.72rem;
      color: var(--text-secondary);
      margin-top: 1px;
      font-weight: 500;
      transition: color 0.15s ease;
    }

    /* iOS-style toggle switch */
    .settings-toggle-switch {
      position: relative;
      display: inline-block;
      width: 48px;
      height: 28px;
      flex-shrink: 0;
      cursor: pointer;
    }

    .settings-toggle-switch input {
      opacity: 0;
      width: 0;
      height: 0;
      position: absolute;
    }

    .settings-toggle-slider {
      position: absolute;
      cursor: pointer;
      inset: 0;
      background-color: rgba(255, 255, 255, 0.16);
      border: 1px solid rgba(255, 255, 255, 0.12);
      transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
      border-radius: 28px;
    }

    .settings-toggle-slider:before {
      position: absolute;
      content: "";
      height: 22px;
      width: 22px;
      left: 2px;
      bottom: 2px;
      background-color: #ffffff;
      transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
      border-radius: 50%;
      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.35);
    }

    .settings-toggle-switch input:checked + .settings-toggle-slider {
      background: linear-gradient(135deg, #10b981, #059669);
      border-color: #10b981;
      box-shadow: 0 0 10px rgba(16, 185, 129, 0.35);
    }

    .settings-toggle-switch input:checked + .settings-toggle-slider:before {
      transform: translateX(20px);
    }

    /* Volume Slider */
    .settings-volume-container {
      margin-top: 6px;
      padding-top: 8px;
      border-top: 1px solid var(--border-subtle);
      transition: opacity 0.2s ease, filter 0.2s ease;
    }

    .settings-volume-container.disabled {
      opacity: 0.35;
      pointer-events: none;
      filter: grayscale(0.8);
    }

    .settings-volume-label-row {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 0.72rem;
      color: var(--text-secondary);
      margin-bottom: 6px;
      font-weight: 500;
    }

    .settings-slider-wrapper {
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .volume-slider-icon {
      font-size: 0.85rem;
      opacity: 0.75;
      flex-shrink: 0;
      user-select: none;
    }

    .settings-slider {
      -webkit-appearance: none;
      appearance: none;
      width: 100%;
      height: 6px;
      border-radius: 3px;
      background: rgba(255, 255, 255, 0.16);
      outline: none;
      cursor: pointer;
      transition: background 0.15s;
    }

    .settings-slider::-webkit-slider-thumb {
      -webkit-appearance: none;
      appearance: none;
      width: 18px;
      height: 18px;
      border-radius: 50%;
      background: #ffffff;
      cursor: pointer;
      box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
      transition: transform 0.1s;
    }

    .settings-slider::-webkit-slider-thumb:active {
      transform: scale(1.15);
    }

    .settings-slider::-moz-range-thumb {
      width: 18px;
      height: 18px;
      border-radius: 50%;
      background: #ffffff;
      cursor: pointer;
      border: none;
      box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
    }


    /* Settings gear icon spin on hover */
    #header-settings-btn:hover .badge-icon-button__icon {
      animation: settings-spin 0.5s ease;
    }
    @keyframes settings-spin {
      0% { transform: rotate(0deg); }
      100% { transform: rotate(90deg); }
    }

    /* ==================== CLAN SYSTEM & SCREEN STYLES ==================== */
    .clan-screen-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      margin-bottom: 12px;
      flex-shrink: 0;
    }

    .clan-header-icon-wrap {
      width: 40px;
      height: 40px;
      border-radius: 12px;
      background: linear-gradient(135deg, rgba(56, 189, 248, 0.25), rgba(14, 165, 233, 0.1));
      border: 1px solid rgba(56, 189, 248, 0.4);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.35rem;
      flex-shrink: 0;
      box-shadow: 0 0 15px rgba(56, 189, 248, 0.2);
    }

    .clan-balance-bar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      background: rgba(255, 255, 255, 0.04);
      border: 1px solid rgba(255, 255, 255, 0.08);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      border-radius: 14px;
      padding: 8px 14px;
      margin-bottom: 12px;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    }

    .clan-balance-item {
      display: flex;
      align-items: center;
      gap: 6px;
      font-size: 12px;
      font-weight: 700;
      color: rgba(255, 255, 255, 0.9);
    }

    .clan-balance-item img {
      width: 17px;
      height: 17px;
      vertical-align: middle;
      filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
    }

    .clan-balance-val {
      color: #fbbf24;
      font-size: 13.5px;
      font-weight: 900;
      font-variant-numeric: tabular-nums;
    }

    .clan-balance-val--mega {
      color: #38bdf8;
    }

    .clan-nav-tabs {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 6px;
      margin-bottom: 14px;
      background: rgba(20, 24, 33, 0.7);
      padding: 5px;
      border-radius: 14px;
      border: 1px solid rgba(255, 255, 255, 0.08);
      box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
    }

    .clan-nav-tab-btn {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 3px;
      padding: 8px 4px;
      background: transparent;
      color: var(--text-secondary);
      border: 1px solid transparent;
      border-radius: 10px;
      cursor: pointer;
      font-weight: 700;
      font-size: 0.72rem;
      transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
      position: relative;
      white-space: nowrap;
    }

    .clan-nav-tab-btn .clan-tab-icon {
      font-size: 1.15rem;
      line-height: 1;
    }

    .clan-nav-tab-btn:hover {
      color: #fff;
      background: rgba(255, 255, 255, 0.04);
    }

    .clan-nav-tab-btn.active {
      background: linear-gradient(135deg, rgba(56, 189, 248, 0.25), rgba(99, 102, 241, 0.2));
      color: #fff;
      border: 1px solid rgba(56, 189, 248, 0.4);
      box-shadow: 0 2px 10px rgba(56, 189, 248, 0.25);
    }

    .clan-hero-card {
      background: linear-gradient(135deg, rgba(56, 189, 248, 0.16), rgba(99, 102, 241, 0.12));
      border: 1px solid rgba(56, 189, 248, 0.3);
      border-radius: 18px;
      padding: 14px;
      display: flex;
      flex-direction: column;
      gap: 12px;
      box-sizing: border-box;
      width: 100%;
      box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
      position: relative;
      overflow: hidden;
    }

    .clan-hero-top {
      display: flex;
      align-items: center;
      gap: 12px;
    }

    .clan-hero-avatar {
      font-size: 2.5rem;
      width: 56px;
      height: 56px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: linear-gradient(135deg, rgba(56, 189, 248, 0.2), rgba(14, 165, 233, 0.1));
      border: 2px solid rgba(56, 189, 248, 0.45);
      border-radius: 16px;
      flex-shrink: 0;
      box-shadow: 0 0 16px rgba(56, 189, 248, 0.3);
    }

    .clan-stat-pills {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 8px;
      background: rgba(0, 0, 0, 0.3);
      padding: 10px 12px;
      border-radius: 12px;
      border: 1px solid rgba(255, 255, 255, 0.06);
    }

    .clan-stat-pill-item {
      display: flex;
      flex-direction: column;
      gap: 2px;
    }

    .clan-stat-pill-label {
      font-size: 0.68rem;
      color: var(--text-secondary);
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.04em;
      display: flex;
      align-items: center;
      gap: 4px;
    }

    .clan-stat-pill-val {
      font-size: 0.95rem;
      font-weight: 800;
      color: #fff;
      display: flex;
      align-items: center;
      gap: 4px;
    }

    .clan-bank-card {
      background: linear-gradient(135deg, rgba(251, 191, 36, 0.14), rgba(217, 119, 6, 0.08));
      border: 1px solid rgba(251, 191, 36, 0.3);
      border-radius: 18px;
      padding: 14px;
      display: flex;
      flex-direction: column;
      gap: 12px;
      box-sizing: border-box;
      width: 100%;
      box-shadow: 0 4px 18px rgba(0, 0, 0, 0.2);
    }

    .clan-hollow-card {
      background: linear-gradient(135deg, rgba(34, 197, 94, 0.14), rgba(16, 185, 129, 0.08));
      border: 1px solid rgba(74, 222, 128, 0.3);
      border-radius: 18px;
      padding: 14px;
      display: flex;
      flex-direction: column;
      gap: 12px;
      box-sizing: border-box;
      width: 100%;
      box-shadow: 0 4px 18px rgba(34, 197, 94, 0.12);
    }

    .clan-level-track {
      width: 100%;
      height: 9px;
      background: rgba(255, 255, 255, 0.08);
      border-radius: 6px;
      overflow: hidden;
      margin: 8px 0 4px;
      position: relative;
    }

    .clan-level-fill {
      height: 100%;
      background: linear-gradient(90deg, #10b981, #4ade80, #38bdf8);
      border-radius: 6px;
      transition: width 0.4s ease;
      box-shadow: 0 0 10px rgba(74, 222, 128, 0.5);
    }

    .clan-res-tab {
      flex: 1;
      padding: 8px 10px;
      border-radius: 10px;
      background: rgba(255, 255, 255, 0.05);
      border: 1px solid rgba(255, 255, 255, 0.12);
      color: var(--text-secondary);
      font-size: 0.78rem;
      font-weight: 700;
      cursor: pointer;
      text-align: center;
      transition: all 0.2s ease;
      box-sizing: border-box;
    }

    .clan-res-tab.active {
      background: linear-gradient(135deg, rgba(251, 191, 36, 0.25), rgba(217, 119, 6, 0.25));
      border-color: #fbbf24;
      color: #fbbf24;
      box-shadow: 0 0 10px rgba(251, 191, 36, 0.3);
    }

    .clan-res-tab.active.mega {
      background: linear-gradient(135deg, rgba(56, 189, 248, 0.25), rgba(168, 85, 247, 0.25));
      border-color: #38bdf8;
      color: #38bdf8;
      box-shadow: 0 0 10px rgba(56, 189, 248, 0.3);
    }

    .clan-tabs-bar {
      display: flex;
      gap: 8px;
      margin-bottom: 12px;
      flex-shrink: 0;
      width: 100%;
      box-sizing: border-box;
    }

    .clan-tab-btn {
      flex: 1;
      padding: 9px 12px;
      border-radius: 12px;
      background: rgba(255, 255, 255, 0.06);
      border: 1px solid rgba(255, 255, 255, 0.12);
      color: var(--text-secondary);
      font-size: 0.82rem;
      font-weight: 700;
      cursor: pointer;
      text-align: center;
      transition: all 0.2s ease;
      box-sizing: border-box;
    }

    .clan-tab-btn.active {
      background: linear-gradient(135deg, rgba(56, 189, 248, 0.25), rgba(99, 102, 241, 0.25));
      border-color: #38bdf8;
      color: #fff;
      box-shadow: 0 0 12px rgba(56, 189, 248, 0.35);
    }

    .clan-scroll-container {
      width: 100%;
      box-sizing: border-box;
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    .clan-card-item {
      background: rgba(255, 255, 255, 0.04);
      border: 1px solid rgba(255, 255, 255, 0.08);
      border-radius: 14px;
      padding: 12px 14px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      transition: all 0.2s ease;
      box-sizing: border-box;
    }

    .clan-card-item:hover {
      background: rgba(255, 255, 255, 0.07);
      border-color: rgba(56, 189, 248, 0.3);
    }

    .clan-member-row {
      background: rgba(255, 255, 255, 0.04);
      border: 1px solid rgba(255, 255, 255, 0.07);
      border-radius: 14px;
      padding: 10px 12px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      transition: all 0.15s ease;
    }

    .clan-member-row:hover {
      background: rgba(255, 255, 255, 0.06);
    }

    .clan-emoji-chip {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 42px;
      height: 42px;
      font-size: 1.35rem;
      border-radius: 12px;
      background: rgba(255, 255, 255, 0.06);
      border: 1px solid rgba(255, 255, 255, 0.12);
      cursor: pointer;
      transition: all 0.15s ease;
    }

    .clan-emoji-chip:hover {
      background: rgba(255, 255, 255, 0.1);
      transform: scale(1.05);
    }

    .clan-emoji-chip.active {
      background: rgba(56, 189, 248, 0.3);
      border-color: #38bdf8;
      box-shadow: 0 0 12px rgba(56, 189, 248, 0.45);
      transform: scale(1.1);
    }

    .clan-welcome-card {
      background: linear-gradient(135deg, rgba(56, 189, 248, 0.16), rgba(99, 102, 241, 0.1));
      border: 1px solid rgba(56, 189, 248, 0.35);
      border-radius: 20px;
      padding: 18px 16px;
      text-align: center;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 12px;
      box-shadow: 0 6px 24px rgba(0, 0, 0, 0.3);
    }

    .clan-perk-badge {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 8px 12px;
      background: rgba(0, 0, 0, 0.3);
      border: 1px solid rgba(255, 255, 255, 0.08);
      border-radius: 12px;
      font-size: 0.76rem;
      color: #e2e8f0;
      text-align: left;
      flex: 1;
    }

    .inventory-item-card {
      background: rgba(255, 255, 255, 0.05);
      border: 1px solid rgba(168, 85, 247, 0.35);
      border-radius: 16px;
      padding: 12px 14px;
      display: flex;
      flex-direction: column;
      gap: 10px;
      text-align: left;
      transition: all 0.2s ease;
      box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
      box-sizing: border-box;
      width: 100%;
      max-width: 100%;
      position: relative;
    }

    .inventory-item-card:hover {
      border-color: rgba(168, 85, 247, 0.65);
      background: rgba(168, 85, 247, 0.1);
    }

    .inventory-item-header {
      display: flex;
      align-items: center;
      gap: 12px;
      width: 100%;
      min-width: 0;
      box-sizing: border-box;
    }

    .inventory-item-card--common {
      border: 1px solid rgba(34, 197, 94, 0.35);
      background: linear-gradient(145deg, rgba(20, 83, 45, 0.2), rgba(24, 24, 28, 0.95));
    }

    .inventory-item-card--rare, .inventory-item-card--silver {
      border: 1.5px solid rgba(59, 130, 246, 0.65);
      background: linear-gradient(145deg, rgba(30, 58, 138, 0.3), rgba(24, 24, 28, 0.95));
      box-shadow: 0 4px 20px rgba(59, 130, 246, 0.3);
    }

    .inventory-item-card--epic {
      border: 1.5px solid rgba(168, 85, 247, 0.65);
      background: linear-gradient(145deg, rgba(126, 34, 206, 0.3), rgba(24, 24, 28, 0.95));
      box-shadow: 0 4px 20px rgba(168, 85, 247, 0.3);
    }

    .inventory-item-card--legendary, .inventory-item-card--gold {
      border: 1.5px solid rgba(234, 179, 8, 0.6);
      background: linear-gradient(145deg, rgba(180, 83, 9, 0.3), rgba(24, 24, 28, 0.95));
      box-shadow: 0 4px 20px rgba(234, 179, 8, 0.25);
    }

    .inventory-item-card--diamond {
      border: 1.5px solid rgba(56, 189, 248, 0.85);
      background: linear-gradient(145deg, rgba(14, 116, 144, 0.4), rgba(24, 24, 32, 0.95));
      box-shadow: 0 4px 25px rgba(56, 189, 248, 0.4), inset 0 0 15px rgba(56, 189, 248, 0.15);
    }

    .inventory-item-icon-wrap {
      width: 48px;
      height: 48px;
      border-radius: 14px;
      background: radial-gradient(circle, rgba(168, 85, 247, 0.3) 0%, rgba(0, 0, 0, 0.6) 100%);
      border: 1px solid rgba(168, 85, 247, 0.5);
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      flex-shrink: 0;
      box-shadow: 0 0 16px rgba(168, 85, 247, 0.3);
    }

    .inventory-item-icon-wrap--common {
      background: radial-gradient(circle, rgba(34, 197, 94, 0.3) 0%, rgba(0, 0, 0, 0.6) 100%);
      border-color: rgba(34, 197, 94, 0.6);
      box-shadow: 0 0 14px rgba(34, 197, 94, 0.3);
    }

    .inventory-item-icon-wrap--rare, .inventory-item-icon-wrap--silver {
      background: radial-gradient(circle, rgba(59, 130, 246, 0.45) 0%, rgba(30, 58, 138, 0.75) 100%);
      border-color: rgba(96, 165, 250, 0.85);
      box-shadow: 0 0 18px rgba(59, 130, 246, 0.5);
    }

    .inventory-item-icon-wrap--epic {
      background: radial-gradient(circle, rgba(168, 85, 247, 0.45) 0%, rgba(88, 28, 135, 0.75) 100%);
      border-color: rgba(192, 132, 252, 0.85);
      box-shadow: 0 0 18px rgba(168, 85, 247, 0.5);
    }

    .inventory-item-icon-wrap--legendary, .inventory-item-icon-wrap--gold {
      background: radial-gradient(circle, rgba(234, 179, 8, 0.4) 0%, rgba(0, 0, 0, 0.6) 100%);
      border-color: rgba(251, 191, 36, 0.85);
      box-shadow: 0 0 18px rgba(234, 179, 8, 0.5);
    }

    .inventory-item-icon-wrap--diamond {
      background: radial-gradient(circle, rgba(56, 189, 248, 0.55) 0%, rgba(3, 105, 161, 0.8) 100%);
      border-color: rgba(56, 189, 248, 0.95);
      box-shadow: 0 0 22px rgba(56, 189, 248, 0.65);
    }

    .inventory-item-icon {
      width: 36px;
      height: 36px;
      object-fit: contain;
      filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.4));
    }

    .inventory-item-badge-qty {
      position: absolute;
      top: -5px;
      right: -5px;
      background: linear-gradient(135deg, #e11d48, #be123c);
      color: #fff;
      font-size: 9px;
      font-weight: 800;
      padding: 1px 5px;
      border-radius: 6px;
      border: 1px solid rgba(255, 255, 255, 0.4);
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
    }

    .inventory-item-info {
      flex: 1;
      min-width: 0;
      max-width: 100%;
      display: flex;
      flex-direction: column;
      gap: 3px;
      overflow: hidden;
      box-sizing: border-box;
    }

    .inventory-item-title-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 6px;
      min-width: 0;
      width: 100%;
      max-width: 100%;
      box-sizing: border-box;
      overflow: hidden;
    }

    .inventory-item-title {
      font-weight: 800;
      font-size: 0.88rem;
      color: #fff;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      flex: 1;
      min-width: 0;
    }

    .inventory-item-rarity {
      font-size: 8px;
      font-weight: 900;
      text-transform: uppercase;
      padding: 2px 6px;
      border-radius: 6px;
      background: linear-gradient(135deg, #1d4ed8, #3b82f6);
      color: #fff;
      letter-spacing: 0.04em;
      white-space: nowrap;
      flex-shrink: 0;
      line-height: 1.1;
      box-sizing: border-box;
      max-width: fit-content;
    }

    .inventory-item-rarity--common {
      background: linear-gradient(135deg, #059669, #10b981);
      color: #fff;
      border: 1px solid rgba(52, 211, 153, 0.5);
      box-shadow: 0 0 8px rgba(16, 185, 129, 0.4);
    }

    .inventory-item-rarity--rare, .inventory-item-rarity--silver {
      background: linear-gradient(135deg, #1d4ed8, #3b82f6);
      color: #fff;
      border: 1px solid rgba(96, 165, 250, 0.5);
      box-shadow: 0 0 8px rgba(59, 130, 246, 0.4);
    }

    .inventory-item-rarity--epic {
      background: linear-gradient(135deg, #7e22ce, #a855f7);
      color: #fff;
      border: 1px solid rgba(192, 132, 252, 0.5);
      box-shadow: 0 0 8px rgba(168, 85, 247, 0.4);
    }

    .inventory-item-rarity--legendary, .inventory-item-rarity--gold {
      background: linear-gradient(135deg, #b45309, #eab308, #fde047);
      color: #000;
      font-weight: 900;
      border: 1px solid rgba(254, 240, 138, 0.7);
      box-shadow: 0 0 10px rgba(234, 179, 8, 0.5);
    }

    .inventory-item-rarity--diamond {
      background: linear-gradient(135deg, #0284c7, #38bdf8, #bae6fd);
      color: #032f4f;
      font-weight: 900;
      border: 1px solid rgba(186, 230, 253, 0.9);
      box-shadow: 0 0 12px rgba(56, 189, 248, 0.7);
    }

    .inventory-item-desc {
      font-size: 0.75rem;
      color: var(--text-muted);
      line-height: 1.35;
      word-break: break-word;
      overflow-wrap: break-word;
    }

    .inventory-item-actions {
      display: flex;
      width: 100%;
      margin-top: 4px;
      box-sizing: border-box;
    }

    .inventory-item-use-btn {
      width: 100%;
      height: 40px;
      min-height: 40px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      background: linear-gradient(135deg, #9333ea, #06b6d4);
      color: #ffffff;
      border: 1px solid rgba(255, 255, 255, 0.3);
      border-radius: 12px;
      padding: 0 14px;
      font-size: 0.84rem;
      font-weight: 900;
      cursor: pointer;
      text-transform: uppercase;
      letter-spacing: 0.04em;
      box-shadow: 0 4px 14px rgba(147, 51, 234, 0.45);
      transition: all 0.15s ease;
      box-sizing: border-box;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      position: relative;
      z-index: 2;
    }

    .inventory-item-use-btn--common {
      background: linear-gradient(135deg, #059669, #10b981);
      border-color: rgba(52, 211, 153, 0.5);
      box-shadow: 0 4px 14px rgba(16, 185, 129, 0.45);
      color: #ffffff;
    }

    .inventory-item-use-btn--rare, .inventory-item-use-btn--silver {
      background: linear-gradient(135deg, #2563eb, #38bdf8);
      border-color: rgba(96, 165, 250, 0.5);
      box-shadow: 0 4px 14px rgba(37, 99, 235, 0.45);
      color: #ffffff;
    }

    .inventory-item-use-btn--epic {
      background: linear-gradient(135deg, #9333ea, #c084fc);
      border-color: rgba(192, 132, 252, 0.5);
      box-shadow: 0 4px 14px rgba(147, 51, 234, 0.45);
      color: #ffffff;
    }

    .inventory-item-use-btn--legendary, .inventory-item-use-btn--gold {
      background: linear-gradient(135deg, #eab308 0%, #f59e0b 50%, #d97706 100%);
      border: 1px solid rgba(254, 240, 138, 0.8);
      color: #000000;
      font-weight: 900;
      box-shadow: 0 4px 16px rgba(234, 179, 8, 0.55);
      text-shadow: 0 1px 2px rgba(255, 255, 255, 0.4);
    }

    .inventory-item-use-btn--diamond {
      background: linear-gradient(135deg, #0284c7 0%, #38bdf8 50%, #7dd3fc 100%);
      border: 1px solid rgba(186, 230, 253, 0.9);
      color: #032f4f;
      font-weight: 900;
      box-shadow: 0 4px 18px rgba(56, 189, 248, 0.65);
      text-shadow: 0 1px 2px rgba(255, 255, 255, 0.5);
    }

    .inventory-item-use-btn:active {
      transform: scale(0.97);
    }

    .inventory-item-use-btn:disabled {
      opacity: 0.55;
      cursor: not-allowed;
      box-shadow: none !important;
      transform: none !important;
      filter: grayscale(0.35);
    }

    /* ==================== SERVER RESTART & DB STUB ==================== */
    .server-restart-overlay {
      position: fixed;
      top: 0;
      left: 0;
      width: 100vw;
      height: 100vh;
      z-index: 99999;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 20px;
      box-sizing: border-box;
      opacity: 1;
      visibility: visible;
      transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.4s ease;
    }

    .server-restart-overlay.stub-hidden {
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
    }

    .server-restart-backdrop {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: radial-gradient(circle at 50% 30%, rgba(30, 20, 45, 0.92), rgba(10, 10, 14, 0.97) 80%);
      backdrop-filter: blur(28px) saturate(190%);
      -webkit-backdrop-filter: blur(28px) saturate(190%);
    }

    .server-restart-card {
      position: relative;
      width: 100%;
      max-width: 380px;
      background: rgba(22, 22, 28, 0.85);
      border: 1px solid rgba(255, 149, 0, 0.28);
      border-radius: 28px;
      padding: 32px 24px 24px;
      box-sizing: border-box;
      text-align: center;
      box-shadow: 0 24px 60px rgba(0, 0, 0, 0.85), 0 0 45px rgba(255, 149, 0, 0.15);
      overflow: hidden;
      animation: stubCardAppear 0.5s cubic-bezier(0.16, 1, 0.3, 1);
    }

    @keyframes stubCardAppear {
      from {
        opacity: 0;
        transform: scale(0.92) translateY(20px);
      }
      to {
        opacity: 1;
        transform: scale(1) translateY(0);
      }
    }

    .server-restart-glow {
      position: absolute;
      top: -60px;
      left: 50%;
      transform: translateX(-50%);
      width: 220px;
      height: 120px;
      background: radial-gradient(ellipse at center, rgba(255, 149, 0, 0.28), transparent 70%);
      pointer-events: none;
    }

    .server-restart-mascot-wrap {
      position: relative;
      width: 88px;
      height: 88px;
      margin: 0 auto 18px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .server-restart-mascot {
      width: 76px;
      height: 76px;
      object-fit: contain;
      border-radius: 50%;
      filter: drop-shadow(0 6px 16px rgba(255, 149, 0, 0.4));
      animation: mascotFloat 3s ease-in-out infinite;
      z-index: 2;
      position: relative;
    }

    @keyframes mascotFloat {
      0%, 100% { transform: translateY(0px) rotate(0deg); }
      50% { transform: translateY(-6px) rotate(2deg); }
    }

    .server-restart-radar-pulse {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 76px;
      height: 76px;
      border-radius: 50%;
      border: 2px solid rgba(255, 149, 0, 0.6);
      animation: radarPulse 2.4s cubic-bezier(0.215, 0.61, 0.355, 1) infinite;
      pointer-events: none;
      z-index: 1;
    }

    .server-restart-radar-pulse.pulse-delay {
      animation-delay: 1.2s;
    }

    @keyframes radarPulse {
      0% {
        width: 76px;
        height: 76px;
        opacity: 0.8;
      }
      100% {
        width: 170px;
        height: 170px;
        opacity: 0;
      }
    }

    .server-restart-badge {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      padding: 5px 12px;
      border-radius: 20px;
      background: rgba(255, 149, 0, 0.12);
      border: 1px solid rgba(255, 149, 0, 0.35);
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: #ffaa33;
      margin-bottom: 12px;
      transition: all 0.3s ease;
    }

    .server-restart-badge.badge-ready {
      background: rgba(52, 199, 89, 0.14);
      border-color: rgba(52, 199, 89, 0.45);
      color: #34c759;
    }

    .pulse-dot {
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: #ff9500;
      box-shadow: 0 0 8px #ff9500;
      animation: blinkDot 1.4s infinite ease-in-out;
    }

    .badge-ready .pulse-dot {
      background: #34c759;
      box-shadow: 0 0 8px #34c759;
    }

    @keyframes blinkDot {
      0%, 100% { opacity: 1; transform: scale(1); }
      50% { opacity: 0.35; transform: scale(0.8); }
    }

    .server-restart-title {
      font-size: 1.45rem;
      font-weight: 800;
      color: #ffffff;
      margin: 0 0 8px 0;
      letter-spacing: -0.01em;
    }

    .server-restart-desc {
      font-size: 0.88rem;
      line-height: 1.45;
      color: rgba(255, 255, 255, 0.65);
      margin: 0 0 20px 0;
    }

    .server-restart-status-box {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 12px 14px;
      background: rgba(0, 0, 0, 0.35);
      border: 1px solid rgba(255, 255, 255, 0.08);
      border-radius: 16px;
      margin-bottom: 18px;
      text-align: left;
    }

    .status-spinner-wrap {
      flex-shrink: 0;
      width: 28px;
      height: 28px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .status-mini-spinner {
      width: 20px;
      height: 20px;
      border: 2.5px solid rgba(255, 149, 0, 0.25);
      border-top-color: #ff9500;
      border-radius: 50%;
      animation: stubSpin 0.9s linear infinite;
    }

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

    .status-success-icon {
      font-size: 18px;
      color: #34c759;
      font-weight: 900;
    }

    .status-text-content {
      flex: 1;
      min-width: 0;
    }

    .status-label {
      font-size: 10px;
      color: rgba(255, 255, 255, 0.45);
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.04em;
    }

    .status-value {
      font-size: 12px;
      font-weight: 600;
      color: #ffaa33;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      transition: color 0.3s ease;
    }

    .status-value.connected {
      color: #34c759;
    }

    .server-restart-retry-wrap {
      margin-bottom: 12px;
    }

    .server-restart-btn {
      width: 100%;
      height: 44px;
      border-radius: 14px;
      background: linear-gradient(135deg, rgba(255, 149, 0, 0.9), rgba(255, 110, 0, 0.95));
      color: #ffffff;
      font-size: 13px;
      font-weight: 700;
      border: none;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      box-shadow: 0 4px 18px rgba(255, 149, 0, 0.35);
      transition: all 0.2s ease;
    }

    .server-restart-btn:hover {
      background: linear-gradient(135deg, #ffaa33, #ff7a00);
      transform: translateY(-1px);
      box-shadow: 0 6px 22px rgba(255, 149, 0, 0.45);
    }

    .server-restart-btn:active {
      transform: scale(0.97);
    }

    .server-restart-btn:disabled {
      opacity: 0.6;
      cursor: not-allowed;
      transform: none;
    }

    .btn-retry-icon {
      display: inline-block;
      transition: transform 0.4s ease;
    }

    .btn-retry-spinning .btn-retry-icon {
      animation: stubSpin 0.7s linear infinite;
    }

    .server-restart-footer-note {
      font-size: 11px;
      color: rgba(255, 255, 255, 0.4);
      font-weight: 500;
    }

    /* ==================== UNIFIED SHOP & MARKET STYLES ==================== */
    .offer-badge--shop {
      border-color: rgba(245, 158, 11, 0.5) !important;
      background: linear-gradient(135deg, rgba(35, 26, 16, 0.92), rgba(20, 20, 24, 0.96)) !important;
      box-shadow: 0 4px 16px rgba(245, 158, 11, 0.28), 0 0 12px rgba(236, 72, 153, 0.18) !important;
      animation: shopBadgePulse 3.5s ease-in-out infinite;
    }

    @keyframes shopBadgePulse {
      0%, 100% {
        box-shadow: 0 4px 16px rgba(245, 158, 11, 0.28), 0 0 12px rgba(236, 72, 153, 0.18);
        border-color: rgba(245, 158, 11, 0.5);
      }
      50% {
        box-shadow: 0 4px 22px rgba(245, 158, 11, 0.5), 0 0 18px rgba(236, 72, 153, 0.35);
        border-color: rgba(251, 191, 36, 0.85);
      }
    }

    .offer-badge--shop:active {
      transform: scale(0.92);
      border-color: #f59e0b !important;
    }

    .offer-badge--cheese {
      border-color: rgba(251, 191, 36, 0.6) !important;
      background: linear-gradient(135deg, rgba(46, 32, 10, 0.95), rgba(24, 20, 14, 0.98)) !important;
      box-shadow: 0 4px 16px rgba(251, 191, 36, 0.35), 0 0 12px rgba(245, 158, 11, 0.25) !important;
      animation: cheeseBadgePulse 3s ease-in-out infinite;
    }

    @keyframes cheeseBadgePulse {
      0%, 100% {
        box-shadow: 0 4px 16px rgba(251, 191, 36, 0.35), 0 0 12px rgba(245, 158, 11, 0.25);
        border-color: rgba(251, 191, 36, 0.6);
      }
      50% {
        box-shadow: 0 4px 22px rgba(251, 191, 36, 0.65), 0 0 18px rgba(251, 191, 36, 0.45);
        border-color: rgba(254, 240, 138, 0.95);
      }
    }

    .offer-badge--cheese:active {
      transform: scale(0.92);
      border-color: #fbbf24 !important;
    }

    .offer-badge--premium {
      border-color: rgba(176, 38, 255, 0.6) !important;
      background: linear-gradient(135deg, rgba(38, 14, 52, 0.95), rgba(20, 14, 26, 0.98)) !important;
      box-shadow: 0 4px 16px rgba(176, 38, 255, 0.35), 0 0 12px rgba(121, 40, 202, 0.25) !important;
    }

    .offer-badge--premium:active {
      transform: scale(0.92);
      border-color: #b026ff !important;
    }

    .shop-balance-bar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      background: rgba(255, 255, 255, 0.04);
      border: 1px solid rgba(255, 255, 255, 0.08);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      border-radius: 14px;
      padding: 9px 14px;
      margin-bottom: 12px;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    }

    .shop-balance-item {
      display: flex;
      align-items: center;
      gap: 6px;
      font-size: 12px;
      font-weight: 700;
      color: rgba(255, 255, 255, 0.9);
    }

    .shop-balance-item img {
      width: 18px;
      height: 18px;
      vertical-align: middle;
      filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
    }

    .shop-balance-val {
      color: #ffd700;
      font-size: 13.5px;
      font-weight: 900;
      font-variant-numeric: tabular-nums;
    }

    .shop-balance-val--energy {
      color: #00f2fe;
    }

    /* 2-COLUMN OFFERS GRID */
    .shop-offers-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 10px;
      padding-bottom: 28px;
    }

    .shop-offer-card {
      position: relative;
      background: linear-gradient(180deg, rgba(28, 28, 34, 0.95) 0%, rgba(18, 18, 22, 0.98) 100%);
      border: 1px solid rgba(255, 255, 255, 0.08);
      border-radius: 18px;
      padding: 12px 10px 10px 10px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
      transition: transform 0.15s ease, border-color 0.2s ease, box-shadow 0.2s ease;
      cursor: pointer;
      overflow: hidden;
      box-sizing: border-box;
      text-align: center;
    }

    .shop-offer-card:active {
      transform: scale(0.96);
    }

    .shop-offer-card:hover {
      border-color: rgba(255, 255, 255, 0.25);
    }

    .shop-offer-card--stars {
      border-color: rgba(255, 215, 0, 0.35);
    }
    .shop-offer-card--stars:hover {
      border-color: rgba(255, 215, 0, 0.7);
      box-shadow: 0 6px 20px rgba(255, 215, 0, 0.25);
    }

    .shop-offer-card--mega {
      border-color: rgba(0, 242, 254, 0.35);
    }
    .shop-offer-card--mega:hover {
      border-color: rgba(0, 242, 254, 0.7);
      box-shadow: 0 6px 20px rgba(0, 242, 254, 0.25);
    }

    .shop-offer-card--energy {
      border-color: rgba(0, 242, 254, 0.25);
    }
    .shop-offer-card--energy:hover {
      border-color: rgba(0, 242, 254, 0.6);
      box-shadow: 0 6px 20px rgba(0, 242, 254, 0.2);
    }

    .shop-offer-card--ice {
      border-color: rgba(56, 189, 248, 0.35);
    }
    .shop-offer-card--ice:hover {
      border-color: rgba(56, 189, 248, 0.7);
      box-shadow: 0 6px 20px rgba(56, 189, 248, 0.25);
    }

    .shop-offer-card--grimoire {
      border-color: rgba(168, 85, 247, 0.35);
    }
    .shop-offer-card--grimoire:hover {
      border-color: rgba(168, 85, 247, 0.7);
      box-shadow: 0 6px 20px rgba(168, 85, 247, 0.25);
    }

    .shop-offer-card--vip {
      border-color: rgba(245, 158, 11, 0.45);
      background: linear-gradient(180deg, rgba(38, 22, 42, 0.95) 0%, rgba(20, 16, 24, 0.98) 100%);
    }
    .shop-offer-card--vip:hover {
      border-color: rgba(245, 158, 11, 0.8);
      box-shadow: 0 6px 24px rgba(245, 158, 11, 0.35);
    }

    .shop-offer-card--cheese {
      border-color: rgba(251, 191, 36, 0.45);
      background: linear-gradient(180deg, rgba(42, 33, 14, 0.95) 0%, rgba(20, 18, 14, 0.98) 100%);
    }
    .shop-offer-card--cheese:hover {
      border-color: rgba(251, 191, 36, 0.85);
      box-shadow: 0 6px 24px rgba(251, 191, 36, 0.35);
    }

    .shop-offer-card--premium {
      border-color: rgba(176, 38, 255, 0.45);
      background: linear-gradient(180deg, rgba(34, 16, 46, 0.95) 0%, rgba(20, 16, 26, 0.98) 100%);
    }
    .shop-offer-card--premium:hover {
      border-color: rgba(176, 38, 255, 0.85);
      box-shadow: 0 6px 24px rgba(176, 38, 255, 0.35);
    }

    .shop-offer-tag {
      position: absolute;
      top: 8px;
      left: 8px;
      font-size: 8px;
      font-weight: 800;
      padding: 2px 6px;
      border-radius: 6px;
      letter-spacing: 0.4px;
      text-transform: uppercase;
      z-index: 2;
    }

    .shop-offer-art-wrap {
      height: 70px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 14px 0 6px 0;
      position: relative;
    }

    .shop-offer-art {
      max-height: 56px;
      max-width: 68px;
      object-fit: contain;
      filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.45));
      transition: transform 0.2s ease;
    }

    .shop-offer-card:hover .shop-offer-art {
      transform: scale(1.08);
    }

    .shop-offer-title {
      font-size: 12px;
      font-weight: 800;
      color: #fff;
      line-height: 1.25;
      margin-bottom: 2px;
    }

    .shop-offer-subtitle {
      font-size: 10px;
      font-weight: 700;
      margin-bottom: 4px;
      line-height: 1.2;
    }

    .shop-offer-benefit {
      font-size: 8.5px;
      color: var(--text-secondary);
      line-height: 1.25;
      margin-bottom: 10px;
      min-height: 22px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .shop-offer-btn {
      width: 100%;
      padding: 8px 4px;
      border-radius: 10px;
      font-size: 11px;
      font-weight: 800;
      border: none;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 4px;
      transition: transform 0.12s ease, filter 0.15s ease;
    }

    .shop-offer-btn:active {
      transform: scale(0.95);
      filter: brightness(1.15);
    }

    /* FEATURED HERO OFFER IN SHOP */
    .shop-featured-hero--cheese {
      position: relative;
      background: linear-gradient(135deg, rgba(58, 38, 12, 0.95) 0%, rgba(32, 22, 10, 0.98) 55%, rgba(18, 18, 22, 0.98) 100%);
      border: 1.5px solid rgba(251, 191, 36, 0.6);
      border-radius: 18px;
      padding: 12px 14px;
      margin-bottom: 12px;
      box-shadow: 0 8px 24px rgba(251, 191, 36, 0.25), 0 2px 10px rgba(0, 0, 0, 0.5);
      cursor: pointer;
      overflow: hidden;
      transition: transform 0.15s ease, border-color 0.2s ease, box-shadow 0.2s ease;
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    .shop-featured-hero--cheese:active {
      transform: scale(0.98);
    }

    .shop-featured-hero--cheese::after {
      content: '';
      position: absolute;
      top: -30px;
      right: -30px;
      width: 120px;
      height: 120px;
      background: radial-gradient(circle, rgba(251, 191, 36, 0.3) 0%, transparent 70%);
      pointer-events: none;
    }

    .shop-featured-hero-badge {
      align-self: flex-start;
      background: linear-gradient(135deg, #fbbf24, #f59e0b);
      color: #000;
      font-size: 9px;
      font-weight: 900;
      padding: 3px 8px;
      border-radius: 8px;
      letter-spacing: 0.5px;
      text-transform: uppercase;
      box-shadow: 0 2px 8px rgba(251, 191, 36, 0.4);
    }

    .shop-featured-hero-body {
      display: flex;
      align-items: center;
      gap: 12px;
    }

    .shop-featured-hero-art {
      width: 58px;
      height: 58px;
      flex-shrink: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      background: radial-gradient(circle, rgba(251, 191, 36, 0.25) 0%, transparent 70%);
    }

    .shop-featured-hero-img {
      width: 54px;
      height: 54px;
      object-fit: contain;
      filter: drop-shadow(0 4px 10px rgba(251, 191, 36, 0.55));
    }

    .shop-featured-hero-info {
      flex: 1;
      display: flex;
      flex-direction: column;
      gap: 2px;
      min-width: 0;
    }

    .shop-featured-hero-title {
      font-size: 15px;
      font-weight: 800;
      color: #fff;
      line-height: 1.2;
    }

    .shop-featured-hero-slogan {
      font-size: 11.5px;
      font-weight: 700;
      color: #fbbf24;
      line-height: 1.2;
    }

    .shop-featured-hero-benefit {
      font-size: 10px;
      color: #d1d5db;
      line-height: 1.25;
      margin-top: 2px;
    }

    .shop-featured-hero-btn {
      width: 100%;
      padding: 9px 8px;
      border-radius: 12px;
      font-size: 12px;
      font-weight: 800;
      border: none;
      background: linear-gradient(135deg, #fbbf24, #f59e0b);
      color: #000;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      box-shadow: 0 4px 14px rgba(251, 191, 36, 0.4);
      transition: transform 0.12s ease, filter 0.15s ease;
    }

    .shop-featured-hero-btn:active {
      transform: scale(0.96);
      filter: brightness(1.15);
    }


    @media (max-width: 360px) {
      .shop-offers-grid {
        gap: 6px;
      }
      .shop-offer-card {
        padding: 10px 6px 8px 6px;
      }
      .shop-offer-art-wrap {
        height: 56px;
        margin: 10px 0 4px 0;
      }
      .shop-offer-art {
        max-height: 46px;
        max-width: 56px;
      }
      .shop-offer-title {
        font-size: 11px;
      }
      .shop-offer-btn {
        font-size: 10px;
        padding: 7px 3px;
      }
    }

    /* ==================== KEEPER QUEST (ХРАНИТЕЛЬ) ==================== */
    .keeper-pinecone-item,
    div.keeper-pinecone-item,
    [data-cone-id] {
      display: inline-flex !important;
      align-items: center !important;
      justify-content: center !important;
      width: 36px !important;
      height: 36px !important;
      max-width: 36px !important;
      max-height: 36px !important;
      min-width: 36px !important;
      min-height: 36px !important;
      flex: 0 0 36px !important;
      flex-shrink: 0 !important;
      cursor: pointer !important;
      position: relative !important;
      z-index: 95 !important;
      user-select: none !important;
      -webkit-user-select: none !important;
      transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
      box-sizing: border-box !important;
      overflow: visible !important;
    }
    .keeper-pinecone-item img,
    div.keeper-pinecone-item img,
    [data-cone-id] img {
      width: 34px !important;
      height: 34px !important;
      max-width: 34px !important;
      max-height: 34px !important;
      min-width: 34px !important;
      min-height: 34px !important;
      flex: 0 0 34px !important;
      flex-shrink: 0 !important;
      object-fit: contain !important;
      filter: drop-shadow(0 0 8px #10b981) drop-shadow(0 0 16px rgba(245, 158, 11, 0.65)) !important;
      animation: keeperFloat 2.6s ease-in-out infinite !important;
      pointer-events: none !important;
      display: block !important;
      box-sizing: border-box !important;
    }
    .keeper-pinecone-item:hover,
    .keeper-pinecone-item:active {
      transform: scale(1.22) !important;
    }
    @keyframes keeperFloat {
      0%, 100% {
        transform: translateY(0px) rotate(-3deg);
        filter: drop-shadow(0 0 8px #10b981) drop-shadow(0 0 14px rgba(245, 158, 11, 0.6));
      }
      50% {
        transform: translateY(-5px) rotate(4deg);
        filter: drop-shadow(0 0 14px #34d399) drop-shadow(0 0 22px rgba(251, 191, 36, 0.85));
      }
    }
    .keeper-pinecone-particle {
      position: fixed;
      pointer-events: none;
      z-index: 10000;
      font-weight: 800;
      color: #34d399;
      font-size: 16px;
      text-shadow: 0 0 10px rgba(16, 185, 129, 0.9);
      animation: keeperFlyUp 0.9s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    }
    @keyframes keeperFlyUp {
      0% { opacity: 1; transform: translate(0, 0) scale(0.9); }
      100% { opacity: 0; transform: translate(0, -50px) scale(1.3); }
    }

    /* Keeper Scroll Badge */
    .keeper-main-badge {
      border-color: rgba(52, 211, 153, 0.55) !important;
      background: linear-gradient(180deg, rgba(6, 78, 59, 0.45) 0%, rgba(15, 23, 42, 0.92) 100%) !important;
      box-shadow: 0 4px 14px rgba(16, 185, 129, 0.3) !important;
      animation: keeperBadgeGlow 3s infinite ease-in-out;
    }
    @keyframes keeperBadgeGlow {
      0%, 100% {
        box-shadow: 0 4px 14px rgba(16, 185, 129, 0.3);
        border-color: rgba(52, 211, 153, 0.5);
      }
      50% {
        box-shadow: 0 4px 22px rgba(52, 211, 153, 0.65), 0 0 12px rgba(245, 158, 11, 0.4);
        border-color: rgba(52, 211, 153, 0.9);
      }
    }

    /* Keeper Clues Modal (Свиток) */
    .keeper-modal {
      width: 92%;
      max-width: 400px;
      max-height: 85vh;
      overflow-y: auto;
      background: linear-gradient(180deg, #062419 0%, #0d1614 100%) !important;
      border: 1.5px solid rgba(52, 211, 153, 0.45) !important;
      box-shadow: 0 16px 48px rgba(5, 46, 22, 0.6) !important;
      border-radius: 22px;
      padding: 22px 18px 20px;
    }
    .keeper-modal-header {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-bottom: 14px;
      padding-right: 32px;
    }
    .keeper-modal-icon-wrap {
      width: 44px;
      height: 44px;
      border-radius: 14px;
      background: rgba(16, 185, 129, 0.2);
      border: 1px solid rgba(52, 211, 153, 0.5);
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }
    .keeper-modal-title {
      font-size: 1.15rem;
      font-weight: 800;
      color: #6ee7b7;
      margin: 0;
      text-align: left;
    }
    .keeper-modal-subtitle {
      font-size: 0.78rem;
      color: #a7f3d0;
      opacity: 0.8;
      text-align: left;
    }
    .keeper-progress-panel {
      background: rgba(0, 0, 0, 0.45);
      border: 1px solid rgba(52, 211, 153, 0.2);
      border-radius: 14px;
      padding: 12px 14px;
      margin-bottom: 14px;
    }
    .keeper-progress-label {
      display: flex;
      justify-content: space-between;
      font-size: 0.82rem;
      font-weight: 700;
      color: #a7f3d0;
      margin-bottom: 6px;
    }
    .keeper-progress-track {
      width: 100%;
      height: 8px;
      background: rgba(255, 255, 255, 0.08);
      border-radius: 8px;
      overflow: hidden;
    }
    .keeper-progress-fill {
      height: 100%;
      background: linear-gradient(90deg, #10b981 0%, #fbbf24 100%);
      border-radius: 8px;
      transition: width 0.4s ease;
    }
    .keeper-clues-list {
      display: flex;
      flex-direction: column;
      gap: 8px;
      max-height: 44vh;
      overflow-y: auto;
      padding-right: 2px;
    }
    .keeper-clue-item {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 10px 12px;
      border-radius: 12px;
      background: rgba(255, 255, 255, 0.04);
      border: 1px solid rgba(255, 255, 255, 0.06);
      font-size: 0.82rem;
      line-height: 1.35;
      color: #d1fae5;
    }
    .keeper-clue-item.found {
      background: rgba(16, 185, 129, 0.12);
      border-color: rgba(52, 211, 153, 0.35);
      color: #6ee7b7;
    }
    .keeper-clue-badge {
      font-size: 0.72rem;
      font-weight: 800;
      padding: 3px 7px;
      border-radius: 8px;
      flex-shrink: 0;
    }
    .keeper-clue-badge.found {
      background: rgba(16, 185, 129, 0.3);
      color: #34d399;
      border: 1px solid rgba(52, 211, 153, 0.4);
    }
    .keeper-clue-badge.unfound {
      background: rgba(255, 255, 255, 0.08);
      color: #9ca3af;
    }

    /* Victory Modal */
    .keeper-victory-modal {
      width: 90%;
      max-width: 380px;
      background: rgba(22, 22, 28, 0.96) !important;
      backdrop-filter: blur(24px) !important;
      -webkit-backdrop-filter: blur(24px) !important;
      border: 1.5px solid rgba(16, 185, 129, 0.45) !important;
      box-shadow: 0 16px 48px rgba(0, 0, 0, 0.75), 0 0 32px rgba(16, 185, 129, 0.25) !important;
      border-radius: 24px;
      padding: 26px 20px 22px;
      text-align: center;
      position: relative;
    }
    .keeper-victory-burst {
      font-size: 2.8rem;
      margin-bottom: 4px;
      animation: victoryPulse 1.4s infinite alternate ease-in-out;
    }
    @keyframes victoryPulse {
      0% { transform: scale(0.95); }
      100% { transform: scale(1.08); }
    }
    .keeper-victory-cone-wrap {
      margin: 0 auto 12px;
      width: 72px;
      height: 72px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .keeper-victory-cone-glow {
      width: 68px;
      height: 68px;
      object-fit: contain;
      filter: drop-shadow(0 0 16px rgba(16, 185, 129, 0.9)) drop-shadow(0 0 28px rgba(245, 158, 11, 0.6));
      animation: keeperFloat 2.2s ease-in-out infinite;
    }
    .keeper-victory-title {
      font-size: 1.25rem;
      font-weight: 900;
      color: #fff;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      margin-bottom: 8px;
      text-shadow: 0 0 16px rgba(255, 215, 0, 0.5);
    }
    .keeper-victory-desc {
      font-size: 0.88rem;
      color: var(--text-muted);
      margin-bottom: 12px;
      line-height: 1.45;
    }
    .keeper-victory-reward-badge {
      background: linear-gradient(135deg, rgba(245, 158, 11, 0.2), rgba(16, 185, 129, 0.18));
      border: 1.5px solid rgba(251, 191, 36, 0.6);
      border-radius: 14px;
      padding: 9px 14px;
      font-size: 0.88rem;
      font-weight: 800;
      color: #ffd700;
      margin-bottom: 12px;
      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35), 0 0 12px rgba(245, 158, 11, 0.2);
    }
    .keeper-victory-note {
      font-size: 0.78rem;
      color: var(--text-secondary);
      margin-bottom: 18px;
      line-height: 1.45;
    }
    .keeper-victory-actions {
      display: flex;
      flex-direction: column;
      gap: 10px;
      width: 100%;
    }
    .keeper-return-main-btn {
      position: relative;
      width: 100%;
      height: 52px;
      padding: 0 20px;
      border-radius: 16px;
      border: 1px solid rgba(52, 211, 153, 0.5);
      background: linear-gradient(135deg, #10b981 0%, #059669 55%, #047857 100%);
      color: #ffffff;
      font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Roboto', sans-serif;
      font-size: 14.5px;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      cursor: pointer;
      box-shadow: 0 4px 20px rgba(16, 185, 129, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.35);
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      overflow: hidden;
      transition: transform 0.12s ease-in-out, box-shadow 0.15s ease, filter 0.15s ease;
      box-sizing: border-box;
    }
    .keeper-return-main-btn::after {
      content: '';
      position: absolute;
      top: 0;
      left: -100%;
      width: 60%;
      height: 100%;
      background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.35), transparent);
      transform: skewX(-22deg);
      animation: keeperReturnShimmer 3.2s infinite ease-in-out;
      pointer-events: none;
    }
    @keyframes keeperReturnShimmer {
      0%, 40% { left: -100%; }
      60%, 100% { left: 160%; }
    }
    .keeper-return-main-btn:active {
      transform: scale(0.96) !important;
      box-shadow: 0 2px 10px rgba(16, 185, 129, 0.6) !important;
      filter: brightness(0.95);
    }
    .keeper-return-secondary-btn {
      width: 100%;
      height: 48px;
      padding: 0 16px;
      border-radius: 16px;
      border: 1px solid var(--border-subtle);
      background: var(--bg-elevated);
      color: var(--text-muted);
      font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Roboto', sans-serif;
      font-size: 13.5px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.04em;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
      transition: transform 0.12s ease-in-out, background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
      box-sizing: border-box;
    }
    .keeper-return-secondary-btn:hover {
      background: var(--bg-elevated-hover);
      color: #ffffff;
      border-color: rgba(255, 255, 255, 0.2);
    }
    .keeper-return-secondary-btn:active {
      transform: scale(0.96) !important;
      background: var(--bg-elevated-hover);
      color: #ffffff;
    }

    @media (max-height: 680px), (max-width: 360px) {
      .keeper-victory-modal {
        padding: 20px 16px 18px !important;
      }
      .keeper-return-main-btn {
        height: 46px;
        font-size: 13px;
        border-radius: 14px;
      }
      .keeper-return-secondary-btn {
        height: 42px;
        font-size: 12px;
        border-radius: 14px;
      }
    }

/* ==================== ВЕБ-ВЕРСИЯ НА ШИРОКОМ ЭКРАНЕ ==================== */
/* Вне Telegram приложение живёт в мобильной рамке по центру экрана.
   Фон вокруг рамки — ночной лес: тёплое свечение сверху, холодный туман
   по краям, виньетка и мелкое зерно (гасит полосы градиента на широких
   матрицах). Картинкой не делаем: она либо перетягивает внимание с игры,
   либо весит как остальные фоны (≈1 МБ) на пустое место. */
html.web-wide body {
  background-color: #07080a;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23g)' opacity='0.06'/%3E%3C/svg%3E"),
    radial-gradient(120% 92% at 50% 46%, transparent 52%, rgba(0, 0, 0, 0.55) 100%),
    radial-gradient(560px 860px at 50% 46%, rgba(255, 196, 92, 0.06), transparent 72%),
    radial-gradient(1100px 640px at 50% 0%, rgba(255, 176, 64, 0.10), transparent 68%),
    radial-gradient(760px 920px at 4% 82%, rgba(56, 189, 248, 0.10), transparent 70%),
    radial-gradient(820px 880px at 96% 22%, rgba(34, 197, 94, 0.08), transparent 68%),
    linear-gradient(180deg, #0b0d13 0%, #0a1013 52%, #060808 100%);
  background-repeat: repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat;
  background-attachment: fixed;
}

html.web-wide #app {
  width: 480px;
  max-width: 100vw;
  margin: 0 auto;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.07), 0 28px 80px rgba(0, 0, 0, 0.75);
}

html.web-wide .bottom-sheet__wrapper {
  left: 0;
  right: 0;
  margin: 0 auto;
  max-width: 480px;
}

/* Игры и разделы в iframe-пуле живут в тех же 480px, что и приложение:
   иначе на мониторе игра занимала весь экран, а меню оставалось в рамке. */
html.web-wide #iframe-pool {
  left: 0;
  right: 0;
  width: 480px;
  max-width: 100vw;
  margin: 0 auto;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.07), 0 28px 80px rgba(0, 0, 0, 0.75);
}

/* ==================== PRAISE MODE (ПОХВАЛИ ИГРУ) ==================== */
/* Строка ввода на главном: та же стеклянная палитра, что у пилюль ресурсов,
   но с розовым акцентом — режим про эмоции, а не про ресурсы. */
.home__praise {
  display: flex;
  gap: 8px;
  padding: 6px 12px 0;
  width: 100%;
  box-sizing: border-box;
  flex-shrink: 0;
}

.home__praise-input {
  flex: 1;
  min-width: 0;
  height: 38px;
  padding: 0 14px;
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(30, 30, 36, 0.92) 0%, rgba(20, 20, 24, 0.96) 100%);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(236, 72, 153, 0.35);
  color: #ffffff;
  font-size: 12.5px;
  font-weight: 600;
  outline: none;
  box-sizing: border-box;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  transition: border-color 0.15s, box-shadow 0.15s;
}

.home__praise-input::placeholder {
  color: rgba(255, 255, 255, 0.45);
  font-weight: 600;
}

.home__praise-input:focus {
  border-color: rgba(236, 72, 153, 0.75);
  box-shadow: 0 0 0 2px rgba(236, 72, 153, 0.18);
}

.home__praise-input:disabled {
  opacity: 0.55;
}

.home__praise-btn {
  flex: 0 0 38px;
  width: 38px;
  height: 38px;
  border: 1px solid rgba(236, 72, 153, 0.45);
  border-radius: 12px;
  background: linear-gradient(135deg, #ec4899, #8b5cf6);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(236, 72, 153, 0.35);
  transition: transform 0.12s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.15s;
}

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

.home__praise-btn:disabled {
  opacity: 0.5;
}

.home__praise-btn-icon {
  font-size: 1.1rem;
  line-height: 1;
}

.home__praise-btn.praise-sending {
  animation: praiseSending 1s ease-in-out infinite;
}

@keyframes praiseSending {
  50% {
    opacity: 0.55;
  }
}

html.screen-short .home__praise {
  padding-top: 3px;
}

html.screen-short .home__praise-input,
html.screen-short .home__praise-btn {
  height: 34px;
}

html.screen-short .home__praise-btn {
  flex-basis: 34px;
  width: 34px;
}

/* Результат оценки: счёт, вердикт ИИ и награда в одном окне. */
.praise-result .praise-result__icon {
  border-color: rgba(236, 72, 153, 0.45);
  box-shadow: 0 6px 20px rgba(236, 72, 153, 0.25);
}

.praise-result__score {
  font-size: 2rem;
  font-weight: 900;
  letter-spacing: 0.01em;
  margin: 0 0 6px;
  background: linear-gradient(135deg, #ffffff, #f472b6);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.praise-result__verdict {
  font-size: 0.9rem;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.78);
  margin: 0 0 14px;
  min-height: 2.6em;
}

.praise-result__reward {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 1rem;
  font-weight: 800;
  color: #fbbf24;
  margin-bottom: 12px;
}

.praise-result__reward-value {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: #ffffff;
  text-shadow: 0 0 12px rgba(251, 191, 36, 0.5);
}

.praise-result__reward .cone-icon {
  width: 1.3em;
  height: 1.3em;
}

.praise-result__published {
  font-size: 0.8rem;
  line-height: 1.4;
  color: #6ee7b7;
  margin: 0 0 14px;
}

/* ==================== ВИНТАЖНАЯ ПАЛИТРА ГЛАВНОГО ЭКРАНА ====================
   Новые обои — приглушённая гравюра с тёплой бумагой, латунью и зеленью.
   Неоновые акценты на ней читаются как чужие наклейки, поэтому главный экран
   переведён на тёмное дерево/латунь/оксблад: насыщенность ниже исходной, но
   без бледности — тёмные плотные подложки, контрастный кремовый текст и
   сочные, хотя и приглушённые, акценты. Только цвет и тени, размеры и
   расположение элементов не меняются.
   ========================================================================= */
:root {
  --bg-primary: #0f0e0c;
  --bg-secondary: #171410;
  --bg-elevated: #241f18;
  --bg-elevated-hover: #2f281f;
  --border-subtle: rgba(214, 190, 146, 0.16);
  --border-focus: rgba(201, 169, 106, 0.6);
  --text-primary: #f2e8d2;
  --text-muted: #e0d3b8;
  --text-secondary: #b3a489;
  --btn-red: #9c4a34;
  --btn-red-active: #833a28;
  --accent-green: #8f9a5f;
  --accent-gold: #c9a96a;
  --accent-orange: #b06a45;
  --accent-blue: #6f8a80;
}

#app.app-bg-main {
  background-image:
    radial-gradient(120% 80% at 50% 0%, rgba(24, 20, 15, 0.16) 0%, rgba(10, 8, 6, 0.42) 72%),
    linear-gradient(180deg, rgba(20, 17, 13, 0.22) 0%, rgba(15, 12, 9, 0.28) 45%, rgba(7, 6, 5, 0.62) 100%),
    url('images/backgrounds/bgr_main.jpg?v=2026.11.08.11');
}

/* Шапка: тёмное дерево вместо чёрного, сочная латунь вместо жёлтого. */
#app-header.home__title {
  background: linear-gradient(180deg, rgba(40, 33, 25, 0.96) 0%, rgba(21, 17, 13, 0.96) 100%) !important;
  border-bottom-color: rgba(214, 190, 146, 0.2) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.42) !important;
}
#app-header .cap__element-wrapper {
  background: linear-gradient(135deg, #c9a96a, #86603f) !important;
}
#app-header .home-leaderboard__username { color: #f6edda !important; }
#app-header .home-leaderboard__score-points { color: #d8b878 !important; }
#app-header .home-leaderboard__progress { background: rgba(255, 255, 255, 0.12) !important; }
#app-header .home-leaderboard__progress-fill {
  background: linear-gradient(90deg, #d8b878, #8f9a5f) !important;
}
#app-header .badge-icon-button__icon {
  filter: sepia(0.14) saturate(0.62) brightness(0.92) !important;
}
#app-header .badge-icon-button__badge {
  color: #e7d9bd !important;
  background: rgba(52, 43, 32, 0.94) !important;
  border-color: rgba(214, 190, 146, 0.28) !important;
  filter: sepia(0.14) saturate(0.62);
}
#app-header .home-leaderboard__score-img { filter: sepia(0.16) saturate(0.65); }

/* Пилюли ресурсов и строка похвалы: плотное тёмное стекло. */
#main-menu .home__profile {
  background: linear-gradient(180deg, rgba(43, 36, 27, 0.94) 0%, rgba(24, 20, 15, 0.97) 100%) !important;
  border-color: rgba(214, 190, 146, 0.22) !important;
  color: #f3ead6 !important;
  box-shadow: inset 0 1px 0 rgba(255, 240, 210, 0.08) !important;
}
#main-menu .home__profile:active { border-color: rgba(201, 169, 106, 0.6) !important; }
#main-menu .home-energy__num { color: #a9b574 !important; }
#main-menu .home-energy__progress { background: rgba(255, 255, 255, 0.12) !important; }
#main-menu .home-energy__progress-bar { background: #8f9a5f !important; }
#main-menu .balance-add-btn {
  background: linear-gradient(135deg, #8f9a5f, #6d7747) !important;
  border-color: rgba(236, 220, 180, 0.35) !important;
  color: #f7efdc !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4) !important;
}
#main-menu .cone-icon {
  filter: drop-shadow(0 0 4px rgba(200, 160, 80, 0.28)) saturate(0.85) !important;
}
#main-menu .profile-pill-icon {
  filter: sepia(0.14) saturate(0.68) brightness(0.94);
}

#main-menu .home__praise-input {
  background: linear-gradient(180deg, rgba(43, 36, 27, 0.94) 0%, rgba(24, 20, 15, 0.97) 100%) !important;
  border-color: rgba(214, 190, 146, 0.24) !important;
  color: #f3ead6 !important;
}
#main-menu .home__praise-input::placeholder { color: rgba(226, 211, 186, 0.5) !important; }
#main-menu .home__praise-input:focus {
  border-color: rgba(201, 169, 106, 0.6) !important;
  box-shadow: 0 0 0 2px rgba(201, 169, 106, 0.18) !important;
}
#main-menu .home__praise-btn {
  background: linear-gradient(135deg, #9a6b43, #6a4a30) !important;
  border-color: rgba(214, 190, 146, 0.32) !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4) !important;
}
#main-menu .home__praise-btn-icon { filter: sepia(0.18) saturate(0.7) !important; }

/* Боковые кнопки-плашки: тёмное дерево, латунные ярлычки. */
#main-menu .offer-badge,
#main-menu .home__bottom-btn {
  background: linear-gradient(180deg, rgba(41, 34, 26, 0.94) 0%, rgba(22, 18, 14, 0.97) 100%) !important;
  border-color: rgba(214, 190, 146, 0.2) !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.38), inset 0 1px 0 rgba(255, 240, 210, 0.07) !important;
}
#main-menu .offer-badge__timer {
  background: linear-gradient(135deg, #a18450, #76592f) !important;
  color: #171208 !important;
  border-color: rgba(236, 220, 180, 0.4) !important;
  box-shadow: none !important;
  font-weight: 900 !important;
}
#main-menu .offer-badge__timer--live { background: linear-gradient(135deg, #a04a36, #7c3325) !important; color: #f7eeda !important; }
#main-menu .offer-badge__timer--hot { background: linear-gradient(135deg, #b0693a, #854727) !important; color: #f7eeda !important; }
#main-menu .offer-badge__label { color: #e2d6bd !important; }
#main-menu .offer-badge__icon {
  filter: sepia(0.16) saturate(0.7) brightness(0.94) !important;
}
#main-menu .cube-counter-badge {
  background: linear-gradient(135deg, #9c422f, #762d21) !important;
  border-color: rgba(246, 236, 214, 0.8) !important;
  box-shadow: 0 0 7px rgba(0, 0, 0, 0.5) !important;
  animation: none !important;
}
.nav .cube-counter-badge,
#bottom-nav .cube-counter-badge {
  background: linear-gradient(135deg, #9c422f, #762d21) !important;
  border-color: rgba(246, 236, 214, 0.8) !important;
  box-shadow: 0 0 7px rgba(0, 0, 0, 0.5) !important;
  animation: none !important;
}

/* Маскот: тёплый приглушённый тон вместо белого пятна. */
#main-menu .mascot-ambient-glow {
  background: radial-gradient(circle, rgba(198, 170, 120, 0.2) 0%, rgba(120, 100, 70, 0.07) 55%, transparent 72%) !important;
}
.mascot-character {
  filter: sepia(0.1) saturate(0.9) brightness(0.68) contrast(1.1) drop-shadow(0 8px 16px rgba(0, 0, 0, 0.72));
}
#main-menu .mascot-season-tag {
  color: rgba(230, 216, 188, 0.8) !important;
  background: rgba(30, 25, 19, 0.88) !important;
  border-color: rgba(214, 190, 146, 0.2) !important;
}
#main-menu .mascot-speech-bubble {
  background: rgba(32, 26, 20, 0.96) !important;
  color: #dcc79b !important;
  border-color: rgba(214, 190, 146, 0.4) !important;
}
#main-menu .mascot-speech-bubble::after {
  border-color: rgba(214, 190, 146, 0.4) transparent transparent transparent !important;
}
#main-menu .mascot-tap-pill {
  color: #dcc28c !important;
  background: rgba(38, 31, 23, 0.82) !important;
  border-color: rgba(214, 190, 146, 0.34) !important;
  box-shadow: none !important;
}
#main-menu .mascot-tap-pill .cone-icon { filter: saturate(0.82) !important; }

/* Главная кнопка: насыщенный оксблад вместо алого неона. */
#main-menu .home__play-main-btn {
  background: linear-gradient(135deg, #94452f 0%, #7a3526 45%, #54241b 100%) !important;
  border-color: rgba(226, 205, 160, 0.32) !important;
  color: #f7eeda !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 244, 220, 0.16) !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
  animation: none !important;
}
#main-menu .home__play-main-btn:active {
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5) !important;
}
#main-menu .home__play-main-btn::after {
  opacity: 0.14 !important;
  animation: none !important;
}
#main-menu .home__play-main-btn > span:first-child {
  filter: sepia(0.16) saturate(0.68) !important;
}
#main-menu .home__play-main-btn > span:last-child {
  color: #dcc08a !important;
  filter: sepia(0.16) saturate(0.75) !important;
}

/* Нижнее меню: тёмное дерево, янтарное свечение активной вкладки. */
.nav {
  background: linear-gradient(180deg, rgba(38, 31, 24, 0.95) 0%, rgba(19, 16, 12, 0.97) 100%) !important;
  border-color: rgba(214, 190, 146, 0.22) !important;
  backdrop-filter: blur(18px) saturate(120%) !important;
  -webkit-backdrop-filter: blur(18px) saturate(120%) !important;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(214, 190, 146, 0.14) !important;
}
.nav__item { color: #b3a489 !important; }
.nav__item .nav-icon { filter: sepia(0.14) saturate(0.7) brightness(0.94); }
.nav__item--active { color: #f2e8d2 !important; }
.nav__item--active .nav-icon {
  filter: sepia(0.18) saturate(0.68) drop-shadow(0 0 6px rgba(210, 175, 110, 0.4)) !important;
}

/* Плашки наград внизу и у Дупла. */
#main-menu .home__bottom-btn-label { color: #e0d3b8 !important; }
#main-menu .home__bottom-icon { filter: sepia(0.16) saturate(0.68) brightness(0.94) !important; }
#main-menu .home-bonus-badge {
  background: linear-gradient(135deg, #c0a065, #8a6b39) !important;
  color: #171208 !important;
  border-color: rgba(246, 236, 214, 0.5) !important;
}
#main-menu .home-pack-badge {
  background: linear-gradient(135deg, #8a748f, #61506b) !important;
  color: #f5ede0 !important;
}
#main-menu .home__bottom-btn.bonus-ready {
  border-color: rgba(214, 180, 110, 0.55) !important;
  box-shadow: 0 0 12px rgba(196, 160, 90, 0.28) !important;
  animation: none !important;
}
#main-menu .home__bottom-btn.bonus-cooldown .home__bottom-btn-label {
  color: #d6bf90 !important;
}