/* ============================================================
   Ages Tycoon — Main Stylesheet
   AdVenture-Capitalist-flavored mobile portrait redesign.
   Phone-frame center column, chunky icons, juicy animations.
   Owned by UI Agent.
   ============================================================ */

/* ============================================================
   1. Design tokens
   ============================================================ */
:root {
  /* Phone-frame layout */
  --phone-w: 420px;
  --header-h: 84px;
  --tabbar-h: 64px;

  /* Backgrounds */
  --bg-canvas:    #1a1f2e;            /* outside the phone frame */
  --bg-frame:     #f5ead3;            /* inside the phone (paper / parchment feel) */
  --bg-card:      #ffffff;
  --bg-card-2:    #fbf6e9;
  --bg-shaded:    #ede1c2;
  --bg-overlay:   rgba(20,18,28,0.55);

  /* Text */
  --text:       #2a2218;
  --text-soft:  #5a4a36;
  --text-dim:   #8a7a64;
  --text-mute:  #b7a890;
  --text-inv:   #ffffff;

  /* Brand / status — bumped saturation in the polish pass; the older
     pastel palette was reading as washed-out over the parchment frame. */
  --brand:        #ffa716;   /* marigold */
  --brand-2:      #ff5722;   /* deep orange */
  --brand-d:      #c0671b;   /* darker brand for borders/shadows */
  --good:         #22c55e;
  --good-dark:    #16a34a;
  --bad:          #ef4444;
  --warn:         #f59e0b;
  --info:         #0ea5e9;
  --epic:         #a855f7;

  /* Era palettes (active era tints UI accents) */
  --era-dawnworks:   #f4a261;
  --era-dawnworks-2: #e76f51;
  --era-dawnworks-d: #b86340;
  --era-river:       #2a9d8f;
  --era-river-2:     #48cae4;
  --era-river-d:     #1e6b62;
  --era-iron:        #6c757d;
  --era-iron-2:      #e63946;
  --era-iron-d:      #1d3557;
  /* Era 4 — Steam Republics: brass + copper steampunk */
  --era-steam:       #c08552;
  --era-steam-2:     #d4a574;
  --era-steam-d:     #6b4423;
  /* Era 5 — Orbital Compact: cyan + violet space */
  --era-orbital:     #7c4dff;
  --era-orbital-2:   #29b6f6;
  --era-orbital-d:   #311b92;

  /* Rarity */
  --rare-common:    #b7a890;
  --rare-rare:      #5dade2;
  --rare-epic:      #9b59b6;
  --rare-legendary: #f39c12;

  /* Geometry */
  --radius:    14px;
  --radius-sm: 8px;
  --radius-lg: 22px;
  --radius-pill: 999px;

  /* Shadows */
  --sh-flat:    0 1px 0 rgba(0,0,0,0.05);
  --sh-card:    0 2px 0 rgba(58,46,30,0.18), 0 4px 12px rgba(58,46,30,0.10);
  --sh-card-up: 0 4px 0 rgba(58,46,30,0.22), 0 10px 24px rgba(58,46,30,0.18);
  --sh-glow:    0 0 18px rgba(255,181,71,0.55);
  --sh-pop:     0 6px 16px rgba(0,0,0,0.18);

  /* Defaults that switch per active era */
  --era-color:   var(--era-dawnworks);
  --era-color-2: var(--era-dawnworks-2);
  --era-color-d: var(--era-dawnworks-d);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }

body {
  background:
    radial-gradient(ellipse at top, #2e3550 0%, #1a1f2e 60%, #0f1320 100%);
  color: var(--text);
  font-family: "Nunito", "Avenir Next", "Segoe UI", system-ui, sans-serif;
  font-size: 15px;
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Tabular numbers for counters/costs */
.num,
.res-val, .res-rate,
.prod-count, .prod-cost, .prod-rate,
.mission-progress-text,
.card-copies,
.era-amount, .era-rate {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}

/* Scrollbars (kept inside the phone frame) */
.phone-scroll::-webkit-scrollbar { width: 6px; }
.phone-scroll::-webkit-scrollbar-track { background: transparent; }
.phone-scroll::-webkit-scrollbar-thumb {
  background: rgba(58,46,30,0.18);
  border-radius: 3px;
}

::selection { background: rgba(255,181,71,0.35); }

/* ============================================================
   2. Boot screen
   ============================================================ */
#boot-screen {
  position: fixed; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 16px;
  background:
    radial-gradient(ellipse at center, #2e3550, #0f1320);
  z-index: 9999;
}
.boot-title {
  font-size: 38px;
  font-weight: 900;
  letter-spacing: 4px;
  background: linear-gradient(135deg, #ffd166, #ef476f);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  text-shadow: 0 4px 30px rgba(255,181,71,0.3);
}
.boot-sub {
  font-size: 13px; color: #c4b497;
  animation: pulse 1.4s ease-in-out infinite;
}

/* ============================================================
   3. Phone-frame shell
   ============================================================ */
#app {
  height: 100vh;
  display: flex;
  justify-content: center;
  padding: 0;
  overflow: hidden;
}

.app-shell {
  width: 100%;
  max-width: var(--phone-w);
  height: 100vh;
  background: var(--bg-frame);
  position: relative;
  display: flex;
  flex-direction: column;
  /* Decorative shapes — soft polygons */
  background-image:
    radial-gradient(circle at 12% 8%, rgba(244,162,97,0.18) 0, transparent 60px),
    radial-gradient(circle at 90% 30%, rgba(231,111,81,0.12) 0, transparent 80px),
    radial-gradient(circle at 30% 70%, rgba(244,162,97,0.10) 0, transparent 100px),
    radial-gradient(circle at 80% 92%, rgba(38,70,83,0.08) 0, transparent 80px);
  background-size: cover;
  box-shadow:
    0 0 0 1px rgba(0,0,0,0.4),
    0 30px 60px rgba(0,0,0,0.5),
    0 0 80px rgba(255,181,71,0.05);
  overflow: hidden;
  transition: background-color 0.4s ease, background-image 0.4s ease;
}
@media (min-width: 460px) {
  .app-shell {
    margin: 18px 0;
    height: calc(100vh - 36px);
    border-radius: 28px;
  }
}

/* Era-tinted background — swapped on era change */
.app-shell.era-dawnworks {
  background-color: #fbecc9;
  background-image:
    radial-gradient(circle at 12% 8%, rgba(244,162,97,0.36) 0, transparent 110px),
    radial-gradient(circle at 90% 24%, rgba(231,111,81,0.28) 0, transparent 130px),
    radial-gradient(circle at 30% 72%, rgba(244,162,97,0.20) 0, transparent 160px),
    radial-gradient(circle at 80% 92%, rgba(184,99,64,0.14) 0, transparent 110px);
}
.app-shell.era-river {
  background-color: #d1efec;
  background-image:
    radial-gradient(circle at 12% 8%, rgba(72,202,228,0.42) 0, transparent 120px),
    radial-gradient(circle at 90% 24%, rgba(42,157,143,0.30) 0, transparent 140px),
    radial-gradient(circle at 30% 72%, rgba(72,202,228,0.22) 0, transparent 170px),
    radial-gradient(circle at 80% 92%, rgba(30,107,98,0.16) 0, transparent 100px);
}
.app-shell.era-iron {
  background-color: #dde1e7;
  background-image:
    radial-gradient(circle at 12% 8%, rgba(108,117,125,0.38) 0, transparent 130px),
    radial-gradient(circle at 90% 24%, rgba(230,57,70,0.22) 0, transparent 140px),
    radial-gradient(circle at 30% 72%, rgba(108,117,125,0.20) 0, transparent 170px),
    radial-gradient(circle at 80% 92%, rgba(29,53,87,0.18) 0, transparent 110px);
}
/* Era 4 — Steam Republics: warm brass / copper steampunk parchment */
.app-shell.era-steam {
  background-color: #e8d8c0;
  background-image:
    radial-gradient(circle at 12% 8%, rgba(192,133,82,0.38) 0, transparent 130px),
    radial-gradient(circle at 90% 24%, rgba(212,165,116,0.30) 0, transparent 140px),
    radial-gradient(circle at 30% 72%, rgba(192,133,82,0.20) 0, transparent 170px),
    radial-gradient(circle at 80% 92%, rgba(107,68,35,0.18) 0, transparent 110px);
}
/* Era 5 — Orbital Compact: cyan + violet starfield */
.app-shell.era-orbital {
  background-color: #d8d4f0;
  background-image:
    radial-gradient(circle at 12% 8%, rgba(124,77,255,0.36) 0, transparent 140px),
    radial-gradient(circle at 90% 24%, rgba(41,182,246,0.32) 0, transparent 150px),
    radial-gradient(circle at 30% 72%, rgba(124,77,255,0.22) 0, transparent 170px),
    radial-gradient(circle at 80% 92%, rgba(49,27,146,0.20) 0, transparent 110px);
}

/* Era root color variables — swap on .app-shell.era-* */
.app-shell.era-dawnworks {
  --era-color:   var(--era-dawnworks);
  --era-color-2: var(--era-dawnworks-2);
  --era-color-d: var(--era-dawnworks-d);
}
.app-shell.era-river {
  --era-color:   var(--era-river);
  --era-color-2: var(--era-river-2);
  --era-color-d: var(--era-river-d);
}
.app-shell.era-iron {
  --era-color:   var(--era-iron);
  --era-color-2: var(--era-iron-2);
  --era-color-d: var(--era-iron-d);
}
.app-shell.era-steam {
  --era-color:   var(--era-steam);
  --era-color-2: var(--era-steam-2);
  --era-color-d: var(--era-steam-d);
}
.app-shell.era-orbital {
  --era-color:   var(--era-orbital);
  --era-color-2: var(--era-orbital-2);
  --era-color-d: var(--era-orbital-d);
}

/* ============================================================
   4. Top header (sticky)
   ============================================================ */
.topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  min-height: var(--header-h);
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-rows: auto auto;
  grid-template-areas:
    "logo rank   settings"
    "chips chips chips";
  align-items: center;
  gap: 6px 8px;
  padding: 8px 10px;
  background: linear-gradient(180deg, rgba(255,255,255,0.94), rgba(255,255,255,0.82));
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(58,46,30,0.10);
  box-shadow: 0 4px 12px rgba(58,46,30,0.06);
}

/* Topbar avatar / auth button — replaces the old static .cf-logo.
   Click opens auth modal. Visual state mirrors the live Firebase user:
   - .is-guest      → outline 👤 + blue hint pulse
   - .is-verified   → letter + green dot
   - .is-unverified → letter + amber dot */
.topbar-avatar,
.cf-logo {
  grid-area: logo;
  font-size: 17px;
  font-weight: 900;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  border-radius: 10px;
  flex-shrink: 0;
  color: var(--text-inv);
  box-shadow: 0 2px 0 rgba(58,46,30,0.18);
  position: relative;
  transition: transform 0.12s ease, box-shadow 0.15s ease;
  font-family: inherit;
}
.topbar-avatar:hover { transform: translateY(-1px); box-shadow: 0 3px 0 rgba(58,46,30,0.22); }
.topbar-avatar:active { transform: scale(0.94); box-shadow: 0 1px 0 rgba(58,46,30,0.22); }
.topbar-avatar.is-guest {
  background: linear-gradient(135deg, #4f6c8a, #2c3e50);
}
.topbar-avatar.is-guest .topbar-avatar-text {
  font-size: 18px;
  opacity: 0.95;
}
.topbar-avatar.is-verified {
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
}
.topbar-avatar.is-unverified {
  background: linear-gradient(135deg, #a87a3a, #6b4423);
}

/* Status dot in the bottom-right corner of the avatar. */
.topbar-avatar-dot {
  position: absolute;
  right: -3px; bottom: -3px;
  width: 11px; height: 11px;
  border-radius: 50%;
  box-shadow: 0 0 0 2px var(--bg-frame);
  display: none;
  pointer-events: none;
}
.topbar-avatar-dot.verified  { display: block; background: var(--good); }
.topbar-avatar-dot.unverified{ display: block; background: var(--warn); }
.topbar-avatar-dot.hint      {
  display: block;
  background: var(--info);
  animation: avatarHintPulse 1.6s ease-in-out infinite;
}
@keyframes avatarHintPulse {
  0%, 100% { transform: scale(1);   box-shadow: 0 0 0 2px var(--bg-frame), 0 0 0 0 rgba(14,165,233,0.55); }
  60%      { transform: scale(1.15); box-shadow: 0 0 0 2px var(--bg-frame), 0 0 0 6px rgba(14,165,233,0); }
}

.rank-pill {
  grid-area: rank;
  justify-self: start;
  display: flex; align-items: center;
  gap: 6px;
  padding: 3px 10px 3px 3px;
  background: linear-gradient(135deg, var(--era-color), var(--era-color-d));
  border-radius: var(--radius-pill);
  color: var(--text-inv);
  font-weight: 800;
  font-size: 12px;
  white-space: nowrap;
  box-shadow: 0 2px 0 rgba(58,46,30,0.22);
  transition: background 0.3s ease;
  max-width: 100%;
  overflow: hidden;
}
.rank-pill .rank-num {
  background: rgba(255,255,255,0.25);
  border-radius: var(--radius-pill);
  padding: 2px 7px;
  font-size: 11.5px;
  font-weight: 900;
  flex-shrink: 0;
}
.rank-pill .rank-name {
  padding-right: 4px;
  letter-spacing: 0.2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
}

.topbar-chips {
  grid-area: chips;
  display: flex;
  gap: 5px;
  justify-content: flex-start;
  overflow-x: auto;
  scrollbar-width: none;
  padding: 0 2px;
}
.topbar-chips::-webkit-scrollbar { display: none; }

.res-chip {
  display: flex; align-items: center; gap: 5px;
  padding: 4px 8px 4px 6px;
  background: #fff;
  border: 1px solid rgba(58,46,30,0.10);
  border-radius: var(--radius-pill);
  box-shadow: 0 1px 0 rgba(58,46,30,0.08);
  flex-shrink: 0;
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.res-chip.zero-value {
  background: rgba(255,255,255,0.75);
  opacity: 0.78;
}
.res-chip .res-icon {
  font-size: 15px;
  line-height: 1;
}
.res-chip .res-meta {
  display: flex; flex-direction: column;
  line-height: 1;
}
.res-chip .res-val {
  font-size: 12.5px;
  font-weight: 800;
  color: var(--text);
}
.res-chip .res-rate {
  font-size: 9.5px;
  color: var(--text-dim);
  font-weight: 700;
  margin-top: 1px;
}
.res-chip .res-rate.up { color: var(--good); }
.res-chip .res-rate.zero { color: var(--text-mute); }
.res-chip.bumped { animation: numBump 0.32s ease-out; }

.topbar-settings {
  grid-area: settings;
  width: 32px; height: 32px;
  border-radius: 10px;
  border: 1px solid rgba(192, 103, 27, 0.45);
  background: linear-gradient(180deg, #fff3d6 0%, #ffd089 100%);
  color: #6b3f10;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  box-shadow:
    0 2px 0 rgba(192, 103, 27, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.55);
  transition: transform 0.12s ease, box-shadow 0.15s ease, background 0.2s ease;
  position: relative;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.45);
}
.topbar-settings:hover {
  background: linear-gradient(180deg, #ffe9b3 0%, #ffbc66 100%);
}
.topbar-settings:active {
  transform: scale(0.92);
  box-shadow: 0 1px 0 rgba(192, 103, 27, 0.35),
              inset 0 2px 4px rgba(192, 103, 27, 0.25);
}

.settings-menu {
  position: absolute;
  top: calc(var(--header-h) + 4px);
  right: 12px;
  background: #fff;
  border: 1px solid rgba(58,46,30,0.12);
  border-radius: var(--radius);
  padding: 6px;
  box-shadow: var(--sh-card-up);
  z-index: 49;
  min-width: 160px;
  display: none;
  animation: dropdown 0.18s ease-out;
}
.settings-menu.open { display: block; }
.settings-menu .menu-item {
  display: flex; align-items: center; gap: 10px;
  width: 100%;
  padding: 9px 10px;
  background: transparent;
  border: 0;
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-family: inherit;
  font-weight: 700;
  color: var(--text);
  cursor: pointer;
  text-align: left;
}
.settings-menu .menu-item:hover { background: var(--bg-shaded); }
.settings-menu .menu-item.danger { color: var(--bad); }

/* ============================================================
   5. Main tab content slot
   ============================================================ */
.tab-content {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 12px 12px 16px;
  position: relative;
  -webkit-overflow-scrolling: touch;
}
.tab-content.phone-scroll { /* alias */ }

.tab-page {
  display: none;
  animation: slideInRight 0.24s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.tab-page.active { display: block; }

/* ============================================================
   6. Bottom tab bar (sticky)
   ============================================================ */
.tabbar {
  position: sticky;
  bottom: 0;
  z-index: 40;
  height: var(--tabbar-h);
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  background: linear-gradient(180deg, rgba(255,255,255,0.85), #fff);
  border-top: 1px solid rgba(58,46,30,0.10);
  box-shadow: 0 -2px 12px rgba(58,46,30,0.06);
}
.tabbar-btn {
  background: transparent;
  border: 0;
  padding: 6px 4px 8px;
  font-family: inherit;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  color: var(--text-dim);
  font-weight: 800;
  font-size: 10px;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  position: relative;
  transition: color 0.15s ease, transform 0.15s ease;
}
.tabbar-btn:active { transform: scale(0.95); }
.tabbar-btn .tab-icon {
  font-size: 22px;
  line-height: 1;
  filter: grayscale(0.35);
  transition: filter 0.15s ease, transform 0.2s ease;
}
.tabbar-btn.active {
  color: var(--era-color-d);
}
.tabbar-btn.active .tab-icon {
  filter: none;
  transform: scale(1.08) translateY(-1px);
}
.tabbar-btn.active::after {
  content: '';
  position: absolute;
  bottom: 4px;
  left: 50%;
  transform: translateX(-50%);
  width: 22px;
  height: 3px;
  background: linear-gradient(90deg, var(--era-color), var(--era-color-2));
  border-radius: 3px;
}
.tabbar-btn .tab-badge {
  position: absolute;
  top: 4px;
  right: calc(50% - 18px);
  background: var(--bad);
  color: #fff;
  font-size: 9px;
  font-weight: 900;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 0 rgba(0,0,0,0.2);
  /* Bounce in on first appearance, then settle into the existing pulse
     loop. Without the entrance the badge used to just blink into place. */
  animation: tabBadgeIn 0.36s cubic-bezier(0.2, 1.4, 0.4, 1), badgePulse 1.4s ease-in-out 0.36s infinite;
  transform-origin: center;
}
.tab-badge.hidden { display: none; }
@keyframes tabBadgeIn {
  0%   { transform: scale(0);   opacity: 0; }
  60%  { transform: scale(1.25); opacity: 1; }
  100% { transform: scale(1);   opacity: 1; }
}

/* ============================================================
   7. Ages tab — era selector + producer cards
   ============================================================ */
.era-chips-wrap {
  position: relative;
  margin: 0 -4px 8px;
}
.era-chips-wrap::after {
  /* Right-edge fade hint, only visible when there's overflow */
  content: '';
  position: absolute;
  top: 0; right: 0; bottom: 12px;
  width: 28px;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, var(--bg-frame));
  opacity: 0;
  transition: opacity 0.25s ease;
}
.era-chips-wrap.has-overflow::after { opacity: 1; }
.era-chips {
  display: flex;
  gap: 8px;
  padding: 2px 4px 12px;
  overflow-x: auto;
  scrollbar-width: none;
  scroll-snap-type: x proximity;
  scroll-padding-left: 4px;
}
.era-chips::-webkit-scrollbar { display: none; }
.era-chip {
  flex-shrink: 0;
  display: flex; align-items: center; gap: 5px;
  /* Slice 7 — iOS HIG 44×44 minimum. Padding bumped from 8px/11px to
     12px/14px gives ~44px tall pill while keeping the 12px font. */
  padding: 12px 14px;
  min-height: 44px;
  background: #fff;
  border: 1px solid rgba(58,46,30,0.10);
  border-radius: var(--radius-pill);
  font-family: inherit;
  font-weight: 800;
  font-size: 12px;
  color: var(--text-soft);
  cursor: pointer;
  box-shadow: 0 1px 0 rgba(58,46,30,0.08);
  transition: background 0.25s ease, color 0.25s ease, box-shadow 0.25s ease, transform 0.15s ease;
  scroll-snap-align: start;
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.era-chip .era-emoji { font-size: 15px; }
.era-chip .era-lock {
  font-size: 12px;
  opacity: 0.85;
  margin-left: 2px;
}
.era-chip:active { transform: scale(0.96); }
.era-chip.active {
  color: var(--text-inv);
  background: linear-gradient(135deg, var(--era-color), var(--era-color-2));
  border-color: transparent;
  box-shadow:
    0 2px 0 rgba(58,46,30,0.22),
    0 0 18px 2px color-mix(in srgb, var(--era-color) 55%, transparent),
    0 0 36px color-mix(in srgb, var(--era-color) 35%, transparent);
}
.era-chip.locked {
  opacity: 0.65;
  cursor: not-allowed;
  /* Slice 7 — match base .era-chip 44×44 HIG height. Locked still needs
     to align in the chip row even though it's non-interactive logically. */
  padding: 12px 14px;
}
/* Compact (icon + lock only) for non-next locked eras */
.era-chip.locked.compact {
  padding: 12px 14px;
}
.era-chip.locked.compact .era-name { display: none; }

/* Era header card — saturated tinted gradient + decorative blob */
.era-hero {
  background:
    radial-gradient(circle at 110% -20%, color-mix(in srgb, var(--era-color-2) 70%, transparent), transparent 55%),
    linear-gradient(140deg, var(--era-color) 0%, var(--era-color-d) 90%);
  color: var(--text-inv);
  border-radius: var(--radius-lg);
  padding: 14px 16px 14px;
  margin-bottom: 12px;
  position: relative;
  overflow: hidden;
  box-shadow:
    var(--sh-card-up),
    inset 0 1px 0 rgba(255,255,255,0.22);
}
.era-hero::before {
  /* big inner highlight blob */
  content: '';
  position: absolute;
  top: -50px; right: -50px;
  width: 200px; height: 200px;
  background: radial-gradient(circle, rgba(255,255,255,0.32), transparent 65%);
  pointer-events: none;
}
.era-hero::after {
  /* Thematic giant icon ghosted in the corner */
  content: '';
  position: absolute;
  bottom: -28px; right: -18px;
  width: 140px; height: 140px;
  background-image: var(--era-deco, none);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  opacity: 0.16;
  pointer-events: none;
}
.app-shell.era-dawnworks .era-hero::after {
  background-image: radial-gradient(circle, rgba(255,255,255,0.5) 0, transparent 60%);
}
/* Tab-top accent bar — picks up era color on every tab */
.tab-page::before {
  content: '';
  display: block;
  height: 3px;
  margin: -12px -12px 10px;
  background: linear-gradient(90deg, var(--era-color), var(--era-color-2));
  opacity: 0.85;
  border-radius: 0 0 4px 4px;
}
.era-hero-top {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 8px;
}
.era-hero-icon {
  font-size: 38px;
  width: 56px; height: 56px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.2);
  border-radius: 16px;
  text-shadow: 0 2px 6px rgba(0,0,0,0.2);
}
.era-hero-meta { flex: 1; min-width: 0; }
.era-hero-name {
  font-size: 17px;
  font-weight: 900;
  letter-spacing: 0.5px;
  text-shadow: 0 1px 2px rgba(0,0,0,0.2);
}
.era-hero-desc {
  font-size: 11px;
  opacity: 0.92;
  margin-top: 2px;
  text-shadow: 0 1px 1px rgba(0,0,0,0.15);
}
.era-amount {
  font-size: 36px;
  font-weight: 900;
  line-height: 1.05;
  letter-spacing: -0.5px;
  margin-top: 4px;
  text-shadow: 0 2px 6px rgba(0,0,0,0.15);
}
.era-rate {
  font-size: 14px;
  font-weight: 800;
  color: rgba(255,255,255,0.92);
  margin-top: 2px;
}
.era-rate .rate-symbol { color: #b8ffd8; }

/* Trade button — bright tinted when usable, dim when not */
.trade-btn {
  margin-top: 12px;
  width: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  background: linear-gradient(135deg, rgba(255,255,255,0.34), rgba(255,255,255,0.18));
  border: 1.5px solid rgba(255,255,255,0.65);
  color: var(--text-inv);
  padding: 10px 16px;
  border-radius: var(--radius-pill);
  font-family: inherit;
  font-weight: 800;
  font-size: 13.5px;
  cursor: pointer;
  letter-spacing: 0.3px;
  transition: background 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease;
  text-shadow: 0 1px 0 rgba(0,0,0,0.15);
}
.trade-btn .trade-label {
  display: flex; align-items: center; gap: 8px;
  font-size: 14px;
  font-weight: 900;
  letter-spacing: 0.4px;
}
.trade-btn .trade-cost {
  font-size: 11px;
  font-weight: 800;
  opacity: 0.92;
  letter-spacing: 0.2px;
}
.trade-btn:active { transform: scale(0.97); }
.trade-btn.ready {
  background: linear-gradient(135deg, #ffffff, rgba(255,255,255,0.55));
  color: var(--era-color-d);
  border-color: #fff;
  text-shadow: none;
  box-shadow:
    0 3px 0 rgba(0,0,0,0.18),
    0 0 22px rgba(255,255,255,0.55),
    0 0 38px color-mix(in srgb, var(--era-color) 35%, transparent);
  animation: tradeReadyPulse 1.8s ease-in-out infinite;
}
.trade-btn.ready .trade-cost { color: var(--era-color-d); opacity: 0.78; }
.trade-btn.not-ready {
  background: rgba(0,0,0,0.18);
  border-color: rgba(255,255,255,0.28);
  color: rgba(255,255,255,0.78);
  cursor: not-allowed;
}
.trade-btn.not-ready .trade-cost { color: rgba(255,220,200,0.9); }
@keyframes tradeReadyPulse {
  0%, 100% { box-shadow: 0 3px 0 rgba(0,0,0,0.18), 0 0 18px rgba(255,255,255,0.45); }
  50%      { box-shadow: 0 3px 0 rgba(0,0,0,0.18), 0 0 30px rgba(255,255,255,0.7), 0 0 50px color-mix(in srgb, var(--era-color) 45%, transparent); }
}

/* Producer list */
.producer-list {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.producer {
  display: grid;
  grid-template-columns: 52px 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 8px 10px 8px 8px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--era-color) 6%, var(--bg-card)) 0%, var(--bg-card) 100%);
  /* Phase 6 — era-tinted left border. When the era changes, this swaps
     instantly along with --era-color, giving every producer row a visible
     "you are in a different era now" signal. */
  border: 1px solid rgba(58,46,30,0.08);
  border-left: 3px solid var(--era-color);
  border-radius: var(--radius);
  box-shadow: var(--sh-card);
  position: relative;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.4s ease;
  min-height: 84px;
}
.producer.affordable { animation: producerPulse 2.4s ease-in-out infinite; }
.producer.locked {
  opacity: 0.78;
  background: var(--bg-shaded);
  min-height: 72px;
}
.producer.locked .prod-buy-wrap { display: none; }
.producer.locked .prod-lock-area { display: flex; }
.prod-lock-area {
  display: none;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  background: rgba(58,46,30,0.07);
  border: 1px dashed rgba(58,46,30,0.25);
  border-radius: var(--radius-pill);
  color: var(--text-soft);
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
  letter-spacing: 0.2px;
}
.prod-lock-area .lock-emoji { font-size: 14px; }

.prod-icon-wrap {
  position: relative;
  width: 52px; height: 52px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--era-color), var(--era-color-d));
  border-radius: 13px;
  font-size: 28px;
  color: var(--text-inv);
  box-shadow: inset 0 -2px 0 rgba(0,0,0,0.12), 0 2px 0 rgba(58,46,30,0.18);
}
.prod-icon-wrap .prod-tier {
  position: absolute;
  top: -6px; left: -6px;
  background: var(--text);
  color: var(--brand);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.5px;
  padding: 2px 5px;
  border-radius: 6px;
  box-shadow: 0 1px 0 rgba(0,0,0,0.2);
}
.producer.locked .prod-icon-wrap {
  background: linear-gradient(135deg, #b9ac90, #8c7c5e);
  filter: grayscale(0.4);
}
.producer.locked .prod-icon-wrap::after {
  content: '🔒';
  position: absolute;
  inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px;
  background: rgba(20,18,28,0.55);
  border-radius: 13px;
}

.prod-info { min-width: 0; }
.prod-name {
  font-size: 14px;
  font-weight: 800;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.prod-stats {
  margin-top: 2px;
  display: flex; align-items: baseline; gap: 8px;
  font-size: 12px;
  color: var(--text-soft);
  font-weight: 700;
}
.prod-count { color: var(--text); font-weight: 900; }
.prod-rate {
  color: var(--good-dark);
  font-weight: 800;
}
.prod-rate.zero { color: var(--text-mute); }
.prod-meta-line {
  margin-top: 3px;
  font-size: 10px;
  color: var(--text-dim);
  font-weight: 700;
}
.prod-locked-note {
  margin-top: 4px;
  font-size: 10.5px;
  color: var(--bad);
  font-weight: 800;
}

.prod-buy-wrap {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 4px;
}
.prod-buy {
  /* primary buy button — era-tinted */
  min-width: 80px;
  min-height: 50px;
  padding: 7px 11px;
  border: 0;
  border-radius: var(--radius);
  background: linear-gradient(180deg, var(--era-color), var(--era-color-d));
  color: var(--text-inv);
  font-family: inherit;
  font-weight: 900;
  font-size: 12.5px;
  letter-spacing: 0.4px;
  cursor: pointer;
  text-align: center;
  box-shadow:
    0 3px 0 color-mix(in srgb, var(--era-color-d) 70%, rgba(0,0,0,0.4)),
    0 0 0 rgba(0,0,0,0);
  transition: transform 0.1s ease, box-shadow 0.2s ease;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px;
}
.prod-buy:active {
  transform: translateY(2px);
  box-shadow: 0 1px 0 color-mix(in srgb, var(--era-color-d) 70%, rgba(0,0,0,0.4));
}
.prod-buy:disabled {
  background: linear-gradient(180deg, #c7bca6, #aa9d83);
  box-shadow: 0 2px 0 rgba(100,90,72,0.4);
  cursor: not-allowed;
}
.prod-buy.affordable {
  box-shadow:
    0 3px 0 color-mix(in srgb, var(--era-color-d) 70%, rgba(0,0,0,0.4)),
    0 0 18px color-mix(in srgb, var(--era-color) 50%, transparent);
}
.prod-buy .buy-label {
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.4px;
}
.prod-buy .buy-cost {
  font-size: 10.5px;
  font-weight: 800;
  opacity: 0.92;
  letter-spacing: 0;
}
.prod-buy.unaffordable {
  background: linear-gradient(180deg, #d8cdb6, #ad9f86);
  color: #fff;
}

.qty-row {
  display: flex;
  gap: 4px;
  justify-content: center;
}
.qty-pill {
  flex: 1;
  border: 1px solid rgba(58,46,30,0.14);
  background: #fff;
  color: var(--text-soft);
  font-family: inherit;
  font-weight: 800;
  font-size: 11px;
  padding: 4px 0;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all 0.12s ease;
  /* Slice 7 — iOS HIG 44×44 minimum. The visible visual stays compact
     (padding 4px 0 + 11px font) but min-height + flex centering give
     the player a 44px tap surface. Prevents the most common miss-tap
     in BUGS.md (×1/×10/MAX next to the BUY button). */
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.qty-pill.active {
  background: var(--text);
  color: var(--brand);
  border-color: var(--text);
}
.qty-pill:active { transform: scale(0.94); }

/* ============================================================
   8. Missions tab
   ============================================================ */
.missions-header {
  background: var(--bg-card);
  padding: 14px 16px;
  border-radius: var(--radius-lg);
  margin-bottom: 12px;
  box-shadow: var(--sh-card);
}
.missions-header-row {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 8px;
}
.missions-rank-label {
  font-size: 14px;
  font-weight: 800;
  color: var(--text);
}
.missions-rank-count {
  font-size: 13px;
  font-weight: 800;
  color: var(--era-color-d);
  background: rgba(0,0,0,0.04);
  padding: 3px 10px;
  border-radius: var(--radius-pill);
}
.rank-progress {
  height: 14px;
  background: rgba(0,0,0,0.06);
  border-radius: var(--radius-pill);
  overflow: hidden;
  position: relative;
}
.rank-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--era-color), var(--era-color-2));
  border-radius: var(--radius-pill);
  transition: width 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
  box-shadow: inset 0 -2px 0 rgba(0,0,0,0.12);
  position: relative;
  overflow: hidden;
}
.rank-progress-fill::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(90deg,
    transparent 0%, rgba(255,255,255,0.4) 50%, transparent 100%);
  animation: shimmer 2.2s linear infinite;
}

.mission-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 12px;
}
.mission {
  background: var(--bg-card);
  border: 1px solid rgba(58,46,30,0.08);
  border-radius: var(--radius);
  padding: 12px 14px;
  box-shadow: var(--sh-card);
  position: relative;
}
.mission.complete {
  background: linear-gradient(135deg, #fef9e8, #fff5d4);
  border-color: rgba(243,156,18,0.4);
  animation: completeGlow 2s ease-in-out infinite;
}
.mission.claimed {
  opacity: 0.55;
  background: var(--bg-shaded);
}
.mission-head {
  display: flex; align-items: flex-start; gap: 10px;
}
.mission-icon {
  font-size: 22px;
  width: 38px; height: 38px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--era-color), var(--era-color-d));
  border-radius: 10px;
  color: var(--text-inv);
  flex-shrink: 0;
  box-shadow: 0 1px 0 rgba(58,46,30,0.18);
}
.mission-body { flex: 1; min-width: 0; }
.mission-name {
  font-size: 13px;
  font-weight: 800;
  color: var(--text);
  line-height: 1.25;
}
.mission-rewards {
  display: flex; gap: 6px;
  margin-top: 4px;
  flex-wrap: wrap;
}
.mission-reward-chip {
  display: inline-flex; align-items: center; gap: 4px;
  background: rgba(0,0,0,0.04);
  border-radius: var(--radius-pill);
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 800;
  color: var(--text-soft);
}
.mission-reward-chip .chip-emoji { font-size: 13px; }

.mission-progress-row {
  display: flex; align-items: center; gap: 8px;
  margin-top: 10px;
}
.mission-progress-bar {
  flex: 1;
  height: 10px;
  background: rgba(0,0,0,0.06);
  border-radius: var(--radius-pill);
  overflow: hidden;
}
.mission-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--era-color), var(--era-color-2));
  border-radius: var(--radius-pill);
  transition: width 0.3s ease-out;
  box-shadow: inset 0 -2px 0 rgba(0,0,0,0.1);
}
.mission.complete .mission-progress-fill {
  background: linear-gradient(90deg, var(--good), var(--good-dark));
}
.mission-progress-text {
  font-size: 11px;
  font-weight: 800;
  color: var(--text-soft);
  white-space: nowrap;
}
.mission-eta {
  font-size: 10.5px;
  color: var(--text-dim);
  font-weight: 700;
  margin-top: 4px;
}
.mission-blocked {
  font-size: 10.5px;
  color: var(--bad);
  font-weight: 800;
  margin-top: 4px;
}

