:root {
      --bg: #0f0d14;
      --card: #1a1622;
      --card-2: #241e30;
      --accent: #b88cff;
      --accent-2: #73f0cf;
      --gold: #ffd166;
      --text: #f7f2ff;
      --muted: #b9adc9;
      --danger: #ff7a90;
      --safe-top: env(safe-area-inset-top, 0px);
      --safe-bottom: env(safe-area-inset-bottom, 0px);

      --app-width: min(430px, 100vw);

  --shell-pad-x: clamp(10px, 3.2vw, 14px);
  --shell-gap: clamp(4px, 1.2dvh, 7px);

  --bottom-nav-height: clamp(58px, 8dvh, 78px);
  --cash-action-height: clamp(54px, 7dvh, 68px);

  --reserved-bottom-space: calc(
    var(--bottom-nav-height) +
    var(--cash-action-height) +
    34px +
    var(--safe-bottom)
  );

  --lounge-height: clamp(220px, 38dvh, 395px);
  --floor-inset: clamp(7px, 2vw, 10px);
  --floor-top: clamp(10px, 1.8dvh, 14px);

  --floating-size: clamp(44px, 11.5vw, 50px);
  --floating-gap: clamp(8px, 2.4vw, 12px);
    }

    * { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

* {
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

input,
textarea {
  user-select: text;
  -webkit-user-select: text;
  -webkit-touch-callout: default;
}

button,
img {
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

    html,
body {
  margin: 0;
  width: 100%;
  height: 100%;
  min-height: 100dvh;
  overflow: hidden;
  font-family: Arial, Helvetica, sans-serif;
  background: #05060e;

background-size: cover;
background-position: center;
background-repeat: no-repeat;
background-attachment: fixed;
  color: var(--text);
}

    .phone-game {
  width: var(--app-width);
  height: 100dvh;
  max-height: 100dvh;
  margin: 0 auto;
  padding:
    calc(10px + var(--safe-top))
    var(--shell-pad-x)
    var(--reserved-bottom-space);
  display: flex;
  flex-direction: column;
  gap: var(--shell-gap);
  position: relative;
  overflow: hidden;

  background:
    linear-gradient(180deg, rgba(5, 6, 14, 0.10), rgba(5, 6, 14, 0.25)),
    url('../images/lounge/background1.png');

  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

    .topbar, .panel-title {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .title h1 { margin: 0; font-size: 22px; letter-spacing: -0.7px; }
    .title span, .income, .small-note, .category-description, .upgrade p, .placeholder-card p { color: var(--muted); }
    .title span, .income, .small-note, .category-description { font-size: 11px; }

    .level-pill {
      background: rgba(115, 240, 207, 0.12);
      color: var(--accent-2);
      border: 1px solid rgba(115, 240, 207, 0.25);
      border-radius: 999px;
      padding: 8px 11px;
      font-weight: bold;
      font-size: 13px;
      text-align: center;
    }

.cash-gem-card {
  position: relative;
  display: block;
  min-height: 48px;
  overflow: hidden;
}

.cash-gem-left {
  min-width: 0;
  overflow: visible;
}

.cash-gem-left .stat-value {
  white-space: nowrap;
}

.gem-grid {
  display: none;
  position: absolute;
  left: 95px;
  top: 6px;

  width: 108px;
  min-width: 108px;
  max-width: 108px;

  grid-template-columns: max-content max-content;
column-gap: 1px;
row-gap: 2px;

justify-content: start;
}

.gem-grid.unlocked {
  display: grid;
}

.gem-item {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;

  padding: 2px 3px;
  min-height: 17px;

  min-width: 0;
  overflow: hidden;
}
.gem-item span,
.gem-item strong {
  display: inline;
  margin: 0;
  font-size: 8.5px;
  line-height: 1;
  white-space: nowrap;
}

.gem-item strong {
  color: var(--text);
}
.header-lounge-pill {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 126px;
  padding: 5px 10px;
}

.header-bar-name {
  color: var(--text);
  font-size: 13px;
  font-weight: 900;
  line-height: 1;
  text-shadow: 0 0 10px rgba(255,255,255,0.35), 0 0 16px rgba(115,240,207,0.35);
}

.header-lounge-type {
  color: var(--accent-2);
  font-size: 10px;
  font-weight: bold;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.7px;
}

.top-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.settings-btn {
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 12px;
  color: var(--text);
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.12);
  font-size: 16px;
  cursor: pointer;
  box-shadow: 0 10px 28px rgba(0,0,0,0.25);
}

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

.settings-actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 9px;
  margin-top: 10px;
}

.settings-action-btn {
  border: 0;
  border-radius: 16px;
  padding: 12px;
  color: var(--text);
  background: var(--card-2);
  border: 1px solid rgba(255,255,255,0.09);
  font-weight: bold;
  cursor: pointer;
  text-align: left;
}

.settings-action-btn.danger {
  color: var(--danger);
  background: rgba(255,122,144,0.1);
  border-color: rgba(255,122,144,0.25);
}

.settings-action-btn.warn {
  color: var(--gold);
  background: rgba(255,209,102,0.1);
  border-color: rgba(255,209,102,0.25);
}

.settings-action-btn small {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-weight: normal;
  line-height: 1.3;
}

    .stats { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }

    .lounge-only-stat { display: block; }

    .stats.compact .lounge-only-stat { display: none; }

    .stat, .panel, .placeholder-card {
      background: linear-gradient(180deg, var(--card), #14111b);
      border: 1px solid rgba(255,255,255,0.08);
      border-radius: 16px;
      padding: 8px;
      box-shadow: 0 12px 40px rgba(0,0,0,0.22);
    }

    #globalStats .stat {
  position: relative;
  border: 1px solid rgba(255,255,255,0.13);
  border-radius: 16px;
  overflow: hidden;

  background:
    radial-gradient(circle at 50% 0%, var(--tile-glow), transparent 58%),
    radial-gradient(circle at 85% 85%, var(--tile-glow), transparent 72%),
    linear-gradient(135deg, var(--tile-base-top), var(--tile-base-bottom));

  box-shadow:
    0 10px 28px rgba(0,0,0,0.35),
    inset 0 0 18px rgba(255,255,255,0.035),
    inset 0 0 26px rgba(0,0,0,0.22),
    0 0 14px var(--tile-glow);
}

#globalStats .stat::before {
  content: none;
}

.lounge-themed-ui .bottom-tab,
.lounge-themed-ui.shop-floating-wrap .shop-floating-button,
.lounge-themed-ui.shop-floating-wrap .chest-floating-button,
.lounge-themed-ui.shop-floating-wrap .floating-quest-button,
.lounge-themed-ui.shop-floating-wrap .leaderboard-floating-button,
.lounge-themed-ui.shop-floating-wrap .vip-battle-floating-button,
.lounge-themed-ui.left-floating-stack .social-floating-button,
.lounge-themed-ui.left-floating-stack .gem-floating-button,
.lounge-themed-ui.left-floating-stack .equipment-floating-button,
.lounge-themed-ui.left-floating-stack .location-floating-button,
.lounge-themed-ui.left-floating-stack .leaderboard-floating-button {
  background:
    radial-gradient(circle at 50% 0%, var(--tile-glow), transparent 58%),
    radial-gradient(circle at 85% 85%, var(--tile-glow), transparent 72%),
    linear-gradient(135deg, var(--tile-base-top), var(--tile-base-bottom));

  border-color: rgba(255,255,255,0.13);

  box-shadow:
    0 10px 28px rgba(0,0,0,0.38),
    inset 0 0 18px rgba(255,255,255,0.035),
    inset 0 0 26px rgba(0,0,0,0.24),
    0 0 14px var(--tile-glow);
}

.lounge-themed-ui .bottom-tab.active,
.lounge-themed-ui .bottom-tab.home-tab.active {
  color: var(--accent-2);
  background:
    radial-gradient(circle at 50% 0%, var(--tile-glow), transparent 54%),
    radial-gradient(circle at 80% 85%, var(--tile-glow), transparent 68%),
    linear-gradient(135deg, var(--tile-base-top), var(--tile-base-bottom));

  border-color: rgba(255,255,255,0.22);

  box-shadow:
    0 10px 28px rgba(0,0,0,0.42),
    inset 0 0 16px rgba(255,255,255,0.05),
    inset 0 0 28px rgba(0,0,0,0.20),
    0 0 18px var(--tile-glow);
}

.lounge-themed-ui .bottom-tab.locked,
.lounge-themed-ui .bottom-tab.locked-tab,
.lounge-themed-ui.shop-floating-wrap .locked-tab,
.lounge-themed-ui.left-floating-stack .locked-tab {
  opacity: 0.42;
  filter: grayscale(1);
}

#globalStats .stat::after {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: 15px;
  pointer-events: none;

  background:
    linear-gradient(180deg, rgba(255,255,255,0.06), transparent 30%),
    radial-gradient(circle at 80% 15%, rgba(255,255,255,0.05), transparent 35%),
    linear-gradient(180deg, rgba(0,0,0,0.28), rgba(0,0,0,0.42));
}

#globalStats .stat > * {
  position: relative;
  z-index: 1;
}

#globalStats .stat,
#globalStats .stat * {
  text-shadow:
    -1px -1px 0 rgba(0,0,0,0.95),
     1px -1px 0 rgba(0,0,0,0.95),
    -1px  1px 0 rgba(0,0,0,0.95),
     1px  1px 0 rgba(0,0,0,0.95),
     0  2px 4px rgba(0,0,0,0.85);
}

#globalStats .stat-value,
#globalStats .stat-label,
#globalStats .income,
#globalStats .small-note,
#globalStats strong,
#globalStats span {
  text-shadow:
    -1px -1px 0 #000,
     1px -1px 0 #000,
    -1px  1px 0 #000,
     1px  1px 0 #000,
     0  0 6px rgba(0,0,0,0.95),
     0  2px 5px rgba(0,0,0,0.95);
}

#globalStats .vibe-mini-bar,
#globalStats .research-mini-bar {
  background: rgba(0,0,0,0.55);
  border: 1px solid rgba(0,0,0,0.75);
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.08),
    0 2px 6px rgba(0,0,0,0.75);
}

#globalStats .vibe-mini-fill,
#globalStats .research-mini-fill {
  box-shadow:
    0 0 0 1px rgba(0,0,0,0.85),
    0 0 8px rgba(0,0,0,0.75),
    0 0 10px currentColor;
}

#globalStats .gem-item,
#globalStats .kpi-info,
#globalStats .mini-info-btn {
  text-shadow:
    -1px -1px 0 #000,
     1px -1px 0 #000,
    -1px  1px 0 #000,
     1px  1px 0 #000,
     0  2px 4px rgba(0,0,0,0.95);
}

    .panel { border-radius: 22px; padding: 14px; }
    .stat-label { color: var(--muted); font-size: 11px; margin-bottom: 1px; }
    .stat-value { font-size: 18px; font-weight: bold; line-height: 1;}
    .cash { color: var(--gold); }
    .vibe { color: var(--accent-2); }

/* Glow effect when performance is perfect */
.vibe.glow {
  text-shadow: 0 0 8px rgba(115,240,207,0.8), 0 0 18px rgba(115,240,207,0.6);
  animation: vibeGlowPulse 1.5s ease-in-out infinite;
}

/* Negative state: no vibe generation */
.vibe.no-vibe {
  color: var(--danger);
  text-shadow: 0 0 10px rgba(255,122,144,0.8), 0 0 20px rgba(255,77,109,0.6);
  animation: vibeDangerPulse 1s ease-in-out infinite;
}

@keyframes vibeDangerPulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.06); opacity: 0.85; }
}

@keyframes vibeGlowPulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.05); opacity: 0.85; }
}

    .vibe-card, .tables-research-card {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 7px;
      align-items: center;
    }

    .vibe-main {
      min-width: 0;
    }

    .vibe-progress-box, .research-status-box {
      min-width: 0;
      display: flex;
      flex-direction: column;
      gap: 3px;
    }

    .vibe-progress-percent, .research-status-value {
      color: var(--accent-2);
      font-size: 11px;
      font-weight: bold;
      text-align: right;
    }

    .vibe-mini-bar, .research-mini-bar {
      height: 6px;
      background: rgba(255,255,255,0.08);
      border-radius: 999px;
      overflow: hidden;
    }

    .vibe-mini-fill, .research-mini-fill {
      height: 100%;
      width: 0%;
      background: linear-gradient(90deg, var(--accent-2), var(--accent));
      border-radius: inherit;
      transition: width 0.2s ease;
    }

    .vibe-progress-label, .research-status-label {
      color: var(--muted);
      font-size: calc(var(--table-spot-size, 82px) * 0.12);
      text-align: right;
      white-space: nowrap;
    }

    .research-status-value.active { color: var(--gold); }

    .recommendation-bar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  min-height: 66px;
  align-items: center;
  border-radius: 16px;
  padding: 7px 9px;
  border: 1px solid rgba(115, 240, 207, 0.28);
  box-shadow: 0 12px 40px rgba(0,0,0,0.2);
}

.recommendation-bar.lounge-themed-ui {
  position: relative;
  overflow: hidden;

  background:
    radial-gradient(circle at 50% 0%, var(--tile-glow), transparent 58%),
    radial-gradient(circle at 85% 85%, var(--tile-glow), transparent 72%),
    linear-gradient(135deg, var(--tile-base-top), var(--tile-base-bottom));

  border-color: rgba(255,255,255,0.13);

  box-shadow:
    0 10px 28px rgba(0,0,0,0.36),
    inset 0 0 18px rgba(255,255,255,0.035),
    inset 0 0 26px rgba(0,0,0,0.24),
    0 0 14px var(--tile-glow);
}

.recommendation-bar.lounge-themed-ui::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;

  background:
    linear-gradient(180deg, rgba(255,255,255,0.06), transparent 30%),
    linear-gradient(180deg, rgba(0,0,0,0.32), rgba(0,0,0,0.54));

  z-index: 0;
}

.recommendation-bar.lounge-themed-ui > * {
  position: relative;
  z-index: 1;
}

    .recommendation-label { color: var(--muted); font-size: 10px; margin-bottom: 2px; }
    .recommendation-title {
      font-size: 12px;
      font-weight: bold;
      color: var(--text);
      min-width: 0;
      white-space: normal;
      overflow: visible;
      line-height: 1.2;
    }
    .recommendation-detail {
      margin-top: 2px;
      font-size: 9.5px;
      color: var(--accent-2);
      font-weight: bold;
      min-width: 0;
      white-space: normal;
      overflow: visible;
      line-height: 1.25;
    }

    .recommendation-bar > div:first-child { min-width: 0; }

.recommendation-actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
  min-width: 82px;
}

    .recommendation-cost {
      white-space: nowrap;
      border-radius: 999px;
      padding: 6px 8px;
      background: rgba(0,0,0,0.22);
      color: var(--gold);
      font-size: 10px;
      font-weight: bold;
      border: 1px solid rgba(255,255,255,0.08);
      cursor: pointer;
    }

    .recommendation-cost.can-buy {
      color: var(--accent-2);
      background: rgba(115, 240, 207, 0.14);
      border-color: rgba(115, 240, 207, 0.38);
    }

    .recommendation-cost:active { transform: scale(0.96); }

.recommendation-max-btn {
  border: 0;
  border-radius: 999px;
  padding: 7px 10px;
  color: #19121f;
  background: linear-gradient(135deg, var(--gold), #ffb347);
  font-size: 10px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0.4px;
  cursor: pointer;
  box-shadow:
    0 0 14px rgba(255,209,102,0.26),
    inset 0 1px 1px rgba(255,255,255,0.35);
  text-shadow: none !important;
  filter: none !important;
  -webkit-font-smoothing: antialiased;
}

.recommendation-max-btn:disabled {
  opacity: 0.42;
  filter: grayscale(0.7);
  cursor: not-allowed;
}

body.event-mode .recommendation-bar {
  grid-template-columns: minmax(0, 1fr) clamp(126px, 34vw, 150px);
  min-height: 70px;
  padding-right: 8px;
}

body.event-mode .recommendation-actions {
  width: 100%;
  min-width: 126px;
  gap: 5px;
}

body.event-mode .recommendation-cost,
body.event-mode .recommendation-max-btn {
  width: 100%;
  min-height: 24px;
  height: 24px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 9px;
  line-height: 1;
  padding: 4px 7px;
}

body.event-mode .recommendation-actions {
  gap: 4px;
  align-content: center;
}

body.event-mode .recommendation-max-btn {
  letter-spacing: 0.1px;
  box-shadow:
    0 0 10px rgba(255,209,102,0.20),
    inset 0 1px 1px rgba(255,255,255,0.26);
}

  .lounge {
  position: relative;
  flex: 0 0 var(--lounge-height);
  height: var(--lounge-height);
  min-height: 0;
  background: linear-gradient(180deg, rgba(36,30,48,0.86), rgba(15,13,20,0.95));
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: clamp(22px, 6vw, 28px);
  overflow: hidden;
  box-shadow: inset 0 0 60px rgba(184, 140, 255, 0.06), 0 20px 60px rgba(0,0,0,0.28);
}

.lounge-wall-frame {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;

  --wall-size: clamp(9px, 2.5vw, 13px);
  --wall-radius: clamp(22px, 6vw, 28px);

  --wall-color: rgba(10, 12, 26, 0.88);
  --wall-inner: rgba(255,255,255,0.08);
  --wall-neon: rgba(115,240,207,0.32);
  --wall-glow: rgba(115,240,207,0.18);

  --register-opening-width: 48px;
}

.lounge-wall {
  position: absolute;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.12), transparent 55%),
    var(--wall-color);

  box-shadow:
    inset 0 0 0 1px var(--wall-inner),
    inset 0 0 14px var(--wall-glow),
    0 0 16px var(--wall-glow);
}

.lounge-wall-frame {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;

  --wall-size: clamp(9px, 2.5vw, 13px);
  --wall-radius: clamp(22px, 6vw, 28px);

  --wall-color: rgba(10, 12, 26, 0.88);
  --wall-inner: rgba(255,255,255,0.08);
  --wall-glow: rgba(115,240,207,0.18);

  /* Öffnung links auf Kassenhöhe */
  --wall-door-y: 42px;
  --wall-door-height: 42px;
}
.lounge-wall-frame {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;

  border-radius: inherit;

  background:
    linear-gradient(180deg, rgba(255,255,255,0.10), transparent 18%),
    linear-gradient(90deg, var(--wall-neon), transparent 18%, transparent 82%, var(--wall-neon)),
    linear-gradient(180deg, transparent 72%, rgba(0,0,0,0.34));

  box-shadow:
    inset 0 0 0 2px rgba(255,255,255,0.08),
    inset 0 0 0 var(--wall-size) var(--wall-color),
inset 0 0 24px var(--wall-glow),
    inset 0 0 42px rgba(184,140,255,0.10),
    0 0 18px rgba(115,240,207,0.14);
}

.lounge-wall {
  display: none;
}

.lounge-floor-level-0 .lounge-wall-frame,
.lounge-layout-level-0 .lounge-wall-frame {
  --wall-size: clamp(8px, 2.2vw, 11px);
  --wall-color: rgba(10, 12, 26, 0.82);
  --wall-neon: rgba(115,240,207,0.22);
  --wall-glow: rgba(115,240,207,0.10);
}

.lounge-floor-level-1 .lounge-wall-frame,
.lounge-layout-level-1 .lounge-wall-frame {
  --wall-neon: rgba(115,240,207,0.28);
  --wall-glow: rgba(115,240,207,0.13);
}

.lounge-floor-level-2 .lounge-wall-frame,
.lounge-layout-level-2 .lounge-wall-frame {
  --wall-neon: rgba(184,140,255,0.30);
  --wall-glow: rgba(184,140,255,0.14);
}

.lounge-floor-level-3 .lounge-wall-frame,
.lounge-layout-level-3 .lounge-wall-frame {
  --wall-size: clamp(9px, 2.4vw, 12px);
  --wall-neon: rgba(115,240,207,0.36);
  --wall-glow: rgba(115,240,207,0.16);
}

.lounge-floor-level-4 .lounge-wall-frame,
.lounge-layout-level-4 .lounge-wall-frame {
  --wall-neon: rgba(184,140,255,0.40);
  --wall-glow: rgba(184,140,255,0.18);
}

.lounge-floor-level-5 .lounge-wall-frame,
.lounge-layout-level-5 .lounge-wall-frame {
  --wall-color: rgba(13, 13, 32, 0.88);
  --wall-neon: rgba(139,124,255,0.46);
  --wall-glow: rgba(139,124,255,0.20);
}

.lounge-floor-level-6 .lounge-wall-frame,
.lounge-layout-level-6 .lounge-wall-frame {
  --wall-size: clamp(10px, 2.7vw, 14px);
  --wall-neon: rgba(115,240,207,0.48);
  --wall-glow: rgba(115,240,207,0.22);
}

.lounge-floor-level-7 .lounge-wall-frame,
.lounge-layout-level-7 .lounge-wall-frame {
  --wall-neon: rgba(255,209,102,0.42);
  --wall-glow: rgba(255,209,102,0.18);
}

.lounge-floor-level-8 .lounge-wall-frame,
.lounge-layout-level-8 .lounge-wall-frame {
  --wall-neon: rgba(255,140,220,0.48);
  --wall-glow: rgba(255,140,220,0.20);
}

.lounge-floor-level-9 .lounge-wall-frame,
.lounge-layout-level-9 .lounge-wall-frame {
  --wall-neon: rgba(255,209,102,0.52);
  --wall-glow: rgba(255,209,102,0.22);
}

.lounge-floor-level-10 .lounge-wall-frame,
.lounge-layout-level-10 .lounge-wall-frame {
  --wall-size: clamp(11px, 3vw, 15px);
  --wall-neon: rgba(115,240,207,0.58);
  --wall-glow: rgba(115,240,207,0.26);
}

.lounge-floor-level-11 .lounge-wall-frame,
.lounge-layout-level-11 .lounge-wall-frame {
  --wall-neon: rgba(255,209,102,0.62);
  --wall-glow: rgba(255,209,102,0.28);
}

.lounge-floor-level-12 .lounge-wall-frame,
.lounge-layout-level-12 .lounge-wall-frame {
  --wall-size: clamp(12px, 3.2vw, 16px);
  --wall-neon: rgba(184,140,255,0.72);
  --wall-glow: rgba(184,140,255,0.34);
}

    .neon {
      position: absolute;
      top: 16px;
      left: 50%;
      transform: translateX(-50%);
      padding: 8px 18px;
      border-radius: 999px;
      border: 1px solid rgba(184, 140, 255, 0.45);
      color: var(--accent);
      text-shadow: 0 0 15px rgba(184, 140, 255, 0.8);
      background: rgba(184, 140, 255, 0.08);
      font-weight: bold;
      font-size: 15px;
      z-index: 2;
    }

.lounge-sign {
  text-align: center;
  padding: 8px 18px 7px;
  min-width: 170px;
}

.bar-name {
  color: var(--text);
  font-size: 17px;
  font-weight: 900;
  letter-spacing: 0.3px;
  line-height: 1;
  text-shadow: 0 0 12px rgba(255,255,255,0.55), 0 0 18px rgba(184,140,255,0.75);
}

.lounge-type {
  margin-top: 3px;
  color: var(--accent);
  font-size: 10px;
  font-weight: bold;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  opacity: 0.9;
}

    .cloud {
      position: absolute;
      border-radius: 999px;
      background: rgba(255,255,255,0.09);
      filter: blur(1px);
      animation: float 8s infinite ease-in-out;
      pointer-events: none;
    }

    .cloud-1 { width: 125px; height: 38px; top: 74px; left: 22px; }
    .cloud-2 { width: 170px; height: 50px; top: 120px; right: -20px; animation-delay: 1.3s; }
    .cloud-3 { width: 115px; height: 35px; bottom: 118px; left: 95px; animation-delay: 2.4s; }

    @keyframes float {
      0%, 100% { transform: translateY(0); opacity: 0.45; }
      50% { transform: translateY(-18px); opacity: 0.95; }
    }

.floor {
  position: absolute;
  left: var(--floor-inset);
  right: var(--floor-inset);
  top: var(--floor-top);
  bottom: var(--floor-inset);

  --tile-size: 48px;
  --tile-line: 2px;
  --tile-base-top: #151424;
  --tile-base-bottom: #080914;
  --tile-purple: rgba(184,140,255,0.42);
  --tile-cyan: rgba(115,240,207,0.30);
  --tile-glow: rgba(184,140,255,0.16);
  --tile-pulse-low: 0.45;
  --tile-pulse-high: 0.82;

  border-radius: clamp(16px, 4.5vw, 18px);
  padding: clamp(7px, 2vw, 9px);
  z-index: 5;
  overflow: visible;

  background:
    radial-gradient(circle at 50% 20%, var(--tile-glow), transparent 48%),
    linear-gradient(180deg, var(--tile-base-top), var(--tile-base-bottom));

  border: 1px solid rgba(255,255,255,0.12);

  box-shadow:
    inset 0 0 32px rgba(0,0,0,0.34),
    inset 0 0 55px var(--tile-glow),
    0 0 22px var(--tile-glow);
}

.floor::before {
  content: none;
}
    
.lounge-floor-level-0 {
  --tile-size: 48px;
  --tile-line: 2px;
  --tile-base-top: #151424;
  --tile-base-bottom: #080914;
  --tile-purple: rgba(184,140,255,0.42);
  --tile-cyan: rgba(115,240,207,0.30);
  --tile-glow: rgba(184,140,255,0.16);
  --tile-pulse-low: 0.45;
  --tile-pulse-high: 0.82;
}

.lounge-floor-level-1 {
  --tile-size: 46px;
  --tile-line: 2px;
  --tile-base-top: #14182a;
  --tile-base-bottom: #080c18;
  --tile-purple: rgba(184,140,255,0.48);
  --tile-cyan: rgba(115,240,207,0.38);
  --tile-glow: rgba(115,240,207,0.15);
  --tile-pulse-low: 0.46;
  --tile-pulse-high: 0.84;
}

.lounge-floor-level-2 {
  --tile-size: 44px;
  --tile-line: 2px;
  --tile-base-top: #17162e;
  --tile-base-bottom: #090816;
  --tile-purple: rgba(184,140,255,0.56);
  --tile-cyan: rgba(115,240,207,0.44);
  --tile-glow: rgba(184,140,255,0.17);
  --tile-pulse-low: 0.48;
  --tile-pulse-high: 0.86;
}

.lounge-floor-level-3 {
  --tile-size: 42px;
  --tile-line: 2px;
  --tile-base-top: #111b2f;
  --tile-base-bottom: #06101b;
  --tile-purple: rgba(184,140,255,0.58);
  --tile-cyan: rgba(115,240,207,0.54);
  --tile-glow: rgba(115,240,207,0.18);
  --tile-pulse-low: 0.50;
  --tile-pulse-high: 0.88;
}

.lounge-floor-level-4 {
  --tile-size: 40px;
  --tile-line: 3px;
  --tile-base-top: #161229;
  --tile-base-bottom: #090713;
  --tile-purple: rgba(184,140,255,0.68);
  --tile-cyan: rgba(115,240,207,0.54);
  --tile-glow: rgba(184,140,255,0.20);
  --tile-pulse-low: 0.52;
  --tile-pulse-high: 0.90;
}

.lounge-floor-level-5 {
  --tile-size: 38px;
  --tile-line: 3px;
  --tile-base-top: #101834;
  --tile-base-bottom: #070b1b;
  --tile-purple: rgba(139,124,255,0.72);
  --tile-cyan: rgba(115,240,207,0.58);
  --tile-glow: rgba(139,124,255,0.22);
  --tile-pulse-low: 0.54;
  --tile-pulse-high: 0.92;
}

.lounge-floor-level-6 {
  --tile-size: 36px;
  --tile-line: 3px;
  --tile-base-top: #071629;
  --tile-base-bottom: #040b13;
  --tile-purple: rgba(184,140,255,0.76);
  --tile-cyan: rgba(115,240,207,0.66);
  --tile-glow: rgba(115,240,207,0.22);
  --tile-pulse-low: 0.55;
  --tile-pulse-high: 0.94;
}

.lounge-floor-level-7 {
  --tile-size: 34px;
  --tile-line: 3px;
  --tile-base-top: #211806;
  --tile-base-bottom: #0f0a03;
  --tile-purple: rgba(255,209,102,0.64);
  --tile-cyan: rgba(184,140,255,0.68);
  --tile-glow: rgba(255,209,102,0.20);
  --tile-pulse-low: 0.56;
  --tile-pulse-high: 0.95;
}

.lounge-floor-level-8 {
  --tile-size: 32px;
  --tile-line: 3px;
  --tile-base-top: #241022;
  --tile-base-bottom: #100711;
  --tile-purple: rgba(255,140,220,0.74);
  --tile-cyan: rgba(115,240,207,0.66);
  --tile-glow: rgba(255,140,220,0.22);
  --tile-pulse-low: 0.58;
  --tile-pulse-high: 0.96;
}

.lounge-floor-level-9 {
  --tile-size: 30px;
  --tile-line: 3px;
  --tile-base-top: #221808;
  --tile-base-bottom: #0e0902;
  --tile-purple: rgba(255,209,102,0.78);
  --tile-cyan: rgba(184,140,255,0.78);
  --tile-glow: rgba(255,209,102,0.24);
  --tile-pulse-low: 0.60;
  --tile-pulse-high: 0.98;
}

.lounge-floor-level-10 {
  --tile-size: 28px;
  --tile-line: 3px;
  --tile-base-top: #062022;
  --tile-base-bottom: #030d10;
  --tile-purple: rgba(115,240,207,0.78);
  --tile-cyan: rgba(184,140,255,0.84);
  --tile-glow: rgba(115,240,207,0.25);
  --tile-pulse-low: 0.62;
  --tile-pulse-high: 1;
}

.lounge-floor-level-11 {
  --tile-size: 26px;
  --tile-line: 3px;
  --tile-base-top: #261b07;
  --tile-base-bottom: #100b02;
  --tile-purple: rgba(255,209,102,0.86);
  --tile-cyan: rgba(115,240,207,0.78);
  --tile-glow: rgba(255,209,102,0.28);
  --tile-pulse-low: 0.64;
  --tile-pulse-high: 1;
}

.lounge-floor-level-12 {
  --tile-size: 24px;
  --tile-line: 3px;
  --tile-base-top: #1b102f;
  --tile-base-bottom: #070411;
  --tile-purple: rgba(255,209,102,0.92);
  --tile-cyan: rgba(184,140,255,0.95);
  --tile-glow: rgba(184,140,255,0.34);
  --tile-pulse-low: 0.66;
  --tile-pulse-high: 1;
}
 
.layout-stage {
      position: relative;
      width: 100%;
      height: 100%;
      min-height: 180px;
      overflow: visible;
    }

  .table-area {
  position: absolute;

  left: clamp(54px, 16%, 68px);
  right: clamp(2px, 1%, 8px);

  top: clamp(76px, 26%, 92px);

  bottom: clamp(0px, 0%, 6px);

  overflow: visible;
  z-index: 9;
}

.locked-tab {
  opacity: 0.35;
  filter: grayscale(1);
  position: relative;
}

.locked-tab::after {
  content: '🔒';
  position: absolute;
  top: -6px;
  right: -6px;

  width: 19px;
  height: 19px;

  display: grid;
  place-items: center;

  border-radius: 999px;
  background: rgba(10, 10, 16, 0.96);
  border: 1px solid rgba(255,255,255,0.18);

  font-size: 11px;
  line-height: 1;

  z-index: 30;
  pointer-events: none;

  box-shadow:
    0 6px 14px rgba(0,0,0,0.45),
    0 0 10px rgba(255,255,255,0.12);
}

.bottom-tab.locked {
  opacity: 0.35;
  filter: grayscale(1);
}

.lounge-door {
  position: absolute;
  width: var(--door-size);
  height: var(--door-size);
  left: var(--door-left);
  top: var(--door-top);
  opacity: 0;
  pointer-events: none;
  z-index: 1;
}

.lounge-door::after {
  content: none;
}

.layout-stage .lounge-door {
  left: var(--door-x);
  top: var(--door-y);

  transform:
    translate(-50%, -50%)
    perspective(220px)
    rotateY(-60deg)
    rotate(-45deg)
    scale(1.28);

  transform-origin: center;
  transform-style: preserve-3d;
}

.cash-register {
  position: absolute;
  left: 42px;
  top: 8px;

  width: 81px;
  height: 55px;

  transform: rotate(180deg);

  border: 0;
  border-radius: 0;

  background: transparent;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;

  box-shadow: none;

  z-index: 5;
  cursor: pointer;

  animation: none;
}

.cash-register::after {
  content: none;
}

    .bar-object {
  position: absolute;
  right: 22px;
  top: -8px;
  width: 96px;
height: 50px;
  z-index: 6;
}

.lounge-bar {
  position: absolute;
  inset: 0;

  width: 100%;
  height: 100%;

  padding: 0;
  border: none;
  outline: none;
  border-radius: 0;

  background: transparent;
  box-shadow: none;

  background-image: url('../images/lounge/bar/1.png');
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;

  overflow: visible;

  cursor: default;
  pointer-events: none;
  z-index: 6;
}

.lounge-bar.bar-active {
  background-color: transparent;
  border: 0;
  box-shadow: none;
}

.lounge-bar::after {
  content: none;
}

.lounge-bar *,
.lounge-bar::before,
.lounge-bar::after {
  display: none !important;
  content: none !important;
}

.bar-chairs {
  position: absolute;
  left: 10px;
  right: 10px;
  top: 32px;
  display: flex;
  justify-content: space-between;
  pointer-events: none;
}

.bar-chair {
  width: 13px;
  height: 13px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(50, 100, 165, 0.95), rgba(20, 48, 100, 0.98));
  border: 1px solid rgba(90, 170, 255, 0.75);
  box-shadow: 0 0 10px rgba(90, 170, 255, 0.45);
}

.kitchen-object {
  position: absolute;

  left: 38px;   /* noch weiter nach links */
  top: 34px;

  width: 132px;
  height: 79px;

  background: transparent url('../images/lounge/kitchen/1.png') center / contain no-repeat;

  border: 0;
  border-radius: 0;
  box-shadow: none;

  z-index: 6;
  cursor: default;
pointer-events: none;

  transform: rotate(0deg);
  transform-origin: center;
}
.kitchen-object::after {
  content: none;
}

.kitchen-object.kitchen-active {
  border: 0;
  box-shadow: none;
}

.people-layer {
  position: absolute;
  inset: 0;
  z-index: 50;
  pointer-events: none;
  overflow: visible;
}

.guest-dot,
.owner-dot {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 30;
  pointer-events: none;
  transition:
    transform var(--move-duration, 2.4s) linear,
    opacity 0.25s ease;
  transform-origin: center bottom;
}

.guest-dot {
  width: 28px;
  height: 28px;
  margin-left: -14px;
  margin-top: -23px;


  background-image: var(--guest-sprite-url);
  background-repeat: no-repeat;
  background-size: 364px 112px;

  border: 0;
  border-radius: 0;
  box-shadow: none;
  overflow: hidden;

  will-change: transform, background-position;
  backface-visibility: hidden;
  contain: none;
}

.guest-sprite {
  display: none;
}

/* Idle: Reihe 3, Spalte 1 und 2 */
.guest-dot.guest-idle {
  animation: guestIdleSwitch 0.9s steps(1) infinite;
}

/* Sit: keine Animation */
.guest-dot.guest-sit {
  animation: none;
}

/* Sitz oben am Tisch: schaut nach unten */
.guest-dot.guest-sit-north {
  background-position: -56px -56px;
}

/* Sitz unten am Tisch: schaut nach oben */
.guest-dot.guest-sit-south {
  background-position: -56px 0;
}

/* Sitz links am Tisch: schaut nach rechts */
.guest-dot.guest-sit-west {
  background-position: -56px -84px;
}

/* Sitz rechts am Tisch: schaut nach links */
.guest-dot.guest-sit-east {
  background-position: -56px -28px;
}

.guest-dot.guest-walk-up {
  animation: guestWalkUpLoop 1s steps(9) infinite;
}

.guest-dot.guest-walk-left {
  animation: guestWalkLeftLoop 1s steps(9) infinite;
}

.guest-dot.guest-walk-down {
  animation: guestWalkDownLoop 1s steps(9) infinite;
}

.guest-dot.guest-walk-right {
  animation: guestWalkRightLoop 1s steps(9) infinite;
}

/* Reihe 1: nach oben */
@keyframes guestWalkUpLoop {
  from { background-position: 0 0; }
  to { background-position: -252px 0; }
}

/* Reihe 2: nach links */
@keyframes guestWalkLeftLoop {
  from { background-position: 0 -28px; }
  to { background-position: -252px -28px; }
}

/* Reihe 3: nach unten */
@keyframes guestWalkDownLoop {
  from { background-position: 0 -56px; }
  to { background-position: -252px -56px; }
}

/* Reihe 4: nach rechts */
@keyframes guestWalkRightLoop {
  from { background-position: 0 -84px; }
  to { background-position: -252px -84px; }
}
    .owner-dot {
  width: 32px;
  height: 32px;
  margin-left: -16px;
  margin-top: -26px;

  background-image: var(--owner-sprite-url);
  background-repeat: no-repeat;
  background-size: 416px 128px;

  border: 0;
  border-radius: 0;
  box-shadow: none;
  overflow: hidden;

  will-change: transform, background-position;
  backface-visibility: hidden;
  contain: none;
}

.owner-dot.owner-fullset-epic {
  filter:
    drop-shadow(0 0 1px rgba(180,85,255,0.95))
    drop-shadow(0 0 2px rgba(180,85,255,0.55));
}

.owner-dot.owner-fullset-legendary {
  filter:
    drop-shadow(0 0 2px rgba(255,196,64,1))
    drop-shadow(0 0 4px rgba(255,196,64,0.62));
}

.owner-dot.owner-fullset-mythic {
  filter:
    drop-shadow(0 0 2px rgba(120,230,255,1))
    drop-shadow(0 0 4px rgba(120,230,255,0.75))
    drop-shadow(0 0 6px rgba(120,230,255,0.36));
}

.owner-dot.owner-idle {
  animation: ownerIdleSwitch 0.9s steps(1) infinite;
}

.owner-dot.owner-walk-up {
  animation: ownerWalkUpLoop 1s steps(9) infinite;
}

.owner-dot.owner-walk-left {
  animation: ownerWalkLeftLoop 1s steps(9) infinite;
}

