/*
 * ROTA30(TM) global visual system v1.0
 * Loaded after groups-premium.css and game.css so Premium, Packs and Game
 * share the same palette, typography, borders, spacing and theme behavior.
 */
:root {
  --r30-bg: #f4f7fb;
  --r30-bg-2: #eef4ff;
  --r30-surface: #ffffff;
  --r30-surface-2: #f8fafc;
  --r30-surface-3: #eef2f7;
  --r30-text: #0f172a;
  --r30-text-soft: #475569;
  --r30-muted: #66778d;
  --r30-line: #dce6f0;
  --r30-line-strong: #c4d1df;
  --r30-blue: #4f7cff;
  --r30-blue-strong: #315ee8;
  --r30-purple: #8b5cf6;
  --r30-cyan: #22b8d6;
  --r30-pink: #ec4899;
  --r30-green: #10a975;
  --r30-gold: #d9910b;
  --r30-red: #dc3d58;
  --r30-shadow: 0 20px 55px rgba(38, 63, 101, .12);
  --r30-shadow-soft: 0 10px 28px rgba(38, 63, 101, .08);

  /* Premium aliases */
  --pg-bg: var(--r30-bg);
  --pg-surface: var(--r30-surface);
  --pg-surface-2: var(--r30-surface-2);
  --pg-surface-3: var(--r30-surface-3);
  --pg-border: var(--r30-line);
  --pg-border-strong: var(--r30-line-strong);
  --pg-text: var(--r30-text);
  --pg-text-soft: var(--r30-text-soft);
  --pg-muted: var(--r30-muted);
  --pg-primary: var(--r30-blue);
  --pg-primary-strong: var(--r30-blue-strong);
  --pg-primary-soft: rgba(79, 124, 255, .11);
  --pg-success: var(--r30-green);
  --pg-warning: var(--r30-gold);
  --pg-danger: var(--r30-red);
  --pg-purple: var(--r30-purple);
  --pg-shadow: var(--r30-shadow);
  --pg-shadow-soft: var(--r30-shadow-soft);

  /* Game aliases */
  --r-bg: var(--r30-bg);
  --r-bg-2: var(--r30-bg-2);
  --r-surface: var(--r30-surface);
  --r-surface-2: var(--r30-surface-2);
  --r-card: rgba(255, 255, 255, .96);
  --r-text: var(--r30-text);
  --r-muted: var(--r30-muted);
  --r-line: var(--r30-line);
  --r-primary: var(--r30-purple);
  --r-primary-2: var(--r30-blue);
  --r-cyan: var(--r30-cyan);
  --r-green: var(--r30-green);
  --r-yellow: var(--r30-gold);
  --r-red: var(--r30-red);
  --r-orange: #f47c43;
  --r-shadow: var(--r30-shadow);

  --g2-purple: var(--r30-purple);
  --g2-blue: var(--r30-blue);
  --g2-cyan: var(--r30-cyan);
  --g2-pink: var(--r30-pink);
  --g2-green: var(--r30-green);
  --g2-yellow: var(--r30-gold);
  --g2-card: var(--r30-surface);
  --g2-line: var(--r30-line);
}

html[data-theme="dark"] {
  --r30-bg: #070d1d;
  --r30-bg-2: #0b1428;
  --r30-surface: #111a2d;
  --r30-surface-2: #172238;
  --r30-surface-3: #202d45;
  --r30-text: #f7f9ff;
  --r30-text-soft: #c8d3e5;
  --r30-muted: #93a5bd;
  --r30-line: rgba(151, 176, 214, .18);
  --r30-line-strong: rgba(151, 176, 214, .30);
  --r30-blue: #78a5ff;
  --r30-blue-strong: #a8c4ff;
  --r30-purple: #a987ff;
  --r30-cyan: #47d8ee;
  --r30-pink: #ff72ae;
  --r30-green: #43d99a;
  --r30-gold: #ffc857;
  --r30-red: #ff7188;
  --r30-shadow: 0 24px 70px rgba(0, 0, 0, .34);
  --r30-shadow-soft: 0 12px 34px rgba(0, 0, 0, .24);
  --pg-primary-soft: rgba(120, 165, 255, .14);
  --r-card: rgba(17, 26, 45, .94);
  color-scheme: dark;
}

body { font-size: 15px; }
.pg-brand-copy strong,
.rota-brand-copy strong { font-size: 17px; font-weight: 900; }
.pg-brand-copy small,
.rota-brand-copy small { font-size: 10px; }
.pg-topbar-nav a,
.rota-nav a { font-size: 13px; font-weight: 800; }
.pg-button,
.rota-primary-btn,
.rota-secondary-btn { font-size: 13px; }