.mission-actions {
  margin-top: 10px;
  display: flex; justify-content: flex-end;
}
.mission .btn-claim {
  background: linear-gradient(180deg, var(--good), var(--good-dark));
  color: var(--text-inv);
  font-family: inherit;
  font-weight: 900;
  font-size: 12px;
  letter-spacing: 0.4px;
  padding: 9px 22px;
  border: 0;
  border-radius: var(--radius-pill);
  cursor: pointer;
  box-shadow: 0 3px 0 rgba(34,153,84,0.6);
  transition: all 0.15s ease;
  text-transform: uppercase;
}
.mission .btn-claim:hover:not(:disabled) {
  transform: scale(1.05);
  box-shadow: 0 4px 0 rgba(34,153,84,0.6), 0 0 18px rgba(34,197,94,0.45);
}
.mission .btn-claim:active { transform: translateY(2px) scale(1.02); box-shadow: 0 1px 0 rgba(34,153,84,0.6); }
.mission .btn-claim:disabled {
  background: #c7bca6;
  color: rgba(255,255,255,0.7);
  cursor: not-allowed;
  box-shadow: 0 2px 0 rgba(100,90,72,0.4);
}
.mission .btn-claim.glow { animation: claimPulse 1.3s ease-in-out infinite; }

/* Rank-up button */
.rank-up-row { margin-top: 16px; }
.btn-rank-up {
  width: 100%;
  min-height: 64px;
  padding: 12px 16px;
  border: 0;
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, var(--era-color), var(--era-color-d));
  color: var(--text-inv);
  font-family: inherit;
  font-weight: 900;
  font-size: 18px;
  letter-spacing: 1px;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: var(--sh-card-up);
  transition: all 0.2s ease;
  position: relative;
  overflow: hidden;
}
.btn-rank-up:active { transform: translateY(2px); }
.btn-rank-up:disabled {
  background: #c7bca6;
  color: rgba(255,255,255,0.55);
  cursor: not-allowed;
}
.btn-rank-up.glow { animation: rankUpPulse 1.4s ease-in-out infinite; }
.btn-rank-up.glow::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.35) 50%, transparent 100%);
  animation: sweep 1.8s linear infinite;
}

/* ============================================================
   9. Cards tab — Archivists
   ============================================================ */