.owner-dot.owner-walk-down {
  animation: ownerWalkDownLoop 1s steps(9) infinite;
}

.owner-dot.owner-walk-right {
  animation: ownerWalkRightLoop 1s steps(9) infinite;
}

@keyframes ownerIdleSwitch {
  0%, 49.99% {
    background-position: 0 -64px;
  }

  50%, 100% {
    background-position: -32px -64px;
  }
}

@keyframes ownerWalkUpLoop {
  from { background-position: 0 0; }
  to { background-position: -288px 0; }
}

@keyframes ownerWalkLeftLoop {
  from { background-position: 0 -32px; }
  to { background-position: -288px -32px; }
}

@keyframes ownerWalkDownLoop {
  from { background-position: 0 -64px; }
  to { background-position: -288px -64px; }
}

@keyframes ownerWalkRightLoop {
  from { background-position: 0 -96px; }
  to { background-position: -288px -96px; }
}

    .table-layout {
      display: grid;
      grid-template-columns: repeat(var(--table-columns, 3), minmax(0, 1fr));
      grid-auto-rows: minmax(0, 1fr);
      gap: var(--table-gap, 10px);
      width: 100%;
      height: 100%;
      align-content: stretch;
      justify-items: center;
      align-items: center;
      overflow: visible;
      padding-right: 0;
      position: relative;
      z-index: 3;
    }

.table-spot {
  position: relative;
  width: calc(var(--table-spot-size, 82px) * 1.08);           
  height: calc(var(--table-spot-size, 82px) * 1.08);
  display: block;
  background: transparent;
  border: 0;
  box-shadow: none;
  animation: none;
  overflow: visible;
}

.table-core {
  position: absolute;
  inset: 0;

  background-image: url('../images/lounge/tisch1.png');
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  background-color: transparent;

  border: 0;
  border-radius: 0;
  box-shadow: none;
  animation: none;

  color: transparent;
  font-size: 0;
  z-index: 1;
}

.table-spot.active .table-core {
  background-image: url('../images/lounge/tisch1.png');
  background-color: transparent;
  border: 0;
  box-shadow: none;
  animation: none;
}

.seat,
.table-spot.active .seat {
  position: absolute;
  display: block !important;

  width: 20px;
  height: 20px;

  opacity: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
  pointer-events: none;

  z-index: 2;
}

.seat.top { left: 50%; top: 14%; transform: translate(-50%, -50%); } 
.seat.bottom { left: 50%; top: 86%; transform: translate(-50%, -50%); } 
.seat.left { left: 14%; top: 50%; transform: translate(-50%, -50%); } 
.seat.right { left: 86%; top: 50%; transform: translate(-50%, -50%); }

.table-spot.locked {
  opacity: 0.45;
  filter: grayscale(0.5);
}

    .table-spot.locked { opacity: 0.45; filter: grayscale(0.5); }

    .table-income {
      position: absolute;
      right: -4px;
      bottom: -2px;
      padding: 2px 6px;
      border-radius: 999px;
      background: rgba(0,0,0,0.38);
      border: 1px solid rgba(255,255,255,0.09);
      color: var(--gold);
      font-size: 9px;
      z-index: 3;
    }

    .cash-action-wrap {
  position: fixed;
  left: 50%;
  bottom: calc(var(--bottom-nav-height) + 18px + var(--safe-bottom));
  transform: translateX(-50%);
  width: min(430px, calc(100vw - 18px));
  z-index: 88;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  gap: clamp(6px, 1.5dvh, 8px);
  padding: 0 8px;
}

    .main-button {
      pointer-events: auto;
      border: 0;
      border-radius: 22px;
      padding: 14px;
      color: white;
      font-weight: bold;
      font-size: 17px;
      background: linear-gradient(135deg, var(--accent), #6954ff);
      box-shadow: 0 16px 40px rgba(105, 84, 255, 0.28);
      cursor: pointer;
      touch-action: manipulation;
      user-select: none;
      width: 50%;
    }

    .secondary-button {
      pointer-events: auto;
      border: 0;
      border-radius: 22px;
      padding: 14px;
      color: white;
      font-weight: bold;
      font-size: 17px;
      background: linear-gradient(135deg, var(--accent-2), #3ad1b0);
      box-shadow: 0 16px 40px rgba(115, 240, 207, 0.28);
      cursor: pointer;
      touch-action: manipulation;
      user-select: none;
      width: 50%;
    }

    .secondary-button:disabled,
    .secondary-button.not-ready {
      opacity: 0.4;
      filter: grayscale(0.6);
      box-shadow: none;
      cursor: not-allowed;
    }

    .main-button:disabled {
      opacity: 0.5;
      cursor: not-allowed;
      filter: grayscale(0.45);
      box-shadow: none;
    }

    .main-button:active, .buy-btn:active, .bottom-tab:active { transform: scale(0.97); }
    .panel-title h2 { margin: 0; font-size: 18px; }
    .category-tabs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 7px;
  margin-bottom: 12px;
}

#view-bar .category-tabs {
  grid-template-columns: repeat(4, 1fr);
}

.location-tabs {
  grid-template-columns: repeat(4, 1fr);
}

    .tab-btn, .buy-btn, .bottom-tab {
      border: 0;
      border-radius: 14px;
      color: var(--muted);
      background: var(--card-2);
      border: 1px solid rgba(255,255,255,0.08);
      font-weight: bold;
      cursor: pointer;
    }

    .tab-btn { padding: 10px 5px; font-size: 10px; }
    .tab-btn.active, .buy-btn.can-buy {
      color: var(--accent-2);
      background: rgba(115, 240, 207, 0.13);
      border-color: rgba(115, 240, 207, 0.35);
    }

    .buy-btn:disabled { opacity: 0.45; cursor: not-allowed; }
    .category-description { margin: 0 0 10px; line-height: 1.4; }
    .upgrade-list { display: flex; flex-direction: column; }

    .upgrade-lock-note {
      margin-top: 10px;
      color: var(--muted);
      font-size: 12px;
      line-height: 1.35;
      background: rgba(255,255,255,0.04);
      border: 1px solid rgba(255,255,255,0.07);
      border-radius: 14px;
      padding: 10px;
    }

    .upgrade {
      display: grid;
      grid-template-columns: 1fr auto;
      gap: 12px;
      align-items: center;
      padding: 11px 0;
      border-top: 1px solid rgba(255,255,255,0.07);
    }

    .upgrade.researching {
      grid-template-columns: 1fr;
      background: rgba(184, 140, 255, 0.06);
      border-radius: 14px;
      padding: 11px;
      margin-top: 8px;
      border: 1px solid rgba(184, 140, 255, 0.14);
    }

    .research-meta { display: flex; justify-content: space-between; gap: 8px; color: var(--muted); font-size: 11px; margin-top: 8px; }
    .research-bar { height: 8px; background: rgba(255,255,255,0.08); border-radius: 999px; overflow: hidden; margin-top: 8px; }
    .research-fill { height: 100%; width: 0%; background: linear-gradient(90deg, var(--accent-2), var(--accent)); border-radius: inherit; transition: width 0.2s ease; }

.recommendation-cost.research-buy {
  background: linear-gradient(135deg, #4da3ff, #6d7cff);
  color: white;
  box-shadow: 0 0 16px rgba(77, 163, 255, 0.45);
}

    .upgrade:first-of-type { border-top: 0; }
    .upgrade h3, .placeholder-card h3 { margin: 0 0 2px; font-size: 15px; }
    .upgrade p, .placeholder-card p { margin: 0; font-size: 12px; line-height: 1.35; }
    .upgrade-level { display: inline-block; margin-top: 5px; color: var(--accent); font-size: 11px; font-weight: bold; }
    .upgrade-impact { display: block; margin-top: 4px; color: var(--accent-2); font-size: 11px; font-weight: bold; }
    .buy-btn {
      min-width: 92px;
      padding: 10px 8px;
      color: var(--text);
      touch-action: manipulation;
      user-select: none;
    }

    .progress-wrap { margin-top: 10px; height: 10px; background: rgba(255,255,255,0.08); border-radius: 999px; overflow: hidden; }
    .progress-fill { height: 100%; width: 0%; background: linear-gradient(90deg, var(--accent-2), var(--accent)); border-radius: inherit; transition: width 0.2s ease; }
    .small-note { text-align: center; padding: 8px 0 12px; }

    .view {
  display: none;
  flex-direction: column;
  gap: 10px;
  min-height: 0;
  overflow: hidden;
  position: relative;
  flex: 1 1 auto;
}

.view.active {
  display: flex;
}

.view:not(#view-overview) {
  margin-top: -52px;
  z-index: 20;
}

#view-staff,
#view-owner,
#view-bar,
#view-realestate,
#view-location,
#view-social {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 4px;
  padding-bottom: 140px;
  -webkit-overflow-scrolling: touch;
}

    .readiness-grid, .mood-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 9px;
      margin-top: 10px;
    }

    .readiness-row, .mood-row {
      background: rgba(255,255,255,0.045);
      border: 1px solid rgba(255,255,255,0.07);
      border-radius: 14px;
      padding: 10px;
    }

    .row-head {
      display: flex;
      justify-content: space-between;
      gap: 12px;
      align-items: center;
      font-size: 12px;
      font-weight: bold;
      margin-bottom: 7px;
    }

    .row-head span:last-child { color: var(--accent-2); }
    .bar-track { height: 8px; background: rgba(255,255,255,0.08); border-radius: 999px; overflow: hidden; }
    .bar-fill { height: 100%; width: 0%; background: linear-gradient(90deg, var(--accent-2), var(--accent)); border-radius: inherit; transition: width 0.2s ease; }

    .side-info-btn {
      position: absolute;
      user-select: none;
      top: 16px;
      width: 46px;
      height: 46px;
      border: 0;
      border-radius: 14px;
      background: rgba(15, 13, 20, 0.82);
      border: 2px solid rgba(115, 240, 207, 0.32);
      color: white;
      font-size: 22px;
      font-weight: bold;
      z-index: 8;
      box-shadow: 0 10px 28px rgba(0,0,0,0.35);
      cursor: pointer;
      touch-action: manipulation;
      transition: all 0.2s ease;
    }

    .side-info-btn.good {
      border-color: #4cff88;
      box-shadow: 0 0 12px rgba(76,255,136,0.6);
    }

    .side-info-btn.warn {
      border-color: #ffb347;
      box-shadow: 0 0 10px rgba(255,179,71,0.5);
    }

    .side-info-btn.bad {
      border-color: #ff4d6d;
      animation: pulseRed 1s infinite;
    }

    @keyframes pulseRed {
      0% { box-shadow: 0 0 8px rgba(255,77,109,0.6); }
      50% { box-shadow: 0 0 18px rgba(255,77,109,1); }
      100% { box-shadow: 0 0 8px rgba(255,77,109,0.6); }
    }

    .side-info-btn { left: 12px; }
    .side-info-btn:active { transform: scale(0.96); }

    .side-button-info {
      position: absolute;
      right: -6px;
      top: -6px;
      width: 19px;
      height: 19px;
      display: grid;
      place-items: center;
      border-radius: 999px;
      background: rgba(20,17,27,0.96);
      border: 1px solid rgba(255,255,255,0.18);
      color: var(--accent-2);
      font-size: 11px;
      line-height: 1;
      z-index: 10;
      box-shadow: 0 6px 14px rgba(0,0,0,0.35);
    }

    .side-score-pill {
  position: absolute;
  top: 21px;
  min-width: 48px;
  height: 34px;
  display: grid;
  place-items: center;
  padding: 0 8px;
  border-radius: 999px;
  background: rgba(15, 13, 20, 0.82);
  border: 2px solid rgba(255,255,255,0.12);
  color: var(--text);
  font-size: 12px;
  font-weight: bold;
  z-index: 8;
  box-shadow: 0 10px 28px rgba(0,0,0,0.32);
  pointer-events: none;
}

    .side-score-pill.good {
      color: #4cff88;
      border-color: #4cff88;
      box-shadow: 0 0 12px rgba(76,255,136,0.45);
    }

    .side-score-pill.warn {
      color: #ffb347;
      border-color: #ffb347;
      box-shadow: 0 0 10px rgba(255,179,71,0.35);
    }

    .side-score-pill.bad {
      color: #ff4d6d;
      border-color: #ff4d6d;
      box-shadow: 0 0 12px rgba(255,77,109,0.45);
    }

    .info-modal-backdrop {
      position: fixed;
      inset: 0;
      display: none;
      align-items: center;
      justify-content: center;
      padding: 18px;
      background: rgba(0,0,0,0.58);
      backdrop-filter: blur(10px);
      z-index: 300;
    }

    .info-modal-backdrop.show { display: flex; }

    .info-modal {
      width: min(390px, 100%);
      max-height: min(620px, 78vh);
      overflow-y: auto; 
      -webkit-overflow-scrolling: touch;
      background: linear-gradient(180deg, rgba(36,30,48,0.98), rgba(15,13,20,0.98));
      border: 1px solid rgba(255,255,255,0.12);
      border-radius: 24px;
      padding: 14px;
      box-shadow: 0 24px 80px rgba(0,0,0,0.55);
    }

    .info-modal-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      margin-bottom: 10px;
    }

    .info-modal-header h2 { margin: 0; font-size: 18px; }

    .close-modal-btn {
      width: 38px;
      height: 38px;
      border: 0;
      border-radius: 12px;
      color: var(--text);
      background: rgba(255,255,255,0.07);
      border: 1px solid rgba(255,255,255,0.1);
      font-size: 20px;
      font-weight: bold;
      cursor: pointer;
    }

    .modal-section {
      background: rgba(255,255,255,0.035);
      border: 1px solid rgba(255,255,255,0.07);
      border-radius: 18px;
      padding: 12px;
      margin-top: 10px;
    }

    .kpi-hero {
      display: grid;
      grid-template-columns: 58px 1fr;
      gap: 12px;
      align-items: center;
      background: linear-gradient(135deg, rgba(184,140,255,0.14), rgba(115,240,207,0.09));
      border: 1px solid rgba(115,240,207,0.18);
      border-radius: 20px;
      padding: 12px;
      margin-bottom: 10px;
    }

    .kpi-hero-icon {
      width: 58px;
      height: 58px;
      display: grid;
      place-items: center;
      border-radius: 18px;
      background: rgba(0,0,0,0.22);
      border: 1px solid rgba(255,255,255,0.1);
      font-size: 30px;
      box-shadow: inset 0 0 18px rgba(184,140,255,0.08);
    }

    .kpi-hero-title {
      font-size: 18px;
      font-weight: bold;
      margin-bottom: 3px;
    }

    .kpi-hero-subtitle {
      color: var(--muted);
      font-size: 12px;
      line-height: 1.35;
    }

    .kpi-info-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 8px;
      margin-top: 10px;
    }

    .kpi-info-card {
      display: grid;
      grid-template-columns: 28px 1fr;
      gap: 9px;
      align-items: start;
      background: rgba(255,255,255,0.045);
      border: 1px solid rgba(255,255,255,0.075);
      border-radius: 15px;
      padding: 10px;
    }

    .kpi-info-card-icon {
      width: 28px;
      height: 28px;
      display: grid;
      place-items: center;
      border-radius: 10px;
      background: rgba(115,240,207,0.1);
      border: 1px solid rgba(115,240,207,0.16);
      font-size: 15px;
    }

    .kpi-info-card-title {
      color: var(--text);
      font-size: 12px;
      font-weight: bold;
      margin-bottom: 2px;
    }

    .kpi-info-card-text {
      color: var(--muted);
      font-size: 12px;
      line-height: 1.35;
    }

    .kpi-info,
    .mini-info-btn {
      display: inline-grid;
      place-items: center;
      width: 18px;
      height: 18px;
      margin-left: 4px;
      border-radius: 6px;
      background: rgba(115,240,207,0.16);
      border: 1px solid rgba(115,240,207,0.32);
      color: var(--text);
      font-size: 11px;
      font-weight: bold;
      cursor: pointer;
      vertical-align: middle;
      user-select: none;
      touch-action: manipulation;
      box-shadow: 0 4px 12px rgba(0,0,0,0.24);
    }

    .kpi-info:active,
    .mini-info-btn:active { transform: scale(0.92); }

    .kpi-tip {
      margin-top: 10px;
      padding: 10px;
      border-radius: 15px;
      background: rgba(255,209,102,0.08);
      border: 1px solid rgba(255,209,102,0.18);
      color: var(--gold);
      font-size: 12px;
      line-height: 1.35;
      font-weight: bold;
    }

    .modal-section-title {
      display: flex;
      justify-content: space-between;
      gap: 10px;
      font-size: 13px;
      font-weight: bold;
      margin-bottom: 8px;
    }

    .modal-section-title span:last-child { color: var(--accent-2); }

    .upgrade-modal .info-modal {
      max-height: min(680px, 82vh);
    }

    .modal-category-tabs {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 7px;
      margin-bottom: 10px;
    }

    .modal-tab-btn {
      border: 0;
      user-select: none;
      border-radius: 14px;
      padding: 10px 6px;
      color: var(--muted);
      background: var(--card-2);
      border: 1px solid rgba(255,255,255,0.08);
      font-weight: bold;
      font-size: 11px;
      cursor: pointer;
      touch-action: manipulation;
    }

    .modal-tab-btn.active {
      color: var(--accent-2);
      background: rgba(115, 240, 207, 0.13);
      border-color: rgba(115, 240, 207, 0.35);
    }

    .modal-upgrade-list {
      max-height: 52vh;
      overflow-y: auto;
      padding-right: 2px;
    }

    .placeholder-list, .staff-list { display: grid; grid-template-columns: 1fr; gap: 10px; }
    .placeholder-card, .staff-card { box-shadow: none; }
    .placeholder-card.locked { opacity: 0.66; }
    .placeholder-meta { margin-top: 7px; color: var(--gold); font-size: 11px; font-weight: bold; }

    .staff-card {
      background: linear-gradient(180deg, rgba(36,30,48,0.94), rgba(20,17,27,0.98));
      border: 1px solid rgba(255,255,255,0.08);
      border-radius: 18px;
      padding: 12px;
    }

    .staff-top {
      display: grid;
      grid-template-columns: 1fr auto;
      gap: 10px;
      align-items: start;
    }

    .staff-card h3 { margin: 0 0 3px; font-size: 16px; }
    .staff-card p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.35; }
    .staff-meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; }
    .staff-pill {
      border-radius: 999px;
      padding: 5px 8px;
      background: rgba(255,255,255,0.06);
      border: 1px solid rgba(255,255,255,0.08);
      color: var(--muted);
      font-size: 11px;
      font-weight: bold;
    }

    .staff-pill.good { color: var(--accent-2); background: rgba(115,240,207,0.11); border-color: rgba(115,240,207,0.25); }
    .staff-pill.warn { color: var(--gold); background: rgba(255,209,102,0.1); border-color: rgba(255,209,102,0.22); }
    .staff-pill.bad { color: var(--danger); background: rgba(255,122,144,0.1); border-color: rgba(255,122,144,0.22); }

    .staff-controls {
      display: grid;
      grid-template-columns: 42px 44px 42px;
      gap: 6px;
      align-items: center;
    }

    .staff-count {
      height: 42px;
      display: grid;
      place-items: center;
      border-radius: 14px;
      background: rgba(255,255,255,0.06);
      border: 1px solid rgba(255,255,255,0.08);
      color: var(--text);
      font-weight: bold;
      font-size: 15px;
    }

    .staff-control-btn {
      height: 42px;
      touch-action: manipulation;
      user-select: none;
      border: 0;
      border-radius: 14px;
      color: var(--text);
      background: var(--card-2);
      border: 1px solid rgba(255,255,255,0.08);
      font-weight: bold;
      font-size: 20px;
      cursor: pointer;
    }

    .staff-control-btn.plus {
      color: var(--accent-2);
      background: rgba(115, 240, 207, 0.13);
      border-color: rgba(115, 240, 207, 0.35);
    }

    .staff-control-btn.minus {
      color: var(--danger);
      background: rgba(255,122,144,0.1);
      border-color: rgba(255,122,144,0.22);
    }

    .staff-control-btn:disabled {
      opacity: 0.35;
      cursor: not-allowed;
      filter: grayscale(0.5);
    }

    .staff-control-btn:active { transform: scale(0.97); }

    .bottom-nav-wrap {
  position: fixed;
  left: 50%;
  bottom: calc(8px + var(--safe-bottom));
  transform: translateX(-50%);
  width: min(430px, calc(100vw - 18px));
  z-index: 90;
  pointer-events: none;
}

    .bottom-nav {
  display: grid;
  grid-template-columns: 1fr 1fr 1.16fr 1fr 1fr;
  gap: 7px;

  background:
    linear-gradient(180deg, rgba(28,23,38,0.96), rgba(12,10,18,0.96));

  backdrop-filter: blur(16px);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 24px;
  padding: 8px;

  box-shadow:
    inset 0 1px 2px rgba(255,255,255,0.08),
    0 18px 50px rgba(0,0,0,0.46);

  pointer-events: auto;
}

    .bottom-tab {
  min-height: 54px;
  touch-action: manipulation;
  user-select: none;
  padding: 8px 4px;
  font-size: 10px;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;

  background:
    linear-gradient(180deg, rgba(255,255,255,0.055), rgba(255,255,255,0.025));

  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 16px;

  color: var(--muted);
  font-weight: bold;
  cursor: pointer;

  box-shadow:
    inset 0 1px 1px rgba(255,255,255,0.06);
}

    .bottom-tab strong { font-size: 16px; line-height: 1; }
    .bottom-tab.active {
  color: var(--accent-2);

  background:
    radial-gradient(circle at 50% 0%, rgba(115,240,207,0.24), transparent 55%),
    linear-gradient(180deg, rgba(115,240,207,0.16), rgba(184,140,255,0.10));

  border-color: rgba(115,240,207,0.42);

  box-shadow:
    inset 0 1px 2px rgba(255,255,255,0.10),
    0 0 18px rgba(115,240,207,0.16);
}

    .bottom-tab.home-tab {
  min-height: 62px;
  margin-top: -8px;
  border-radius: 20px;
  color: white;

  background:
    radial-gradient(circle at 50% 0%, rgba(255,255,255,0.24), transparent 48%),
    linear-gradient(135deg, var(--accent), #6954ff);

  border-color: rgba(255,255,255,0.18);

  box-shadow:
    inset 0 1px 2px rgba(255,255,255,0.18),
    0 12px 30px rgba(105,84,255,0.34);
}

    .bottom-tab.home-tab.active {
      color: white;
      box-shadow: 0 12px 30px rgba(105, 84, 255, 0.35);
    }

    .toast {
      position: fixed;
      left: 50%;
      bottom: 235px;
      transform: translateX(-50%) translateY(20px);
      width: min(390px, calc(100vw - 24px));
      background: rgba(20, 17, 27, 0.96);
      border: 2px solid var(--accent);
      color: var(--text);
      border-radius: 18px;
      padding: 13px 16px;
      opacity: 0;
      pointer-events: none;
      transition: 0.25s ease;
      text-align: center;
      box-shadow: 0 16px 40px rgba(105, 84, 255, 0.35);
      z-index: 99;
    }

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

.random-event-backdrop {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 18px;
  background: rgba(0,0,0,0.62);
  backdrop-filter: blur(10px);
  z-index: 350;
}

.random-event-backdrop.show {
  display: flex;
}

.random-event-card {
  width: min(390px, 100%);
  background: linear-gradient(180deg, rgba(36,30,48,0.98), rgba(15,13,20,0.98));
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 24px;
  padding: 14px;
  box-shadow: 0 24px 80px rgba(0,0,0,0.58);
}

.random-event-header {
  display: grid;
  grid-template-columns: 58px 1fr;
  gap: 12px;
  align-items: center;
  margin-bottom: 12px;
}

.random-event-icon {
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  border-radius: 18px;
  background: rgba(0,0,0,0.22);
  border: 1px solid rgba(255,255,255,0.1);
  font-size: 30px;
}

.random-event-header h2 {
  margin: 0 0 3px;
  font-size: 18px;
}

.random-event-header p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.random-event-story {
  background: rgba(255,255,255,0.045);
  border: 1px solid rgba(255,255,255,0.075);
  border-radius: 16px;
  padding: 12px;
  color: var(--text);
  font-size: 13px;
  line-height: 1.4;
  margin-bottom: 12px;
}

.random-event-actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  margin-top: 6px;
}

.random-event-choice {
  border: 0;
  border-radius: 16px;
  padding: 12px;
  color: var(--text);
  background: var(--card-2);
  border: 1px solid rgba(255,255,255,0.09);
  font-weight: bold;
  cursor: pointer;
  text-align: left;
  line-height: 1.25;
}

.random-event-choice.safe {
  color: var(--text);
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
}

.random-event-choice.risky {
  color: var(--gold);
  background: rgba(255,209,102,0.09);
  border-color: rgba(255,209,102,0.22);
}

.random-event-choice:active {
  transform: scale(0.97);
}

.random-event-cash-preview {
  margin-top: 10px;
  padding: 9px 11px;
  border-radius: 14px;
  background: rgba(255, 209, 102, 0.09);
  border: 1px solid rgba(255, 209, 102, 0.22);
  color: var(--muted);
  font-size: 12px;
  font-weight: bold;
}

.random-event-cash-preview strong {
  color: var(--gold);
}

.research-confirm-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(5, 4, 10, 0.72);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  padding: 18px;
}

.research-confirm-backdrop.show {
  display: flex;
}

.research-confirm-card {
  width: min(420px, 100%);
  background: linear-gradient(180deg, #241e30, #17131f);
  border: 1px solid rgba(77, 163, 255, 0.5);
  border-radius: 22px;
  padding: 18px;
  color: var(--text);
  box-shadow: 0 0 28px rgba(77, 163, 255, 0.25);
}

.research-confirm-header {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-bottom: 14px;
}

.research-confirm-icon {
  width: 48px;
  height: 48px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  font-size: 24px;
  background: rgba(77, 163, 255, 0.16);
  border: 1px solid rgba(77, 163, 255, 0.45);
}

.research-confirm-header h2 {
  margin: 0;
  font-size: 20px;
}

.research-confirm-header p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 13px;
}

.research-confirm-story {
  background: rgba(255,255,255,0.06);
  border-radius: 16px;
  padding: 14px;
  margin-bottom: 14px;
  line-height: 1.45;
  color: var(--text);
}

.research-confirm-actions {
  display: grid;
  gap: 10px;
}

.research-confirm-choice {
  border: 0;
  border-radius: 16px;
  padding: 13px 14px;
  font-weight: 800;
  color: white;
  cursor: pointer;
}

.research-confirm-choice.cancel {
  background: rgba(255,255,255,0.12);
  color: var(--muted);
}

.research-confirm-choice.start {
  background: linear-gradient(135deg, #4da3ff, #6d7cff);
  box-shadow: 0 0 16px rgba(77, 163, 255, 0.45);
}

.action-button-row {
  display: flex;
  gap: 8px;
  width: 100%;
}

.image-action-button {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding: 0;
  height: clamp(54px, 7dvh, 68px);
  background: transparent;
  border: 0;
  box-shadow: none;
}

.image-action-button img {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: fill;
  pointer-events: none;
  user-select: none;
}

.action-button-progress {
  position: absolute;
  left: 6%;
  top: 18%;
  bottom: 18%;
  width: calc(var(--button-progress, 0%) * 0.88);
  background: linear-gradient(
    90deg,
    rgba(115, 240, 207, 0.05),
    rgba(115, 240, 207, 0.75)
  );
  border-radius: 999px;
  z-index: 3;
  transition: width 0.2s linear;
  pointer-events: none;
  mix-blend-mode: screen;
  box-shadow: 0 0 16px rgba(115, 240, 207, 0.55);
}

.action-button-progress.lounge {
  background: linear-gradient(
    90deg,
    rgba(184, 140, 255, 0.08),
    rgba(184, 140, 255, 0.42)
  );
}

.image-action-button.not-ready {
  opacity: 0.42;
  filter: grayscale(0.65);
  cursor: not-allowed;
}

.image-action-button:active {
  transform: scale(0.97);
}

.info-modal-backdrop,
.random-event-backdrop,
.research-confirm-backdrop {
  transform: none;
  will-change: auto;
  contain: none;
  z-index: 9999;
}

.info-modal,
.random-event-card,
.research-confirm-card {
  transform: translateZ(0);
}

.intro-backdrop {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 18px;
  background: rgba(0,0,0,0.7);
  backdrop-filter: blur(12px);
  z-index: 10000;
}

.intro-backdrop.show {
  display: flex;
}

.intro-card {
  width: min(430px, 100%);
  max-height: 85vh;
  overflow-y: auto;

  background: linear-gradient(180deg, #241e30, #14111b);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 28px;

  padding: 20px;

  box-shadow:
    0 25px 80px rgba(0,0,0,0.6),
    0 0 40px rgba(184,140,255,0.12);
}

.intro-header {
  display: grid;
  grid-template-columns: 60px 1fr;
  gap: 14px;
  align-items: center;

  margin-bottom: 18px;
}

.intro-icon {
  width: 60px;
  height: 60px;

  display: grid;
  place-items: center;

  border-radius: 18px;

  font-size: 30px;

  background: rgba(184,140,255,0.14);
  border: 1px solid rgba(184,140,255,0.35);
}

.intro-header h2 {
  margin: 0;
  font-size: 22px;
}

.intro-header p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 13px;
}

.intro-content {
  display: flex;
  flex-direction: column;
  gap: 12px;

  color: var(--text);
  font-size: 14px;
  line-height: 1.5;
}

.intro-section {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);

  border-radius: 16px;

  padding: 12px;
}

.intro-section h3 {
  margin: 0 0 5px;
  font-size: 15px;
}

.intro-section p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
}

.intro-goal {
  margin-top: 6px;

  padding: 14px;

  border-radius: 18px;

  background:
    linear-gradient(
      135deg,
      rgba(115,240,207,0.12),
      rgba(184,140,255,0.12)
    );

  border: 1px solid rgba(115,240,207,0.2);

  color: var(--accent-2);

  font-weight: bold;
  text-align: center;
}

.intro-button {
  width: 100%;
  margin-top: 18px;

  border: 0;
  border-radius: 18px;

  padding: 15px;

  font-size: 16px;
  font-weight: bold;

  color: white;

  background:
    linear-gradient(
      135deg,
      var(--accent),
      #6954ff
    );

  cursor: pointer;

  box-shadow:
    0 16px 40px rgba(105,84,255,0.35);
}

.intro-button:active {
  transform: scale(0.98);
}

.intro-story-card {
  width: min(360px, calc(100vw - 32px));
  max-height: min(620px, calc(100dvh - 54px));
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 18px;
  border-radius: 28px;
  background:
    radial-gradient(circle at 50% 0%, rgba(184,140,255,0.24), transparent 55%),
    linear-gradient(180deg, rgba(36,30,48,0.98), rgba(15,13,20,0.98));
  border: 1px solid rgba(255,255,255,0.14);
  box-shadow:
    0 24px 70px rgba(0,0,0,0.55),
    inset 0 0 28px rgba(255,255,255,0.035);
  overflow: hidden;
}

.intro-story-image-wrap {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  min-height: 0;
  border-radius: 22px;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 55%, rgba(115,240,207,0.18), transparent 58%),
    rgba(255,255,255,0.045);
  border: 1px solid rgba(255,255,255,0.09);
  box-shadow:
    inset 0 0 18px rgba(255,255,255,0.035),
    0 14px 30px rgba(0,0,0,0.34);
}

.intro-story-image {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  object-fit: cover;
  filter: none;
}

.intro-story-content {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 210px;
}

.intro-step-indicator {
  align-self: flex-start;
  padding: 5px 9px;
  border-radius: 999px;
  color: var(--accent-2);
  background: rgba(115,240,207,0.12);
  border: 1px solid rgba(115,240,207,0.28);
  font-size: 11px;
  font-weight: 900;
}

.intro-story-content h2 {
  margin: 0;
  font-size: 22px;
  line-height: 1.08;
  letter-spacing: -0.6px;
}

.intro-story-content p {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.45;
}

.intro-story-hint {
  margin-top: auto;
  padding: 11px;
  border-radius: 16px;
  color: var(--gold);
  background: rgba(255,209,102,0.10);
  border: 1px solid rgba(255,209,102,0.22);
  font-size: 12px;
  line-height: 1.35;
  font-weight: bold;
}

.intro-story-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.intro-nav-button {
  border: 0;
  border-radius: 16px;
  padding: 13px 10px;
  color: white;
  font-weight: 900;
  cursor: pointer;
  touch-action: manipulation;
}

.intro-nav-button.primary {
  background: linear-gradient(135deg, var(--accent), #6954ff);
  box-shadow: 0 14px 32px rgba(105,84,255,0.28);
}

.intro-nav-button.secondary {
  color: var(--muted);
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.12);
}

.intro-nav-button.hidden {
  display: none;
}

#closeIntroButton:not(.hidden) {
  grid-column: 2;
}

.prestige-button.visible {
  display: grid;
  place-items: center;
}

.prestige-button.prestige-locked {
  border-color: var(--danger);
  color: var(--muted);
  filter: grayscale(0.4);
}

.prestige-button.prestige-bronze {
  border-color: #cd7f32;
  box-shadow: 0 0 14px rgba(205,127,50,0.45);
}

.prestige-button.prestige-silver {
  border-color: #c0c0c0;
  box-shadow: 0 0 14px rgba(192,192,192,0.45);
}

.prestige-button.prestige-gold {
  border-color: #ffd166;
  color: var(--gold);
  box-shadow: 0 0 16px rgba(255,209,102,0.55);
}

.prestige-button.prestige-diamond {
  border-color: #73f0cf;
  color: var(--accent-2);
  box-shadow: 0 0 18px rgba(115,240,207,0.65);
}

.prestige-backdrop {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 18px;
  background: rgba(0,0,0,0.68);
  backdrop-filter: blur(12px);
  z-index: 10001;
}

.prestige-backdrop.show {
  display: flex;
}

.prestige-card {
  width: min(420px, 100%);
  background: linear-gradient(180deg, #241e30, #14111b);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 26px;
  padding: 18px;
  color: var(--text);
  box-shadow: 0 26px 80px rgba(0,0,0,0.6);
}

.prestige-header {
  display: grid;
  grid-template-columns: 60px 1fr;
  gap: 14px;
  align-items: center;
  margin-bottom: 14px;
}

.prestige-big-icon {
  width: 60px;
  height: 60px;
  display: grid;
  place-items: center;
  border-radius: 18px;
  background: rgba(184,140,255,0.14);
  border: 1px solid rgba(184,140,255,0.35);
  font-size: 28px;
  font-weight: 900;
}

.prestige-header h2 {
  margin: 0;
  font-size: 22px;
}

.prestige-header p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.35;
}

.prestige-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

.prestige-info-box {
  background: rgba(255,255,255,0.045);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 16px;
  padding: 12px;
}

.prestige-info-box.next {
  border-color: rgba(115,240,207,0.25);
  background: rgba(115,240,207,0.08);
}

.prestige-info-box h3 {
  margin: 0 0 6px;
  font-size: 14px;
}

.prestige-info-box p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

.prestige-warning {
  margin-top: 12px;
  padding: 12px;
  border-radius: 16px;
  background: rgba(255,122,144,0.09);
  border: 1px solid rgba(255,122,144,0.22);
  color: var(--danger);
  font-size: 12px;
  line-height: 1.4;
  font-weight: bold;
}

.prestige-actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin-top: 14px;
}