/* Shared page texture */
.pg-packs-page,
.rota-bg {
  background-image:
    radial-gradient(circle at 8% 0%, color-mix(in srgb, var(--r30-blue) 13%, transparent), transparent 32%),
    radial-gradient(circle at 96% 16%, color-mix(in srgb, var(--r30-purple) 10%, transparent), transparent 34%),
    linear-gradient(color-mix(in srgb, var(--r30-blue) 4%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--r30-blue) 4%, transparent) 1px, transparent 1px);
  background-color: var(--r30-bg);
  background-size: auto, auto, 42px 42px, 42px 42px;
}

/* Premium packs as game stages */
.pg-packs-container { width: min(1280px, 100%); }
.pg-packs-hero {
  position: relative;
  min-height: 225px;
  align-items: center;
  padding: clamp(24px, 4vw, 44px);
  border: 1px solid rgba(124, 151, 255, .28);
  border-radius: 28px;
  color: #fff;
  background:
    radial-gradient(circle at 12% 0%, rgba(79, 124, 255, .42), transparent 38%),
    radial-gradient(circle at 85% 100%, rgba(139, 92, 246, .36), transparent 40%),
    #070d29;
  box-shadow: 0 26px 70px rgba(7, 13, 41, .22);
  overflow: hidden;
}
.pg-packs-hero::after {
  content: "";
  position: absolute;
  right: -70px;
  top: -100px;
  width: 300px;
  height: 300px;
  border: 48px solid rgba(255,255,255,.035);
  border-radius: 50%;
  pointer-events: none;
}
.pg-packs-hero > * { position: relative; z-index: 1; }
.pg-packs-hero .pg-eyebrow { color: #8eeeff; font-size: 12px; }
.pg-packs-hero h1 { max-width: 620px; font-size: clamp(38px, 5vw, 62px); }
.pg-packs-hero p { max-width: 610px; color: #cbd5f8; font-size: 16px; line-height: 1.55; }
.pg-packs-summary { justify-content: flex-end; max-width: 560px; }
.pg-packs-summary span {
  min-width: 126px;
  border-color: rgba(255,255,255,.16);
  color: #b8c6ea;
  background: rgba(255,255,255,.075);
  box-shadow: none;
  backdrop-filter: blur(12px);
  font-size: 11px;
}
.pg-packs-summary strong { color: #fff; font-size: 21px; }
.pg-packs-filter { margin-top: 18px; padding: 15px; border-radius: 18px; box-shadow: var(--r30-shadow-soft); }
.pg-pack-status-head { padding: 17px 19px; border-radius: 18px; }
.pg-pack-status-head h2 { font-size: 20px; }
.pg-pack-status-head p { font-size: 13px; }
.pg-pack-market-grid { gap: 18px; }

.pg-pack-market-card {
  --stage-a: var(--r30-blue);
  --stage-b: var(--r30-purple);
  min-height: 430px;
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--stage-a) 34%, var(--r30-line));
  border-radius: 24px;
  background: linear-gradient(155deg, color-mix(in srgb, var(--stage-a) 8%, var(--r30-surface)), var(--r30-surface) 46%);
  transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease;
}
.pg-pack-market-card::before { display: none; }
.pg-pack-market-card:hover { transform: translateY(-6px); border-color: var(--stage-a); box-shadow: var(--r30-shadow); }
.pg-pack-market-card.is-tone-2 { --stage-a: var(--r30-purple); --stage-b: var(--r30-pink); }
.pg-pack-market-card.is-tone-3 { --stage-a: var(--r30-cyan); --stage-b: var(--r30-green); }
.pg-pack-market-card.is-tone-4 { --stage-a: var(--r30-gold); --stage-b: #f47c43; }
.pg-pack-market-card.is-locked { filter: saturate(.78); }
.pg-pack-stage-cover {
  position: relative;
  min-height: 145px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  padding: 22px;
  color: #fff;
  background:
    radial-gradient(circle at 88% 15%, rgba(255,255,255,.23), transparent 32%),
    linear-gradient(135deg, var(--stage-a), var(--stage-b));
  overflow: hidden;
}
.pg-pack-stage-cover::after {
  content: "";
  position: absolute;
  right: -45px;
  bottom: -78px;
  width: 190px;
  height: 190px;
  border: 28px solid rgba(255,255,255,.10);
  border-radius: 50%;
}
.pg-pack-stage-number { position: relative; z-index: 1; }
.pg-pack-stage-number small,
.pg-pack-stage-number strong { display: block; }
.pg-pack-stage-number small { font-size: 10px; font-weight: 950; letter-spacing: .13em; }
.pg-pack-stage-number strong { margin-top: 4px; font-size: 43px; line-height: 1; letter-spacing: -.06em; }
.pg-pack-stage-icon {
  position: relative;
  z-index: 1;
  width: 62px;
  height: 62px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255,255,255,.25);
  border-radius: 20px;
  background: rgba(7,13,41,.25);
  font-size: 25px;
  box-shadow: 0 12px 28px rgba(7,13,41,.20);
}
.pg-pack-stage-status {
  position: absolute;
  left: 22px;
  bottom: 17px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 10px;
  font-weight: 950;
  letter-spacing: .08em;
}
.pg-pack-stage-body { display: flex; flex: 1; flex-direction: column; padding: 21px; }
.pg-pack-market-location { color: var(--stage-a); font-size: 11px; text-transform: uppercase; letter-spacing: .06em; }
.pg-pack-market-head h2 { margin-top: 7px; font-size: 23px; letter-spacing: -.035em; }
.pg-pack-market-description { min-height: 66px; margin: 12px 0 16px; color: var(--r30-text-soft); font-size: 14px; line-height: 1.55; }
.pg-pack-market-metrics div { padding: 11px; }
.pg-pack-market-metrics span { font-size: 10px; }
.pg-pack-market-metrics strong { font-size: 17px; }
.pg-pack-market-footer { padding-top: 15px; }
.pg-pack-price { font-size: 11px; }
.pg-pack-price strong { font-size: 18px; }
.pg-pack-market-footer .pg-button { min-height: 45px; border-radius: 13px; }

/* Game refinements after the shared variables */
.rota-main { width: min(1280px, calc(100% - 38px)); }
.rota-topbar { height: 74px; }
.g2-player-shell,
.g2-stat,
.g2-level-track,
.g2-referral-section,
.g2-game-card,
.g2-achievement-strip { box-shadow: var(--r30-shadow-soft); }
.g2-game-card { transition: transform .26s ease, border-color .26s ease, box-shadow .26s ease; }
.g2-game-card:hover { transform: translateY(-5px); box-shadow: var(--r30-shadow); }
.g2-game-card.is-selected {
  border-color: var(--r30-gold);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--r30-gold) 13%, transparent), var(--r30-shadow);
  animation: r30-stage-ready 1.8s ease-in-out 2;
}
.g2-pack-arrival {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 16px;
  padding: 14px 16px;
  border: 1px solid color-mix(in srgb, var(--r30-gold) 38%, var(--r30-line));
  border-radius: 16px;
  background: color-mix(in srgb, var(--r30-gold) 9%, var(--r30-surface));
}
.g2-pack-arrival i { color: var(--r30-gold); font-size: 20px; }
.g2-pack-arrival strong { display: block; font-size: 14px; }
.g2-pack-arrival span { display: block; margin-top: 2px; color: var(--r30-muted); font-size: 12px; }