.cards-filter {
  display: flex; gap: 6px;
  margin-bottom: 12px;
  overflow-x: auto;
  scrollbar-width: none;
}
.cards-filter::-webkit-scrollbar { display: none; }
.filter-chip {
  flex-shrink: 0;
  background: #fff;
  border: 1px solid rgba(58,46,30,0.10);
  color: var(--text-soft);
  font-family: inherit;
  font-weight: 800;
  font-size: 11.5px;
  letter-spacing: 0.2px;
  padding: 6px 9px;
  border-radius: var(--radius-pill);
  cursor: pointer;
  text-transform: capitalize;
  transition: all 0.15s ease;
}
.filter-chip:active { transform: scale(0.95); }
.filter-chip.active {
  background: var(--text);
  color: var(--brand);
  border-color: var(--text);
}
.filter-chip.rarity-common.active    { background: var(--rare-common); color: #fff; border-color: var(--rare-common); }
.filter-chip.rarity-rare.active      { background: var(--rare-rare); color: #fff; border-color: var(--rare-rare); }
.filter-chip.rarity-epic.active      { background: var(--rare-epic); color: #fff; border-color: var(--rare-epic); }
.filter-chip.rarity-legendary.active { background: var(--rare-legendary); color: #fff; border-color: var(--rare-legendary); }

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

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: var(--bg-card);
  border: 0;
  border-radius: var(--radius);
  padding: 8px 8px 12px;
  font-family: inherit;
  cursor: pointer;
  overflow: hidden;
  box-shadow: var(--sh-card);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.card:active { transform: translateY(1px) scale(0.985); }
/* Slice 10 — locked cards keep their rarity language. Previously the
   whole card was grayscale(1) which erased the rarity-band, the rarity
   border on .card-icon, and the rarity-tinted box-shadow — leaving an
   FTUE player with 35 identical pale-grey rectangles, the exact "Kart
   tab visual low point" flagged in GAME_STUDIO_REASSESSMENT.md.
   Now only the icon EMOJI itself is desaturated (via its own filter);
   the colored rarity stripe + ring + frame shadow remain visible so
   the player can read the meta-progression hierarchy before owning
   any cards. */
.card.locked {
  opacity: 0.82;
}
.card.locked .card-icon {
  filter: grayscale(0.7);
}
.card.locked .card-icon::after {
  content: '🔒';
  position: absolute; inset: 0;
  background: rgba(20,18,28,0.55);
  display: flex; align-items: center; justify-content: center;
  font-size: 28px;
  border-radius: inherit;
}

.card .rarity-band {
  position: absolute;
  inset: 0 0 auto 0;
  /* Slice 10 — taller band so the rarity hue lands instantly at small
     mobile sizes (390px column, ~180px card width). 5px was easy to
     overlook on a glance scan; 7px is still subtle but readable. */
  height: 7px;
  border-top-left-radius: var(--radius);
  border-top-right-radius: var(--radius);
}
.card.rarity-common    { box-shadow: 0 2px 0 rgba(183,168,144,0.6), 0 4px 12px rgba(58,46,30,0.08); }
.card.rarity-common .rarity-band { background: var(--rare-common); }
.card.rarity-rare      { box-shadow: 0 2px 0 rgba(93,173,226,0.5), 0 0 18px rgba(93,173,226,0.18); }
.card.rarity-rare .rarity-band { background: var(--rare-rare); }
.card.rarity-epic      { box-shadow: 0 2px 0 rgba(155,89,182,0.5), 0 0 22px rgba(155,89,182,0.22); }
.card.rarity-epic .rarity-band { background: var(--rare-epic); }
.card.rarity-legendary {
  box-shadow:
    0 2px 0 rgba(243,156,18,0.65),
    0 0 32px rgba(243,156,18,0.42),
    inset 0 0 0 1px rgba(243,156,18,0.55);
}
.card.rarity-legendary .rarity-band {
  background: linear-gradient(90deg, var(--rare-legendary), #fdcb6e, var(--rare-legendary));
  background-size: 200% 100%;
  animation: legendaryBandShift 4.5s ease-in-out infinite;
}
@keyframes legendaryBandShift {
  0%, 100% { background-position: 0% 0%; }
  50%      { background-position: 100% 0%; }
}
body.reduce-motion .card.rarity-legendary .rarity-band { animation: none; }

/* Slice 10 — explicit rarity text label under the card name. Text +
   color gives a second cue for the rarity that is colorblind-safe and
   survives any filter the lock state applies to the icon. */
.card .rarity-label {
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.7px;
  text-transform: uppercase;
  margin: 2px 0 0;
  padding: 2px 6px;
  border-radius: 6px;
  color: #fff;
  line-height: 1.2;
  background: var(--rare-common);
  align-self: center;
}
.card.rarity-common    .rarity-label { background: var(--rare-common); color: #3a2a1a; }
.card.rarity-rare      .rarity-label { background: var(--rare-rare); }
.card.rarity-epic      .rarity-label { background: var(--rare-epic); }
.card.rarity-legendary .rarity-label { background: var(--rare-legendary); color: #2a1a0a; }

.card-icon {
  width: 80px; height: 80px;
  margin-top: 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: 44px;
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(255,255,255,0.7), rgba(0,0,0,0.04));
  position: relative;
}
.card.rarity-common .card-icon    { box-shadow: inset 0 0 0 3px var(--rare-common); }
.card.rarity-rare .card-icon      { box-shadow: inset 0 0 0 3px var(--rare-rare); }
.card.rarity-epic .card-icon      { box-shadow: inset 0 0 0 3px var(--rare-epic); animation: epicShimmer 3.4s ease-in-out infinite; }
.card.rarity-legendary .card-icon { box-shadow: inset 0 0 0 3px var(--rare-legendary); animation: legendaryShimmer 2.4s ease-in-out infinite; }

.card-name {
  margin-top: 8px;
  font-size: 12px;
  font-weight: 800;
  color: var(--text);
  text-align: center;
  line-height: 1.2;
  min-height: 2.4em;
  display: flex;
  align-items: center;
  padding: 0 4px;
}

.card-stars {
  display: flex;
  gap: 1px;
  margin-top: 6px;
}
.card-stars .s {
  font-size: 10px;
  color: rgba(0,0,0,0.18);
}
.card-stars .s.lit { color: var(--rare-legendary); text-shadow: 0 0 4px rgba(243,156,18,0.4); }

.card-copies {
  margin-top: 6px;
  font-size: 11px;
  font-weight: 800;
  color: var(--text-dim);
}
.card-copies.has-upgrade {
  color: var(--good-dark);
  animation: numBump 0.4s ease-out;
}

.card .upgrade-pip {
  position: absolute;
  top: 6px; right: 6px;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--good);
  box-shadow: 0 0 0 2px #fff, 0 0 10px var(--good);
  animation: pip 1.2s ease-in-out infinite;
}

/* ============================================================
   10. Crates tab
   ============================================================ */
.crate-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.crate-item {
  display: grid;
  grid-template-columns: 70px 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 14px;
  border-radius: var(--radius-lg);
  position: relative;
  overflow: hidden;
  box-shadow: var(--sh-card-up);
  color: var(--text-inv);
  /* Whole row is clickable surface — cursor stays "pointer" everywhere on
     the row, including in the dead-zone corners around the pill-shaped AÇ
     button. Without this, the rounded button corners caused the cursor to
     flip pointer↔default as the user moved the mouse across the pill
     boundary, which felt like the mouse vibrating. */
  cursor: pointer;
}
.crate-item.dim { cursor: default; }
.crate-item.crate-wooden  { background: linear-gradient(135deg, #8b5a2b, #5d3a1a); }
.crate-item.crate-alloy   { background: linear-gradient(135deg, #5dade2, #2874a6); }
.crate-item.crate-crystal { background: linear-gradient(135deg, #9b59b6, #6c3483); }
.crate-item.crate-paradox {
  background: linear-gradient(135deg, #ff7a45, #c2185b);
  /* paradoxSwirl was a slow background-position drift. Even on .dim rows
     it was still ticking the GPU — disabled for now while we hunt the
     last sources of cursor flicker on this tab. */
}
.crate-item.empty {
  background: var(--bg-card);
  color: var(--text-dim);
  box-shadow: var(--sh-card);
}
.crate-item.dim {
  opacity: 0.55;
  filter: saturate(0.6);
  box-shadow: var(--sh-card);
}
.crate-item.dim .crate-sub { opacity: 0.95; }

.crate-icon-big {
  width: 70px; height: 70px;
  display: flex; align-items: center; justify-content: center;
  font-size: 44px;
  background: rgba(0,0,0,0.18);
  border-radius: 18px;
  text-shadow: 0 2px 6px rgba(0,0,0,0.3);
  position: relative;
}
.crate-item .crate-count-badge {
  position: absolute;
  top: -6px; right: -6px;
  background: var(--brand);
  color: var(--text);
  font-size: 12px;
  font-weight: 900;
  min-width: 24px; height: 24px;
  padding: 0 6px;
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 0 rgba(0,0,0,0.25);
  border: 2px solid #fff;
}

.crate-meta { min-width: 0; }
.crate-name {
  font-size: 15px;
  font-weight: 900;
  letter-spacing: 0.4px;
  margin-bottom: 4px;
}
.crate-sub {
  font-size: 11.5px;
  font-weight: 700;
  opacity: 0.85;
}
/* Slice 11 — acquisition affordance for empty capsule rows. BUGS.md P3:
   "YOK label gives no acquisition affordance" — a fresh player saw four
   greyed "Yok" buttons with no idea how to obtain a capsule. This small
   italic hint under the regular sub-text answers the unspoken question. */
.crate-empty-hint {
  font-size: 10.5px;
  font-style: italic;
  font-weight: 600;
  opacity: 0.75;
  margin-top: 3px;
  letter-spacing: 0.1px;
}

.btn-crate-open {
  background: rgba(255,255,255,0.22);
  border: 2px solid rgba(255,255,255,0.7);
  color: var(--text-inv);
  /* Hardcoded simple button — no animations, no compositing tricks,
     no will-change, no shadows. Pure flat hit-target so the cursor
     stays stable and clicks always land. */
  position: relative;
  /* Mobile: kill double-tap-to-zoom delay so the tap registers as a
     click immediately. Without this, browsers wait ~300ms for a second
     tap, which on a touch device feels like the button "doesn't open
     on first press." */
  touch-action: manipulation;
  /* Prevent accidental text selection / long-press menu on the label. */
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  font-family: inherit;
  font-weight: 900;
  font-size: 13px;
  padding: 12px 22px;
  border-radius: var(--radius-pill);
  cursor: pointer;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  /* Specific transition instead of `all` — `all` was fighting the
     crateGlow animation and creating tiny per-frame jitter that
     pushed the cursor off the button (single-click ate, double-click
     finally landed). */
  transition: background 0.15s ease, transform 0.12s ease;
  white-space: nowrap;
}
/* IMPORTANT — DO NOT use transform: scale() on :active here.
   transform: scale shrinks the button's bounding box around its center.
   If the cursor sits anywhere near the rounded edge (the pill is 32px tall
   so the corner dead-zones are noticeable), a mousedown shrinks the button,
   the cursor falls OUTSIDE the new smaller hit area, and the subsequent
   mouseup lands on the row underneath instead of the button. The browser
   then refuses to synthesize a click — so the player sees a "press" with
   no result. translateY keeps the width/height stable; the button just
   nudges down 1px for tactile feedback. */
.btn-crate-open:active:not(:disabled) { transform: translateY(1px); }
.btn-crate-open:hover:not(:disabled) {
  background: rgba(255,255,255,0.42);
}
.btn-crate-open:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  border-color: rgba(255,255,255,0.35);
}
/* "Openable crate" button — flat, stable, no animations, no compositing
   layers. Bright background + thicker border is the only visual cue. */
.btn-crate-open.glow {
  background: rgba(255,255,255,0.34);
  border-color: #fff;
}
.btn-crate-open.glow:hover:not(:disabled) {
  background: rgba(255,255,255,0.50);
}
.btn-crate-open.glow:active:not(:disabled) {
  background: rgba(255,255,255,0.40);
}

.crate-odds-link {
  margin-top: 14px;
  width: 100%;
  background: transparent;
  border: 1px dashed rgba(58,46,30,0.2);
  color: var(--text-soft);
  font-family: inherit;
  font-weight: 800;
  font-size: 12.5px;
  padding: 11px 14px;
  border-radius: var(--radius);
  cursor: pointer;
  transition: all 0.15s ease;
}
.crate-odds-link:hover {
  background: rgba(58,46,30,0.04);
  border-color: rgba(58,46,30,0.3);
}

/* ============================================================
   11. Boost tab — advisor / MIRA
   ============================================================ */
.advisor-hero {
  background: linear-gradient(135deg, #2c3e50, #1a252f);
  color: var(--text-inv);
  padding: 16px 18px;
  border-radius: var(--radius-lg);
  box-shadow: var(--sh-card-up);
  margin-bottom: 14px;
  position: relative;
  overflow: hidden;
}
.advisor-hero::before {
  content: '';
  position: absolute;
  top: -30px; right: -30px;
  width: 140px; height: 140px;
  background: radial-gradient(circle, rgba(72,202,228,0.3), transparent 70%);
}
.advisor-hero-top {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 10px;
}
.mira-avatar {
  width: 52px; height: 52px;
  display: flex; align-items: center; justify-content: center;
  font-size: 28px;
  background: linear-gradient(135deg, #48cae4, #023e8a);
  border-radius: 16px;
  box-shadow: 0 2px 0 rgba(0,0,0,0.25), inset 0 0 0 2px rgba(255,255,255,0.18);
  position: relative;
}
.mira-avatar::after {
  content: '';
  position: absolute;
  bottom: -2px; right: -2px;
  width: 12px; height: 12px;
  background: var(--good);
  border: 2px solid #fff;
  border-radius: 50%;
  animation: pip 1.6s ease-in-out infinite;
}
.mira-name {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #b8e7ff;
}
.mira-headline {
  font-size: 14px;
  font-weight: 800;
  margin-top: 2px;
}
.mira-quote {
  font-style: italic;
  font-size: 12.5px;
  opacity: 0.86;
  margin-top: 6px;
  line-height: 1.4;
}

.advisor-card {
  background: var(--bg-card);
  border-radius: var(--radius);
  padding: 12px 14px;
  margin-bottom: 10px;
  box-shadow: var(--sh-card);
}
.advisor-label {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 4px;
}
.advisor-value {
  font-size: 15px;
  font-weight: 900;
  color: var(--text);
  line-height: 1.3;
}
.advisor-detail {
  font-size: 12px;
  color: var(--text-soft);
  font-weight: 700;
  margin-top: 4px;
}

.bottleneck-chip {
  display: inline-block;
  margin-top: 8px;
  padding: 3px 10px;
  background: rgba(231,76,60,0.12);
  color: var(--bad);
  border-radius: var(--radius-pill);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.4px;
}

.advisor-action-btn {
  margin-top: 10px;
  background: linear-gradient(180deg, var(--era-color), var(--era-color-d));
  color: var(--text-inv);
  border: 0;
  font-family: inherit;
  font-weight: 900;
  font-size: 12px;
  letter-spacing: 0.4px;
  padding: 9px 18px;
  border-radius: var(--radius-pill);
  cursor: pointer;
  box-shadow: 0 3px 0 rgba(0,0,0,0.18);
  text-transform: uppercase;
  transition: transform 0.12s ease;
}
.advisor-action-btn:active { transform: translateY(2px); box-shadow: 0 1px 0 rgba(0,0,0,0.18); }

/* ============================================================
   12. Empty states
   ============================================================ */
.empty-state {
  padding: 28px 16px;
  text-align: center;
  color: var(--text-dim);
  font-size: 13px;
  font-weight: 700;
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  border: 2px dashed rgba(58,46,30,0.15);
}
.empty-state .empty-icon {
  font-size: 44px;
  display: block;
  margin-bottom: 8px;
  opacity: 0.5;
}
.empty-state .empty-sub {
  font-size: 11px;
  color: var(--text-mute);
  margin-top: 4px;
}

/* ============================================================
   13. Modals — cinematic
   ============================================================ */
#modal-root {
  position: fixed; inset: 0;
  z-index: 100;
  pointer-events: none;
}
#modal-root > * { pointer-events: auto; }

.modal-backdrop {
  position: fixed; inset: 0;
  background: var(--bg-overlay);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  animation: fadeIn 0.2s ease-out;
}

.modal {
  position: fixed;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  /* Sized to phone-frame, not viewport, so on wide screens the modal overlays
     the phone column rather than floating in dead space. */
  width: min(calc(var(--phone-w) - 32px), calc(100vw - 32px));
  max-width: calc(var(--phone-w) - 32px);
  max-height: calc(100vh - 32px);
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  box-shadow:
    0 20px 60px rgba(0,0,0,0.4),
    0 0 0 1px rgba(58,46,30,0.15);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  animation: modalIn 0.28s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.modal-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid rgba(58,46,30,0.08);
  background: linear-gradient(180deg, rgba(255,255,255,0), rgba(0,0,0,0.02));
}
.modal-title {
  font-size: 16px;
  font-weight: 900;
  color: var(--text);
  letter-spacing: 0.3px;
}
.modal-close {
  width: 34px; height: 34px;
  background: transparent;
  border: 0;
  font-size: 24px;
  color: var(--text-soft);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  border-radius: 10px;
  transition: background 0.15s;
}
.modal-close:hover { background: rgba(0,0,0,0.06); }

.modal-body {
  padding: 16px 18px;
  overflow-y: auto;
  flex: 1;
}

.modal-footer {
  display: flex; gap: 8px;
  padding: 12px 18px 16px;
  border-top: 1px solid rgba(58,46,30,0.06);
  background: rgba(0,0,0,0.02);
}
.modal-footer .btn { flex: 1; }

/* Modal buttons */
.btn {
  flex: 1;
  background: var(--bg-shaded);
  color: var(--text);
  font-family: inherit;
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 0.3px;
  padding: 12px 16px;
  border: 0;
  border-radius: var(--radius);
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
  text-align: center;
}
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn.primary {
  background: linear-gradient(180deg, var(--era-color), var(--era-color-d));
  color: var(--text-inv);
  box-shadow: 0 3px 0 rgba(0,0,0,0.18);
}
.btn.primary:active { box-shadow: 0 1px 0 rgba(0,0,0,0.18); }
.btn.good {
  background: linear-gradient(180deg, var(--good), var(--good-dark));
  color: var(--text-inv);
  box-shadow: 0 3px 0 rgba(34,153,84,0.6);
}
.btn.danger {
  background: linear-gradient(180deg, #e74c3c, #b03a2e);
  color: var(--text-inv);
  box-shadow: 0 3px 0 rgba(176,58,46,0.6);
}

/* Crate-open modal */
.modal[data-kind="crate_open"] .modal-body {
  padding: 0;
  overflow-x: hidden;  /* prevent burst animation (scale 2.5x) from triggering a horizontal scrollbar */
  background: radial-gradient(ellipse at center top, #fef9e8 0%, #fff 50%);
}
.crate-open-stage {
  padding: 20px 18px 12px;
  position: relative;
  /* Clip the .burst animation (scales to 2.5x = 500px wide) so it doesn't
     trigger a horizontal scrollbar inside the modal body. */
  overflow: hidden;
}
.crate-open-stage .burst {
  position: absolute;
  top: 30px; left: 50%;
  transform: translateX(-50%);
  width: 200px; height: 200px;
  background: radial-gradient(circle, rgba(255,181,71,0.5), transparent 60%);
  pointer-events: none;
  animation: burst 0.9s ease-out forwards;
}
.crate-reward-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  position: relative;
  z-index: 2;
}
.crate-reward-card {
  background: #fff;
  border-radius: var(--radius);
  padding: 10px;
  display: flex; flex-direction: column; align-items: center;
  box-shadow: var(--sh-card);
  animation: cardDrop 0.6s cubic-bezier(0.2, 0.8, 0.2, 1.2) backwards;
}
.crate-reward-card:nth-child(1) { animation-delay: 0.15s; }
.crate-reward-card:nth-child(2) { animation-delay: 0.25s; }
.crate-reward-card:nth-child(3) { animation-delay: 0.35s; }
.crate-reward-card:nth-child(4) { animation-delay: 0.45s; }
.crate-reward-card:nth-child(5) { animation-delay: 0.55s; }
.crate-reward-card.rarity-common    { box-shadow: 0 2px 0 var(--rare-common), 0 4px 12px rgba(58,46,30,0.08); }
.crate-reward-card.rarity-rare      { box-shadow: 0 2px 0 var(--rare-rare), 0 0 18px rgba(93,173,226,0.25); }
.crate-reward-card.rarity-epic      { box-shadow: 0 2px 0 var(--rare-epic), 0 0 22px rgba(155,89,182,0.28); }
.crate-reward-card.rarity-legendary { box-shadow: 0 2px 0 var(--rare-legendary), 0 0 28px rgba(243,156,18,0.38); animation-name: cardDropLegendary; }
.crate-reward-card .ricon {
  width: 56px; height: 56px;
  font-size: 30px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(255,255,255,0.7), rgba(0,0,0,0.04));
}
.crate-reward-card.rarity-common .ricon    { box-shadow: inset 0 0 0 3px var(--rare-common); }
.crate-reward-card.rarity-rare .ricon      { box-shadow: inset 0 0 0 3px var(--rare-rare); }
.crate-reward-card.rarity-epic .ricon      { box-shadow: inset 0 0 0 3px var(--rare-epic); }
.crate-reward-card.rarity-legendary .ricon { box-shadow: inset 0 0 0 3px var(--rare-legendary); }
.crate-reward-card .rname {
  margin-top: 6px;
  font-size: 11.5px;
  font-weight: 800;
  text-align: center;
  color: var(--text);
}
.crate-reward-card .copies {
  margin-top: 4px;
  font-size: 11px;
  font-weight: 800;
  color: var(--text-soft);
}
.crate-reward-card .copies.new { color: var(--good-dark); }
.crate-reward-card .copies.dupe { color: var(--text-mute); }

.crate-rewards-summary {
  margin-top: 12px;
  padding: 12px;
  background: var(--bg-shaded);
  border-radius: var(--radius);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.crate-rewards-summary .rwd {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px;
  font-weight: 700;
  color: var(--text-soft);
  animation: cardDrop 0.4s ease-out 0.7s backwards;
}
.crate-rewards-summary .rwd strong { color: var(--text); font-weight: 900; }

/* Anomaly modal */
.modal[data-kind="anomaly"] {
  background: linear-gradient(180deg, #1a1f2e, #0f1320);
  color: var(--text-inv);
  border: 1px solid rgba(231,76,60,0.4);
  animation: anomalyIn 0.5s cubic-bezier(0.2, 0.8, 0.2, 1), anomalyGlitch 0.8s ease 0.5s;
}
.modal[data-kind="anomaly"] .modal-header {
  border-bottom-color: rgba(255,255,255,0.1);
  background: rgba(231,76,60,0.15);
}
.modal[data-kind="anomaly"] .modal-title {
  color: var(--text-inv);
  text-shadow: 0 0 12px rgba(231,76,60,0.7);
  letter-spacing: 1px;
  text-transform: uppercase;
}
.anomaly-desc {
  font-size: 13px;
  color: #d4c8b8;
  margin-bottom: 16px;
  line-height: 1.5;
}
.anomaly-choices {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.anomaly-choice {
  background: rgba(255,255,255,0.06);
  border: 1.5px solid rgba(255,255,255,0.18);
  color: var(--text-inv);
  font-family: inherit;
  text-align: left;
  padding: 12px 14px;
  border-radius: var(--radius);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 12px;
  transition: all 0.15s ease;
}
.anomaly-choice:hover { background: rgba(255,255,255,0.1); }
.anomaly-choice:active { transform: scale(0.98); }
.anomaly-choice .ch-id {
  width: 38px; height: 38px;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px;
  font-weight: 900;
  border-radius: 10px;
  background: var(--bad);
  flex-shrink: 0;
  letter-spacing: 0.5px;
}
.anomaly-choice[data-id="A"] .ch-id { background: var(--bad); }
.anomaly-choice[data-id="B"] .ch-id { background: var(--warn); }
.anomaly-choice[data-id="safe"] .ch-id { background: var(--good); }
.anomaly-choice .ch-label {
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.35;
  flex: 1;
}

.anomaly-timer {
  margin-top: 12px;
  text-align: center;
  font-size: 11px;
  color: #8a96a4;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

/* Rank-up modal */
.modal[data-kind="rank_up"] {
  background: radial-gradient(ellipse at top, #ffe5a0 0%, #fff 60%);
  border: 2px solid rgba(243,156,18,0.4);
  animation: rankUpIn 0.6s cubic-bezier(0.2, 0.8, 0.2, 1.1);
}
.modal[data-kind="rank_up"] .modal-header {
  background: linear-gradient(135deg, var(--rare-legendary), #d68910);
  border-bottom: 0;
}
.modal[data-kind="rank_up"] .modal-title {
  color: var(--text-inv);
  font-size: 18px;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-shadow: 0 1px 2px rgba(0,0,0,0.2);
}
.rankup-headline {
  text-align: center;
  padding: 12px 0 16px;
}
.rankup-headline .promoted {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--text-dim);
}
.rankup-headline .new-rank {
  font-size: 48px;
  font-weight: 900;
  background: linear-gradient(135deg, var(--rare-legendary), #d68910);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  letter-spacing: 2px;
  line-height: 1.1;
  animation: numBumpBig 0.6s cubic-bezier(0.2, 0.8, 0.2, 1.4);
}
.rankup-headline .new-name {
  margin-top: 4px;
  font-size: 16px;
  font-weight: 800;
  color: var(--text);
  letter-spacing: 0.5px;
}
.rankup-log {
  font-style: italic;
  font-size: 12.5px;
  color: var(--text-soft);
  line-height: 1.5;
  padding: 12px 14px;
  background: var(--bg-shaded);
  border-radius: var(--radius);
  border-left: 3px solid var(--rare-legendary);
  margin-bottom: 14px;
}

/* Phase 4 — rank tease (renders ABOVE the dry story log). Sells the
   "what just opened" promise loud and clear before flavor text. */
.rankup-tease {
  font-size: 14px;
  font-weight: 900;
  line-height: 1.35;
  padding: 12px 14px;
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  color: var(--text-inv);
  border-radius: var(--radius);
  margin-bottom: 10px;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.18);
  box-shadow: 0 2px 0 rgba(192, 103, 27, 0.45), 0 0 18px rgba(255, 167, 22, 0.35);
}
.rankup-rewards h5 {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 8px;
}
.rankup-rewards > div:not(h5) {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  padding: 4px 0;
}

/* Offline claim modal */
.modal[data-kind="offline_claim"] .modal-header {
  background: linear-gradient(135deg, #2c3e50, #1a252f);
  border-bottom: 0;
}
.modal[data-kind="offline_claim"] .modal-title {
  color: var(--text-inv);
}
.offline-headline {
  text-align: center;
  padding: 18px 0 14px;
}
.offline-headline .away {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--text-dim);
}
.offline-headline .duration {
  margin-top: 4px;
  font-size: 34px;
  font-weight: 900;
  color: var(--text);
  background: linear-gradient(135deg, #2c3e50, #5d4037);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
.offline-headline .blurb {
  margin-top: 6px;
  font-size: 12.5px;
  color: var(--text-soft);
  font-weight: 700;
}
.offline-rewards-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 8px;
}
.offline-rewards-grid .rwd {
  background: var(--bg-shaded);
  border-radius: var(--radius);
  padding: 12px;
  text-align: center;
  animation: cardDrop 0.5s cubic-bezier(0.2, 0.8, 0.2, 1.2) backwards;
}
.offline-rewards-grid .rwd:nth-child(1) { animation-delay: 0.1s; }
.offline-rewards-grid .rwd:nth-child(2) { animation-delay: 0.18s; }
.offline-rewards-grid .rwd:nth-child(3) { animation-delay: 0.26s; }
.offline-rewards-grid .rwd:nth-child(4) { animation-delay: 0.34s; }
.offline-rewards-grid .rwd:nth-child(5) { animation-delay: 0.42s; }
.offline-rewards-grid .rwd .lbl {
  font-size: 11px;
  font-weight: 800;
  color: var(--text-dim);
  letter-spacing: 0.3px;
}
.offline-rewards-grid .rwd .val {
  font-size: 18px;
  font-weight: 900;
  color: var(--text);
  margin-top: 4px;
}

/* Card upgrade modal */
.card-detail {
  display: flex; gap: 14px;
  margin-bottom: 14px;
  align-items: flex-start;
}
.card-detail > .card {
  width: 130px;
  flex-shrink: 0;
  cursor: default;
}
.detail-meta {
  flex: 1; min-width: 0;
}
.rarity-tag {
  display: inline-block;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: var(--radius-pill);
  color: #fff;
  margin-bottom: 6px;
}
.rarity-tag.rarity-common    { background: var(--rare-common); }
.rarity-tag.rarity-rare      { background: var(--rare-rare); }
.rarity-tag.rarity-epic      { background: var(--rare-epic); }
.rarity-tag.rarity-legendary { background: var(--rare-legendary); }
.detail-meta h3 {
  font-size: 17px;
  font-weight: 900;
  color: var(--text);
  letter-spacing: 0.3px;
}
.card-desc {
  font-size: 12.5px;
  color: var(--text-soft);
  font-weight: 600;
  line-height: 1.45;
  margin-top: 6px;
}
.upgrade-cost-row {
  display: flex; gap: 8px;
  margin-bottom: 8px;
}
.upgrade-cost-row .cost {
  flex: 1;
  background: var(--bg-shaded);
  padding: 12px;
  border-radius: var(--radius);
  text-align: center;
}
.upgrade-cost-row .cost .lbl {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--text-dim);
}
.upgrade-cost-row .cost .val {
  font-size: 18px;
  font-weight: 900;
  color: var(--text);
  margin-top: 4px;
}
.upgrade-cost-row .cost .val.short { color: var(--bad); }

/* Crate odds modal */
.odds-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 12px;
}
.odds-table th, .odds-table td {
  padding: 8px 6px;
  text-align: center;
  border-bottom: 1px solid rgba(58,46,30,0.08);
}
.odds-table th {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--text-dim);
}
.odds-table td:first-child {
  font-weight: 800;
  color: var(--text);
  text-align: left;
}
.odds-table .pct {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--text-soft);
}

/* Directives modal */
.directives-grid {
  display: flex; flex-direction: column;
  gap: 8px;
  margin-top: 8px;
}
.directive-option {
  background: var(--bg-shaded);
  border: 2px solid transparent;
  color: var(--text);
  font-family: inherit;
  text-align: left;
  padding: 12px 14px;
  border-radius: var(--radius);
  cursor: pointer;
  transition: all 0.15s ease;
}
.directive-option:hover { background: rgba(0,0,0,0.06); }
.directive-option:active { transform: scale(0.98); }
.directive-option.picked {
  background: rgba(244,162,97,0.15);
  border-color: var(--era-color);
}
.directive-option .d-name {
  font-size: 13px;
  font-weight: 800;
  color: var(--text);
}
.directive-option .d-reward {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-soft);
  margin-top: 3px;
}

/* ============================================================
   14. Notifications — floating toast strip above tab bar
   ============================================================ */
#notifications {
  position: absolute;
  bottom: calc(var(--tabbar-h) + 10px);
  left: 16px;
  right: 16px;
  z-index: 90;
  display: flex;
  flex-direction: column-reverse;   /* newest at bottom, older slide up & fade */
  gap: 6px;
  pointer-events: none;
}
/* Ensure the phone shell is the positioning context for notifications. */
.app-shell { position: relative; }
.notif {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 13px;
  background: rgba(20,18,28,0.94);
  color: #fff;
  border-radius: var(--radius);
  box-shadow:
    0 6px 22px rgba(0,0,0,0.35),
    0 0 0 1px rgba(255,255,255,0.06);
  border-left: 4px solid var(--info);
  pointer-events: auto;
  cursor: pointer;
  animation: notifIn 0.28s cubic-bezier(0.2, 0.8, 0.2, 1);
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.3;
  max-width: 100%;
  overflow: hidden;
}
.notif.fade-out { animation: notifOut 0.26s forwards; }
.notif.good { border-left-color: var(--good); }
.notif.bad  { border-left-color: var(--bad); }
.notif.warn { border-left-color: var(--warn); }
.notif.epic {
  border-left-color: var(--rare-legendary);
  background: linear-gradient(135deg, rgba(60,46,14,0.96), rgba(20,18,28,0.96));
  box-shadow:
    0 6px 22px rgba(0,0,0,0.4),
    0 0 18px rgba(243,156,18,0.25),
    0 0 0 1px rgba(243,156,18,0.3);
}
.notif-icon {
  width: 22px; height: 22px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 7px;
  background: var(--info);
  color: #fff;
  font-size: 12px;
  font-weight: 900;
  flex-shrink: 0;
}
.notif.good .notif-icon { background: var(--good); }
.notif.bad  .notif-icon { background: var(--bad); }
.notif.warn .notif-icon { background: var(--warn); }
.notif.epic .notif-icon { background: var(--rare-legendary); color: #2a2218; }
.notif-msg {
  flex: 1;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.notif.epic .notif-msg { white-space: normal; }

/* Action-style notif (used for first-launch sign-in prompt). The body
   text wraps, a CTA button sits inline, and a small × dismisses. */
.notif.has-action {
  cursor: default;
}
.notif.has-action .notif-msg {
  white-space: normal;
  font-weight: 700;
}
.notif-action {
  flex-shrink: 0;
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  color: var(--text-inv);
  border: 0;
  font-family: inherit;
  font-weight: 900;
  font-size: 11px;
  letter-spacing: 0.3px;
  padding: 6px 12px;
  border-radius: var(--radius-pill);
  cursor: pointer;
  box-shadow: 0 2px 0 rgba(192, 103, 27, 0.45);
  transition: transform 0.12s ease, box-shadow 0.15s ease;
  text-transform: uppercase;
}
.notif-action:hover  { transform: translateY(-1px); box-shadow: 0 3px 0 rgba(192, 103, 27, 0.45); }
.notif-action:active { transform: translateY(1px); box-shadow: 0 1px 0 rgba(192, 103, 27, 0.45); }
.notif-close {
  flex-shrink: 0;
  background: transparent;
  border: 0;
  color: var(--text-dim);
  font-size: 18px;
  line-height: 1;
  width: 22px; height: 22px;
  cursor: pointer;
  border-radius: 6px;
  padding: 0;
  font-family: inherit;
}
.notif-close:hover { background: rgba(0,0,0,0.06); color: var(--text); }

/* ============================================================
   15. Utility
   ============================================================ */
.hidden { display: none !important; }
.text-center { text-align: center; }
.text-dim { color: var(--text-dim); }
.text-mute { color: var(--text-mute); }
.text-good { color: var(--good-dark); }
.text-bad  { color: var(--bad); }
.small { font-size: 11px; font-weight: 700; }
.mt-8  { margin-top: 8px; }
.mt-12 { margin-top: 12px; }

/* ============================================================
   16. Animations / keyframes
   ============================================================ */
@keyframes pulse {
  0%, 100% { opacity: 0.6; transform: scale(1); }
  50%      { opacity: 1;   transform: scale(1.03); }
}
@keyframes numBump {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.15); }
  100% { transform: scale(1); }
}
@keyframes numBumpBig {
  0%   { transform: scale(0.5); opacity: 0; }
  60%  { transform: scale(1.15); opacity: 1; }
  100% { transform: scale(1); }
}
@keyframes shimmer {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(200%); }
}
@keyframes sweep {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}
@keyframes producerPulse {
  0%, 100% { box-shadow: var(--sh-card); }
  50%      { box-shadow: var(--sh-card-up), 0 0 0 2px rgba(46,204,113,0.18); }
}
@keyframes claimPulse {
  0%, 100% { box-shadow: 0 3px 0 rgba(34,153,84,0.6), 0 0 0 rgba(46,204,113,0); }
  50%      { box-shadow: 0 3px 0 rgba(34,153,84,0.6), 0 0 22px rgba(46,204,113,0.7); }
}
@keyframes rankUpPulse {
  0%, 100% { box-shadow: var(--sh-card-up), 0 0 0 rgba(255,181,71,0); transform: translateY(0); }
  50%      { box-shadow: var(--sh-card-up), 0 0 30px rgba(255,181,71,0.7); transform: translateY(-1px); }
}
@keyframes completeGlow {
  0%, 100% { box-shadow: var(--sh-card), 0 0 0 rgba(255,181,71,0); }
  50%      { box-shadow: var(--sh-card), 0 0 14px rgba(255,181,71,0.45); }
}
@keyframes crateGlow {
  0%, 100% { box-shadow: 0 0 0 rgba(255,255,255,0); }
  50%      { box-shadow: 0 0 18px rgba(255,255,255,0.45); }
}
@keyframes paradoxSwirl {
  0%   { background-position: 0% 0%; }
  100% { background-position: 100% 100%; }
}
@keyframes pip {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%      { transform: scale(1.3); opacity: 0.6; }
}
@keyframes badgePulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.18); }
}
@keyframes epicShimmer {
  0%, 100% { filter: drop-shadow(0 0 4px rgba(155,89,182,0.4)); }
  50%      { filter: drop-shadow(0 0 10px rgba(155,89,182,0.8)); }
}
@keyframes legendaryShimmer {
  0%, 100% { filter: drop-shadow(0 0 6px rgba(243,156,18,0.5)); }
  50%      { filter: drop-shadow(0 0 14px rgba(243,156,18,0.9)); }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes modalIn {
  from { opacity: 0; transform: translate(-50%, -50%) scale(0.92); }
  to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
@keyframes anomalyIn {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.85) rotate(-1deg); }
  60%  { opacity: 1; transform: translate(-50%, -50%) scale(1.02) rotate(0.5deg); }
  100% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
@keyframes anomalyGlitch {
  0%   { transform: translate(-50%, -50%) translateX(0); }
  20%  { transform: translate(-50%, -50%) translateX(-3px); }
  40%  { transform: translate(-50%, -50%) translateX(3px); }
  60%  { transform: translate(-50%, -50%) translateX(-2px); }
  80%  { transform: translate(-50%, -50%) translateX(2px); }
  100% { transform: translate(-50%, -50%) translateX(0); }
}
@keyframes rankUpIn {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.6) rotate(-3deg); }
  60%  { opacity: 1; transform: translate(-50%, -50%) scale(1.05) rotate(1deg); }
  100% { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(0); }
}
@keyframes burst {
  0%   { transform: translateX(-50%) scale(0.4); opacity: 0; }
  40%  { opacity: 1; }
  100% { transform: translateX(-50%) scale(2.5); opacity: 0; }
}
@keyframes cardDrop {
  0%   { opacity: 0; transform: translateY(-20px) scale(0.7); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes cardDropLegendary {
  0%   { opacity: 0; transform: translateY(-30px) scale(0.5) rotate(-8deg); }
  60%  { opacity: 1; transform: translateY(4px) scale(1.1) rotate(2deg); filter: brightness(1.4); }
  100% { opacity: 1; transform: translateY(0) scale(1) rotate(0); filter: brightness(1); }
}
@keyframes slideInRight {
  0%   { opacity: 0; transform: translateX(20px); }
  100% { opacity: 1; transform: translateX(0); }
}
@keyframes dropdown {
  0%   { opacity: 0; transform: translateY(-6px); }
  100% { opacity: 1; transform: translateY(0); }
}
@keyframes notifIn {
  0%   { opacity: 0; transform: translateY(-12px) scale(0.92); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes notifOut {
  0%   { opacity: 1; transform: translateX(0); }
  100% { opacity: 0; transform: translateX(60px); }
}

/* ============================================================
   17. Polish — idle-game "juice"
   ============================================================ */

/* ---- Number bump on increase ---- */
.bump {
  animation: numBumpJuicy 0.32s cubic-bezier(0.2, 0.8, 0.2, 1.4);
  will-change: transform, color;
}
.bump-resource {
  animation: numBumpResource 0.36s cubic-bezier(0.2, 0.8, 0.2, 1.4);
  will-change: transform, color;
}
.bump-big {
  animation: numBumpJuicyBig 0.42s cubic-bezier(0.2, 0.8, 0.2, 1.5);
  will-change: transform, color;
}
@keyframes numBumpJuicy {
  0%   { transform: scale(1);                  color: inherit; }
  35%  { transform: scale(1.12) translateY(-1px); color: var(--good-dark); }
  70%  { transform: scale(0.98);               color: var(--good-dark); }
  100% { transform: scale(1);                  color: inherit; }
}
@keyframes numBumpResource {
  0%   { transform: scale(1);                  color: inherit; text-shadow: none; }
  35%  { transform: scale(1.16) translateY(-1px); color: var(--good-dark); text-shadow: 0 0 8px rgba(46,204,113,0.6); }
  70%  { transform: scale(0.97);               color: var(--good-dark); text-shadow: 0 0 4px rgba(46,204,113,0.3); }
  100% { transform: scale(1);                  color: inherit; text-shadow: none; }
}
@keyframes numBumpJuicyBig {
  0%   { transform: scale(1);                  color: var(--text-inv); text-shadow: 0 2px 6px rgba(0,0,0,0.15); }
  30%  { transform: scale(1.18) translateY(-2px); color: #fff; text-shadow: 0 0 14px rgba(255,255,255,0.7), 0 2px 6px rgba(0,0,0,0.15); }
  70%  { transform: scale(0.96);               color: var(--text-inv); text-shadow: 0 2px 6px rgba(0,0,0,0.15); }
  100% { transform: scale(1);                  color: var(--text-inv); text-shadow: 0 2px 6px rgba(0,0,0,0.15); }
}

/* ---- Producer count odometer ---- */
.prod-count.flip {
  display: inline-block;
  animation: countFlip 0.34s cubic-bezier(0.2, 0.8, 0.2, 1.4);
  transform-origin: center;
  will-change: transform, color;
}
@keyframes countFlip {
  0%   { transform: scaleY(1);  color: var(--text); }
  35%  { transform: scaleY(0.05) translateY(2px); color: var(--good-dark); }
  70%  { transform: scaleY(1.15) translateY(-1px); color: var(--good-dark); }
  100% { transform: scaleY(1);  color: var(--text); }
}

/* ---- Buy button press + ripple + +1 popup ---- */
.btn-buy, .prod-buy {
  position: relative;
  overflow: hidden;
}
.btn-buy:active, .prod-buy:active {
  transform: translateY(2px) scale(0.96);
}
.prod-buy.affordable {
  /* gentle affordance pulse — already has box-shadow base from earlier */
  animation: affordablePulse 2.1s ease-in-out infinite;
}
@keyframes affordablePulse {
  0%, 100% {
    box-shadow:
      0 3px 0 color-mix(in srgb, var(--era-color-d) 70%, rgba(0,0,0,0.4)),
      0 0 12px color-mix(in srgb, var(--era-color) 35%, transparent);
  }
  50% {
    box-shadow:
      0 3px 0 color-mix(in srgb, var(--era-color-d) 70%, rgba(0,0,0,0.4)),
      0 0 22px color-mix(in srgb, var(--era-color) 70%, transparent),
      0 0 38px color-mix(in srgb, var(--era-color) 35%, transparent);
  }
}

.ripple {
  position: absolute;
  pointer-events: none;
  border-radius: 50%;
  background: rgba(255,255,255,0.55);
  transform: translate(-50%, -50%) scale(0);
  animation: ripple 0.5s ease-out forwards;
  z-index: 2;
  mix-blend-mode: screen;
}
@keyframes ripple {
  0%   { transform: translate(-50%, -50%) scale(0);   opacity: 0.55; }
  100% { transform: translate(-50%, -50%) scale(3.4); opacity: 0; }
}

.plus-popup {
  position: absolute;
  pointer-events: none;
  font-family: inherit;
  font-weight: 900;
  font-size: 14px;
  color: #fff;
  text-shadow: 0 1px 0 rgba(0,0,0,0.3), 0 0 6px rgba(46,204,113,0.7);
  background: linear-gradient(180deg, var(--good), var(--good-dark));
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  box-shadow: 0 2px 8px rgba(0,0,0,0.25);
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) scale(0.7);
  animation: plusPopup 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
  white-space: nowrap;
  z-index: 3;
  letter-spacing: 0.3px;
}
@keyframes plusPopup {
  0%   { transform: translate(-50%, -50%) scale(0.4); opacity: 0; }
  20%  { transform: translate(-50%, -110%) scale(1.15); opacity: 1; }
  100% { transform: translate(-50%, -260%) scale(1); opacity: 0; }
}

/* ---- Resource gain popups (topbar) ---- */
#gain-popup-layer {
  position: absolute;
  top: 0; left: 0;
  pointer-events: none;
  z-index: 80;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.gain-popup {
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 11px;
  background: linear-gradient(180deg, rgba(46,204,113,0.95), rgba(34,153,84,0.95));
  color: #fff;
  font-family: inherit;
  font-weight: 900;
  font-size: 13px;
  border-radius: var(--radius-pill);
  box-shadow: 0 4px 14px rgba(0,0,0,0.25), 0 0 0 1px rgba(255,255,255,0.18);
  white-space: nowrap;
  letter-spacing: 0.3px;
  pointer-events: none;
  animation: gainPopup 1.4s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
  transform: translate(-50%, 0) scale(0.7);
  text-shadow: 0 1px 0 rgba(0,0,0,0.25);
}
.gain-popup.epic {
  background: linear-gradient(180deg, var(--rare-legendary), #d68910);
  box-shadow: 0 4px 14px rgba(243,156,18,0.45), 0 0 0 1px rgba(255,255,255,0.2);
}
.gain-popup .gp-icon { font-size: 14px; }
@keyframes gainPopup {
  0%   { transform: translate(-50%, 0) scale(0.4);   opacity: 0; }
  15%  { transform: translate(-50%, -8px) scale(1.15); opacity: 1; }
  85%  { transform: translate(-50%, -54px) scale(1); opacity: 1; }
  100% { transform: translate(-50%, -72px) scale(0.95); opacity: 0; }
}

/* ---- Mission claim celebration ---- */
.mission.celebrating {
  animation: missionCelebrate 1.2s cubic-bezier(0.2, 0.8, 0.2, 1.2);
  z-index: 2;
  position: relative;
}
@keyframes missionCelebrate {
  0%   { transform: scale(1);    box-shadow: var(--sh-card), 0 0 0 0 rgba(46,204,113,0); }
  20%  { transform: scale(1.03); box-shadow: var(--sh-card-up), 0 0 22px rgba(46,204,113,0.65), 0 0 0 3px rgba(46,204,113,0.55); }
  55%  { transform: scale(1.01); box-shadow: var(--sh-card-up), 0 0 32px rgba(46,204,113,0.5), 0 0 0 2px rgba(46,204,113,0.35); }
  100% { transform: scale(1);    box-shadow: var(--sh-card), 0 0 0 0 rgba(46,204,113,0); }
}
.mission-burst-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: visible;
  z-index: 1;
}
.mission-burst-dot {
  position: absolute;
  top: 50%; left: 50%;
  width: 18px; height: 18px;
  font-size: 16px;
  line-height: 1;
  display: flex; align-items: center; justify-content: center;
  pointer-events: none;
  transform: translate(-50%, -50%);
  animation: burstDot 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
  text-shadow: 0 1px 4px rgba(0,0,0,0.25);
}
@keyframes burstDot {
  0%   { transform: translate(-50%, -50%) scale(0.4); opacity: 0; }
  20%  { transform: translate(calc(-50% + var(--dx, 0)), calc(-50% + var(--dy, 0))) scale(1.1); opacity: 1; }
  100% { transform: translate(calc(-50% + var(--dxe, 0)), calc(-50% + var(--dye, 0))) scale(0.7); opacity: 0; }
}

/* ---- Tab badge pulse ---- */
.tab-badge.pulse {
  animation: badgePulseStrong 0.6s cubic-bezier(0.2, 0.8, 0.2, 1.4) 0s 3;
}
@keyframes badgePulseStrong {
  0%   { transform: scale(1);    box-shadow: 0 1px 0 rgba(0,0,0,0.2), 0 0 0 0 rgba(231,76,60,0.7); }
  35%  { transform: scale(1.45); box-shadow: 0 1px 0 rgba(0,0,0,0.2), 0 0 0 8px rgba(231,76,60,0); }
  100% { transform: scale(1);    box-shadow: 0 1px 0 rgba(0,0,0,0.2), 0 0 0 0 rgba(231,76,60,0); }
}

/* ---- Crate open drama (extra) ---- */
.crate-open-stage.dramatic .crate-shake-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 64px;
  margin: 12px auto 6px;
  width: 90px; height: 90px;
  border-radius: 20px;
  background: linear-gradient(135deg, rgba(255,255,255,0.4), rgba(0,0,0,0.06));
  animation: crateShake 0.85s cubic-bezier(0.36, 0.07, 0.19, 0.97);
  filter: drop-shadow(0 4px 14px rgba(0,0,0,0.25));
  text-shadow: 0 2px 4px rgba(0,0,0,0.2);
  will-change: transform;
}
@keyframes crateShake {
  0%, 100%  { transform: translateX(0) rotate(0); }
  10%       { transform: translateX(-6px) rotate(-3deg) scale(1.04); }
  20%       { transform: translateX(7px)  rotate(4deg)  scale(1.07); }
  35%       { transform: translateX(-8px) rotate(-5deg) scale(1.10); }
  50%       { transform: translateX(8px)  rotate(5deg)  scale(1.12); }
  65%       { transform: translateX(-6px) rotate(-3deg) scale(1.08); }
  80%       { transform: translateX(4px)  rotate(2deg)  scale(1.04); }
  95%       { transform: translateX(-2px) rotate(0)     scale(1.02); }
}

/* Big radial burst behind reward card, rarity-colored */
.crate-burst-back {
  position: absolute;
  top: 30px; left: 50%;
  width: 240px; height: 240px;
  transform: translateX(-50%);
  pointer-events: none;
  border-radius: 50%;
  opacity: 0;
  animation: crateBurstBack 1.1s cubic-bezier(0.2, 0.8, 0.2, 1) 0.4s forwards;
  z-index: 0;
}
.crate-burst-back.rarity-common    { background: radial-gradient(circle, rgba(183,168,144,0.55), transparent 60%); }
.crate-burst-back.rarity-rare      { background: radial-gradient(circle, rgba(93,173,226,0.65), transparent 60%); }
.crate-burst-back.rarity-epic      { background: radial-gradient(circle, rgba(155,89,182,0.75), transparent 60%); }
.crate-burst-back.rarity-legendary { background: radial-gradient(circle, rgba(243,156,18,0.85), transparent 55%); }
@keyframes crateBurstBack {
  0%   { transform: translateX(-50%) scale(0.2); opacity: 0; }
  30%  { transform: translateX(-50%) scale(1);   opacity: 1; }
  100% { transform: translateX(-50%) scale(2.4); opacity: 0; }
}

/* Sparkle dots scattered around the burst */
.sparkle-dot {
  position: absolute;
  top: 50%; left: 50%;
  width: 10px; height: 10px;
  font-size: 14px;
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 6px rgba(255,215,0,0.85);
  transform: translate(-50%, -50%) scale(0);
  animation: sparkle 1.2s ease-out forwards;
}
@keyframes sparkle {
  0%   { transform: translate(-50%, -50%) scale(0); opacity: 0; }
  30%  { transform: translate(calc(-50% + var(--sx, 0)), calc(-50% + var(--sy, 0))) scale(1.2); opacity: 1; }
  100% { transform: translate(calc(-50% + var(--sxe, 0)), calc(-50% + var(--sye, 0))) scale(0.4); opacity: 0; }
}

/* ---- Rank-up screen flash + confetti ---- */
.rank-up-flash {
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse at center, rgba(255,215,0,0.4), rgba(255,181,71,0.18) 50%, transparent 75%);
  animation: rankUpFlash 0.7s ease-out forwards;
  z-index: 200;
}
@keyframes rankUpFlash {
  0%   { opacity: 0; }
  20%  { opacity: 1; }
  100% { opacity: 0; }
}
.rankup-confetti-layer {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 201;
}
.confetti-dot {
  position: absolute;
  top: 50%; left: 50%;
  width: 10px; height: 14px;
  border-radius: 2px;
  pointer-events: none;
  transform: translate(-50%, -50%) rotate(0);
  animation: confettiFly 1.4s cubic-bezier(0.2, 0.6, 0.4, 1) forwards;
  box-shadow: 0 0 8px rgba(255,255,255,0.4);
}
@keyframes confettiFly {
  0%   { transform: translate(-50%, -50%) rotate(0)            scale(0.6); opacity: 0; }
  15%  { transform: translate(calc(-50% + var(--cx, 0) * 0.2), calc(-50% + var(--cy, 0) * 0.2)) rotate(60deg) scale(1.1); opacity: 1; }
  100% { transform: translate(calc(-50% + var(--cx, 0)), calc(-50% + var(--cy, 0) + 120px))            rotate(540deg) scale(0.5); opacity: 0; }
}

/* ---- Anomaly modal extra ---- */
.modal[data-kind="anomaly"] .modal-backdrop,
.modal[data-kind="anomaly"] {
  /* (modal backdrop styling stays on its element) */
}
.modal-backdrop.anomaly-tinted {
  background: radial-gradient(ellipse at center, rgba(231,76,60,0.32), rgba(20,18,28,0.78) 70%);
  animation: anomalyBackdropPulse 1.6s ease-in-out infinite;
}
@keyframes anomalyBackdropPulse {
  0%, 100% { background: radial-gradient(ellipse at center, rgba(231,76,60,0.28), rgba(20,18,28,0.78) 70%); }
  50%      { background: radial-gradient(ellipse at center, rgba(243,156,18,0.32), rgba(20,18,28,0.78) 70%); }
}
.anomaly-warn-icon {
  display: block;
  text-align: center;
  font-size: 64px;
  margin: 6px 0 14px;
  animation: warnShake 1.4s ease-in-out infinite;
  filter: drop-shadow(0 0 10px rgba(231,76,60,0.7));
}
@keyframes warnShake {
  0%, 100% { transform: rotate(0); }
  15%      { transform: rotate(-8deg) scale(1.05); }
  30%      { transform: rotate(8deg)  scale(1.05); }
  45%      { transform: rotate(-6deg) scale(1.02); }
  60%      { transform: rotate(6deg)  scale(1.02); }
  75%      { transform: rotate(-2deg); }
}

/* Reduced motion: turn off ambient animations */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ============================================================
   Agent A — Daily Operations + Login Streak
   Additive: topbar 📅 button, notification dot, and modal
   styles for streak timeline + op cards. All new CSS selectors;
   does not modify existing rules.
   ============================================================ */

/* --- Topbar daily button -------------------------------------- */
/* Share the look of .topbar-settings but place it in the settings
   grid area's auto track. We re-use grid-area: settings so it
   stays right-aligned with the gear icon. */
.topbar { grid-template-areas: "logo rank actions" "chips chips chips" !important; }
.topbar-daily,
.topbar-trophy {
  grid-area: actions;
  width: 32px; height: 32px;
  border-radius: 10px;
  border: 1px solid rgba(192, 103, 27, 0.45);
  background: linear-gradient(180deg, #fff3d6 0%, #ffd089 100%);
  color: #6b3f10;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  box-shadow:
    0 2px 0 rgba(192, 103, 27, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.55);
  transition: transform 0.12s ease, box-shadow 0.15s ease, background 0.2s ease;
  position: relative;
  padding: 0;
  font-family: inherit;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.45);
}
.topbar-daily:hover,
.topbar-trophy:hover {
  background: linear-gradient(180deg, #ffe9b3 0%, #ffbc66 100%);
}
.topbar-daily:active,
.topbar-trophy:active {
  transform: scale(0.92);
  box-shadow: 0 1px 0 rgba(192, 103, 27, 0.35),
              inset 0 2px 4px rgba(192, 103, 27, 0.25);
}

/* Group the action buttons (daily + trophy + settings) into a
   single flex row at the right of the topbar grid. */
.topbar > .topbar-daily,
.topbar > .topbar-trophy,
.topbar > .topbar-settings {
  grid-area: actions;
}
.topbar { gap: 6px 6px; }
.topbar > .topbar-daily   { justify-self: end; margin-right: 80px; }
.topbar > .topbar-trophy  { justify-self: end; margin-right: 42px; }
.topbar > .topbar-settings{ justify-self: end; margin-right: 0;    }

/* Notification dot for action buttons (daily/trophy). */
.topbar-notif-dot {
  position: absolute;
  top: -3px; right: -3px;
  width: 10px; height: 10px;
  background: var(--bad);
  border-radius: 50%;
  box-shadow: 0 0 0 2px #fff, 0 0 6px rgba(231,76,60,0.7);
  animation: notifDotPulse 1.4s ease-in-out infinite;
  pointer-events: none;
}
.topbar-daily.has-notif,
.topbar-trophy.has-notif {
  box-shadow: 0 1px 0 rgba(58,46,30,0.08), 0 0 0 1px rgba(231,76,60,0.3);
}
@keyframes notifDotPulse {
  0%, 100% { transform: scale(1);   opacity: 1;   }
  50%      { transform: scale(1.25); opacity: 0.85; }
}

/* --- Daily Ops modal ------------------------------------------ */
.modal[data-kind="daily_ops"] .modal-body {
  padding: 14px 16px 18px;
  background: linear-gradient(180deg, #fef9e8 0%, #fff 100%);
}

/* Streak section */
.daily-streak {
  background: #fff;
  border-radius: var(--radius);
  padding: 12px 14px 14px;
  box-shadow: var(--sh-card);
  border: 1px solid rgba(255,181,71,0.25);
}
.daily-streak-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 10px;
}
.daily-streak-title {
  font-size: 13px;
  font-weight: 900;
  color: var(--text);
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.daily-streak-badge {
  display: inline-flex; align-items: center; gap: 4px;
  background: linear-gradient(135deg, #ff7a45, #e74c3c);
  color: #fff;
  font-weight: 900;
  font-size: 12px;
  padding: 4px 10px 4px 8px;
  border-radius: var(--radius-pill);
  box-shadow: 0 2px 0 rgba(176,58,46,0.4);
}
.daily-streak-badge .streak-flame {
  font-size: 14px;
  filter: drop-shadow(0 0 4px rgba(255,181,71,0.8));
}

.daily-streak-timeline {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  margin-bottom: 12px;
}
.streak-dot {
  display: flex; flex-direction: column; align-items: center;
  background: var(--bg-shaded);
  border-radius: 8px;
  padding: 8px 2px 6px;
  border: 1px solid rgba(58,46,30,0.08);
  transition: transform 0.2s ease;
}
.streak-dot.milestone {
  background: linear-gradient(180deg, #fff5dd, #ffe6b3);
  border-color: rgba(255,181,71,0.6);
}
.streak-dot.claimed {
  background: linear-gradient(180deg, #d6f5e3, #b8ebcc);
  border-color: rgba(46,204,113,0.45);
  opacity: 0.85;
}
.streak-dot.today {
  transform: scale(1.12);
  background: linear-gradient(180deg, #fff, #fef0c8);
  border: 2px solid var(--brand);
  box-shadow: 0 0 0 2px rgba(255,181,71,0.25),
              0 4px 12px rgba(255,181,71,0.35);
  z-index: 1;
}
.streak-dot.today.claimed {
  background: linear-gradient(180deg, #fff, #c8f0d8);
  border-color: var(--good);
  box-shadow: 0 0 0 2px rgba(46,204,113,0.25), 0 4px 10px rgba(46,204,113,0.3);
}
.streak-dot.future { opacity: 0.55; }
.streak-dot-icon {
  font-size: 14px;
  font-weight: 900;
  line-height: 1;
  color: var(--text-soft);
  margin-bottom: 2px;
}
.streak-dot.milestone .streak-dot-icon { color: var(--brand); font-size: 16px; }
.streak-dot.claimed .streak-dot-icon { color: var(--good-dark); }
.streak-dot.today .streak-dot-icon { color: var(--brand-2); }
.streak-dot-day {
  font-size: 10px;
  font-weight: 800;
  color: var(--text-dim);
  letter-spacing: 0.3px;
  font-variant-numeric: tabular-nums;
}
.streak-dot.today .streak-dot-day { color: var(--text); }

/* Today's reward card */
.daily-streak-reward {
  display: flex; align-items: center; gap: 10px;
  background: linear-gradient(135deg, #fff5dd, #fce5b3);
  border-radius: var(--radius);
  padding: 10px 12px;
  border: 1px solid rgba(255,181,71,0.45);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.6);
  flex-wrap: wrap;
}
.daily-streak-reward .srw-lbl {
  font-size: 10.5px;
  font-weight: 900;
  color: var(--text-soft);
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.daily-streak-reward .srw-line {
  flex: 1;
  font-size: 14px;
  font-weight: 900;
  color: var(--text);
  letter-spacing: 0.2px;
}
.daily-streak-reward .srw-done {
  flex: 1;
  font-size: 12px;
  font-weight: 800;
  color: var(--good-dark);
}
.daily-streak-reward .srw-next {
  flex-basis: 100%;
  margin-top: 4px;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-dim);
}
.daily-streak-reward .srw-next-lbl {
  font-weight: 900;
  color: var(--text-soft);
  margin-right: 4px;
  text-transform: uppercase;
  font-size: 10.5px;
  letter-spacing: 0.3px;
}
.daily-streak-reward.next-preview {
  background: linear-gradient(135deg, #f1f6ee, #e2eedd);
  border-color: rgba(46,204,113,0.4);
}
.daily-streak-reward .srw-lbl { flex-basis: 100%; }

/* Streak claim button (re-uses .btn-claim look but tweak color). */
.btn-claim.daily-claim-streak {
  background: linear-gradient(180deg, #ffb547, #e76f51);
  color: var(--text-inv);
  font-family: inherit;
  font-weight: 900;
  font-size: 12px;
  letter-spacing: 0.4px;
  padding: 10px 22px;
  border: 0;
  border-radius: var(--radius-pill);
  cursor: pointer;
  box-shadow: 0 3px 0 rgba(176,58,46,0.5);
  transition: all 0.15s ease;
  text-transform: uppercase;
}
.btn-claim.daily-claim-streak:active {
  transform: translateY(2px);
  box-shadow: 0 1px 0 rgba(176,58,46,0.5);
}
.btn-claim.daily-claim-streak.glow {
  animation: dailyStreakPulse 1.4s ease-in-out infinite;
}
@keyframes dailyStreakPulse {
  0%, 100% { box-shadow: 0 3px 0 rgba(176,58,46,0.5),
                          0 0 0 0 rgba(255,181,71,0.55); }
  50%      { box-shadow: 0 3px 0 rgba(176,58,46,0.5),
                          0 0 16px 4px rgba(255,181,71,0.55); }
}

/* Divider between streak and ops */
.daily-divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(58,46,30,0.18), transparent);
  margin: 14px 0 12px;
}

/* Ops list header + reset timer */
.daily-ops-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 8px;
}
.daily-ops-title {
  font-size: 13px;
  font-weight: 900;
  color: var(--text);
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.daily-reset-timer {
  font-size: 11px;
  font-weight: 800;
  color: var(--text-dim);
  background: rgba(0,0,0,0.04);
  border-radius: var(--radius-pill);
  padding: 3px 10px;
  font-variant-numeric: tabular-nums;
}

/* Op cards */
.daily-ops-list {
  display: flex; flex-direction: column;
  gap: 10px;
}
.daily-op {
  background: #fff;
  border-radius: var(--radius);
  padding: 12px;
  border: 1px solid rgba(58,46,30,0.08);
  box-shadow: var(--sh-card);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.daily-op.complete {
  border-color: rgba(46,204,113,0.5);
  box-shadow: 0 2px 0 rgba(46,204,113,0.35), 0 4px 12px rgba(46,204,113,0.18);
}
.daily-op.claimed {
  opacity: 0.55;
  background: var(--bg-shaded);
}
.daily-op-head {
  display: flex; align-items: flex-start; gap: 10px;
}
.daily-op-icon {
  font-size: 20px;
  width: 38px; height: 38px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  border-radius: 10px;
  color: var(--text-inv);
  flex-shrink: 0;
  box-shadow: 0 1px 0 rgba(58,46,30,0.18);
}
.daily-op-body { flex: 1; min-width: 0; }
.daily-op-name {
  font-size: 13px;
  font-weight: 900;
  color: var(--text);
  line-height: 1.25;
  margin-bottom: 2px;
}
.daily-diff-tag {
  display: inline-block;
  font-size: 9.5px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  padding: 1px 6px;
  border-radius: var(--radius-pill);
  margin-right: 6px;
  vertical-align: middle;
}
.daily-diff-tag.diff-short {
  background: rgba(52,152,219,0.15);
  color: var(--info);
}
.daily-diff-tag.diff-medium {
  background: rgba(243,156,18,0.18);
  color: #b07514;
}
.daily-diff-tag.diff-choice {
  background: rgba(155,89,182,0.18);
  color: var(--epic);
}
.daily-op-desc {
  font-size: 11.5px;
  color: var(--text-dim);
  margin-top: 4px;
  line-height: 1.35;
}
.daily-op-rewards {
  display: flex; gap: 5px;
  margin-top: 6px;
  flex-wrap: wrap;
}
.daily-reward-chip {
  display: inline-flex; align-items: center; gap: 4px;
  background: rgba(0,0,0,0.05);
  border-radius: var(--radius-pill);
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 800;
  color: var(--text-soft);
}
.daily-reward-chip .chip-emoji { font-size: 13px; }

.daily-op-progress-row {
  display: flex; align-items: center; gap: 8px;
  margin-top: 10px;
}
.daily-op-progress-bar {
  flex: 1;
  height: 10px;
  background: rgba(0,0,0,0.06);
  border-radius: var(--radius-pill);
  overflow: hidden;
}
.daily-op-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--era-color), var(--era-color-2));
  border-radius: var(--radius-pill);
  transition: width 0.3s ease-out;
  box-shadow: inset 0 -2px 0 rgba(0,0,0,0.1);
}
.daily-op.complete .daily-op-progress-fill {
  background: linear-gradient(90deg, var(--good), var(--good-dark));
}
.daily-op-progress-text {
  font-size: 11px;
  font-weight: 800;
  color: var(--text-soft);
  min-width: 88px;
  text-align: right;
}

.daily-op-actions {
  margin-top: 10px;
  display: flex; justify-content: flex-end;
}
.btn-claim.daily-claim-op {
  background: linear-gradient(180deg, var(--good), var(--good-dark));
  color: var(--text-inv);
  font-family: inherit;
  font-weight: 900;
  font-size: 12px;
  letter-spacing: 0.4px;
  padding: 9px 22px;
  border: 0;
  border-radius: var(--radius-pill);
  cursor: pointer;
  box-shadow: 0 3px 0 rgba(34,153,84,0.6);
  transition: all 0.15s ease;
  text-transform: uppercase;
}
.btn-claim.daily-claim-op:active {
  transform: translateY(2px);
  box-shadow: 0 1px 0 rgba(34,153,84,0.6);
}
.btn-claim.daily-claim-op:disabled {
  background: #c7bca6;
  color: rgba(255,255,255,0.7);
  cursor: not-allowed;
  box-shadow: 0 2px 0 rgba(100,90,72,0.4);
}
.btn-claim.daily-claim-op.glow {
  animation: claimPulse 1.3s ease-in-out infinite;
}

/* ============================================================
   Agent B — Achievements + Profile (additive)
   All new selectors; no overrides of existing rules.
   Topbar trophy button + notification dot already styled by Agent A.
   ============================================================ */

/* ---- Achievements modal ---- */
.modal[data-kind="achievements"] .modal-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-height: 70vh;
  overflow-y: auto;
  padding: 14px 16px 18px;
  background: linear-gradient(180deg, #fff7e0 0%, #ffffff 60%);
}
.ach-header {
  background: linear-gradient(135deg, #fff7e0, #fce9b0);
  border: 1px solid rgba(243,156,18,0.25);
  border-radius: var(--radius);
  padding: 10px 12px;
  box-shadow: 0 2px 0 rgba(243,156,18,0.16);
}
.ach-header-top {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 6px;
}
.ach-summary {
  font-weight: 900;
  font-size: 14px;
  color: var(--text);
  letter-spacing: 0.2px;
}
.ach-pct {
  font-weight: 900;
  font-size: 14px;
  color: #b9770e;
}
.ach-master-bar {
  height: 8px;
  background: rgba(58,46,30,0.10);
  border-radius: 999px;
  overflow: hidden;
}
.ach-master-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #f1c40f, #f39c12, #e67e22);
  border-radius: 999px;
  transition: width 0.3s ease;
}

.ach-filters {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  scrollbar-width: none;
  padding: 0 2px;
}
.ach-filters::-webkit-scrollbar { display: none; }
.ach-filter-chip {
  flex-shrink: 0;
  background: #fff;
  border: 1px solid rgba(58,46,30,0.10);
  color: var(--text-soft);
  font-family: inherit;
  font-weight: 800;
  font-size: 11.5px;
  letter-spacing: 0.3px;
  padding: 6px 12px;
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: all 0.15s ease;
}
.ach-filter-chip:active { transform: scale(0.95); }
.ach-filter-chip.active {
  background: var(--text);
  color: #fff;
  border-color: var(--text);
}

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

.ach-card {
  position: relative;
  display: flex;
  gap: 8px;
  text-align: left;
  background: #fff;
  border: 0;
  border-left: 4px solid #b7a890;
  border-radius: var(--radius);
  padding: 8px 10px 10px;
  font-family: inherit;
  cursor: pointer;
  box-shadow: var(--sh-card);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  min-height: 100px;
}
.ach-card:active { transform: translateY(1px) scale(0.985); }
.ach-card.locked {
  filter: grayscale(0.55);
  opacity: 0.78;
  background: rgba(255,255,255,0.85);
}
.ach-card.unlocked {
  background: linear-gradient(180deg, #fffbe8, #ffffff 60%);
}
.ach-card.tier-bronze   { border-left-color: #cd7f32; }
.ach-card.tier-silver   { border-left-color: #b0b0b0; }
.ach-card.tier-gold     { border-left-color: #f1c40f; }
.ach-card.tier-platinum { border-left-color: #5dade2; }
.ach-card.tier-bronze.unlocked   { box-shadow: 0 2px 0 rgba(205,127,50,0.35), 0 4px 12px rgba(205,127,50,0.18); }
.ach-card.tier-silver.unlocked   { box-shadow: 0 2px 0 rgba(176,176,176,0.40), 0 4px 12px rgba(176,176,176,0.20); }
.ach-card.tier-gold.unlocked     { box-shadow: 0 2px 0 rgba(241,196,15,0.45), 0 4px 14px rgba(241,196,15,0.28); }
.ach-card.tier-platinum.unlocked { box-shadow: 0 2px 0 rgba(93,173,226,0.45), 0 4px 14px rgba(93,173,226,0.28); }

.ach-icon-wrap {
  position: relative;
  width: 38px; height: 38px;
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(58,46,30,0.06);
  border-radius: 10px;
  font-size: 22px;
}
.ach-card.unlocked .ach-icon-wrap {
  background: linear-gradient(135deg, #ffe066, #f39c12);
  color: #fff;
}
.ach-card.tier-platinum.unlocked .ach-icon-wrap {
  background: linear-gradient(135deg, #aed6f1, #5dade2);
}
.ach-check {
  position: absolute;
  right: -4px; bottom: -4px;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--good, #2ecc71);
  color: #fff;
  font-size: 10px;
  font-weight: 900;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 0 2px #fff;
}

.ach-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.ach-name {
  font-weight: 900;
  font-size: 12.5px;
  color: var(--text);
  letter-spacing: 0.2px;
  line-height: 1.2;
}
.ach-desc {
  font-size: 10.5px;
  color: var(--text-dim);
  line-height: 1.3;
  flex: 1;
}
.ach-bar {
  height: 5px;
  background: rgba(58,46,30,0.10);
  border-radius: 999px;
  overflow: hidden;
  margin-top: 2px;
}
.ach-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #b7a890, #d4a574);
  border-radius: 999px;
  transition: width 0.3s ease;
}
.ach-card.unlocked .ach-bar-fill {
  background: linear-gradient(90deg, #f1c40f, #e67e22);
}
.ach-card.tier-platinum.unlocked .ach-bar-fill {
  background: linear-gradient(90deg, #5dade2, #2980b9);
}
.ach-meta-row {
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  font-weight: 700;
  margin-top: 2px;
}
.ach-progress-text { color: var(--text-soft); }
.ach-reward-text   { color: #b9770e; }

/* ---- Profile modal ---- */
.modal[data-kind="profile"] .modal-body {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-height: 70vh;
  overflow-y: auto;
  padding: 14px 16px 18px;
}
.profile-name-card {
  display: flex;
  align-items: center;
  gap: 12px;
  background: linear-gradient(135deg, var(--brand, #d4a574), #b8854a);
  color: #fff;
  border-radius: var(--radius);
  padding: 12px 14px;
  box-shadow: 0 4px 14px rgba(58,46,30,0.18);
}
.profile-avatar {
  font-size: 38px;
  width: 56px; height: 56px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.25);
  border-radius: 14px;
  flex-shrink: 0;
}
.profile-name-wrap { flex: 1; min-width: 0; }
.profile-name {
  font-weight: 900;
  font-size: 16px;
  letter-spacing: 0.3px;
  line-height: 1.15;
}
.profile-name-sub {
  font-weight: 700;
  font-size: 11.5px;
  opacity: 0.85;
  margin-top: 4px;
}

.profile-stats-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.profile-stat {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #fff;
  border: 1px solid rgba(58,46,30,0.08);
  border-radius: var(--radius);
  padding: 8px 10px;
  box-shadow: 0 1px 0 rgba(58,46,30,0.06);
  min-width: 0;
}
.profile-stat-icon {
  font-size: 18px;
  width: 30px; height: 30px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(58,46,30,0.06);
  border-radius: 8px;
  flex-shrink: 0;
}
.profile-stat-meta {
  flex: 1;
  min-width: 0;
}
.profile-stat-label {
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--text-dim);
  font-weight: 700;
}
.profile-stat-value {
  font-weight: 900;
  font-size: 13px;
  color: var(--text);
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.profile-ach-teaser {
  background: #fff;
  border: 1px solid rgba(58,46,30,0.08);
  border-radius: var(--radius);
  padding: 10px 12px;
}
.profile-ach-teaser-title {
  font-weight: 900;
  font-size: 11px;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--text-soft);
  margin-bottom: 8px;
}
.profile-ach-teaser-row {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
}
.profile-ach-teaser-row::-webkit-scrollbar { display: none; }
.profile-ach-teaser-item {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  background: linear-gradient(180deg, #fffbe8, #ffffff 60%);
  border: 1px solid rgba(58,46,30,0.08);
  border-left-width: 4px;
  border-radius: 10px;
  padding: 6px 10px;
  font-weight: 800;
  font-size: 11px;
  max-width: 160px;
}
.profile-ach-teaser-item.tier-bronze   { border-left-color: #cd7f32; }
.profile-ach-teaser-item.tier-silver   { border-left-color: #b0b0b0; }
.profile-ach-teaser-item.tier-gold     { border-left-color: #f1c40f; }
.profile-ach-teaser-item.tier-platinum { border-left-color: #5dade2; }
.pte-icon { font-size: 16px; }
.pte-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text);
}
.profile-ach-teaser-empty {
  font-size: 11px;
  color: var(--text-dim);
  font-style: italic;
}
.profile-footer {
  display: flex;
  justify-content: flex-end;
  padding-top: 4px;
}

/* ============================================================
   Agent D — Settings modal + reduce-motion
   ============================================================ */
.modal[data-kind="settings"] .modal-body {
  padding: 14px 16px;
  background: linear-gradient(180deg, #fefcf7 0%, #f9f3e6 100%);
}
.settings-section {
  background: var(--bg-card);
  border: 1px solid rgba(58,46,30,0.10);
  border-radius: var(--radius);
  padding: 12px 14px;
  margin-bottom: 12px;
  box-shadow: var(--sh-flat);
}
.settings-section:last-child { margin-bottom: 0; }
.settings-section-title {
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.3px;
  color: var(--text);
  margin-bottom: 10px;
  padding-bottom: 6px;
  border-bottom: 1px dashed rgba(58,46,30,0.10);
}
.settings-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 0;
  cursor: default;
}
.settings-row.settings-toggle {
  cursor: pointer;
  user-select: none;
}
.settings-row.settings-toggle:active { transform: translateY(1px); }
.settings-label {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
}
.settings-hint {
  font-size: 11px;
  color: var(--text-dim);
  line-height: 1.35;
  margin-top: 4px;
  margin-bottom: 2px;
  font-style: italic;
}
/* Slice 12 — number-suffix legend grid inside settings. Two-column grid:
   left = monospace abbreviation chip, right = Turkish name. Compact so
   the whole 11-row legend fits without scrolling the settings sheet. */
.settings-number-legend {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px 10px;
  margin-top: 8px;
  padding: 8px 10px;
  background: rgba(0, 0, 0, 0.04);
  border-radius: 8px;
}
.settings-number-legend-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11.5px;
  line-height: 1.3;
}
.settings-number-legend-sfx {
  display: inline-block;
  min-width: 28px;
  padding: 1px 6px;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-weight: 900;
  font-size: 11px;
  color: var(--text-inv);
  background: var(--brand, #d4a574);
  border-radius: 4px;
  text-align: center;
}
.settings-number-legend-name {
  font-weight: 700;
  color: var(--text-soft);
}
.settings-slider {
  flex-direction: column;
  align-items: stretch;
  gap: 4px;
}
.settings-slider-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.settings-slider-val {
  font-size: 13px;
  font-weight: 900;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  background: var(--bg-shaded);
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  min-width: 48px;
  text-align: center;
}
.settings-range {
  width: 100%;
  height: 28px;
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  cursor: pointer;
  margin: 0;
  padding: 0;
}
.settings-range::-webkit-slider-runnable-track {
  height: 8px;
  background: var(--bg-shaded);
  border-radius: 4px;
  border: 1px solid rgba(58,46,30,0.08);
}
.settings-range::-moz-range-track {
  height: 8px;
  background: var(--bg-shaded);
  border-radius: 4px;
  border: 1px solid rgba(58,46,30,0.08);
}
.settings-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  height: 20px;
  width: 20px;
  border-radius: 50%;
  background: linear-gradient(180deg, var(--brand), var(--brand-2));
  margin-top: -7px;
  box-shadow: 0 2px 0 rgba(0,0,0,0.18);
  border: 0;
  cursor: pointer;
}
.settings-range::-moz-range-thumb {
  height: 20px;
  width: 20px;
  border-radius: 50%;
  background: linear-gradient(180deg, var(--brand), var(--brand-2));
  box-shadow: 0 2px 0 rgba(0,0,0,0.18);
  border: 0;
  cursor: pointer;
}

/* Custom switch */
.switch {
  position: relative;
  width: 44px;
  height: 26px;
  background: var(--bg-shaded);
  border: 1px solid rgba(58,46,30,0.12);
  border-radius: 999px;
  transition: background 0.18s ease, border-color 0.18s ease;
  flex-shrink: 0;
}
.switch .switch-dot {
  position: absolute;
  top: 2px; left: 2px;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.25);
  transition: left 0.18s ease, background 0.18s ease;
}
.switch.on {
  background: linear-gradient(180deg, var(--good), var(--good-dark));
  border-color: var(--good-dark);
}
.switch.on .switch-dot { left: 22px; }

/* Test sound button */
.settings-test-row {
  padding-top: 4px;
  padding-bottom: 0;
}
.settings-test-row .btn {
  flex: 0 0 auto;
  padding: 8px 16px;
  font-size: 12px;
}

/* Save buttons grid */
.settings-button-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 8px;
}
.settings-button-grid .btn { padding: 10px 12px; font-size: 12px; }
.settings-danger {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px dashed rgba(231,76,60,0.35);
}

/* About panel */
.settings-about {
  text-align: center;
  padding: 6px 4px 4px;
}
.about-title {
  font-size: 18px;
  font-weight: 900;
  letter-spacing: 0.6px;
  background: linear-gradient(180deg, var(--brand), var(--brand-2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.about-ver {
  font-size: 11px;
  color: var(--text-dim);
  margin-top: 2px;
  font-variant-numeric: tabular-nums;
}
.about-quote {
  font-size: 12px;
  color: var(--text-soft);
  font-style: italic;
  margin: 10px 12px 6px;
  line-height: 1.4;
}
.about-by {
  font-size: 11px;
  color: var(--text-dim);
}
.about-credit {
  font-size: 10px;
  color: var(--text-mute);
  margin-top: 8px;
  letter-spacing: 0.4px;
}

/* ---- Music Agent: Müzik section accent ---- */
.settings-section.settings-music {
  /* Subtle violet-ish accent so this section reads as "different" */
  border-left: 3px solid #7c4dff;
}
.settings-music .settings-section-title { color: #4a2fb8; }

/* ---- Reduce-motion class (toggled by settings) ---- */
body.reduce-motion *,
body.reduce-motion *::before,
body.reduce-motion *::after {
  animation-duration: 0.01ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.01ms !important;
}
/* Some intentional, brief transitions can be allowed back so the UI doesn't
   feel "broken" — toggles + sliders still feel responsive. */
body.reduce-motion .switch,
body.reduce-motion .switch .switch-dot {
  transition-duration: 0.12s !important;
}

/* ============================================================
   Agent C — Live event (Library of Lost Suns)
   Banner above era hero, topbar 🌞 chip, modal w/ milestone ladder
   ============================================================ */

/* --- Banner above era hero ------------------------------------- */
.event-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  margin: -2px -2px 10px;
  border-radius: var(--radius-lg);
  background:
    radial-gradient(circle at 90% -10%, rgba(255,255,255,0.4), transparent 60%),
    linear-gradient(135deg, #ffd166 0%, #ff9a3c 55%, #ef476f 100%);
  color: #fff;
  box-shadow:
    0 4px 14px rgba(239,71,111,0.25),
    inset 0 1px 0 rgba(255,255,255,0.4),
    0 0 0 1px rgba(255,255,255,0.18);
  position: relative;
  overflow: hidden;
  animation: eventBannerSheen 4s ease-in-out infinite;
}
.event-banner::after {
  content: '';
  position: absolute;
  top: -16px; right: -16px;
  width: 96px; height: 96px;
  background:
    radial-gradient(circle, rgba(255,236,170,0.85) 0, rgba(255,209,102,0.5) 30%, transparent 70%);
  pointer-events: none;
  filter: blur(1px);
}
@keyframes eventBannerSheen {
  0%, 100% { box-shadow: 0 4px 14px rgba(239,71,111,0.25), inset 0 1px 0 rgba(255,255,255,0.4), 0 0 0 1px rgba(255,255,255,0.18); }
  50%      { box-shadow: 0 6px 20px rgba(255,154,60,0.40), inset 0 1px 0 rgba(255,255,255,0.55), 0 0 16px rgba(255,209,102,0.45); }
}
.event-banner-icon {
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  font-size: 24px;
  background: rgba(255,255,255,0.22);
  border-radius: 12px;
  box-shadow: inset 0 0 0 1.5px rgba(255,255,255,0.45);
  text-shadow: 0 1px 4px rgba(0,0,0,0.2);
  flex-shrink: 0;
  position: relative;
  z-index: 1;
  animation: sunPulse 3.6s ease-in-out infinite;
}
@keyframes sunPulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.08) rotate(8deg); }
}
.event-banner-meta {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column;
  gap: 2px;
  position: relative; z-index: 1;
}
.event-banner-name {
  font-size: 14px;
  font-weight: 900;
  letter-spacing: 0.3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-shadow: 0 1px 2px rgba(0,0,0,0.2);
}
.event-banner-sub {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.2px;
  display: flex;
  gap: 6px;
  align-items: center;
  text-shadow: 0 1px 2px rgba(0,0,0,0.18);
  font-variant-numeric: tabular-nums;
}
.event-banner-sub .banner-time { opacity: 0.95; }
.event-banner-sub .banner-coin {
  background: rgba(255,255,255,0.2);
  padding: 1px 6px;
  border-radius: 6px;
}
.event-banner-open {
  background: rgba(255,255,255,0.92);
  border: 0;
  color: #b03a2e;
  font-family: inherit;
  font-weight: 900;
  font-size: 12.5px;
  letter-spacing: 0.5px;
  padding: 7px 12px;
  border-radius: var(--radius-pill);
  cursor: pointer;
  box-shadow: 0 3px 0 rgba(176,58,46,0.35);
  transition: transform 0.12s ease, box-shadow 0.12s ease;
  position: relative;
  z-index: 1;
  flex-shrink: 0;
}
.event-banner-open:active {
  transform: translateY(2px);
  box-shadow: 0 1px 0 rgba(176,58,46,0.35);
}

/* --- Topbar 🌞 button ----------------------------------------
   Slots into Agent A's grid-area: actions layout. Sits 118px
   from the right (Agent A daily=80, Agent B trophy=42, settings=0).
*/
.topbar-event-btn {
  grid-area: actions;
  justify-self: end;
  margin-right: 118px;
  padding: 0 6px;
  border: 1px solid rgba(192, 103, 27, 0.45);
  background: linear-gradient(180deg, #fff3d6 0%, #ffd089 100%);
  color: #6b3f10;
  border-radius: 10px;
  cursor: pointer;
  font-size: 16px;
  height: 32px;
  display: flex; align-items: center; justify-content: center;
  gap: 4px;
  flex-shrink: 0;
  position: relative;
  box-shadow:
    0 2px 0 rgba(192, 103, 27, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.55);
  font-family: inherit;
  transition: transform 0.12s ease, box-shadow 0.15s ease, background 0.2s ease;
  min-width: 32px;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.45);
}
.topbar-event-btn:hover:not(.active) {
  background: linear-gradient(180deg, #ffe9b3 0%, #ffbc66 100%);
}
.topbar-event-btn:active { transform: scale(0.94); }
.topbar-event-btn.active {
  padding: 0 10px 0 6px;
  background: linear-gradient(135deg, #ffd166, #ff9a3c);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 2px 0 rgba(176,58,46,0.4), 0 0 14px rgba(255,209,102,0.5);
  animation: eventBtnGlow 2.2s ease-in-out infinite;
}
@keyframes eventBtnGlow {
  0%, 100% { box-shadow: 0 2px 0 rgba(176,58,46,0.4), 0 0 10px rgba(255,209,102,0.4); }
  50%      { box-shadow: 0 2px 0 rgba(176,58,46,0.4), 0 0 18px rgba(255,209,102,0.7); }
}
.topbar-event-btn .tev-icon {
  font-size: 16px;
  line-height: 1;
}
.topbar-event-btn .tev-badge {
  font-size: 11px;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 1px 0 rgba(0,0,0,0.25);
  letter-spacing: 0.2px;
}

/* --- Event detail modal --------------------------------------- */
.modal.modal-event {
  background:
    radial-gradient(ellipse at top, #fff4d0 0%, #fdebbb 35%, #fff 70%);
  border: 1px solid rgba(243,156,18,0.35);
}
.modal.modal-event .modal-header {
  background: linear-gradient(135deg, #ffd166, #ff9a3c);
  color: #fff;
  border-bottom: 0;
}
.modal.modal-event .modal-title {
  color: #fff;
  letter-spacing: 0.6px;
  text-shadow: 0 1px 2px rgba(0,0,0,0.18);
}
.modal.modal-event .modal-close { color: #fff; }
.modal.modal-event .modal-close:hover { background: rgba(255,255,255,0.2); }
.modal.modal-event .modal-body {
  padding: 14px 16px;
  background:
    radial-gradient(circle at 5% 95%, rgba(255,209,102,0.18) 0, transparent 200px),
    radial-gradient(circle at 95% 5%, rgba(239,71,111,0.10) 0, transparent 220px);
}

/* Empty-state when no event */
.event-empty {
  text-align: center;
  padding: 32px 16px;
}
.event-empty-icon {
  font-size: 56px;
  margin-bottom: 10px;
  opacity: 0.7;
}
.event-empty-title {
  font-size: 16px;
  font-weight: 900;
  color: var(--text);
  margin-bottom: 6px;
}
.event-empty-sub {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--text-soft);
  line-height: 1.45;
}

/* Event hero card inside modal */
.event-hero {
  position: relative;
  padding: 14px 14px 16px;
  border-radius: var(--radius-lg);
  background:
    radial-gradient(circle at 100% -10%, rgba(255,255,255,0.55), transparent 55%),
    linear-gradient(135deg, #ffd166 0%, #ff9a3c 55%, #ef476f 100%);
  color: #fff;
  margin-bottom: 12px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.4),
    0 4px 16px rgba(239,71,111,0.25);
  overflow: hidden;
}
.event-hero-burst {
  position: absolute;
  top: -40px; right: -30px;
  width: 200px; height: 200px;
  background:
    radial-gradient(circle, rgba(255,255,255,0.7) 0, rgba(255,236,170,0.4) 30%, transparent 70%);
  pointer-events: none;
  animation: eventHeroBurst 6s ease-in-out infinite;
}
@keyframes eventHeroBurst {
  0%, 100% { transform: scale(1) rotate(0); opacity: 0.85; }
  50%      { transform: scale(1.15) rotate(20deg); opacity: 1; }
}
.event-hero-body { position: relative; z-index: 1; }
.event-hero-theme {
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  opacity: 0.88;
  text-shadow: 0 1px 2px rgba(0,0,0,0.18);
}
.event-hero-name {
  font-size: 22px;
  font-weight: 900;
  letter-spacing: 0.5px;
  margin-top: 4px;
  text-shadow: 0 1px 4px rgba(0,0,0,0.2);
  line-height: 1.15;
}
.event-hero-desc {
  font-size: 12.5px;
  font-weight: 600;
  opacity: 0.92;
  margin-top: 6px;
  text-shadow: 0 1px 1px rgba(0,0,0,0.15);
}
.event-hero-timer {
  margin-top: 12px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 12px;
  background: rgba(255,255,255,0.22);
  border-radius: var(--radius-pill);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.32);
}
.event-hero-timer-label {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
  opacity: 0.86;
}
.event-hero-timer-val {
  font-size: 16px;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.4px;
  text-shadow: 0 1px 2px rgba(0,0,0,0.2);
}

/* Currency counter */
.event-coin {
  margin-top: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
  position: relative;
  z-index: 1;
  background: rgba(255,255,255,0.18);
  border-radius: var(--radius);
  padding: 8px 12px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.25);
}
.event-coin .coin-icon {
  font-size: 28px;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.2));
}
.event-coin .coin-val {
  font-size: 24px;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.4px;
  text-shadow: 0 1px 4px rgba(0,0,0,0.2);
}
.event-coin .coin-name {
  margin-left: auto;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  opacity: 0.88;
}

/* Section titles */
.event-section { margin-top: 16px; }
.event-section-title {
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--text-soft);
  margin-bottom: 8px;
  padding-left: 4px;
}

/* Rules block (collapsible) */
.event-rules {
  margin-top: 4px;
  background: rgba(255,255,255,0.85);
  border: 1px solid rgba(243,156,18,0.25);
  border-radius: var(--radius);
  overflow: hidden;
}
.event-rules-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  cursor: pointer;
  user-select: none;
}
.event-rules-title {
  font-size: 12.5px;
  font-weight: 900;
  color: var(--text);
  letter-spacing: 0.3px;
}
.event-rules-arrow {
  font-size: 14px;
  color: var(--text-soft);
  transition: transform 0.2s ease;
}
.event-rules.collapsed .event-rules-arrow { transform: rotate(-90deg); }
.event-rules.collapsed .event-rules-content { display: none; }
.event-rules-content {
  padding: 0 12px 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.event-rules-content .rule-item {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-soft);
  display: flex; align-items: center; gap: 8px;
  padding: 4px 0;
}
.event-rules-content .rule-item .rule-icon {
  font-size: 14px;
  width: 22px; text-align: center;
}
.event-rules-content .rule-item strong {
  color: var(--text);
  font-weight: 900;
}

/* Objective rows */
.event-obj-list {
  display: flex; flex-direction: column;
  gap: 8px;
}
.obj-row {
  background: rgba(255,255,255,0.92);
  border: 1px solid rgba(58,46,30,0.08);
  border-radius: var(--radius);
  padding: 10px 12px;
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas:
    "head head"
    "bar  bar"
    "meta actions";
  gap: 6px;
  box-shadow: var(--sh-card);
}
.obj-row.ready {
  background: linear-gradient(135deg, #fef9e8, #fff5d4);
  border-color: rgba(243,156,18,0.4);
}
.obj-row.claimed {
  opacity: 0.6;
  background: var(--bg-shaded);
}
.obj-head { grid-area: head; }
.obj-name {
  font-size: 13px;
  font-weight: 800;
  color: var(--text);
}
.obj-desc {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-soft);
  margin-top: 2px;
  line-height: 1.35;
}
.obj-bar {
  grid-area: bar;
  height: 8px;
  background: rgba(0,0,0,0.06);
  border-radius: var(--radius-pill);
  overflow: hidden;
}
.obj-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #ffd166, #ff9a3c);
  border-radius: var(--radius-pill);
  transition: width 0.3s ease;
  box-shadow: inset 0 -2px 0 rgba(0,0,0,0.1);
}
.obj-row.ready .obj-bar-fill {
  background: linear-gradient(90deg, var(--good), var(--good-dark));
}
.obj-meta { grid-area: meta; align-self: center; min-width: 0; }
.obj-progress {
  font-size: 11.5px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}
.obj-reward {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-soft);
  margin-top: 1px;
  letter-spacing: 0.2px;
}
.obj-actions { grid-area: actions; }
.obj-claim {
  background: var(--bg-shaded);
  border: 0;
  color: var(--text);
  font-family: inherit;
  font-weight: 900;
  font-size: 11.5px;
  letter-spacing: 0.5px;
  padding: 8px 14px;
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: transform 0.1s ease, box-shadow 0.12s ease;
}
.obj-claim:disabled { cursor: not-allowed; opacity: 0.6; }
.obj-claim.glow {
  background: linear-gradient(180deg, var(--good), var(--good-dark));
  color: #fff;
  box-shadow: 0 3px 0 rgba(34,153,84,0.55);
  animation: claimPulse 1.4s ease-in-out infinite;
}
.obj-claim:active { transform: translateY(1px); }
.obj-claim.done { background: rgba(46,204,113,0.18); color: var(--good-dark); }

/* Milestone ladder */
.event-ladder {
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: rgba(255,255,255,0.55);
  padding: 4px;
  border-radius: var(--radius);
  border: 1px solid rgba(243,156,18,0.22);
}
.milestone-row {
  display: grid;
  grid-template-columns: 36px 1fr auto;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  background: #fff;
  border-radius: var(--radius-sm);
  box-shadow: 0 1px 0 rgba(58,46,30,0.06);
  position: relative;
  transition: background 0.18s ease;
}
.milestone-row.claimed {
  opacity: 0.55;
  background: var(--bg-shaded);
}
.milestone-row.ready {
  background: linear-gradient(135deg, #fef9e8, #fff5d4);
  box-shadow: 0 2px 0 rgba(243,156,18,0.3), 0 0 12px rgba(255,209,102,0.35);
  animation: msRowReady 1.6s ease-in-out infinite;
}
@keyframes msRowReady {
  0%, 100% { box-shadow: 0 2px 0 rgba(243,156,18,0.3), 0 0 12px rgba(255,209,102,0.35); }
  50%      { box-shadow: 0 2px 0 rgba(243,156,18,0.3), 0 0 18px rgba(255,209,102,0.6); }
}
.milestone-row.locked .ms-mid { opacity: 0.85; }
.ms-id {
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #ffd166, #ff9a3c);
  color: #fff;
  font-size: 13px;
  font-weight: 900;
  border-radius: 9px;
  box-shadow: 0 1px 0 rgba(176,58,46,0.3);
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
}
.milestone-row.claimed .ms-id {
  background: linear-gradient(135deg, #b7a890, #8a7a64);
}
.ms-mid { min-width: 0; }
.ms-target {
  font-size: 12px;
  font-weight: 700;
  color: var(--text);
}
.ms-target strong {
  color: var(--text);
  font-weight: 900;
  font-variant-numeric: tabular-nums;
}
.ms-bar {
  margin-top: 4px;
  height: 7px;
  background: rgba(0,0,0,0.06);
  border-radius: var(--radius-pill);
  overflow: hidden;
}
.ms-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #ffd166, #ff9a3c);
  border-radius: var(--radius-pill);
  transition: width 0.3s ease;
  box-shadow: inset 0 -1px 0 rgba(0,0,0,0.12);
}
.milestone-row.claimed .ms-bar-fill {
  background: linear-gradient(90deg, #b7a890, #8a7a64);
}
.milestone-row.ready .ms-bar-fill {
  background: linear-gradient(90deg, var(--good), var(--good-dark));
}
.ms-progress {
  margin-top: 3px;
  font-size: 10.5px;
  font-weight: 700;
  color: var(--text-soft);
  font-variant-numeric: tabular-nums;
}
.ms-rewards {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  margin-top: 5px;
}
.ms-chip {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  background: rgba(243,156,18,0.12);
  padding: 1px 7px;
  border-radius: var(--radius-pill);
  font-size: 10.5px;
  font-weight: 800;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.ms-chip.ms-chip-crate {
  background: rgba(155,89,182,0.14);
  color: var(--rare-epic);
}
.ms-actions {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.ms-claim {
  background: var(--bg-shaded);
  border: 0;
  color: var(--text-soft);
  font-family: inherit;
  font-weight: 900;
  font-size: 11px;
  letter-spacing: 0.5px;
  padding: 8px 14px;
  border-radius: var(--radius-pill);
  cursor: pointer;
  white-space: nowrap;
  transition: transform 0.1s ease, box-shadow 0.12s ease;
  min-width: 80px;
  text-align: center;
}
.ms-claim:disabled { cursor: not-allowed; opacity: 0.7; }
.ms-claim.done {
  background: rgba(46,204,113,0.16);
  color: var(--good-dark);
  min-width: 44px;
}
.ms-claim.glow {
  background: linear-gradient(180deg, var(--good), var(--good-dark));
  color: #fff;
  box-shadow: 0 3px 0 rgba(34,153,84,0.5);
  animation: claimPulse 1.3s ease-in-out infinite;
}
.ms-claim:active { transform: translateY(1px); }

/* ============================================================
   Legacy Çekirdeği — modal + nodes + topbar button
   (LTV Depth Agent — owned)
   ============================================================ */
.topbar-legacy-btn {
  grid-area: actions;
  justify-self: end;
  margin-right: 156px;
  padding: 0 6px;
  border: 1px solid rgba(58,46,30,0.10);
  background: #fff;
  border-radius: 10px;
  cursor: pointer;
  font-size: 16px;
  height: 32px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  position: relative;
  box-shadow: 0 1px 0 rgba(58,46,30,0.08);
  font-family: inherit;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  min-width: 32px;
}
.topbar-legacy-btn:active { transform: scale(0.94); }
.topbar-legacy-btn.has-points {
  background: linear-gradient(135deg, #6a4ec9, #341c7a);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 2px 0 rgba(52,28,122,0.45), 0 0 14px rgba(106,78,201,0.55);
  animation: legacyBtnGlow 2.4s ease-in-out infinite;
}
@keyframes legacyBtnGlow {
  0%, 100% { box-shadow: 0 2px 0 rgba(52,28,122,0.45), 0 0 10px rgba(106,78,201,0.45); }
  50%      { box-shadow: 0 2px 0 rgba(52,28,122,0.45), 0 0 18px rgba(106,78,201,0.75); }
}

/* --- Modal frame ----------------------------------------------- */
.modal.modal-legacy {
  background:
    radial-gradient(ellipse at top, #2a1f55 0%, #1a1138 40%, #0b0820 80%);
  border: 1px solid rgba(106,78,201,0.45);
  color: #f0eaff;
}
.modal.modal-legacy .modal-header {
  background: linear-gradient(135deg, #6a4ec9, #341c7a);
  color: #fff;
  border-bottom: 0;
}
.modal.modal-legacy .modal-title {
  color: #fff;
  letter-spacing: 0.6px;
  text-shadow: 0 1px 2px rgba(0,0,0,0.32);
}
.modal.modal-legacy .modal-close { color: #fff; }
.modal.modal-legacy .modal-close:hover { background: rgba(255,255,255,0.18); }
.modal.modal-legacy .modal-body {
  padding: 14px 16px;
  background:
    radial-gradient(circle at 12% 88%, rgba(106,78,201,0.18) 0, transparent 220px),
    radial-gradient(circle at 88% 12%, rgba(255,209,102,0.10) 0, transparent 220px);
}

/* --- Locked state --------------------------------------------- */
.legacy-locked {
  text-align: center;
  padding: 32px 14px;
}
.legacy-locked-icon { font-size: 56px; opacity: 0.85; }
.legacy-locked-title { font-size: 20px; font-weight: 800; margin-top: 6px; color: #ffd166; }
.legacy-locked-sub { margin-top: 10px; opacity: 0.85; font-size: 13px; line-height: 1.5; }
.legacy-locked-progress {
  margin-top: 14px; padding: 8px 12px;
  background: rgba(255,255,255,0.06);
  border-radius: 10px; display: inline-block;
  font-size: 13px;
}

/* --- Header / counter ----------------------------------------- */
.legacy-header { margin-bottom: 12px; }
.legacy-counter {
  display: flex; align-items: baseline; gap: 6px;
  background: rgba(255,255,255,0.06);
  padding: 8px 12px; border-radius: 10px;
}
.legacy-counter .lg-c-icon { font-size: 22px; }
.legacy-counter .lg-c-num {
  font-size: 22px; font-weight: 900; font-variant-numeric: tabular-nums;
  color: #ffd166;
}
.legacy-counter .lg-c-sep { opacity: 0.45; }
.legacy-counter .lg-c-total {
  font-size: 14px; font-variant-numeric: tabular-nums; opacity: 0.7;
}
.legacy-counter .lg-c-label { font-size: 11px; margin-left: auto; opacity: 0.65; letter-spacing: 0.5px; }
.legacy-subtitle { font-size: 12px; opacity: 0.75; margin-top: 6px; line-height: 1.4; }
.legacy-summary {
  margin-top: 8px; display: flex; gap: 10px;
  font-size: 12px; opacity: 0.8;
}
.legacy-summary span { background: rgba(255,255,255,0.05); padding: 4px 8px; border-radius: 8px; }

/* --- Grid + cards --------------------------------------------- */
.legacy-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 8px;
  margin-top: 6px;
}
.legacy-card {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 10px;
  padding: 8px;
  display: flex; flex-direction: column; gap: 6px;
  font-size: 11.5px;
  transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
.legacy-card.affordable { border-color: rgba(255,209,102,0.55); box-shadow: 0 0 12px rgba(255,209,102,0.18); }
.legacy-card.maxed { border-color: rgba(46,204,113,0.55); opacity: 0.85; }
.legacy-card-production { background: linear-gradient(180deg, rgba(255,209,102,0.07), rgba(255,255,255,0.03)); }
.legacy-card-qol        { background: linear-gradient(180deg, rgba(106,78,201,0.10), rgba(255,255,255,0.03)); }
.legacy-card-event      { background: linear-gradient(180deg, rgba(255,154,60,0.10), rgba(255,255,255,0.03)); }
.legacy-card-mission    { background: linear-gradient(180deg, rgba(93,173,226,0.10), rgba(255,255,255,0.03)); }
.legacy-card-anomaly    { background: linear-gradient(180deg, rgba(239,71,111,0.10), rgba(255,255,255,0.03)); }
.legacy-card-crate      { background: linear-gradient(180deg, rgba(180,180,180,0.10), rgba(255,255,255,0.03)); }
.legacy-card-population { background: linear-gradient(180deg, rgba(46,204,113,0.10), rgba(255,255,255,0.03)); }

.lg-card-top { display: flex; align-items: center; gap: 8px; }
.lg-card-icon {
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,0.25);
  border-radius: 8px; font-size: 18px;
}
.lg-card-info { flex: 1; min-width: 0; }
.lg-card-name { font-weight: 800; color: #fff5cf; font-size: 12px; }
.lg-card-level { font-size: 10px; opacity: 0.7; margin-top: 1px; }
.lg-card-desc { font-size: 11px; line-height: 1.4; opacity: 0.85; }

.lg-card-dots { display: flex; gap: 3px; }
.lg-dot {
  flex: 1; height: 4px; background: rgba(255,255,255,0.12);
  border-radius: 2px;
}
.lg-dot.on { background: linear-gradient(90deg, #ffd166, #ff9a3c); box-shadow: 0 0 4px rgba(255,209,102,0.55); }

.lg-card-foot {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 2px; gap: 6px;
}
.lg-card-cost {
  font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums;
  color: #ffd166;
}
.lg-card-cost .lg-c-icon { margin-right: 2px; }
.lg-card-buy {
  border: 0; cursor: pointer; padding: 5px 10px;
  border-radius: 7px; font-weight: 800; font-size: 11px;
  background: linear-gradient(180deg, #ffd166, #ff9a3c);
  color: #2b1d0c;
  box-shadow: 0 2px 0 rgba(176,58,46,0.35);
  font-family: inherit;
}
.lg-card-buy:disabled {
  background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.35);
  box-shadow: none; cursor: not-allowed;
}
.lg-card-buy:active:not(:disabled) { transform: translateY(1px); }
.lg-card-max-label {
  width: 100%; text-align: center;
  font-size: 11px; font-weight: 700; color: #2ecc71;
  background: rgba(46,204,113,0.08); padding: 4px; border-radius: 6px;
}

/* --- Footer / respec ------------------------------------------ */
.legacy-footer { margin-top: 14px; }
.legacy-respec {
  width: 100%; padding: 10px;
  background: rgba(255,255,255,0.08); color: #fff;
  border: 1px solid rgba(255,255,255,0.15); border-radius: 10px;
  cursor: pointer; font-weight: 700; font-size: 13px;
  font-family: inherit;
}
.legacy-respec:hover:not(:disabled) { background: rgba(255,255,255,0.14); }
.legacy-respec:disabled { opacity: 0.4; cursor: not-allowed; }

/* ============================================================
   17. ART AGENT — Rich SVG scenes & dioramas (v13)
   Era hero backdrops, producer dioramas, crate patterns,
   card portraits, tab icons.
   ============================================================ */

/* ---------- 17.1 Era hero SVG scene ------------------------- */
/* Container sits behind the hero text. Slightly oversized so a
 * subtle vertical drift never reveals edges.
 */
.era-hero-scene {
  position: absolute;
  inset: -6px 0 -6px 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  opacity: 0.95;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 78%, transparent 100%);
          mask-image: linear-gradient(180deg, #000 0%, #000 78%, transparent 100%);
}
.era-hero-scene svg {
  width: 100%;
  height: 100%;
  display: block;
  will-change: transform;
  animation: heroSceneDrift 14s ease-in-out infinite alternate;
}
/* Slice 13 v2 — era archetype character. Absolute-positioned on the
   right side of the hero card so it doesn't compete with the era title,
   the big supply number, or the Takas trade row. Sits ABOVE the scene
   (z-index 1 vs scene's 0) but BELOW all foreground text (era-hero-top,
   amount, rate, trade-area all default to z-index auto and are later
   children so they paint on top — confirmed via stacking order). */
.era-hero-character {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 76px;
  height: 96px;
  z-index: 1;
  pointer-events: none;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.35));
  /* Subtle entrance + idle breathing so the character feels alive when
     the player first sees the era. Honored by reduce-motion below. */
  animation: heroCharacterBreath 5.4s ease-in-out infinite;
}
.era-hero-character svg {
  width: 100%;
  height: 100%;
  display: block;
}
@keyframes heroCharacterBreath {
  0%, 100% { transform: translateY(-50%) scale(1); }
  50%      { transform: translateY(-50%) scale(1.025); }
}
body.reduce-motion .era-hero-character {
  animation: none;
}
/* Tighter character size on very small viewports (≤360px wide) so the
   figure still fits next to the supply number without crowding. */
@media (max-width: 360px) {
  .era-hero-character {
    width: 60px;
    height: 78px;
    right: 8px;
  }
}
@keyframes heroSceneDrift {
  0%   { transform: translate3d(0, 0, 0) scale(1.02); }
  100% { transform: translate3d(0, -3px, 0) scale(1.02); }
}
body.reduce-motion .era-hero-scene svg { animation: none; transform: none; }

/* Make hero internals sit above the scene. */
.era-hero { isolation: isolate; }
/* Slice 13 v2 — also exclude .era-hero-character so its absolute
   positioning isn't overridden to relative. */
.era-hero > *:not(.era-hero-scene):not(.era-hero-character) { position: relative; z-index: 1; }
/* The legacy ghost-icon ::after pseudo is redundant with the new scene. */
.era-hero::after { content: none !important; }
/* Soften the white blob so the scene reads through. */
.era-hero::before { opacity: 0.85; }

/* Iron Courts: cooler underlying gradient so red banner pops. */
.era-hero.era-bg-iron {
  background:
    radial-gradient(circle at 110% -20%, color-mix(in srgb, var(--era-iron-2) 65%, transparent), transparent 55%),
    linear-gradient(140deg, #6c757d 0%, #2a3a52 90%);
}
/* River: deeper teal floor so the water band reads. */
.era-hero.era-bg-river {
  background:
    radial-gradient(circle at 110% -20%, color-mix(in srgb, var(--era-river-2) 70%, transparent), transparent 55%),
    linear-gradient(140deg, #2a9d8f 0%, #144a45 90%);
}
/* Dawnworks default already warm; leave the existing gradient. */

/* ---------- 17.2 Producer dioramas -------------------------- */
.prod-icon-wrap.has-diorama {
  background: transparent !important;
  box-shadow:
    0 2px 0 rgba(58,46,30,0.18),
    inset 0 0 0 1px rgba(255,255,255,0.18);
  overflow: hidden;
}
.prod-icon-wrap.has-diorama > span:not(.prod-tier):not(.prod-emoji-accent) {
  /* legacy emoji-only spans get hidden when a diorama exists */
  display: none;
}
.prod-diorama {
  position: absolute;
  inset: 0;
  border-radius: 13px;
  overflow: hidden;
  pointer-events: none;
}
.prod-diorama svg {
  width: 100%;
  height: 100%;
  display: block;
}
.prod-emoji-accent {
  position: absolute;
  bottom: -2px;
  right: -3px;
  font-size: 18px;
  line-height: 1;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.5));
  z-index: 2;
  pointer-events: none;
  transform: rotate(-6deg);
}
.producer.locked .prod-icon-wrap.has-diorama { filter: grayscale(0.55); }
.producer.locked .prod-icon-wrap.has-diorama::after {
  /* lock overlay redefined for the has-diorama variant */
  content: '🔒';
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  background: rgba(20,18,28,0.55);
  border-radius: 13px;
  z-index: 3;
}
.producer.locked .prod-icon-wrap.has-diorama .prod-emoji-accent { opacity: 0; }

/* ---------- 17.3 Crate covers — pattern + shine ------------- */
.crate-item { isolation: isolate; }
.crate-item .crate-icon-big,
.crate-item .crate-meta,
.crate-item .btn-crate-open {
  position: relative;
  z-index: 2;
}
/* Decorative pattern overlay — was previously using mix-blend-mode:
   screen, which on certain GPU/driver combinations made the cursor
   appear to flicker because the OS-level cursor compositor was being
   re-evaluated against a constantly-blended layer. Removed the blend
   mode; the pattern shows through softly via plain opacity. */
.crate-item::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-repeat: repeat;
  opacity: 0.35;
}
/* The moving shine ::after has been retired. After four rounds of
   "still flickering" reports, the only common factor was this 5.4s
   sweep — it caused Windows' adaptive cursor to switch styles
   repeatedly and gave the user the impression that the mouse itself
   was vibrating. Static rows are calmer; the crate icon + count badge
   are sufficient visual signal. */
.crate-item::after { content: none; }
@keyframes crateShine {
  0%   { left: -40%; }
  62%  { left: 110%; }
  100% { left: 110%; }
}

/* Per-crate patterns (chevron / hex / facets / vortex). */
.crate-item.crate-wooden::before {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='36' viewBox='0 0 36 36'%3E%3Cg fill='none' stroke='%23ffffff' stroke-width='1.4' stroke-opacity='0.12'%3E%3Cpath d='M-6 12 L18 0 L42 12'/%3E%3Cpath d='M-6 24 L18 12 L42 24'/%3E%3Cpath d='M-6 36 L18 24 L42 36'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 36px 36px;
}
.crate-item.crate-alloy::before {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='46' viewBox='0 0 40 46'%3E%3Cg fill='none' stroke='%23ffffff' stroke-width='1' stroke-opacity='0.18'%3E%3Cpolygon points='20,2 38,12 38,32 20,42 2,32 2,12'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 40px 46px;
}
.crate-item.crate-crystal::before {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='42' height='42' viewBox='0 0 42 42'%3E%3Cg fill='none' stroke='%23ffffff' stroke-width='0.8' stroke-opacity='0.24'%3E%3Cpolygon points='21,3 36,12 36,30 21,39 6,30 6,12'/%3E%3Cline x1='21' y1='3' x2='21' y2='39'/%3E%3Cline x1='6' y1='12' x2='36' y2='30'/%3E%3Cline x1='36' y1='12' x2='6' y2='30'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 42px 42px;
}
.crate-item.crate-paradox::before {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60'%3E%3Cg fill='none' stroke='%23ffffff' stroke-width='0.8' stroke-opacity='0.24'%3E%3Cpath d='M30 6 C 50 6, 54 30, 30 30 C 6 30, 10 54, 30 54'/%3E%3Cpath d='M30 12 C 44 12, 48 30, 30 30 C 12 30, 16 48, 30 48'/%3E%3Cpath d='M30 18 C 40 18, 42 30, 30 30 C 18 30, 20 42, 30 42'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 60px 60px;
}

/* Crate icon panel: deeper translucent panel + subtle inner ring. */
.crate-item .crate-icon-big {
  background:
    radial-gradient(circle at 30% 25%, rgba(255,255,255,0.25), rgba(0,0,0,0.0) 60%),
    rgba(0,0,0,0.32);
  box-shadow:
    inset 0 0 0 1.5px rgba(255,255,255,0.22),
    inset 0 -3px 0 rgba(0,0,0,0.25);
}

/* ---------- 17.4 Card portraits ----------------------------- */
/* When portrait is injected, hide the emoji text underneath. */
.card[data-svg-portrait="1"] .card-icon {
  background: linear-gradient(160deg, rgba(255,255,255,0.85), rgba(0,0,0,0.05));
  font-size: 0; /* hide emoji text node */
  overflow: hidden;
  position: relative;
}
.card-portrait {
  position: absolute;
  inset: 0;
  display: block;
  pointer-events: none;
}
.card-portrait svg {
  width: 100%;
  height: 100%;
  display: block;
  border-radius: 18px;
}

/* Locked: keep the lock overlay (existing rule); portrait shows as
 * a shadowy outline behind the lock thanks to the parent grayscale. */
.card.locked .card-portrait { opacity: 0.55; }

/* Tiny archetype chip in the portrait's upper-right corner. */
.card[data-archetype]::after {
  content: '';
  position: absolute;
  top: 8px;
  right: 8px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: rgba(255,255,255,0.7);
  border: 1.5px solid rgba(0,0,0,0.18);
  box-shadow: 0 1px 0 rgba(0,0,0,0.18);
  z-index: 3;
  pointer-events: none;
}
.card[data-archetype="researcher"]::after { background: #5dade2; border-color: #fff; }
.card[data-archetype="warrior"]::after    { background: #a8222e; border-color: #fff; }
.card[data-archetype="mystic"]::after     { background: #9b59b6; border-color: #fff; }
.card[data-archetype="engineer"]::after   { background: #f4a261; border-color: #fff; }
.card[data-archetype="scribe"]::after     { background: #ffd166; border-color: #fff; }
.card[data-archetype="diplomat"]::after   { background: #2ecc71; border-color: #fff; }
.card[data-archetype="monk"]::after       { background: #fbf6e9; border-color: #b86340; }
.card[data-archetype="ai"]::after         { background: #74e7ff; border-color: #1a0d2e; }

/* Rare/Epic/Legendary get a soft radial glow behind the portrait. */
.card.rarity-epic[data-svg-portrait="1"] .card-icon {
  background:
    radial-gradient(circle at 50% 60%, rgba(155,89,182,0.32), transparent 70%),
    linear-gradient(160deg, rgba(255,255,255,0.85), rgba(0,0,0,0.05));
}
.card.rarity-legendary[data-svg-portrait="1"] .card-icon {
  background:
    radial-gradient(circle at 50% 60%, rgba(243,156,18,0.36), transparent 70%),
    linear-gradient(160deg, rgba(255,255,255,0.85), rgba(0,0,0,0.05));
}

/* ---------- 17.5 Tab bar SVG icons -------------------------- */
.tabbar-btn .tab-icon-svg {
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0;
  filter: none; /* override emoji grayscale */
  color: var(--text-dim);
}
.tabbar-btn .tab-icon-svg svg {
  width: 100%;
  height: 100%;
  display: block;
}
.tabbar-btn.active .tab-icon-svg { color: var(--era-color-d); }
/* Static raised feel for active — single rule, no animation, so it
 * stays stable even if other code touches the active class. */
.tabbar-btn.active .tab-icon-svg {
  transform: scale(1.08) translateY(-1px);
}
/* One-shot bounce when the active tab CHANGES — JS adds .bounce after
 * a reflow so the keyframe replays on every switch. */
@keyframes tabBounce {
  0%   { transform: scale(1)    translateY(0); }
  35%  { transform: scale(1.22) translateY(-3px); }
  70%  { transform: scale(1.04) translateY(0); }
  100% { transform: scale(1.08) translateY(-1px); }
}
.tabbar-btn.bounce .tab-icon-svg,
.tabbar-btn.bounce .tab-icon {
  animation: tabBounce 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
body.reduce-motion .tabbar-btn.bounce .tab-icon-svg,
body.reduce-motion .tabbar-btn.bounce .tab-icon { animation: none; }

/* ============================================================
   18. Shop / Monetization (mock IAP)
   Owned by Shop / Monetization Agent.
   Modal kinds: 'shop' | 'shop_confirm' | 'shop_ad' | 'shop_ethics'
   ============================================================ */

/* ---- shop tokens (gold + cyan accents) -------------------- */
:root {
  --shop-gold:      #ffb547;
  --shop-gold-2:    #ff9a3c;
  --shop-gold-d:    #b8741c;
  --shop-cyan:      #48cae4;
  --shop-cyan-d:    #1e6b62;
  --shop-onetime:   #e74c3c;
  --shop-monthly:   #2ecc71;
  --shop-monthly-d: #229954;
  --shop-permanent: #6c757d;
  --shop-permanent-d: #495057;
  --shop-boost:     #9b59b6;
}

/* ---- modal shell tweaks ----------------------------------- */
.modal[data-kind="shop"] .modal-body,
.modal[data-kind="shop_confirm"] .modal-body,
.modal[data-kind="shop_ad"] .modal-body,
.modal[data-kind="shop_ethics"] .modal-body {
  padding: 0;
  background: linear-gradient(180deg, #fffdf7 0%, var(--bg-card-2) 60%, var(--bg-shaded) 100%);
}

.modal[data-kind="shop"] .modal-header {
  background: linear-gradient(180deg, #fff7e0, #f5e3b6);
  border-bottom: 1px solid rgba(184, 116, 28, 0.25);
}
.modal[data-kind="shop"] .modal-title {
  color: var(--shop-gold-d);
  text-shadow: 0 1px 0 rgba(255,255,255,0.6);
}

/* Chronoshard balance chip in the header */
.shop-balance {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: linear-gradient(180deg, #fffdf7, #f1d77a);
  border: 1px solid rgba(184, 116, 28, 0.45);
  color: var(--shop-gold-d);
  font-weight: 900;
  font-size: 13px;
  padding: 6px 10px 6px 8px;
  border-radius: var(--radius-pill);
  margin-right: 6px;
  box-shadow: 0 1px 0 rgba(255,255,255,0.7) inset, 0 2px 4px rgba(0,0,0,0.08);
}
.shop-balance-icon { font-size: 14px; }
.shop-balance-val  { font-feature-settings: "tnum"; }

/* ---- demo banner ------------------------------------------ */
.shop-demo-banner {
  margin: 0;
  padding: 10px 18px;
  background: linear-gradient(180deg, #fff3c4, #ffe27a);
  border-bottom: 1px solid rgba(184, 116, 28, 0.3);
  color: var(--shop-gold-d);
  font-size: 12px;
  letter-spacing: 0.3px;
  text-align: center;
}
.shop-demo-banner strong { color: var(--bad); margin: 0 2px; font-weight: 900; }
.shop-demo-icon { margin-right: 4px; }

/* ---- section frame ---------------------------------------- */
.shop-section {
  padding: 14px 16px 6px;
  border-bottom: 1px dashed rgba(58, 46, 30, 0.12);
}
.shop-section:last-of-type { border-bottom: 0; }
.shop-section.highlight {
  background:
    radial-gradient(circle at 0% 0%, rgba(255,181,71,0.18), transparent 60%),
    radial-gradient(circle at 100% 100%, rgba(72,202,228,0.10), transparent 60%);
}
.shop-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 8px;
}
.shop-section-title {
  font-size: 14px;
  font-weight: 900;
  letter-spacing: 0.4px;
  color: var(--text);
  text-transform: uppercase;
}
.shop-section-sub {
  font-size: 11px;
  color: var(--text-dim);
}

/* ---- offer cards ------------------------------------------ */
.shop-offer-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 8px;
}

.shop-offer {
  position: relative;
  background: var(--bg-card);
  border: 1px solid rgba(58, 46, 30, 0.12);
  border-radius: var(--radius);
  padding: 12px 12px 10px;
  box-shadow: var(--sh-card);
  overflow: hidden;
}
.shop-offer.owned {
  opacity: 0.7;
  background: linear-gradient(180deg, #f1f5d4, #e8e4d2);
}
.shop-section.highlight .shop-offer {
  border-color: rgba(184, 116, 28, 0.35);
  box-shadow:
    0 2px 0 rgba(58,46,30,0.18),
    0 0 0 1px rgba(255,181,71,0.35),
    0 6px 16px rgba(184, 116, 28, 0.12);
}

/* Badge tag (top-right corner) */
.shop-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.6px;
  padding: 3px 7px;
  border-radius: var(--radius-pill);
  background: var(--bg-shaded);
  color: var(--text-soft);
  text-transform: uppercase;
}
.shop-badge.badge-onetime {
  background: linear-gradient(180deg, var(--bad), #b03a2e);
  color: #fff;
  box-shadow: 0 0 0 1px rgba(231, 76, 60, 0.25);
}
.shop-badge.badge-monthly {
  background: linear-gradient(180deg, var(--shop-monthly), var(--shop-monthly-d));
  color: #fff;
}
.shop-badge.badge-permanent {
  background: linear-gradient(180deg, #4a525a, var(--shop-permanent-d));
  color: #fff;
}
.shop-badge.badge-boost {
  background: linear-gradient(180deg, var(--shop-boost), #6c3483);
  color: #fff;
}

.shop-offer-head {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 10px;
  align-items: start;
  padding-right: 64px; /* leave room for the badge */
}
.shop-offer-icon {
  width: 56px;
  height: 56px;
  border-radius: var(--radius);
  background: linear-gradient(160deg, #fff7e0, var(--bg-shaded));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.7), 0 1px 3px rgba(0,0,0,0.08);
}
.shop-section.highlight .shop-offer-icon {
  background: linear-gradient(160deg, #fff3c4, #f1d77a);
}
.shop-offer-body { min-width: 0; }
.shop-offer-name {
  font-weight: 900;
  font-size: 14px;
  color: var(--text);
  margin-bottom: 2px;
}
.shop-offer-desc {
  font-size: 12px;
  color: var(--text-soft);
  line-height: 1.35;
  margin-bottom: 8px;
}

.shop-reward-row {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-bottom: 2px;
}
.shop-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: var(--radius-pill);
  background: var(--bg-shaded);
  color: var(--text-soft);
  white-space: nowrap;
}
.shop-chip-emoji { font-size: 12px; }
.shop-chip-gold {
  background: linear-gradient(180deg, #fff3c4, #f1d77a);
  color: var(--shop-gold-d);
  box-shadow: 0 0 0 1px rgba(184, 116, 28, 0.25);
}
.shop-chip-cyan {
  background: linear-gradient(180deg, #d6f3f9, #a4def0);
  color: var(--shop-cyan-d);
  box-shadow: 0 0 0 1px rgba(30, 107, 98, 0.25);
}
.shop-chip-crate {
  background: linear-gradient(180deg, #ece4ce, #d6c39c);
  color: var(--text-soft);
  box-shadow: 0 0 0 1px rgba(58,46,30,0.15);
}
.shop-chip-rare {
  background: linear-gradient(180deg, #fde7c4, #fcc28b);
  color: #8a3e10;
  box-shadow: 0 0 0 1px rgba(243, 156, 18, 0.35);
}
.shop-chip-mute {
  background: linear-gradient(180deg, #d0d3d6, #a4a8ad);
  color: #3a3a3a;
}

.shop-offer-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 10px;
  padding-top: 9px;
  border-top: 1px dashed rgba(58, 46, 30, 0.10);
}
.shop-odds-link {
  background: transparent;
  border: 0;
  color: var(--text-dim);
  font-family: inherit;
  font-size: 11px;
  font-weight: 700;
  text-decoration: underline dotted;
  cursor: pointer;
  padding: 4px 2px;
}
.shop-odds-link:hover { color: var(--text); }
.shop-foot-spacer { flex: 1; }

.shop-buy {
  flex-shrink: 0;
  background: linear-gradient(180deg, var(--shop-gold), var(--shop-gold-d));
  color: #fff;
  border: 0;
  font-family: inherit;
  font-weight: 900;
  font-size: 13px;
  letter-spacing: 0.5px;
  padding: 10px 16px;
  border-radius: var(--radius);
  cursor: pointer;
  box-shadow: 0 3px 0 rgba(184, 116, 28, 0.55), 0 0 0 1px rgba(255,255,255,0.15) inset;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
  min-width: 110px;
  text-align: center;
}
.shop-buy:hover { filter: brightness(1.05); }
.shop-buy:active { transform: translateY(1px); box-shadow: 0 1px 0 rgba(184, 116, 28, 0.55); }
.shop-buy.owned, .shop-buy:disabled {
  background: linear-gradient(180deg, #b8b2a4, #8e8676);
  color: #fff;
  box-shadow: 0 2px 0 rgba(0,0,0,0.15);
  cursor: not-allowed;
  opacity: 0.85;
}

/* ---- rewarded-ad section ---------------------------------- */
.shop-ad-section {
  background: linear-gradient(180deg, rgba(72,202,228,0.10), transparent);
}
.shop-ad-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.shop-ad-card {
  background: var(--bg-card);
  border: 1px solid rgba(30, 107, 98, 0.25);
  border-radius: var(--radius);
  padding: 10px 12px;
  box-shadow: var(--sh-card);
}
.shop-ad-head {
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: 10px;
  align-items: center;
}
.shop-ad-icon {
  width: 40px; height: 40px;
  border-radius: 10px;
  background: linear-gradient(160deg, #d6f3f9, #a4def0);
  display: flex; align-items: center; justify-content: center;
  font-size: 22px;
  color: var(--shop-cyan-d);
}
.shop-ad-name {
  font-weight: 900;
  font-size: 13px;
  color: var(--text);
}
.shop-ad-desc {
  font-size: 11px;
  color: var(--text-dim);
}
.shop-ad-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 8px;
  padding-top: 6px;
  border-top: 1px dashed rgba(30, 107, 98, 0.18);
}
.shop-ad-count {
  font-size: 10px;
  color: var(--text-dim);
  font-feature-settings: "tnum";
}
.shop-ad-watch {
  background: linear-gradient(180deg, var(--shop-cyan), var(--shop-cyan-d));
  color: #fff;
  border: 0;
  font-family: inherit;
  font-weight: 900;
  font-size: 12px;
  letter-spacing: 0.4px;
  padding: 8px 14px;
  border-radius: var(--radius);
  cursor: pointer;
  box-shadow: 0 3px 0 rgba(30, 107, 98, 0.5);
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.shop-ad-watch:active { transform: translateY(1px); box-shadow: 0 1px 0 rgba(30, 107, 98, 0.5); }
.shop-ad-watch:disabled { opacity: 0.5; cursor: not-allowed; }
.shop-ad-watch.instant {
  background: linear-gradient(180deg, var(--shop-monthly), var(--shop-monthly-d));
  box-shadow: 0 3px 0 rgba(34, 153, 84, 0.55);
}

/* ---- footer note ------------------------------------------ */
.shop-footer-note {
  padding: 14px 16px 18px;
  text-align: center;
  border-top: 1px solid rgba(58, 46, 30, 0.10);
  background: rgba(0,0,0,0.02);
}
.shop-footer-msg {
  font-size: 11px;
  color: var(--text-dim);
  line-height: 1.5;
  margin-bottom: 8px;
}
.shop-ethics-link {
  background: transparent;
  border: 1px solid rgba(58, 46, 30, 0.25);
  font-family: inherit;
  font-size: 12px;
  font-weight: 800;
  color: var(--text-soft);
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  cursor: pointer;
}
.shop-ethics-link:hover {
  background: rgba(0,0,0,0.03);
  color: var(--text);
}

/* ---- confirm modal ---------------------------------------- */
.modal[data-kind="shop_confirm"] {
  --confirm-pad: 18px;
}
.modal[data-kind="shop_confirm"] .modal-body {
  padding: 18px 18px 14px;
}
.shop-confirm-top {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}
.shop-confirm-icon {
  width: 56px; height: 56px;
  border-radius: var(--radius);
  background: linear-gradient(160deg, #fff3c4, #f1d77a);
  display: flex; align-items: center; justify-content: center;
  font-size: 30px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.7);
}
.shop-confirm-col { flex: 1; min-width: 0; }
.shop-confirm-name {
  font-size: 16px;
  font-weight: 900;
  color: var(--text);
}
.shop-confirm-price {
  font-size: 14px;
  font-weight: 900;
  color: var(--shop-gold-d);
  margin-top: 2px;
}
.shop-confirm-desc {
  font-size: 12px;
  color: var(--text-soft);
  line-height: 1.4;
  margin-bottom: 8px;
}
.shop-confirm-q {
  margin-top: 12px;
  padding: 10px 12px;
  background: linear-gradient(180deg, #fff7e0, #f5e3b6);
  border: 1px solid rgba(184, 116, 28, 0.3);
  border-radius: var(--radius);
  font-size: 13px;
  font-weight: 800;
  color: var(--shop-gold-d);
  text-align: center;
}
.shop-confirm-disclaimer {
  margin-top: 10px;
  font-size: 10px;
  color: var(--text-dim);
  font-style: italic;
  text-align: center;
  line-height: 1.45;
}

/* ---- ad-watch modal --------------------------------------- */
.modal[data-kind="shop_ad"] {
  /* Slightly darker chrome so the fake "ad" pops. */
}
.modal[data-kind="shop_ad"] .modal-header {
  background: #1a1f2e;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.modal[data-kind="shop_ad"] .modal-title {
  color: #f0f0f0;
  text-shadow: none;
}
.modal[data-kind="shop_ad"] .modal-body {
  padding: 0;
  background: #1a1f2e;
}
.shop-ad-stage {
  position: relative;
}
.shop-ad-fake {
  background: linear-gradient(160deg, #ff8a3d 0%, #ff5d3c 50%, #b8741c 100%);
  color: #fff;
  text-align: center;
  padding: 38px 18px 60px;
  position: relative;
  overflow: hidden;
}
.shop-ad-fake::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -20%;
  width: 140%;
  height: 200%;
  background: repeating-linear-gradient(45deg,
    rgba(255,255,255,0.05) 0 18px,
    transparent 18px 36px);
  pointer-events: none;
  animation: shopAdShimmer 8s linear infinite;
}
.shop-ad-watermark {
  position: relative;
  font-size: 22px;
  font-weight: 900;
  letter-spacing: 1.2px;
  background: rgba(0,0,0,0.35);
  display: inline-block;
  padding: 6px 14px;
  border-radius: var(--radius);
  margin-bottom: 18px;
  text-shadow: 0 1px 0 rgba(0,0,0,0.4);
}
.shop-ad-fake-title {
  font-size: 28px;
  font-weight: 900;
  letter-spacing: 1px;
  text-shadow: 0 2px 0 rgba(0,0,0,0.25);
  margin-bottom: 6px;
  position: relative;
}
.shop-ad-fake-sub {
  font-size: 14px;
  font-weight: 800;
  margin-bottom: 14px;
  position: relative;
}
.shop-ad-fake-cta {
  font-size: 11px;
  letter-spacing: 0.5px;
  background: rgba(255,255,255,0.15);
  display: inline-block;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  position: relative;
}
.shop-ad-count-wrap {
  background: #0f1320;
  color: #fff;
  text-align: center;
  padding: 14px 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.shop-ad-loading {
  font-size: 11px;
  color: #b9c2d6;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}
.shop-ad-counter {
  font-size: 44px;
  font-weight: 900;
  color: var(--shop-gold);
  font-feature-settings: "tnum";
  line-height: 1;
}
.shop-ad-counter.done { color: var(--good); }
.modal[data-kind="shop_ad"] .modal-footer {
  background: #0f1320;
  border-top: 1px solid rgba(255,255,255,0.08);
}
.modal[data-kind="shop_ad"] .modal-footer .btn {
  background: #2a3148;
  color: #b9c2d6;
}
.modal[data-kind="shop_ad"] .modal-footer .btn:disabled {
  opacity: 0.4;
}
.modal[data-kind="shop_ad"] .modal-footer .btn.primary {
  background: linear-gradient(180deg, var(--good), var(--good-dark));
  color: #fff;
}

@keyframes shopAdShimmer {
  from { transform: translateX(0); }
  to   { transform: translateX(60px); }
}
body.reduce-motion .shop-ad-fake::before { animation: none; }

/* ---- ethics sub-modal ------------------------------------- */
.modal[data-kind="shop_ethics"] .modal-body {
  padding: 16px 18px;
}
.shop-ethics-h {
  font-size: 13px;
  font-weight: 900;
  color: var(--text);
  margin: 14px 0 4px;
  letter-spacing: 0.3px;
  text-transform: uppercase;
}
.shop-ethics-h:first-child { margin-top: 0; }
.shop-ethics-p {
  font-size: 12px;
  color: var(--text-soft);
  line-height: 1.5;
  margin-bottom: 8px;
}

/* ============================================================
   19. FTUE / Tutorial Overlay (Tutorial Agent — GDD §10)
   ------------------------------------------------------------
   #tutorial-root is a position:fixed full-viewport layer with a
   high z-index. The dark dimmer uses pointer-events:none so
   clicks pass through to the actual UI; the spotlight + bubble
   capture pointer events explicitly.
   ============================================================ */
.tut-root {
  position: fixed; inset: 0;
  z-index: 9000;
  pointer-events: none;
  font-family: inherit;
  color: var(--text);
}
.tut-root.hidden { display: none; }

.tut-backdrop {
  position: absolute; inset: 0;
  background: rgba(10, 8, 16, 0.66);
  pointer-events: none;
  transition: opacity 220ms ease;
}
.tut-root.tut-modal .tut-backdrop { background: rgba(10, 8, 16, 0.78); }

/* Spotlight: visible only as a glowing outline. The dimmer is the
   .tut-backdrop sibling. We let the dim stay solid; the target
   button is still visible/clickable underneath because pointer-events
   on the dimmer is none. Visually, the dim covers the target too —
   we accept that compromise (no large box-shadow punch-out) so we
   don't blow the GPU with a 9999px-spread paint region every frame. */
.tut-spotlight {
  position: absolute;
  border-radius: 14px;
  pointer-events: none;
  outline: 3px solid rgba(255, 181, 71, 0.95);
  outline-offset: 2px;
  box-shadow: 0 0 22px 6px rgba(255, 181, 71, 0.55);
  /* Light fill so the user can SEE through the dim a bit. */
  background: rgba(255, 255, 255, 0.16);
}
.tut-root.tut-modal .tut-spotlight { display: none; }

.tut-arrow {
  position: absolute;
  width: 36px; height: 36px;
  font-size: 28px;
  line-height: 36px;
  text-align: center;
  pointer-events: none;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,0.6));
}
.tut-arrow.flip { transform: rotate(180deg); }
.tut-root.tut-modal .tut-arrow { display: none; }

.tut-progress {
  position: absolute;
  top: 14px; left: 50%;
  transform: translateX(-50%);
  display: flex; gap: 6px; align-items: center;
  padding: 6px 12px;
  background: rgba(20, 18, 28, 0.78);
  border-radius: 999px;
  pointer-events: auto;
  color: #fff;
  font-size: 12px;
}
.tut-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: rgba(255,255,255,0.35);
  transition: background 200ms ease, transform 200ms ease;
}
.tut-dot.done   { background: var(--good); }
.tut-dot.active { background: var(--brand); transform: scale(1.4); }
.tut-progress-label {
  margin-left: 6px;
  font-variant-numeric: tabular-nums;
  opacity: 0.85;
}

.tut-skip {
  position: absolute;
  top: 12px; right: 14px;
  background: rgba(20, 18, 28, 0.78);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 13px;
  cursor: pointer;
  pointer-events: auto;
  transition: background 160ms ease;
}
.tut-skip:hover { background: rgba(40, 36, 56, 0.92); }

.tut-bubble {
  position: absolute;
  width: 320px;
  background: linear-gradient(180deg, #fff8e6, #f5ead3);
  border: 2px solid rgba(58,46,30,0.18);
  border-radius: 18px;
  padding: 14px;
  box-shadow: 0 12px 32px rgba(0,0,0,0.35),
              0 4px 0 rgba(58,46,30,0.18);
  pointer-events: auto;
  display: flex; gap: 12px;
}
.tut-avatar {
  flex: 0 0 44px;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, #ffb547, #ff7a45);
  color: #fff;
  font-size: 26px;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 0 rgba(58,46,30,0.22);
}
.tut-bubble-body { flex: 1; min-width: 0; }
.tut-bubble-title {
  font-weight: 700;
  font-size: 15px;
  color: var(--text);
  margin-bottom: 4px;
}
.tut-bubble-text {
  font-size: 13px;
  color: var(--text-soft);
  line-height: 1.45;
}
.tut-bubble-mira {
  margin-top: 8px;
  padding: 6px 8px;
  font-size: 12px;
  font-style: italic;
  color: var(--text-dim);
  background: rgba(255, 181, 71, 0.12);
  border-left: 3px solid var(--brand);
  border-radius: 4px;
}
.tut-bubble-mira:empty { display: none; }
.tut-bubble-btns {
  margin-top: 10px;
  display: flex; gap: 8px; justify-content: flex-end;
  flex-wrap: wrap;
}
.tut-bubble-btns:empty { display: none; }
.tut-btn {
  border: none;
  background: #e8dcc0;
  color: var(--text);
  border-radius: 999px;
  padding: 8px 16px;
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
  box-shadow: 0 2px 0 rgba(58,46,30,0.20);
  transition: transform 120ms ease, box-shadow 120ms ease;
}
.tut-btn:hover { transform: translateY(-1px); }
.tut-btn:active { transform: translateY(1px); box-shadow: 0 1px 0 rgba(58,46,30,0.20); }
.tut-btn.primary {
  background: linear-gradient(180deg, var(--brand), var(--brand-2));
  color: #fff;
  box-shadow: 0 2px 0 rgba(184, 99, 64, 0.6), 0 6px 14px rgba(255,122,69,0.4);
}

.tut-root.tut-modal .tut-bubble {
  width: min(360px, calc(100vw - 32px));
  padding: 18px;
}
.tut-root.tut-modal .tut-bubble-title { font-size: 17px; }
.tut-root.tut-modal .tut-bubble-text  { font-size: 14px; }

/* ============================================================
   Leaderboard panel (event modal sub-tab) — Leaderboard Agent
   GDD §7.2 — 50-player bracket, cosmetic-only rewards.
   ============================================================ */

/* Tab bar inside event modal */
.ev-tabbar {
  display: flex;
  gap: 6px;
  margin-bottom: 12px;
  padding: 4px;
  background: rgba(255,255,255,0.55);
  border: 1px solid rgba(243,156,18,0.25);
  border-radius: var(--radius-pill);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.4);
}
.ev-tab {
  flex: 1;
  border: 0;
  background: transparent;
  font-family: inherit;
  font-weight: 800;
  font-size: 12.5px;
  letter-spacing: 0.3px;
  padding: 9px 14px;
  border-radius: var(--radius-pill);
  cursor: pointer;
  color: var(--text-soft);
  transition: background 0.18s ease, color 0.18s ease, transform 0.1s ease;
}
.ev-tab:active { transform: scale(0.97); }
.ev-tab.active {
  background: linear-gradient(135deg, #ffd166, #ff9a3c);
  color: #fff;
  box-shadow: 0 2px 0 rgba(184,99,64,0.4);
  text-shadow: 0 1px 1px rgba(0,0,0,0.18);
}

/* Tab content visibility — JS toggles display directly */
.ev-tab-tasks { /* original event content slot */ }
.ev-tab-ranking { /* leaderboard content */ }

/* Header: player rank big + projected reward chip */
.lb-header {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background:
    radial-gradient(circle at 0% 0%, rgba(255,209,102,0.35), transparent 65%),
    linear-gradient(135deg, #fff7e2 0%, #ffeec0 100%);
  border: 1px solid rgba(243,156,18,0.35);
  border-radius: var(--radius-lg);
  margin-bottom: 12px;
  box-shadow: 0 4px 14px rgba(239,71,111,0.10);
}
.lb-header-left { min-width: 0; }
.lb-header-label {
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--text-soft);
}
.lb-header-rank {
  font-size: 32px;
  font-weight: 900;
  color: var(--text);
  line-height: 1.1;
  margin-top: 2px;
  text-shadow: 0 1px 2px rgba(255,209,102,0.4);
  font-variant-numeric: tabular-nums;
}
.lb-header-sub {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--text-soft);
  margin-top: 2px;
}
.lb-header-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
}
.lb-header-timer {
  font-size: 13px;
  font-weight: 800;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  background: rgba(255,255,255,0.7);
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(58,46,30,0.10);
}
.lb-tier-chip {
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.4px;
  padding: 5px 10px;
  border-radius: var(--radius-pill);
  white-space: nowrap;
  box-shadow: 0 2px 0 rgba(0,0,0,0.10);
}
.lb-tier-top_1 {
  background: linear-gradient(135deg, #ffd166, #ef476f);
  color: #fff;
  text-shadow: 0 1px 1px rgba(0,0,0,0.2);
  animation: lbTopPulse 2.2s ease-in-out infinite;
}
.lb-tier-top_5 {
  background: linear-gradient(135deg, #9b59b6, #6c3483);
  color: #fff;
}
.lb-tier-top_20 {
  background: linear-gradient(135deg, #5dade2, #2874a6);
  color: #fff;
}
.lb-tier-participation {
  background: rgba(58,46,30,0.08);
  color: var(--text-soft);
}
@keyframes lbTopPulse {
  0%, 100% { box-shadow: 0 2px 0 rgba(0,0,0,0.18), 0 0 0 rgba(255,209,102,0.3); }
  50%      { box-shadow: 0 2px 0 rgba(0,0,0,0.18), 0 0 18px rgba(255,209,102,0.65); }
}

/* List */
.lb-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 12px;
}
.lb-sep {
  text-align: center;
  font-size: 18px;
  color: var(--text-dim);
  letter-spacing: 4px;
  padding: 2px 0;
}
.lb-row {
  display: grid;
  grid-template-columns: 38px 40px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: rgba(255,255,255,0.92);
  border: 1px solid rgba(58,46,30,0.08);
  border-radius: var(--radius);
  box-shadow: var(--sh-flat);
}
.lb-row.me {
  background: linear-gradient(135deg, #fff4d0, #ffe39e);
  border-color: rgba(243,156,18,0.45);
  box-shadow: 0 2px 0 rgba(243,156,18,0.25), 0 0 0 2px rgba(255,209,102,0.4);
  /* Pin the player row to the bottom of the scrollable area so their
     score stays visible while the user scrolls the bracket. No-op when
     the player is already in the top 10 (sticky kicks in only when the
     row would scroll out of view). */
  position: sticky;
  bottom: 6px;
  z-index: 2;
}
.lb-row.rank-podium { background: linear-gradient(135deg, #fdfbf2, #fff5d4); }
.lb-row.rank-1 {
  background: linear-gradient(135deg, #fff0c0, #ffd166);
  border-color: rgba(243,156,18,0.45);
}
.lb-rank {
  font-size: 14px;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  color: var(--text);
  text-align: center;
}
.lb-row.rank-1 .lb-rank,
.lb-row.rank-podium .lb-rank { font-size: 20px; }

.lb-avatar {
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px;
  background: rgba(0,0,0,0.04);
  border-radius: 50%;
  border: 1px solid rgba(58,46,30,0.08);
}
.lb-row.me .lb-avatar {
  background: linear-gradient(135deg, #ffd166, #ff9a3c);
  color: #fff;
  border-color: rgba(243,156,18,0.5);
}
.lb-meta { min-width: 0; }
.lb-name {
  font-size: 12.5px;
  font-weight: 800;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.lb-you-tag {
  display: inline-block;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.6px;
  padding: 1px 6px;
  border-radius: var(--radius-pill);
  background: var(--text);
  color: var(--brand);
  margin-left: 4px;
  vertical-align: middle;
}
.lb-badge {
  margin-top: 2px;
  font-size: 10px;
  font-weight: 800;
  color: var(--era-color-d);
  letter-spacing: 0.3px;
}
.lb-score {
  font-size: 12.5px;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  color: var(--text);
  text-align: right;
  white-space: nowrap;
}
.lb-row.me .lb-score { color: var(--era-color-d); }

/* Score breakdown explainer */
.lb-breakdown {
  margin-top: 4px;
  padding: 10px 12px 12px;
  background: rgba(255,255,255,0.78);
  border: 1px solid rgba(58,46,30,0.08);
  border-radius: var(--radius);
}
.lb-breakdown-title {
  font-size: 10.5px;
  font-weight: 900;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--text-soft);
  margin-bottom: 8px;
}
.lb-breakdown-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px;
}
.lb-break-chip {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 8px;
  background: rgba(0,0,0,0.03);
  border-radius: var(--radius-sm);
}
.lb-break-icon { font-size: 14px; }
.lb-break-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-soft);
  flex: 1;
}
.lb-break-val {
  font-size: 12px;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}

/* Ethical footer */
.lb-footer {
  margin-top: 14px;
  padding: 10px 12px;
  background: rgba(46,204,113,0.08);
  border: 1px solid rgba(46,204,113,0.22);
  border-radius: var(--radius);
  display: flex;
  gap: 8px;
  align-items: flex-start;
}
.lb-footer-icon { font-size: 14px; flex-shrink: 0; }
.lb-footer-text {
  font-size: 11px;
  font-weight: 700;
  color: var(--good-dark);
  line-height: 1.45;
}

/* Cloud (global) leaderboard mini-section — appended below the 50-bracket
   when Firestore returns real submissions for the current event. Visually
   smaller / softer than the main list so it's clearly additive. */
.lb-cloud-section {
  margin-top: 14px;
  padding: 10px 12px 12px;
  background: linear-gradient(180deg, rgba(14, 165, 233, 0.06), rgba(14, 165, 233, 0.02));
  border: 1px solid rgba(14, 165, 233, 0.28);
  border-radius: var(--radius);
}
.lb-cloud-head {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-bottom: 8px;
}
.lb-cloud-icon { font-size: 13px; }
.lb-cloud-title {
  font-size: 12px;
  font-weight: 900;
  color: var(--info);
  letter-spacing: 0.3px;
}
.lb-cloud-sub {
  font-size: 10px;
  font-weight: 700;
  color: var(--text-dim);
}
.lb-cloud-body { min-height: 28px; }
.lb-cloud-loading,
.lb-cloud-empty {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-soft);
  text-align: center;
  padding: 8px 4px;
  line-height: 1.5;
}
.lb-cloud-list {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.lb-cloud-row {
  display: grid;
  grid-template-columns: 36px 1fr auto;
  align-items: center;
  gap: 8px;
  padding: 5px 8px;
  background: rgba(255, 255, 255, 0.55);
  border-radius: 8px;
  font-size: 12px;
  font-weight: 700;
  transition: background 0.12s ease;
}
.lb-cloud-row.rank-podium { background: rgba(255, 246, 214, 0.85); }
.lb-cloud-row.rank-1 {
  background: linear-gradient(90deg, rgba(255, 209, 102, 0.55), rgba(255, 167, 22, 0.30));
  font-weight: 900;
}
.lb-cloud-row.me {
  background: linear-gradient(90deg, rgba(255, 87, 34, 0.18), rgba(255, 167, 22, 0.10));
  border: 1px solid rgba(192, 103, 27, 0.45);
  font-weight: 900;
}
.lb-cloud-rank {
  font-size: 11px;
  font-weight: 900;
  color: var(--text-soft);
}
.lb-cloud-row.rank-1 .lb-cloud-rank   { color: var(--brand-d); }
.lb-cloud-row.me .lb-cloud-rank       { color: var(--brand-2); }
.lb-cloud-name {
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.lb-cloud-score {
  font-variant-numeric: tabular-nums;
  font-weight: 900;
  color: var(--text);
}
.lb-cloud-row.rank-1 .lb-cloud-score { color: var(--brand-d); }
.lb-cloud-row.me .lb-cloud-score     { color: var(--brand-2); }

/* Empty state */
.lb-empty {
  padding: 36px 18px;
  text-align: center;
}
.lb-empty-icon { font-size: 48px; opacity: 0.6; margin-bottom: 10px; }
.lb-empty-title {
  font-size: 15px;
  font-weight: 900;
  color: var(--text);
  margin-bottom: 4px;
}
.lb-empty-sub {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-soft);
  line-height: 1.45;
}

/* ============================================================
   UX Polish — Issue 1-5 additions
   ============================================================ */

/* --- Issue 1 + 3: Trade area with qty row --- */
.trade-area {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 10px;
}

.trade-qty-row {
  display: flex;
  gap: 5px;
  justify-content: flex-end;
}

.trade-qty-pill {
  font-family: inherit;
  font-size: 11px;
  font-weight: 800;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  border: 1.5px solid rgba(255,255,255,0.4);
  background: rgba(255,255,255,0.14);
  color: rgba(255,255,255,0.75);
  cursor: pointer;
  transition: all 0.12s ease;
  letter-spacing: 0.5px;
}
.trade-qty-pill.active {
  background: rgba(255,255,255,0.92);
  color: var(--era-color-d, #7a4828);
  border-color: rgba(255,255,255,0.9);
  font-weight: 900;
}
.trade-qty-pill:hover:not(.active) {
  background: rgba(255,255,255,0.25);
  color: #fff;
}

/* --- Issue 4: Producer row clarity --- */
.prod-target-line {
  font-size: 12.5px;
  font-weight: 800;
  color: var(--era-color, #f4a261);
  margin: 1px 0 2px;
  line-height: 1.3;
  display: flex;
  align-items: center;
  gap: 3px;
}
.prod-rate-val {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}

/* ============================================================
   Phase 6 — Era transition flash. Fires only on rank-ups that unlock
   a new era (ranks 10, 20, 30, 35). A full-viewport wash in the new
   era's palette + a centered era name label. 1.4s total, additive to
   the regular rank-up confetti so the player feels "rank up... AND
   the world changed."
   ============================================================ */
.era-transition-flash {
  position: fixed;
  inset: 0;
  z-index: 220;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: eraFlash 1.7s ease-out forwards;
}
.era-transition-flash.era-river {
  background: radial-gradient(circle at 50% 50%,
              rgba(42, 157, 143, 0.55) 0%,
              rgba(30, 107, 98, 0.85) 60%,
              rgba(30, 107, 98, 0.95) 100%);
}
.era-transition-flash.era-iron {
  background: radial-gradient(circle at 50% 50%,
              rgba(108, 117, 125, 0.55) 0%,
              rgba(29, 53, 87, 0.85) 60%,
              rgba(29, 53, 87, 0.95) 100%);
}
.era-transition-flash.era-steam {
  background: radial-gradient(circle at 50% 50%,
              rgba(192, 133, 82, 0.55) 0%,
              rgba(107, 68, 35, 0.85) 60%,
              rgba(107, 68, 35, 0.95) 100%);
}
.era-transition-flash.era-orbital {
  background: radial-gradient(circle at 50% 50%,
              rgba(124, 77, 255, 0.55) 0%,
              rgba(49, 27, 146, 0.85) 60%,
              rgba(49, 27, 146, 0.95) 100%);
}
.era-transition-label {
  font-family: inherit;
  font-size: 28px;
  font-weight: 900;
  letter-spacing: 4px;
  color: #fff;
  text-shadow:
    0 2px 0 rgba(0, 0, 0, 0.4),
    0 0 28px rgba(255, 255, 255, 0.85),
    0 0 60px rgba(255, 255, 255, 0.55);
  padding: 16px 24px;
  border-radius: 18px;
  background: rgba(0, 0, 0, 0.28);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  animation: eraLabelIn 1.7s cubic-bezier(0.2, 0.9, 0.3, 1.2) forwards;
  text-align: center;
}
@keyframes eraFlash {
  0%   { opacity: 0; }
  18%  { opacity: 1; }
  72%  { opacity: 1; }
  100% { opacity: 0; }
}
@keyframes eraLabelIn {
  0%   { transform: scale(0.7) translateY(20px); opacity: 0; }
  22%  { transform: scale(1.06) translateY(0);   opacity: 1; }
  78%  { transform: scale(1)    translateY(0);   opacity: 1; }
  100% { transform: scale(0.94) translateY(-10px); opacity: 0; }
}

/* ============================================================
   Phase 5 — Welcome screen (first-time pre-tutorial overlay) and
   the dim-tabs FTUE window. The welcome is a full-viewport scrim
   with a single CTA; after dismissal, the four non-active bottom
   tabs are visually dimmed for 60s (or until first milestone) so
   the player's eye lands on Çağlar.
   ============================================================ */
.welcome-screen {
  position: fixed;
  inset: 0;
  z-index: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at 50% 40%, #2a1f15 0%, #100a06 75%);
  padding: 24px;
  animation: welcomeFadeIn 0.5s ease-out;
}
.welcome-screen.welcome-dismiss {
  animation: welcomeFadeOut 0.32s ease-in forwards;
}
@keyframes welcomeFadeIn {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}
@keyframes welcomeFadeOut {
  0%   { opacity: 1; }
  100% { opacity: 0; }
}
.welcome-card {
  max-width: 360px;
  width: 100%;
  padding: 28px 24px 24px;
  background: linear-gradient(180deg, #fef9e8 0%, #fff5d4 100%);
  color: #2a2218;
  border-radius: 24px;
  text-align: center;
  box-shadow:
    0 16px 48px rgba(0, 0, 0, 0.55),
    0 0 0 4px rgba(255, 209, 102, 0.55),
    0 0 80px rgba(255, 167, 22, 0.5);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
.welcome-icon {
  font-size: 48px;
  filter: drop-shadow(0 4px 12px rgba(192, 103, 27, 0.4));
  margin-top: 6px;
}
.welcome-title {
  font-size: 26px;
  font-weight: 900;
  letter-spacing: 3px;
  color: #6b3f10;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
}
.welcome-tagline {
  font-size: 14px;
  font-weight: 700;
  color: #5a4a36;
  line-height: 1.45;
  max-width: 280px;
}
.welcome-cta {
  margin-top: 6px;
  min-height: 56px;
  padding: 14px 28px;
  font-family: inherit;
  font-size: 17px;
  font-weight: 900;
  letter-spacing: 0.6px;
  color: var(--text-inv);
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  border: 0;
  border-radius: var(--radius-pill);
  box-shadow: 0 4px 0 rgba(192, 103, 27, 0.55), 0 0 24px rgba(255, 167, 22, 0.5);
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.15s ease;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.18);
}
.welcome-cta:hover  { transform: translateY(-1px); }
.welcome-cta:active { transform: translateY(2px); box-shadow: 0 2px 0 rgba(192, 103, 27, 0.55); }
.welcome-hint {
  font-size: 11.5px;
  font-weight: 700;
  color: #7a6850;
  line-height: 1.5;
  max-width: 280px;
  margin-top: 4px;
}

/* Dim non-active bottom tabs during the FTUE window. The Çağlar tab
   stays full opacity; the other four read as "you'll get there." */
body.ftue-dim-tabs .tabbar-btn:not(.active) {
  opacity: 0.42;
  transition: opacity 0.6s ease;
}

/* ============================================================
   Sonraki Hedef banner — Phase 3 from ROADMAP.md.
   Sticky-feeling banner at the top of the Çağlar tab. One single
   visible goal at all times, tap-routes to the relevant surface.
   Mobile: min-height 56px (well above iOS HIG 44px), full-width.
   ============================================================ */
.next-goal-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 56px;
  padding: 10px 14px;
  margin-bottom: 12px;
  background: linear-gradient(135deg, var(--era-color, #f4a261), var(--era-color-d, #b86340));
  color: var(--text-inv);
  border: 0;
  border-radius: var(--radius-lg);
  box-shadow: var(--sh-card-up);
  font-family: inherit;
  font-weight: 800;
  text-align: left;
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.15s ease, filter 0.15s ease;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.next-goal-banner:hover  { transform: translateY(-1px); filter: brightness(1.05); }
.next-goal-banner:active { transform: translateY(1px); }
.next-goal-banner .ng-icon {
  font-size: 22px;
  line-height: 1;
  flex-shrink: 0;
  filter: drop-shadow(0 1px 0 rgba(0, 0, 0, 0.25));
}
.next-goal-banner .ng-content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.next-goal-banner .ng-text {
  font-size: 14px;
  font-weight: 900;
  letter-spacing: 0.2px;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.18);
}
.next-goal-banner .ng-sub {
  font-size: 11px;
  font-weight: 700;
  opacity: 0.88;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.next-goal-banner .ng-arrow {
  font-size: 22px;
  font-weight: 900;
  line-height: 1;
  opacity: 0.7;
  flex-shrink: 0;
}
/* Priority-based subtle accent: rank-up ready uses an extra-strong
   gold glow to scream "do this now". Other priorities ride the
   normal era-tinted treatment. */
.next-goal-banner[data-priority="1"] {
  box-shadow:
    var(--sh-card-up),
    0 0 0 2px rgba(255, 209, 102, 0.6),
    0 0 28px rgba(255, 167, 22, 0.5);
  animation: ngPulse 1.6s ease-in-out infinite;
}
@keyframes ngPulse {
  0%, 100% { box-shadow: var(--sh-card-up), 0 0 0 2px rgba(255, 209, 102, 0.6), 0 0 22px rgba(255, 167, 22, 0.4); }
  50%      { box-shadow: var(--sh-card-up), 0 0 0 2px rgba(255, 209, 102, 0.85), 0 0 36px rgba(255, 167, 22, 0.7); }
}

/* ============================================================
   Phase 7 — Narration ticker. Sits right under the Sonraki Hedef
   banner on the Çağlar tab. Rotates 3 short Turkish flavor lines
   per rank (from data/rank_flavor.js) every 8s. Voice: MIRA dry-
   humor, low-key. Visual: era-tinted left border, soft background,
   italic ticker text — clearly a "voice" not an "action."
   ============================================================ */
.flavor-ticker {
  width: 100%;
  margin: 0 0 12px 0;
  padding: 10px 14px 10px 12px;
  background: linear-gradient(180deg,
              color-mix(in srgb, var(--era-color, #f4a261) 8%, var(--bg-card, #fff)) 0%,
              var(--bg-card, #fff) 100%);
  border: 1px solid rgba(58, 46, 30, 0.08);
  border-left: 3px solid var(--era-color, #f4a261);
  border-radius: var(--radius, 10px);
  box-shadow: var(--sh-card);
  overflow: hidden;
  position: relative;
  /* The transition matches the .producer rule so era swaps feel unified. */
  transition: border-color 0.4s ease, background 0.4s ease;
}
.flavor-ticker .flavor-line {
  font-family: inherit;
  font-size: 13px;
  line-height: 1.45;
  font-style: italic;
  color: var(--text-soft, #6b5b3d);
  letter-spacing: 0.1px;
  min-height: 1.45em;
  transition: opacity 0.35s ease, transform 0.35s ease;
  will-change: opacity, transform;
}
.flavor-ticker .flavor-line-out {
  opacity: 0;
  transform: translateY(-6px);
}
.flavor-ticker .flavor-line-in {
  opacity: 1;
  transform: translateY(0);
}
/* Reduce-motion: instant text swap, no slide/fade. */
body.reduce-motion .flavor-ticker .flavor-line {
  transition: none;
  transform: none !important;
  opacity: 1 !important;
}

/* ============================================================
   Slice 8 — QA cold-start banner. Sits at the very top of the
   viewport when ?qaColdStart=1 is in the URL. Visible cue that
   persistence (local + cloud) is disabled this session so the
   QA tester can't mistake a fresh-start session for a real one.
   ============================================================ */
.qa-cold-start-banner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  /* Above everything: welcome-screen (500), modal-root (~1000), tutorial
     overlay. The banner is debug UI; it must always be the first thing
     a QA tester sees. */
  z-index: 99999;
  padding: 6px 10px;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.4px;
  text-align: center;
  color: #1a1a1a;
  background: repeating-linear-gradient(
    -45deg,
    #ffd54f 0,
    #ffd54f 14px,
    #ffca28 14px,
    #ffca28 28px
  );
  box-shadow: 0 2px 0 rgba(58, 46, 30, 0.18);
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
}

/* Production chain breadcrumb — Slice 1 / Phase 1 from ROADMAP.md.
   Shows the chain a producer feeds into: "→ Gatherer (+0.2/s) → 🪨".
   Smaller + dimmer than the rate value so the resource icon at the
   end (the destination) is what the eye lands on. */
.prod-chain-name {
  font-weight: 800;
  color: var(--text-soft);
}
.prod-chain-rate {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-dim);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}
.prod-chain-arrow {
  opacity: 0.55;
  font-weight: 800;
  margin: 0 1px;
}
.prod-chain-terminal {
  font-size: 13px;
  filter: drop-shadow(0 0 4px rgba(255, 167, 22, 0.4));
}

.milestone-hint {
  /* Pump this up — players need to SEE the milestone pull. Was tiny grey
     text, easily missed. Now it's a small marigold chip you can't ignore. */
  font-size: 11.5px;
  font-weight: 900;
  color: var(--text-inv);
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  border-radius: var(--radius-pill);
  padding: 2px 9px;
  white-space: nowrap;
  letter-spacing: 0.3px;
  box-shadow: 0 1px 0 rgba(192, 103, 27, 0.4), 0 0 8px rgba(255, 167, 22, 0.35);
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.15);
}

/* ============================================================
   Milestone celebration banner — fires when a producer crosses
   25/50/100/200/300/400/500/1000/2500 owned. This is the dopamine
   moment that was missing from the AdVenture-Capitalist-style loop.
   ============================================================ */
.milestone-banner {
  position: fixed;
  left: 50%;
  top: 22%;
  transform: translate(-50%, -50%) scale(0.6);
  z-index: 200;
  padding: 18px 28px;
  border-radius: 20px;
  background: linear-gradient(135deg, #fff5d4 0%, #ffd166 55%, #ff9a3c 100%);
  color: #5a2e0a;
  box-shadow:
    0 10px 30px rgba(232, 119, 34, 0.55),
    0 0 0 4px rgba(255, 255, 255, 0.55),
    0 0 60px rgba(255, 209, 102, 0.7);
  text-align: center;
  pointer-events: none;
  animation: msBannerIn 0.42s cubic-bezier(0.2, 1.6, 0.4, 1) forwards;
  font-family: inherit;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
  min-width: 260px;
  max-width: 90vw;
}
.milestone-banner.ms-banner-out {
  animation: msBannerOut 0.32s ease-in forwards;
}
.milestone-banner .ms-banner-head {
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 2px;
  color: #b03a2e;
  text-transform: uppercase;
  margin-bottom: 4px;
}
.milestone-banner .ms-banner-body {
  font-size: 18px;
  font-weight: 900;
  letter-spacing: 0.4px;
  line-height: 1.2;
  color: #4a1d04;
}
.milestone-banner .ms-banner-body b {
  font-weight: 900;
  color: #6b3f10;
}
.milestone-banner .ms-banner-sub {
  margin-top: 4px;
  font-size: 11px;
  font-weight: 700;
  color: rgba(74, 29, 4, 0.78);
}
@keyframes msBannerIn {
  0%   { transform: translate(-50%, -50%) scale(0.55); opacity: 0; }
  55%  { transform: translate(-50%, -50%) scale(1.08); opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(1);    opacity: 1; }
}
@keyframes msBannerOut {
  0%   { transform: translate(-50%, -50%) scale(1);    opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(0.85); opacity: 0; }
}

/* Sparkle burst behind the banner — radial scatter from center. */
.milestone-sparkle-layer {
  position: fixed;
  left: 50%;
  top: 22%;
  width: 0;
  height: 0;
  z-index: 199;
  pointer-events: none;
}
.milestone-sparkle {
  position: absolute;
  left: 0; top: 0;
  font-size: 22px;
  transform: translate(0, 0) scale(0);
  animation: msSparkle 1.1s ease-out forwards;
  will-change: transform, opacity;
  filter: drop-shadow(0 0 8px rgba(255, 220, 100, 0.9));
}
@keyframes msSparkle {
  0%   { transform: translate(0, 0) scale(0);                    opacity: 0; }
  25%  { transform: translate(calc(var(--mx) * 0.4), calc(var(--my) * 0.4)) scale(1.2); opacity: 1; }
  100% { transform: translate(var(--mx), var(--my)) scale(0.4);  opacity: 0; }
}

/* Quick gold flash on the producer row that just hit milestone. */
.producer.milestone-flash {
  animation: producerMilestoneFlash 1.2s ease-out;
}
@keyframes producerMilestoneFlash {
  0%   { box-shadow: var(--sh-card-up); }
  20%  { box-shadow: var(--sh-card-up), 0 0 0 4px rgba(255, 209, 102, 0.85), 0 0 32px rgba(255, 167, 22, 0.7); }
  100% { box-shadow: var(--sh-card-up); }
}

/* Make the rate per-second slightly larger in producer rows */
.producer .prod-rate {
  font-size: 12.5px;
  font-weight: 800;
}

/* --- Issue 5: Population SVG chip icon sizing --- */
.res-icon-svg {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-soft);
}
.res-chip[data-id="population"] .res-icon-svg {
  color: var(--era-color, #f4a261);
}

/* Pop icon in producer meta line */
.prod-meta-line .pop-icon-svg,
.prod-meta-line svg {
  display: inline-block;
  vertical-align: middle;
  color: var(--text-soft);
  flex-shrink: 0;
}



/* ============================================================
   Section 19 — visibility fixes (rank teaser, locked-era rank
   badge, roadmap modal). Appended 2026-05.
   ============================================================ */
.era-chip .era-rank-req {
  display: inline-flex; align-items: center;
  font-size: 10.5px; font-weight: 800;
  padding: 2px 6px; margin-left: 4px;
  border-radius: 999px;
  background: rgba(255, 159, 80, 0.18);
  color: #c9711b;
  border: 1px solid rgba(201, 113, 27, 0.28);
}
.era-chip.locked.compact .era-name { display: none; }
.era-chip.locked .era-lock { opacity: 0.75; }

.rank-up-teaser {
  margin-top: 6px;
  font-size: 12px;
  color: var(--text-soft, #8b7a5a);
  line-height: 1.45;
  text-align: center;
}
.rank-up-teaser .teaser-rank {
  color: var(--era-color-d, #c9711b);
  font-weight: 800;
}
.rank-up-teaser .teaser-unlocks {
  margin-top: 3px;
  font-size: 11.5px;
  color: var(--good, #4ade80);
}
/* Phase 4 — next-rank tease line in the missions panel teaser. Italic,
   brand-tinted, sits below the locked-unlocks badges to add the
   "why this matters" voice without burying the unlock facts. */
.rank-up-teaser .teaser-tease {
  margin-top: 4px;
  font-size: 11.5px;
  font-style: italic;
  color: var(--brand-2, #ff5722);
  line-height: 1.4;
}

.roadmap-intro {
  font-size: 12.5px;
  color: var(--text-soft, #8b7a5a);
  margin-bottom: 10px;
  line-height: 1.55;
}
.roadmap-list {
  max-height: 60vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.roadmap-row {
  display: grid;
  grid-template-columns: 48px 1fr;
  grid-template-rows: auto auto;
  align-items: center;
  padding: 8px 10px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.05);
  font-size: 13px;
}
.roadmap-row.past    { opacity: 0.55; }
.roadmap-row.current {
  background: rgba(255, 159, 80, 0.16);
  border-color: rgba(255, 159, 80, 0.4);
  box-shadow: 0 0 0 2px rgba(255, 159, 80, 0.12);
}
.roadmap-row.future { opacity: 1; }
.roadmap-rank {
  grid-row: 1 / span 2;
  font-weight: 800;
  color: var(--era-color-d, #c9711b);
  font-size: 14px;
}
.roadmap-name {
  font-weight: 700;
  color: var(--text, #e8e2d0);
}
.roadmap-unlocks {
  grid-column: 2;
  font-size: 11.5px;
  color: var(--good, #4ade80);
  margin-top: 2px;
}

/* ============================================================
   Firebase Auth Modal — auth_modal.js
   ============================================================ */

/* Tab bar */
.auth-tabs {
  display: flex;
  gap: 2px;
  margin-bottom: 14px;
  background: var(--bg-shaded);
  border-radius: var(--radius);
  padding: 3px;
}
.auth-tab {
  flex: 1;
  padding: 8px 4px;
  border: none;
  background: transparent;
  border-radius: calc(var(--radius) - 2px);
  font-size: 12px;
  font-weight: 800;
  color: var(--text-dim);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.auth-tab.active {
  background: var(--bg-card);
  color: var(--text);
  box-shadow: 0 1px 3px rgba(0,0,0,0.12);
}

/* Form */
.auth-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.auth-field { display: flex; flex-direction: column; }
.auth-input {
  width: 100%;
  padding: 12px 14px;
  border: 1.5px solid rgba(0,0,0,0.12);
  border-radius: var(--radius);
  background: var(--bg-card);
  font-size: 14px;
  color: var(--text);
  outline: none;
  transition: border-color 0.15s;
}
.auth-input:focus { border-color: var(--brand); }
.auth-btn {
  width: 100%;
  padding: 13px;
  font-size: 14px;
  font-weight: 900;
  letter-spacing: 0.3px;
  margin-top: 2px;
}

/* Error / success notices */
.auth-error {
  background: rgba(231,76,60,0.1);
  border: 1px solid rgba(231,76,60,0.3);
  border-radius: var(--radius);
  color: var(--bad);
  font-size: 13px;
  font-weight: 700;
  padding: 10px 14px;
  margin-bottom: 8px;
  animation: fadeIn 0.2s;
}
.auth-success {
  background: rgba(46,204,113,0.1);
  border: 1px solid rgba(46,204,113,0.3);
  border-radius: var(--radius);
  color: var(--good-dark);
  font-size: 13px;
  font-weight: 700;
  padding: 14px;
  text-align: center;
  line-height: 1.5;
}

/* Not-configured notice */
.auth-unconfigured {
  background: rgba(243,156,18,0.1);
  border: 1.5px solid rgba(243,156,18,0.3);
  border-radius: var(--radius);
  color: var(--warn);
  font-size: 12.5px;
  font-weight: 700;
  padding: 16px;
  line-height: 1.55;
}

/* Logged-in profile view */
.auth-profile {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.auth-avatar-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: var(--bg-shaded);
  border-radius: var(--radius);
}
.auth-avatar {
  font-size: 32px;
  flex-shrink: 0;
}
.auth-email {
  font-size: 14px;
  font-weight: 800;
  color: var(--text);
  word-break: break-all;
}
.auth-verified {
  color: var(--good-dark);
  font-size: 13px;
}
.auth-unverified {
  color: var(--warn);
  font-size: 12px;
}
.auth-sync-line {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-dim);
  text-align: center;
  padding: 4px 0;
}

/* E-posta doğrulama bekleme paneli — emailVerified=false iken görünür.
   Bulut yazımlarının neden engellendiğini açıklar ve kullanıcıya
   "Doğrulamayı Kontrol Et" + "Yeniden Gönder" butonlarına yönlendirir. */
.auth-verify-gate {
  padding: 12px 14px;
  border-radius: var(--radius);
  background: linear-gradient(135deg,
              rgba(255, 184, 77, 0.18),
              rgba(255, 138, 0, 0.10));
  border: 1px solid rgba(255, 138, 0, 0.45);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.auth-verify-title {
  font-size: 13px;
  font-weight: 900;
  color: var(--warn);
  letter-spacing: 0.2px;
}
.auth-verify-body {
  font-size: 12px;
  font-weight: 600;
  line-height: 1.45;
  color: var(--text);
  opacity: 0.92;
}
/* Sync butonu doğrulanmamış kullanıcı için disable ediliyor — kullanıcıya
   neden tıklayamadığını göstermek için soluk + not-allowed cursor verelim. */
.auth-btn:disabled,
.auth-btn[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
  filter: grayscale(35%);
}

/* Conflict resolution modal */
.modal[data-kind="confirm_conflict"] .modal-header {
  background: linear-gradient(135deg, #c0392b, #922b21);
  border-bottom: 0;
}
.modal[data-kind="confirm_conflict"] .modal-title {
  color: var(--text-inv);
}
.conflict-label {
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-top: 10px;
  margin-bottom: 2px;
}
.conflict-label:first-child { margin-top: 0; }
.conflict-summary {
  background: var(--bg-shaded);
  border-radius: var(--radius);
  padding: 10px 14px;
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  border-left: 3px solid var(--text-dim);
}
.conflict-summary.local { border-left-color: var(--info); }
.conflict-summary.cloud { border-left-color: var(--brand); }
.conflict-question {
  margin-top: 14px;
  font-size: 13px;
  font-weight: 800;
  color: var(--text);
  text-align: center;
}
.conflict-footer {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.conflict-footer .btn {
  flex: 1;
  min-width: 80px;
  font-size: 12px;
  padding: 10px 6px;
}
.btn.good {
  background: var(--good);
  color: #fff;
}
.btn.good:hover { background: var(--good-dark); }