.prestige-confirm.max {
  background: linear-gradient(135deg, var(--gold), #ff9f1c);
  color: #19121f;
}

.prestige-confirm.max:disabled {
  opacity: 0.45;
  filter: grayscale(0.7);
}

.prestige-cancel,
.prestige-confirm {
  border: 0;
  border-radius: 16px;
  padding: 13px;
  font-weight: 900;
  cursor: pointer;
}

.prestige-cancel {
  color: var(--muted);
  background: rgba(255,255,255,0.08);
}

.prestige-confirm {
  color: white;
  background: linear-gradient(135deg, var(--accent), #6954ff);
  box-shadow: 0 0 18px rgba(105,84,255,0.35);
}

.prestige-confirm:disabled {
  opacity: 0.45;
  filter: grayscale(0.7);
  cursor: not-allowed;
}

/* =========================================
   IDLE CLOUDS ANIMATION SYSTEM
========================================= */

/* Smooth UI transitions */
.upgrade,
.staff-card,
.stat,
.panel,
.buy-btn,
.bottom-tab,
.tab-btn,
.main-button,
.secondary-button,
.random-event-choice,
.recommendation-bar,
.table-core {
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    background 0.18s ease,
    border-color 0.18s ease,
    opacity 0.18s ease;
}

/* -----------------------------------------
   BUYABLE UPGRADE GLOW
----------------------------------------- */

.buy-btn.can-buy {
  animation: buyablePulse 1.8s ease-in-out infinite;
}

@keyframes buyablePulse {
  0%, 100% {
    box-shadow: 0 0 0 rgba(115,240,207,0);
  }

  50% {
    box-shadow: 0 0 18px rgba(115,240,207,0.32);
  }
}

/* -----------------------------------------
   BUTTON PRESS FEEDBACK
----------------------------------------- */

.main-button:active,
.secondary-button:active,
.buy-btn:active,
.bottom-tab:active,
.tab-btn:active,
.random-event-choice:active {
  transform: scale(0.95);
}

/* -----------------------------------------
   PRESTIGE BUTTON LEGENDARY GLOW
----------------------------------------- */

.prestige-button.visible {
  animation: prestigeGlow 2.4s ease-in-out infinite;
}

@keyframes prestigeGlow {
  0%, 100% {
    transform: translateX(-50%) scale(1);
  }

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

/* -----------------------------------------
   RANDOM EVENT ENTRY
----------------------------------------- */

.random-event-card {
  animation: eventPopup 0.35s ease-out;
}

@keyframes eventPopup {
  0% {
    opacity: 0;
    transform: scale(0.9) translateY(20px);
  }

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

/* -----------------------------------------
   INTRO CARD ENTRY
----------------------------------------- */

.intro-card {
  animation: introAppear 0.45s ease-out;
}

@keyframes introAppear {
  0% {
    opacity: 0;
    transform: scale(0.92);
  }

  100% {
    opacity: 1;
    transform: scale(1);
  }
}

/* -----------------------------------------
   CASH POPUP ANIMATION
----------------------------------------- */

.cash-popup {
  position: absolute;
  z-index: 999;

  color: var(--gold);

  font-weight: 900;
  font-size: 18px;

  pointer-events: none;

  text-shadow:
    0 0 10px rgba(255,209,102,0.7);

  animation: cashPopup 0.9s ease-out forwards;
}

@keyframes cashPopup {
  0% {
    opacity: 1;
    transform: translateY(0px) scale(1);
  }

  100% {
    opacity: 0;
    transform: translateY(-42px) scale(1.18);
  }
}

.table-core {
  position: absolute;
  inset: 0;
}

.random-event-avatar-wrap {
  display: flex;
  justify-content: center;
  align-items: flex-end;

  height: 235px;
  margin-top: -10px;
  margin-bottom: 18px;

  overflow: hidden;
  pointer-events: none;
}

.random-event-avatar {
  width: 185px;
  max-height: 235px;
  object-fit: contain;

  opacity: 0;

  transform: translateY(14px) scale(0.98);

  transition:
    opacity 0.3s ease,
    transform 0.3s ease;

  filter:
    drop-shadow(0 0 14px rgba(255,255,255,0.16))
    drop-shadow(0 0 20px rgba(115,240,207,0.18));
}

.random-event-avatar.visible {
  opacity: 1;
  animation: eventAvatarFloat 3s ease-in-out infinite;
}

@keyframes eventAvatarFloat {
  0%, 100% {
    transform: translateY(-4px) scale(1.04);
  }

  50% {
    transform: translateY(-14px) scale(1.06);
  }
}

.buy-btn.queue-full {
  opacity: 0.55;
  filter: grayscale(0.4);
  box-shadow: none;
}

.buy-btn.queue-full::after {
  content: " ⏳";
}

.buy-btn.max-level {
  opacity: 0.55;
  color: var(--gold);
  cursor: not-allowed;
}

.character-select-backdrop {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 18px;
  background: rgba(0,0,0,0.72);
  backdrop-filter: blur(12px);
  z-index: 11000;
}

.character-select-backdrop.show {
  display: flex;
}

.character-select-card {
  width: min(430px, 100%);
  background: linear-gradient(180deg, #241e30, #14111b);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 26px;
  padding: 18px;
  text-align: center;
  box-shadow: 0 24px 80px rgba(0,0,0,0.6);
}

.character-select-card h2 {
  margin: 0 0 16px;
  font-size: 22px;
}

.character-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.character-option {
  border: 1px solid rgba(115,240,207,0.25);
  border-radius: 22px;
  background: rgba(255,255,255,0.055);
  padding: 10px;
  cursor: pointer;
  overflow: hidden;
  animation: characterPulse 1.6s ease-in-out infinite;
}

.character-option img {
  width: 100%;
  height: 230px;
  object-fit: contain;
  display: block;
  pointer-events: none;
}

.character-option:active {
  transform: scale(0.96);
}

@keyframes characterPulse {
  0%, 100% {
    box-shadow: 0 0 14px rgba(115,240,207,0.16);
  }
  50% {
    box-shadow: 0 0 28px rgba(115,240,207,0.42);
  }
}

.offline-income-backdrop {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 18px;
  background: rgba(0,0,0,0.72);
  backdrop-filter: blur(12px);
  z-index: 12000;
}

.offline-income-backdrop.show {
  display: flex;
}

.offline-income-card {
  position: relative;
  width: min(440px, 100%);
  max-height: 90dvh;

  border-radius: 28px;
  padding: 18px;
  background: linear-gradient(180deg, #272033, #14111b);
  border: 1px solid rgba(255,255,255,0.14);
  box-shadow: 0 26px 90px rgba(0,0,0,0.65);
  text-align: center;

  overflow-y: auto;
  overflow-x: hidden;
}

.offline-income-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 50%;
  background: rgba(255,255,255,0.1);
  color: #fff;
  font-size: 22px;
}

.offline-income-avatar {
  width: 190px;
  height: 190px;
  object-fit: contain;
  margin: 0 auto 4px;
  display: block;
  filter: drop-shadow(0 18px 22px rgba(0,0,0,0.45));
}

.offline-income-label {
  color: #73f0cf;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.offline-income-content h2 {
  margin: 6px 0 6px;
  font-size: 26px;
}

.offline-income-content p {
  margin: 0 0 14px;
  color: rgba(255,255,255,0.7);
}

.offline-income-rewards {
  display: grid;
  gap: 8px;
  margin: 14px 0;
}

.offline-income-reward {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 13px;
  border-radius: 16px;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.09);
}

.offline-income-reward strong {
  color: #fff;
}

.offline-income-reward span {
  color: #73f0cf;
  font-weight: 800;
}

.offline-income-actions {
  position: sticky;
  top: 0;
  z-index: 5;

  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;

  margin: 12px 0 10px;
  padding: 2px 0;
}

.offline-income-confirm,
.offline-income-double {
  width: 100%;
  border: 0;
  border-radius: 18px;
  padding: 13px 12px;
  font-weight: 900;
  cursor: pointer;
  min-height: 48px;
}

.offline-income-confirm {
  background: linear-gradient(135deg, #73f0cf, #b8ffe9);
  color: #14111b;
  animation: offlineClaimPulse 1.8s ease-in-out infinite;
}

.offline-income-double {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  background: linear-gradient(135deg, #ffd166, #ff9f43);
  color: #181018;
  box-shadow: 0 0 22px rgba(255,209,102,0.25);
}

.offline-income-double small {
  margin-top: 2px;
  font-size: 10px;
  font-weight: 900;
  opacity: 0.8;
}

@keyframes offlineClaimPulse {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 0 0 rgba(115,240,207,0);
  }

  50% {
    transform: scale(1.04);
    box-shadow: 0 0 24px rgba(115,240,207,0.45);
  }
}

.milestone-effect-layer {
  pointer-events: none;
  overflow: hidden;
  border-radius: 0;
  background: transparent;
  transform: none !important;
}

.milestone-effect-layer::before {
  content: "";
  position: absolute;
  inset: 0;
  transform: none !important;

  opacity: 0;
  animation: milestoneFlash 5.5s ease-out;
  border-radius: 0;
}

.milestone-effect-layer.lounge::before {
  background: radial-gradient(circle, rgba(255, 190, 80, 0.28), transparent 60%);
}

.milestone-effect-layer.prestige::before {
  background: radial-gradient(circle, rgba(255, 230, 130, 0.45), rgba(160, 80, 255, 0.22), transparent 70%);
  animation: prestigeFlash 3.4s ease-out;
}

.milestone-particle {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #ffd36a;
  box-shadow: 0 0 14px rgba(255, 211, 106, 0.9);
  animation: milestoneParticle 5.8s ease-out forwards;
}

.milestone-effect-layer.prestige .milestone-particle {
  width: 10px;
  height: 10px;
  background: linear-gradient(135deg, #fff2a8, #ff7a3d, #8a5cff);
  box-shadow: 0 0 22px rgba(255, 210, 120, 1);
  animation-duration: 4.8s;
}

@keyframes milestoneParticle {
  0% {
    transform: translate(0, 0) scale(0.4);
    opacity: 0;
  }

  15% {
    opacity: 1;
  }

  100% {
    transform: translate(var(--x), var(--y)) scale(0);
    opacity: 0;
  }
}

@keyframes milestoneFlash {

  0% {
    opacity: 0;
    transform: scale(0.92);
  }

  10% {
    opacity: 1;
    transform: scale(1);
  }

  55% {
    opacity: 0.9;
  }

  100% {
    opacity: 0;
    transform: scale(1.08);
  }

}

@keyframes prestigeFlash {
  0% {
    opacity: 0;
  }

  12% {
    opacity: 1;
  }

  35% {
    opacity: 0.55;
  }

  100% {
    opacity: 0;
  }
}

body.prestige-shake {
  animation: prestigeShake 0.6s ease;
}

@keyframes prestigeShake {

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

}

.shop-floating-button:active,
.chest-floating-button:active,
.floating-quest-button:active,
.social-floating-button:active,
.gem-floating-button:active,
.equipment-floating-button:active,
.location-floating-button:active {
  animation-play-state: paused;
  transform: translateY(0) scale(0.94);
}

@keyframes socialFloat {
  0%, 100% {
    transform: translateY(0) scale(1);
  }

  50% {
    transform: translateY(-5px) scale(1);
  }
}

#view-social {
  overflow-y: auto;
  padding-right: 4px;
  padding-bottom: 12px;
}

.social-floating-button.hidden {
  display: none;
}

.guest-quality-compare {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 8px;
}

.guest-quality-column {
  padding: 12px;
  border-radius: 18px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.09);
}

.guest-quality-column h3 {
  margin: 0 0 10px;
  font-size: 13px;
}

.guest-profile-row {
  display: grid;
  gap: 3px;
  padding: 8px 0;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  font-size: 12px;
}

.guest-profile-row:last-child {
  border-bottom: 0;
}

.guest-profile-row span {
  color: rgba(255,255,255,0.68);
  line-height: 1.35;
}

.guest-profile-row.max {
  padding: 14px;
  border-radius: 14px;
  background: rgba(255,211,106,0.12);
  color: #ffd36a;
  border: 1px solid rgba(255,211,106,0.24);
}

.guest-quality-upgrade-card {
  width: 100%;
  margin-top: 10px;
  padding: 14px;
  border: 0;
  border-radius: 18px;
  text-align: left;
  color: white;
  background: linear-gradient(135deg, rgba(255,79,216,0.28), rgba(105,84,255,0.34));
  border: 1px solid rgba(255,255,255,0.14);
  box-shadow: 0 14px 34px rgba(105,84,255,0.25);
}

.guest-quality-upgrade-card strong {
  display: block;
  margin-bottom: 5px;
  font-size: 14px;
}

.guest-quality-upgrade-card span {
  display: block;
  color: rgba(255,255,255,0.72);
  font-size: 12px;
}

.guest-quality-upgrade-card.max {
  background: rgba(255,211,106,0.12);
  color: #ffd36a;
  box-shadow: none;
}

.guest-quality-upgrade-card.researching {
  background: rgba(115,240,207,0.1);
  box-shadow: none;
}
  
@media (max-width: 430px) {
  .guest-quality-compare {
    grid-template-columns: minmax(155px, 1fr) minmax(155px, 1fr);
    overflow-x: auto;
    max-width: 100%;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 6px;
  }

  .guest-quality-column {
    min-width: 155px;
    padding: 10px;
  }

  .guest-profile-row {
    font-size: 11px;
    padding: 6px 0;
  }
}

.guest-quality-action-row {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 10px;
}

.guest-quality-followers-card {
  padding: 14px;
  border-radius: 18px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
}

.guest-quality-followers-card strong,
.guest-quality-upgrade-card strong {
  display: block;
  margin-bottom: 5px;
}

.guest-quality-followers-card span {
  display: block;
  font-size: 20px;
  font-weight: 900;
}

.guest-quality-followers-card small {
  color: rgba(255,255,255,0.65);
}

.guest-quality-upgrade-card {
  margin-top: 0;
}

.guest-quality-upgrade-card.can-upgrade {
  animation: guestUpgradeBounce 1.4s ease-in-out infinite;
}

.guest-quality-upgrade-card.locked {
  opacity: 0.55;
  filter: grayscale(0.8);
  box-shadow: none;
  cursor: not-allowed;
}

@keyframes guestUpgradeBounce {
  0%, 100% {
    transform: translateY(0) scale(1);
  }

  50% {
    transform: translateY(-3px) scale(1.025);
  }
}

/* =========================================
   GLOBAL EFFECT LAYER
========================================= */

.effect-layer {
  position: fixed;

  left: 50%;
  top: 0;

  transform: translateX(-50%);

  width: min(430px, 100vw);
  height: 100dvh;

  pointer-events: none;

  overflow: hidden;

  z-index: 20000;

  background: transparent;
  contain: strict;
}

/* einzelne effekt container */
.lounge-upgrade-effect,
.prestige-effect {
  position: absolute;
  inset: 0;

  width: 100%;
  height: 100%;

  pointer-events: none;
  background: transparent;
}

/* canvas / fireworks */
.effect-layer canvas,
.lounge-upgrade-effect canvas,
.prestige-effect canvas {
  position: absolute;
  inset: 0;

  width: 100% !important;
  height: 100% !important;

  background: transparent !important;
  pointer-events: none;
}

/* verhindert schwarzen hintergrund */
.fireworks-container,
.confetti-container {
  background: transparent !important;
}

/* wichtig für mobile portrait */
@media (orientation: landscape) {
  .effect-layer {
    height: 100dvh;
  }
}

:root {
  --floating-base-bottom: calc(
    var(--bottom-nav-height) +
    var(--cash-action-height) +
    24px +
    var(--safe-bottom)
  );
}

.left-floating-stack {
  position: absolute;
  left: 8px;
  bottom: calc(100% + var(--floating-gap));

  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--floating-gap);

  pointer-events: auto;
  z-index: 95;
}

.left-floating-row {
  display: flex;
  align-items: center;
  gap: var(--floating-gap);
}

.shop-floating-wrap {
  position: absolute;
  right: 8px;
  bottom: calc(100% + var(--floating-gap));

  width: auto;
  height: auto;
  pointer-events: none;
  z-index: 95;

  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--floating-gap);
}

.active-ad-bonus-icons {
  position: static;
  order: 1;

  display: flex;
  flex-direction: column-reverse;
  align-items: center;
  gap: 6px;

  pointer-events: none;
}

.active-ad-bonus-pill {
  display: flex;
  align-items: center;
  gap: 5px;
  animation: adBonusIconFloat 1.8s ease-in-out infinite;
}

.active-ad-bonus-timer {
  min-width: 38px;
  padding: 4px 6px;
  border-radius: 999px;
  background: rgba(20, 17, 27, 0.92);
  border: 1px solid rgba(255,255,255,0.14);
  color: var(--accent-2);
  font-size: 10px;
  font-weight: 900;
  text-align: center;
}

.active-friend-bonus-icons {
  position: static;
  order: -1;

  display: flex;
  flex-direction: column-reverse;
  align-items: flex-start;
  gap: 6px;

  pointer-events: none;
}

.active-friend-bonus-icons:empty {
  display: none;
}

.active-friend-bonus-pill {
  display: flex;
  align-items: center;
  gap: 5px;
  animation: adBonusIconFloat 1.8s ease-in-out infinite;
}

.active-friend-bonus-icon {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;

  border-radius: 999px;
  background:
    radial-gradient(circle at 35% 25%, rgba(255,255,255,0.22), transparent 38%),
    linear-gradient(135deg, rgba(115,240,207,0.24), rgba(184,140,255,0.26)),
    rgba(20, 17, 27, 0.94);

  border: 1px solid rgba(115,240,207,0.32);

  box-shadow:
    0 6px 16px rgba(0,0,0,0.45),
    0 0 14px rgba(115,240,207,0.20),
    inset 0 1px 1px rgba(255,255,255,0.12);

  font-size: 16px;
  font-weight: 900;
}

.active-friend-bonus-timer {
  min-width: 38px;
  padding: 4px 6px;
  border-radius: 999px;
  background: rgba(20, 17, 27, 0.92);
  border: 1px solid rgba(255,255,255,0.14);
  color: var(--accent-2);
  font-size: 10px;
  font-weight: 900;
  text-align: center;
}

.floating-quest-button {
  position: relative;
  order: 0;
  z-index: 96;
}

.bottom-floating-row {
  order: 3;
  display: flex;
  align-items: flex-end;
  gap: var(--floating-gap);
}

.right-floating-column {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--floating-gap);
  pointer-events: auto;
}

.shop-floating-button,
.chest-floating-button,
.floating-quest-button,
.social-floating-button,
.gem-floating-button,
.equipment-floating-button,
.location-floating-button,
.leaderboard-floating-button,
.vip-battle-floating-button {
  width: var(--floating-size);
  height: var(--floating-size);

  display: grid;
  place-items: center;

  border: 0;
  border-radius: clamp(15px, 4vw, 18px);

  color: white;
  background:
  linear-gradient(135deg, rgba(20, 17, 32, 0.92), rgba(38, 24, 58, 0.94));
  border: 1px solid rgba(184,140,255,0.42);

  box-shadow:
  0 12px 30px rgba(0,0,0,0.55),
  0 0 24px rgba(184,140,255,0.34),
  inset 0 1px 1px rgba(255,255,255,0.12);

  font-size: clamp(21px, 5.8vw, 24px);
  font-weight: 900;
  cursor: pointer;
  pointer-events: auto;
  touch-action: manipulation;
    position: relative;
  overflow: visible;
}

.chest-floating-button.hidden,
.shop-floating-wrap.hidden,
.floating-quest-button.hidden,
.social-floating-button.hidden,
.gem-floating-button.hidden,
.equipment-floating-button.hidden,
.location-floating-button.hidden,
.vip-battle-floating-button.hidden {
  display: none;
}

.shop-floating-wrap.hidden {
  display: none;
}

.active-ad-bonus-icons:empty {
  display: none;
}

.active-ad-bonus-icon {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: rgba(20, 17, 27, 0.92);
  border: 1px solid rgba(255,255,255,0.16);
  box-shadow:
    0 8px 20px rgba(0,0,0,0.32),
    0 0 18px rgba(115,240,207,0.18);
  font-size: 18px;
}

.active-ad-bonus-icon:nth-child(2) {
  animation-delay: 0.16s;
}

.active-ad-bonus-icon:nth-child(3) {
  animation-delay: 0.32s;
}

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

  50% {
    transform: translateY(-5px) scale(1.08);
    opacity: 1;
  }
}

.shop-backdrop {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 18px;
  background: rgba(0,0,0,0.72);
  backdrop-filter: blur(12px);
  z-index: 21000;
}

.ad-placeholder-backdrop {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 18px;
  background: rgba(0,0,0,0.78);
  backdrop-filter: blur(14px);
  z-index: 30000;
}

.shop-backdrop.show,
.ad-placeholder-backdrop.show {
  display: flex;
}

.shop-card,
.ad-placeholder-card {
  width: min(390px, 100%);
  background: linear-gradient(180deg, #241e30, #14111b);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 26px;
  padding: 16px;
  box-shadow: 0 24px 80px rgba(0,0,0,0.62);
}

.shop-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.shop-header h2,
.ad-placeholder-card h2 {
  margin: 0;
  font-size: 21px;
}

.shop-tabs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 12px;
}

.shop-tab {
  border: 0;
  border-radius: 15px;
  padding: 11px;
  color: var(--muted);
  background: var(--card-2);
  border: 1px solid rgba(255,255,255,0.08);
  font-weight: 900;
  cursor: pointer;
}

.shop-tab.active {
  color: var(--accent-2);
  background: rgba(115,240,207,0.13);
  border-color: rgba(115,240,207,0.35);
}

.shop-content {
  display: none;
}

.shop-content.active {
  display: grid;
  gap: 10px;
}

.shop-resource-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;

  padding: 11px 13px;
  border-radius: 16px;

  background: rgba(255, 209, 102, 0.09);
  border: 1px solid rgba(255, 209, 102, 0.22);

  color: var(--muted);
  font-size: 13px;
  font-weight: bold;
}

.shop-resource-bar strong {
  color: var(--gold);
  font-size: 16px;
}

.shop-offer {
  background: rgba(255,255,255,0.045);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 18px;
  padding: 13px;
}

.shop-offer.locked {
  opacity: 0.6;
}

.shop-offer h3 {
  margin: 0 0 5px;
  font-size: 16px;
}

.shop-offer p {
  margin: 0 0 10px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.35;
}

.shop-offer button,
#closeAdPlaceholderButton {
  width: 100%;
  border: 0;
  border-radius: 16px;
  padding: 12px;
  color: white;
  background: linear-gradient(135deg, var(--accent), #6954ff);
  font-weight: 900;
  cursor: pointer;
}

.shop-offer button:disabled,
#closeAdPlaceholderButton:disabled {
  opacity: 0.45;
  filter: grayscale(0.6);
  cursor: not-allowed;
}

.ad-placeholder-card {
  text-align: center;
  animation: eventPopup 0.35s ease-out;
}

.ad-badge {
  display: inline-block;
  margin-bottom: 12px;
  padding: 7px 12px;
  border-radius: 999px;
  color: var(--gold);
  background: rgba(255,209,102,0.12);
  border: 1px solid rgba(255,209,102,0.24);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 1px;
}

.ad-placeholder-card p {
  color: var(--muted);
  font-size: 14px;
  line-height: 1.45;
}

.ad-countdown {
  width: 150px;
  height: 150px;
  margin: 18px auto;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: radial-gradient(circle, rgba(115,240,207,0.16), rgba(184,140,255,0.12));
  border: 2px solid rgba(115,240,207,0.34);
  box-shadow: 0 0 32px rgba(115,240,207,0.16);
}

.ad-countdown span {
  display: block;
  font-size: 52px;
  font-weight: 900;
  color: white;
  line-height: 1;
}

.ad-countdown small {
  display: block;
  color: var(--muted);
  font-size: 11px;
  margin-top: -18px;
}

.stat-value.ad-boost-active,
.research-status-value.ad-boost-active {
  color: #ff4d6d !important;
  text-shadow:
    0 0 8px rgba(255, 77, 109, 0.9),
    0 0 18px rgba(255, 77, 109, 0.55);
  animation: adBoostPulse 1s ease-in-out infinite;
}

@keyframes adBoostPulse {
  0%, 100% {
    transform: scale(1);
    opacity: 1;
  }

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

.ad-placeholder-backdrop {
  z-index: 999999 !important;
}

.ad-placeholder-backdrop.show {
  display: flex;
}

.layout-stage {
  position: relative;
  width: 100%;
  height: 100%;
}

/* Feste Objekt-Layer */
.layout-stage .lounge-door,
.layout-stage .cash-register,
.layout-stage .bar-object,
.layout-stage .kitchen-object {
  z-index: 20;
}

.custom-table-layout {
  display: block;
  position: relative;
  width: 100%;
  height: 100%;
  overflow: visible;
  padding: 6px;
}

.custom-table-layout .table-spot {
  position: absolute;
  left: var(--table-x);
  top: var(--table-y);
  transform: translate(-50%, -50%);
}

.layout-stage .cash-register {
  left: var(--register-x);
  top: var(--register-y);
  transform: translate(-50%, -50%);
}

.layout-stage .bar-object {
  left: calc(var(--bar-x) + 24px);
  top: calc(var(--bar-y) - 4px);

  right: auto;
  transform: translate(-42%, -50%);
}

.layout-stage .kitchen-object {
  left: calc(var(--bar-x) - 135px);
  top: calc(var(--bar-y) - 3px);

  transform: translate(-50%, -50%);
}

.lounge-layout-legendary .table-core,
.lounge-layout-royal .table-core,
.lounge-layout-dynasty .table-core {
  font-size: 8px;
}

#researchStatusLabel.ad-boost-active {
  color: #ff4d6d;
  text-shadow: 0 0 10px rgba(255, 77, 109, 0.8);
  animation: researchTurboPulse 0.9s ease-in-out infinite;
}

@keyframes researchTurboPulse {
  0%, 100% {
    transform: scale(1);
    opacity: 1;
  }

  50% {
    transform: scale(1.06);
    opacity: 0.75;
  }
}

.cloud-login-modal {
  max-width: 420px;
}

.cloud-login-hero {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 14px;
  margin-bottom: 14px;
  border-radius: 18px;
  background: rgba(120, 180, 255, 0.1);
  border: 1px solid rgba(120, 180, 255, 0.22);
}

.cloud-login-icon {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 16px;
  background: rgba(120, 180, 255, 0.16);
  font-size: 24px;
  flex-shrink: 0;
}

.cloud-login-hero strong {
  display: block;
  color: #fff;
  font-size: 15px;
  margin-bottom: 3px;
}

.cloud-login-hero span {
  display: block;
  color: rgba(255, 255, 255, 0.68);
  font-size: 12px;
  line-height: 1.35;
}

.cloud-login-fields {
  display: grid;
  gap: 12px;
  margin-bottom: 14px;
}

.cloud-login-fields label {
  display: grid;
  gap: 6px;
  color: rgba(255, 255, 255, 0.72);
  font-size: 12px;
  font-weight: 700;
}

.cloud-login-fields input {
  width: 100%;
  padding: 13px 14px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  font-size: 15px;
  outline: none;
}

.cloud-login-fields input:focus {
  border-color: rgba(120, 180, 255, 0.65);
  box-shadow: 0 0 0 3px rgba(120, 180, 255, 0.14);
}

.cloud-login-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.cloud-login-btn {
  border: 0;
  border-radius: 16px;
  padding: 13px 10px;
  font-weight: 900;
  cursor: pointer;
}

.cloud-login-btn.primary {
  background: linear-gradient(135deg, #73d7ff, #8f7cff);
  color: #10101a;
}

.cloud-login-btn.secondary {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.16);
}

.cloud-login-note {
  margin: 12px 0 0;
  color: rgba(255, 255, 255, 0.58);
  font-size: 12px;
  line-height: 1.35;
}

.legal-modal {
  max-height: 78vh;
}

.legal-content {
  overflow-y: auto;
  max-height: 60vh;

  display: flex;
  flex-direction: column;
  gap: 10px;

  padding-right: 4px;
}

.legal-content h3 {
  margin: 6px 0 0;
  font-size: 14px;
  color: var(--accent-2);
}

.legal-content p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}

@media (max-width: 430px) {
  .side-info-btn {
    width: 42px;
    height: 42px;
    font-size: 20px;
  }
}



/* Patch für kleine Handy-Screens */
@media (max-width: 430px) and (max-height: 820px) {
  
:root {
  --lounge-height: clamp(255px, 43dvh, 380px);
}

.phone-game {
    gap: 4px;
    padding-left: 10px;
    padding-right: 10px;
  }

  .topbar {
    transform: scale(0.93);
    transform-origin: top center;
    margin-top: -2px;
    margin-bottom: -8px;
  }

  .title h1 {
    font-size: 20px;
  }

  .title span {
    font-size: 10px;
  }

  .header-lounge-pill {
    min-width: 112px;
    padding: 4px 8px;
  }

  .settings-btn {
    width: 31px;
    height: 31px;
    font-size: 15px;
    border-radius: 11px;
  }

  .stats {
    gap: 4px;
  }

  .stat {
    padding: 5px 6px;
    border-radius: 13px;
  }

  .stat-label {
    font-size: 10px;
  }

  .stat-value {
    font-size: 15px;
  }

  .cash-gem-card {
    min-height: 42px;
  }

  .gem-grid {
    top: 4px;
    left: 88px;
    transform: scale(0.92);
    transform-origin: top left;
  }

  .vibe-card,
  .tables-research-card {
    gap: 4px;
  }

  .recommendation-bar {
    min-height: 58px;
    padding: 6px 8px;
    border-radius: 14px;
    gap: 6px;
  }

  .recommendation-label {
    font-size: 9px;
  }

  .recommendation-title {
    font-size: 12px;
    line-height: 1.15;
  }

  .recommendation-detail {
    font-size: 9px;
    line-height: 1.15;
  }

  .recommendation-cost {
    font-size: 10px;
    padding: 6px 8px;
  }

  .layout-stage {
    min-height: 160px;
  }

  .side-info-btn {
    width: 38px;
    height: 38px;
    font-size: 18px;
    border-radius: 12px;
    top: 10px;
  }

  .side-score-pill {
    min-width: 42px;
    height: 30px;
    font-size: 11px;
    padding: 0 6px;
    top: 14px;
  }

  #readinessButton {
    left: 6px !important;
  }

  #readinessScorePill {
    left: 48px !important;
  }

  #performanceButton {
    right: 6px !important;
  }

  #performanceScorePill {
    right: 48px !important;
  }

  .prestige-button {
    top: 14px;
    width: 38px;
    height: 30px;
    font-size: 13px;
  }

  .main-button,
  .secondary-button {
    padding: 12px;
    font-size: 15px;
    border-radius: 19px;
  }

 .social-floating-button,
.gem-floating-button {
  margin: 0;
}

  .shop-floating-button {
    width: 44px;
    height: 44px;
    font-size: 21px;
    border-radius: 15px;
  }


  .active-ad-bonus-icon {
    width: 28px;
    height: 28px;
    font-size: 16px;
  }

  .bottom-nav-wrap {
    bottom: calc(6px + var(--safe-bottom));
    width: min(430px, calc(100vw - 14px));
  }

  .bottom-nav {
    gap: 5px;
    padding: 6px;
    border-radius: 21px;
  }

  .bottom-tab {
    min-height: 45px;
    padding: 5px 2px;
    font-size: 9px;
    border-radius: 14px;
  }

  .bottom-tab strong {
    font-size: 15px;
  }

  .bottom-tab.home-tab {
    min-height: 51px;
    margin-top: -6px;
    border-radius: 17px;
  }
}

/* Noch enger für sehr kleine sichtbare Höhen, z.B. iPhone Browser mit Leisten */
@media (max-width: 430px) and (max-height: 760px) {

:root {
  --lounge-height: clamp(245px, 42dvh, 350px);
}  

.phone-game {
    gap: 3px;
    padding-top: calc(7px + var(--safe-top));
  }

  .topbar {
    transform: scale(0.9);
    margin-bottom: -11px;
  }

  .stat {
    padding: 4px 5px;
  }

  .stat-value {
    font-size: 14px;
  }

  .recommendation-bar {
    min-height: 52px;
    padding: 5px 7px;
  }

  .recommendation-detail {
    display: none;
  }

  .main-button,
  .secondary-button {
    padding: 11px;
    font-size: 14px;
  }

  .bottom-tab {
    min-height: 42px;
  }

  .bottom-tab.home-tab {
    min-height: 48px;
  }

}
.loading-screen {
  position: fixed;
  inset: 0;
  z-index: 99999999;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.loading-screen.hidden {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s ease;
}

.loading-screen-bg {
  position: absolute;
  inset: 0;

  width: 100%;
  height: 100%;

  max-width: 100%;
  max-height: 100%;

  object-fit: contain;
  object-position: center center;

  transform: scale(1);
}

.loading-ui {
  position: absolute;
  left: 50%;
  bottom: calc(44px + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  width: min(360px, calc(100vw - 44px));
  text-align: center;
  color: white;
  z-index: 2;
}

.loading-text {
  font-size: 16px;
  font-weight: 800;
  margin-bottom: 14px;
  text-shadow: 0 3px 12px rgba(0,0,0,0.9);
}

.loading-bar {
  height: 14px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(255,255,255,0.16);
  border: 1px solid rgba(255,255,255,0.28);
}

.loading-bar-fill {
  height: 100%;
  width: 0%;
  border-radius: inherit;
  background: linear-gradient(90deg, #73f0cf, #8bdcff);
  animation: loadingFill 5s linear forwards;
}

@keyframes loadingFill {
  from { width: 0%; }
  to { width: 100%; }
}

.shop-floating-button.locked-tab,
.chest-floating-button.locked-tab,
.floating-quest-button.locked-tab,
.social-floating-button.locked-tab,
.gem-floating-button.locked-tab,
.equipment-floating-button.locked-tab,
.location-floating-button.locked-tab,
.leaderboard-floating-button.locked-tab {
  opacity: 0.48;
  filter: grayscale(1) brightness(0.72);
  box-shadow: none;
}

.social-floating-button.hidden,
.gem-floating-button.hidden,
.equipment-floating-button.hidden,
.location-floating-button.hidden {
  display: none;
}

.team-tabs {
  grid-template-columns: repeat(3, 1fr);
}

.collection-list,
.management-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

.management-card {
  display: grid;
  grid-template-columns: 54px 1fr;
  gap: 10px;
  align-items: center;
  padding: 12px;
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(36,30,48,0.94), rgba(20,17,27,0.98));
  border: 1px solid rgba(255,255,255,0.08);
}

.management-card-icon {
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  border-radius: 16px;
  background: rgba(0,0,0,0.22);
  border: 1px solid rgba(255,255,255,0.1);
  font-size: 26px;
}

.management-card-body h3 {
  margin: 0 0 3px;
  font-size: 15px;
}

.management-card-body p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
}

.management-card-body span {
  display: block;
  margin-top: 5px;
  color: var(--accent-2);
  font-size: 11px;
  font-weight: bold;
}

.management-card.locked {
  opacity: 0.48;
  filter: grayscale(0.8);
}

.management-card.common {
  border-color: rgba(255,255,255,0.12);
}

.management-card.rare {
  border-color: rgba(77,163,255,0.45);
}

.management-card.epic {
  border-color: rgba(184,140,255,0.55);
}

.management-card.legendary {
  border-color: rgba(255,209,102,0.65);
  box-shadow: 0 0 18px rgba(255,209,102,0.14);
}

.management-card.active-manager {
  border-color: rgba(115,240,207,0.75);
  box-shadow: 0 0 18px rgba(115,240,207,0.18);
}

.manager-activate-btn {
  margin-top: 9px;
  border: 0;
  border-radius: 14px;
  padding: 9px 12px;
  color: var(--text);
  background: var(--card-2);
  border: 1px solid rgba(255,255,255,0.1);
  font-weight: bold;
  cursor: pointer;
}

.manager-activate-btn.active {
  color: var(--accent-2);
  background: rgba(115,240,207,0.14);
  border-color: rgba(115,240,207,0.38);
}

.manager-activate-btn:active {
  transform: scale(0.97);
}

.manager-action-row {
  display: grid;
  grid-template-columns: 1fr 1.25fr;
  gap: 8px;
  margin-top: 9px;
}

.manager-training-info,
.manager-training-cost {
  display: block;
  margin-top: 5px;
  color: var(--accent-2);
  font-size: 11px;
  font-weight: bold;
  line-height: 1.3;
}

.manager-training-cost {
  color: var(--gold);
}

.manager-training-btn {
  position: relative;
  overflow: hidden;
  border: 0;
  border-radius: 14px;
  padding: 9px 10px;
  color: var(--text);
  background: rgba(184,140,255,0.12);
  border: 1px solid rgba(184,140,255,0.35);
  font-weight: bold;
  cursor: pointer;
}

.manager-training-btn span {
  position: relative;
  z-index: 2;
}

.manager-training-btn.training::before {
  content: "";
  position: absolute;
  inset: 0;
  width: var(--training-progress, 0%);
  background: linear-gradient(90deg, rgba(115,240,207,0.25), rgba(184,140,255,0.45));
  z-index: 1;
}

.manager-training-btn:disabled {
  opacity: 0.45;
  filter: grayscale(0.55);
  cursor: not-allowed;
}

.manager-training-btn:active:not(:disabled) {
  transform: scale(0.97);
}

.floating-quest-button.hidden {
  display: none;
}

@keyframes questPulse {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.08);
  }

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

.manager-info-box {
  display: grid;
  gap: 6px;
  margin-top: 8px;
}

.manager-info-row,
.manager-cost-box {
  display: grid;
  gap: 2px;
  padding: 7px 9px;
  border-radius: 12px;
  background: rgba(255,255,255,0.045);
  border: 1px solid rgba(255,255,255,0.08);
}

.manager-info-row span,
.manager-cost-box span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.35px;
}

.manager-info-row strong {
  color: var(--text);
  font-size: 12px;
  line-height: 1.2;
}

.manager-info-row.bonus-current strong {
  color: var(--accent-2);
}

.manager-info-row.bonus-next strong {
  color: var(--gold);
}

.manager-info-row.maxed strong {
  color: var(--muted);
}

.manager-cost-box strong {
  color: var(--gold);
  font-size: 11px;
  line-height: 1.35;
}

.daily-quest-modal-card {
  width: min(430px, calc(100vw - 24px));
}

.daily-quest-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 12px;
}

.daily-quest-entry {
  background: rgba(255,255,255,0.05);

  border: 1px solid rgba(255,255,255,0.08);

  border-radius: 16px;

  padding: 14px;
}

.daily-quest-entry.completed {
  border-color: #3ddc84;
}

.daily-quest-progress {
  margin-top: 10px;
}

.daily-quest-progress-bar {
  height: 10px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(255,255,255,0.08);
}

.daily-quest-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #ffcc4d, #ff9f1a);
}

.daily-overall-card {
  padding: 14px;
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(115,240,207,0.12), rgba(184,140,255,0.10));
  border: 1px solid rgba(115,240,207,0.22);
}

.daily-overall-head {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  font-weight: bold;
  margin-bottom: 10px;
}

.daily-overall-head span {
  color: var(--accent-2);
}

.daily-overall-bar {
  height: 12px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(255,255,255,0.08);
}

.daily-overall-fill {
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--accent-2), var(--accent));
}

.daily-milestone-list {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}

.daily-milestone {
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 9px;
  align-items: center;
  opacity: 0.45;
}

.daily-milestone.reached {
  opacity: 1;
}

.daily-milestone.claimed {
  opacity: 0.75;
}

.daily-milestone-icon {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: rgba(0,0,0,0.22);
  border: 1px solid rgba(255,255,255,0.1);
}

.daily-milestone strong {
  display: block;
  font-size: 12px;
}

.daily-milestone span {
  display: block;
  color: var(--muted);
  font-size: 11px;
  margin-top: 2px;
}

.daily-quest-section-title {
  margin-top: 12px;
  color: var(--accent-2);
  font-size: 12px;
  font-weight: bold;
}

.daily-quest-modal-card {
  max-height: min(860px, 94vh);
}

.daily-quest-list {
  max-height: none;
  overflow: visible;
}

.daily-overall-card.compact {
  margin-bottom: 10px;
}

.milestone-bar {
  position: relative;
  overflow: visible;
  margin: 18px 8px 8px;
}

.daily-bar-milestone {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 31px;
  height: 31px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(20,17,27,0.96);
  color: var(--muted);
  font-size: 14px;
  display: grid;
  place-items: center;
  opacity: 0.55;
  z-index: 3;
  display: flex;
align-items: center;
justify-content: center;
line-height: 1;
padding: 0;
}

.daily-bar-milestone.reached {
  opacity: 1;
  color: var(--accent-2);
  border-color: rgba(115,240,207,0.6);
  box-shadow: 0 0 14px rgba(115,240,207,0.28);
  cursor: pointer;
}

.daily-bar-milestone.claimed {
  color: var(--gold);
  border-color: rgba(255,209,102,0.5);
  opacity: 0.8;
}

.daily-bar-milestone:disabled {
  cursor: default;
}

.daily-quest-scroll-area {
  padding-right: 3px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.daily-quest-entry.compact {
  padding: 10px;
}

.daily-quest-compact-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  align-items: center;
}

.daily-quest-compact-row span {
  color: var(--text);
  font-size: 12px;
  font-weight: bold;
}

.daily-quest-compact-row strong {
  color: var(--accent-2);
  font-size: 11px;
  white-space: nowrap;
}

