/* =========================================================================
   ARCADE SOLAR THEME - reskin visual local no estilo neo-arcade editorial.
   Carrega por cima de gg-app.css/estilos inline. Nao altera gg-app.js
   nem a estrutura HTML - so aparencia.
   ========================================================================= */
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=DM+Sans:wght@400;500;600;700;800&display=swap');

:root{
  --bg:#0b1018;
  --card:#151e2b;
  --line:rgba(232,240,249,.14);
  --gold:#ffc83d;
  --gold2:#ffd765;
  --text:#edf2f5;
  --muted:#8b98a8;
  --green:#E6C35C;
  --red:#ff7067;
  --blue:#E6C35C;
  --violet:#a59cff;
  --gg-gold-border: rgba(255,200,61,.32);
  --gg-gold-bg: rgba(255,200,61,.055);
  --gg-gold-shadow: 0 10px 26px rgba(255,200,61,.08);
}

/* ---------- base / arena background ---------- */
body{
  background:
    radial-gradient(circle at 82% -4%, rgba(99,217,222,.10), transparent 32rem),
    radial-gradient(circle at 50% -20%, #263451 0, #0b1120 38%, var(--bg) 70%);
  font-family:'DM Sans',Inter,system-ui,Arial,sans-serif;
  position:relative;
}
body::before{
  content:"";
  position:fixed; inset:0; pointer-events:none; z-index:0;
  opacity:.05;
  background-image:
    linear-gradient(rgba(255,255,255,.09) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.09) 1px,transparent 1px);
  background-size:46px 46px;
  mask-image:linear-gradient(135deg,black,transparent 75%);
}
.shell{ position:relative; z-index:1; }

h1,h2,h3,.hero h1,.newGameTitle,.classicDetailTop h2,.pScore,.timer,.navalTurn,
.round-display strong,.classicHead .big,.result h2,.big{
  font-family:'Space Grotesk',sans-serif;
  letter-spacing:.02em;
}

/* ---------- top brand bar ---------- */
.top{ padding-bottom:12px; border-bottom:1px solid var(--line); margin-bottom:16px; }
.brand{ gap:12px; }
.logo{
  border-radius:0; width:38px; height:38px;
  background:transparent!important;
  box-shadow:none; position:relative;
  display:grid; place-items:center;
}
.logo img{ width:100%; height:100%; object-fit:contain; position:relative; z-index:1; }
.brand b{
  font-family:'Space Grotesk',sans-serif; letter-spacing:.06em; font-size:19px;
  color:var(--text)!important;
}
.brand small{
  color:var(--gold)!important; font:700 9px/1.2 'DM Sans',sans-serif;
  letter-spacing:.15em; text-transform:uppercase;
}
.topBalances{ gap:8px; }
.balancePill{
  border-radius:4px; border-color:var(--line);
  background:linear-gradient(145deg,rgba(20,23,28,.85),rgba(8,10,13,.9));
  clip-path:polygon(0 0,calc(100% - 8px) 0,100% 8px,100% 100%,0 100%);
}
.balancePill small{ letter-spacing:.1em; }