/* Conta e Perfis — tipografia alinhada ao padrão global do Game */
.pg-panel-heading > div > span { font-size: 11px; }
.pg-panel-heading h2 { font-size: 21px; }
.pg-status-pill,
.pg-active-ribbon { font-size: 10px; }
.pg-account-identity p { font-size: 14px; }
.pg-account-mini-stats span { font-size: 11px; }
.pg-account-mini-stats strong { font-size: 14px; }
.pg-premium-form label { font-size: 13px; }
.pg-premium-form input,
.pg-premium-form select,
.pg-premium-form textarea { font-size: 14px; }
.pg-premium-form small,
.pg-premium-form label em { font-size: 11px; }
.pg-form-section h3 { font-size: 16px; }
.pg-advanced-settings summary { font-size: 13px; }
.pg-password-rules { font-size: 11px; line-height: 1.45; }
.pg-account-help h3 { font-size: 17px; }
.pg-account-help p { font-size: 13px; }
.pg-profile-summary span { font-size: 11px; }
.pg-profile-summary strong { font-size: 22px; }
.pg-profile-intro h2 { font-size: 18px; }
.pg-profile-intro p { font-size: 14px; }
.pg-profile-card-body > span { font-size: 10px; }
.pg-profile-card-body h2 { font-size: 20px; }
.pg-profile-card-body > a { font-size: 13px; }
.pg-profile-card-body p { font-size: 14px; line-height: 1.55; }
.pg-profile-form-hero h3 { font-size: 17px; }
.pg-profile-form-hero p { font-size: 12px; }
.pg-danger-form > p,
.pg-profile-form > p { font-size: 13px; }
.pg-profile-switch-preview small { font-size: 10px; }
.pg-profile-switch-preview strong { font-size: 14px; }

@keyframes r30-stage-ready {
  50% { transform: translateY(-4px); box-shadow: 0 0 0 8px color-mix(in srgb, var(--r30-gold) 8%, transparent), var(--r30-shadow); }
}