.floating-quest-button.has-reward,
.chest-floating-button.has-reward {
  border-color: rgba(255,209,102,0.95);
  box-shadow:
    0 12px 28px rgba(0,0,0,0.32),
    0 0 22px rgba(255,209,102,0.7);
}

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

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

.left-floating-stack,
.shop-floating-wrap {
  animation: socialFloat 2.4s ease-in-out infinite;
  animation-delay: 0s;
}

.reward-backdrop {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 18px;
  background: rgba(0,0,0,0.66);
  backdrop-filter: blur(12px);
  z-index: 1000000;
}

.reward-backdrop.show {
  display: flex;
}

.reward-card {
  position: relative;
  width: min(360px, 100%);
  overflow: hidden;
  text-align: center;
  padding: 22px 18px 16px;
  border-radius: 28px;
  background: linear-gradient(180deg, rgba(36,30,48,0.98), rgba(15,13,20,0.98));
  border: 1px solid rgba(255,255,255,0.14);
  box-shadow: 0 26px 90px rgba(0,0,0,0.65);
  animation: rewardPop 0.28s ease-out;
}

.reward-card.common { border-color: rgba(255,255,255,0.18); }
.reward-card.rare { border-color: rgba(115,240,207,0.55); box-shadow: 0 0 32px rgba(115,240,207,0.22), 0 26px 90px rgba(0,0,0,0.65); }
.reward-card.epic { border-color: rgba(184,140,255,0.7); box-shadow: 0 0 36px rgba(184,140,255,0.32), 0 26px 90px rgba(0,0,0,0.65); }
.reward-card.legendary { border-color: rgba(255,209,102,0.85); box-shadow: 0 0 42px rgba(255,209,102,0.42), 0 26px 90px rgba(0,0,0,0.65); }

.reward-glow {
  position: absolute;
  inset: -80px;
  background: radial-gradient(circle, rgba(115,240,207,0.18), transparent 58%);
  pointer-events: none;
}

.reward-card.epic .reward-glow {
  background: radial-gradient(circle, rgba(184,140,255,0.24), transparent 58%);
}

.reward-card.legendary .reward-glow {
  background: radial-gradient(circle, rgba(255,209,102,0.32), transparent 58%);
}

.reward-icon {
  position: relative;
  width: 86px;
  height: 86px;
  margin: 0 auto 12px;
  display: grid;
  place-items: center;
  border-radius: 28px;
  background: rgba(0,0,0,0.26);
  border: 1px solid rgba(255,255,255,0.12);
  font-size: 46px;
  box-shadow: inset 0 0 24px rgba(255,255,255,0.04);
}

.reward-label {
  position: relative;
  color: var(--accent-2);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.reward-card h2 {
  position: relative;
  margin: 6px 0 6px;
  font-size: 24px;
}

.reward-card p {
  position: relative;
  margin: 0 0 16px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.4;
}

.reward-confirm {
  position: relative;
  width: 100%;
  border: 0;
  border-radius: 18px;
  padding: 13px;
  color: white;
  font-size: 15px;
  font-weight: 900;
  background: linear-gradient(135deg, var(--accent-2), var(--accent));
  box-shadow: 0 14px 34px rgba(115,240,207,0.22);
  cursor: pointer;
}

@keyframes rewardPop {
  from {
    opacity: 0;
    transform: translateY(18px) scale(0.92);
  }

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

.chest-backdrop {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 18px;
  background: rgba(0,0,0,0.62);
  backdrop-filter: blur(12px);
  z-index: 100000;
}

.chest-backdrop.show {
  display: flex;
}

.chest-card {
  width: min(390px, 100%);
  max-height: min(620px, 82vh);
  overflow: hidden;
  background: linear-gradient(180deg, rgba(36,30,48,0.98), rgba(15,13,20,0.98));
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 24px;
  padding: 14px;
  box-shadow: 0 24px 80px rgba(0,0,0,0.58);
}

.chest-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.chest-header h2 {
  margin: 0;
  font-size: 20px;
}

.chest-subtitle {
  margin: 8px 0 12px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.chest-list {
  display: grid;
  gap: 10px;
  max-height: 62vh;
  overflow-y: auto;
  padding-right: 3px;
}

.chest-entry {
  display: grid;
  grid-template-columns: 54px 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 11px;
  border-radius: 18px;
  background: rgba(255,255,255,0.045);
  border: 1px solid rgba(255,255,255,0.08);
}

.chest-entry.rare {
  border-color: rgba(115,240,207,0.28);
}

.chest-entry.epic {
  border-color: rgba(184,140,255,0.38);
}

.chest-entry.legendary {
  border-color: rgba(255,209,102,0.42);
}

.chest-entry-icon {
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  border-radius: 17px;
  background: rgba(0,0,0,0.22);
  border: 1px solid rgba(255,255,255,0.1);
  font-size: 28px;
}

.chest-entry-body h3 {
  margin: 0 0 3px;
  font-size: 14px;
}

.chest-entry-body p {
  margin: 0;
  color: var(--muted);
  font-size: 11px;
}

.chest-entry-count {
  display: inline-block;
  margin-top: 6px;
  color: var(--accent-2);
  font-size: 11px;
  font-weight: bold;
}

.chest-open-btn {
  border: 0;
  border-radius: 14px;
  padding: 10px 11px;
  color: white;
  font-weight: 900;
  background: linear-gradient(135deg, var(--accent-2), var(--accent));
  cursor: pointer;
}

.chest-open-btn:disabled {
  opacity: 0.35;
  filter: grayscale(0.7);
  cursor: not-allowed;
}

.bottom-tab.performance-alert {
  color: var(--danger);
  border-color: rgba(255, 122, 144, 0.9);
  box-shadow:
    inset 0 1px 2px rgba(255,255,255,0.08),
    0 0 18px rgba(255, 77, 109, 0.65);
  animation: teamPerformancePulse 1.1s ease-in-out infinite;
}

@keyframes teamPerformancePulse {
  0%, 100% {
    box-shadow:
      inset 0 1px 2px rgba(255,255,255,0.08),
      0 0 10px rgba(255, 77, 109, 0.45);
  }

  50% {
    box-shadow:
      inset 0 1px 2px rgba(255,255,255,0.08),
      0 0 24px rgba(255, 77, 109, 0.95);
  }
}

@media (max-height: 700px) {
  :root {
    --lounge-height: clamp(240px, 38dvh, 330px);
    --floor-inset: 6px;
    --floor-top: 8px;
  }

  .table-area {
  left: clamp(48px, 14%, 60px);
  right: clamp(2px, 1%, 8px);

  top: clamp(68px, 23%, 80px);

  bottom: clamp(0px, 0%, 4px);

  overflow: visible;
  z-index: 9;
}

  .lounge-door {
  width: 58px;
  height: 76px;
}

  .cash-register {
    width: 54px;
    height: 25px;
  }

  .bar-object {
    width: 86px;
    height: 44px;
  }

  .lounge-bar {
  width: 104px;
  height: 52px;
}

  .kitchen-object {
    width: 24px;
    height: 74px;
  }
}

.chest-sprite-preview {
  background-repeat: no-repeat;
  background-size: 400% 200%;
  background-position: 0% 0%;
  font-size: 0;
}

.chest-opening-stage {
  display: grid;
  justify-items: center;
  gap: 14px;
  padding: 12px 0 4px;
  text-align: center;
}

.chest-sprite-big {
  position: relative;
  width: min(260px, 72vw);
  aspect-ratio: 1 / 1;
  border: 0;
  background-color: transparent;
  background-repeat: no-repeat;
  background-size: 400% 200%;
  background-position: 0% 0%;
  cursor: pointer;
  filter: drop-shadow(0 22px 28px rgba(0,0,0,0.45));
  touch-action: manipulation;
}

.chest-sprite-big.opening {
  animation: chestSpriteOpen 1s steps(1, end) forwards;
  pointer-events: none;
}

.chest-sprite-big.opened {
  background-position: 100% 100%;
  cursor: default;
}

@keyframes chestSpriteOpen {
  0% { background-position: 0% 0%; }
  12.5% { background-position: 33.333% 0%; }
  25% { background-position: 66.666% 0%; }
  37.5% { background-position: 100% 0%; }
  50% { background-position: 0% 100%; }
  62.5% { background-position: 33.333% 100%; }
  75% { background-position: 66.666% 100%; }
  87.5%, 100% { background-position: 100% 100%; }
}

.chest-opening-hint {
  color: var(--muted);
  font-size: 12px;
  font-weight: bold;
}

.chest-reward-on-sprite {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 68%;
  transform: translate(-50%, -50%);
  display: grid;
  gap: 4px;
  justify-items: center;
  padding: 10px;
  border-radius: 18px;
  background: rgba(15, 13, 20, 0.78);
  border: 1px solid rgba(255,255,255,0.16);
  box-shadow: 0 14px 34px rgba(0,0,0,0.35);
  pointer-events: none;
}

.chest-reward-on-sprite span {
  font-size: 28px;
  line-height: 1;
}

.chest-reward-on-sprite strong {
  color: var(--text);
  font-size: 14px;
}

.chest-reward-on-sprite small {
  color: var(--accent-2);
  font-size: 12px;
  font-weight: 900;
  line-height: 1.25;
}

.chest-reward-confirm {
  width: min(260px, 72vw);
  border: 0;
  border-radius: 18px;
  padding: 13px;
  color: white;
  font-size: 15px;
  font-weight: 900;
  background: linear-gradient(135deg, var(--accent-2), var(--accent));
  box-shadow: 0 14px 34px rgba(115,240,207,0.22);
  cursor: pointer;
}

.management-card.collection-card,
.management-card.manager-card {
  grid-template-columns: 74px 1fr;
  align-items: center;
}

.management-card-art-wrap {
  width: 68px;
  height: 92px;
  border-radius: 14px;
  overflow: hidden;
  background: rgba(0,0,0,0.25);
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: 0 10px 22px rgba(0,0,0,0.28);
}

.management-card-art {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.management-card-unknown {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  font-size: 28px;
  background: linear-gradient(180deg, rgba(36,30,48,0.95), rgba(15,13,20,0.95));
}

.management-card.collection-card.completed {
  border-color: rgba(115,240,207,0.75);
  box-shadow: 0 0 18px rgba(115,240,207,0.16);
}

.management-card.collection-card.locked .management-card-art-wrap {
  filter: grayscale(1);
  opacity: 0.65;
}

.management-card-art {
  cursor: pointer;
}

.management-card-art:active {
  transform: scale(0.96);
}

.card-preview-backdrop {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 10px;
  background: rgba(0,0,0,0.72);
  backdrop-filter: blur(12px);
  z-index: 10000;
}

.card-preview-backdrop.show {
  display: flex;
}

.card-preview-card {
  position: relative;
  width: min(520px, 98vw);
  max-height: 98dvh;
  display: grid;
  justify-items: center;
  gap: 10px;
  padding: 18px;
  border-radius: 32px;
  background: linear-gradient(180deg, rgba(36,30,48,0.98), rgba(15,13,20,0.98));
  border: 1px solid rgba(255,255,255,0.14);
  box-shadow: 0 28px 90px rgba(0,0,0,0.65);
  overflow: hidden;
}

.card-preview-image {
  width: min(430px, 92vw);
  max-height: 82dvh;
  object-fit: contain;
  border-radius: 24px;
}

.card-preview-close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 12px;
  color: var(--text);
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.12);
  font-size: 22px;
  font-weight: bold;
  cursor: pointer;
  z-index: 5;
}

.card-preview-info {
  text-align: center;
}

.card-preview-info h2 {
  margin: 0 0 4px;
  font-size: 18px;
}

.card-preview-info p {
  margin: 0 0 6px;
  color: var(--accent-2);
  font-weight: 900;
  font-size: 12px;
  text-transform: uppercase;
}

.card-preview-info strong {
  color: var(--gold);
  font-size: 13px;
}

.chest-opening-stage {
  display: grid;
  justify-items: center;
  gap: 14px;
  padding: 8px 0 4px;
  text-align: center;
}

.chest-opening-stage.card-reward-mode {
  gap: 8px;
}

.chest-reward-on-sprite.card-drop {
  width: auto;
  max-width: none;
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
  gap: 5px;
}

.chest-card-drop-image {
  width: min(250px, 66vw);
  max-height: 48dvh;
  object-fit: contain;
  border-radius: 20px;
  box-shadow: 0 18px 42px rgba(0,0,0,0.48);
  cursor: pointer;
}

.chest-reward-confirm {
  position: relative;
  z-index: 5;
  width: min(260px, 72vw);
  margin-top: 8px;
}

.chest-backdrop.show {
  display: flex;
}

.chest-card {
  width: min(390px, 94vw);
  max-height: min(96dvh, 720px);
  overflow: visible;
}

.chest-list {
  max-height: none;
  overflow: visible;
}

.chest-opening-stage.card-reward-mode {
  width: 100%;
  max-height: none;
  overflow: visible;
  gap: clamp(6px, 1.4dvh, 12px);
  padding-top: clamp(2px, 0.8dvh, 8px);
}

.chest-opening-stage.card-reward-mode .chest-sprite-big.opened {
  width: clamp(230px, 72vw, 330px);
  height: auto;
  min-height: 0;
  aspect-ratio: auto;
  background-image: none !important;
  filter: none;
}

.chest-opening-stage.card-reward-mode .chest-reward-on-sprite {
  position: static;
  transform: none;
}

.chest-opening-stage.card-reward-mode .chest-card-drop-image {
  width: clamp(210px, 68vw, 300px);
  max-height: clamp(330px, 58dvh, 560px);
  object-fit: contain;
}

.chest-opening-stage.card-reward-mode .chest-reward-confirm {
  width: clamp(210px, 68vw, 300px);
  margin-top: clamp(4px, 1dvh, 10px);
}

.random-event-backdrop.show {
  pointer-events: auto;
}

.random-event-backdrop.show ~ .cash-action-wrap,
.random-event-backdrop.show ~ .bottom-nav-wrap {
  pointer-events: none;
}

.name-entry-backdrop {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 18px;
  background: rgba(0,0,0,0.72);
  backdrop-filter: blur(12px);
  z-index: 100000;
}

.name-entry-backdrop.show {
  display: flex;
}

.name-entry-card {
  width: min(390px, 94vw);
  display: grid;
  justify-items: center;
  gap: 12px;
  padding: 22px;
  border-radius: 28px;
  background: linear-gradient(180deg, #241e30, #14111b);
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: 0 25px 80px rgba(0,0,0,0.62);
  text-align: center;
}

.name-entry-icon {
  width: 64px;
  height: 64px;
  display: grid;
  place-items: center;
  border-radius: 20px;
  background: rgba(115,240,207,0.12);
  border: 1px solid rgba(115,240,207,0.28);
  font-size: 32px;
}

.name-entry-card h2 {
  margin: 0;
  font-size: 22px;
}

.name-entry-card p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.4;
}

.name-entry-input {
  width: 100%;
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 18px;
  padding: 14px;
  background: rgba(255,255,255,0.08);
  color: var(--text);
  font-size: 16px;
  font-weight: 800;
  text-align: center;
  outline: none;
}

.name-entry-input:focus {
  border-color: rgba(115,240,207,0.65);
  box-shadow: 0 0 0 3px rgba(115,240,207,0.12);
}

.name-entry-button {
  width: 100%;
  border: 0;
  border-radius: 18px;
  padding: 14px;
  color: #10101a;
  background: linear-gradient(135deg, var(--accent-2), var(--accent));
  font-weight: 900;
  cursor: pointer;
}

.name-entry-error {
  min-height: 16px;
  color: var(--danger);
  font-size: 12px;
  font-weight: 800;
}

.shop-card {
  max-height: 88dvh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.shop-content.active {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  overflow-y: auto;
  max-height: calc(88dvh - 124px);
  padding-right: 2px;
  -webkit-overflow-scrolling: touch;
}

.shop-resource-bar {
  grid-column: 1 / -1;
}

#shopRealMoneyContent .shop-resource-bar {
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}

#shopRealMoneyContent .category-description {
  text-align: center;
  margin: 0 0 2px;
}

#shopRealMoneyContent .real-money-shop-list {
  width: 100%;
}

.shop-offer {
  min-width: 0;
  padding: 10px;
}

.shop-offer h3 {
  font-size: clamp(12px, 3.2vw, 15px);
}

.shop-offer p {
  font-size: clamp(10px, 2.6vw, 12px);
  line-height: 1.25;
}

.shop-offer button {
  padding: 10px 6px;
  font-size: clamp(10px, 2.7vw, 12px);
}

.chest-entry-actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
  align-items: center;
}

.chest-open-five-btn {
  color: var(--gold);
  background: rgba(255, 209, 102, 0.12);
  border-color: rgba(255, 209, 102, 0.28);
}

.chest-open-five-btn:disabled {
  opacity: 0.35;
  filter: grayscale(0.7);
}

.chest-reward-remaining {
  display: block;
  margin-top: 4px;
  color: var(--accent-2);
  font-size: 11px;
  font-style: normal;
  font-weight: 900;
}

.leaderboard-floating-button.hidden {
  display: none;
}

.leaderboard-floating-button:active {
  animation-play-state: paused;
  transform: translateY(0) scale(0.94);
}

.leaderboard-backdrop {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 18px;
  background: rgba(0,0,0,0.72);
  backdrop-filter: blur(12px);
  z-index: 22000;
}

.leaderboard-backdrop.show {
  display: flex;
}

.leaderboard-card {
  width: min(390px, 100%);
  max-height: 84dvh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: linear-gradient(180deg, #241e30, #14111b);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 26px;
  padding: 16px;
  box-shadow: 0 24px 80px rgba(0,0,0,0.62);
}

.leaderboard-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.leaderboard-header h2 {
  margin: 0;
  font-size: 20px;
}

.leaderboard-subtitle {
  margin: 8px 0 12px;
  color: var(--muted);
  font-size: 12px;
}

.leaderboard-list {
  display: grid;
  gap: 8px;
  overflow-y: auto;
  padding-right: 3px;
  -webkit-overflow-scrolling: touch;
}

.leaderboard-row {
  display: grid;
  grid-template-columns: 38px 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 10px;
  border-radius: 16px;
  background: rgba(255,255,255,0.045);
  border: 1px solid rgba(255,255,255,0.075);
}

.leaderboard-rank {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: #05040a;
  color: white;
  font-weight: 900;
  font-size: 13px;
}

.leaderboard-rank.rank-1 {
  background: linear-gradient(135deg, #ffd166, #ff9f1c);
  color: #201400;
}

.leaderboard-rank.rank-2 {
  background: linear-gradient(135deg, #b88cff, #6954ff);
  color: white;
}

.leaderboard-rank.rank-3 {
  background: linear-gradient(135deg, #e6e6e6, #9ca3af);
  color: #101014;
}

.leaderboard-name {
  min-width: 0;
}

.leaderboard-name strong {
  display: block;
  font-size: 13px;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.leaderboard-name span {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 11px;
}

.leaderboard-cash {
  color: var(--gold);
  font-size: 11px;
  font-weight: 900;
  white-space: nowrap;
}

.leaderboard-loading,
.leaderboard-empty {
  padding: 18px;
  text-align: center;
  color: var(--muted);
  font-size: 13px;
}

.credits-content {
  max-height: 70vh;
  overflow-y: auto;
}

#creditsText {
  white-space: pre-wrap;
  line-height: 1.5;
}

.credits-content pre {
  margin: 0;
  white-space: pre-wrap;
  word-break: break-word;
  color: var(--muted);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 11px;
  line-height: 1.45;
}

.credits-content pre { 
margin: 0; 
white-space: pre-wrap; 
word-break: break-word; 
font-family: inherit; 
font-size: 12px; 
line-height: 1.45; 
color: var(--text); 
max-height: 60vh; 
overflow-y: auto; 
-webkit-overflow-scrolling: touch; 
}

.header-lounge-pill {
  cursor: pointer;
  touch-action: manipulation;
}

.header-lounge-pill:active {
  transform: scale(0.97);
}

.lounge-progress-list {
  display: grid;
  gap: 9px;
}

.lounge-progress-entry {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 11px;
  border-radius: 16px;
  background: rgba(255,255,255,0.045);
  border: 1px solid rgba(255,255,255,0.08);
}

.lounge-progress-entry.current {
  border-color: rgba(115,240,207,0.45);
  box-shadow: 0 0 18px rgba(115,240,207,0.13);
}

.lounge-progress-entry.locked {
  opacity: 0.55;
  filter: grayscale(0.5);
}

.lounge-progress-main strong,
.lounge-progress-main span {
  display: block;
}

.lounge-progress-main span,
.lounge-progress-reward em {
  color: var(--muted);
  font-size: 11px;
  font-style: normal;
}

.lounge-progress-reward {
  display: grid;
  gap: 6px;
  justify-items: end;
  font-size: 11px;
  font-weight: bold;
}

.lounge-claim-btn {
  border: 0;
  border-radius: 999px;
  padding: 7px 10px;
  color: white;
  background: linear-gradient(135deg, var(--accent-2), var(--accent));
  font-weight: 900;
  cursor: pointer;
}

.object-label {
  position: absolute;
  padding: 4px 10px;

  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.45px;

  color: #fff;

  background: rgba(10, 10, 14, 0.72);

  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 999px;

  white-space: nowrap;
  pointer-events: none;

  backdrop-filter: blur(10px);

  z-index: 500;

  box-shadow:
    0 6px 18px rgba(0,0,0,0.58),
    0 0 18px rgba(120,180,255,0.22),
    0 0 30px rgba(0,0,0,0.35);
}

.object-label-register {
  left: var(--register-x);
  top: var(--register-y);
  transform: translate(-50%, calc(-50% - 34px));
}

.object-label-bar {
  left: var(--bar-x);
  top: var(--bar-y);

  transform:
    translate(-50%, calc(-50% - 51px))
    translateX(10px);
}

.object-label-kitchen {
  left: calc(var(--bar-x) - 135px);
  top: var(--bar-y);

  transform:
    translate(-50%, calc(-50% - 51px));
}

.lounge-reward-chest {
  display: flex;
  align-items: center;
  justify-content: center;
}

.lounge-reward-chest-sprite {
  width: 54px;
  height: 54px;

  flex: 0 0 54px;

  background-repeat: no-repeat;
  background-size: 400% 200%;
  background-position: 0% 0%;

  image-rendering: pixelated;

  filter:
    drop-shadow(0 6px 12px rgba(0,0,0,0.45));
}

.header-lounge-pill.has-reward {
  border-color: rgba(255,209,102,0.95);
  box-shadow:
    0 12px 28px rgba(0,0,0,0.32),
    0 0 22px rgba(255,209,102,0.7);

  animation: loungeHeaderRewardPulse 1.15s ease-in-out infinite;
  transform-origin: center;
}

.header-lounge-pill.has-reward .header-lounge-type {
  color: var(--gold);
}

@keyframes loungeHeaderRewardPulse {
  0%, 100% {
    transform: scale(1);
    box-shadow:
      0 12px 28px rgba(0,0,0,0.32),
      0 0 16px rgba(255,209,102,0.45);
  }

  50% {
    transform: scale(1.045);
    box-shadow:
      0 14px 34px rgba(0,0,0,0.38),
      0 0 34px rgba(255,209,102,0.95);
  }
}



/* =========================================
   IDLE CLOUDS MODAL THEME PATCH
========================================= */

.info-modal,
.random-event-card,
.research-confirm-card,
.intro-card,
.prestige-card,
.character-select-card,
.offline-income-card,
.shop-card,
.ad-placeholder-card,
.reward-card,
.chest-card,
.card-preview-card,
.name-entry-card,
.leaderboard-card {
  background:
    radial-gradient(circle at 50% 0%, rgba(184,140,255,0.18), transparent 42%),
    radial-gradient(circle at 100% 20%, rgba(115,240,207,0.08), transparent 36%),
    linear-gradient(180deg, rgba(24, 20, 38, 0.98), rgba(7, 8, 18, 0.99));

  border: 1px solid rgba(184,140,255,0.26);

  box-shadow:
    0 28px 90px rgba(0,0,0,0.72),
    0 0 34px rgba(184,140,255,0.18),
    inset 0 1px 1px rgba(255,255,255,0.08);

  color: var(--text);
}

/* Gemeinsame dunkle Innenflächen in Modals */
.modal-section,
.intro-section,
.prestige-info-box,
.random-event-story,
.research-confirm-story,
.shop-offer,
.chest-entry,
.leaderboard-row,
.daily-quest-entry,
.lounge-progress-entry,
.kpi-info-card,
.guest-quality-column,
.guest-quality-followers-card,
.cloud-login-hero,
.offline-income-reward {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.065), rgba(255,255,255,0.025));

  border: 1px solid rgba(184,140,255,0.14);

  box-shadow:
    inset 0 1px 1px rgba(255,255,255,0.05),
    0 8px 22px rgba(0,0,0,0.18);
}

/* Modal Close Buttons einheitlicher */
.close-modal-btn,
.card-preview-close,
.offline-income-close {
  background:
    linear-gradient(135deg, rgba(20,17,32,0.96), rgba(38,24,58,0.96));

  border: 1px solid rgba(184,140,255,0.32);

  box-shadow:
    0 10px 24px rgba(0,0,0,0.45),
    0 0 16px rgba(184,140,255,0.18);
}

.info-modal-header,
.chest-header,
.shop-header,
.leaderboard-header {
  position: sticky;
  top: -14px;
  z-index: 80;

  background:
    linear-gradient(180deg, rgba(18,16,30,0.98), rgba(10,10,18,0.94));

  backdrop-filter: blur(14px);
  margin: -14px -14px 10px;
  padding: 14px;
  border-radius: 22px 22px 12px 12px;
}

.reward-chest-image {
  position: relative;
  width: 110px;
  height: 110px;
  margin: 0 auto 12px;
  object-fit: contain;
  object-position: left top;
}

.reward-chest-image.hidden {
  display: none;
}

.reward-chest-sprite-preview {
  width: 120px;
  height: 120px;
  display: block;
  margin: 0 auto;
  background-repeat: no-repeat;
  background-size: 400% 200%;
  background-position: 0% 0%;
  object-fit: none;
  content: "";
}

.bottom-tab.has-layout-reward,
.location-floating-button.has-layout-reward {
  animation: managementRewardPulse 1.8s ease-in-out infinite;
  box-shadow:
    0 0 10px rgba(255, 210, 90, 0.55),
    0 0 22px rgba(255, 180, 40, 0.38);
  border-color: rgba(255, 215, 120, 0.95);
}

.bottom-tab.has-management-reward {
  animation: managementRewardPulse 1.8s ease-in-out infinite;
  box-shadow:
    0 0 10px rgba(255, 210, 90, 0.45),
    0 0 22px rgba(255, 180, 40, 0.28);
  border-color: rgba(255, 215, 120, 0.85);
}

@keyframes managementRewardPulse {
  0% {
    transform: translateY(0) scale(1);
    filter: brightness(1);
  }

  50% {
    transform: translateY(-1px) scale(1.045);
    filter: brightness(1.18);
  }

  100% {
    transform: translateY(0) scale(1);
    filter: brightness(1);
  }
}

.equipment-floating-button.has-equipment-reward {
  border-color: rgba(255,209,102,0.9);
  box-shadow: 0 0 18px rgba(255,209,102,0.85), 0 0 34px rgba(255,209,102,0.45);
  animation: floatingButtonBob 2.6s ease-in-out infinite, equipmentGoldPulse 1.1s ease-in-out infinite;
}

@keyframes equipmentGoldPulse {
  0%, 100% { filter: brightness(1); transform: translateY(0) scale(1); }
  50% { filter: brightness(1.35); transform: translateY(-3px) scale(1.06); }
}

.equipment-hero {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  align-items: stretch;
}

.equipment-slots {
  grid-column: 1 / 4;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.equipment-slot,
.equipment-item-card {
  border-radius: 12px;
  padding: 6px;
  background: rgba(255,255,255,0.055);
  border: 1px solid rgba(255,255,255,0.09);
  color: var(--text);
}

.equipment-slot strong,
.equipment-item-card strong {
  display: block;
  font-size: 12px;
}

.equipment-slot span,
.equipment-item-card span {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 10px;
}

.equipment-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.equipment-actions #rollEquipmentButton,
.equipment-actions #upgradeEquipmentDropButton,
.equipment-actions #upgradeEquipmentItemsButton,
.equipment-actions #fuseEquipmentItemsButton {
  grid-column: 1 / -1;
}

.equipment-auto-lock-row {
  display: grid;
  grid-template-columns: 42px 1fr auto;
  align-items: center;
  gap: 10px;
}

.equipment-auto-lock-row.locked {
  outline: 2px solid rgba(255, 180, 80, 0.65);
}

.equipment-auto-lock-toggle {
  border: 0;
  border-radius: 12px;
  padding: 8px 10px;
  color: white;
  font-weight: 800;
  background: rgba(255,255,255,0.12);
}

.equipment-auto-lock-row.locked .equipment-auto-lock-toggle {
  background: linear-gradient(135deg, var(--gold), #ff8f3d);
}

.equipment-action-btn {
  border: 0;
  border-radius: 16px;
  padding: 12px;
  color: white;
  font-weight: bold;
  background: linear-gradient(135deg, var(--accent), #6954ff);
  box-shadow: 0 10px 28px rgba(105,84,255,0.25);
}

.equipment-action-btn.research {
  background: linear-gradient(135deg, var(--gold), #ff8f3d);
}

.equipment-action-btn:disabled {
  opacity: 0.45;
  filter: grayscale(0.6);
}

.equipment-inventory {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 6px;

  max-height: none;
  overflow: visible;

  width: 100%;
  max-width: 100%;
  min-width: 0;
}

.equipment-modal {
  overflow-x: hidden;
}

.equipment-modal .modal-section {
  min-width: 0;
  overflow-x: hidden;
}

.equipment-modal {
  overflow-x: hidden;
  overflow-y: auto;
  background:
    radial-gradient(circle at 20% 10%, rgba(150,150,150,0.12), transparent 34%),
    radial-gradient(circle at 85% 28%, rgba(255,255,255,0.06), transparent 32%),
    linear-gradient(180deg, rgba(24,24,30,0.98), rgba(8,9,16,0.99)) !important;
}

.equipment-modal.equipment-set-rare {
  background:
    radial-gradient(circle at 18% 12%, rgba(40,85,255,0.28), transparent 36%),
    radial-gradient(circle at 92% 30%, rgba(20,55,160,0.24), transparent 34%),
    linear-gradient(180deg, rgba(12,18,42,0.98), rgba(5,8,20,0.99)) !important;
}

.equipment-modal {
  position: relative;
  isolation: isolate;
}

.equipment-modal::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0;
  background-repeat: no-repeat;
  border-radius: inherit;
  mix-blend-mode: screen;
}

.equipment-modal > * {
  position: relative;
  z-index: 2;
}

.equipment-modal .info-modal-header {
  z-index: 3;
}

/* Rare: leichte blaue Linien */
.equipment-modal.equipment-set-rare::before {
  opacity: 0.42;
  background:
    linear-gradient(115deg, transparent 8%, rgba(40,85,255,0.28) 9%, transparent 11%),
    linear-gradient(35deg, transparent 72%, rgba(40,85,255,0.20) 74%, transparent 76%);
  filter: drop-shadow(0 0 8px rgba(40,85,255,0.35));
}

/* Epic: animierte violette Neon-Linien */
.equipment-modal.equipment-set-epic::before {
  opacity: 0.65;
  background:
    linear-gradient(118deg, transparent 12%, rgba(180,85,255,0.42) 13%, transparent 15%),
    linear-gradient(42deg, transparent 58%, rgba(255,80,220,0.30) 60%, transparent 62%),
    linear-gradient(150deg, transparent 76%, rgba(180,85,255,0.26) 78%, transparent 80%);
  filter:
    drop-shadow(0 0 8px rgba(180,85,255,0.75))
    drop-shadow(0 0 18px rgba(255,80,220,0.30));
  animation: equipmentNeonLinesEpic 3.6s ease-in-out infinite;
}

/* Legendary: lebhaftere goldene Linien */
.equipment-modal.equipment-set-legendary::before {
  opacity: 0.78;
  background:
    linear-gradient(120deg, transparent 10%, rgba(255,196,64,0.55) 11%, transparent 13%),
    linear-gradient(28deg, transparent 48%, rgba(255,132,40,0.38) 50%, transparent 52%),
    linear-gradient(155deg, transparent 72%, rgba(255,220,120,0.32) 74%, transparent 76%),
    linear-gradient(70deg, transparent 84%, rgba(255,196,64,0.26) 86%, transparent 88%);
  filter:
    drop-shadow(0 0 10px rgba(255,196,64,0.85))
    drop-shadow(0 0 24px rgba(255,132,40,0.35));
  animation: equipmentNeonLinesLegendary 2.8s ease-in-out infinite;
}

/* Mystic: starke cyan Neon-Linien */
.equipment-modal.equipment-set-mystic::before {
  opacity: 0.92;
  background:
    linear-gradient(118deg, transparent 8%, rgba(120,230,255,0.70) 9%, transparent 11%),
    linear-gradient(34deg, transparent 34%, rgba(115,240,207,0.45) 36%, transparent 38%),
    linear-gradient(154deg, transparent 58%, rgba(120,230,255,0.48) 60%, transparent 62%),
    linear-gradient(72deg, transparent 78%, rgba(160,250,255,0.38) 80%, transparent 82%),
    radial-gradient(circle at 20% 16%, rgba(120,230,255,0.18), transparent 28%);
  filter:
    drop-shadow(0 0 12px rgba(120,230,255,0.95))
    drop-shadow(0 0 28px rgba(115,240,207,0.55));
  animation: equipmentNeonLinesMystic 2.1s ease-in-out infinite;
}

@keyframes equipmentNeonLinesEpic {
  0%, 100% { opacity: 0.48; filter: drop-shadow(0 0 6px rgba(180,85,255,0.55)); }
  50% { opacity: 0.85; filter: drop-shadow(0 0 16px rgba(180,85,255,0.95)); }
}

@keyframes equipmentNeonLinesLegendary {
  0%, 100% { opacity: 0.55; filter: drop-shadow(0 0 8px rgba(255,196,64,0.60)); }
  50% { opacity: 0.95; filter: drop-shadow(0 0 22px rgba(255,196,64,1)); }
}

@keyframes equipmentNeonLinesMystic {
  0%, 100% { opacity: 0.62; filter: drop-shadow(0 0 10px rgba(120,230,255,0.70)); }
  50% { opacity: 1; filter: drop-shadow(0 0 28px rgba(120,230,255,1)); }
}

.equipment-mini-item {
  min-width: 0;
  width: 100%;
}

.equipment-mini-item {
  aspect-ratio: 1;
  border: 0;
  border-radius: 10px;
  color: white;
  font-size: 12px;
  font-weight: 900;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.12);
}

.equipment-mini-item.common { color: #d8d8d8; }
.equipment-mini-item.rare { color: #6bbcff; }
.equipment-mini-item.epic { color: #c48cff; }
.equipment-mini-item.legendary { color: var(--gold); }
.equipment-mini-item.mystic { color: #73f0cf; box-shadow: 0 0 14px rgba(115,240,207,0.45); }

.equipment-compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.equipment-result-actions {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}

.equipment-upgrade-highlight .equipment-item-card {
  border-color: rgba(90,255,140,0.95) !important;
  box-shadow:
    0 0 18px rgba(90,255,140,0.35),
    0 0 32px rgba(90,255,140,0.18);
}

.equipment-drop-info-btn {
  border: 0;
  border-radius: 999px;
  padding: 5px 9px;
  color: var(--accent-2);
  background: rgba(115,240,207,0.12);
  border: 1px solid rgba(115,240,207,0.28);
  font-size: 11px;
  font-weight: bold;
  cursor: pointer;
}

.equipment-card-head {
  display: grid;
  grid-template-columns: 52px 1fr;
  gap: 10px;
  align-items: center;
  margin-bottom: 8px;
}

.equipment-card-icon {
  width: 52px;
  height: 52px;
  object-fit: contain;
  image-rendering: pixelated;
  border-radius: 12px;
  background: rgba(0,0,0,0.22);
  border: 1px solid rgba(255,255,255,0.10);
}

.equipment-slot-icon {
  width: 52px;
  height: 52px;
  object-fit: contain;
  image-rendering: pixelated;
  margin: 0;
  display: block;
}

.equipment-slot-icon.empty {
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: rgba(255,255,255,0.06);
  border: 1px dashed rgba(255,255,255,0.18);
  color: var(--muted);
  font-size: 18px;
  font-weight: 900;
}

.equipment-mini-item {
  display: grid;
  place-items: center;
  position: relative;
  padding: 3px;
}

.equipment-mini-icon {
  width: 34px;
  height: 34px;
  object-fit: contain;
  image-rendering: pixelated;
}

.equipment-mini-item span {
  position: absolute;
  right: 2px;
  bottom: 1px;
  font-size: 11px;
  font-weight: 900;
  color: var(--text);
  text-shadow: 0 1px 4px rgba(0,0,0,0.9);

  padding: 1px 3px;
  border-radius: 999px;
  background: rgba(0,0,0,0.55);
}

.equipment-mini-item .equipment-grade-badge {
  right: -6px;
  bottom: -6px;
}

.equipment-mini-item .equipment-level-badge {
  right: -8px;
  top: -10px;
  bottom: auto;
  color: var(--accent-2);
}

.equipment-filter-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.equipment-filter-option {
  display: flex;
  align-items: center;
  gap: 8px;
  border-radius: 12px;
  padding: 9px 10px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  color: var(--text);
  font-size: 12px;
  font-weight: 800;
}

.equipment-filter-option.active {
  border-color: rgba(115,240,207,0.65);
  background: rgba(115,240,207,0.12);
  box-shadow: 0 0 12px rgba(115,240,207,0.16);
}

.equipment-filter-option input {
  accent-color: var(--accent-2);
}

.equipment-auto-roll-status {
  margin: 10px 0;
  padding: 10px;
  border-radius: 14px;
  background: rgba(0,0,0,0.22);
  border: 1px solid rgba(255,255,255,0.10);
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.equipment-modal .modal-section-title {
  align-items: center;
}

#equipmentCloudAmount {
  color: var(--gold);
  font-weight: 900;
}

.equipment-upgrade-modal {
  max-height: min(720px, 86vh);
}

.equipment-upgrade-preview {
  background: rgba(255,255,255,0.045);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 18px;
  padding: 12px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.equipment-upgrade-preview strong {
  display: block;
  color: var(--text);
  font-size: 15px;
  margin-bottom: 4px;
}

.equipment-upgrade-bonus-compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 10px;
}

.equipment-upgrade-bonus-compare > div {
  background: rgba(0,0,0,0.18);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 14px;
  padding: 9px;
}

.equipment-upgrade-bonus-compare b {
  display: block;
  color: var(--accent-2);
  font-size: 11px;
  margin-bottom: 4px;
}

.equipment-upgrade-bonus-compare span {
  display: block;
  font-size: 10px;
  color: var(--muted);
  margin-top: 3px;
}

.equipment-upgrade-slots {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin: 10px 0;
}

.equipment-upgrade-slot {
  min-height: 92px;
  border-radius: 14px;
  padding: 8px;
  background: rgba(255,255,255,0.055);
  border: 1px solid rgba(255,255,255,0.10);
  color: var(--text);
}

.equipment-upgrade-slot.empty {
  border-style: dashed;
  color: var(--muted);
}

.equipment-upgrade-slot strong,
.equipment-upgrade-slot span {
  display: block;
  font-size: 10px;
  margin-top: 3px;
}

.equipment-upgrade-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  max-height: 38vh;
  overflow-y: auto;
  padding-right: 2px;
}

.equipment-upgrade-empty {
  padding: 12px;
  border-radius: 14px;
  background: rgba(0,0,0,0.22);
  border: 1px dashed rgba(255,255,255,0.16);
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.equipment-upgrade-empty strong {
  display: block;
  color: var(--text);
  font-size: 13px;
  margin-bottom: 4px;
}

.equipment-upgrade-empty span {
  display: block;
}

.equipment-upgrade-pick {
  display: grid;
  grid-template-columns: 42px 1fr;
  gap: 9px;
  align-items: center;
  text-align: left;
  border-radius: 14px;
  padding: 9px;
  background: rgba(255,255,255,0.055);
  border: 1px solid rgba(255,255,255,0.10);
  color: var(--text);
}

.equipment-upgrade-pick strong {
  display: block;
  font-size: 12px;
}

.equipment-upgrade-pick span {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.25;
}

.equipment-upgrade-pick.selected {
  border-color: rgba(115,240,207,0.9);
  box-shadow: 0 0 16px rgba(115,240,207,0.32);
}

.equipment-upgrade-pick.disabled {
  opacity: 0.35;
}

.equipment-group-card {
  margin-top: 10px;
  padding: 10px;
  border-radius: 16px;

  background: rgba(255,255,255,0.045);
  border: 1px solid rgba(255,255,255,0.09);
}

.equipment-group-head {
  display: flex;
  justify-content: space-between;
  align-items: center;

  margin-bottom: 8px;

  font-size: 12px;
}

.equipment-group-head strong {
  color: var(--text);
}

.equipment-group-head span {
  color: var(--accent-2);
  font-weight: 900;
}

.equipment-group-upgrade-btn {
  width: 100%;
  margin: 0 0 8px;
  padding: 9px 10px;
  font-size: 11px;
}

.equipment-group-upgrade-btn:disabled {
  opacity: 0.55;
  filter: grayscale(0.7);
}

.equipment-mini-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 7px;
}

.equipment-slot-mini {
  width: 44px;
  height: 44px;
  margin-bottom: 4px;
}

.equipment-slot {
  display: grid;
  grid-template-rows: 54px auto;
  justify-items: center;
  align-items: center;
  text-align: center;
  min-height: 92px;
}

.equipment-slot-rarity-common {
  border-color: rgba(125,125,125,0.92) !important;
  box-shadow:
    0 0 10px rgba(125,125,125,0.16) !important;
}

.equipment-slot-rarity-rare {
  border-color: rgba(40,85,255,0.95) !important;
  box-shadow:
    0 0 14px rgba(40,85,255,0.24) !important;
}

.equipment-slot-rarity-epic {
  border-color: rgba(180,85,255,0.96) !important;
  box-shadow:
    0 0 18px rgba(180,85,255,0.28) !important;
}

.equipment-slot-rarity-legendary {
  border-color: rgba(255,196,64,0.96) !important;
  box-shadow:
    0 0 14px rgba(255,196,64,0.34),
    0 0 28px rgba(255,196,64,0.18) !important;

  animation: legendaryEquipmentPulse 2.8s ease-in-out infinite;
}

.equipment-slot-rarity-mystic {
  border-color: rgba(120,230,255,0.98) !important;
  box-shadow:
    0 0 18px rgba(120,230,255,0.50),
    0 0 38px rgba(120,230,255,0.24) !important;

  animation: mythicEquipmentPulse 1.7s ease-in-out infinite;
}

@keyframes legendaryEquipmentPulse {

  0%, 100% {
    box-shadow:
      0 0 14px rgba(255,196,64,0.30),
      0 0 26px rgba(255,196,64,0.14);
  }

  50% {
    box-shadow:
      0 0 20px rgba(255,196,64,0.48),
      0 0 42px rgba(255,196,64,0.26);
  }
}

@keyframes mythicEquipmentPulse {

  0%, 100% {
    box-shadow:
      0 0 18px rgba(120,230,255,0.42),
      0 0 34px rgba(120,230,255,0.18);
  }

  50% {
    box-shadow:
      0 0 28px rgba(120,230,255,0.82),
      0 0 54px rgba(120,230,255,0.36),
      0 0 80px rgba(120,230,255,0.14);
  }
}

.equipment-slot-visual-wrap {
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  margin: 0 auto;
  align-self: center;
}

.equipment-slot-mini {
  width: 46px !important;
  height: 46px !important;
  aspect-ratio: 1;
  margin: 0 auto;
  flex: none;
}

.equipment-slot-mini .equipment-mini-icon {
  width: 34px;
  height: 34px;
}

.equipment-slot strong {
  min-height: 16px;
}

.equipment-slot-bonus {
  width: 100%;
  text-align: center;
}

.equipment-upgrade-pick.equipped {
  border-color: rgba(115,240,207,0.95);
  box-shadow:
    0 0 0 1px rgba(115,240,207,0.75),
    0 0 18px rgba(115,240,207,0.28);
}

.modal-text-input {
  width: 100%;
  min-height: 44px;
  margin-bottom: 10px;
  border-radius: 14px;
  padding: 0 12px;
  color: var(--text);
  background: rgba(0,0,0,0.22);
  border: 1px solid rgba(255,255,255,0.14);
  outline: none;
  font-size: 14px;
  font-weight: 700;
}

.modal-text-input:focus {
  border-color: rgba(115,240,207,0.75);
  box-shadow: 0 0 14px rgba(115,240,207,0.22);
}

.equipment-result-group-actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 7px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid rgba(255,255,255,0.08);
}

.equipment-result-group-title {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  text-align: center;
}

.equipment-action-btn.secondary {
  background: rgba(115,240,207,0.10);
  border-color: rgba(115,240,207,0.26);
}

@keyframes equipmentUpgradePulse {
  0%, 100% {
    box-shadow: 0 0 0 rgba(255,70,70,0);
  }

  50% {
    box-shadow:
      0 0 12px rgba(255,70,70,0.85),
      0 0 24px rgba(255,70,70,0.45);
  }
}

.equipment-mini-item.upgrade-ready {
  animation: equipmentUpgradePulse 1.35s infinite;
  border-color: rgba(255,70,70,0.95) !important;
}

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

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

.auto-roll-active {
  animation: autoRollBounce 1.05s infinite;
  border-color: rgba(115,240,207,0.95) !important;

  box-shadow:
    0 0 16px rgba(115,240,207,0.34),
    0 0 30px rgba(115,240,207,0.18);
}

.leaderboard-name-button {
  display: inline;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-weight: 900;
  text-align: left;
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color: rgba(115,240,207,0.55);
}

.leaderboard-equipment-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 9px;
}

.leaderboard-equipment-item {
  border-radius: 16px;
  padding: 10px;
  background: rgba(255,255,255,0.045);
  border: 1px solid rgba(255,255,255,0.10);
}

.leaderboard-equipment-item.empty {
  opacity: 0.55;
}

.leaderboard-equipment-top {
  display: grid;
  grid-template-columns: 38px 1fr;
  gap: 10px;
  align-items: center;
}

.leaderboard-equipment-top strong {
  display: block;
  font-size: 13px;
}

.leaderboard-equipment-top span,
.leaderboard-equipment-bonuses span {
  display: block;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
}

.leaderboard-equipment-bonuses {
  margin-top: 8px;
}

.glow-shop-section {
  display: grid;
  gap: 8px;
}

.glow-shop-section h3 {
  margin: 4px 0 0;
  font-size: 15px;
}

.glow-shop-grid {
  display: grid;
  gap: 8px;
}

.glow-shop-grid.three {
  grid-template-columns: repeat(3, 1fr);
}

.glow-shop-grid.chests {
  grid-template-columns: repeat(2, 1fr);
}

.glow-shop-grid.two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.glow-shop-tile,
.glow-shop-chest {
  width: 100%;
  min-width: 0;
  min-height: 78px;
  border: 0;
  border-radius: 17px;
  padding: 8px 5px;
  color: var(--text);
  background: rgba(255,255,255,0.055);
  border: 1px solid rgba(255,255,255,0.1);
  font-weight: 900;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  text-align: center;
  line-height: 1.15;
  overflow: hidden;
  position: relative;
}

.glow-shop-tile {
  font-size: 12px;
  white-space: normal;
}

.glow-shop-chest strong {
  font-size: 12px;
  line-height: 1.1;
}

.glow-shop-grid.three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.glow-shop-grid.chests {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

#shopGlowContent {
  overflow-x: hidden;
}

.glow-shop-tile.best {
  border-color: rgba(115,240,207,0.34);
  box-shadow: 0 0 18px rgba(115,240,207,0.12);
}

.glow-shop-tile small,
.glow-shop-chest small {
  color: var(--gold);
  font-size: 11px;
  font-weight: 900;
}

.glow-shop-tile:disabled,
.glow-shop-chest:disabled {
  opacity: 0.38;
  filter: grayscale(0.65);
  cursor: not-allowed;
}

.glow-shop-chest.common {
  border-color: rgba(255,255,255,0.18);
}

.glow-shop-chest.rare {
  border-color: rgba(115,240,207,0.35);
}

.glow-shop-chest.epic {
  border-color: rgba(184,140,255,0.45);
}

.glow-shop-chest.legendary {
  border-color: rgba(255,209,102,0.55);
}

#shopGlowContent.active {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  overflow-y: auto;
  overflow-x: hidden;
  max-height: calc(88dvh - 124px);
  padding-right: 2px;
}

#shopGlowContent .glow-shop-section {
  width: 100%;
  min-width: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}

#shopGlowContent .glow-shop-grid.three {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  width: 100%;
}

#shopGlowContent .glow-shop-grid.chests {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  width: 100%;
}