/* ---------- buttons ---------- */
.cta{
  border-radius:2px; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
  font-size:.72rem; position:relative; overflow:hidden;
  transition:transform .16s cubic-bezier(.23,1,.32,1), background .16s, filter .16s;
}
.cta::before{
  content:""; position:absolute; top:0; bottom:0; left:60%; width:16px;
  background:rgba(255,255,255,.18); transform:skewX(-18deg); pointer-events:none;
}
.cta.gold{ background:linear-gradient(135deg,var(--gold2),#eaa91f); color:#0b1018; }
.cta.gold:hover{ filter:brightness(1.08); transform:translateY(-2px); }
.cta.ghost{ border:1px solid var(--line); background:#14171C; letter-spacing:.08em; }
.cta.redbtn{ border:1px solid rgba(255,112,103,.4); background:#351c27; color:#ffc8c3; }
.cta:active{ transform:translateY(0) scale(.98); }

/* ---------- hero blocks ---------- */
.hero,.navalHero,.penaltyHero,.starHero,.colorHero,.payHero,.classicDetailHero{
  border-radius:6px; border-color:var(--line);
  background:linear-gradient(145deg,rgba(20,23,28,.92),rgba(8,10,13,.94));
  clip-path:polygon(0 0,calc(100% - 22px) 0,100% 22px,100% 100%,0 100%);
}
.tag{ color:var(--gold)!important; font-weight:800!important; letter-spacing:.14em!important; }
.ggHeroEyebrow{ color:var(--gold); font-weight:800; letter-spacing:.14em; }
.hero h1,.hero h2,.ggHero h2{ font-size:1.9rem; letter-spacing:.02em; }
.hero p,.ggHero p{ color:var(--muted); }

/* ---------- cards / mode cards ---------- */
.card,.modeCard,.newGameCard,.classicRoom{
  border-radius:4px;
  border:1px solid rgba(193,205,215,.16);
  background:linear-gradient(145deg,rgba(20,23,28,.92),rgba(8,10,13,.94))!important;
  box-shadow:none!important;
  clip-path:polygon(0 0,calc(100% - 14px) 0,100% 14px,100% 100%,0 100%);
  position:relative;
  transition:transform .18s cubic-bezier(.23,1,.32,1), border-color .18s, background .18s;
}
.card::before,.modeCard::before,.newGameCard::before,.classicRoom::before{
  content:""; position:absolute; top:0; left:0; width:44px; height:3px; background:var(--gold);
}
.card:hover,.modeCard:hover,.newGameCard:hover,.classicRoom:hover{
  transform:translateY(-3px);
  border-color:rgba(255,200,61,.55);
}
.card h3,.newGameTitle,.classicRoom h3{ letter-spacing:.03em; }
.card p,.newGameDesc,.classicRoom p{ color:#98a5b5; }
.price{ color:var(--gold); }

.ggModeChip,.newGameMeta span,.card-meta span{
  border-radius:2px; border:1px solid rgba(255,200,61,.32); color:var(--gold);
  font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  background:transparent;
}
.ggModeChip:not(.gold){ color:#aeb9c4; border-color:var(--line); }

.newGamesHead b{ font-family:'Space Grotesk',sans-serif; font-size:18px; letter-spacing:.03em; }
.newGamesHead span{ letter-spacing:.1em; text-transform:uppercase; }

/* ---------- panels / auth / rank ---------- */
.panel,.auth,.admBonusBox,.freeValueBox,.walletTestBox,.navalPlacement,.classicNumbersBox{
  border-radius:6px; border-color:var(--line);
  background:linear-gradient(145deg,rgba(20,23,28,.92),rgba(8,10,13,.95));
}
.panel h2{ letter-spacing:.02em; }

.rankTab{ border-radius:2px; letter-spacing:.08em; text-transform:uppercase; font-weight:800; }
.rankTab.active{ border-color:var(--gold); color:var(--gold2); background:rgba(255,200,61,.09); }
.rankHero,.rankMeRow{ border-radius:6px; }
.rankMeRow{ box-shadow:none!important; }

.statusPill{ border-radius:2px; letter-spacing:.06em; text-transform:uppercase; font-weight:800; }

/* ---------- game grids / boards ---------- */
.grid .tile{
  border-radius:4px; border-color:rgba(245,245,243,.18); background:#14171C;
  transition:transform .12s, border-color .12s, box-shadow .12s;
}
.grid .tile:hover{ border-color:rgba(255,200,61,.6); transform:scale(.97); }
.grid .tile.ok{ box-shadow:0 0 14px rgba(54,211,153,.35); }
.grid .tile.bad{ box-shadow:0 0 14px rgba(255,112,103,.35); }

.navalBoard .sea{ border-radius:3px; transition:transform .12s, box-shadow .12s; }
.navalBoard .sea:hover{ transform:scale(.96); }
.navalBoard .sea.aimed{ box-shadow:0 0 0 2px rgba(255,200,61,.6) inset; }

.goal .goalZone{ border-radius:4px; transition:background .15s, transform .12s; }
.goalZone:hover{ transform:scale(.98); }

.classicNums .num,.classicNumsBig .num{ border-radius:4px; transition:transform .12s, border-color .12s; }
.classicNums .num:hover,.classicNumsBig .num:hover{ transform:scale(.96); }
.num.win{ box-shadow:0 0 16px rgba(255,200,61,.4); }

.colorTile{ border-radius:12px; }
#starCanvas{ border-radius:2px; }

/* ---------- stake / filter bars ---------- */
.ggStakeBtn,.modeFilterBtn{
  border-radius:2px; font-weight:800; letter-spacing:.06em; text-transform:uppercase;
}
.ggStakeBtn:hover,.modeFilterBtn:hover{ border-color:rgba(255,200,61,.5); }
.ggStakeBarLabel{ color:var(--gold); font-weight:800; letter-spacing:.12em; }

/* ---------- bottom nav ---------- */
.bottom{
  background:rgba(10,15,23,.94)!important;
  border-top:1px solid rgba(255,200,61,.22);
  backdrop-filter:blur(12px);
}
.nav{ letter-spacing:.08em; text-transform:uppercase; font-weight:700; transition:color .15s; }
.nav.active{ color:var(--gold2)!important; text-shadow:0 0 12px rgba(255,200,61,.35); }

/* ---------- misc accents ---------- */
.liveDot{ background:var(--green); box-shadow:0 0 10px var(--green); }
.bonusFill,.gg40-progress i,.gg43-progress i,.gg44-progress i,.gg50-progress i,
.gg51-progress i,.gg55-progress i,.gg56f-progress i,.gg56f2-progress i{
  background:linear-gradient(90deg,var(--gold),var(--gold2))!important;
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.001ms!important; transition-duration:.001ms!important; }
}