@media (max-width: 900px) {
  .pg-packs-hero { align-items: flex-start; flex-direction: column; }
  .pg-packs-summary { justify-content: flex-start; max-width: none; }
}
@media (max-width: 680px) {
  .pg-packs-page { padding-inline: 10px; }
  .pg-packs-hero { min-height: 0; padding: 25px 21px; border-radius: 23px; }
  .pg-packs-hero h1 { font-size: 39px; }
  .pg-packs-hero p { font-size: 14px; }
  .pg-packs-summary span { min-width: calc(50% - 5px); flex: 1 1 calc(50% - 5px); }
  .pg-pack-market-card { min-height: 0; }
  .pg-pack-market-description { min-height: 0; }
  .rota-main { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .pg-pack-market-card,
  .g2-game-card,
  .g2-game-card.is-selected { animation: none !important; transition: none !important; }
}

/* =========================================================
   ROTA30 v1.2 — cabeçalho superior + navegação inferior
   Mantém o Premium com a mesma arquitetura visual do Game.
   O nav e irmao do header para nao herdar o containing block criado pelo
   backdrop-filter no Safari/iOS.
   ========================================================= */
@media (max-width: 900px), (hover: none) and (pointer: coarse) {
  .pg-topbar {
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    left: 0 !important;
    z-index: 70 !important;
    min-height: var(--pg-topbar-height);
    padding:
      env(safe-area-inset-top, 0px)
      max(12px, env(safe-area-inset-right, 0px))
      0
      max(12px, env(safe-area-inset-left, 0px)) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    border-bottom: 1px solid var(--pg-border);
    background: color-mix(in srgb, var(--pg-surface) 94%, transparent) !important;
    box-shadow: 0 10px 30px rgba(7, 13, 29, .10);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
  }

  .pg-topbar-left {
    flex: 0 1 auto;
    min-width: 0;
  }

  .pg-topbar .pg-brand {
    min-width: 0;
    margin: 0;
  }

  /* No celular, a marca compacta replica o ícone usado no Game. */
  .pg-topbar .pg-brand-copy {
    display: none !important;
  }

  .pg-topbar .pg-brand-mark {
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    border-radius: 14px;
  }

  .pg-topbar .pg-topbar-actions {
    min-width: 0;
    margin-left: auto;
    display: flex !important;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
  }

  .pg-topbar .pg-topbar-actions .pg-icon-button {
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
  }

  /* A navegação principal e independente do header e flutua no rodapé. */
  .pg-topbar-nav.pg-experience-nav {
    position: fixed !important;
    top: auto !important;
    left: max(8px, env(safe-area-inset-left, 0px)) !important;
    right: max(8px, env(safe-area-inset-right, 0px)) !important;
    bottom: max(8px, env(safe-area-inset-bottom, 0px)) !important;
    z-index: 90 !important;
    width: auto !important;
    min-width: 0 !important;
    height: 64px !important;
    min-height: 64px !important;
    margin: 0 !important;
    padding: 6px 4px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-around !important;
    gap: 1px !important;
    overflow: hidden;
    transform: none !important;
    border: 1px solid var(--pg-border) !important;
    border-radius: 19px !important;
    background: color-mix(in srgb, var(--pg-surface) 96%, transparent) !important;
    box-shadow: 0 18px 50px rgba(0, 0, 0, .30) !important;
    backdrop-filter: blur(18px) !important;
    -webkit-backdrop-filter: blur(18px) !important;
  }

  .pg-topbar-nav.pg-experience-nav a {
    flex: 1 1 0 !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 50px !important;
    min-height: 50px !important;
    margin: 0 !important;
    padding: 5px 1px !important;
    display: inline-flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 3px !important;
    border-radius: 13px !important;
    font-size: 7px !important;
    line-height: 1 !important;
    white-space: nowrap;
  }

  .pg-topbar-nav.pg-experience-nav a i {
    font-size: 15px !important;
  }

  .pg-topbar-nav.pg-experience-nav a span {
    display: block !important;
    font-size: 7px !important;
    line-height: 1 !important;
  }

  /* Reserva espaço para o menu não cobrir o final de nenhuma página. */
  .r30-home,
  .pg-packs-page,
  .pg-standalone-main,
  .pg-main {
    padding-bottom: calc(112px + env(safe-area-inset-bottom, 0px)) !important;
  }
}

@media (max-width: 390px) {
  .pg-topbar .pg-topbar-actions {
    gap: 4px;
  }

  .pg-topbar .pg-topbar-actions .pg-icon-button {
    width: 38px;
    height: 38px;
    flex-basis: 38px;
  }

  .pg-topbar-nav.pg-experience-nav a i {
    font-size: 14px !important;
  }

  .pg-topbar-nav.pg-experience-nav a span {
    font-size: 6.4px !important;
  }
}