.glow-shop-preview {
  display: block;
  color: var(--accent-2);
  font-size: 10px;
  font-weight: 900;
  line-height: 1.15;
}

.glow-shop-chest {
  min-height: 104px;
  background: radial-gradient(circle at 50% 25%, rgba(255,255,255,0.08), rgba(255,255,255,0.035));
}

#shopGlowContent.active {
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: auto;
  touch-action: pan-y;
}

.glow-shop-tile,
.glow-shop-chest {
  touch-action: manipulation;
}

.glow-chest-img {
  width: 64px;
  height: 64px;
  display: block;
  background-repeat: no-repeat;
  background-size: 400% 200%;
  background-position: 0% 0%;
  image-rendering: auto;
  filter: drop-shadow(0 10px 14px rgba(0,0,0,0.35));
}

.social-inbox-button {
  position: relative;
}

.social-inbox-badge {
  position: absolute;
  right: -5px;
  top: -5px;
  min-width: 17px;
  height: 17px;
  padding: 0 5px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: var(--danger);
  color: white;
  font-size: 10px;
  font-weight: 900;
  border: 1px solid rgba(255,255,255,0.25);
}

.social-inbox-badge.hidden {
  display: none;
}

.social-inbox-modal {
  max-height: min(680px, 84vh);
  overflow: hidden;
}

.social-inbox-tabs {
  grid-template-columns: repeat(3, 1fr);
}

.social-inbox-panel {
  display: none;
  overflow-y: auto;
  overflow-x: hidden;
  max-height: 58vh;
  padding-right: 2px;
  -webkit-overflow-scrolling: touch;
}

.social-inbox-panel.active {
  display: grid;
  gap: 10px;
}

.social-list {
  display: grid;
  gap: 8px;
}

.social-empty,
.social-card {
  background: rgba(255,255,255,0.045);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 16px;
  padding: 10px;
}

.social-empty {
  color: var(--muted);
  font-size: 12px;
  text-align: center;
}

.social-card-title {
  font-size: 13px;
  font-weight: 900;
}

.social-card-body {
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
  white-space: pre-line;
  line-height: 1.35;
}

.social-card-meta {
  margin-top: 6px;
  color: var(--accent-2);
  font-size: 10px;
  font-weight: 900;
}

.social-add-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
}

.social-input {
  min-width: 0;
  border: 0;
  border-radius: 14px;
  padding: 11px;
  color: var(--text);
  background: rgba(0,0,0,0.22);
  border: 1px solid rgba(255,255,255,0.1);
  outline: none;
}

.social-action-btn {
  border: 0;
  border-radius: 14px;
  padding: 11px 10px;
  color: var(--text);
  background: rgba(115,240,207,0.13);
  border: 1px solid rgba(115,240,207,0.35);
  font-weight: 900;
  cursor: pointer;
}

.social-header-btn {
  position: relative;
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 14px;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.12);
  color: var(--text);
  font-size: 18px;
  cursor: pointer;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  box-shadow: 0 10px 24px rgba(0,0,0,0.22);
}

.social-header-btn.has-social-attention {
  border-color: rgba(255, 215, 120, 1);
  color: var(--gold);
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 215, 120, 0.26), transparent 62%),
    rgba(255,255,255,0.07);

  box-shadow:
    0 10px 24px rgba(0,0,0,0.28),
    0 0 14px rgba(255, 210, 90, 0.75),
    0 0 30px rgba(255, 180, 40, 0.48),
    inset 0 0 12px rgba(255, 215, 120, 0.18);

  animation: mailboxAttentionPulse 1.15s ease-in-out infinite;
}

@keyframes mailboxAttentionPulse {
  0%, 100% {
    transform: translateY(0) scale(1);
    filter: brightness(1);
  }

  45% {
    transform: translateY(-4px) scale(1.1);
    filter: brightness(1.25);
  }
}

.prestige-header-btn {
  position: relative;
  width: 42px;
  height: 42px;
  border-radius: 14px;
  border: 1px solid rgba(255,215,120,0.4);
  background:
    linear-gradient(
      135deg,
      rgba(255,215,120,0.24),
      rgba(255,170,0,0.12)
    );
  color: #ffd978;
  font-weight: 900;
  font-size: 14px;
  cursor: pointer;
  flex-shrink: 0;

  box-shadow:
    0 0 16px rgba(255,215,120,0.18),
    inset 0 0 12px rgba(255,215,120,0.08);

  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    opacity 0.18s ease;
}

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

.prestige-header-btn.prestige-locked {
  opacity: 0.55;
  filter: grayscale(0.25);
}

.social-header-btn:active {
  transform: scale(0.96);
}

.social-header-btn.has-social-attention:active {
  animation-play-state: paused;
  transform: scale(0.96);
}

.social-friend-name-btn {
  width: 100%;
  border: 0;
  padding: 0;
  color: var(--text);
  background: transparent;
  font-size: 13px;
  font-weight: 900;
  text-align: left;
  cursor: pointer;
}

.social-friend-name-btn:active {
  transform: scale(0.98);
}

.social-message-input {
  width: 100%;
  min-height: 110px;
  resize: none;
  border: 0;
  border-radius: 16px;
  padding: 12px;
  color: var(--text);
  background: rgba(0,0,0,0.25);
  border: 1px solid rgba(255,255,255,0.1);
  outline: none;
  font-family: inherit;
  font-size: 13px;
  line-height: 1.35;
}

.social-action-btn.full {
  width: 100%;
  margin-top: 10px;
}

.social-message-chest-reward {
  margin-top: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--gold);
  font-size: 11px;
  font-weight: 900;
}

.social-message-chest-img {
  width: 34px;
  height: 34px;
  display: block;
  background-repeat: no-repeat;
  background-size: 400% 200%;
  background-position: 0% 0%;
  filter: drop-shadow(0 6px 10px rgba(0,0,0,0.35));
}

.social-message-filter-tabs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 7px;
}

.social-friend-search {
  width: 100%;
  margin-bottom: 8px;
}

.social-friend-card {
  padding: 12px;
}

.social-friend-name-btn {
  font-size: 16px;
  line-height: 1.15;
}

.social-friend-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
  margin-top: 9px;
}

.social-action-btn.compact {
  padding: 7px 8px;
  border-radius: 11px;
  font-size: 11px;
}

.friend-chat-modal {
  max-height: min(680px, 84vh);
}

.friend-chat-log {
  min-height: 260px;
  max-height: 48vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 10px;
  border-radius: 18px;
  background: rgba(0,0,0,0.18);
  border: 1px solid rgba(255,255,255,0.08);
}

.friend-chat-compose {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  margin-top: 10px;
}

.friend-chat-message {
  display: flex;
  flex-direction: column;
  max-width: 82%;
}

.friend-chat-message.own {
  align-self: flex-end;
  align-items: flex-end;
}

.friend-chat-message.other {
  align-self: flex-start;
  align-items: flex-start;
}

.friend-chat-bubble {
  padding: 10px 12px;
  border-radius: 16px;
  background: rgba(255,255,255,0.08);
  color: var(--text);
  font-size: 13px;
  line-height: 1.35;
}

.friend-chat-message.own .friend-chat-bubble {
  background: rgba(115,240,207,0.16);
  border: 1px solid rgba(115,240,207,0.28);
}

.friend-chat-time {
  margin-top: 3px;
  color: var(--muted);
  font-size: 9px;
}

.chat-list-head {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: flex-start;
}

.chat-unread-card {
  border-color: rgba(115,240,207,0.34);
  box-shadow: 0 0 18px rgba(115,240,207,0.12);
}

.chat-unread-badge {
  min-width: 22px;
  height: 22px;
  padding: 0 7px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  color: #07120f;
  background: var(--accent-2);
  font-size: 11px;
  font-weight: 900;
  box-shadow: 0 0 14px rgba(115,240,207,0.45);
}

.chat-preview {
  opacity: 0.9;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.chat-date-divider {
  align-self: center;
  margin: 5px 0;
  padding: 4px 9px;
  border-radius: 999px;
  background: rgba(255,255,255,0.07);
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
}

.friend-chat-typing {
  min-height: 16px;
  margin: 0 0 6px;
  color: var(--accent-2);
  font-size: 11px;
  font-weight: 800;
}

.chat-row {
  width: 100%;
  display: grid;
  grid-template-columns: 12px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  padding: 12px;
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(36,30,48,0.92), rgba(20,17,27,0.98));
  color: var(--text);
  text-align: left;
  cursor: pointer;
  box-shadow: 0 12px 34px rgba(0,0,0,0.22);
}

.chat-row:active {
  transform: scale(0.985);
}

.chat-row-status {
  width: 10px;
  height: 10px;
  margin-top: 4px;
  border-radius: 999px;
}

.chat-row-status.online {
  background: #4cff88;
  box-shadow: 0 0 10px rgba(76,255,136,0.9);
}

.chat-row-status.offline {
  background: #ff4d6d;
  box-shadow: 0 0 8px rgba(255,77,109,0.65);
}

.chat-row-main {
  min-width: 0;
}

.chat-row-top,
.chat-row-bottom {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
}

