* { box-sizing: border-box; }

    /* 514757 THEME PALETTE WITH SORA FONT */
    :root, body {
      --font-family: 'Sora', sans-serif;
      --bg-page: #0e0c12;
      --bg-header: #0a090d;
      --bg-card: #0e0c12;
      --bg-card-hover: #16131c;
      --bg-well: #070609;
      --border-card: #201b26;
      --border-card-hover: #352d3d;
      --accent-color: #514757;
      --accent-rgb: 81, 71, 87;
      --accent-btn-bg: #27212c;
      --accent-btn-border: #514757;
      --accent-btn-text: #d6cedb;
      --accent-btn-hover: #3d3345;
    }

    html, body {
      height: 100%;
      margin: 0;
      padding: 0;
      background: var(--bg-page);
      color: #f1f5f9;
      font-family: var(--font-family);
      overflow: hidden;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      text-rendering: optimizeLegibility;
      transition: background-color 0.2s ease;
      position: relative;
    }

    body::before {
      content: "";
      position: fixed;
      inset: 0;
      pointer-events: none;
      z-index: 0;
      background-image: url("/images/adoptme-pattern.svg");
      background-repeat: repeat;
      background-size: 320px 320px;
      opacity: 1;
    }
    .font-fredoka { font-family: 'Fredoka', cursive, sans-serif !important; font-weight: 700; }
    
    /* Bubbly Brand Title with Wide Background-Style Button Pink (#ff4785) Outline & 3D Depth (No Glow) */
    .brand-title-amproll {
      font-family: 'Titan One', 'Lilita One', 'Fredoka', cursive, sans-serif !important;
      font-weight: normal;
      color: #ffebf4;
      text-transform: uppercase;
      letter-spacing: 0.06em;
      -webkit-text-stroke: 5.5px #ff4785;
      paint-order: stroke fill;
      text-shadow:
        -2px -2px 0 #ff4785,
         2px -2px 0 #ff4785,
        -2px  2px 0 #ff4785,
         2px  2px 0 #ff4785,
         0  4px 0 #d91b5c,
         0  6px 0 #a80f42;
      display: inline-block;
      user-select: none;
      transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
    }
    .brand-title-amproll:hover {
      transform: scale(1.05);
    }
    
    /* Text Selection */
    ::selection {
      background: rgba(81, 71, 87, 0.65);
      color: #f1f5f9;
    }
    ::-moz-selection {
      background: rgba(81, 71, 87, 0.65);
      color: #f1f5f9;
    }

    /* Scrollbars */
    ::-webkit-scrollbar { width: 5px; height: 5px; }
    ::-webkit-scrollbar-track { background: var(--bg-well); }
    ::-webkit-scrollbar-thumb { background: var(--border-card); border-radius: 4px; }
    ::-webkit-scrollbar-thumb:hover { background: var(--border-card-hover); }

    /* Flat Card Design */
    .sp-card {
      background: var(--bg-card);
      border: 1px solid var(--border-card);
      transition: all 0.15s ease;
    }
    .sp-card:hover {
      border-color: var(--border-card-hover);
    }

    /* Inventory Pet Card */
    .pet-card {
      background: var(--bg-well);
      border: 1px solid var(--border-card);
      transition: all 0.15s ease;
    }
    .pet-card:hover {
      background: var(--bg-card-hover);
      border-color: var(--border-card-hover);
      transform: translateY(-2px);
    }
    .pet-card.is-selected {
      background: rgba(var(--accent-rgb), 0.08) !important;
      border: 1px solid var(--accent-color) !important;
      box-shadow: 0 0 14px rgba(var(--accent-rgb), 0.2) !important;
      transform: translateY(-2px);
    }

    /* Inventory Grids: Pack rows tightly to the top with exact gaps across all screen sizes */
    #pet-inventory-grid,
    #upgrader-inventory-grid,
    #upgrader-targets-grid,
    #join-modal-inventory-grid,
    #giveaway-inventory-grid,
    #giveaway-presets-grid,
    #withdraw-inventory-grid {
      align-content: start !important;
      grid-auto-rows: max-content !important;
      width: 100% !important;
    }

    /* Unified Button Design System matching Reference Image */
    .btn-brand-pink,
    .btn-subtle-primary {
      background: #ff4785 !important;
      color: #120e1e !important;
      border: none !important;
      border-radius: 9px !important;
      font-weight: 700 !important;
      transition: all 0.16s cubic-bezier(0.4, 0, 0.2, 1) !important;
      box-shadow: 0 3px 12px rgba(255, 71, 133, 0.22) !important;
      cursor: pointer;
    }
    .btn-brand-pink:hover,
    .btn-subtle-primary:hover {
      background: #ff5c96 !important;
      color: #120e1e !important;
      box-shadow: 0 5px 18px rgba(255, 71, 133, 0.38) !important;
      transform: translateY(-1px);
    }
    .btn-brand-pink:active,
    .btn-subtle-primary:active {
      transform: scale(0.96) !important;
    }
    .btn-brand-pink svg,
    .btn-subtle-primary svg {
      color: #120e1e;
    }

    .btn-brand-slate,
    .btn-subtle-secondary {
      background: #2b3040 !important;
      color: #ffffff !important;
      border: none !important;
      border-radius: 9px !important;
      font-weight: 700 !important;
      transition: all 0.16s cubic-bezier(0.4, 0, 0.2, 1) !important;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.22) !important;
      cursor: pointer;
    }
    .btn-brand-slate:hover,
    .btn-subtle-secondary:hover {
      background: #363d50 !important;
      color: #ffffff !important;
      transform: translateY(-1px);
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.32) !important;
    }
    .btn-brand-slate:active,
    .btn-subtle-secondary:active {
      transform: scale(0.96) !important;
    }
    select.btn-brand-slate,
    select.btn-brand-slate:hover,
    select.btn-brand-slate:focus,
    select.btn-brand-slate:active {
      transform: none !important;
    }
    .btn-brand-slate svg,
    .btn-subtle-secondary svg {
      color: #ffffff;
    }

    .btn-brand-pink:disabled,
    .btn-subtle-primary:disabled {
      background: #4a2133 !important;
      color: #947185 !important;
      opacity: 1 !important;
      cursor: not-allowed !important;
      transform: none !important;
      box-shadow: none !important;
    }
    .btn-brand-slate:disabled,
    .btn-subtle-secondary:disabled {
      background: #1b1e28 !important;
      color: #555e70 !important;
      opacity: 1 !important;
      cursor: not-allowed !important;
      transform: none !important;
      box-shadow: none !important;
    }

    /* 2D Stationary Flip & Growth Widget */
    .stage {
      height: 180px;
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      perspective: 1000px;
      margin: 0 auto;
    }

    .shadow {
      position: absolute;
      bottom: 5px;
      width: 90px;
      height: 20px;
      border-radius: 50%;
      background: rgba(0, 0, 0, 0.65);
      filter: blur(6px);
      transform: scale(1);
      transition: transform .15s, opacity .15s;
    }

    .coin-container {
      position: relative;
      width: 120px;
      height: 120px;
      transform-style: preserve-3d;
      z-index: 2;
    }

    .coin {
      width: 120px;
      height: 120px;
      position: relative;
      transform-style: preserve-3d;
      transition: transform 1.25s cubic-bezier(.15,.75,.2,1);
    }

    .face {
      position: absolute;
      inset: 0;
      border-radius: 50%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      background: #e11d48;
      border: 5px solid #fb7185;
      box-shadow: inset 0 0 0 3px rgba(120,20,40,.3), 0 8px 25px rgba(225,29,72,.4);
      backface-visibility: hidden;
      -webkit-backface-visibility: hidden;
      font-weight: 900;
      color: #ffffff;
    }

    .face.heads {
      background: #e11d48;
      border-color: #fb7185;
      color: #ffffff;
      transform: rotateY(0deg);
      -webkit-transform: rotateY(0deg);
    }

    .face.tails {
      transform: rotateY(180deg);
      -webkit-transform: rotateY(180deg);
      background: #0284c7;
      border-color: #38bdf8;
      color: #ffffff;
      box-shadow: inset 0 0 0 3px rgba(0,50,100,.3), 0 8px 25px rgba(2,132,199,.4);
    }

    .coin-container.flipping {
      animation: coinGrow 2.2s cubic-bezier(.18,.75,.2,1) forwards;
    }

    .flipping ~ .shadow {
      animation: shadowAnimation 2.2s ease-in-out forwards;
    }

    @keyframes coinGrow {
      0% { transform: scale(.75); }
      40% { transform: scale(1.5); }
      60% { transform: scale(1.5); }
      88% { transform: scale(.78); }
      95% { transform: scale(.85); }
      100% { transform: scale(.80); }
    }

    @keyframes shadowAnimation {
      0% { transform: scale(1); opacity: .6; }
      45% { transform: scale(.4); opacity: .15; }
      85% { transform: scale(1); opacity: .7; }
      95% { transform: scale(1.15); opacity: .85; }
      100% { transform: scale(1); opacity: .65; }
    }

    .slam { animation: slam .18s ease-out; }
    @keyframes slam {
      0% { transform: scale(1); }
      35% { transform: scale(1.2); }
      100% { transform: scale(1); }
    }

    /* INLINE LOBBY 3D COIN WIDGET STYLES (VISIBLE ON HOME PAGE) */
    .lobby-coin-stage {
      width: 48px;
      height: 48px;
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      perspective: 600px;
      flex-shrink: 0;
    }
    .lobby-coin-container {
      position: relative;
      width: 42px;
      height: 42px;
      transform-style: preserve-3d;
      z-index: 2;
    }
    .lobby-coin {
      width: 42px;
      height: 42px;
      position: relative;
      transform-style: preserve-3d;
      transition: transform 2.2s cubic-bezier(.18,.75,.2,1);
    }
    .lobby-coin-face {
      position: absolute;
      inset: 0;
      border-radius: 50%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      backface-visibility: hidden;
      font-weight: 900;
      color: #ffffff;
      box-shadow: 0 4px 12px rgba(0,0,0,0.5);
    }
    .lobby-coin-face.heads {
      background: #e11d48;
      border: 3px solid #fb7185;
    }
    .lobby-coin-face.tails {
      transform: rotateY(180deg);
      background: #0284c7;
      border: 3px solid #38bdf8;
    }
    /* 4 NATURAL COIN SPIN ANIMATIONS (NO SIZE CHANGE - CRISP FIXED 42PX) */
    @keyframes coinSpinH2H {
      0% { transform: rotateY(0deg); }
      100% { transform: rotateY(1800deg); } /* 5 full rotations, ends on Heads */
    }
    @keyframes coinSpinH2T {
      0% { transform: rotateY(0deg); }
      100% { transform: rotateY(1980deg); } /* 5.5 rotations, ends on Tails */
    }
    @keyframes coinSpinT2H {
      0% { transform: rotateY(180deg); }
      100% { transform: rotateY(2160deg); } /* 5.5 rotations from 180, ends on Heads (360 * 6) */
    }
    @keyframes coinSpinT2T {
      0% { transform: rotateY(180deg); }
      100% { transform: rotateY(2340deg); } /* 6 full rotations from 180, ends on Tails (360 * 6 + 180) */
    }

    .lobby-coin.coin-spin-h2h {
      animation: coinSpinH2H var(--coin-dur, 3.2s) cubic-bezier(0.15, 0.85, 0.25, 1) forwards !important;
    }
    .lobby-coin.coin-spin-h2t {
      animation: coinSpinH2T var(--coin-dur, 3.2s) cubic-bezier(0.15, 0.85, 0.25, 1) forwards !important;
    }
    .lobby-coin.coin-spin-t2h {
      animation: coinSpinT2H var(--coin-dur, 3.2s) cubic-bezier(0.15, 0.85, 0.25, 1) forwards !important;
    }
    .lobby-coin.coin-spin-t2t {
      animation: coinSpinT2T var(--coin-dur, 3.2s) cubic-bezier(0.15, 0.85, 0.25, 1) forwards !important;
    }

    /* ARENA SINGLE RESULT FLIP ANIMATIONS (RED / HEADS or BLUE / TAILS) */
    @keyframes arenaFlipRed {
      0% { transform: rotateY(0deg); }
      100% { transform: rotateY(1800deg); } /* 5 full rotations, lands on Red / Heads */
    }
    @keyframes arenaFlipBlue {
      0% { transform: rotateY(0deg); }
      100% { transform: rotateY(1980deg); } /* 5.5 rotations, lands on Blue / Tails */
    }
    .coin.coin-flip-red {
      animation: arenaFlipRed 2.2s cubic-bezier(0.15, 0.85, 0.22, 1) forwards !important;
      transition: none !important;
    }
    .coin.coin-flip-blue {
      animation: arenaFlipBlue 2.2s cubic-bezier(0.15, 0.85, 0.22, 1) forwards !important;
      transition: none !important;
    }
    .coin.continuous-spin {
      display: none;
    }
    @keyframes lobbyInfiniteSpin {
      0% { transform: rotateY(0deg); }
      100% { transform: rotateY(360deg); }
    }
    .lobby-coin.lobby-infinite-spin {
      animation: lobbyInfiniteSpin 0.35s linear infinite !important;
      transition: none !important;
    }
    .lobby-coin.spin-settling {
      animation: none !important;
      transition: transform 2.2s cubic-bezier(0.15, 0.85, 0.25, 1) !important;
    }

    .lobby-coin-shadow {
      position: absolute;
      bottom: 2px;
      width: 34px;
      height: 6px;
      border-radius: 50%;
      background: rgba(0, 0, 0, 0.55);
      filter: blur(2px);
    }

    /* WINNER & LOSER DYNAMIC HIGHLIGHT STYLES */
    .avatar-winner {
      box-shadow: 0 0 0 3px #10b981, 0 0 24px rgba(16, 185, 129, 0.75) !important;
      border-color: #10b981 !important;
      transform: scale(1.06);
      transform-origin: center center;
      position: relative;
      z-index: 10;
      transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease, border-color 0.3s ease;
    }
    .avatar-loser {
      filter: grayscale(70%) brightness(35%) contrast(95%) !important;
      opacity: 1 !important;
      transform: scale(0.94);
      transform-origin: center center;
      transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), filter 0.3s ease;
    }
    .avatar-winner-tag {
      position: absolute;
      bottom: -8px;
      left: 50%;
      transform: translateX(-50%);
      background: #10b981;
      color: #064e3b;
      font-size: 9px;
      font-weight: 900;
      padding: 1px 7px;
      border-radius: 9999px;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      border: 1px solid #34d399;
      box-shadow: 0 2px 10px rgba(16, 185, 129, 0.55);
      z-index: 30;
      pointer-events: none;
      white-space: nowrap;
    }
    .avatar-winner-tag.tag-pop {
      animation: winnerTagPop 0.25s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    }
    @keyframes winnerTagPop {
      0% { transform: translateX(-50%) scale(0.6); opacity: 0; }
      100% { transform: translateX(-50%) scale(1); opacity: 1; }
    }

    /* Arena and Lobby coin badges must always stay above avatar winner frames */
    .lobby-side-coin-badge,
    .arena-side-badge {
      position: absolute;
      z-index: 35 !important;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.75) !important;
      pointer-events: none;
    }

    /* Coinflip Room Line Styles */
    .room-row {
      background: #14121a !important;
      border: 1px solid var(--border-card);
      outline: none !important;
      box-shadow: none !important;
      opacity: 1 !important;
    }
    .room-row:hover {
      background: #1c1824 !important;
      border-color: var(--border-card-hover);
    }
    /* Highlight outline ONLY for rooms created by the current user */
    .room-row.is-creator {
      border: 1px solid var(--accent-color) !important;
      box-shadow: 0 0 0 1px rgba(var(--accent-rgb), 0.7), 0 4px 20px rgba(var(--accent-rgb), 0.25) !important;
    }

    /* Live Battles Line Entry Animation (Slide in smoothly from top) */
    .room-row-enter {
      animation: roomSlideFromTop 0.38s cubic-bezier(0.16, 1, 0.3, 1) both;
      will-change: transform, opacity;
      outline: none !important;
    }
    @keyframes roomSlideFromTop {
      0% {
        opacity: 0;
        transform: translateY(-22px) scale(0.98);
        border-color: transparent !important;
        box-shadow: none !important;
        outline: none !important;
      }
      70% {
        border-color: transparent !important;
        box-shadow: none !important;
        outline: none !important;
      }
      100% {
        opacity: 1;
        transform: translateY(0) scale(1);
      }
    }
    /* Nav Tab Fluid Micro-Interactions & Unified Colors */
    .nav-tab-item {
      position: relative;
      user-select: none;
      transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    }
    .nav-tab-item:active {
      transform: scale(0.96);
      transition: transform 90ms ease-out;
    }
    /* Inactive tabs: all aligned to the same subtle muted slate tone */
    .nav-tab-item:not(.is-active) {
      color: #94a3b8;
      border: 1px solid transparent;
      background: transparent;
    }
    .nav-tab-item:not(.is-active) svg {
      color: #94a3b8;
      stroke: #94a3b8;
    }
    .nav-tab-item:not(.is-active) .coin-outer-rim {
      stroke: #475569; /* darker ridge */
      fill: none;
    }
    .nav-tab-item:not(.is-active) .coin-inner-rim {
      fill: #94a3b8; /* less bright middle */
      stroke: none;
    }
    .nav-tab-item:not(.is-active) .coin-dollar-glyph {
      stroke: #475569; /* matches ridge color */
      color: #475569;
    }
    /* Hover state for inactive tabs */
    .nav-tab-item:not(.is-active):hover {
      color: #e2e8f0;
      background: var(--bg-card-hover);
      border-color: var(--border-card);
      transform: translateY(-1px);
    }
    .nav-tab-item:not(.is-active):hover svg {
      color: #e2e8f0;
      stroke: #e2e8f0;
    }
    .nav-tab-item:not(.is-active):hover .coin-outer-rim {
      stroke: #64748b; /* darker ridge on hover */
      fill: none;
    }
    .nav-tab-item:not(.is-active):hover .coin-inner-rim {
      fill: #cbd5e1; /* less bright middle on hover */
      stroke: none;
    }
    .nav-tab-item:not(.is-active):hover .coin-dollar-glyph {
      stroke: #64748b;
      color: #64748b;
    }

    /* Selected (Active) tab: visibly more light/bright with illuminated borders and pure white/light text */
    .nav-tab-item.is-active {
      background: var(--bg-card);
      color: #ffffff;
      border: 1px solid rgba(81, 71, 87, 0.65);
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35), 0 0 14px rgba(81, 71, 87, 0.22);
    }
    .nav-tab-item.is-active svg {
      color: #ffffff;
      stroke: #ffffff;
    }
    .nav-tab-item.is-active .coin-outer-rim {
      stroke: #64748b; /* darker ridge when active */
      fill: none;
    }
    .nav-tab-item.is-active .coin-inner-rim {
      fill: #d6cedb; /* less bright middle toned to active palette */
      stroke: none;
    }
    .nav-tab-item.is-active .coin-dollar-glyph {
      stroke: #64748b;
      color: #64748b;
    }

    /* Mobile Nav Drawer Coinflip Icon Support */
    #mobile-nav-tab-coinflip .coin-outer-rim {
      stroke: #64748b;
      fill: none;
    }
    #mobile-nav-tab-coinflip .coin-inner-rim {
      fill: #d6cedb;
      stroke: none;
    }
    #mobile-nav-tab-coinflip .coin-dollar-glyph {
      stroke: #64748b;
      color: #64748b;
    }
    #mobile-nav-tab-coinflip:hover .coin-outer-rim {
      stroke: #94a3b8;
    }
    #mobile-nav-tab-coinflip:hover .coin-inner-rim {
      fill: #f1f5f9;
    }
    #mobile-nav-tab-coinflip:hover .coin-dollar-glyph {
      stroke: #94a3b8;
    }

    /* Coinflip Tab Coin Icon: Flips Upwards (X-axis) on Hover */
    .nav-coin-icon-wrap,
    .nav-upgrader-arrow-wrap,
    .nav-crown-icon-wrap,
    .nav-trophy-icon-wrap {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      pointer-events: none;
    }
    .nav-tab-item > *,
    .btn-brand-pink > *,
    .btn-brand-slate > *,
    .btn-subtle-primary > *,
    .btn-subtle-secondary > * {
      pointer-events: none;
    }
    .nav-coin-icon-wrap {
      perspective: 400px;
    }
    .nav-coin-icon {
      transform-style: preserve-3d;
      pointer-events: none;
      transition: transform 0.65s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    }
    .nav-tab-item:hover .nav-coin-icon {
      transform: rotateX(360deg);
    }
    .nav-tab-item:active .nav-coin-icon {
      transform: rotateX(540deg) scale(0.92);
      transition: transform 0.35s ease-out;
    }

    /* Upgrader Arrow: Flies Up & Respawns Smoothly from Bottom - ANIMATES ONLY ONCE ON HOVER */
    .nav-upgrader-arrow-wrap {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      position: relative;
      width: 16px;
      height: 16px;
      overflow: hidden;
      vertical-align: middle;
    }
    .nav-upgrader-arrow {
      stroke-width: 3.2px;
      transition: transform 0.25s ease;
    }
    .nav-tab-item:hover .nav-upgrader-arrow {
      animation: upgraderArrowFlyOnce 0.65s cubic-bezier(0.25, 1, 0.5, 1) 1 forwards;
    }
    @keyframes upgraderArrowFlyOnce {
      0% {
        transform: translateY(0);
        opacity: 1;
      }
      45% {
        transform: translateY(-135%);
        opacity: 0;
      }
      50% {
        transform: translateY(135%);
        opacity: 0;
      }
      100% {
        transform: translateY(0);
        opacity: 1;
      }
    }

    /* Convert Tab: Rotates Slower on Hover */
    .nav-convert-icon {
      transition: transform 0.65s cubic-bezier(0.16, 1, 0.3, 1);
    }
    .nav-tab-item:hover .nav-convert-icon {
      transform: rotate(180deg);
    }

    /* Jackpot Tab Crown Icon: Rattles on Hover - 0.65s matching other tabs */
    .nav-crown-icon-wrap {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      position: relative;
      vertical-align: middle;
    }
    .nav-crown-icon {
      transition: transform 0.25s ease;
      transform-origin: center center;
    }
    .nav-tab-item:hover .nav-crown-icon,
    #mobile-nav-tab-jackpot:hover .nav-crown-icon,
    .group:hover .nav-crown-icon {
      animation: crownRattleOnce 0.65s cubic-bezier(0.25, 1, 0.5, 1) 1 forwards;
    }
    @keyframes crownRattleOnce {
      0% {
        transform: scale(1) rotate(0deg);
      }
      18% {
        transform: scale(1.18) rotate(-14deg);
      }
      36% {
        transform: scale(1.18) rotate(12deg);
      }
      54% {
        transform: scale(1.1) rotate(-8deg);
      }
      72% {
        transform: scale(1.05) rotate(6deg);
      }
      88% {
        transform: scale(1.02) rotate(-2deg);
      }
      100% {
        transform: scale(1) rotate(0deg);
      }
    }

    /* Convert Studio Interactive Elements */
    .convert-pet-card {
      background: var(--bg-card);
      border: 1px solid var(--border-card);
      transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
      user-select: none;
    }
    .convert-pet-card:hover {
      background: var(--bg-card-hover);
      border-color: var(--border-card-hover);
      transform: translateY(-2px);
    }
    .convert-pet-card:active {
      transform: scale(0.96);
    }
    .convert-pet-card.is-selected {
      background: rgba(81, 71, 87, 0.28);
      border: 1px solid rgba(214, 206, 219, 0.7);
      box-shadow: 0 0 0 1px rgba(214, 206, 219, 0.4), 0 4px 16px rgba(81, 71, 87, 0.35);
    }
    .convert-arrow-btn:hover {
      transform: scale(1.05);
      border-color: rgba(245, 158, 11, 0.6);
    }
    .convert-arrow-btn:active {
      transform: scale(0.95);
      transition: transform 0.15s ease-out;
    }

    /* =========================================================================
       AMPDUEL UPGRADER AUTHENTIC STYLES & GAUGES
       ========================================================================= */
    .upgrader-page {
      --pink: #ff4fa3;
      --pink-glow: rgba(255, 79, 163, 0.28);
      max-width: 1200px;
      margin: 0 auto;
      color: #f5f6f8;
    }
    .upgrade-live {
      display: flex;
      min-height: 52px;
      align-items: center;
      overflow-x: auto;
      margin-bottom: 14px;
      border: 1px solid #201b26;
      border-radius: 8px;
      background: #0b090f;
    }
    .upgrade-live-badge {
      min-width: 130px;
      padding: 0 14px;
      font-size: 11px;
      font-weight: 800;
      color: #d6cedb;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      display: flex;
      align-items: center;
      gap: 6px;
    }
    .upgrade-live-item {
      display: flex;
      min-width: 105px;
      padding: 6px 12px;
      align-items: center;
      gap: 8px;
      border-left: 1px solid #201b26;
      font-size: 11px;
      font-weight: 700;
      white-space: nowrap;
    }
    .upgrade-stage {
      position: relative;
      min-height: 420px;
      display: grid;
      grid-template-columns: minmax(180px, 1fr) 340px minmax(180px, 1fr);
      gap: 20px;
      align-items: center;
      justify-items: center;
      padding: 24px 28px 36px;
      border: 1px solid #201b26;
      border-radius: 16px;
      background: radial-gradient(ellipse at 50% 50%, rgba(255, 79, 163, 0.1) 0%, rgba(14, 12, 18, 0.95) 55%, #08070b 100%);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 8px 32px rgba(0, 0, 0, 0.4);
      margin: 0 auto;
      max-width: 960px;
      width: 100%;
    }
    @media (max-width: 900px) {
      .upgrade-stage {
        grid-template-columns: 1fr;
        padding: 20px 16px 36px;
      }
    }
    .upgrade-side {
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 240px;
      width: 100%;
      max-width: 250px;
      padding: 24px 18px;
      border: 1px solid #201b26;
      border-radius: 12px;
      background: linear-gradient(145deg, #110e17, #0a080e);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 4px 16px rgba(0, 0, 0, 0.3);
      text-align: center;
      transition: all 0.2s ease;
    }
    .upgrade-side.has-item {
      border-color: rgba(255, 79, 163, 0.4);
      box-shadow: 0 0 20px rgba(255, 79, 163, 0.12);
    }
    .upgrade-wheel-wrap {
      position: relative;
      width: 340px;
      height: 340px;
      max-width: 90vw;
      max-height: 90vw;
      margin: 0 auto;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
    }
    .upgrade-gauge {
      position: relative;
      width: 300px;
      height: 300px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .upgrade-gauge-ring {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      overflow: visible;
    }
    .upgrade-gauge-ring circle {
      fill: none;
      stroke-width: 18;
      shape-rendering: geometricPrecision;
    }
    .upgrade-gauge-track {
      stroke: #1d1726;
    }
    .upgrade-gauge-chance {
      stroke: #ff4fa3;
      transform-origin: 50% 50%;
      stroke-linecap: butt;
      transition: stroke-dasharray 0.3s ease, transform 0.3s ease;
    }
    .upgrade-pointer {
      position: absolute;
      z-index: 10;
      top: 20px;
      left: 50%;
      width: 20px;
      height: 150px;
      pointer-events: none;
      transform: translate(-50%) rotate(var(--spin, 0deg));
      transform-origin: 50% 100%;
      will-change: transform;
      transition: transform 3.8s cubic-bezier(0.12, 0.72, 0.12, 1);
    }
    .upgrade-pointer::after {
      content: "";
      position: absolute;
      top: -10px;
      left: 50%;
      width: 0;
      height: 0;
      border-right: 11px solid transparent;
      border-left: 11px solid transparent;
      border-top: 20px solid #ffffff;
      transform: translate(-50%);
      filter: drop-shadow(0 2px 8px rgba(0,0,0,0.9));
    }
    .upgrade-pointer-center {
      display: none !important;
    }
    .upgrade-range-slider-wrap {
      margin-top: 20px;
      width: 100%;
      max-width: 300px;
      text-align: center;
    }
    .upgrade-range-slider {
      -webkit-appearance: none;
      appearance: none;
      width: 100%;
      height: 5px;
      border-radius: 999px;
      background: #1d1726;
      outline: none;
      cursor: pointer;
    }
    .upgrade-range-slider::-webkit-slider-thumb {
      -webkit-appearance: none;
      appearance: none;
      width: 14px;
      height: 14px;
      border-radius: 50%;
      background: #ff4fa3;
      box-shadow: 0 0 10px #ff4fa3;
      cursor: pointer;
      border: 2px solid #060507;
    }
    .upgrade-cards-grid {
      height: 340px;
      overflow-y: auto;
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
      gap: 8px;
      padding: 4px;
    }

    /* =========================================================================
       RESPONSIVE AUTO-SCALING & SIDEBAR DRAWER STYLES
       ========================================================================= */
    /* Fluid responsive font-sizing & padding across breakpoints */
    /* Fluid responsive font-sizing & padding across breakpoints: collapses into drawer below 1280px (xl) */
    @media (max-width: 1279px) {
      .responsive-drawer {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        bottom: 0 !important;
        height: 100vh !important;
        width: 88vw !important;
        max-width: 380px !important;
        z-index: 50 !important;
        background: var(--bg-card) !important;
        box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.75) !important;
        transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
        overflow-y: auto !important;
      }
      .responsive-drawer.drawer-closed {
        transform: translateX(-105%) !important;
      }
      .responsive-drawer.drawer-open {
        transform: translateX(0) !important;
      }
    }

    @media (min-width: 1280px) {
      .responsive-drawer {
        position: static !important;
        transform: none !important;
        box-shadow: none !important;
        background: transparent !important;
        height: 100% !important;
      }
    }

    /* Smooth backdrop for sidebar drawer on all devices below desktop breakpoint */
    .drawer-backdrop {
      position: fixed;
      inset: 0;
      background: rgba(0, 0, 0, 0.82);
      backdrop-filter: blur(4px);
      -webkit-backdrop-filter: blur(4px);
      z-index: 45;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.3s ease;
    }
    .drawer-backdrop.active {
      opacity: 1;
      pointer-events: auto;
    }

    /* =========================================================================
       EGG LOADING SCREEN STYLES & 4 DYNAMIC ANIMATION VARIATIONS
       ========================================================================= */
    #app-loading-screen {
      position: fixed;
      inset: 0;
      z-index: 100000;
      background: radial-gradient(circle at center, #130f1a 0%, #07060a 70%, #030205 100%);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      opacity: 1;
      visibility: visible;
      transform: scale(1);
      transition: opacity 0.45s cubic-bezier(0.16, 1, 0.3, 1), transform 0.45s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.45s;
    }
    #app-loading-screen.loading-hidden {
      opacity: 0;
      transform: scale(1.03);
      visibility: hidden;
      pointer-events: none;
    }

    /* Floating / glowing shadow under the egg */
    .egg-loader-shadow {
      width: 90px;
      height: 18px;
      background: radial-gradient(ellipse at center, rgba(214, 206, 219, 0.28) 0%, rgba(81, 71, 87, 0.15) 50%, transparent 80%);
      border-radius: 50%;
      margin: 8px auto 0;
      filter: blur(2px);
      animation: eggShadowPulse 1.4s ease-in-out infinite alternate;
    }
    @keyframes eggShadowPulse {
      0% { transform: scale(0.85); opacity: 0.4; }
      100% { transform: scale(1.15); opacity: 0.9; }
    }

    /* EGG WOBBLE HATCH (Anticipation Hatch Wobble) */
    .egg-anim-wobble {
      animation: eggWobbleCrack 1.25s cubic-bezier(0.36, 0.07, 0.19, 0.97) infinite;
      transform-origin: 50% 90%;
    }
    @keyframes eggWobbleCrack {
      0%, 100% { transform: rotate(0deg) scale(1); }
      12% { transform: rotate(-10deg) scale(1.03); }
      24% { transform: rotate(9deg) scale(1.04); }
      36% { transform: rotate(-8deg) scale(1.05); }
      48% { transform: rotate(7deg) scale(1.04); }
      60% { transform: rotate(-4deg) scale(1.02); }
      72% { transform: rotate(2deg) scale(1.01); }
      82% { transform: rotate(0deg) scale(1.08); }
      90% { transform: rotate(0deg) scale(0.96); }
    }

    /* BUBBLY LOADING WORD TYPOGRAPHY & ANIMATION */
    .bubbly-loading-text {
      font-family: 'Fredoka', 'Fredoka One', cursive, sans-serif;
      font-weight: 900;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      color: #ffffff;
      text-shadow: 
        0 2px 0 #181520,
        0 4px 10px rgba(0, 0, 0, 0.6),
        0 0 20px rgba(255, 255, 255, 0.2);
      display: inline-flex;
      align-items: center;
      gap: 1px;
    }
    .bubbly-loading-char {
      display: inline-block;
      animation: bubblyCharWave 1.4s ease-in-out infinite;
    }
    @keyframes bubblyCharWave {
      0%, 100% { transform: translateY(0) scale(1); }
      30% { transform: translateY(-7px) scale(1.1); color: #fef08a; text-shadow: 0 4px 14px rgba(254, 240, 138, 0.6); }
      50% { transform: translateY(0) scale(1); }
    }

    /* ========================================================================= */
    /* AMPDUEL JACKPOT ARENA & MULTIPLAYER WHEEL STYLES                          */
    /* ========================================================================= */
    .jackpot-stage-card {
      position: relative;
      background: linear-gradient(145deg, rgba(14, 12, 18, 0.95), rgba(8, 7, 11, 0.98));
      border: 1px solid var(--border-card);
      border-radius: 16px;
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 8px 32px rgba(0, 0, 0, 0.45);
      transition: all 0.2s ease;
    }
    .jackpot-stage-card:hover {
      border-color: var(--border-card-hover);
    }
    .jackpot-wheel-container {
      position: relative;
      width: 390px;
      height: 390px;
      max-width: 80vw;
      max-height: 80vw;
      margin: 0 auto;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }
    @media (max-width: 1200px) {
      .jackpot-wheel-container {
        width: 350px;
        height: 350px;
      }
    }
    @media (max-width: 640px) {
      .jackpot-wheel-container {
        width: 290px;
        height: 290px;
      }
    }
    .jackpot-wheel-svg {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      transform-origin: 50% 50%;
      filter: drop-shadow(0 0 25px rgba(0, 0, 0, 0.6));
      transition: transform 6s cubic-bezier(0.12, 0.8, 0.22, 1);
    }
    .jackpot-hub-pointer {
      position: absolute;
      top: -14px;
      left: 50%;
      transform: translateX(-50%);
      width: 0;
      height: 0;
      border-left: 11px solid transparent;
      border-right: 11px solid transparent;
      border-bottom: 15px solid var(--border-card-hover);
      filter: drop-shadow(0 -2px 4px rgba(0, 0, 0, 0.7));
      z-index: 24;
    }
    .jackpot-center-hub {
      position: relative;
      z-index: 20;
      width: 200px;
      height: 200px;
      max-width: 52vw;
      max-height: 52vw;
      border-radius: 50%;
      background: radial-gradient(circle, var(--bg-card) 0%, var(--bg-well) 100%);
      border: 2px solid var(--border-card);
      box-shadow: inset 0 2px 12px rgba(255, 255, 255, 0.03), 0 8px 30px rgba(0, 0, 0, 0.85);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      text-align: center;
      padding: 12px;
    }
    @media (max-width: 1200px) {
      .jackpot-center-hub {
        width: 180px;
        height: 180px;
      }
    }
    @media (max-width: 640px) {
      .jackpot-center-hub {
        width: 150px;
        height: 150px;
      }
    }
    .jackpot-countdown-pulse {
      animation: jackpotTimerPulse 1s ease-in-out infinite;
    }
    @keyframes jackpotTimerPulse {
      0%, 100% { transform: scale(1); text-shadow: 0 0 15px rgba(245, 158, 11, 0.4); }
      50% { transform: scale(1.06); text-shadow: 0 0 25px rgba(245, 158, 11, 0.8); color: #fef08a; }
    }
    .jackpot-player-card {
      transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    }
    .jackpot-player-card:hover {
      transform: translateY(-2px);
      border-color: rgba(255, 255, 255, 0.18);
    }

    /* Unbreakable Modal Display Rules */
    .app-modal {
      position: fixed !important;
      inset: 0 !important;
      z-index: 99999 !important;
    }
    .app-modal.hidden {
      display: none !important;
      pointer-events: none !important;
    }
    .app-modal:not(.hidden) {
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
      pointer-events: auto !important;
    }
    .btn-active-indicator {
      transform: scale(0.95);
      box-shadow: 0 0 12px rgba(251, 191, 36, 0.6) !important;
      border-color: rgba(251, 191, 36, 0.8) !important;
    }
    #withdraw-inventory-grid {
      width: 100% !important;
    }