.chat-row-title {
  min-width: 0;
  font-size: 14px;
  font-weight: 900;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.chat-row-time {
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
  white-space: nowrap;
}

.chat-row-lounge {
  margin-top: 2px;
  color: var(--accent-2);
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.chat-row-preview {
  min-width: 0;
  margin-top: 7px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.chat-row-lastseen {
  margin-top: 5px;
  font-size: 10px;
  font-weight: 800;
}

.chat-row-lastseen.online {
  color: #4cff88;
}

.chat-row-lastseen.offline {
  color: var(--muted);
}

.glow-research-skip-panel {
  display: grid;
  gap: 10px;
}

.glow-research-skip-list {
  display: grid;
  gap: 8px;
}

.glow-research-skip-entry {
  width: 100%;
  border: 0;
  border-radius: 16px;
  padding: 10px;
  text-align: left;
  color: var(--text);
  background: rgba(255,255,255,0.045);
  border: 1px solid rgba(255,255,255,0.09);
  cursor: pointer;
}

.glow-research-skip-entry strong,
.glow-research-skip-entry span,
.glow-research-skip-entry small {
  display: block;
}

.glow-research-skip-entry strong {
  font-size: 13px;
}

.glow-research-skip-entry span {
  margin-top: 3px;
  color: var(--muted);
  font-size: 11px;
}

.glow-research-skip-entry small {
  margin-top: 4px;
  color: var(--accent-2);
  font-size: 11px;
  font-weight: bold;
}

.glow-research-skip-entry.selected {
  border-color: rgba(115,240,207,0.48);
  background: rgba(115,240,207,0.12);
  box-shadow: 0 0 16px rgba(115,240,207,0.14);
}

.glow-research-skip-entry.running {
  border-color: rgba(255,209,102,0.5);
  background: rgba(255,209,102,0.1);
}

.glow-research-skip-entry:disabled {
  opacity: 0.85;
  cursor: default;
}

.glow-research-start-btn {
  width: 100%;
}

.daily-main-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 10px;
}

.daily-main-tab {
  border: 0;
  border-radius: 14px;
  padding: 10px 8px;
  background: var(--card-2);
  border: 1px solid rgba(255,255,255,0.08);
  color: var(--muted);
  font-weight: 900;
  font-size: 12px;
  cursor: pointer;
}

.daily-main-tab.active {
  color: var(--accent-2);
  background: rgba(115,240,207,0.13);
  border-color: rgba(115,240,207,0.35);
  box-shadow: 0 0 16px rgba(115,240,207,0.18);
}

.milestone-scroll-area {
  max-height: none;
  overflow-y: visible;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 12px;
}

.milestone-entry {
  background: rgba(255,255,255,0.045);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 17px;
  padding: 11px;
  display: grid;
  gap: 9px;
}

.milestone-entry.claimable {
  border-color: rgba(255,209,102,0.58);
  box-shadow: 0 0 18px rgba(255,209,102,0.18);
}

.milestone-entry.claimed {
  opacity: 0.55;
  filter: grayscale(0.35);
}

.milestone-entry-head {
  display: grid;
  grid-template-columns: 38px 1fr;
  gap: 9px;
  align-items: center;
}

.milestone-entry-icon {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  background: rgba(0,0,0,0.24);
  border: 1px solid rgba(255,255,255,0.1);
  font-size: 20px;
}

.milestone-entry-head strong {
  display: block;
  color: var(--text);
  font-size: 13px;
}

.milestone-entry-head span {
  display: block;
  color: var(--muted);
  font-size: 11px;
  margin-top: 2px;
  line-height: 1.25;
}

.milestone-entry-meta {
  display: grid;
  grid-template-columns: 1fr;
  gap: 4px;
  font-size: 11px;
}

.milestone-entry-meta span {
  color: var(--accent-2);
  font-weight: bold;
}

.milestone-entry-meta strong {
  color: var(--gold);
  font-size: 11px;
  line-height: 1.25;
}

.milestone-claim-btn {
  border: 0;
  border-radius: 14px;
  padding: 10px;
  color: #1b1322;
  background: linear-gradient(135deg, var(--gold), #ff9f1a);
  font-weight: 900;
  cursor: pointer;
}

.milestone-claimed-label {
  text-align: center;
  color: var(--muted);
  font-size: 11px;
  font-weight: bold;
}

/* Performance Patch: Daily/Milestone Modal */
.daily-quest-modal-card,
.daily-quest-modal-card * {
  animation: none !important;
  transition: none !important;
}

.daily-quest-modal-card {
  max-height: 88dvh;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: auto;
  touch-action: pan-y;
  contain: layout paint;
}

.daily-main-tabs {
  position: relative;
  z-index: 20;
  pointer-events: auto;
}

.daily-main-tab,
.milestone-claim-btn {
  position: relative;
  z-index: 21;
  pointer-events: auto;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
}

.milestone-entry {
  contain: layout paint;
}

.milestone-entry-icon {
  pointer-events: none;
}

.layout-editor-topbar {
  display: none;
}

body.layout-editor-active .layout-editor-topbar {
  display: none !important;
}

.layout-editor-title {
  text-align: center;
  font-weight: 900;
  color: var(--text);
  text-shadow: 0 0 14px rgba(115,240,207,0.5);
}

.layout-editor-btn {
  width: 42px;
  height: 42px;
  border: 0;
  border-radius: 14px;
  color: white;
  font-size: 22px;
  font-weight: 900;
  cursor: pointer;
}

.layout-editor-btn.cancel {
  background: linear-gradient(135deg, #ff4d6d, #991b32);
}

.layout-editor-btn.save {
  background: linear-gradient(135deg, #73f0cf, #159a78);
}

.layout-editor-btn.remove {
  background: linear-gradient(135deg, #ffd166, #b7791f);
  color: #1a1204;
}

.layout-editor-btn.hidden {
  display: none;
}

body.layout-editor-active .left-floating-stack,
body.layout-editor-active .shop-floating-wrap,
body.layout-editor-active .active-ad-bonus-icons,
body.layout-editor-active .active-friend-bonus-icons,
body.layout-editor-active .action-button-row,
body.layout-editor-active .recommendation-bar,
body.layout-editor-active .bottom-nav-wrap {
  display: none !important;
}

body.layout-editor-active .floor {
  outline: 2px solid rgba(115,240,207,0.7);
  box-shadow:
    inset 0 0 30px rgba(115,240,207,0.18),
    0 0 28px rgba(115,240,207,0.28);
}

.layout-grid-cell {
  position: absolute;
  border: 1px solid rgba(115,240,207,0.16);
  pointer-events: none;
  z-index: 100;
}

.layout-object.selected {
  outline: 2px solid var(--gold);
  filter: drop-shadow(0 0 10px rgba(255,209,102,0.8));
}

body.layout-editor-active .active-ad-bonus-icons {
  display: none !important;
}

.custom-layout-stage .layout-object {
  position: absolute;
  left: var(--layout-object-left);
  top: var(--layout-object-top);
  width: var(--layout-object-width);
  height: var(--layout-object-height);
  right: auto;
  bottom: auto;
  transform: none;
  z-index: 20;
  display: block;
  box-sizing: border-box;
  overflow: visible;
}

.custom-layout-stage .layout-object-furniture {
  z-index: 30;
}

.custom-layout-stage .layout-object-table {
  z-index: 40;
}

.custom-layout-stage .layout-object-bar,
.custom-layout-stage .layout-object-kitchen {
  z-index: 260;
}

.custom-layout-stage .layout-object-bar.has-object-quest,
.custom-layout-stage .layout-object-kitchen.has-object-quest {
  z-index: 320;
}

.custom-layout-stage .object-quest-indicator {
  z-index: 9999;
  pointer-events: auto;
}

.custom-layout-stage .layout-object-table.table-spot {
  width: var(--layout-object-width);
  height: var(--layout-object-height);
}

.custom-layout-stage .layout-object-table .table-core {
  position: absolute;
  inset: 0;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}

.custom-layout-stage .layout-object-register.cash-register {
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}

.custom-layout-stage .layout-object-bar .lounge-bar {
  position: absolute;
  inset: -4%;
  width: 108%;
  height: 108%;
  left: -4%;
  top: -4%;
  right: auto;
  bottom: auto;
  transform: none;
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
  pointer-events: none;
  overflow: visible;
}

.custom-layout-stage .layout-object-kitchen.kitchen-object {
  left: var(--layout-object-left);
  top: var(--layout-object-top);
  width: var(--layout-object-width);
  height: var(--layout-object-height);

  right: auto;
  bottom: auto;
  transform: none;

  background: transparent;
  background-image: none !important;

  pointer-events: auto;
  overflow: visible;
}

.custom-layout-stage .layout-object-kitchen .kitchen-visual {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;

  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;

  pointer-events: none;
}

body.layout-editor-active .layout-object {
  pointer-events: auto;
  cursor: grab;
  touch-action: none;
}

body.layout-editor-active .layout-object:active {
  cursor: grabbing;
}

body.layout-editor-active .layout-object.selected {
  z-index: 140;
}

.layout-editor-inventory-tray {
  position: relative;
  z-index: 130;
  display: none;
  width: 100%;
  pointer-events: auto;

  padding: 8px;
  border-radius: 18px;
  background: rgba(15, 13, 20, 0.86);
  border: 1px solid rgba(115,240,207,0.28);
  box-shadow: 0 14px 34px rgba(0,0,0,0.42);
  backdrop-filter: blur(10px);
}

body.layout-editor-active .layout-editor-inventory-tray {
  display: block;
}

.layout-editor-inventory-title {
  font-size: 10px;
  font-weight: 900;
  color: var(--accent-2);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  margin-bottom: 6px;
}

.layout-editor-inventory-list,
.layout-inventory-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}

.layout-inventory-stack {
  width: 100%;
  display: grid;
  grid-template-columns: 54px 1fr;
  align-items: center;
  gap: 10px;

  border: 0;
  border-radius: 16px;
  padding: 8px;

  color: var(--text);
  background: linear-gradient(135deg, rgba(184,140,255,0.16), rgba(115,240,207,0.10));
  border: 1px solid rgba(255,255,255,0.10);
  text-align: left;
  cursor: pointer;
}

.layout-inventory-stack:disabled {
  opacity: 0.68;
  cursor: default;
}

.layout-inventory-thumb {
  width: 54px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  background: rgba(0,0,0,0.22);
  border: 1px solid rgba(255,255,255,0.10);
  overflow: hidden;
}

.layout-inventory-thumb img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  object-position: center;
  flex: 0 0 auto;
}

.layout-inventory-main {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.layout-inventory-main strong {
  font-size: 13px;
  color: var(--text);
}

.layout-inventory-main small {
  font-size: 10px;
  color: var(--muted);
}

.layout-inventory-empty {
  padding: 10px;
  border-radius: 14px;
  color: var(--muted);
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
  font-size: 12px;
}

body.layout-editor-active #globalStats .lounge-only-stat {
  display: none !important;
}

body.layout-editor-active .phone-game {
  padding-bottom: calc(12px + var(--safe-bottom)) !important;
}

.layout-editor-btn.grid {
  background: linear-gradient(135deg, #73f0cf, #3ad1b0);
  color: #06120f;
}

.layout-editor-btn.style {
  background: linear-gradient(135deg, #ffd166, #b88cff);
  color: #130b1f;
  box-shadow: 0 0 16px rgba(255,209,102,0.35);
}

body.layout-editor-grid .floor {
  background: #101018 !important;
  box-shadow: inset 0 0 0 1px rgba(115,240,207,0.25) !important;
}

body.layout-editor-grid .floor::before {
  opacity: 1 !important;
  mix-blend-mode: normal !important;
  animation: none !important;
  background:
    linear-gradient(90deg, rgba(115,240,207,0.55) 1px, transparent 1px),
    linear-gradient(0deg, rgba(115,240,207,0.55) 1px, transparent 1px) !important;
  background-size:
  calc(100% / var(--layout-grid-cols, 10))
  calc(100% / var(--layout-grid-rows, 10)) !important;
}

body.layout-editor-grid .lounge-wall-frame,
body.layout-editor-grid .cloud {
  display: none !important;
}

body.layout-editor-grid #toggleLayoutGridButton {
  outline: 2px solid rgba(255,255,255,0.75);
  box-shadow: 0 0 16px rgba(115,240,207,0.55);
}

.layout-grid-cell {
  display: none !important;
}

body.layout-editor-grid .floor {
  background: #101018 !important;
  box-shadow: inset 0 0 0 1px rgba(115,240,207,0.25) !important;
}

body.layout-editor-grid .floor::before {
  display: none !important;
}

body.layout-editor-grid .custom-layout-stage::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(115,240,207,0.65) 1px, transparent 1px),
    linear-gradient(0deg, rgba(115,240,207,0.65) 1px, transparent 1px);
  background-size: 5% 5%;
background-size:
  calc(100% / var(--layout-grid-cols, 10))
  calc(100% / var(--layout-grid-rows, 10)) !important;
  background-position: left top;
}

.layout-editor-bottom-controls {
  position: fixed;
  left: 50%;
  bottom: calc(8px + var(--safe-bottom));
  transform: translateX(-50%);
  width: min(430px, calc(100vw - 18px));
  z-index: 220;
  display: none;
  grid-template-columns: 42px 1fr 42px 42px 42px 42px;
  align-items: center;
  gap: 8px;
  padding: 8px;
  border-radius: 18px;
  background: rgba(15, 13, 20, 0.92);
  border: 1px solid rgba(115,240,207,0.28);
  box-shadow: 0 14px 40px rgba(0,0,0,0.45);
  pointer-events: auto;
}

body.layout-editor-active .layout-editor-bottom-controls {
  display: grid;
}

body.layout-editor-active .bottom-nav-wrap {
  display: none !important;
}

.lounge-style-shop-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

.lounge-style-card {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: 76px 1fr;
  gap: 10px;
  align-items: center;
  padding: 10px;
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(36,30,48,0.96), rgba(15,13,20,0.98));
  border: 1px solid rgba(255,255,255,0.1);
}

.lounge-style-preview {
  position: relative;
  height: 62px;
  border-radius: 15px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.14);
  box-shadow: inset 0 0 18px rgba(255,255,255,0.08);
}

.lounge-style-info h3 {
  margin: 0 0 3px;
  font-size: 14px;
}

.lounge-style-info p {
  margin: 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.3;
}

.lounge-style-cost {
  margin-top: 6px;
  color: var(--gold);
  font-size: 10px;
  font-weight: 800;
}

.lounge-style-action {
  margin-top: 8px;
  border: 0;
  border-radius: 12px;
  padding: 9px 10px;
  font-size: 11px;
  font-weight: 900;
  color: var(--text);
  background: rgba(115,240,207,0.14);
  border: 1px solid rgba(115,240,207,0.32);
}

.lounge-style-action.active {
  color: #06120f;
  background: linear-gradient(135deg, #73f0cf, #ffd166);
}

.lounge-style-action.locked {
  color: var(--gold);
  background: rgba(255,209,102,0.1);
  border-color: rgba(255,209,102,0.28);
}

.lounge-style-action:disabled {
  opacity: 0.45;
}

.floor[class*="style-"],
.lounge-style-preview[class*="style-"],
#globalStats[class*="style-"] .stat {
  background-color: #05060e;
}

.floor.style-void-grid,
.lounge-style-preview.style-void-grid{
  background:
    radial-gradient(circle at 50% 50%, rgba(184,140,255,0.22), transparent 34%),
    repeating-linear-gradient(90deg, rgba(115,240,207,0.22) 0 2px, transparent 2px 28px),
    repeating-linear-gradient(0deg, rgba(184,140,255,0.22) 0 2px, transparent 2px 28px),
    linear-gradient(135deg, #070714, #111326);
}

.floor.style-orbital-rings,
.lounge-style-preview.style-orbital-rings{
  background:
    radial-gradient(ellipse at 50% 50%, transparent 22%, rgba(115,240,207,0.26) 23%, transparent 25%),
    radial-gradient(ellipse at 50% 50%, transparent 42%, rgba(184,140,255,0.30) 43%, transparent 45%),
    radial-gradient(circle at 30% 35%, rgba(255,209,102,0.2), transparent 18%),
    linear-gradient(135deg, #070716, #141027);
}

.floor.style-plasma-wave,
.lounge-style-preview.style-plasma-wave{
  background:
    radial-gradient(circle at 20% 30%, rgba(255,80,190,0.30), transparent 28%),
    radial-gradient(circle at 80% 70%, rgba(115,240,207,0.28), transparent 32%),
    radial-gradient(circle at 50% 50%, rgba(184,140,255,0.22), transparent 42%),
    linear-gradient(135deg, #10051a, #06151a);
}

.floor.style-golden-circuit,
.lounge-style-preview.style-golden-circuit{
  background:
    linear-gradient(90deg, rgba(255,209,102,0.22) 2px, transparent 2px),
    linear-gradient(0deg, rgba(255,209,102,0.16) 2px, transparent 2px),
    radial-gradient(circle at 20% 20%, rgba(255,209,102,0.28), transparent 14%),
    radial-gradient(circle at 78% 68%, rgba(255,209,102,0.24), transparent 16%),
    linear-gradient(135deg, #171005, #281d08);
  background-size: 36px 36px, 36px 36px, auto, auto, auto;
}

.floor.style-laser-cross,
.lounge-style-preview.style-laser-cross{
  background:
    linear-gradient(35deg, transparent 46%, rgba(255,80,140,0.62) 48%, transparent 51%),
    linear-gradient(-35deg, transparent 46%, rgba(115,240,207,0.58) 48%, transparent 51%),
    repeating-linear-gradient(90deg, rgba(255,255,255,0.05) 0 1px, transparent 1px 18px),
    linear-gradient(135deg, #090914, #16071d);
}

.floor.style-holo-bubbles,
.lounge-style-preview.style-holo-bubbles{
  background:
    radial-gradient(circle at 18% 30%, transparent 0 10px, rgba(115,240,207,0.34) 11px, transparent 13px),
    radial-gradient(circle at 70% 24%, transparent 0 16px, rgba(184,140,255,0.34) 17px, transparent 20px),
    radial-gradient(circle at 48% 72%, transparent 0 22px, rgba(255,209,102,0.25) 23px, transparent 26px),
    radial-gradient(circle at 86% 78%, transparent 0 11px, rgba(255,120,210,0.32) 12px, transparent 14px),
    linear-gradient(135deg, #071018, #151024);
}

.floor.style-matrix-neon,
.lounge-style-preview.style-matrix-neon{
  background:
    repeating-linear-gradient(90deg, rgba(115,240,207,0.12) 0 3px, transparent 3px 18px),
    repeating-linear-gradient(180deg, rgba(115,240,207,0.18) 0 2px, transparent 2px 22px),
    radial-gradient(circle at 50% 50%, rgba(115,240,207,0.16), transparent 45%),
    linear-gradient(135deg, #02130d, #06110f);
}

.floor.style-royal-oval,
.lounge-style-preview.style-royal-oval{
  background:
    radial-gradient(ellipse at 50% 50%, rgba(255,209,102,0.26) 0 18%, transparent 19%),
    radial-gradient(ellipse at 50% 50%, transparent 0 38%, rgba(184,140,255,0.32) 39%, transparent 42%),
    radial-gradient(ellipse at 50% 50%, transparent 0 61%, rgba(255,209,102,0.20) 62%, transparent 65%),
    linear-gradient(135deg, #12081c, #211127);
}

.floor.style-ice-prism,
.lounge-style-preview.style-ice-prism{
  background:
    linear-gradient(120deg, rgba(160,240,255,0.20) 0 12%, transparent 12% 24%, rgba(184,140,255,0.18) 24% 36%, transparent 36%),
    linear-gradient(-120deg, rgba(115,240,207,0.22) 0 10%, transparent 10% 28%, rgba(255,255,255,0.10) 28% 40%, transparent 40%),
    linear-gradient(135deg, #071421, #10162a);
}

.floor.style-singularity,
.lounge-style-preview.style-singularity{
  background:
    radial-gradient(circle at 50% 50%, #000 0 10%, rgba(184,140,255,0.38) 11%, transparent 18%),
    radial-gradient(circle at 50% 50%, transparent 0 28%, rgba(115,240,207,0.28) 29%, transparent 32%),
    radial-gradient(circle at 50% 50%, transparent 0 48%, rgba(255,209,102,0.22) 49%, transparent 52%),
    conic-gradient(from 45deg, rgba(184,140,255,0.22), rgba(115,240,207,0.14), rgba(255,209,102,0.16), rgba(184,140,255,0.22));
}

#globalStats[class*="style-"] .stat::before {
  display: none;
}

#globalStats[class*="style-"] .stat::after {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.06), transparent 30%),
    linear-gradient(180deg, rgba(0,0,0,0.34), rgba(0,0,0,0.54));
}

/* KPI Scorecards: nur Farbschema, keine Floor-Linien/Formen */

#globalStats.style-void-grid .stat {
  background:
    radial-gradient(circle at 50% 0%, rgba(115,240,207,0.16), transparent 58%),
    linear-gradient(135deg, #070714, #111326);
}

#globalStats.style-orbital-rings .stat {
  background:
    radial-gradient(circle at 18% 12%, rgba(255,209,102,0.13), transparent 46%),
    radial-gradient(circle at 82% 82%, rgba(115,240,207,0.12), transparent 48%),
    linear-gradient(135deg, #070716, #141027);
}

#globalStats.style-plasma-wave .stat {
  background:
    radial-gradient(circle at 18% 18%, rgba(255,80,190,0.16), transparent 52%),
    radial-gradient(circle at 88% 78%, rgba(115,240,207,0.14), transparent 54%),
    linear-gradient(135deg, #10051a, #06151a);
}

#globalStats.style-golden-circuit .stat {
  background:
    radial-gradient(circle at 22% 16%, rgba(255,209,102,0.18), transparent 48%),
    linear-gradient(135deg, #171005, #281d08);
}

#globalStats.style-laser-cross .stat {
  background:
    radial-gradient(circle at 20% 20%, rgba(255,80,140,0.16), transparent 48%),
    radial-gradient(circle at 84% 78%, rgba(115,240,207,0.14), transparent 52%),
    linear-gradient(135deg, #090914, #16071d);
}

#globalStats.style-holo-bubbles .stat {
  background:
    radial-gradient(circle at 20% 16%, rgba(115,240,207,0.15), transparent 48%),
    radial-gradient(circle at 82% 78%, rgba(255,120,210,0.13), transparent 50%),
    linear-gradient(135deg, #071018, #151024);
}

#globalStats.style-matrix-neon .stat {
  background:
    radial-gradient(circle at 50% 0%, rgba(115,240,207,0.16), transparent 58%),
    linear-gradient(135deg, #02130d, #06110f);
}

#globalStats.style-royal-oval .stat {
  background:
    radial-gradient(circle at 18% 12%, rgba(255,209,102,0.15), transparent 48%),
    radial-gradient(circle at 82% 84%, rgba(184,140,255,0.15), transparent 50%),
    linear-gradient(135deg, #12081c, #211127);
}

#globalStats.style-ice-prism .stat {
  background:
    radial-gradient(circle at 16% 12%, rgba(160,240,255,0.15), transparent 48%),
    radial-gradient(circle at 86% 82%, rgba(184,140,255,0.13), transparent 50%),
    linear-gradient(135deg, #071421, #10162a);
}

#globalStats.style-singularity .stat {
  background:
    radial-gradient(circle at 50% 0%, rgba(184,140,255,0.18), transparent 54%),
    radial-gradient(circle at 82% 82%, rgba(115,240,207,0.12), transparent 50%),
    linear-gradient(135deg, #030206, #10071d);
}

.recommendation-bar.lounge-themed-ui.style-void-grid {
  background:
    radial-gradient(circle at 50% 0%, rgba(115,240,207,0.16), transparent 58%),
    linear-gradient(135deg, #070714, #111326);
}

.recommendation-bar.lounge-themed-ui.style-orbital-rings {
  background:
    radial-gradient(circle at 18% 12%, rgba(255,209,102,0.13), transparent 46%),
    radial-gradient(circle at 82% 82%, rgba(115,240,207,0.12), transparent 48%),
    linear-gradient(135deg, #070716, #141027);
}

.recommendation-bar.lounge-themed-ui.style-plasma-wave {
  background:
    radial-gradient(circle at 18% 18%, rgba(255,80,190,0.16), transparent 52%),
    radial-gradient(circle at 88% 78%, rgba(115,240,207,0.14), transparent 54%),
    linear-gradient(135deg, #10051a, #06151a);
}

.recommendation-bar.lounge-themed-ui.style-golden-circuit {
  background:
    radial-gradient(circle at 22% 16%, rgba(255,209,102,0.18), transparent 48%),
    linear-gradient(135deg, #171005, #281d08);
}

.recommendation-bar.lounge-themed-ui.style-laser-cross {
  background:
    radial-gradient(circle at 20% 20%, rgba(255,80,140,0.16), transparent 48%),
    radial-gradient(circle at 84% 78%, rgba(115,240,207,0.14), transparent 52%),
    linear-gradient(135deg, #090914, #16071d);
}

.recommendation-bar.lounge-themed-ui.style-holo-bubbles {
  background:
    radial-gradient(circle at 20% 16%, rgba(115,240,207,0.15), transparent 48%),
    radial-gradient(circle at 82% 78%, rgba(255,120,210,0.13), transparent 50%),
    linear-gradient(135deg, #071018, #151024);
}

.recommendation-bar.lounge-themed-ui.style-matrix-neon {
  background:
    radial-gradient(circle at 50% 0%, rgba(115,240,207,0.16), transparent 58%),
    linear-gradient(135deg, #02130d, #06110f);
}

.recommendation-bar.lounge-themed-ui.style-royal-oval {
  background:
    radial-gradient(circle at 18% 12%, rgba(255,209,102,0.15), transparent 48%),
    radial-gradient(circle at 82% 84%, rgba(184,140,255,0.15), transparent 50%),
    linear-gradient(135deg, #12081c, #211127);
}

.recommendation-bar.lounge-themed-ui.style-ice-prism {
  background:
    radial-gradient(circle at 16% 12%, rgba(160,240,255,0.15), transparent 48%),
    radial-gradient(circle at 86% 82%, rgba(184,140,255,0.13), transparent 50%),
    linear-gradient(135deg, #071421, #10162a);
}

.recommendation-bar.lounge-themed-ui.style-singularity {
  background:
    radial-gradient(circle at 50% 0%, rgba(184,140,255,0.18), transparent 54%),
    radial-gradient(circle at 82% 82%, rgba(115,240,207,0.12), transparent 50%),
    linear-gradient(135deg, #030206, #10071d);
}

.recommendation-bar.lounge-themed-ui,
.recommendation-bar.lounge-themed-ui * {
  text-shadow:
    -1px -1px 0 rgba(0,0,0,0.95),
     1px -1px 0 rgba(0,0,0,0.95),
    -1px  1px 0 rgba(0,0,0,0.95),
     1px  1px 0 rgba(0,0,0,0.95),
     0  2px 4px rgba(0,0,0,0.9);
}

.recommendation-bar.lounge-themed-ui .recommendation-label,
.recommendation-bar.lounge-themed-ui .recommendation-title,
.recommendation-bar.lounge-themed-ui .recommendation-detail,
.recommendation-bar.lounge-themed-ui .recommendation-cost {
  text-shadow:
    -1px -1px 0 #000,
     1px -1px 0 #000,
    -1px  1px 0 #000,
     1px  1px 0 #000,
     0  0 6px rgba(0,0,0,0.95),
     0  2px 5px rgba(0,0,0,0.95);
}

.recommendation-bar.lounge-themed-ui .recommendation-cost {
  background: rgba(0,0,0,0.36);
  border-color: rgba(255,255,255,0.16);
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,0.06),
    0 6px 16px rgba(0,0,0,0.34);
}

.recommendation-bar.lounge-themed-ui .recommendation-cost.can-buy {
  color: var(--accent-2);
  background: rgba(0,0,0,0.42);
  border-color: rgba(115,240,207,0.48);
}

.recommendation-bar.lounge-themed-ui .recommendation-cost.research-buy {
  color: white;
  background:
    radial-gradient(circle at 50% 0%, rgba(77,163,255,0.28), transparent 58%),
    linear-gradient(135deg, rgba(20,32,72,0.92), rgba(35,24,70,0.94));
  border-color: rgba(77,163,255,0.52);
}

.lounge-themed-ui.style-void-grid .bottom-tab,
.lounge-themed-ui.style-void-grid.shop-floating-wrap .shop-floating-button,
.lounge-themed-ui.style-void-grid.shop-floating-wrap .chest-floating-button,
.lounge-themed-ui.style-void-grid.shop-floating-wrap .floating-quest-button,
.lounge-themed-ui.style-void-grid.shop-floating-wrap .leaderboard-floating-button,
.lounge-themed-ui.style-void-grid.shop-floating-wrap .vip-battle-floating-button,
.lounge-themed-ui.style-void-grid.left-floating-stack .social-floating-button,
.lounge-themed-ui.style-void-grid.left-floating-stack .gem-floating-button,
.lounge-themed-ui.style-void-grid.left-floating-stack .equipment-floating-button,
.lounge-themed-ui.style-void-grid.left-floating-stack .location-floating-button,
.lounge-themed-ui.style-void-grid.left-floating-stack .leaderboard-floating-button {
  background:
    radial-gradient(circle at 50% 0%, rgba(115,240,207,0.16), transparent 58%),
    linear-gradient(135deg, #070714, #111326);
}

.lounge-themed-ui.style-orbital-rings .bottom-tab,
.lounge-themed-ui.style-orbital-rings.shop-floating-wrap .shop-floating-button,
.lounge-themed-ui.style-orbital-rings.shop-floating-wrap .chest-floating-button,
.lounge-themed-ui.style-orbital-rings.shop-floating-wrap .floating-quest-button,
.lounge-themed-ui.style-orbital-rings.shop-floating-wrap .leaderboard-floating-button,
.lounge-themed-ui.style-orbital-rings.shop-floating-wrap .vip-battle-floating-button,
.lounge-themed-ui.style-orbital-rings.left-floating-stack .social-floating-button,
.lounge-themed-ui.style-orbital-rings.left-floating-stack .gem-floating-button,
.lounge-themed-ui.style-orbital-rings.left-floating-stack .equipment-floating-button,
.lounge-themed-ui.style-orbital-rings.left-floating-stack .location-floating-button,
.lounge-themed-ui.style-orbital-rings.left-floating-stack .leaderboard-floating-button {
  background:
    radial-gradient(circle at 18% 12%, rgba(255,209,102,0.13), transparent 46%),
    radial-gradient(circle at 82% 82%, rgba(115,240,207,0.12), transparent 48%),
    linear-gradient(135deg, #070716, #141027);
}

.lounge-themed-ui.style-plasma-wave .bottom-tab,
.lounge-themed-ui.style-plasma-wave.shop-floating-wrap .shop-floating-button,
.lounge-themed-ui.style-plasma-wave.shop-floating-wrap .chest-floating-button,
.lounge-themed-ui.style-plasma-wave.shop-floating-wrap .floating-quest-button,
.lounge-themed-ui.style-plasma-wave.shop-floating-wrap .leaderboard-floating-button,
.lounge-themed-ui.style-plasma-wave.shop-floating-wrap .vip-battle-floating-button,
.lounge-themed-ui.style-plasma-wave.left-floating-stack .social-floating-button,
.lounge-themed-ui.style-plasma-wave.left-floating-stack .gem-floating-button,
.lounge-themed-ui.style-plasma-wave.left-floating-stack .equipment-floating-button,
.lounge-themed-ui.style-plasma-wave.left-floating-stack .location-floating-button,
.lounge-themed-ui.style-plasma-wave.left-floating-stack .leaderboard-floating-button {
  background:
    radial-gradient(circle at 18% 18%, rgba(255,80,190,0.16), transparent 52%),
    radial-gradient(circle at 88% 78%, rgba(115,240,207,0.14), transparent 54%),
    linear-gradient(135deg, #10051a, #06151a);
}

.lounge-themed-ui.style-golden-circuit .bottom-tab,
.lounge-themed-ui.style-golden-circuit.shop-floating-wrap .shop-floating-button,
.lounge-themed-ui.style-golden-circuit.shop-floating-wrap .chest-floating-button,
.lounge-themed-ui.style-golden-circuit.shop-floating-wrap .floating-quest-button,
.lounge-themed-ui.style-golden-circuit.shop-floating-wrap .leaderboard-floating-button,
.lounge-themed-ui.style-golden-circuit.shop-floating-wrap .vip-battle-floating-button,
.lounge-themed-ui.style-golden-circuit.left-floating-stack .social-floating-button,
.lounge-themed-ui.style-golden-circuit.left-floating-stack .gem-floating-button,
.lounge-themed-ui.style-golden-circuit.left-floating-stack .equipment-floating-button,
.lounge-themed-ui.style-golden-circuit.left-floating-stack .location-floating-button,
.lounge-themed-ui.style-golden-circuit.left-floating-stack .leaderboard-floating-button {
  background:
    radial-gradient(circle at 22% 16%, rgba(255,209,102,0.18), transparent 48%),
    linear-gradient(135deg, #171005, #281d08);
}

.lounge-themed-ui.style-laser-cross .bottom-tab,
.lounge-themed-ui.style-laser-cross.shop-floating-wrap .shop-floating-button,
.lounge-themed-ui.style-laser-cross.shop-floating-wrap .chest-floating-button,
.lounge-themed-ui.style-laser-cross.shop-floating-wrap .floating-quest-button,
.lounge-themed-ui.style-laser-cross.shop-floating-wrap .leaderboard-floating-button,
.lounge-themed-ui.style-laser-cross.shop-floating-wrap .vip-battle-floating-button,
.lounge-themed-ui.style-laser-cross.left-floating-stack .social-floating-button,
.lounge-themed-ui.style-laser-cross.left-floating-stack .gem-floating-button,
.lounge-themed-ui.style-laser-cross.left-floating-stack .equipment-floating-button,
.lounge-themed-ui.style-laser-cross.left-floating-stack .location-floating-button,
.lounge-themed-ui.style-laser-cross.left-floating-stack .leaderboard-floating-button {
  background:
    radial-gradient(circle at 20% 20%, rgba(255,80,140,0.16), transparent 48%),
    radial-gradient(circle at 84% 78%, rgba(115,240,207,0.14), transparent 52%),
    linear-gradient(135deg, #090914, #16071d);
}

.lounge-themed-ui.style-holo-bubbles .bottom-tab,
.lounge-themed-ui.style-holo-bubbles.shop-floating-wrap .shop-floating-button,
.lounge-themed-ui.style-holo-bubbles.shop-floating-wrap .chest-floating-button,
.lounge-themed-ui.style-holo-bubbles.shop-floating-wrap .floating-quest-button,
.lounge-themed-ui.style-holo-bubbles.shop-floating-wrap .leaderboard-floating-button,
.lounge-themed-ui.style-holo-bubbles.shop-floating-wrap .vip-battle-floating-button,
.lounge-themed-ui.style-holo-bubbles.left-floating-stack .social-floating-button,
.lounge-themed-ui.style-holo-bubbles.left-floating-stack .gem-floating-button,
.lounge-themed-ui.style-holo-bubbles.left-floating-stack .equipment-floating-button,
.lounge-themed-ui.style-holo-bubbles.left-floating-stack .location-floating-button,
.lounge-themed-ui.style-holo-bubbles.left-floating-stack .leaderboard-floating-button {
  background:
    radial-gradient(circle at 20% 16%, rgba(115,240,207,0.15), transparent 48%),
    radial-gradient(circle at 82% 78%, rgba(255,120,210,0.13), transparent 50%),
    linear-gradient(135deg, #071018, #151024);
}

.lounge-themed-ui.style-matrix-neon .bottom-tab,
.lounge-themed-ui.style-matrix-neon.shop-floating-wrap .shop-floating-button,
.lounge-themed-ui.style-matrix-neon.shop-floating-wrap .chest-floating-button,
.lounge-themed-ui.style-matrix-neon.shop-floating-wrap .floating-quest-button,
.lounge-themed-ui.style-matrix-neon.shop-floating-wrap .leaderboard-floating-button,
.lounge-themed-ui.style-matrix-neon.shop-floating-wrap .vip-battle-floating-button,
.lounge-themed-ui.style-matrix-neon.left-floating-stack .social-floating-button,
.lounge-themed-ui.style-matrix-neon.left-floating-stack .gem-floating-button,
.lounge-themed-ui.style-matrix-neon.left-floating-stack .equipment-floating-button,
.lounge-themed-ui.style-matrix-neon.left-floating-stack .location-floating-button,
.lounge-themed-ui.style-matrix-neon.left-floating-stack .leaderboard-floating-button {
  background:
    radial-gradient(circle at 50% 0%, rgba(115,240,207,0.16), transparent 58%),
    linear-gradient(135deg, #02130d, #06110f);
}

.lounge-themed-ui.style-royal-oval .bottom-tab,
.lounge-themed-ui.style-royal-oval.shop-floating-wrap .shop-floating-button,
.lounge-themed-ui.style-royal-oval.shop-floating-wrap .chest-floating-button,
.lounge-themed-ui.style-royal-oval.shop-floating-wrap .floating-quest-button,
.lounge-themed-ui.style-royal-oval.shop-floating-wrap .leaderboard-floating-button,
.lounge-themed-ui.style-royal-oval.shop-floating-wrap .vip-battle-floating-button,
.lounge-themed-ui.style-royal-oval.left-floating-stack .social-floating-button,
.lounge-themed-ui.style-royal-oval.left-floating-stack .gem-floating-button,
.lounge-themed-ui.style-royal-oval.left-floating-stack .equipment-floating-button,
.lounge-themed-ui.style-royal-oval.left-floating-stack .location-floating-button,
.lounge-themed-ui.style-royal-oval.left-floating-stack .leaderboard-floating-button {
  background:
    radial-gradient(circle at 18% 12%, rgba(255,209,102,0.15), transparent 48%),
    radial-gradient(circle at 82% 84%, rgba(184,140,255,0.15), transparent 50%),
    linear-gradient(135deg, #12081c, #211127);
}

.lounge-themed-ui.style-ice-prism .bottom-tab,
.lounge-themed-ui.style-ice-prism.shop-floating-wrap .shop-floating-button,
.lounge-themed-ui.style-ice-prism.shop-floating-wrap .chest-floating-button,
.lounge-themed-ui.style-ice-prism.shop-floating-wrap .floating-quest-button,
.lounge-themed-ui.style-ice-prism.shop-floating-wrap .leaderboard-floating-button,
.lounge-themed-ui.style-ice-prism.shop-floating-wrap .vip-battle-floating-button,
.lounge-themed-ui.style-ice-prism.left-floating-stack .social-floating-button,
.lounge-themed-ui.style-ice-prism.left-floating-stack .gem-floating-button,
.lounge-themed-ui.style-ice-prism.left-floating-stack .equipment-floating-button,
.lounge-themed-ui.style-ice-prism.left-floating-stack .location-floating-button,
.lounge-themed-ui.style-ice-prism.left-floating-stack .leaderboard-floating-button {
  background:
    radial-gradient(circle at 16% 12%, rgba(160,240,255,0.15), transparent 48%),
    radial-gradient(circle at 86% 82%, rgba(184,140,255,0.13), transparent 50%),
    linear-gradient(135deg, #071421, #10162a);
}

.lounge-themed-ui.style-singularity .bottom-tab,
.lounge-themed-ui.style-singularity.shop-floating-wrap .shop-floating-button,
.lounge-themed-ui.style-singularity.shop-floating-wrap .chest-floating-button,
.lounge-themed-ui.style-singularity.shop-floating-wrap .floating-quest-button,
.lounge-themed-ui.style-singularity.shop-floating-wrap .leaderboard-floating-button,
.lounge-themed-ui.style-singularity.shop-floating-wrap .vip-battle-floating-button,
.lounge-themed-ui.style-singularity.left-floating-stack .social-floating-button,
.lounge-themed-ui.style-singularity.left-floating-stack .gem-floating-button,
.lounge-themed-ui.style-singularity.left-floating-stack .equipment-floating-button,
.lounge-themed-ui.style-singularity.left-floating-stack .location-floating-button,
.lounge-themed-ui.style-singularity.left-floating-stack .leaderboard-floating-button {
  background:
    radial-gradient(circle at 50% 0%, rgba(184,140,255,0.18), transparent 54%),
    radial-gradient(circle at 82% 82%, rgba(115,240,207,0.12), transparent 50%),
    linear-gradient(135deg, #030206, #10071d);
}

.lounge-themed-ui .bottom-tab {
  position: relative;
  overflow: visible;
}

.bottom-nav-wrap,
.bottom-nav {
  overflow: visible;
}

.bottom-tab {
  position: relative;
  overflow: visible;
}

.bottom-tab.locked-tab::after,
.bottom-tab.locked::after,
.locked-tab::after {
  z-index: 999;
}

.bottom-nav {
  isolation: isolate;
}

.lounge-themed-ui.shop-floating-wrap .shop-floating-button,
.lounge-themed-ui.shop-floating-wrap .chest-floating-button,
.lounge-themed-ui.shop-floating-wrap .floating-quest-button,
.lounge-themed-ui.shop-floating-wrap .leaderboard-floating-button,
.lounge-themed-ui.shop-floating-wrap .vip-battle-floating-button,
.lounge-themed-ui.left-floating-stack .social-floating-button,
.lounge-themed-ui.left-floating-stack .gem-floating-button,
.lounge-themed-ui.left-floating-stack .equipment-floating-button,
.lounge-themed-ui.left-floating-stack .location-floating-button,
.lounge-themed-ui.left-floating-stack .leaderboard-floating-button {
  position: relative;
  overflow: visible;
}

.lounge-themed-ui .bottom-tab::before,
.lounge-themed-ui.shop-floating-wrap .shop-floating-button::before,
.lounge-themed-ui.shop-floating-wrap .chest-floating-button::before,
.lounge-themed-ui.shop-floating-wrap .floating-quest-button::before,
.lounge-themed-ui.shop-floating-wrap .leaderboard-floating-button::before,
.lounge-themed-ui.shop-floating-wrap .vip-battle-floating-button::before,
.lounge-themed-ui.left-floating-stack .social-floating-button::before,
.lounge-themed-ui.left-floating-stack .gem-floating-button::before,
.lounge-themed-ui.left-floating-stack .equipment-floating-button::before,
.lounge-themed-ui.left-floating-stack .location-floating-button::before,
.lounge-themed-ui.left-floating-stack .leaderboard-floating-button::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;

  background:
    linear-gradient(180deg, rgba(255,255,255,0.06), transparent 30%),
    linear-gradient(180deg, rgba(0,0,0,0.30), rgba(0,0,0,0.50));

  z-index: 0;
}

.lounge-themed-ui .bottom-tab > *,
.lounge-themed-ui.shop-floating-wrap .shop-floating-button > *,
.lounge-themed-ui.shop-floating-wrap .chest-floating-button > *,
.lounge-themed-ui.shop-floating-wrap .floating-quest-button > *,
.lounge-themed-ui.shop-floating-wrap .leaderboard-floating-button > *,
.lounge-themed-ui.shop-floating-wrap .vip-battle-floating-button > *,
.lounge-themed-ui.left-floating-stack .social-floating-button > *,
.lounge-themed-ui.left-floating-stack .gem-floating-button > *,
.lounge-themed-ui.left-floating-stack .equipment-floating-button > *,
.lounge-themed-ui.left-floating-stack .location-floating-button > *,
.lounge-themed-ui.left-floating-stack .leaderboard-floating-button > * {
  position: relative;
  z-index: 1;
}

.lounge-themed-ui .bottom-tab,
.lounge-themed-ui.shop-floating-wrap .shop-floating-button,
.lounge-themed-ui.shop-floating-wrap .chest-floating-button,
.lounge-themed-ui.shop-floating-wrap .floating-quest-button,
.lounge-themed-ui.shop-floating-wrap .leaderboard-floating-button,
.lounge-themed-ui.shop-floating-wrap .vip-battle-floating-button,
.lounge-themed-ui.left-floating-stack .social-floating-button,
.lounge-themed-ui.left-floating-stack .gem-floating-button,
.lounge-themed-ui.left-floating-stack .equipment-floating-button,
.lounge-themed-ui.left-floating-stack .location-floating-button,
.lounge-themed-ui.left-floating-stack .leaderboard-floating-button {
  text-shadow:
    -1px -1px 0 #000,
     1px -1px 0 #000,
    -1px  1px 0 #000,
     1px  1px 0 #000,
     0  2px 4px rgba(0,0,0,0.95);
}

.equipment-full-bonus-star {
  position: absolute;
  left: -7px;
  top: -9px;
  width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: rgba(255,209,102,0.95);
  color: #241600;
  font-size: 12px;
  font-weight: 900;
  box-shadow: 0 0 12px rgba(255,209,102,0.75);
  z-index: 5;
}

.equipment-bonus-info-row {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 10px;
  border-radius: 14px;
  background: rgba(255,255,255,0.055);
  border: 1px solid rgba(255,255,255,0.09);
  font-size: 12px;
}

.equipment-bonus-info-row span {
  color: var(--accent-2);
  font-weight: 900;
  text-align: right;
}

.kpi-dashboard {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
}

.kpi-slot {
  min-height: 54px;
  width: 100%;
  text-align: center;
  color: var(--text);
  cursor: pointer;
  touch-action: manipulation;
  user-select: none;
  position: relative;
  overflow: hidden;
}

.kpi-slot:active {
  transform: scale(0.97);
}

.kpi-single {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 38px;
}

.kpi-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
  align-items: center;
  min-height: 38px;
}

.kpi-gem-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3px 6px;
  align-items: center;
  min-height: 38px;
  font-size: 10px;
  font-weight: 800;
}

.kpi-gem-grid strong {
  color: var(--text);
  font-size: 10px;
}

.kpi-progress-box {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.kpi-progress-percent {
  color: var(--accent-2);
  font-size: 11px;
  font-weight: 900;
  text-align: right;
}

.kpi-mini-bar {
  height: 6px;
  background: rgba(255,255,255,0.08);
  border-radius: 999px;
  overflow: hidden;
}

.kpi-mini-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--accent-2), var(--accent));
  border-radius: inherit;
  transition: width 0.2s ease;
}

.kpi-mini-label {
  color: var(--muted);
  font-size: 9px;
  text-align: right;
  white-space: nowrap;
}

.kpi-slot .stat-label {
  font-size: 10px;
  white-space: nowrap;
}

.kpi-slot .stat-value {
  font-size: 15px;
  line-height: 1.05;
  white-space: nowrap;
}

.kpi-slot {
  pointer-events: auto;
}

.kpi-slot * {
  pointer-events: none;
}

.kpi-slot.kpi-switching {
  animation: kpiSwitchPop 0.28s ease;
}

.kpi-slot.kpi-switching::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 16px;
  background: radial-gradient(circle at center, rgba(115,240,207,0.22), transparent 65%);
  pointer-events: none;
  animation: kpiSwitchGlow 0.28s ease;
}

@keyframes kpiSwitchPop {
  0% { transform: scale(0.96); filter: brightness(1); }
  55% { transform: scale(1.035); filter: brightness(1.25); }
  100% { transform: scale(1); filter: brightness(1); }
}

@keyframes kpiSwitchGlow {
  0% { opacity: 0; }
  45% { opacity: 1; }
  100% { opacity: 0; }
}

.recommendation-bar > div:first-child {
  cursor: pointer;
}

.recommendation-settings-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 9px;
  margin: 12px 0;
}

.recommendation-settings-list label {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 11px 12px;
  border-radius: 16px;
  background: rgba(255,255,255,0.045);
  border: 1px solid rgba(255,255,255,0.08);
  color: var(--text);
  font-size: 13px;
  font-weight: 800;
}

.recommendation-settings-list input {
  width: 20px;
  height: 20px;
  accent-color: var(--accent-2);
}

body.modal-closing-lock #globalStats,
body.modal-closing-lock #globalStats *,
body.modal-closing-lock .kpi-slot,
body.modal-closing-lock .kpi-slot * {
  pointer-events: none !important;
}

body.non-lounge-view .left-floating-stack,
body.non-lounge-view .shop-floating-wrap,
body.non-lounge-view .action-button-row {
  display: none !important;
}

body.non-lounge-view .phone-game {
  padding-bottom: calc(
    var(--bottom-nav-height) +
    16px +
    var(--safe-bottom)
  );
}

body.non-lounge-view #view-staff,
body.non-lounge-view #view-owner,
body.non-lounge-view #view-bar,
body.non-lounge-view #view-realestate,
body.non-lounge-view #view-location,
body.non-lounge-view #view-social {
  padding-bottom: 24px !important;
}

#startLayoutEditorButton {
  display: block;
  width: fit-content;
  max-width: 100%;
  margin: 12px auto 14px;
  text-align: center;
}

.custom-layout-stage .layout-object-locked {
  pointer-events: none;
}

.custom-layout-stage .layout-locked-visual {
  opacity: 0.38;
  filter: grayscale(1) brightness(0.65);
}

.layout-object-lock {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;

  font-size: clamp(18px, 6vw, 30px);
  color: var(--gold);
  text-shadow:
    0 0 10px rgba(255,209,102,0.9),
    0 0 22px rgba(255,209,102,0.45);

  background: rgba(0,0,0,0.18);
  border-radius: 12px;
  pointer-events: none;
  z-index: 30;
}.new-game-confirm-modal .kpi-hero-icon {
  color: var(--danger);
  background: rgba(255,122,144,0.12);
  border-color: rgba(255,122,144,0.28);
}

.new-game-confirm-actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 9px;
  margin-top: 12px;
}

.equipment-action-btn.danger {
  color: white;
  background: linear-gradient(135deg, #ff4d6d, #9f1239);
  border-color: rgba(255,122,144,0.45);
  box-shadow: 0 0 22px rgba(255,77,109,0.22);
}

.new-game-confirm-modal .kpi-hero-icon {
  color: var(--danger);
  background: rgba(255,122,144,0.12);
  border-color: rgba(255,122,144,0.28);
}

.new-game-confirm-actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 9px;
  margin-top: 12px;
}

.equipment-action-btn.danger {
  color: white;
  background: linear-gradient(135deg, #ff4d6d, #9f1239);
  border-color: rgba(255,122,144,0.45);
  box-shadow: 0 0 22px rgba(255,77,109,0.22);
}

.equipment-drop-zone {
  min-height: 54px;
  border-radius: 14px;
  transition:
    background 0.16s ease,
    border-color 0.16s ease,
    box-shadow 0.16s ease;
}

.equipment-drop-zone.drag-over {
  background: rgba(115, 240, 207, 0.08);
  outline: 1px dashed rgba(115, 240, 207, 0.55);
  outline-offset: 3px;
  box-shadow: inset 0 0 18px rgba(115, 240, 207, 0.08);
}

.equipment-mini-item {
  touch-action: none;
}

.equipment-mini-item.dragging {
  opacity: 0.45;
  transform: scale(0.92);
  filter: brightness(1.25);
}

.equipment-drag-placeholder {
  aspect-ratio: 1;
  width: 100%;
  min-width: 0;
  border-radius: 10px;
  border: 2px dashed rgba(115, 240, 207, 0.8);
  background: rgba(115, 240, 207, 0.12);
  box-shadow:
    0 0 12px rgba(115, 240, 207, 0.28),
    inset 0 0 12px rgba(115, 240, 207, 0.12);
}

.equipment-empty-drop-hint {
  grid-column: 1 / -1;
  min-height: 48px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  border: 1px dashed rgba(255,255,255,0.14);
}

.equipment-group-title-row {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 6px;
}

.equipment-group-title-row strong {
  min-width: 0;
  max-width: 170px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.equipment-group-rename-btn {
  width: 25px;
  height: 25px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;

  border: 0;
  border-radius: 9px;
  color: var(--text);
  background: rgba(115,240,207,0.12);
  border: 1px solid rgba(115,240,207,0.28);

  font-size: 12px;
  cursor: pointer;
  touch-action: manipulation;
}

.equipment-group-rename-btn:active {
  transform: scale(0.94);
}

.equipment-group-filter-btn {
  width: 25px;
  height: 25px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;

  border: 0;
  border-radius: 9px;
  color: var(--text);
  background: rgba(255,209,102,0.12);
  border: 1px solid rgba(255,209,102,0.28);

  font-size: 12px;
  cursor: pointer;
  touch-action: manipulation;
}

.equipment-group-filter-btn:active {
  transform: scale(0.94);
}

.equipment-filter-option {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px;
  border-radius: 14px;
  background: rgba(255,255,255,0.045);
  border: 1px solid rgba(255,255,255,0.09);
  color: var(--text);
  font-size: 12px;
  font-weight: bold;
}

.equipment-group-filter-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
  margin: 8px 0 12px;
}

.equipment-group-filter-grid label {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  padding: 9px;
  border-radius: 12px;
  background: rgba(255,255,255,0.055);
  border: 1px solid rgba(255,255,255,0.09);
  color: var(--text);
  font-size: 11px;
  font-weight: bold;
}

.equipment-mini-item,
.equipment-mini-item img,
.equipment-mini-icon {
  -webkit-user-drag: none;
  user-drag: none;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
}

.equipment-drag-ghost {
  position: fixed;
  z-index: 9999999;
  pointer-events: none;

  transform: translate(-50%, -50%) scale(1.08);
  opacity: 0.95;

  box-shadow:
    0 18px 38px rgba(0,0,0,0.45),
    0 0 18px rgba(115,240,207,0.45);

  filter: brightness(1.18);
}

.shop-tabs-four {
  grid-template-columns: repeat(4, 1fr);
}

.real-money-shop-list {
  display: grid;
  gap: 14px;
}

.real-money-shop-section {
  display: grid;
  gap: 8px;
}

.real-money-shop-section h3 {
  margin: 8px 0 0;
  font-size: 14px;
  color: var(--text);
}

.real-money-shop-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
}

.real-money-shop-offer {
  width: 100%;
  min-width: 0;
  min-height: 128px;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-areas:
    "icon"
    "title"
    "desc"
    "preview"
    "price";
  gap: 4px;
  justify-items: center;
  align-items: center;

  padding: 10px 7px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.09);
  background: linear-gradient(180deg, rgba(36,30,48,0.94), rgba(20,17,27,0.98));
  color: var(--text);
  text-align: center;
  cursor: pointer;
}

.real-money-shop-offer.best {
  border-color: rgba(115,240,207,0.36);
  box-shadow: 0 0 16px rgba(115,240,207,0.12);
}

.real-money-shop-offer.owned {
  border-color: rgba(255,209,102,0.35);
}

.real-money-shop-offer:disabled {
  opacity: 0.52;
  cursor: not-allowed;
  filter: grayscale(0.35);
}

.real-money-shop-icon {
  grid-area: icon;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.08);
  font-size: 18px;
  overflow: hidden;
}

.real-money-shop-chest-icon {
  background-repeat: no-repeat;
  background-size: 400% 200%;
  background-position: 0% 0%;
  image-rendering: auto;
  border: 0;
  background-color: transparent;
  filter: drop-shadow(0 6px 9px rgba(0,0,0,0.45));
}

.real-money-shop-offer strong {
  grid-area: title;
  font-size: 13px;
  line-height: 1.15;
}

.real-money-shop-offer em {
  grid-area: desc;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.25;
  font-style: normal;
}

.real-money-shop-preview {
  grid-area: preview;
  color: var(--accent-2);
  font-size: 11px;
  font-weight: bold;
}

.real-money-shop-offer small {
  grid-area: price;
  justify-self: center;
  padding: 6px 8px;
  border-radius: 999px;
  color: var(--gold);
  background: rgba(0,0,0,0.22);
  border: 1px solid rgba(255,255,255,0.08);
  font-size: 10px;
  font-weight: bold;
  white-space: nowrap;
}

.furniture-shop-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

.furniture-shop-card {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 10px;
  align-items: center;

  padding: 10px;
  border-radius: 18px;

  background: linear-gradient(135deg, rgba(184,140,255,0.15), rgba(115,240,207,0.08));
  border: 1px solid rgba(255,255,255,0.10);
}

.furniture-shop-thumb {
  width: 64px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 16px;

  background: rgba(0,0,0,0.24);
  border: 1px dashed rgba(255,255,255,0.18);
  overflow: hidden;

  color: var(--muted);
  font-size: 24px;
}

.furniture-shop-thumb img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  object-position: center;
  flex: 0 0 auto;
}

.furniture-shop-info {
  min-width: 0;
  display: grid;
  gap: 5px;
}

.furniture-shop-info h3 {
  margin: 0;
  font-size: 14px;
  color: var(--text);
}

.furniture-shop-cost,
.furniture-shop-bonus {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.furniture-pill {
  display: inline-flex;
  align-items: center;
  gap: 3px;

  padding: 4px 7px;
  border-radius: 999px;

  background: rgba(0,0,0,0.24);
  border: 1px solid rgba(255,255,255,0.10);

  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
}

.furniture-pill.bonus {
  color: var(--accent-2);
  border-color: rgba(115,240,207,0.24);
  background: rgba(115,240,207,0.08);
}

.furniture-shop-buy-btn {
  justify-self: start;
  margin-top: 4px;

  border: 0;
  border-radius: 13px;
  padding: 8px 12px;

  color: var(--text);
  background: rgba(115,240,207,0.13);
  border: 1px solid rgba(115,240,207,0.35);

  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
}

.furniture-shop-buy-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  filter: grayscale(0.6);
}

.custom-layout-stage .layout-object-furniture {
  background: transparent;
  border-radius: 0;
  border: 0;
  display: grid;
  place-items: center;
}

.layout-object-furniture img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.layout-object-furniture .furniture-placeholder-box {
  width: 72%;
  height: 72%;
  border-radius: 12px;
  border: 1px dashed rgba(255,255,255,0.28);
  background: rgba(255,255,255,0.06);
  display: grid;
  place-items: center;
  color: var(--muted);
  font-size: 20px;
}

/* Floating Buttons: gesperrt, aber Schloss sichtbar */
.shop-floating-button.locked-tab,
.chest-floating-button.locked-tab,
.floating-quest-button.locked-tab,
.social-floating-button.locked-tab,
.gem-floating-button.locked-tab,
.equipment-floating-button.locked-tab,
.location-floating-button.locked-tab,
.leaderboard-floating-button.locked-tab {
  opacity: 0.48;
  filter: grayscale(1) brightness(0.72);
  color: var(--text);
}

/* Falls ein Theme-Overlay zu dunkel über dem Button liegt */
.lounge-themed-ui.shop-floating-wrap .shop-floating-button::before,
.lounge-themed-ui.shop-floating-wrap .chest-floating-button::before,
.lounge-themed-ui.shop-floating-wrap .floating-quest-button::before,
.lounge-themed-ui.shop-floating-wrap .leaderboard-floating-button::before,
.lounge-themed-ui.left-floating-stack .social-floating-button::before,
.lounge-themed-ui.left-floating-stack .gem-floating-button::before,
.lounge-themed-ui.left-floating-stack .equipment-floating-button::before,
.lounge-themed-ui.left-floating-stack .location-floating-button::before,
.lounge-themed-ui.left-floating-stack .leaderboard-floating-button::before {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.055), transparent 30%),
    linear-gradient(180deg, rgba(0,0,0,0.12), rgba(0,0,0,0.24));
}

/* Lock-Optik bleibt, aber ohne das eigentliche Icon zu vergrauen */
.shop-floating-button.locked-tab,
.chest-floating-button.locked-tab,
.floating-quest-button.locked-tab,
.social-floating-button.locked-tab,
.gem-floating-button.locked-tab,
.equipment-floating-button.locked-tab,
.location-floating-button.locked-tab,
.leaderboard-floating-button.locked-tab {
  background:
    radial-gradient(circle at 50% 0%, rgba(255,255,255,0.08), transparent 55%),
    linear-gradient(135deg, rgba(58,52,69,0.92), rgba(33,27,45,0.94)) !important;

  box-shadow:
    0 10px 24px rgba(0,0,0,0.34),
    inset 0 0 14px rgba(255,255,255,0.035) !important;
}

/* Object Quest Lines */
.object-quest-indicator {
  position: absolute;
  right: -8px;
  top: -10px;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 999px;

  background: linear-gradient(135deg, #4b4654, #272330);
  color: rgba(255,255,255,0.82);

  font-size: 19px;
  font-weight: 1000;
  line-height: 1;
  cursor: pointer;
  pointer-events: auto;
  z-index: 40;

  box-shadow:
    0 8px 18px rgba(0,0,0,0.35),
    inset 0 0 0 1px rgba(255,255,255,0.12);

  animation: none;
}

.object-quest-indicator.is-active {
  background: linear-gradient(135deg, #4b4654, #272330);
  color: rgba(255,255,255,0.82);
  box-shadow:
    0 8px 18px rgba(0,0,0,0.35),
    inset 0 0 0 1px rgba(255,255,255,0.12);
}

.object-quest-indicator.is-claimable {
  color: #2b1900;
  background: linear-gradient(135deg, #fff3b0, #ffd166 45%, #ff8f00);
  box-shadow:
    0 8px 18px rgba(0,0,0,0.35),
    0 0 22px rgba(255,209,102,0.95),
    0 0 34px rgba(255,179,0,0.55);

  animation: objectQuestBounce 1.1s ease-in-out infinite;
}

.object-quest-tab.has-object-quest-reward {
  animation: objectQuestBounce 1.1s ease-in-out infinite;
}

.object-quest-tab.has-new-object-quest {
  animation: none;
}

.object-quest-claim-btn {
  animation: none;
}

@keyframes objectQuestBounce {
  0%, 100% { transform: translateY(0) scale(1); }
  45% { transform: translateY(-5px) scale(1.04); }
}

.object-quest-modal-card {
  max-height: min(660px, 82vh);
  overflow-x: hidden;
}

.object-quest-list-tabs {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  margin-bottom: 10px;
}

.object-quest-list-tab {
  border: 0;
  border-radius: 14px;
  padding: 10px 8px;
  color: var(--muted);
  background: var(--card-2);
  border: 1px solid rgba(255,255,255,0.08);
  font-size: 12px;
  font-weight: bold;
  cursor: pointer;
}

.object-quest-list-tab.active {
  color: var(--accent-2);
  background: rgba(115,240,207,0.13);
  border-color: rgba(115,240,207,0.35);
}

.object-quest-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: min(430px, 54vh);
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  padding-right: 3px;
}

.object-quest-card {
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 18px;
  padding: 12px;
  background: rgba(255,255,255,0.045);
  overflow: visible;
}

.object-quest-card.claimable {
  border-color: rgba(255,209,102,0.8);
  box-shadow: 0 0 18px rgba(255,209,102,0.22);
}

.object-quest-card.complete {
  background: rgba(115,240,207,0.07);
}

.object-quest-head {
  display: grid;
  grid-template-columns: 38px 1fr;
  gap: 10px;
  align-items: center;
  margin-bottom: 10px;
}

.object-quest-icon {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: rgba(0,0,0,0.22);
  border: 1px solid rgba(255,255,255,0.1);
  font-size: 20px;
}

.object-quest-head strong {
  display: block;
  color: var(--text);
  font-size: 14px;
  margin-bottom: 3px;
}

.object-quest-head span,
.object-quest-objective-row span,
.object-quest-reward span {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.object-quest-objective {
  display: grid;
  gap: 6px;
  margin-top: 9px;
}

.object-quest-objective-row,
.object-quest-reward {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}

.object-quest-objective-row strong {
  color: var(--accent-2);
  font-size: 11px;
  white-space: nowrap;
}

.object-quest-reward {
  margin-top: 10px;
  padding-top: 9px;
  border-top: 1px solid rgba(255,255,255,0.07);
}

.object-quest-reward strong {
  color: var(--gold);
  font-size: 11px;
  text-align: right;
}

.object-quest-claim-btn {
  display: block;
  position: relative;
  width: 100%;
  max-width: 100%;
  margin-top: 10px;
  border: 0;
  border-radius: 14px;
  padding: 11px 10px;
  color: #211400;
  background: linear-gradient(135deg, #fff0a3, #ffd166);
  font-weight: 1000;
  cursor: pointer;
  box-shadow: 0 0 18px rgba(255,209,102,0.45);
  overflow: hidden;
  z-index: 5;
  pointer-events: auto;
  touch-action: manipulation;
}

.object-quest-claim-btn > * {
  pointer-events: none;
}

.object-quest-claim-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    radial-gradient(circle at 50% 0%, rgba(255,255,255,0.45), transparent 48%),
    linear-gradient(135deg, rgba(255,255,255,0.10), rgba(255,209,102,0.18));
  opacity: 0.75;
  pointer-events: none;
  animation: objectQuestClaimInnerBounce 1.1s ease-in-out infinite;
}

.object-quest-claim-btn {
  animation: objectQuestClaimGlow 1.1s ease-in-out infinite;
}

@keyframes objectQuestClaimInnerBounce {
  0%, 100% {
    transform: scaleX(1) scaleY(1);
    opacity: 0.55;
  }

  45% {
    transform: scaleX(1.08) scaleY(1.16);
    opacity: 1;
  }
}

@keyframes objectQuestClaimGlow {
  0%, 100% {
    box-shadow: 0 0 18px rgba(255,209,102,0.45);
  }

  45% {
    box-shadow:
      0 0 24px rgba(255,209,102,0.75),
      0 0 38px rgba(255,179,0,0.45);
  }
}

.bar-object.has-object-quest,
.kitchen-object.has-object-quest {
  pointer-events: auto;
}

.object-quest-property-section {
  display: grid;
  gap: 10px;
  margin-bottom: 14px;
  padding: 10px;
  border-radius: 16px;
  background: rgba(255,255,255,0.045);
  border: 1px solid rgba(255,255,255,0.08);
}

.object-quest-property-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  color: var(--text);
  font-size: 12px;
}

.object-quest-property-section-head span,
.object-quest-property-label {
  color: var(--muted);
  font-size: 10px;
  font-weight: bold;
}

.object-quest-property-label {
  margin-bottom: 8px;
  padding: 5px 8px;
  border-radius: 999px;
  width: fit-content;
  background: rgba(115,240,207,0.10);
  border: 1px solid rgba(115,240,207,0.22);
  color: var(--accent-2);
}

/* Finaler Fix: Furniture-Shop + Inventar Thumbnails nie abschneiden */
.furniture-shop-thumb,
.layout-inventory-thumb {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

/* Wichtig: Bild bekommt eine echte eigene Box.
   object-fit: contain skaliert dann auch 1:2 hohe Bilder sauber rein. */
.furniture-shop-thumb img,
.layout-inventory-thumb img,
.furniture-shop-thumb > img,
.layout-inventory-thumb > img {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;

  object-fit: contain !important;
  object-position: center center !important;

  display: block !important;
  box-sizing: border-box !important;
  padding: 3px !important;

  min-width: 0 !important;
  min-height: 0 !important;
  flex: 0 0 100% !important;
}

.layout-save-list {
  display: grid;
  gap: 9px;
  margin-top: 10px;
}

.layout-save-card {
  display: grid;
  gap: 8px;
  padding: 10px;
  border-radius: 16px;
  background: rgba(255,255,255,0.045);
  border: 1px solid rgba(255,255,255,0.09);
}

.layout-save-card.locked {
  opacity: 0.5;
  filter: grayscale(0.5);
}

.layout-save-card strong {
  color: var(--text);
  font-size: 13px;
}

.layout-save-card small {
  color: var(--muted);
  font-size: 11px;
}

.layout-save-actions {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
}

.layout-save-actions button {
  border: 0;
  border-radius: 12px;
  padding: 8px 5px;
  font-size: 10px;
  font-weight: 900;
  color: var(--text);
  background: rgba(255,255,255,0.08);
}

.layout-save-actions button:disabled {
  opacity: 0.4;
  filter: grayscale(0.7);
}

/* Scrollbares Lounge-Inventar im Location-Tab und im Layout-Editor */
#layoutInventoryList,
#layoutEditorInventoryList,
.layout-inventory-list,
.layout-editor-inventory-list {
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  touch-action: pan-y;
  padding-right: 3px;
}

/* Inventar außerhalb des Editors im Location-Tab */
#layoutInventoryList {
  max-height: min(48dvh, 430px);
  padding-bottom: 18px;
}

/* Inventarleiste innerhalb des Lounge Editors */
.layout-editor-inventory-tray {
  max-height: min(30dvh, 230px);
  overflow: hidden;
}

#layoutEditorInventoryList {
  max-height: calc(min(30dvh, 230px) - 30px);
  padding-bottom: 8px;
}

#layoutInventoryList,
#layoutEditorInventoryList {
  touch-action: pan-y !important;
}

#layoutInventoryList .layout-inventory-stack,
#layoutEditorInventoryList .layout-inventory-stack {
  touch-action: pan-y !important;
}

/* Main Story / To-do Quest Button */

.story-quest-badge {
  position: absolute;
  top: -6px;
  right: -6px;

  min-width: 21px;
height: 21px;
  padding: 0 5px;

  display: grid;
  place-items: center;

  border-radius: 999px;
  background: var(--gold);
  color: #19121f;
  border: 1px solid rgba(0,0,0,0.25);

  font-size: 12px;
  font-weight: 900;
  font-family: Arial, Helvetica, sans-serif;
  line-height: 1;
  z-index: 45;

  box-shadow:
    0 6px 14px rgba(0,0,0,0.45),
    0 0 12px rgba(255,209,102,0.45);

  pointer-events: none;
}

.story-quest-badge.hidden {
  display: none;
}

/* Main Story Quest Ready State */

.lounge-themed-ui.shop-floating-wrap .floating-quest-button.story-ready,
.floating-quest-button.story-ready {
  border-color: rgba(255,209,102,0.98) !important;

  background:
    radial-gradient(circle at 50% 0%, rgba(255,209,102,0.38), transparent 58%),
    radial-gradient(circle at 85% 85%, rgba(255,209,102,0.24), transparent 72%),
    linear-gradient(135deg, rgba(92,64,18,0.98), rgba(38,25,8,0.98)) !important;

  box-shadow:
    0 12px 28px rgba(0,0,0,0.38),
    inset 0 0 18px rgba(255,255,255,0.05),
    inset 0 0 28px rgba(0,0,0,0.24),
    0 0 16px rgba(255,209,102,0.65),
    0 0 30px rgba(255,209,102,0.38) !important;

  animation: storyQuestReadyPulse 1.25s ease-in-out infinite;
}

@keyframes storyQuestReadyPulse {
  0%, 100% {
    transform: scale(1);
    filter: saturate(1.05) brightness(1);
  }

  50% {
    transform: scale(1.08);
    filter: saturate(1.45) brightness(1.18);
  }
}

/* Main Story Quest Modal */

.main-story-quest-modal {
  max-height: min(78dvh, 620px);
  overflow-y: auto;
  overflow-x: hidden;
}

.main-story-quest-hero {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  margin-bottom: 12px;
}

.main-story-quest-icon {
  width: 48px;
  height: 48px;

  display: grid;
  place-items: center;

  border-radius: 16px;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.1);

  font-size: 24px;

  box-shadow:
    inset 0 0 18px rgba(255,255,255,0.035),
    0 10px 24px rgba(0,0,0,0.28);
}

.main-story-quest-kicker {
  color: var(--accent-2);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.8px;
}

.main-story-quest-subtitle {
  color: var(--text);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.25;
  margin-top: 3px;
}

.main-story-task-list {
  display: grid;
  gap: 8px;
}

.main-story-task-row {
  background: rgba(255,255,255,0.045);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px;
  padding: 10px;
}

.main-story-task-row.complete {
  border-color: rgba(115,240,207,0.32);
  background: rgba(115,240,207,0.08);
}

.main-story-task-head {
  display: flex;
  justify-content: space-between;
  gap: 8px;

  font-size: 12px;
  font-weight: 900;
  color: var(--text);
}

.main-story-task-progress {
  color: var(--accent-2);
  white-space: nowrap;
}

.main-story-task-bar {
  height: 7px;
  margin-top: 7px;

  border-radius: 999px;
  background: rgba(255,255,255,0.08);
  overflow: hidden;
}

.main-story-task-fill {
  height: 100%;
  width: 0%;

  border-radius: inherit;
  background: linear-gradient(90deg, var(--accent-2), var(--accent));
  transition: width 0.2s ease;
}

.main-story-next-reward {
  margin-top: 12px;
  padding: 10px;

  border-radius: 14px;
  color: var(--gold);
  background: rgba(255,209,102,0.08);
  border: 1px solid rgba(255,209,102,0.18);

  font-size: 12px;
  font-weight: 800;
  line-height: 1.35;
}

.main-story-quest-actions {
  margin-top: 12px;
  display: grid;
  gap: 8px;
}

#continueMainStoryQuestButton.hidden {
  display: none;
}

#continueMainStoryQuestButton.story-ready {
  color: #19121f;
  background:
    radial-gradient(circle at 50% 0%, rgba(255,255,255,0.35), transparent 58%),
    linear-gradient(135deg, #ffd166, #ffb347);
  border-color: rgba(255,209,102,0.85);
  box-shadow:
    0 10px 24px rgba(0,0,0,0.35),
    0 0 18px rgba(255,209,102,0.45);
}

/* Main Story Image Modal */

.main-story-modal {
  width: min(396px, calc(100vw - 28px));
  max-height: min(86dvh, 720px);
  overflow-y: auto;
  overflow-x: hidden;
}

.main-story-modal-hero {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: stretch;
  margin-bottom: 12px;
}

.main-story-modal-image {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
  object-fit: cover;
  border-radius: 20px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  box-shadow:
    inset 0 0 18px rgba(255,255,255,0.035),
    0 14px 30px rgba(0,0,0,0.34);
}

.main-story-modal-copy {
  min-width: 0;
}

.main-story-modal-kicker {
  color: var(--accent-2);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  margin-bottom: 4px;
}

.main-story-modal-subtitle {
  color: var(--text);
  font-size: 14px;
  font-weight: 900;
  line-height: 1.25;
  text-align: left;
}

.main-story-modal-body {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

.main-story-modal-body p {
  margin: 0 0 9px;
}

.main-story-modal-actions {
  margin-top: 14px;
  display: grid;
  gap: 8px;
}

.main-story-quest-image {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
  object-fit: cover;
  border-radius: 20px;
  margin: 0 0 12px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  box-shadow:
    inset 0 0 18px rgba(255,255,255,0.035),
    0 14px 30px rgba(0,0,0,0.34);
}

.main-story-quest-modal {
  width: min(396px, calc(100vw - 28px));
  max-height: min(86dvh, 720px);
  overflow-y: auto;
  overflow-x: hidden;
}

.story-guide-target {
  position: relative;
  z-index: 120 !important;
  animation: storyGuideGoldPulse 1.05s ease-in-out infinite !important;
  border-color: rgba(255,209,102,0.98) !important;
  box-shadow:
    0 0 0 2px rgba(255,209,102,0.42),
    0 0 18px rgba(255,209,102,0.72),
    0 0 34px rgba(255,209,102,0.36) !important;
}

.story-guide-target::after {
  content: '!';
  position: absolute;
  right: -8px;
  top: -10px;
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: var(--gold);
  color: #19121f;
  border: 1px solid rgba(0,0,0,0.25);
  font-size: 15px;
  font-weight: 900;
  line-height: 1;
  pointer-events: none;
  box-shadow: 0 8px 18px rgba(0,0,0,0.45);
}

@keyframes storyGuideGoldPulse {
  0%, 100% {
    transform: scale(1);
    filter: saturate(1.08) brightness(1);
  }

  50% {
    transform: scale(1.07);
    filter: saturate(1.35) brightness(1.18);
  }
}

.location-tabs .tab-btn.locked-tab {
  opacity: 0.42;
  filter: grayscale(1);
}

.furniture-shop-card {
  position: relative;
}

.furniture-shop-card.story-guide-target {
  transform-origin: center;
}

.furniture-shop-card.story-guide-target::after {
  right: 6px;
  top: 6px;
}

.object-quest-list-tabs.single-tab {
  grid-template-columns: 1fr;
}

.object-quest-list-tabs.single-tab .object-quest-list-tab {
  pointer-events: none;
}

.leaderboard-rank {
  border: 0;
  cursor: pointer;
  touch-action: manipulation;
}

.leaderboard-rank:active {
  transform: scale(0.94);
}

.leaderboard-layout-modal {
  width: min(390px, calc(100vw - 24px));
}

.leaderboard-layout-preview-wrap {
  width: 100%;
  display: flex;
  justify-content: center;
  margin-top: 10px;
}

.leaderboard-layout-preview-lounge {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1.18;
  max-height: 58dvh;
  background: linear-gradient(180deg, rgba(36,30,48,0.86), rgba(15,13,20,0.95));
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 24px;
  overflow: hidden;
  box-shadow:
    inset 0 0 60px rgba(184, 140, 255, 0.06),
    0 20px 60px rgba(0,0,0,0.28);
}

.leaderboard-layout-preview-lounge .floor {
  position: absolute;
  left: var(--floor-inset);
  right: var(--floor-inset);
  top: var(--floor-top);
  bottom: var(--floor-inset);
}

.leaderboard-layout-preview-lounge .layout-stage {
  width: 100%;
  height: 100%;
}

.leaderboard-layout-preview-lounge .layout-object {
  pointer-events: none;
}

.leaderboard-layout-preview-empty {
  padding: 18px;
  color: var(--muted);
  text-align: center;
  font-size: 13px;
}

.vip-battle-floating-button {
  position: relative;
  pointer-events: auto;
}

.vip-battle-floating-button.has-reward {
  animation: questButtonBounce 1.15s ease-in-out infinite;
}

.vip-battle-modal {
  width: min(398px, calc(100vw - 24px));
  max-height: 86dvh;
  overflow-y: auto;
  overflow-x: hidden;
}

.vip-battle-modal::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0.85;
  z-index: 0;
}

.vip-battle-modal > * {
  position: relative;
  z-index: 1;
}

.vip-battle-modal.vip-battle-easy::before {
  background:
    radial-gradient(circle at 50% 0%, rgba(115,240,207,0.24), transparent 58%),
    linear-gradient(180deg, rgba(39,190,130,0.13), transparent 65%);
}

.vip-battle-modal.vip-battle-even::before {
  background:
    radial-gradient(circle at 50% 0%, rgba(90,170,255,0.24), transparent 58%),
    linear-gradient(180deg, rgba(80,130,255,0.12), transparent 65%);
}

.vip-battle-modal.vip-battle-danger::before {
  background:
    radial-gradient(circle at 50% 0%, rgba(255,122,144,0.28), transparent 58%),
    linear-gradient(180deg, rgba(255,90,120,0.14), transparent 65%);
}

.vip-battle-modal.vip-battle-extreme::before {
  background:
    radial-gradient(circle at 50% 0%, rgba(255,80,90,0.36), transparent 58%),
    radial-gradient(circle at 90% 10%, rgba(255,209,102,0.14), transparent 42%),
    linear-gradient(180deg, rgba(255,40,80,0.18), transparent 70%);
}

.vip-battle-season-card {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 12px;
}

.vip-battle-season-card > div {
  padding: 10px;
  border-radius: 16px;
  background: rgba(255,255,255,0.055);
  border: 1px solid rgba(255,255,255,0.09);
  text-align: center;
}

.vip-battle-season-card span {
  display: block;
  color: var(--muted);
  font-size: 10px;
  margin-bottom: 4px;
}

.vip-battle-season-card strong {
  color: var(--text);
  font-size: 13px;
}

.vip-battle-daily-rewards,
.vip-battle-opponent-card {
  padding: 12px;
  border-radius: 18px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.09);
  margin-bottom: 12px;
}

.vip-battle-progress-head,
.vip-battle-power-row,
.vip-battle-category-row,
.vip-battle-history-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  font-size: 12px;
}

.vip-battle-win-track {
  position: relative;
  height: 8px;
  margin: 8px 0 10px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(255,255,255,0.1);
}

.vip-battle-win-fill {
  height: 100%;
  width: 0%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--accent-2), var(--gold));
  transition: width 0.2s ease;
}

.vip-battle-reward-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 7px;
}

.vip-battle-reward {
  border: 0;
  border-radius: 14px;
  padding: 9px 5px;
  color: var(--text);
  background: rgba(0,0,0,0.22);
  border: 1px solid rgba(255,255,255,0.1);
  cursor: pointer;
}

.vip-battle-reward strong {
  display: block;
  font-size: 11px;
  margin-bottom: 3px;
}

.vip-battle-reward span {
  display: block;
  font-size: 9px;
  color: var(--muted);
  line-height: 1.2;
}

.vip-battle-reward.ready {
  color: var(--accent-2);
  border-color: rgba(115,240,207,0.42);
  box-shadow: 0 0 16px rgba(115,240,207,0.18);
}

.vip-battle-reward.claimed {
  opacity: 0.55;
  filter: grayscale(0.7);
}

.vip-battle-opponent-title {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: flex-start;
  margin-bottom: 10px;
}

.vip-battle-opponent-title h3 {
  margin: 0;
  font-size: 16px;
}

.vip-battle-opponent-title span {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 11px;
}

.vip-battle-power-grid {
  display: grid;
  gap: 7px;
  margin: 10px 0;
}

.vip-battle-power-row {
  padding: 8px 10px;
  border-radius: 14px;
  background: rgba(0,0,0,0.2);
  border: 1px solid rgba(255,255,255,0.08);
}

.vip-battle-power-row strong {
  color: var(--gold);
}

.vip-battle-advantages {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 10px;
}

.vip-battle-advantage-box {
  padding: 9px;
  border-radius: 14px;
  background: rgba(0,0,0,0.18);
  border: 1px solid rgba(255,255,255,0.08);
}

.vip-battle-advantage-box strong {
  display: block;
  font-size: 11px;
  margin-bottom: 6px;
}

.vip-battle-pill-list {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.vip-battle-pill {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 4px 6px;
  border-radius: 999px;
  font-size: 9.5px;
  background: rgba(255,255,255,0.08);
  color: var(--text);
}

.vip-battle-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 12px;
}

.vip-battle-tabs {
  margin-bottom: 10px;
}

.vip-battle-panel {
  display: none;
}

.vip-battle-panel.active {
  display: block;
}

.vip-battle-main-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  width: 100%;
  margin-bottom: 12px;
}

.vip-battle-main-tabs .modal-tab-btn {
  width: 100%;
  justify-content: center;
  text-align: center;
}

.vip-battle-main-panel {
  display: none;
}

.vip-battle-main-panel.active {
  display: block;
}

.vip-battle-history-list {
  display: grid;
  gap: 8px;
}

.vip-battle-history-item {
  padding: 10px;
  border-radius: 16px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
}

.vip-battle-history-head strong {
  font-size: 12px;
}

.vip-battle-history-head span {
  color: var(--muted);
  font-size: 10px;
}

.vip-battle-history-result {
  margin-top: 6px;
  color: var(--accent-2);
  font-size: 11px;
  font-weight: 900;
}

.vip-battle-history-result.lost {
  color: var(--danger);
}

.vip-battle-category-list {
  display: grid;
  gap: 5px;
  margin-top: 8px;
}

.vip-battle-category-row {
  padding: 6px 8px;
  border-radius: 12px;
  background: rgba(0,0,0,0.18);
  font-size: 10.5px;
}

.vip-battle-category-row .winner-own {
  color: var(--accent-2);
  font-weight: 900;
}

.vip-battle-category-row .winner-enemy {
  color: var(--danger);
  font-weight: 900;
}

.vip-battle-empty {
  padding: 16px;
  color: var(--muted);
  text-align: center;
  font-size: 12px;
  line-height: 1.35;
}

.vip-battle-category-details {
  display: block;
}

.vip-battle-category-details summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  list-style: none;
}

.vip-battle-category-details summary::-webkit-details-marker {
  display: none;
}

.vip-battle-category-details summary::after {
  content: '⌄';
  color: var(--muted);
  font-size: 12px;
  transition: transform 0.18s ease;
}

.vip-battle-category-details[open] summary::after {
  transform: rotate(180deg);
}

.vip-battle-score-breakdown {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid rgba(255,255,255,0.08);
}

.vip-battle-score-breakdown > div {
  padding: 8px;
  border-radius: 12px;
  background: rgba(0,0,0,0.18);
}

.vip-battle-score-breakdown strong {
  display: block;
  margin-bottom: 5px;
  color: var(--gold);
  font-size: 10.5px;
}

.vip-battle-score-breakdown span {
  display: block;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.35;
}

.vip-campaign-card .equipment-action-btn {
  width: 100%;
  margin-top: 10px;
}

.equipment-bulk-actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 7px;
  margin: 8px 0 10px;
}

.equipment-mini-item.bulk-selected {
  border-color: rgba(115, 240, 207, 0.95) !important;
  box-shadow:
    0 0 0 2px rgba(115, 240, 207, 0.5),
    0 0 18px rgba(115, 240, 207, 0.4) !important;
  transform: scale(0.96);
  filter: brightness(1.25);
}

.equipment-mini-item.bulk-selected::after {
  content: "✓";
  position: absolute;
  right: -4px;
  top: -4px;

  width: 18px;
  height: 18px;

  display: grid;
  place-items: center;

  border-radius: 999px;
  background: rgba(115, 240, 207, 0.96);
  color: #06120f;

  font-size: 12px;
  font-weight: 900;

  box-shadow: 0 0 12px rgba(115, 240, 207, 0.65);
  z-index: 20;
}

.vip-campaign-fight-top-btn {
  margin: 10px 0 12px;
  width: 100%;
  justify-content: center;
  text-align: center;
}

.vip-battle-floating-button {
  width: var(--floating-size);
  height: var(--floating-size);

  display: grid;
  place-items: center;

  border-radius: clamp(15px, 4vw, 18px);
  border: 1px solid rgba(184,140,255,0.42);

  color: white;
  background:
    radial-gradient(circle at 50% 0%, var(--tile-glow, rgba(184,140,255,0.18)), transparent 58%),
    radial-gradient(circle at 85% 85%, var(--tile-glow, rgba(184,140,255,0.18)), transparent 72%),
    linear-gradient(135deg, var(--tile-base-top, rgba(20, 17, 32, 0.92)), var(--tile-base-bottom, rgba(38, 24, 58, 0.94)));

  box-shadow:
    0 10px 28px rgba(0,0,0,0.38),
    inset 0 0 18px rgba(255,255,255,0.035),
    inset 0 0 26px rgba(0,0,0,0.24),
    0 0 14px var(--tile-glow, rgba(184,140,255,0.28));

  font-size: clamp(21px, 5.8vw, 24px);
  font-weight: 900;
  text-shadow:
    -1px -1px 0 #000,
     1px -1px 0 #000,
    -1px  1px 0 #000,
     1px  1px 0 #000,
     0  2px 4px rgba(0,0,0,0.95);

  cursor: pointer;
  pointer-events: auto;
  touch-action: manipulation;
  position: relative;
  overflow: visible;
}

.vip-battle-floating-button::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;

  background:
    linear-gradient(180deg, rgba(255,255,255,0.06), transparent 30%),
    linear-gradient(180deg, rgba(0,0,0,0.30), rgba(0,0,0,0.50));

  z-index: 0;
}

.vip-battle-floating-button > * {
  position: relative;
  z-index: 1;
}

.milestone-top-filters {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
  margin-bottom: 8px;
  position: relative;
  z-index: 21;
  pointer-events: auto;
}

.milestone-filter-tab {
  border: 0;
  border-radius: 14px;
  padding: 8px 4px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.09);
  color: var(--muted);
  font-size: 10px;
  font-weight: 900;
  cursor: pointer;
  white-space: nowrap;
  position: relative;
  z-index: 22;
  pointer-events: auto;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
}

.milestone-filter-tab.active {
  color: var(--accent-2);
  background: rgba(115,240,207,0.13);
  border-color: rgba(115,240,207,0.35);
  box-shadow: 0 0 14px rgba(115,240,207,0.18);
}

.milestone-group-select-wrap {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 8px;
  align-items: center;
  margin-bottom: 10px;
  padding: 8px 10px;
  border-radius: 14px;
  background: rgba(0,0,0,0.22);
  border: 1px solid rgba(255,255,255,0.08);
  position: relative;
  z-index: 21;
  pointer-events: auto;
}

.milestone-group-select-wrap span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
}

.milestone-group-select {
  width: 100%;
  border: 0;
  border-radius: 12px;
  padding: 8px 10px;
  color: var(--text);
  background: var(--card-2);
  border: 1px solid rgba(255,255,255,0.10);
  font-size: 12px;
  font-weight: 900;
  position: relative;
  z-index: 22;
  pointer-events: auto;
}

.milestone-group-select option {
  background: #1a1622;
  color: white;
}

/* =========================================
   PREMIUM MEILENSTEIN FILTER UI
========================================= */

.milestone-top-filters {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
  margin: 0 0 10px;
  padding: 4px;
  border-radius: 19px;
  position: relative;
  z-index: 21;
  pointer-events: auto;

  background:
    radial-gradient(circle at 50% 0%, rgba(184,140,255,0.14), transparent 55%),
    linear-gradient(180deg, rgba(255,255,255,0.06), rgba(0,0,0,0.22)),
    rgba(15,13,20,0.88);

  border: 1px solid rgba(184,140,255,0.20);

  box-shadow:
    0 14px 34px rgba(0,0,0,0.34),
    0 0 18px rgba(184,140,255,0.10),
    inset 0 1px 1px rgba(255,255,255,0.06);
}

.milestone-filter-tab {
  min-width: 0;
  min-height: 42px;

  display: grid;
  place-items: center;

  border: 0;
  border-radius: 15px;
  padding: 8px 3px;

  color: var(--muted);
  font-size: 10px;
  font-weight: 900;
  line-height: 1.1;
  white-space: nowrap;

  cursor: pointer;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;

  position: relative;
  z-index: 22;
  overflow: hidden;

  background:
    radial-gradient(circle at 50% 0%, rgba(184,140,255,0.16), transparent 58%),
    radial-gradient(circle at 90% 100%, rgba(115,240,207,0.10), transparent 70%),
    linear-gradient(180deg, var(--card-2), #15111d);

  border: 1px solid rgba(255,255,255,0.10);

  box-shadow:
    0 8px 20px rgba(0,0,0,0.28),
    inset 0 1px 1px rgba(255,255,255,0.055),
    inset 0 -10px 18px rgba(0,0,0,0.18);
}

.milestone-filter-tab::before {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: 14px;
  pointer-events: none;

  background:
    linear-gradient(180deg, rgba(255,255,255,0.08), transparent 36%),
    radial-gradient(circle at 50% 0%, rgba(255,255,255,0.06), transparent 42%);
}

.milestone-filter-tab.active {
  color: var(--accent-2);

  background:
    radial-gradient(circle at 50% 0%, rgba(115,240,207,0.34), transparent 56%),
    radial-gradient(circle at 90% 100%, rgba(184,140,255,0.22), transparent 70%),
    linear-gradient(180deg, #263244, #171824);

  border-color: rgba(115,240,207,0.45);

  box-shadow:
    0 0 18px rgba(115,240,207,0.22),
    0 10px 24px rgba(0,0,0,0.34),
    inset 0 0 16px rgba(115,240,207,0.08),
    inset 0 -10px 20px rgba(0,0,0,0.22);
}

.milestone-filter-tab.active::after {
  content: "";
  position: absolute;
  left: 14%;
  right: 14%;
  bottom: 4px;
  height: 2px;
  border-radius: 999px;
  pointer-events: none;

  background: linear-gradient(90deg, transparent, var(--accent-2), transparent);
  box-shadow: 0 0 10px rgba(115,240,207,0.85);
}

.milestone-filter-tab:active {
  transform: scale(0.96);
}

.milestone-group-select-wrap {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 9px;
  align-items: center;

  margin: 0 0 12px;
  padding: 9px 10px;

  border-radius: 18px;
  position: relative;
  z-index: 21;
  pointer-events: auto;
  overflow: hidden;

  background:
    radial-gradient(circle at 10% 0%, rgba(184,140,255,0.17), transparent 45%),
    radial-gradient(circle at 100% 100%, rgba(115,240,207,0.10), transparent 60%),
    linear-gradient(180deg, var(--card), #14111b);

  border: 1px solid rgba(184,140,255,0.18);

  box-shadow:
    0 12px 30px rgba(0,0,0,0.32),
    0 0 18px rgba(184,140,255,0.08),
    inset 0 1px 1px rgba(255,255,255,0.055),
    inset 0 -12px 22px rgba(0,0,0,0.22);
}

.milestone-group-select-wrap::before {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: 17px;
  pointer-events: none;

  background:
    linear-gradient(180deg, rgba(255,255,255,0.065), transparent 35%),
    linear-gradient(90deg, rgba(115,240,207,0.06), transparent 50%, rgba(184,140,255,0.06));
}

.milestone-group-select-wrap span {
  position: relative;
  z-index: 1;

  color: var(--accent-2);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.55px;

  text-shadow:
    0 0 10px rgba(115,240,207,0.28),
    0 2px 4px rgba(0,0,0,0.8);
}

.milestone-group-select {
  position: relative;
  z-index: 2;

  width: 100%;
  min-width: 0;
  min-height: 38px;

  border: 0;
  border-radius: 14px;
  padding: 9px 35px 9px 11px;

  color: var(--text);

  background:
    linear-gradient(180deg, rgba(255,255,255,0.075), rgba(255,255,255,0.025)),
    rgba(0,0,0,0.25);

  border: 1px solid rgba(255,255,255,0.12);

  font-size: 12px;
  font-weight: 900;

  cursor: pointer;
  outline: none;
  appearance: none;
  -webkit-appearance: none;

  box-shadow:
    inset 0 0 12px rgba(0,0,0,0.26),
    0 0 12px rgba(115,240,207,0.07);
}

.milestone-group-select-wrap::after {
  content: "⌄";
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-52%);
  z-index: 3;
  pointer-events: none;

  color: var(--gold);
  font-size: 17px;
  font-weight: 900;

  text-shadow:
    0 0 10px rgba(255,209,102,0.45),
    0 2px 4px rgba(0,0,0,0.9);
}

.milestone-group-select:focus {
  border-color: rgba(115,240,207,0.45);

  box-shadow:
    0 0 0 1px rgba(115,240,207,0.18),
    0 0 18px rgba(115,240,207,0.16),
    inset 0 0 12px rgba(0,0,0,0.26);
}

.milestone-group-select option {
  background: #1a1622;
  color: white;
}

.daily-main-tabs,
.milestone-top-filters,
.milestone-group-select-wrap {
  position: relative;
  z-index: 20;
  pointer-events: auto;
}

.daily-main-tab,
.milestone-filter-tab,
.milestone-group-select,
.milestone-claim-btn {
  position: relative;
  z-index: 21;
  pointer-events: auto;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
}

/* Social Gameplay: Freunde / Bonus */

.social-gameplay-tabs {
  grid-template-columns: repeat(3, 1fr);
}

.social-gameplay-panel {
  display: none;
}

.social-gameplay-panel.active {
  display: block;
}

.social-friends-controls {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  margin-bottom: 10px;
}

.social-input,
.social-select {
  width: 100%;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 14px;
  padding: 11px 12px;
  color: var(--text);
  background: rgba(0,0,0,0.24);
  outline: none;
  font-size: 13px;
}

.social-select {
  cursor: pointer;
}

.social-select {
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;

  padding-right: 38px;

  color: var(--text);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.075), rgba(255,255,255,0.025)),
    rgba(0,0,0,0.34);

  border: 1px solid rgba(255,255,255,0.14);

  box-shadow:
    inset 0 0 12px rgba(0,0,0,0.32),
    0 0 12px rgba(115,240,207,0.08);
}

.social-select:focus {
  border-color: rgba(115,240,207,0.45);
  box-shadow:
    0 0 0 1px rgba(115,240,207,0.18),
    0 0 18px rgba(115,240,207,0.16),
    inset 0 0 12px rgba(0,0,0,0.32);
}

.social-select option {
  background: #1a1622;
  color: #f7f2ff;
}

.social-select option:checked {
  background: #241e30;
  color: #73f0cf;
}

.social-gameplay-friend-card {
  display: grid;
  gap: 8px;
}

.social-gameplay-friend-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.social-gameplay-friend-head strong {
  display: block;
  font-size: 14px;
  line-height: 1.2;
}

.social-gameplay-friend-head span {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.25;
}

.friendship-level-pill {
  border: 0;
  border-radius: 999px;
  padding: 7px 9px;
  color: #19121f;
  background: linear-gradient(135deg, var(--gold), #ffb347);
  font-size: 11px;
  font-weight: 900;
  cursor: pointer;
  white-space: nowrap;
  box-shadow:
    0 0 14px rgba(255,209,102,0.26),
    inset 0 1px 1px rgba(255,255,255,0.35);
}

.friendship-level-pill:active {
  transform: scale(0.96);
}

.friendship-xp-bar {
  height: 8px;
  border-radius: 999px;
  background: rgba(255,255,255,0.08);
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.06);
}

.friendship-xp-fill {
  height: 100%;
  width: 0%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--accent-2), var(--accent));
  transition: width 0.2s ease;
  box-shadow: 0 0 10px rgba(115,240,207,0.35);
}

.social-friend-actions.two-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.social-action-btn.compact.visit-friend-lounge-btn,
.social-action-btn.compact.send-friend-gift-btn {
  min-width: 0;
  width: 100%;
}

/* Social Bonus Tab */

.social-bonus-summary {
  display: grid;
  gap: 8px;
  margin-bottom: 10px;
}

.friend-active-bonus-pill {
  padding: 9px 11px;
  border-radius: 14px;
  color: var(--accent-2);
  background: rgba(115,240,207,0.10);
  border: 1px solid rgba(115,240,207,0.22);
  font-size: 12px;
  font-weight: 800;
}

.friend-bonus-card {
  display: grid;
  gap: 10px;
}

.activate-friend-bonus-btn {
  width: 100%;
}

/* Friend Visit Modal - schon vorbereitet für den nächsten Schritt */

.friend-visit-counter {
  margin: 8px 0 10px;
  padding: 9px 11px;
  border-radius: 14px;
  color: var(--accent-2);
  background: rgba(115,240,207,0.10);
  border: 1px solid rgba(115,240,207,0.22);
  font-weight: 900;
  text-align: center;
  font-size: 12px;
}

.friend-visit-finish-top {
  width: 100%;
  margin: 0 0 10px;
}

.friend-visit-legend {
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
  margin: 10px 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.25;
}

.friend-visit-lounge .layout-object,
.friend-visit-stage .layout-object,
.friend-visit-object {
  pointer-events: auto !important;
  cursor: pointer;
}

.friend-visit-object {
  filter:
    drop-shadow(0 0 4px rgba(115,240,207,0.18))
    drop-shadow(0 0 8px rgba(184,140,255,0.12));
}

.friend-visit-object:active {
  transform: scale(0.96);
}

.friend-visit-object-selected {
  outline: 2px solid rgba(115,240,207,0.95);
  outline-offset: 2px;
  border-radius: 10px;
  filter:
    drop-shadow(0 0 8px rgba(115,240,207,0.75))
    drop-shadow(0 0 16px rgba(115,240,207,0.35));
}

.layout-editor-btn.select,
.layout-editor-btn.style {
  color: var(--accent-2);
  background: rgba(5, 16, 18, 0.88);
  border-color: rgba(115,240,207,0.35);
  box-shadow:
    inset 0 0 10px rgba(115,240,207,0.08),
    0 0 8px rgba(0,0,0,0.35);
  text-shadow: 0 0 6px rgba(115,240,207,0.45);
}

.layout-editor-btn.select.active,
.layout-editor-btn.style:active {
  color: var(--accent-2);
  border-color: rgba(115,240,207,0.7);
  background: rgba(5, 16, 18, 0.94);
  box-shadow:
    0 0 14px rgba(115,240,207,0.32),
    inset 0 0 12px rgba(115,240,207,0.12);
  text-shadow: 0 0 8px rgba(115,240,207,0.65);
}

.layout-editor-btn.inventory {
  color: var(--gold);
}

.layout-object.multi-selected {
  outline: 2px solid var(--accent-2);
  outline-offset: 2px;
  filter:
    drop-shadow(0 0 5px rgba(115,240,207,0.85))
    drop-shadow(0 0 10px rgba(115,240,207,0.45));
}

body.layout-editor-selecting .layout-object.layout-draggable {
  cursor: pointer;
}

.equipment-modal-header {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 8px;
}

.equipment-modal-header h2 {
  grid-column: 1;
  justify-self: start;
}

.equipment-modal-header .mythic-fullset-level-badge {
  grid-column: 2;
  justify-self: center;
}

.equipment-header-actions {
  grid-column: 3;
  justify-self: end;

  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: flex-end;
}

.mythic-fullset-level-badge {
  width: 44px;
  height: 44px;
  border: 0;
  cursor: pointer;
  color: #eaffff;
  font-weight: 1000;
  font-size: 17px;
  line-height: 1;
  display: grid;
  place-items: center;
  position: relative;

  background:
    radial-gradient(circle at 50% 35%, rgba(120,230,255,0.50), transparent 58%),
    linear-gradient(135deg, rgba(7,20,32,0.98), rgba(12,50,66,0.98));

  clip-path: polygon(
    50% 0%,
    92% 24%,
    92% 76%,
    50% 100%,
    8% 76%,
    8% 24%
  );

  box-shadow:
    0 0 12px rgba(120,230,255,0.80),
    0 0 26px rgba(115,240,207,0.42),
    inset 0 0 14px rgba(255,255,255,0.18);

  text-shadow:
    0 0 6px rgba(120,230,255,0.95),
    0 2px 4px rgba(0,0,0,0.9);

  animation: mythicFullsetPulse 2.2s ease-in-out infinite;
}

.mythic-fullset-level-badge.hidden {
  display: none;
}

.mythic-fullset-level-badge:active {
  transform: scale(0.94);
}

@keyframes mythicFullsetPulse {
  0%, 100% {
    filter: drop-shadow(0 0 5px rgba(120,230,255,0.65));
  }

  50% {
    filter: drop-shadow(0 0 14px rgba(120,230,255,1));
  }
}

.mythic-fullset-bonus-modal {
  border-color: rgba(120,230,255,0.34);
  box-shadow:
    0 22px 70px rgba(0,0,0,0.58),
    0 0 32px rgba(120,230,255,0.20);
}

.mythic-fullset-current {
  margin: 10px 0 10px;
  padding: 10px 12px;
  border-radius: 16px;
  color: var(--accent-2);
  font-weight: 900;
  font-size: 13px;
  text-align: center;
  background: rgba(115,240,207,0.10);
  border: 1px solid rgba(115,240,207,0.25);
}

.mythic-fullset-summary {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
  margin-bottom: 12px;
}

.mythic-fullset-summary-pill {
  padding: 8px;
  border-radius: 14px;
  background: rgba(255,255,255,0.055);
  border: 1px solid rgba(255,255,255,0.09);
  font-size: 10.5px;
  color: var(--muted);
  line-height: 1.25;
}

.mythic-fullset-summary-pill strong {
  display: block;
  color: var(--accent-2);
  font-size: 12px;
  margin-bottom: 2px;
}

.mythic-fullset-bonus-list {
  display: grid;
  gap: 8px;
}

.mythic-fullset-bonus-row {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  padding: 10px;
  border-radius: 16px;
  background: rgba(255,255,255,0.045);
  border: 1px solid rgba(255,255,255,0.08);
}

.mythic-fullset-bonus-row.active {
  background:
    radial-gradient(circle at 10% 50%, rgba(120,230,255,0.20), transparent 42%),
    rgba(115,240,207,0.08);
  border-color: rgba(120,230,255,0.34);
  box-shadow: 0 0 16px rgba(120,230,255,0.14);
}

.mythic-fullset-bonus-row.locked {
  opacity: 0.48;
  filter: grayscale(0.75);
}

.mythic-fullset-bonus-level {
  width: 34px;
  height: 34px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  font-weight: 1000;
  color: var(--text);
  background: rgba(0,0,0,0.28);
  border: 1px solid rgba(255,255,255,0.12);
}

.mythic-fullset-bonus-row.active .mythic-fullset-bonus-level {
  color: #061114;
  background: linear-gradient(135deg, var(--accent-2), #9afcff);
  text-shadow: none;
}

.mythic-fullset-bonus-text strong {
  display: block;
  color: var(--text);
  font-size: 13px;
  margin-bottom: 2px;
}

.mythic-fullset-bonus-text span {
  display: block;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
}

.mythic-fullset-bonus-row.active .mythic-fullset-bonus-text span:last-child {
  color: var(--accent-2);
  font-weight: 800;
}

body.low-power-mode .people-layer,
body.low-power-mode .guest-dot,
body.low-power-mode .owner-dot {
  display: none !important;
  animation: none !important;
  transition: none !important;
}

body.low-power-mode .cloud {
  animation: none !important;
  opacity: 0.25;
}

body.low-power-mode .vibe.glow,
body.low-power-mode .vibe.no-vibe {
  animation: none !important;
}

.tab-btn.has-management-reward,
.management-card.training-available {
  border-color: rgba(255, 215, 120, 0.95) !important;
  box-shadow:
    0 0 10px rgba(255, 210, 90, 0.55),
    0 0 22px rgba(255, 180, 40, 0.38) !important;
  animation: managementRewardPulse 1.8s ease-in-out infinite;
}

.manager-training-btn:not(:disabled) {
  border-color: rgba(255, 215, 120, 0.9);
  box-shadow:
    0 0 10px rgba(255, 210, 90, 0.45),
    0 0 18px rgba(255, 180, 40, 0.25);
}

/* =========================================
   TIME LIMITED EVENTS - CLEAN BLOCK
========================================= */

/* Event View darf NICHT die allgemeine negative View-Verschiebung übernehmen */
body.event-mode #view-event {
  margin-top: 0 !important;
  z-index: 1 !important;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* Normale Top-KPIs im Event ausblenden */
body.event-mode #globalStats {
  display: none !important;
}

/* Event KPI Panel oben anzeigen */
.event-top-panel {
  display: grid;
  gap: 7px;
}

.event-top-panel.hidden {
  display: none !important;
}

body.event-mode #eventTopPanel {
  position: relative;
  z-index: 9;
  margin-bottom: 4px;
}

/* Event KPI Cards */
.event-stats-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 7px;
}

.event-stat-card {
  padding: 9px 8px;
  border-radius: 15px;
  background:
    radial-gradient(circle at 50% 0%, rgba(115,240,207,0.12), transparent 56%),
    linear-gradient(180deg, rgba(26,22,34,0.96), rgba(9,10,20,0.96));
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow: 0 8px 22px rgba(0,0,0,0.24);
  overflow: hidden;
}

.event-stat-card span {
  display: block;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.1;
}

.event-stat-card strong {
  display: block;
  margin-top: 3px;
  font-size: 13px;
  line-height: 1.1;
  color: var(--gold);
  white-space: nowrap;
}

/* Milestone Strip oben */
.event-milestone-strip {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 2px;
  scroll-snap-type: x proximity;
}

.event-milestone-dot {
  flex: 0 0 auto;
  min-width: 54px;
  padding: 6px 7px;
  border-radius: 12px;
  background: rgba(255,255,255,0.055);
  border: 1px solid rgba(255,255,255,0.09);
  opacity: 0.5;
  scroll-snap-align: start;
}

.event-milestone-dot.done {
  opacity: 1;
  border-color: rgba(255,209,102,0.5);
  box-shadow: 0 0 12px rgba(255,209,102,0.18);
}

.event-milestone-dot strong,
.event-milestone-dot span {
  display: block;
  text-align: center;
}

.event-milestone-dot strong {
  color: var(--gold);
  font-size: 11px;
  line-height: 1.1;
}

.event-milestone-dot span {
  color: var(--muted);
  font-size: 9px;
  line-height: 1.1;
}

/* Event Recommendation Bar sauber und kompakt */
body.event-mode #recommendationBar {
  position: relative;
  z-index: 8;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto;
  min-height: 72px;
  max-height: 78px;
  margin-bottom: 8px;
  padding: 8px 9px;
  align-items: center;
  overflow: hidden;
}

body.event-mode #recommendationBar .recommendation-label {
  font-size: 9px;
  line-height: 1.05;
  margin-bottom: 2px;
}

body.event-mode #recommendationBar .recommendation-title {
  font-size: 11px;
  line-height: 1.12;
  max-height: 26px;
  overflow: hidden;
}

body.event-mode #recommendationBar .recommendation-detail {
  font-size: 9px;
  line-height: 1.12;
  max-height: 22px;
  overflow: hidden;
}

body.event-mode #recommendationBar .recommendation-actions {
  min-width: 112px;
}

body.event-mode #recommendedUpgradeCost {
  min-width: 108px;
  max-width: 108px;
  white-space: normal;
  line-height: 1.05;
  text-align: center;
  padding: 7px 8px;
}

body.event-mode #recommendedMaxUpgradeButton {
  display: block !important;
  min-width: 108px;
  max-width: 108px;
  padding: 7px 8px;
  font-size: 10px;
}

body.event-mode #recommendationBar .recommendation-actions {
  min-width: 112px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 5px;
}

/* Event Screen */
.event-screen {
  height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* Der alte Event-Header im Screen wird ausgeblendet, weil KPIs jetzt oben sitzen */
body.event-mode .event-topbar {
  display: none !important;
}

/* Event Floor Bereich startet unter Recommendation Bar */
body.event-mode .event-screen {
  flex: 1 1 auto;
  min-height: 0;
  padding-top: 2px;
}

.event-floor-wrap {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  margin-top: 0;
  border-radius: 24px;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  z-index: 1;

  background:
    radial-gradient(circle at 50% 0%, rgba(184,140,255,0.16), transparent 45%),
    linear-gradient(180deg, rgba(36,30,48,0.88), rgba(7,8,18,0.98));
  border: 1px solid rgba(255,255,255,0.1);
  box-shadow:
    inset 0 0 60px rgba(184,140,255,0.08),
    0 18px 48px rgba(0,0,0,0.32);
}

/* Scroll bleibt aktiv, Scrollbar wird unsichtbar */
.event-milestone-strip,
.event-floor-wrap {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.event-milestone-strip::-webkit-scrollbar,
.event-floor-wrap::-webkit-scrollbar {
  display: none;
}

.event-milestone-info-btn {
  position: sticky;
  left: 0;
  z-index: 20;

  flex: 0 0 auto;
  width: 34px;
  min-width: 34px;
  height: 34px;
  align-self: center;

  border-radius: 999px;
  border: 1px solid rgba(255,209,102,0.65);
  background:
    radial-gradient(circle at 50% 0%, rgba(255,209,102,0.32), transparent 60%),
    linear-gradient(180deg, rgba(25,18,31,0.98), rgba(7,8,18,0.98));
  color: var(--gold);

  font-size: 15px;
  font-weight: 1000;
  font-family: Georgia, serif;
  cursor: pointer;

  box-shadow:
    8px 0 12px rgba(5,6,14,0.92),
    0 0 12px rgba(255,209,102,0.22),
    inset 0 0 10px rgba(255,255,255,0.05);
}

.event-milestone-info-btn:active {
  transform: scale(0.94);
}

/* Der eigentliche Event Floor */
.event-floor {
  position: relative !important;
  min-height: 1320px;
  padding: 24px 16px 70px;
  background:
    linear-gradient(90deg, rgba(115,240,207,0.08) 1px, transparent 1px),
    linear-gradient(180deg, rgba(184,140,255,0.08) 1px, transparent 1px);
  background-size: 42px 42px;
}

/* Event Objekte */
.event-object {
  position: absolute !important;
  display: block;
  width: 172px;
  min-height: 116px;
  border: 0;
  padding: 0;
  background: transparent;
  color: var(--text);
  cursor: pointer;
  touch-action: manipulation;
  appearance: none;
  -webkit-appearance: none;
}

.event-object.left {
  left: 18px !important;
  right: auto !important;
}

.event-object.right {
  left: auto !important;
  right: 18px !important;
}

/* Zickzack Positionen */
.event-object:nth-of-type(1) { top: 26px; }
.event-object:nth-of-type(2) { top: 156px; }
.event-object:nth-of-type(3) { top: 286px; }
.event-object:nth-of-type(4) { top: 416px; }
.event-object:nth-of-type(5) { top: 546px; }
.event-object:nth-of-type(6) { top: 676px; }
.event-object:nth-of-type(7) { top: 806px; }
.event-object:nth-of-type(8) { top: 936px; }
.event-object:nth-of-type(9) { top: 1066px; }
.event-object:nth-of-type(10) { top: 1196px; }

.event-object-core {
  position: relative;
  width: 100%;
  min-height: 116px;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 7px;
  align-items: center;
  text-align: left;
  padding: 12px 10px 10px 12px;
  border-radius: 24px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.15);
  box-shadow:
    0 14px 32px rgba(0,0,0,0.36),
    inset 0 0 22px rgba(255,255,255,0.04);
}

.event-object-main {
  min-width: 0;
  position: relative;
  z-index: 1;
  text-align: center;
}

.event-object-title-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-width: 0;
  margin-bottom: 4px;
}

.event-object-title-row .event-object-icon {
  flex: 0 0 auto;
}

.event-object-title-row strong,
.event-object-title-row em {
  text-align: center;
}

.event-object-actions {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 7px;
  width: 100%;
  margin-top: 5px;
}

.event-object-upgrade-btn {
  min-height: 30px;
  min-width: 52px;
  max-width: 68px;
  border: 0;
  border-radius: 11px;
  padding: 4px 5px;
  color: #050509 !important;
text-shadow: none !important;
  color: #050509;
  background: linear-gradient(135deg, #c99534, #a96f22);
  border: 1px solid rgba(0,0,0,0.34);
  font-size: 10px;
  font-weight: 1000;
  line-height: 1;
  cursor: pointer;
  box-shadow:
    0 5px 12px rgba(0,0,0,0.28),
    inset 0 1px 1px rgba(255,255,255,0.22);
  text-shadow: none;
}

.event-object-upgrade-btn small {
  display: block;
  margin-top: 2px;
  color: #050509 !important;
  font-size: 6.5px;
  line-height: 1;
  font-weight: 1000;
  white-space: nowrap;
  text-shadow: none !important;
  filter: none !important;
}

.event-object-upgrade-btn.milestone {
  color: #050509;
  background: linear-gradient(135deg, #3fbfa6, #2c78bd);
  text-shadow: none;
}

.event-object-upgrade-btn.not-ready {
  opacity: 0.42;
  filter: grayscale(0.75);
  box-shadow: none;
}

.event-object-upgrade-btn:active {
  transform: scale(0.94);
}

.event-object.locked .event-object-core {
  grid-template-columns: 1fr;
  text-align: center;
  place-items: center;
}

.event-object-core::before {
  content: "";
  position: absolute;
  inset: -40%;
  opacity: 0.7;
  animation: eventObjectPulse 2.4s ease-in-out infinite;
  pointer-events: none;
}

.event-object-core > * {
  position: relative;
  z-index: 1;
}

.event-object-icon {
  font-size: 24px;
  line-height: 1;
}

.event-object strong {
  display: block;
  font-size: 13px;
  line-height: 1.1;
}

.event-object em {
  display: block;
  color: var(--gold);
  font-style: normal;
  font-weight: 900;
  font-size: 12px;
  line-height: 1.1;
}

.event-object small {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 8.5px;
  line-height: 1.18;
}

.event-object.locked {
  opacity: 0.48;
  filter: grayscale(0.9);
}

.event-object.can-buy .event-object-core {
  border-color: rgba(255,209,102,0.88);
  box-shadow:
    0 14px 32px rgba(0,0,0,0.36),
    inset 0 0 22px rgba(255,255,255,0.04),
    0 0 0 2px rgba(255,209,102,0.28),
    0 0 20px rgba(255,209,102,0.42);
}

.event-object.can-buy .event-object-core::after {
  content: none !important;
}

/* Objekt Farben / Styles */
.event-object-1 .event-object-core {
  background: linear-gradient(135deg, #0b2a46, #102048);
}

.event-object-2 .event-object-core {
  background: linear-gradient(135deg, #073d52, #102a66);
}

.event-object-3 .event-object-core {
  background: linear-gradient(135deg, #171464, #3d1973);
}

.event-object-4 .event-object-core {
  background: linear-gradient(135deg, #102350, #13506a);
}

.event-object-5 .event-object-core {
  background: linear-gradient(135deg, #220f60, #063a61);
}

.event-object-6 .event-object-core {
  background: linear-gradient(135deg, #3d2b07, #5b360a);
}

.event-object-7 .event-object-core {
  background: linear-gradient(135deg, #4a123e, #09295e);
}

.event-object-8 .event-object-core {
  background: linear-gradient(135deg, #082f3d, #3a1766);
}

.event-object-9 .event-object-core {
  background: linear-gradient(135deg, #37144f, #5c3c0b);
}

.event-object-10 .event-object-core {
  background:
    radial-gradient(circle at 50% 50%, #000 0 12%, rgba(184,140,255,0.42) 13%, transparent 24%),
    linear-gradient(135deg, #05030c, #1b0830);
}

.event-object-1 .event-object-core::before { background: radial-gradient(circle, rgba(115,240,207,0.22), transparent 55%); }
.event-object-2 .event-object-core::before { background: radial-gradient(circle, rgba(80,170,255,0.28), transparent 55%); }
.event-object-3 .event-object-core::before { background: radial-gradient(circle, rgba(184,140,255,0.30), transparent 55%); }
.event-object-4 .event-object-core::before { background: conic-gradient(rgba(115,240,207,0.18), transparent, rgba(184,140,255,0.22)); }
.event-object-5 .event-object-core::before { background: radial-gradient(circle, rgba(255,80,210,0.28), transparent 58%); }
.event-object-6 .event-object-core::before { background: radial-gradient(circle, rgba(255,209,102,0.32), transparent 58%); }
.event-object-7 .event-object-core::before { background: conic-gradient(rgba(255,80,150,0.24), rgba(115,240,207,0.18), transparent); }
.event-object-8 .event-object-core::before { background: radial-gradient(circle, rgba(120,230,255,0.34), transparent 60%); }
.event-object-9 .event-object-core::before { background: conic-gradient(rgba(255,209,102,0.22), rgba(184,140,255,0.32), transparent); }
.event-object-10 .event-object-core::before { background: conic-gradient(rgba(255,209,102,0.3), rgba(115,240,207,0.26), rgba(184,140,255,0.34), rgba(255,209,102,0.3)); }

@keyframes eventObjectPulse {
  0%, 100% {
    transform: scale(1) rotate(0deg);
    opacity: 0.45;
  }

  50% {
    transform: scale(1.12) rotate(18deg);
    opacity: 0.92;
  }
}

/* Event Hub / Modal Cards */
.event-hub-card {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  align-items: center;
  padding: 14px;
  border-radius: 20px;
  margin-bottom: 12px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.11);
}

.event-hub-card.active {
  border-color: rgba(115,240,207,0.36);
  box-shadow: 0 0 22px rgba(115,240,207,0.12);
}

.event-hub-card.locked {
  opacity: 0.75;
}

.event-hub-icon {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 18px;
  background: rgba(0,0,0,0.24);
  font-size: 24px;
}

.event-hub-card strong,
.event-hub-card span,
.event-hub-card small {
  display: block;
}

.event-hub-card span {
  color: var(--accent-2);
  font-weight: 900;
  font-size: 12px;
}

.event-hub-card small {
  margin-top: 4px;
  color: var(--muted);
  line-height: 1.25;
}

/* Event Upgrade Modal */
.event-upgrade-hero {
  display: grid;
  place-items: center;
  text-align: center;
  gap: 4px;
  padding: 18px;
  border-radius: 22px;
  margin-bottom: 12px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
}

.event-upgrade-hero span {
  font-size: 34px;
}

.event-upgrade-hero strong,
.event-upgrade-hero em {
  display: block;
}

.event-upgrade-hero em {
  color: var(--gold);
  font-style: normal;
  font-weight: 900;
}

/* Event Roll Modal */
.event-roll-actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}

.event-roll-results {
  display: grid;
  gap: 7px;
  margin-bottom: 12px;
}

.event-roll-result,
.event-reward-row {
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
}

.event-roll-result strong,
.event-roll-result span {
  display: block;
}

.event-roll-result strong {
  color: var(--gold);
}

/* =========================================
   EVENT MODE BOTTOM BAR
   Chest links · Lounge Mitte · Leaderboard rechts
========================================= */

/* Perform + Lounge Upgrade im Event ausblenden */
body.event-mode #tapButton,
body.event-mode #upgradeLoungeButton,
body.event-mode .action-button-row {
  display: none !important;
}

/* Linke Floating-Leiste im Event komplett ausblenden */
body.event-mode .left-floating-stack {
  display: none !important;
}

/* Bottom Nav wird im Event zu einer 3er Leiste */
body.event-mode .bottom-nav {
  display: grid !important;
  grid-template-columns: 1fr 1.16fr 1fr !important;
  gap: 7px;
  align-items: center;
}

/* Alle normalen Bottom Tabs ausblenden */
body.event-mode .bottom-nav .bottom-tab {
  display: none !important;
}

/* Nur Lounge bleibt sichtbar und sitzt in der Mitte */
body.event-mode .bottom-nav .bottom-tab.home-tab {
  display: flex !important;
  grid-column: 2;
  width: 100%;
  margin-top: -8px;
}

/*
  WICHTIG:
  Im Event liegt cash-action-wrap nicht mehr über der Bottom Nav,
  sondern exakt auf der Bottom Nav.
  Chest/Leaderboard sind Kinder davon, deshalb müssen wir den Parent bewegen.
*/
body.event-mode .cash-action-wrap {
  position: fixed !important;
  left: 50% !important;
  bottom: calc(8px + var(--safe-bottom)) !important;
  transform: translateX(-50%) !important;

  width: min(430px, calc(100vw - 18px)) !important;
  height: calc(var(--bottom-nav-height) + 16px) !important;

  padding: 8px !important;
  display: block !important;

  pointer-events: none !important;
  z-index: 96 !important;
}

/* Floating Wrapper im Event als internes Overlay nutzen */
body.event-mode .shop-floating-wrap {
  position: absolute !important;
  inset: 8px !important;

  width: auto !important;
  height: auto !important;

  display: block !important;
  pointer-events: none !important;
  animation: none !important;
  transform: none !important;
  z-index: 1 !important;
}

/* Innere Floating-Struktur neutralisieren */
body.event-mode .bottom-floating-row,
body.event-mode .right-floating-column {
  position: static !important;
  display: contents !important;
  pointer-events: none !important;
}

/* Alles außer Chest/Leaderboard im Event aus */
body.event-mode .shop-floating-wrap .shop-floating-button,
body.event-mode .shop-floating-wrap .floating-quest-button,
body.event-mode .shop-floating-wrap .vip-battle-floating-button,
body.event-mode #dailyQuestButton,
body.event-mode #vipBattleButton {
  display: none !important;
}

/* Chest + Leaderboard jetzt ABSOLUTE innerhalb der Bottom-Bar-Fläche */
body.event-mode #chestButton,
body.event-mode #leaderboardButton {
  position: absolute !important;

  top: 50% !important;
  bottom: auto !important;

  width: var(--floating-size) !important;
  height: var(--floating-size) !important;

  display: grid !important;
  place-items: center !important;

  pointer-events: auto !important;
  z-index: 5 !important;

  margin: 0 !important;
  animation: none !important;
}

/* Chest links */
body.event-mode #chestButton {
  left: calc(((100% - 16px) / 3 - var(--floating-size)) / 2) !important;
  right: auto !important;
  transform: translateY(-50%) !important;
}

/* Leaderboard rechts */
body.event-mode #leaderboardButton {
  right: calc(((100% - 16px) / 3 - var(--floating-size)) / 2) !important;
  left: auto !important;
  transform: translateY(-50%) !important;
}

.property-hub-modal {
  max-height: min(82dvh, 720px);
}

.property-hub-tabs {
  margin-bottom: 12px;
}

.property-empire-summary {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 14px;
}

.property-empire-summary > div {
  border-radius: 14px;
  padding: 9px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
}

.property-empire-summary span {
  display: block;
  color: var(--muted);
  font-size: 10px;
  margin-bottom: 3px;
}

.property-empire-summary strong {
  color: var(--text);
  font-size: 13px;
}

.property-map {
  position: relative;
  display: grid;
  gap: 12px;
  padding-bottom: 6px;
}

.property-map-step {
  position: relative;
}

.property-map-line {
  position: absolute;
  left: 23px;
  top: -14px;
  width: 3px;
  height: 18px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(115,240,207,0.18), rgba(115,240,207,0.65));
  box-shadow: 0 0 12px rgba(115,240,207,0.22);
}

.property-map-step.locked .property-map-line {
  background: rgba(255,255,255,0.12);
  box-shadow: none;
}

.property-card {
  position: relative;
  border-radius: 18px;
  padding: 12px;
  background:
    radial-gradient(circle at 0% 0%, rgba(184,140,255,0.16), transparent 42%),
    linear-gradient(180deg, rgba(36,30,48,0.98), rgba(16,14,22,0.98));
  border: 1px solid rgba(255,255,255,0.1);
  box-shadow: 0 14px 34px rgba(0,0,0,0.28);
  overflow: hidden;
}

.property-map-step.active .property-card {
  border-color: rgba(115,240,207,0.42);
  box-shadow:
    0 14px 34px rgba(0,0,0,0.28),
    0 0 18px rgba(115,240,207,0.18);
}

.property-map-step.locked .property-card {
  opacity: 0.82;
  filter: grayscale(0.35);
}

.property-card-top {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px;
  align-items: center;
}

.property-icon {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 16px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.12);
  font-size: 24px;
}

.property-card-top strong {
  display: block;
  font-size: 15px;
  color: var(--text);
}

.property-card-top span {
  display: block;
  margin-top: 3px;
  color: var(--accent-2);
  font-size: 11px;
  font-weight: bold;
}

.property-card p {
  margin: 10px 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
}

.property-scaling-row,
.property-mini-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 8px 0 10px;
}

.property-scaling-row span,
.property-mini-stats span {
  border-radius: 999px;
  padding: 5px 7px;
  color: var(--text);
  background: rgba(0,0,0,0.22);
  border: 1px solid rgba(255,255,255,0.08);
  font-size: 10px;
  font-weight: bold;
}

.property-requirements {
  display: grid;
  gap: 5px;
  margin: 8px 0 10px;
}

.property-requirement {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 6px;
  align-items: center;
  border-radius: 10px;
  padding: 6px 8px;
  background: rgba(0,0,0,0.20);
  border: 1px solid rgba(255,255,255,0.08);
  font-size: 10px;
}

.property-requirement.ready strong {
  color: var(--accent-2);
}

.property-requirement.locked strong {
  color: var(--muted);
}

.prestige-confirm-backdrop {
  position: fixed;
  inset: 0;
  z-index: 999999;
  display: none;
  place-items: center;
  padding: 18px;
  background:
    radial-gradient(circle at 50% 12%, rgba(255, 209, 102, 0.22), transparent 34%),
    radial-gradient(circle at 50% 100%, rgba(184, 140, 255, 0.20), transparent 42%),
    rgba(4, 5, 12, 0.78);
  backdrop-filter: blur(12px);
}

.prestige-confirm-backdrop.show {
  display: grid;
}

.prestige-confirm-card {
  position: relative;
  width: min(390px, 100%);
  max-height: min(86dvh, 680px);
  overflow: auto;
  border-radius: 28px;
  padding: 18px;
  color: var(--text);
  background:
    linear-gradient(180deg, rgba(39, 30, 52, 0.98), rgba(13, 11, 22, 0.98)),
    radial-gradient(circle at 50% 0%, rgba(255, 209, 102, 0.24), transparent 45%);
  border: 1px solid rgba(255, 209, 102, 0.26);
  box-shadow:
    0 26px 80px rgba(0, 0, 0, 0.62),
    inset 0 0 34px rgba(255, 255, 255, 0.035),
    0 0 34px rgba(255, 209, 102, 0.12);
  animation: prestigeConfirmPop 0.22s ease-out;
}

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

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

.prestige-confirm-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 999px;
  color: var(--text);
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  font-size: 20px;
  font-weight: 900;
  cursor: pointer;
}

.prestige-confirm-hero {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 13px;
  align-items: center;
  padding-right: 34px;
}

.prestige-confirm-icon {
  width: 64px;
  height: 64px;
  display: grid;
  place-items: center;
  border-radius: 22px;
  font-size: 32px;
  background:
    radial-gradient(circle at 50% 18%, rgba(255, 255, 255, 0.34), transparent 36%),
    linear-gradient(135deg, #ffd166, #ff9f1c);
  box-shadow:
    0 0 24px rgba(255, 209, 102, 0.34),
    inset 0 0 14px rgba(255, 255, 255, 0.20);
}

.prestige-confirm-kicker {
  display: block;
  margin-bottom: 4px;
  color: var(--gold);
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.prestige-confirm-hero h2 {
  margin: 0;
  font-size: 21px;
  line-height: 1.05;
}

.prestige-confirm-hero p {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.prestige-confirm-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 16px;
}

.prestige-confirm-stats div {
  border-radius: 16px;
  padding: 10px;
  background: rgba(255, 255, 255, 0.055);
  border: 1px solid rgba(255, 255, 255, 0.09);
}

.prestige-confirm-stats span {
  display: block;
  color: var(--muted);
  font-size: 10px;
  margin-bottom: 4px;
}

.prestige-confirm-stats strong {
  display: block;
  color: var(--accent-2);
  font-size: 12px;
  line-height: 1.2;
}

.prestige-confirm-warning,
.prestige-confirm-keep {
  margin-top: 10px;
  border-radius: 16px;
  padding: 11px;
  font-size: 12px;
  line-height: 1.35;
}

.prestige-confirm-warning {
  color: #ffd6dd;
  background: rgba(255, 122, 144, 0.10);
  border: 1px solid rgba(255, 122, 144, 0.22);
}

.prestige-confirm-keep {
  color: #d8fff5;
  background: rgba(115, 240, 207, 0.09);
  border: 1px solid rgba(115, 240, 207, 0.22);
}

.prestige-confirm-warning strong,
.prestige-confirm-keep strong {
  display: block;
  margin-bottom: 4px;
}

.prestige-confirm-actions {
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: 9px;
  margin-top: 14px;
}

.prestige-confirm-cancel,
.prestige-confirm-final {
  min-height: 44px;
  border: 0;
  border-radius: 16px;
  padding: 11px 12px;
  font-weight: 900;
  cursor: pointer;
}

.prestige-confirm-cancel {
  color: var(--text);
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.prestige-confirm-final {
  color: #1b101e;
  background: linear-gradient(135deg, #ffd166, #ff9f1c);
  box-shadow:
    0 0 18px rgba(255, 209, 102, 0.25),
    inset 0 1px 1px rgba(255, 255, 255, 0.45);
}

.prestige-confirm-cancel:active,
.prestige-confirm-final:active,
.prestige-confirm-close:active {
  transform: scale(0.96);
}

/* =========================================
   EVENT VARIATIONS
========================================= */

body.event-layout-horizontal .event-floor-wrap {
  overflow-x: auto !important;
  overflow-y: hidden !important;
}

body.event-layout-horizontal .event-floor {
  min-height: 100% !important;
  height: 100% !important;
  min-width: 1600px;
  padding: 26px 70px 26px 26px;
}

body.event-layout-horizontal .event-object {
  top: 50% !important;
  transform: translateY(-50%);
}

body.event-layout-horizontal .event-object.left,
body.event-layout-horizontal .event-object.right {
  left: auto !important;
  right: auto !important;
}

body.event-layout-horizontal .event-object:nth-child(1) { left: 30px !important; }
body.event-layout-horizontal .event-object:nth-child(2) { left: 190px !important; top: 34% !important; }
body.event-layout-horizontal .event-object:nth-child(3) { left: 350px !important; top: 66% !important; }
body.event-layout-horizontal .event-object:nth-child(4) { left: 510px !important; top: 34% !important; }
body.event-layout-horizontal .event-object:nth-child(5) { left: 670px !important; top: 66% !important; }
body.event-layout-horizontal .event-object:nth-child(6) { left: 830px !important; top: 34% !important; }
body.event-layout-horizontal .event-object:nth-child(7) { left: 990px !important; top: 66% !important; }
body.event-layout-horizontal .event-object:nth-child(8) { left: 1150px !important; top: 34% !important; }
body.event-layout-horizontal .event-object:nth-child(9) { left: 1310px !important; top: 66% !important; }
body.event-layout-horizontal .event-object:nth-child(10) { left: 1470px !important; }

/* Sky Market: runder, spielerischer Look */
body.event-layout-zigzag .event-object-core {
  border-radius: 999px 999px 28px 28px;
}

body.event-layout-zigzag .event-object:nth-child(odd) {
  left: 26px !important;
}

body.event-layout-zigzag .event-object:nth-child(even) {
  right: 26px !important;
}

/* Themes */
body.event-theme-cloud-rush .event-floor {
  background:
    linear-gradient(90deg, rgba(115,240,207,0.08) 1px, transparent 1px),
    linear-gradient(180deg, rgba(184,140,255,0.08) 1px, transparent 1px);
  background-size: 42px 42px;
}

body.event-theme-neon-lounge .event-floor {
  background:
    radial-gradient(circle at 20% 40%, rgba(255,140,220,0.20), transparent 28%),
    radial-gradient(circle at 70% 55%, rgba(115,240,207,0.18), transparent 30%),
    linear-gradient(90deg, rgba(255,140,220,0.10) 1px, transparent 1px),
    linear-gradient(180deg, rgba(115,240,207,0.08) 1px, transparent 1px);
  background-size: auto, auto, 46px 46px, 46px 46px;
}

body.event-theme-sky-market .event-floor {
  background:
    radial-gradient(circle at 20% 20%, rgba(255,209,102,0.18), transparent 28%),
    radial-gradient(circle at 80% 60%, rgba(184,140,255,0.18), transparent 30%),
    linear-gradient(180deg, rgba(36,30,48,0.55), rgba(7,8,18,0.92));
}