/* style.css */

/* ── ix-nav (public page navigation) ── */
.ix-nav { position: fixed; top: 0; left: 0; right: 0; z-index: 900; height: 60px; background: rgba(8,8,9,0.92); border-bottom: 1px solid rgba(255,255,255,0.06); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.ix-nav__inner { max-width: 1160px; margin: 0 auto; padding: 0 24px; height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.ix-nav__brand { display: flex; align-items: center; gap: 10px; text-decoration: none; flex-shrink: 0; }
.ix-nav__brand img { width: 36px; height: 36px; border-radius: 10px; overflow: hidden; flex: 0 0 auto; }
.ix-nav__brand-text { font-size: 15px; font-weight: 900; letter-spacing: 1px; text-transform: uppercase; color: var(--text); }
.ix-nav__brand-text span { color: var(--accent); }
.ix-nav__actions { display: flex; align-items: center; gap: 8px; }
.ix-btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: 4px; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.4px; text-decoration: none; cursor: pointer; border: none; transition: opacity 0.15s, background 0.15s; }
.ix-btn--primary { background: var(--accent); color: #111; }
.ix-btn--primary:hover { opacity: 0.88; }
.ix-btn--ghost { background: rgba(255,255,255,0.06); color: var(--text); }
.ix-btn--ghost:hover { background: rgba(255,255,255,0.10); }

:root {
  /* Cores base — sidebars mais escuras que o conteúdo */
  --bg-chrome: #080809;       /* sidebars esquerda + direita */
  --bg0: #0f0f11;             /* body / content */
  --bg1: #131315;             /* areas levemente elevadas */
  --bg2: #181819;             /* hover states, cards */
  --text: #e9eaed;
  --muted: rgba(233, 234, 237, 0.65);
  --muted2: rgba(233, 234, 237, 0.42);
  --accent: #f2b600;
  --accent2: #c99b00;
  --shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
  --radius: 4px;
  --radius2: 6px;
  --max: 1440px;
  --sidebar-w: 220px;
  --right-panel-w: 90px;  /* painel direito estreito estilo FACEIT */
  --topbar-h: 0px;        /* topbar removida — direito panel substitui */

  /* Notification colors */
  --success: #22c55e;
  --success-bg: rgba(34, 197, 94, 0.1);
  --error: #ef4444;
  --error-bg: rgba(239, 68, 68, 0.1);
  --warning: #f59e0b;
  --warning-bg: rgba(245, 158, 11, 0.1);
  --info: #3b82f6;
  --info-bg: rgba(59, 130, 246, 0.1);
}

* { box-sizing: border-box; }
img { -webkit-user-drag: none; user-drag: none; }
html, body { height: 100%; }

/* ============================================================
   SISTEMA DE AVATARES CENTRALIZADO — render_avatar()
   Fonte da verdade: lib/avatar_frame_lib.php

   ARQUITETURA (v4 — ring element separado):
   - .av-wrap: wrapper base, SEM FrameCSS/animation.
   - .av-img-shell (z-index:1): filho, clipa a foto em círculo (overflow:hidden).
   - .av-frame--css (z-index:2): IRMÃO do shell — recebe FrameCSS + AnimationCSS.
     Por ser irmão (não pai), animações/transforms NÃO afetam a foto.
   - .av-frame img (z-index:3): overlay PNG (se ImageUrl existir).

   REGRAS DE OURO:
   1. Nunca force width/height em .av-wrap via CSS externo.
   2. Nunca use overflow:hidden em containers pai de .av-wrap--framed.
   3. Não adicionar border/background ao .av-img-shell — é só clipe.
   4. Não adicionar background:none a .av-frame--css — o gradient border-box
      aplicado pelo PHP precisa sobreviver sem override.
   ============================================================ */

/* Wrapper base */
.av-wrap {
  position: relative;
  display: block;
  flex-shrink: 0;
  box-sizing: border-box;
}

/* Com moldura: overflow:visible para box-shadow/outline não serem clipados.
   border:none garante que a borda padrão rgba(255,255,255,0.12) não apareça
   sobre a moldura — a moldura define sua própria borda via FrameCSS. */
.av-wrap--framed {
  overflow: visible !important;
  border: none !important;
}

/* Shell de clipe da foto: nunca recebe borda/sombra/fundo externos */
.av-img-shell {
  border: none !important;
  box-shadow: none !important;
  background: none !important;
}

/* Imagem do avatar: imune a regras globais img{max-width:100%} */
.av-img {
  max-width: none !important;
  max-height: none !important;
  min-width: 0 !important;
  min-height: 0 !important;
}

/* Overlay PNG de moldura e ring CSS: protege contra overrides de max-width */
/* IMPORTANTE: NÃO colocar background:none aqui — o .av-frame--css usa   */
/*             gradient border-box injetado via inline-style do PHP.       */
.av-frame {
  max-width: none !important;
  max-height: none !important;
  pointer-events: none !important;
}

/* ── Keyframes para molduras CSS animadas ─────────────────────────────────── */
@property --frame-angle { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
@property --frame-holo  { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
/* Unidade base de glow para keyframes — injetada pelo PHP como --av-glow: Npx
   (N = size/5). Assim as animações de box-shadow escalam com o avatar. */
@property --av-glow { syntax: '<length>'; initial-value: 8px; inherits: false; }

@keyframes framePulse {
  0%, 100% { box-shadow: 0 0 var(--av-glow) rgba(168,85,247,0.4); }
  50%      { box-shadow: 0 0 calc(var(--av-glow)*2.5) rgba(168,85,247,0.8), 0 0 calc(var(--av-glow)*3.75) rgba(168,85,247,0.3); }
}
@keyframes frameRotate {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
@keyframes frameFlicker {
  0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% { box-shadow: 0 0 var(--av-glow) #38bdf8, 0 0 calc(var(--av-glow)*2.25) rgba(56,189,248,0.5); opacity: 1; }
  20%, 24%, 55%                           { box-shadow: none; opacity: 0.7; }
}
@keyframes framePlasma {
  to { --frame-angle: 360deg; }
}
@keyframes frameFirePulse {
  0%, 100% { box-shadow: 0 0 calc(var(--av-glow)*1.25) #f97316, 0 0 calc(var(--av-glow)*2.75) rgba(249,115,22,0.4); }
  50%      { box-shadow: 0 0 calc(var(--av-glow)*2.25) #ef4444, 0 0 calc(var(--av-glow)*5) rgba(239,68,68,0.5), 0 0 calc(var(--av-glow)*7.5) rgba(249,115,22,0.2); }
}
@keyframes frameHolo {
  to { --frame-holo: 360deg; }
}
@keyframes frameLightning {
  0%, 100% { box-shadow: 0 0 calc(var(--av-glow)*0.75) #facc15, 0 0 calc(var(--av-glow)*2.5) rgba(250,204,21,0.4); opacity: 1; }
  10%, 30% { box-shadow: 0 0 calc(var(--av-glow)*0.25) #facc15; opacity: 0.5; }
  20%, 40% { box-shadow: 0 0 calc(var(--av-glow)*1.75) #facc15, 0 0 calc(var(--av-glow)*3.75) rgba(250,204,21,0.6); opacity: 1; }
}
/* ─────────────────────────────────────────────────────────────────────────── */

/* ═══════════════════════════════════════════════════════════════════
   VFB — @property declarations para animações de conic-gradient
   ═══════════════════════════════════════════════════════════════════ */
@property --frame-angle2  { syntax: '<angle>';  initial-value: 120deg; inherits: false; }
@property --fire-angle    { syntax: '<angle>';  initial-value: 0deg;   inherits: false; }
@property --fire-angle2   { syntax: '<angle>';  initial-value: 60deg;  inherits: false; }
@property --fire-angle3   { syntax: '<angle>';  initial-value: 120deg; inherits: false; }
@property --ice-angle     { syntax: '<angle>';  initial-value: 0deg;   inherits: false; }
@property --ice-angle2    { syntax: '<angle>';  initial-value: 180deg; inherits: false; }
@property --lightning-ang { syntax: '<angle>';  initial-value: 0deg;   inherits: false; }
@property --aurora-h      { syntax: '<number>'; initial-value: 160;    inherits: false; }
@property --toxic-angle   { syntax: '<angle>';  initial-value: 0deg;   inherits: false; }
@property --blood-angle   { syntax: '<angle>';  initial-value: 0deg;   inherits: false; }
@property --gold-angle    { syntax: '<angle>';  initial-value: 0deg;   inherits: false; }
@property --silver-angle  { syntax: '<angle>';  initial-value: 0deg;   inherits: false; }
@property --ruby-angle    { syntax: '<angle>';  initial-value: 0deg;   inherits: false; }
@property --copper-angle  { syntax: '<angle>';  initial-value: 0deg;   inherits: false; }
@property --amber-angle   { syntax: '<angle>';  initial-value: 0deg;   inherits: false; }
@property --sapphire-angle{ syntax: '<angle>';  initial-value: 0deg;   inherits: false; }
@property --cosmic-angle  { syntax: '<angle>';  initial-value: 0deg;   inherits: false; }
@property --coral-angle   { syntax: '<angle>';  initial-value: 0deg;   inherits: false; }
@property --neon-pink-ang { syntax: '<angle>';  initial-value: 0deg;   inherits: false; }
@property --shadow-angle  { syntax: '<angle>';  initial-value: 0deg;   inherits: false; }
@property --emerald-angle { syntax: '<angle>';  initial-value: 0deg;   inherits: false; }
@property --jade-angle    { syntax: '<angle>';  initial-value: 0deg;   inherits: false; }

/* ════════════════════════════════════════════════════════════════
   🔥 FOGO REAL v2
   ════════════════════════════════════════════════════════════════ */
@keyframes fireCone1 { to { --fire-angle: 360deg; } }
@keyframes fireCone2 { from { --fire-angle2: 60deg; } to { --fire-angle2: 420deg; } }
@keyframes fireCone3 { from { --fire-angle3: 120deg; } to { --fire-angle3: 480deg; } }
@keyframes fireShake {
  0%       { transform: scale(1)     rotate(0deg)    translateX(0); }
  6.25%    { transform: scale(1.006) rotate(.4deg)   translateX(.4px); }
  12.5%    { transform: scale(.997)  rotate(-.3deg)  translateX(-.3px); }
  18.75%   { transform: scale(1.009) rotate(.55deg)  translateX(.5px); }
  25%      { transform: scale(.994)  rotate(-.4deg)  translateX(-.4px); }
  31.25%   { transform: scale(1.007) rotate(.3deg)   translateX(.3px); }
  37.5%    { transform: scale(.998)  rotate(-.5deg)  translateX(-.5px); }
  43.75%   { transform: scale(1.011) rotate(.45deg)  translateX(.45px); }
  50%      { transform: scale(.995)  rotate(-.35deg) translateX(-.35px); }
  56.25%   { transform: scale(1.008) rotate(.5deg)   translateX(.5px); }
  62.5%    { transform: scale(.996)  rotate(-.2deg)  translateX(-.2px); }
  68.75%   { transform: scale(1.005) rotate(.35deg)  translateX(.35px); }
  75%      { transform: scale(.993)  rotate(-.45deg) translateX(-.45px); }
  81.25%   { transform: scale(1.01)  rotate(.4deg)   translateX(.4px); }
  87.5%    { transform: scale(.997)  rotate(-.3deg)  translateX(-.3px); }
  93.75%   { transform: scale(1.006) rotate(.25deg)  translateX(.25px); }
  100%     { transform: scale(1)     rotate(0deg)    translateX(0); }
}
@keyframes fireGlow {
  0%   { box-shadow: 0 0 4px 2px #f97316, 0 0 12px 4px rgba(239,68,68,.8),  0 0 28px 6px rgba(249,115,22,.45), 0 -4px 20px 4px rgba(251,191,36,.5); }
  10%  { box-shadow: 0 0 8px 3px #ef4444, 0 0 20px 7px rgba(220,38,38,.9),  0 0 40px 10px rgba(239,68,68,.55), 0 -6px 30px 6px rgba(249,115,22,.6); }
  22%  { box-shadow: 0 0 5px 2px #fb923c, 0 0 14px 4px rgba(249,115,22,.7), 0 0 24px 5px rgba(251,146,60,.4),  0 -3px 16px 3px rgba(253,230,138,.45); }
  35%  { box-shadow: 0 0 10px 4px #ef4444,0 0 28px 9px rgba(239,68,68,.95), 0 0 50px 14px rgba(249,115,22,.6), 0 -8px 38px 8px rgba(251,191,36,.7); }
  50%  { box-shadow: 0 0 6px 3px #f97316, 0 0 16px 5px rgba(249,115,22,.75),0 0 32px 8px rgba(239,68,68,.5),  0 -5px 24px 5px rgba(249,115,22,.55); }
  63%  { box-shadow: 0 0 12px 5px #fbbf24,0 0 32px 10px rgba(251,191,36,.85),0 0 58px 16px rgba(249,115,22,.65),0 -9px 44px 9px rgba(239,68,68,.75); }
  77%  { box-shadow: 0 0 7px 3px #f97316, 0 0 18px 5px rgba(249,115,22,.7), 0 0 35px 8px rgba(239,68,68,.45), 0 -4px 22px 4px rgba(251,146,60,.5); }
  88%  { box-shadow: 0 0 9px 4px #ef4444, 0 0 24px 8px rgba(220,38,38,.88), 0 0 46px 12px rgba(239,68,68,.58),0 -7px 34px 7px rgba(249,115,22,.65); }
  100% { box-shadow: 0 0 4px 2px #f97316, 0 0 12px 4px rgba(239,68,68,.8),  0 0 28px 6px rgba(249,115,22,.45), 0 -4px 20px 4px rgba(251,191,36,.5); }
}
.vfb-ring--fire {
  background:
    linear-gradient(#131315,#131315) padding-box,
    conic-gradient(from var(--fire-angle,0deg),
      #fbbf24 0%, #f97316 8%, #dc2626 18%, #7c2d12 28%,
      #dc2626 38%, #f97316 48%, #fbbf24 55%,
      #f97316 62%, #dc2626 72%, #7c2d12 80%,
      #f97316 90%, #fbbf24 100%) border-box !important;
  animation: fireCone1 var(--vfb-speed, 1.6s) linear infinite, fireShake 0.28s ease-in-out infinite, fireGlow 0.55s ease-in-out infinite !important;
}
.vfb-ring--fire-live {
  background:
    linear-gradient(#131315,#131315) padding-box,
    conic-gradient(from var(--fire-angle,0deg),
      #fbbf24 0%, #f97316 6%, #ef4444 14%, #7c2d12 22%,
      #ef4444 32%, #f97316 40%, #fbbf24 48%,
      #f97316 56%, #dc2626 64%, #7c2d12 74%,
      #f97316 84%, #fbbf24 94%, #fbbf24 100%) border-box !important;
  animation: fireCone1 var(--vfb-speed, 1.2s) linear infinite, fireCone2 calc(var(--vfb-speed, 1.2s) * 0.67) linear infinite reverse, fireShake 0.22s ease-in-out infinite, fireGlow 0.45s ease-in-out infinite !important;
}
.vfb-ring--fire-inferno {
  background:
    linear-gradient(#0d0000,#0d0000) padding-box,
    conic-gradient(from var(--fire-angle,0deg),
      #fbbf24 0%, #f97316 5%, #dc2626 12%, #450a0a 20%,
      #dc2626 28%, #ef4444 35%, #f97316 42%, #fde68a 48%,
      #f97316 54%, #dc2626 62%, #450a0a 70%,
      #ef4444 78%, #f97316 86%, #fbbf24 93%, #fbbf24 100%) border-box !important;
  animation: fireCone1 var(--vfb-speed, 0.9s) linear infinite, fireCone2 calc(var(--vfb-speed, 0.9s) * 0.6) linear infinite reverse, fireCone3 calc(var(--vfb-speed, 0.9s) * 1.4) linear infinite, fireShake 0.18s ease-in-out infinite, fireGlow 0.38s ease-in-out infinite !important;
}

/* ════════════════════════════════════════════════════════════════
   ❄️ GELO REAL v2
   ════════════════════════════════════════════════════════════════ */
@keyframes iceCone1 { to { --ice-angle: 360deg; } }
@keyframes iceCone2 { from { --ice-angle2: 180deg; } to { --ice-angle2: 540deg; } }
@keyframes iceBreath {
  0%,100% { transform: scale(1)     rotate(0deg); }
  20%     { transform: scale(1.008) rotate(.15deg); }
  40%     { transform: scale(.992)  rotate(-.12deg); }
  60%     { transform: scale(1.006) rotate(.1deg); }
  80%     { transform: scale(.995)  rotate(-.08deg); }
}
@keyframes iceCrystal {
  0%   { box-shadow: 0 0 8px #bae6fd,  0 0 20px rgba(186,230,253,.5),  0 0 40px rgba(56,189,248,.2);   opacity: 1; }
  8%   { box-shadow: 0 0 16px #e0f2fe, 0 0 40px rgba(224,242,254,.75), 0 0 80px rgba(186,230,253,.4);  opacity: 1; }
  15%  { box-shadow: 0 0 4px #93c5fd,  0 0 10px rgba(147,197,253,.3),  0 0 18px rgba(56,189,248,.12);  opacity: .55; }
  22%  { box-shadow: 0 0 20px #ffffff, 0 0 50px rgba(255,255,255,.6),  0 0 90px rgba(186,230,253,.45); opacity: 1; }
  35%  { box-shadow: 0 0 10px #bae6fd, 0 0 26px rgba(186,230,253,.5),  0 0 50px rgba(56,189,248,.25);  opacity: .85; }
  48%  { box-shadow: 0 0 3px #7dd3fc,  0 0 8px rgba(125,211,252,.25),  0 0 14px rgba(56,189,248,.1);   opacity: .4; }
  55%  { box-shadow: 0 0 18px #e0f2fe, 0 0 46px rgba(224,242,254,.7),  0 0 85px rgba(186,230,253,.38); opacity: 1; }
  68%  { box-shadow: 0 0 12px #bae6fd, 0 0 30px rgba(186,230,253,.55), 0 0 55px rgba(56,189,248,.28);  opacity: .9; }
  78%  { box-shadow: 0 0 5px #93c5fd,  0 0 12px rgba(147,197,253,.28), 0 0 22px rgba(56,189,248,.13);  opacity: .5; }
  88%  { box-shadow: 0 0 22px #ffffff, 0 0 55px rgba(255,255,255,.65), 0 0 100px rgba(186,230,253,.5); opacity: 1; }
  100% { box-shadow: 0 0 8px #bae6fd,  0 0 20px rgba(186,230,253,.5),  0 0 40px rgba(56,189,248,.2);   opacity: 1; }
}
.vfb-ring--ice-crystal {
  background:
    linear-gradient(#00080d,#00080d) padding-box,
    conic-gradient(from var(--ice-angle,0deg),
      #ffffff 0%, #bae6fd 8%, #7dd3fc 16%, #38bdf8 26%,
      #0ea5e9 34%, #0284c7 42%, #38bdf8 50%,
      #bae6fd 56%, #ffffff 62%, #7dd3fc 70%,
      #38bdf8 80%, #0ea5e9 90%, #ffffff 100%) border-box !important;
  animation: iceCone1 var(--vfb-speed, 3s) linear infinite, iceBreath 1.4s ease-in-out infinite, iceCrystal 1.8s ease-in-out infinite !important;
}
.vfb-ring--ice-blizzard {
  background:
    linear-gradient(#00050d,#00050d) padding-box,
    conic-gradient(from var(--ice-angle,0deg),
      #ffffff 0%, #e0f2fe 5%, #bae6fd 10%, #7dd3fc 18%,
      #0ea5e9 24%, #0369a1 30%, #075985 38%,
      #0ea5e9 44%, #38bdf8 50%, #bae6fd 56%,
      #ffffff 60%, #e0f2fe 65%, #7dd3fc 72%,
      #38bdf8 80%, #0ea5e9 88%, #ffffff 96%, #ffffff 100%) border-box !important;
  animation: iceCone1 var(--vfb-speed, 2.2s) linear infinite, iceCone2 calc(var(--vfb-speed, 2.2s) * 0.7) linear infinite reverse, iceBreath 1.1s ease-in-out infinite, iceCrystal 1.4s ease-in-out infinite !important;
}

/* ════════════════════════════════════════════════════════════════
   ⚡ RELÂMPAGO REAL v2
   ════════════════════════════════════════════════════════════════ */
@keyframes lightningCone { to { --lightning-ang: 360deg; } }
@keyframes lightningArc {
  0%,100% { box-shadow: 0 0 6px #facc15, 0 0 16px rgba(250,204,21,.55), 0 0 30px rgba(250,204,21,.25); opacity: 1; }
  8%      { box-shadow: 0 0 20px #fffde4, 0 0 50px rgba(255,253,228,.85),0 0 90px rgba(250,204,21,.55); opacity: 1; }
  14%     { box-shadow: 0 0 2px #a16207, 0 0 5px rgba(161,98,7,.3),     0 0 8px rgba(161,98,7,.15);    opacity: .25; }
  22%     { box-shadow: 0 0 16px #fef08a,0 0 40px rgba(254,240,138,.75),0 0 70px rgba(250,204,21,.45); opacity: 1; }
  38%     { box-shadow: 0 0 3px #ca8a04, 0 0 8px rgba(202,138,4,.35),   0 0 14px rgba(161,98,7,.18);   opacity: .4; }
  55%     { box-shadow: 0 0 24px #ffffff,0 0 60px rgba(255,255,255,.8), 0 0 100px rgba(250,204,21,.55); opacity: 1; }
  70%     { box-shadow: 0 0 4px #854d0e, 0 0 10px rgba(133,77,14,.35),  0 0 18px rgba(161,98,7,.2);    opacity: .35; }
  88%     { box-shadow: 0 0 18px #fbbf24,0 0 46px rgba(251,191,36,.7),  0 0 80px rgba(250,204,21,.45); opacity: 1; }
}
.vfb-ring--lightning {
  background:
    linear-gradient(#0a0800,#0a0800) padding-box,
    conic-gradient(from 0deg,
      transparent 0%, transparent 8%,
      #fde68a 11%, #ffffff 15%, #fde68a 19%,
      transparent 23%, transparent 36%,
      #facc15 39%, #fffde4 44%, #facc15 49%,
      transparent 53%, transparent 65%,
      #fde68a 68%, #ffffff 73%, #fde68a 78%,
      transparent 82%, transparent 100%) border-box !important;
  animation: lightningCone var(--vfb-speed, 0.8s) linear infinite, lightningArc 0.6s ease-in-out infinite !important;
}

/* ════════════════════════════════════════════════════════════════
   🌌 AURORA BOREAL REAL
   ════════════════════════════════════════════════════════════════ */
@keyframes auroraShift {
  0%   { --aurora-h: 160; box-shadow: 0 0 16px hsl(160,100%,55%), 0 0 40px hsl(160,90%,40%,.45); }
  25%  { --aurora-h: 200; box-shadow: 0 0 20px hsl(200,100%,65%), 0 0 54px hsl(200,90%,50%,.5); }
  50%  { --aurora-h: 270; box-shadow: 0 0 18px hsl(270,100%,70%), 0 0 48px hsl(270,80%,55%,.45); }
  75%  { --aurora-h: 320; box-shadow: 0 0 16px hsl(320,100%,65%), 0 0 42px hsl(320,90%,50%,.4); }
  100% { --aurora-h: 160; box-shadow: 0 0 16px hsl(160,100%,55%), 0 0 40px hsl(160,90%,40%,.45); }
}
.vfb-ring--aurora {
  background:
    linear-gradient(#000d08,#000d08) padding-box,
    conic-gradient(from 0deg,
      #34d399 0%, #6ee7b7 6%, #5eead4 12%, #22d3ee 20%,
      #818cf8 28%, #c084fc 36%, #f472b6 44%, #fb7185 52%,
      #fbbf24 60%, #34d399 68%, #10b981 76%, #06b6d4 84%,
      #a855f7 92%, #34d399 100%) border-box !important;
  animation: iceCone1 var(--vfb-speed, 4s) linear infinite, auroraShift 3s ease-in-out infinite !important;
}

/* ════════════════════════════════════════════════════════════════
   ☣️ TÓXICO REAL
   ════════════════════════════════════════════════════════════════ */
@keyframes toxicCone { to { --toxic-angle: 360deg; } }
@keyframes toxicBubble {
  0%,100% { transform: scale(1)     rotate(0deg);  box-shadow: 0 0 8px #4ade80,  0 0 20px rgba(74,222,128,.5),   0 0 38px rgba(163,230,53,.22); }
  15%     { transform: scale(1.009) rotate(.3deg); box-shadow: 0 0 16px #86efac, 0 0 40px rgba(134,239,172,.65), 0 0 72px rgba(74,222,128,.4); }
  30%     { transform: scale(.991)  rotate(-.2deg);box-shadow: 0 0 4px #166534,  0 0 10px rgba(22,101,52,.3),    0 0 18px rgba(74,222,128,.12); }
  50%     { transform: scale(1.014) rotate(.6deg); box-shadow: 0 0 20px #a3e635, 0 0 50px rgba(163,230,53,.7),   0 0 90px rgba(74,222,128,.4); }
  70%     { transform: scale(.989)  rotate(-.3deg);box-shadow: 0 0 10px #4ade80, 0 0 26px rgba(74,222,128,.5),   0 0 50px rgba(163,230,53,.25); }
  85%     { transform: scale(1.008) rotate(.4deg); box-shadow: 0 0 18px #86efac, 0 0 44px rgba(134,239,172,.65), 0 0 80px rgba(74,222,128,.38); }
}
.vfb-ring--toxic {
  background:
    linear-gradient(#040d04,#040d04) padding-box,
    conic-gradient(from var(--toxic-angle, 0deg),
      #4ade80 0%, #86efac 8%, #a3e635 16%, #166534 26%,
      #15803d 34%, #4ade80 42%, #bef264 50%,
      #86efac 58%, #a3e635 66%, #166534 76%,
      #15803d 84%, #4ade80 92%, #4ade80 100%) border-box !important;
  animation: toxicCone var(--vfb-speed, 2s) linear infinite, toxicBubble 1.4s ease-in-out infinite !important;
}

/* ════════════════════════════════════════════════════════════════
   🩸 SANGUE REAL v2
   ════════════════════════════════════════════════════════════════ */
@keyframes bloodCone { to { --blood-angle: 360deg; } }
@keyframes bloodDrip {
  0%,100% { transform: scale(1)     rotate(0deg);   box-shadow: 0 0 10px #dc2626, 0 0 26px rgba(220,38,38,.55), 0 6px 20px rgba(153,27,27,.4); }
  20%     { transform: scale(.993)  rotate(-.5deg); box-shadow: 0 0 4px #991b1b,  0 0 10px rgba(153,27,27,.3),  0 4px 8px rgba(153,27,27,.2); }
  35%     { transform: scale(1.015) rotate(.6deg);  box-shadow: 0 0 22px #ef4444, 0 0 55px rgba(239,68,68,.7),  0 10px 40px rgba(220,38,38,.5); }
  55%     { transform: scale(.987)  rotate(-.4deg); box-shadow: 0 0 6px #7f1d1d,  0 0 14px rgba(127,29,29,.35), 0 5px 12px rgba(153,27,27,.25); }
  75%     { transform: scale(1.012) rotate(.5deg);  box-shadow: 0 0 18px #dc2626, 0 0 44px rgba(220,38,38,.65), 0 8px 30px rgba(239,68,68,.45); }
  90%     { transform: scale(.995)  rotate(-.2deg); box-shadow: 0 0 8px #ef4444,  0 0 20px rgba(239,68,68,.4),  0 6px 16px rgba(220,38,38,.3); }
}
.vfb-ring--blood {
  background:
    linear-gradient(#0d0000,#0d0000) padding-box,
    conic-gradient(from var(--blood-angle, 0deg),
      #ef4444 0%, #dc2626 10%, #7f1d1d 20%, #450a0a 30%,
      #7f1d1d 38%, #dc2626 46%, #ef4444 52%,
      #dc2626 60%, #7f1d1d 70%, #450a0a 80%,
      #7f1d1d 88%, #dc2626 95%, #ef4444 100%) border-box !important;
  animation: bloodCone var(--vfb-speed, 1.8s) linear infinite, bloodDrip 1.1s ease-in-out infinite !important;
}

/* ════════════════════════════════════════════════════════════════
   ✨ OURO REAL v2
   ════════════════════════════════════════════════════════════════ */
@keyframes goldCone { to { --gold-angle: 360deg; } }
@keyframes goldShine {
  0%,100% { box-shadow: 0 0 8px  #f2b600, 0 0 20px rgba(242,182,0,.5),   0 0 40px rgba(251,191,36,.2); }
  25%     { box-shadow: 0 0 18px #fde68a, 0 0 45px rgba(253,230,138,.7),  0 0 80px rgba(242,182,0,.35); }
  50%     { box-shadow: 0 0 12px #f59e0b, 0 0 30px rgba(245,158,11,.55),  0 0 60px rgba(251,191,36,.25); }
  75%     { box-shadow: 0 0 22px #fffbeb, 0 0 55px rgba(255,251,235,.75), 0 0 95px rgba(242,182,0,.4); }
}
.vfb-ring--gold {
  background:
    linear-gradient(#0d0a00,#0d0a00) padding-box,
    conic-gradient(from var(--gold-angle, 0deg),
      #fbbf24 0%, #f59e0b 8%, #d97706 16%, #92400e 26%,
      #b45309 34%, #f59e0b 42%, #fde68a 50%,
      #fffbeb 54%, #fde68a 58%, #f59e0b 66%,
      #d97706 74%, #92400e 82%, #b45309 90%, #fbbf24 100%) border-box !important;
  animation: goldCone var(--vfb-speed, 4s) linear infinite, goldShine 2s ease-in-out infinite !important;
}

/* ════════════════════════════════════════════════════════════════
   🪙 PRATA REAL
   ════════════════════════════════════════════════════════════════ */
@keyframes silverCone { to { --silver-angle: 360deg; } }
@keyframes silverShine {
  0%,100% { box-shadow: 0 0 8px #e2e8f0,  0 0 20px rgba(226,232,240,.45), 0 0 38px rgba(148,163,184,.2); }
  25%     { box-shadow: 0 0 20px #f8fafc, 0 0 50px rgba(248,250,252,.7),   0 0 80px rgba(226,232,240,.35); }
  50%     { box-shadow: 0 0 12px #cbd5e1, 0 0 30px rgba(203,213,225,.5),   0 0 55px rgba(148,163,184,.25); }
  75%     { box-shadow: 0 0 24px #ffffff, 0 0 60px rgba(255,255,255,.65),  0 0 95px rgba(226,232,240,.3); }
}
.vfb-ring--silver {
  background:
    linear-gradient(#0a0a0d,#0a0a0d) padding-box,
    conic-gradient(from var(--silver-angle, 0deg),
      #ffffff 0%, #e2e8f0 8%, #94a3b8 16%, #475569 26%,
      #64748b 34%, #94a3b8 42%, #f1f5f9 50%,
      #ffffff 54%, #e2e8f0 62%, #94a3b8 70%,
      #475569 78%, #64748b 86%, #cbd5e1 93%, #ffffff 100%) border-box !important;
  animation: silverCone var(--vfb-speed, 4s) linear infinite, silverShine 2.2s ease-in-out infinite !important;
}

/* ════════════════════════════════════════════════════════════════
   💎 RUBI
   ════════════════════════════════════════════════════════════════ */
@keyframes rubyCone { to { --ruby-angle: 360deg; } }
@keyframes rubyGlow {
  0%,100% { box-shadow: 0 0 8px #e11d48, 0 0 22px rgba(225,29,72,.5),   0 0 44px rgba(190,18,60,.2); }
  30%     { box-shadow: 0 0 18px #fb7185, 0 0 46px rgba(251,113,133,.65),0 0 80px rgba(225,29,72,.35); }
  60%     { box-shadow: 0 0 5px #9f1239,  0 0 12px rgba(159,18,57,.4),   0 0 22px rgba(190,18,60,.15); }
}
.vfb-ring--ruby {
  background:
    linear-gradient(#0d0006,#0d0006) padding-box,
    conic-gradient(from var(--ruby-angle, 0deg),
      #fda4af 0%, #fb7185 6%, #e11d48 14%, #be123c 24%,
      #9f1239 32%, #be123c 40%, #fb7185 48%,
      #fda4af 52%, #fb7185 60%, #e11d48 70%,
      #9f1239 80%, #be123c 88%, #fda4af 100%) border-box !important;
  animation: rubyCone var(--vfb-speed, 3s) linear infinite, rubyGlow 1.6s ease-in-out infinite !important;
}

/* ════════════════════════════════════════════════════════════════
   🪨 COBRE
   ════════════════════════════════════════════════════════════════ */
@keyframes copperCone { to { --copper-angle: 360deg; } }
@keyframes copperBurn {
  0%,100% { box-shadow: 0 0 8px #c2410c, 0 0 20px rgba(194,65,12,.45),  0 0 38px rgba(154,52,18,.2); }
  35%     { box-shadow: 0 0 16px #f97316, 0 0 40px rgba(249,115,22,.6),  0 0 70px rgba(194,65,12,.3); }
  70%     { box-shadow: 0 0 10px #ea580c, 0 0 28px rgba(234,88,12,.5),   0 0 50px rgba(154,52,18,.22); }
}
.vfb-ring--copper {
  background:
    linear-gradient(#0a0500,#0a0500) padding-box,
    conic-gradient(from var(--copper-angle, 0deg),
      #fdba74 0%, #f97316 8%, #c2410c 18%, #7c2d12 28%,
      #9a3412 36%, #ea580c 44%, #fed7aa 52%,
      #fdba74 58%, #f97316 66%, #c2410c 76%,
      #7c2d12 84%, #ea580c 92%, #fdba74 100%) border-box !important;
  animation: copperCone var(--vfb-speed, 3.5s) linear infinite, copperBurn 1.8s ease-in-out infinite !important;
}

/* ════════════════════════════════════════════════════════════════
   🔶 ÂMBAR
   ════════════════════════════════════════════════════════════════ */
@keyframes amberCone { to { --amber-angle: 360deg; } }
@keyframes amberGlow {
  0%,100% { box-shadow: 0 0 8px #d97706, 0 0 22px rgba(217,119,6,.5),   0 0 44px rgba(180,83,9,.2); }
  25%     { box-shadow: 0 0 18px #fbbf24, 0 0 46px rgba(251,191,36,.65), 0 0 80px rgba(217,119,6,.3); }
  50%     { box-shadow: 0 0 12px #b45309, 0 0 30px rgba(180,83,9,.5),    0 0 55px rgba(217,119,6,.22); }
  75%     { box-shadow: 0 0 22px #fde68a, 0 0 55px rgba(253,230,138,.6), 0 0 90px rgba(251,191,36,.28); }
}
.vfb-ring--amber {
  background:
    linear-gradient(#080500,#080500) padding-box,
    conic-gradient(from var(--amber-angle, 0deg),
      #fde68a 0%, #fbbf24 8%, #f59e0b 16%, #d97706 26%,
      #b45309 34%, #d97706 42%, #fbbf24 50%,
      #fde68a 56%, #f59e0b 64%, #d97706 72%,
      #92400e 82%, #b45309 90%, #fde68a 100%) border-box !important;
  animation: amberCone var(--vfb-speed, 3.8s) linear infinite, amberGlow 2.1s ease-in-out infinite !important;
}

/* ════════════════════════════════════════════════════════════════
   💙 SAFIRA
   ════════════════════════════════════════════════════════════════ */
@keyframes sapphireCone { to { --sapphire-angle: 360deg; } }
@keyframes sapphireGlow {
  0%,100% { box-shadow: 0 0 8px #1d4ed8, 0 0 20px rgba(29,78,216,.5),   0 0 40px rgba(30,58,138,.2); }
  30%     { box-shadow: 0 0 18px #60a5fa, 0 0 46px rgba(96,165,250,.65), 0 0 80px rgba(29,78,216,.35); }
  65%     { box-shadow: 0 0 12px #1e40af, 0 0 30px rgba(30,64,175,.5),   0 0 55px rgba(30,58,138,.22); }
}
.vfb-ring--sapphire {
  background:
    linear-gradient(#000810,#000810) padding-box,
    conic-gradient(from var(--sapphire-angle, 0deg),
      #93c5fd 0%, #60a5fa 6%, #2563eb 14%, #1d4ed8 24%,
      #1e3a8a 32%, #1d4ed8 40%, #3b82f6 50%,
      #93c5fd 54%, #60a5fa 62%, #2563eb 72%,
      #1e3a8a 80%, #1d4ed8 90%, #93c5fd 100%) border-box !important;
  animation: sapphireCone var(--vfb-speed, 4s) linear infinite, sapphireGlow 2s ease-in-out infinite !important;
}

/* ════════════════════════════════════════════════════════════════
   🌸 NEON ROSA
   ════════════════════════════════════════════════════════════════ */
@keyframes neonPinkCone { to { --neon-pink-ang: 360deg; } }
@keyframes neonPinkArc {
  0%,100% { box-shadow: 0 0 6px #ec4899, 0 0 16px rgba(236,72,153,.55), 0 0 32px rgba(219,39,119,.25); opacity: 1; }
  15%     { box-shadow: 0 0 20px #f9a8d4, 0 0 50px rgba(249,168,212,.8), 0 0 90px rgba(236,72,153,.5);  opacity: 1; }
  25%     { box-shadow: 0 0 2px #be185d,  0 0 5px rgba(190,24,93,.3),    0 0 8px rgba(219,39,119,.15);  opacity: .35; }
  35%     { box-shadow: 0 0 16px #ec4899, 0 0 40px rgba(236,72,153,.7),  0 0 70px rgba(219,39,119,.4);  opacity: 1; }
  50%     { box-shadow: 0 0 4px #db2777,  0 0 10px rgba(219,39,119,.4),  0 0 18px rgba(190,24,93,.2);   opacity: .6; }
  75%     { box-shadow: 0 0 22px #fbcfe8, 0 0 55px rgba(251,207,232,.75),0 0 95px rgba(236,72,153,.45); opacity: 1; }
}
.vfb-ring--neon-pink {
  background:
    linear-gradient(#0d000a,#0d000a) padding-box,
    conic-gradient(from var(--neon-pink-ang, 0deg),
      transparent 0%, transparent 12%,
      #f9a8d4 15%, #ec4899 20%, #f9a8d4 25%,
      transparent 28%, transparent 42%,
      #db2777 45%, #fbcfe8 50%, #db2777 55%,
      transparent 58%, transparent 70%,
      #f9a8d4 73%, #ec4899 78%, #f9a8d4 83%,
      transparent 86%, transparent 100%) border-box !important;
  animation: neonPinkCone var(--vfb-speed, 0.6s) linear infinite, neonPinkArc 0.4s ease-in-out infinite !important;
}

/* ════════════════════════════════════════════════════════════════
   🌊 CIANO OCEANO
   ════════════════════════════════════════════════════════════════ */
@keyframes cyanWave {
  0%,100% { box-shadow: 0 0 10px #06b6d4, 0 0 26px rgba(6,182,212,.5),   0 0 48px rgba(8,145,178,.2);  transform: scale(1) rotate(0deg); }
  20%     { box-shadow: 0 0 18px #22d3ee, 0 0 46px rgba(34,211,238,.65),  0 0 80px rgba(6,182,212,.35); transform: scale(1.008) rotate(.2deg); }
  45%     { box-shadow: 0 0 6px #0891b2,  0 0 14px rgba(8,145,178,.4),    0 0 26px rgba(6,182,212,.15); transform: scale(.993) rotate(-.15deg); }
  70%     { box-shadow: 0 0 22px #67e8f9, 0 0 54px rgba(103,232,249,.7),  0 0 95px rgba(6,182,212,.4);  transform: scale(1.012) rotate(.18deg); }
}
.vfb-ring--cyan {
  background:
    linear-gradient(#00080d,#00080d) padding-box,
    conic-gradient(from 0deg,
      #ffffff 0%, #a5f3fc 6%, #22d3ee 12%, #06b6d4 22%,
      #0891b2 30%, #0e7490 38%, #06b6d4 46%, #22d3ee 54%,
      #a5f3fc 60%, #ffffff 66%, #67e8f9 72%, #06b6d4 82%,
      #0891b2 90%, #a5f3fc 96%, #ffffff 100%) border-box !important;
  animation: iceCone1 var(--vfb-speed, 3.5s) linear infinite, cyanWave 2s ease-in-out infinite !important;
}

/* ════════════════════════════════════════════════════════════════
   🔮 SOMBRA VIOLETA
   ════════════════════════════════════════════════════════════════ */
@keyframes shadowCone { to { --shadow-angle: 360deg; } }
@keyframes shadowMist {
  0%,100% { box-shadow: 0 0 10px #7c3aed, 0 0 26px rgba(124,58,237,.5),  0 0 50px rgba(91,33,182,.25); transform: scale(1); }
  25%     { box-shadow: 0 0 4px #4c1d95,  0 0 10px rgba(76,29,149,.4),   0 0 18px rgba(91,33,182,.15); transform: scale(.994); }
  50%     { box-shadow: 0 0 18px #a855f7, 0 0 46px rgba(168,85,247,.65), 0 0 85px rgba(124,58,237,.4); transform: scale(1.01); }
  75%     { box-shadow: 0 0 8px #6d28d9,  0 0 20px rgba(109,40,217,.5),  0 0 38px rgba(91,33,182,.2);  transform: scale(.997); }
}
.vfb-ring--shadow {
  background:
    linear-gradient(#04000d,#04000d) padding-box,
    conic-gradient(from var(--shadow-angle, 0deg),
      #a78bfa 0%, #7c3aed 8%, #4c1d95 18%, #2e1065 28%,
      #3b0764 36%, #6d28d9 44%, #a855f7 52%,
      #c4b5fd 56%, #a78bfa 64%, #7c3aed 74%,
      #4c1d95 82%, #6d28d9 90%, #a78bfa 100%) border-box !important;
  animation: shadowCone var(--vfb-speed, 4.5s) linear infinite, shadowMist 2.4s ease-in-out infinite !important;
}

/* ════════════════════════════════════════════════════════════════
   🌌 CÓSMICO
   ════════════════════════════════════════════════════════════════ */
@keyframes cosmicCone { to { --cosmic-angle: 360deg; } }
@keyframes cosmicPulse {
  0%   { box-shadow: 0 0 12px #818cf8, 0 0 30px rgba(129,140,248,.5),  0 0 60px rgba(99,102,241,.25); }
  20%  { box-shadow: 0 0 18px #c084fc, 0 0 46px rgba(192,132,252,.6),  0 0 85px rgba(168,85,247,.35); }
  40%  { box-shadow: 0 0 8px #38bdf8,  0 0 20px rgba(56,189,248,.45),  0 0 38px rgba(14,165,233,.2); }
  60%  { box-shadow: 0 0 22px #f472b6, 0 0 56px rgba(244,114,182,.65), 0 0 100px rgba(219,39,119,.35); }
  80%  { box-shadow: 0 0 14px #34d399, 0 0 36px rgba(52,211,153,.5),   0 0 65px rgba(16,185,129,.25); }
  100% { box-shadow: 0 0 12px #818cf8, 0 0 30px rgba(129,140,248,.5),  0 0 60px rgba(99,102,241,.25); }
}
.vfb-ring--cosmic {
  background:
    linear-gradient(#02000d,#02000d) padding-box,
    conic-gradient(from var(--cosmic-angle, 0deg),
      #818cf8 0%, #a855f7 8%, #ec4899 14%, #38bdf8 22%,
      #34d399 30%, #fbbf24 38%, #f472b6 46%, #818cf8 54%,
      #c084fc 60%, #38bdf8 68%, #34d399 76%, #fbbf24 84%,
      #a855f7 92%, #818cf8 100%) border-box !important;
  animation: cosmicCone var(--vfb-speed, 5s) linear infinite, cosmicPulse 3s ease-in-out infinite !important;
}

/* ════════════════════════════════════════════════════════════════
   🪸 CORAL
   ════════════════════════════════════════════════════════════════ */
@keyframes coralCone { to { --coral-angle: 360deg; } }
@keyframes coralGlow {
  0%,100% { box-shadow: 0 0 8px #f43f5e, 0 0 22px rgba(244,63,94,.5),   0 0 42px rgba(225,29,72,.2); }
  30%     { box-shadow: 0 0 16px #fb923c, 0 0 40px rgba(251,146,60,.6),  0 0 72px rgba(249,115,22,.3); }
  65%     { box-shadow: 0 0 20px #fda4af, 0 0 50px rgba(253,164,175,.65),0 0 88px rgba(244,63,94,.35); }
}
.vfb-ring--coral {
  background:
    linear-gradient(#0d0300,#0d0300) padding-box,
    conic-gradient(from var(--coral-angle, 0deg),
      #fda4af 0%, #fb7185 8%, #f43f5e 16%, #fb923c 26%,
      #f97316 34%, #fda4af 42%, #fb7185 50%,
      #f43f5e 58%, #fb923c 66%, #fda4af 76%,
      #f43f5e 84%, #fb7185 92%, #fda4af 100%) border-box !important;
  animation: coralCone var(--vfb-speed, 3.2s) linear infinite, coralGlow 1.9s ease-in-out infinite !important;
}

/* ════════════════════════════════════════════════════════════════
   🎮 MATRIX
   ════════════════════════════════════════════════════════════════ */
@keyframes matrixGlow {
  0%,100% { box-shadow: 0 0 8px #16a34a,  0 0 20px rgba(22,163,74,.5),   0 0 36px rgba(21,128,61,.2);  opacity: 1; }
  12%     { box-shadow: 0 0 22px #4ade80, 0 0 55px rgba(74,222,128,.8),  0 0 95px rgba(22,163,74,.5);   opacity: 1; }
  20%     { box-shadow: 0 0 2px #14532d,  0 0 5px rgba(20,83,45,.3),     0 0 8px rgba(21,128,61,.12);   opacity: .3; }
  32%     { box-shadow: 0 0 16px #22c55e, 0 0 40px rgba(34,197,94,.7),   0 0 70px rgba(22,163,74,.4);   opacity: 1; }
  50%     { box-shadow: 0 0 4px #166534,  0 0 10px rgba(22,101,52,.4),   0 0 18px rgba(21,128,61,.18);  opacity: .5; }
  78%     { box-shadow: 0 0 20px #86efac, 0 0 50px rgba(134,239,172,.75),0 0 88px rgba(74,222,128,.4);  opacity: 1; }
}
.vfb-ring--matrix {
  background:
    linear-gradient(#000d02,#000d02) padding-box,
    conic-gradient(from 0deg,
      transparent 0%, transparent 10%,
      #4ade80 13%, #ffffff 17%, #4ade80 21%,
      transparent 25%, transparent 38%,
      #22c55e 41%, #a7f3d0 46%, #22c55e 51%,
      transparent 55%, transparent 67%,
      #86efac 70%, #ffffff 75%, #86efac 80%,
      transparent 84%, transparent 100%) border-box !important;
  animation: lightningCone var(--vfb-speed, 0.5s) linear infinite, matrixGlow 0.35s ease-in-out infinite !important;
}

/* ════════════════════════════════════════════════════════════════
   🌿 ESMERALDA REAL
   ════════════════════════════════════════════════════════════════ */
@keyframes emeraldCone { to { --emerald-angle: 360deg; } }
@keyframes emeraldShine {
  0%,100% { box-shadow: 0 0 8px #059669, 0 0 22px rgba(5,150,105,.5),   0 0 44px rgba(4,120,87,.22); }
  20%     { box-shadow: 0 0 20px #34d399, 0 0 50px rgba(52,211,153,.7),  0 0 90px rgba(5,150,105,.4); }
  45%     { box-shadow: 0 0 6px #065f46,  0 0 14px rgba(6,95,70,.4),     0 0 24px rgba(4,120,87,.15); }
  70%     { box-shadow: 0 0 24px #6ee7b7, 0 0 60px rgba(110,231,183,.65),0 0 100px rgba(52,211,153,.35); }
}
.vfb-ring--emerald {
  background:
    linear-gradient(#000d06,#000d06) padding-box,
    conic-gradient(from var(--emerald-angle, 0deg),
      #6ee7b7 0%, #34d399 6%, #059669 14%, #065f46 24%,
      #047857 32%, #10b981 40%, #a7f3d0 50%,
      #6ee7b7 56%, #34d399 64%, #059669 72%,
      #065f46 80%, #10b981 90%, #6ee7b7 100%) border-box !important;
  animation: emeraldCone var(--vfb-speed, 3.5s) linear infinite, emeraldShine 2s ease-in-out infinite !important;
}

/* ════════════════════════════════════════════════════════════════
   🍃 JADE
   ════════════════════════════════════════════════════════════════ */
@keyframes jadeCone { to { --jade-angle: 360deg; } }
@keyframes jadeGlow {
  0%,100% { box-shadow: 0 0 8px #166534, 0 0 20px rgba(22,101,52,.45),  0 0 38px rgba(20,83,45,.2);   transform: scale(1); }
  25%     { box-shadow: 0 0 16px #4ade80, 0 0 40px rgba(74,222,128,.6),  0 0 70px rgba(34,197,94,.3);  transform: scale(1.008); }
  55%     { box-shadow: 0 0 4px #14532d,  0 0 10px rgba(20,83,45,.3),    0 0 16px rgba(22,101,52,.12); transform: scale(.993); }
  80%     { box-shadow: 0 0 20px #86efac, 0 0 50px rgba(134,239,172,.65),0 0 85px rgba(74,222,128,.35);transform: scale(1.01); }
}
.vfb-ring--jade {
  background:
    linear-gradient(#000a03,#000a03) padding-box,
    conic-gradient(from var(--jade-angle, 0deg),
      #bbf7d0 0%, #86efac 8%, #4ade80 16%, #16a34a 26%,
      #14532d 34%, #166534 42%, #22c55e 50%,
      #bbf7d0 54%, #4ade80 62%, #16a34a 72%,
      #14532d 80%, #166534 90%, #bbf7d0 100%) border-box !important;
  animation: jadeCone var(--vfb-speed, 4.5s) linear infinite, jadeGlow 2.3s ease-in-out infinite !important;
}

/* ════════════════════════════════════════════════════════════════
   ☢️ NUCLEAR
   ════════════════════════════════════════════════════════════════ */
@keyframes nuclearArc {
  0%,100% { box-shadow: 0 0 8px #a3e635, 0 0 20px rgba(163,230,53,.55), 0 0 36px rgba(132,204,22,.25); opacity: 1; }
  10%     { box-shadow: 0 0 22px #d9f99d, 0 0 55px rgba(217,249,157,.85),0 0 95px rgba(163,230,53,.55); opacity: 1; }
  18%     { box-shadow: 0 0 2px #4d7c0f,  0 0 5px rgba(77,124,15,.3),    0 0 8px rgba(101,163,13,.12);  opacity: .25; }
  28%     { box-shadow: 0 0 18px #bef264, 0 0 46px rgba(190,242,100,.75),0 0 80px rgba(163,230,53,.5);  opacity: 1; }
  45%     { box-shadow: 0 0 4px #65a30d,  0 0 10px rgba(101,163,13,.4),  0 0 18px rgba(132,204,22,.18); opacity: .55; }
  72%     { box-shadow: 0 0 26px #ecfccb, 0 0 65px rgba(236,252,203,.8), 0 0 110px rgba(163,230,53,.5); opacity: 1; }
}
.vfb-ring--nuclear {
  background:
    linear-gradient(#060800,#060800) padding-box,
    conic-gradient(from 0deg,
      transparent 0%, transparent 10%,
      #d9f99d 13%, #ffffff 17%, #a3e635 21%,
      transparent 25%, transparent 38%,
      #bef264 41%, #ecfccb 46%, #bef264 51%,
      transparent 55%, transparent 67%,
      #d9f99d 70%, #ffffff 75%, #a3e635 80%,
      transparent 84%, transparent 100%) border-box !important;
  animation: lightningCone var(--vfb-speed, 0.45s) linear infinite, nuclearArc 0.38s ease-in-out infinite !important;
}

/* ════════════════════════════════════════════════════════════════
   Classes utilitárias VFB
   ════════════════════════════════════════════════════════════════ */
.vfb-ring--plasma {
  background:
    linear-gradient(#131315,#131315) padding-box,
    conic-gradient(from var(--frame-angle,0deg), var(--vfb-c1,#a855f7), var(--vfb-c2,#ec4899), var(--vfb-c3,#f97316), var(--vfb-c1,#a855f7)) border-box !important;
  animation: framePlasma var(--vfb-speed,3s) linear infinite !important;
}
.vfb-ring--holo {
  background:
    linear-gradient(#131315,#131315) padding-box,
    conic-gradient(from var(--frame-holo,0deg), #38bdf8, #34d399, #a78bfa, #f472b6, #fbbf24, #38bdf8) border-box !important;
  animation: frameHolo var(--vfb-speed,4s) linear infinite !important;
}
.vfb-ring--rotate       { animation: frameRotate      var(--vfb-speed,3s)   linear infinite !important; }
.vfb-ring--vortex       { animation: frameVortex      var(--vfb-speed,1.5s) linear infinite !important; }
.vfb-ring--energy       { animation: frameEnergy      var(--vfb-speed,2s)   linear infinite !important; }
.vfb-ring--rainbow_spin { animation: frameRainbowSpin var(--vfb-speed,4s)   linear infinite !important; }

/* ════════════════════════════════════════════════════════════════
   Keyframes auxiliares (aurora, water, vortex, energy, toxic, blood, gold)
   ════════════════════════════════════════════════════════════════ */
@keyframes frameWater {
  0%,100% { box-shadow: 0 0 var(--av-glow) #06b6d4, 0 0 calc(var(--av-glow)*3) rgba(6,182,212,.4), inset 0 0 var(--av-glow) rgba(6,182,212,.1); }
  33%     { box-shadow: 0 0 calc(var(--av-glow)*2.25) #22d3ee, 0 0 calc(var(--av-glow)*5.5) rgba(34,211,238,.55), inset 0 0 calc(var(--av-glow)*1.75) rgba(34,211,238,.15); }
  66%     { box-shadow: 0 0 calc(var(--av-glow)*1.75) #0891b2, 0 0 calc(var(--av-glow)*4.25) rgba(8,145,178,.45), inset 0 0 calc(var(--av-glow)*1.25) rgba(8,145,178,.12); }
}
@keyframes frameAurora {
  0%   { --aurora-h: 160; box-shadow: 0 0 calc(var(--av-glow)*2) hsl(160,100%,55%), 0 0 calc(var(--av-glow)*5) hsl(160,90%,40%,.45); }
  25%  { --aurora-h: 200; box-shadow: 0 0 calc(var(--av-glow)*2.5) hsl(200,100%,65%), 0 0 calc(var(--av-glow)*6.75) hsl(200,90%,50%,.5); }
  50%  { --aurora-h: 270; box-shadow: 0 0 calc(var(--av-glow)*2.25) hsl(270,100%,70%), 0 0 calc(var(--av-glow)*6) hsl(270,80%,55%,.45); }
  75%  { --aurora-h: 320; box-shadow: 0 0 calc(var(--av-glow)*2) hsl(320,100%,65%), 0 0 calc(var(--av-glow)*5.25) hsl(320,90%,50%,.4); }
  100% { --aurora-h: 160; box-shadow: 0 0 calc(var(--av-glow)*2) hsl(160,100%,55%), 0 0 calc(var(--av-glow)*5) hsl(160,90%,40%,.45); }
}
@keyframes frameVortex       { from { transform: rotate(0deg); }   to { transform: rotate(360deg); } }
@keyframes frameEnergy {
  0%,100% { transform: rotate(0deg);   box-shadow: 0 0 var(--av-glow) #818cf8, 0 0 calc(var(--av-glow)*2.75) rgba(129,140,248,.45); }
  25%     { transform: rotate(90deg);  box-shadow: 0 0 calc(var(--av-glow)*2.25) #a5b4fc, 0 0 calc(var(--av-glow)*6.25) rgba(165,180,252,.65), 0 0 calc(var(--av-glow)*10) rgba(99,102,241,.3); }
  50%     { transform: rotate(180deg); box-shadow: 0 0 calc(var(--av-glow)*1.25) #818cf8, 0 0 calc(var(--av-glow)*3.5) rgba(129,140,248,.5); }
  75%     { transform: rotate(270deg); box-shadow: 0 0 calc(var(--av-glow)*2.5) #6366f1, 0 0 calc(var(--av-glow)*7) rgba(99,102,241,.6), 0 0 calc(var(--av-glow)*11.25) rgba(129,140,248,.25); }
}
@keyframes frameRainbowSpin  { from { filter: hue-rotate(0deg) brightness(1.15); } to { filter: hue-rotate(360deg) brightness(1.15); } }
@keyframes frameToxic {
  0%,100% { box-shadow: 0 0 calc(var(--av-glow)*1.25) #4ade80, 0 0 calc(var(--av-glow)*3.5) rgba(74,222,128,.4), 0 0 calc(var(--av-glow)*6.25) rgba(163,230,53,.2); }
  50%     { box-shadow: 0 0 calc(var(--av-glow)*2.5) #86efac, 0 0 calc(var(--av-glow)*6.5) rgba(134,239,172,.6), 0 0 calc(var(--av-glow)*11.25) rgba(74,222,128,.25); }
}
@keyframes frameBlood {
  0%,100% { box-shadow: 0 0 calc(var(--av-glow)*1.5) #dc2626, 0 0 calc(var(--av-glow)*3.75) rgba(220,38,38,.5); transform: scale(1); }
  40%     { box-shadow: 0 0 calc(var(--av-glow)*0.75) #991b1b, 0 0 calc(var(--av-glow)*1.75) rgba(153,27,27,.4); transform: scale(.997); }
  60%     { box-shadow: 0 0 calc(var(--av-glow)*2.75) #ef4444, 0 0 calc(var(--av-glow)*6.875) rgba(239,68,68,.6), 0 0 calc(var(--av-glow)*10) rgba(220,38,38,.25); transform: scale(1.012); }
}
@keyframes frameGold {
  0%,100% { box-shadow: 0 0 calc(var(--av-glow)*1.25) #f2b600, 0 0 calc(var(--av-glow)*3.25) rgba(242,182,0,.5), 0 0 calc(var(--av-glow)*6.25) rgba(251,191,36,.2); }
  50%     { box-shadow: 0 0 calc(var(--av-glow)*2.5) #fde68a, 0 0 calc(var(--av-glow)*6.25) rgba(253,230,138,.6), 0 0 calc(var(--av-glow)*10) rgba(242,182,0,.3); }
}

/* ─────────────────────────────────────────────────────────────────────────── */

/* ============================================================ */


body {
  margin: 0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  background: var(--bg0);
  min-height: 100vh;
  color: var(--text);
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }
/* max-width:100% não se aplica a imagens de moldura/avatar — já controlado via !important em .av-img e .av-frame */
img:not(.av-img):not(.av-frame) { max-width: 100%; display: block; }
img.av-img, img.av-frame { max-width: none; display: block; }

.container {
  width: 100%;
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 24px;
}

/* Background — sem degradê, cor sólida */
.bg { display: none; }
.bg__glow { display: none; }
.bg__noise { display: none; }

/* ── TOPBAR PÚBLICA (index, login, termos, etc.) ── */
.topbar {
  position: sticky;
  top: 0;
  z-index: 200;
  width: 100%;
  background: rgba(8,8,9,0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.topbar__inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 24px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.topbar__actions {
  display: flex;
  align-items: center;
  gap: 10px;
}
.topbar__center { flex: 1; }

/* Brand / logo na topbar pública */
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  flex-shrink: 0;
}
.brand__mark {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.brand__mark img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 10px;
}
.brand__text {
  display: flex;
  flex-direction: column;
  line-height: 1;
}
.brand__name {
  font-size: 18px;
  font-weight: 900;
  letter-spacing: -0.5px;
  display: flex;
  gap: 0;
}
.brand__name--light { color: rgba(255,255,255,0.9); }
.brand__name--accent { color: var(--accent); }
.brand__sub {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.35);
  margin-top: 2px;
}

/* Botões auth na topbar */
.topbar__auth-link {
  font-size: 13px;
  font-weight: 700;
  color: rgba(255,255,255,0.65);
  text-decoration: none;
  padding: 8px 12px;
  transition: color 0.15s;
}
.topbar__auth-link:hover { color: var(--text); }
.topbar__auth-btn {
  font-size: 13px;
  font-weight: 800;
  color: #111;
  background: var(--accent);
  border-radius: 6px;
  padding: 8px 16px;
  text-decoration: none;
  transition: opacity 0.15s;
}
.topbar__auth-btn:hover { opacity: 0.88; }

/* ── TOPBAR: oculta apenas dentro do pShell (páginas autenticadas) ── */
.pShell .topbar { display: none !important; }


/* ── RIGHT PANEL (estilo FACEIT — estreito, fixo, direita) ── */
.pRightPanel {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: var(--right-panel-w);
  background: var(--bg-chrome);
  z-index: 110;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px 0 16px;
  gap: 0;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: none;
}
.pRightPanel::-webkit-scrollbar { display: none; }

/* ── Avatar clicável com badge de verificação ── */
.pRP__avatar-wrap {
  position: relative;
  width: 46px;
  height: 46px;
  cursor: pointer;
  border-radius: 50%;
  flex-shrink: 0;
  overflow: visible; /* permite moldura extravasar */
  outline: none;
}
.pRP__avatar-img {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  transition: box-shadow 0.15s;
}
.pRP__avatar-wrap:hover .pRP__avatar-img,
.pRP__avatar-wrap:focus .pRP__avatar-img {
  box-shadow: 0 0 0 2px var(--accent), 0 0 22px rgba(242,182,0,0.36);
}
/* Hover no av-wrap (quando tem moldura) */
.pRP__avatar-wrap:hover > .av-wrap,
.pRP__avatar-wrap:focus > .av-wrap {
  filter: drop-shadow(0 0 6px rgba(242,182,0,0.5));
}

/* Badge verificação: sem fundo, só o ícone posicionado sobre o avatar */
.pRP__badge {
  position: absolute;
  bottom: -3px;
  right: -5px;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  line-height: 0;
}

/* ── Level abaixo do avatar ── */
.pRP__level-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 8px;
  margin-top: 8px;
  line-height: 1;
}
.pRP__level-label {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: rgba(255,255,255,0.50);
  margin-bottom: 2px;
}
.pRP__level-num {
  font-size: 14px;
  font-weight: 900;
  color: var(--accent);
  line-height: 1;
}

/* ── EXP bar ── */
.pRP__exp-wrap {
  width: 58px;
  padding: 0 0 14px;
  cursor: default;
}
.pRP__exp-bar {
  width: 100%;
  height: 3px;
  background: rgba(255,255,255,0.08);
  border-radius: 2px;
  overflow: hidden;
}
.pRP__exp-fill {
  height: 100%;
  background: var(--accent);
  border-radius: 2px;
  transition: width 0.4s ease;
}

/* ── Divisor sutil (sem borda, só bg escuro) ── */
.pRP__divider {
  width: 58px;
  height: 1px;
  background: rgba(255,255,255,0.04);
  margin: 4px 0 8px;
  flex-shrink: 0;
}

/* ── Stats sem ícone — só label + valor ── */
.pRP__stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 7px 4px;
  width: 100%;
  cursor: default;
  position: relative;
}
.pRP__stat-label {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: rgba(255,255,255,0.50);
  margin-bottom: 3px;
}
.pRP__stat-value {
  font-size: 12px;
  font-weight: 800;
  color: rgba(255,255,255,0.88);
  line-height: 1.1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 82px;
  text-align: center;
}
.pRP__stat-value--accent { color: var(--accent); }

/* ── Botões fixos (perfil + sair) sempre visíveis ── */
.pRP__fixed-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: 100%;
  margin-top: 4px;
}
.pRP__action-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  text-decoration: none;
  padding: 8px 4px;
  width: 100%;
  color: rgba(255,255,255,0.62);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  transition: color 0.12s, background 0.12s;
  border-radius: 4px;
  border: none;
  background: transparent;
  cursor: pointer;
  box-sizing: border-box;
  font-family: inherit;
}
.pRP__action-btn:hover {
  color: var(--text);
  background: rgba(255,255,255,0.04);
}
.pRP__action-btn--logout { color: rgba(248,113,113,0.6); }
.pRP__action-btn--logout:hover {
  color: #f87171;
  background: rgba(239,68,68,0.06);
}
.pRP__action-btn svg { flex-shrink: 0; }

/* ── Dropdown do avatar — removido, substituído pelo rpDrawer inline em rightpanel.php ── */

/* ── Não logado ── */
.pRP__auth {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 20px 8px;
}
.pRP__auth-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(242,182,0,0.08);
  color: var(--accent);
  text-decoration: none;
  transition: background 0.15s;
}
.pRP__auth-icon:hover { background: rgba(242,182,0,0.15); }
.pRP__auth-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--accent);
  text-decoration: none;
  padding: 6px 10px;
  background: rgba(242,182,0,0.08);
  border-radius: 4px;
  transition: background 0.15s;
  white-space: nowrap;
}
.pRP__auth-btn:hover { background: rgba(242,182,0,0.15); }


/* ─── BUTTONS ───────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 14px;
  border-radius: 6px;
  border: 1px solid transparent;
  font-weight: 800;
  font-size: 12px;
  letter-spacing: 0.3px;
  transition:
    transform 0.12s ease,
    background 0.12s ease,
    opacity 0.12s ease;
  user-select: none;
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
}
.btn:active { transform: translateY(1px); }
.btn--primary {
  color: #111;
  background: var(--accent);
}
.btn--primary:hover { opacity: 0.88; }
.btn--ghost {
  color: var(--text);
  background: rgba(255, 255, 255, 0.05);
}
.btn--ghost:hover { background: rgba(255, 255, 255, 0.08); }
.btn--soft {
  color: var(--accent);
  background: rgba(242, 182, 0, 0.1);
}
.btn--soft:hover { background: rgba(242, 182, 0, 0.15); }
.btn--secondary {
  color: rgba(255, 255, 255, 0.8);
  background: rgba(255, 255, 255, 0.07);
}
.btn--secondary:hover { background: rgba(255, 255, 255, 0.11); color: #fff; }
.btn--lg { padding: 12px 18px; }
.btn--wide { width: 100%; }

.hero {
  position: relative;
  padding: 34px 0 18px;
}
.hero__ghost {
  position: absolute;
  left: 0;
  right: 0;
  top: 26px;
  pointer-events: none;
  opacity: 0.18;
  filter: drop-shadow(0 18px 60px rgba(0, 0, 0, 0.4));
}
.hero__ghostLine {
  font-weight: 900;
  letter-spacing: 2px;
  font-size: 92px;
  line-height: 0.92;
  color: transparent;
  -webkit-text-stroke: 1px rgba(255, 255, 255, 0.14);
  text-transform: uppercase;
}
.hero__ghostLine--sm {
  margin-top: 6px;
  font-size: 44px;
  -webkit-text-stroke: 1px rgba(255, 255, 255, 0.1);
}

.hero__grid {
  position: relative;
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 22px;
  padding: 26px;
  border-radius: var(--radius2);
  border: 1px solid rgba(255, 255, 255, 0.08);
  background:
    radial-gradient(900px 600px at 65% 30%, rgba(242, 182, 0, 0.12), transparent 55%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.02));
  box-shadow: var(--shadow);
  overflow: hidden;
}

.hero__copy {
  position: relative;
  padding: 4px 4px 10px;
}
.eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  color: rgba(233, 234, 237, 0.78);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.4px;
}
.dot {
  width: 8px;
  height: 8px;
  border-radius: 99px;
  background: var(--accent);
  box-shadow: 0 0 0 6px rgba(242, 182, 0, 0.12);
}

.h1 {
  margin: 14px 0 10px;
  font-size: 48px;
  line-height: 1.05;
  letter-spacing: -0.6px;
}
.accent {
  color: var(--accent);
}
.lead {
  margin: 0;
  max-width: 54ch;
  color: rgba(233, 234, 237, 0.76);
  font-size: 16px;
  line-height: 1.55;
}

.hero__cta {
  margin-top: 18px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.trust {
  margin-top: 18px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  color: rgba(233, 234, 237, 0.72);
  font-size: 13px;
}
.trust__item {
  display: flex;
  align-items: center;
  gap: 10px;
}
.trust__pill {
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  font-weight: 900;
  color: rgba(233, 234, 237, 0.86);
}
.trust__text {
  font-weight: 700;
  color: rgba(233, 234, 237, 0.66);
}
.trust__sep {
  width: 6px;
  height: 6px;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.18);
}

.hero__art {
  position: relative;
  min-height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.art {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 300px;
}

.art__card {
  position: absolute;
  width: 168px;
  height: 230px;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.03));
  box-shadow: 0 26px 70px rgba(0, 0, 0, 0.55);
  overflow: hidden;
  transform-origin: center;
}
.art__tag {
  position: absolute;
  top: 14px;
  left: 14px;
  padding: 6px 10px;
  border-radius: 999px;
  font-weight: 900;
  font-size: 11px;
  letter-spacing: 0.8px;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: rgba(233, 234, 237, 0.9);
}
.art__rate {
  position: absolute;
  bottom: 56px;
  left: 14px;
  font-weight: 1000;
  letter-spacing: -0.5px;
  font-size: 44px;
  color: rgba(233, 234, 237, 0.92);
  text-shadow: 0 18px 50px rgba(0, 0, 0, 0.55);
}
.art__meta {
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.art__line {
  height: 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
}
.art__line--sm {
  width: 72%;
}

.art__card--gold {
  left: 22px;
  top: 26px;
  transform: rotate(-12deg);
  background:
    radial-gradient(220px 140px at 40% 25%, rgba(242, 182, 0, 0.45), transparent 60%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.03));
}
.art__card--blue {
  right: 14px;
  top: 12px;
  transform: rotate(12deg);
  background:
    radial-gradient(220px 140px at 45% 28%, rgba(22, 110, 240, 0.3), transparent 62%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.03));
}
.art__card--red {
  left: 52px;
  bottom: 0;
  transform: rotate(6deg);
  background:
    radial-gradient(220px 140px at 40% 25%, rgba(255, 78, 78, 0.26), transparent 62%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.03));
}
.art__card--coach {
  right: 62px;
  bottom: 10px;
  transform: rotate(-6deg);
  background:
    radial-gradient(220px 140px at 40% 25%, rgba(242, 182, 0, 0.22), transparent 62%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.03));
}
.art__card--coach .art__rate {
  font-size: 40px;
}

.art__spark {
  position: absolute;
  border-radius: 999px;
  filter: blur(12px);
  opacity: 0.9;
}
.art__spark--a {
  width: 120px;
  height: 120px;
  left: 12px;
  top: 18px;
  background: rgba(242, 182, 0, 0.25);
}
.art__spark--b {
  width: 160px;
  height: 160px;
  right: 22px;
  top: 44px;
  background: rgba(60, 160, 255, 0.16);
}
.art__spark--c {
  width: 140px;
  height: 140px;
  right: 46px;
  bottom: 16px;
  background: rgba(255, 90, 90, 0.14);
}

.belowHero {
  padding: 18px 0 20px;
}
.belowHero__grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 22px;
  align-items: start;
}

.sectionHead {
  margin-bottom: 14px;
}
.h2 {
  margin: 0;
  font-size: 22px;
  letter-spacing: -0.2px;
}
.muted {
  margin: 8px 0 0;
  color: var(--muted);
  line-height: 1.55;
}

.how {
  padding: 18px;
  border-radius: var(--radius2);
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.02));
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
}

.steps {
  display: grid;
  gap: 12px;
  margin-top: 12px;
}
.step {
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: 12px;
  align-items: start;
  padding: 14px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(0, 0, 0, 0.18);
}
.step__n {
  width: 40px;
  height: 40px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 1000;
  color: #1b1b1b;
  background: linear-gradient(180deg, var(--accent), var(--accent2));
  box-shadow: 0 14px 35px rgba(242, 182, 0, 0.18);
}
.step__t {
  margin: 0;
  font-size: 15px;
  letter-spacing: -0.1px;
}
.step__p {
  margin: 6px 0 0;
  color: rgba(233, 234, 237, 0.7);
  line-height: 1.55;
  font-size: 14px;
}

.how__note {
  margin-top: 12px;
  padding: 14px;
  border-radius: 16px;
  border: 1px solid rgba(242, 182, 0, 0.2);
  background: rgba(242, 182, 0, 0.08);
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
.how__noteIcon {
  width: 16px;
  height: 16px;
  margin-top: 3px;
  border-radius: 6px;
  background: var(--accent);
  box-shadow: 0 0 0 7px rgba(242, 182, 0, 0.12);
  flex: 0 0 auto;
}
.how__noteText {
  color: rgba(233, 234, 237, 0.74);
  line-height: 1.55;
  font-size: 13px;
  font-weight: 700;
}

.side {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.card {
  border-radius: var(--radius2);
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.02));
  box-shadow: 0 14px 48px rgba(0, 0, 0, 0.45);
  overflow: hidden;
}

.card__head {
  padding: 16px 16px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.card__title {
  margin: 0;
  font-size: 16px;
  letter-spacing: -0.1px;
}
.card__sub {
  margin: 6px 0 0;
  color: rgba(233, 234, 237, 0.62);
  font-weight: 700;
  font-size: 13px;
}

.prize {
  position: relative;
}
.prize::before {
  content: "";
  position: absolute;
  inset: -80px -120px auto auto;
  width: 240px;
  height: 240px;
  background: radial-gradient(circle at 35% 35%, rgba(242, 182, 0, 0.25), transparent 60%);
  filter: blur(10px);
}
.prize__rows {
  padding: 12px 16px 14px;
  display: grid;
  gap: 10px;
}
.prize__row {
  display: grid;
  grid-template-columns: 46px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 10px 10px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(0, 0, 0, 0.18);
}
.prize__label {
  color: rgba(233, 234, 237, 0.78);
  font-weight: 800;
  font-size: 13px;
}
.prize__value {
  color: rgba(233, 234, 237, 0.92);
  font-weight: 1000;
  letter-spacing: 0.2px;
}

.badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 30px;
  border-radius: 12px;
  font-weight: 1000;
  color: #1b1b1b;
  border: 1px solid rgba(255, 255, 255, 0.12);
}
.badge--gold {
  background: linear-gradient(180deg, #f6cc4a, #d8a415);
}
.badge--silver {
  background: linear-gradient(180deg, #d7dbe2, #9aa3b2);
}
.badge--bronze {
  background: linear-gradient(180deg, #d9a37a, #b97644);
}

.prize__cta {
  padding: 0 16px 16px;
  display: grid;
  gap: 10px;
}

.stats {
  padding: 0;
}
.stats__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding: 12px;
}
.stat {
  padding: 14px 14px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(0, 0, 0, 0.18);
  position: relative;
  overflow: hidden;
}
.stat::before {
  content: "";
  position: absolute;
  inset: -60px -80px auto auto;
  width: 180px;
  height: 180px;
  background: radial-gradient(circle at 35% 35%, rgba(255, 255, 255, 0.08), transparent 60%);
  filter: blur(10px);
  opacity: 0.9;
}
.stat__k {
  position: relative;
  font-size: 12px;
  font-weight: 800;
  color: rgba(233, 234, 237, 0.62);
  letter-spacing: 0.3px;
}
.stat__v {
  position: relative;
  margin-top: 6px;
  font-size: 22px;
  font-weight: 1000;
  letter-spacing: -0.2px;
  color: rgba(233, 234, 237, 0.92);
}

.footer {
  margin-top: 20px;
  padding: 18px 0 30px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.footer__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding-top: 16px;
}
.footer__left {
  display: flex;
  align-items: center;
  gap: 10px;
}
.footer__brand {
  font-weight: 1000;
  letter-spacing: 0.2px;
}
.footer__muted {
  color: rgba(233, 234, 237, 0.62);
  font-weight: 800;
}
.footer__right {
  display: flex;
  align-items: center;
  gap: 10px;
  color: rgba(233, 234, 237, 0.68);
  font-weight: 800;
  font-size: 13px;
}
.footer__right a:hover {
  color: rgba(233, 234, 237, 0.92);
}
.sep {
  opacity: 0.55;
}

@media (max-width: 980px) {
  .hero__grid {
    grid-template-columns: 1fr;
    padding: 20px;
  }
  .hero__ghostLine { font-size: 72px; }
  .hero__ghostLine--sm { font-size: 34px; }
  .belowHero__grid { grid-template-columns: 1fr; }
  .hero__art { min-height: 320px; }
}

@media (max-width: 520px) {
  .h1 { font-size: 38px; }
  .btn { padding: 8px 10px; }
  .stats__grid { grid-template-columns: 1fr; }
}

/* ── Responsivo: sidebars colapsam em telas pequenas ─── */

/* Abaixo de 980px: sidebar esquerda oculta, right panel permanece */
@media (max-width: 980px) {
  :root { --sidebar-w: 0px; }
  .pNav { 
    display: none; 
    width: 0;
    overflow: hidden;
  }
  /* pMain se ajusta: sem margem esquerda, com margem direita para right panel */
  .pMain {
    margin-left: 0 !important;
    width: calc(100% - var(--right-panel-w)) !important;
    margin-right: var(--right-panel-w) !important;
  }
}

/* Abaixo de 600px: right panel também oculta */
@media (max-width: 600px) {
  :root { --right-panel-w: 0px; }
  .pRightPanel { display: none; }
  .pMain {
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
    padding: 16px 16px 80px !important;
  }
}




/* ===== Auth pages (login/cadastro) ===== */

.authWrap {
  margin: 28px 0 34px;
  display: grid;
  grid-template-columns: 1fr 0.55fr;
  gap: 18px;
  align-items: start;
}

.authCard {
  border-radius: var(--radius2);
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.02));
  box-shadow: 0 18px 55px rgba(0, 0, 0, 0.5);
  padding: 18px;
  overflow: hidden;
  position: relative;
}

.authCard::before {
  content: "";
  position: absolute;
  inset: -90px -120px auto auto;
  width: 260px;
  height: 260px;
  background: radial-gradient(circle at 35% 35%, rgba(242, 182, 0, 0.18), transparent 62%);
  filter: blur(10px);
  opacity: 0.95;
  pointer-events: none;
}

.authHead {
  position: relative;
}
.authTitle {
  margin: 2px 0 6px;
  font-size: 26px;
  letter-spacing: -0.2px;
}
.authSub {
  margin: 0 0 14px;
  color: rgba(233, 234, 237, 0.7);
  line-height: 1.55;
  max-width: 70ch;
}

.authAlert {
  position: relative;
  border-radius: 14px;
  padding: 12px 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(0, 0, 0, 0.2);
  margin: 0 0 12px;
  font-weight: 800;
  color: rgba(233, 234, 237, 0.9);
}
.authAlert--err {
  border-color: rgba(255, 90, 90, 0.22);
  background: rgba(255, 90, 90, 0.1);
}
.authAlert--ok {
  border-color: rgba(120, 255, 160, 0.18);
  background: rgba(120, 255, 160, 0.1);
}

.authForm {
  position: relative;
  display: grid;
  gap: 12px;
}

.field {
  display: grid;
  gap: 8px;
}
.label {
  font-weight: 900;
  font-size: 12px;
  letter-spacing: 0.3px;
  color: rgba(233, 234, 237, 0.7);
}

.input {
  width: 100%;
  padding: 12px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(0, 0, 0, 0.18);
  color: rgba(233, 234, 237, 0.92);
  outline: none;
  font-weight: 800;
}
.input:focus {
  border-color: rgba(242, 182, 0, 0.28);
  box-shadow: 0 0 0 6px rgba(242, 182, 0, 0.1);
}
.help {
  font-size: 12px;
  color: rgba(233, 234, 237, 0.55);
  font-weight: 700;
}

.grid2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.authFoot {
  margin-top: 2px;
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: center;
}
.authMuted {
  color: rgba(233, 234, 237, 0.62);
  font-weight: 800;
  font-size: 13px;
}
.authLink {
  font-weight: 1000;
  color: var(--accent);
}
.authLink:hover {
  filter: brightness(1.05);
}

.authSide {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.authSideCard {
  border-radius: var(--radius2);
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(0, 0, 0, 0.18);
  padding: 14px;
}
.authSideTitle {
  font-weight: 1000;
  letter-spacing: -0.1px;
}
.authSideText {
  margin-top: 8px;
  color: rgba(233, 234, 237, 0.7);
  font-weight: 750;
  line-height: 1.55;
}

/* Phone picker */
.phoneRow {
  display: grid;
  grid-template-columns: 170px 1fr;
  gap: 10px;
  align-items: center;
}

.phonePick {
  height: 46px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(0, 0, 0, 0.18);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 12px;
  cursor: pointer;
  user-select: none;
  position: relative;
}
.phonePick:hover {
  background: rgba(0, 0, 0, 0.24);
}
.flagBox {
  width: 28px;
  height: 20px;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.04);
  display: flex;
  align-items: center;
  justify-content: center;
}
.flagBox img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.dial {
  font-weight: 1000;
  color: rgba(233, 234, 237, 0.92);
}
.chev {
  margin-left: auto;
  width: 10px;
  height: 10px;
  border-right: 2px solid rgba(233, 234, 237, 0.55);
  border-bottom: 2px solid rgba(233, 234, 237, 0.55);
  transform: rotate(45deg);
}

.phoneInput {
  height: 46px;
}

/* Dropdown */
.countryDrop {
  margin-top: 10px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(10, 10, 10, 0.92);
  backdrop-filter: blur(10px);
  overflow: hidden;
}

.countryDrop__top {
  padding: 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.countrySearch {
  height: 44px;
}

.countryDrop__list {
  max-height: 340px;
  overflow: auto;
  padding: 6px;
}

.countryRow {
  width: 100%;
  display: grid;
  grid-template-columns: 34px 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 10px 10px;
  border-radius: 14px;
  border: 1px solid transparent;
  background: transparent;
  color: rgba(233, 234, 237, 0.9);
  cursor: pointer;
  text-align: left;
}
.countryRow:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.08);
}
.countryRow__flag {
  width: 28px;
  height: 20px;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.04);
}
.countryRow__flag img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.countryRow__name {
  font-weight: 850;
}
.countryRow__dial {
  font-weight: 1000;
  color: rgba(233, 234, 237, 0.7);
}

.countryDrop__foot {
  padding: 10px 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.mutedMini {
  color: rgba(233, 234, 237, 0.5);
  font-weight: 750;
  font-size: 12px;
}

.countryEmpty {
  padding: 14px 12px;
  color: rgba(233, 234, 237, 0.6);
  font-weight: 800;
}

/* Responsive */
@media (max-width: 980px) {
  .authWrap {
    grid-template-columns: 1fr;
  }
  .grid2 {
    grid-template-columns: 1fr;
  }
  .phoneRow {
    grid-template-columns: 1fr;
  }
}

/* ===== User menu (topbar) ===== */
.userChip {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0;
  border-radius: 20px;
}
.userChip__avatar {
  width: 42px;
  height: 42px;
  border-radius: 999px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.04);
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.45);
  flex: 0 0 auto;
}
.userChip__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.userChip__meta {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}
.userChip__name {
  display: flex;
  align-items: center;
  gap: 5px;
  font-weight: 1000;
  font-size: 15px;
  letter-spacing: -0.3px;
  color: rgba(236, 231, 220, 0.92);
}
.userChip__name .verified-badge {
  flex-shrink: 0;
}
.userChip__balance {
  margin-top: 2px;
  font-weight: 900;
  font-size: 10px;
  color: rgba(213, 193, 152, 0.9);
  transition: color 0.3s ease, transform 0.3s ease;
}
/* Animação sutil quando saldo é atualizado via AJAX */
.userChip__balance.balance-updated {
  color: #22c55e;
  animation: balancePulse 0.6s ease-out;
}
@keyframes balancePulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.08); }
  100% { transform: scale(1); }
}
.userChip__drop {
  width: 56px;
  height: 56px;
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.14);
  border: 1px solid rgba(242, 182, 0, 0.26);
  box-shadow:
    0 0 0 4px rgba(242, 182, 0, 0.08),
    0 18px 55px rgba(0, 0, 0, 0.45);
  margin-left: 10px;
  flex: 0 0 auto;
}
.userChip__chev {
  width: 0;
  height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-top: 10px solid rgba(233, 234, 237, 0.85);
  transform: translateY(2px);
}
.userChip:hover .userChip__drop {
  background: rgba(0, 0, 0, 0.2);
  border-color: rgba(242, 182, 0, 0.32);
}
.userChip:focus-visible {
  outline: 2px solid rgba(242, 182, 0, 0.38);
  outline-offset: 4px;
}

@media (max-width: 520px) {
  .userChip__name {
    font-size: 18px;
  }
  .userChip__balance {
    font-size: 14px;
  }
  .userChip__avatar {
    width: 44px;
    height: 44px;
  }
  .userChip__drop {
    width: 48px;
    height: 48px;
    border-radius: 16px;
  }
  .userChip__chev {
    border-left-width: 7px;
    border-right-width: 7px;
    border-top-width: 9px;
  }
}

/* ===== Profile v2 (layout como a referência) ===== */
.profileV2 .container {
  max-width: 1440px;
}

/* ── Shell principal (sidebar fixa + conteúdo + right panel) ── */
.pShell {
  display: flex;
  min-height: 100vh;
  padding-top: 0; /* topbar removida */
}

/* ── Sidebar fixa à esquerda ────────────────────────────── */
.pNav {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: var(--sidebar-w);
  background: var(--bg-chrome);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overflow-x: hidden;
  z-index: 110;
  scrollbar-width: none;
}
.pNav::-webkit-scrollbar { display: none; }

/* Sem linhas no sidebar */
.pNav::after { display: none; }

/* Logo da sidebar — topo (altura generosa sem a topbar) */
.pNav__brand {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 72px;
  padding: 0 24px; /* mesmo padding lateral dos itens (margin 8px + padding 16px) */
  flex-shrink: 0;
  text-decoration: none;
}
.pNav__brand-mark {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  overflow: hidden;
  flex: 0 0 auto;
}
.pNav__brand-mark img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.pNav__brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1.05;
}
.pNav__brand-name {
  font-weight: 900;
  font-size: 18px;
}
.pNav__brand-pro  { color: var(--text); }
.pNav__brand-squad { color: var(--accent); }

/* Grupo label no menu */
.pNav__group {
  padding: 10px 16px 2px;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.18);
}

.pNav__menu {
  flex: 1;
  padding: 8px 0;
}

.pNav__item {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 10px 14px 10px 16px;
  margin: 1px 8px;
  border-radius: 6px;
  color: rgba(255, 255, 255, 0.60);
  text-decoration: none;
  font-weight: 700;
  letter-spacing: 0.5px;
  font-size: 11px;
  text-transform: uppercase;
  transition: color 0.15s, background 0.15s;
  position: relative;
}

.pNav__item:hover {
  color: rgba(255, 255, 255, 0.82);
  background: rgba(255, 255, 255, 0.06);
}

.pNav__item.is-active {
  color: var(--accent);
  background: rgba(242, 182, 0, 0.1);
}

/* Indicador ativo: barra vertical à esquerda */
.pNav__item.is-active::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 18px;
  border-radius: 0 3px 3px 0;
  background: var(--accent);
}

.pNav__icon {
  width: 15px;
  height: 15px;
  display: inline-block;
  background-color: currentColor;
  -webkit-mask: var(--icon) no-repeat center / contain;
  mask: var(--icon) no-repeat center / contain;
  flex: 0 0 auto;
  opacity: 0.85;
  transition: opacity 0.15s;
}

.pNav__item:hover .pNav__icon { opacity: 1; }
.pNav__item.is-active .pNav__icon { opacity: 1; }
.pNav__text { flex: 1; }

/* ── Item especial: Assinar ── */
.pNav__item--special {
  color: var(--accent, #f2b600);
  margin-top: 6px;
}
.pNav__item--special .pNav__icon {
  opacity: 1;
  background-color: var(--accent, #f2b600);
}
.pNav__item--special:hover {
  color: var(--accent, #f2b600);
  background: rgba(242, 182, 0, 0.1);
}
.pNav__item--special.is-active {
  color: var(--accent, #f2b600);
  background: rgba(242, 182, 0, 0.14);
}

/* Main content area — entre as duas sidebars */
.pMain {
  flex: 1;
  min-width: 0;
  margin-left: var(--sidebar-w);
  margin-right: var(--right-panel-w);
  padding: 24px 28px 48px;
  width: calc(100% - var(--sidebar-w) - var(--right-panel-w));
  max-width: 100%;
}
.pTopGrid {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  gap: 18px;
  width: 100%;
  box-sizing: border-box;
  min-width: 0;
}
.pTopGrid > * {
  min-width: 0;
}
.pRightCol {
  display: grid;
  grid-template-rows: auto auto;
  gap: 18px;
  min-width: 0;
}
.pRightCol .pCard {
  min-width: 0;
  overflow: hidden;
}

/* Cards */
.pCard {
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: linear-gradient(165deg, rgba(22, 22, 24, 0.95) 0%, rgba(15, 15, 16, 0.98) 100%);
  padding: 24px;
  box-shadow: 
    0 4px 24px rgba(0, 0, 0, 0.3),
    0 1px 2px rgba(0, 0, 0, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.03);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.pCard:hover {
  box-shadow: 
    0 8px 32px rgba(0, 0, 0, 0.4),
    0 2px 4px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
/* Highlight blink animation for deposit card */
.pCard--highlight {
  animation: pCardHighlight 0.6s ease-in-out 3;
}
@keyframes pCardHighlight {
  0%, 100% { box-shadow: 0 4px 24px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.03); border-color: rgba(255,255,255,0.06); }
  50% { box-shadow: 0 0 20px rgba(245,200,75,0.4), 0 0 40px rgba(245,200,75,0.15), inset 0 1px 0 rgba(245,200,75,0.1); border-color: rgba(245,200,75,0.5); }
}
/* Gold blink animation for input fields */
.pInput--goldBlink {
  animation: pInputGoldBlink 0.5s ease-in-out 4;
}
@keyframes pInputGoldBlink {
  0%, 100% { box-shadow: none; border-color: rgba(255,255,255,0.08); }
  50% { box-shadow: 0 0 12px rgba(245,200,75,0.5), inset 0 0 6px rgba(245,200,75,0.15); border-color: rgba(245,200,75,0.7); }
}
.pCard__title {
  font-weight: 900;
  font-size: 15px;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.95);
  margin-bottom: 10px;
  text-align: center;
}
.pCard__subtitle {
  font-size: 12px;
  opacity: 0.55;
  text-align: center;
  margin-bottom: 16px;
  font-weight: 600;
  line-height: 1.5;
}
.pCard__subtitle--left {
  text-align: left;
}

/* TopGrid single column (profile integrated) */
.pTopGrid--single {
  display: block;
}
.pTopGrid--single .pRightCol {
  max-width: none;
}

/* Profile card integrated header */
.pCard--profile {
  padding: 0;
  overflow: hidden;
  border-radius: 24px;
  background: linear-gradient(165deg, rgba(20, 20, 22, 0.98) 0%, rgba(12, 12, 13, 1) 100%);
  border: 1px solid rgba(245, 200, 75, 0.08);
  box-shadow: 
    0 8px 40px rgba(0, 0, 0, 0.4),
    0 2px 8px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(245, 200, 75, 0.05);
}

/* Grid de duas colunas */
.pProfileGrid {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 0;
  min-height: 380px;
}

/* Coluna Esquerda */
.pProfileLeft {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 36px 32px;
  background: linear-gradient(180deg, 
    rgba(245, 200, 75, 0.12) 0%, 
    rgba(245, 200, 75, 0.04) 40%,
    rgba(0, 0, 0, 0.1) 100%
  );
  border-right: 1px solid rgba(255, 255, 255, 0.04);
  text-align: center;
  position: relative;
}
.pProfile__avatar--large {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: rgba(255,255,255,0.04);
  flex-shrink: 0;
  /* Sem ring preto fixo — ele engolia a borda da moldura tornando-a visualmente fina.
     Apenas sombra difusa para profundidade, sem outline de ring. */
  box-shadow: 0 8px 32px rgba(245, 200, 75, 0.2);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible; /* moldura pode extravasar */
}
.pProfile__avatar--large:hover {
  transform: scale(1.05);
  box-shadow: 0 12px 40px rgba(245, 200, 75, 0.3);
}
/* Quando sem moldura: mostra anel sutil para definir o avatar */
.pProfile__avatar--large:not(:has(.av-wrap--framed)) {
  box-shadow:
    0 8px 32px rgba(245, 200, 75, 0.2),
    0 0 0 3px rgba(0, 0, 0, 0.35);
}
.pProfile__avatar--large:not(:has(.av-wrap--framed)):hover {
  box-shadow:
    0 12px 40px rgba(245, 200, 75, 0.3),
    0 0 0 4px rgba(0, 0, 0, 0.4);
}
/* Direct <img> fallback (sem render_avatar) */
.pProfile__avatar--large > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 50%;
}
/* render_avatar() — centralizado via style.css global (.av-wrap, .av-img) */
.pProfileLeft__info {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.pProfileLeft__stats {
  display: flex;
  gap: 16px;
  margin-top: 8px;
}
.pProfileLeft__stats--centered {
  justify-content: center;
  width: 100%;
}
.pProfileLeft__stats--cards {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.pProfileLeft__expBox {
  width: 100%;
  padding: 12px 0;
}
.pProfile__name {
  font-weight: 900;
  font-size: 20px;
  color: #fff;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}
.pProfile__lp {
  font-weight: 800;
  font-size: 13px;
  color: rgba(245, 200, 75, 1);
  text-shadow: 0 0 20px rgba(245, 200, 75, 0.4);
}
.pProfile__btns {
  display: flex;
  gap: 10px;
  margin-top: 8px;
  justify-content: center;
}

/* Language flag selector in pProfileLeft */
.pProfileLeft__langLabel {
  text-align: center;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--text2, #9ca3af);
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.pProfileLeft__langSel {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}
.pFlagBtn {
  background: transparent;
  border: 2px solid transparent;
  border-radius: 6px;
  padding: 3px;
  cursor: pointer;
  opacity: 0.45;
  transition: opacity .2s, border-color .2s, transform .15s;
  line-height: 0;
}
.pFlagBtn:hover {
  opacity: 0.8;
  transform: scale(1.08);
}
.pFlagBtn--active {
  opacity: 1;
  border-color: var(--accent, #f59e0b);
  border-radius: 6px;
}

/* Coluna Direita */
.pProfileRight {
  display: flex;
  flex-direction: column;
  background: rgba(0, 0, 0, 0.15);
}

/* Legacy avatar (keep for compatibility) */
.pProfile__avatar {
  width: 72px;
  height: 72px;
  border-radius: 999px;
  overflow: hidden;
  border: 3px solid rgba(245, 200, 75, 0.4);
  background: linear-gradient(135deg, rgba(245, 200, 75, 0.1), rgba(255, 180, 50, 0.05));
  flex-shrink: 0;
  box-shadow: 0 4px 20px rgba(245, 200, 75, 0.2);
}
.pProfile__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.pProfileHeader {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 24px;
  background: linear-gradient(135deg, rgba(245, 200, 75, 0.06) 0%, rgba(255, 180, 50, 0.02) 100%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}
.pProfileHeader__info {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
  min-width: 0;
}

.pProfileHeader__stats {
  display: flex;
  gap: 16px;
  flex-shrink: 0;
}
.pProfileHeader__stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 14px 20px;
  background: linear-gradient(165deg, rgba(20, 20, 22, 0.9) 0%, rgba(10, 10, 11, 0.95) 100%);
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.04);
  box-shadow: 
    0 4px 16px rgba(0, 0, 0, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.02);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.pProfileHeader__stat:hover {
  transform: translateY(-2px);
  box-shadow: 
    0 8px 24px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.03);
}
.pProfileHeader__statLabel {
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.5;
  font-weight: 800;
}
.pProfileHeader__statValue {
  font-size: 24px;
  font-weight: 900;
  background: linear-gradient(135deg, rgba(245, 200, 75, 1), rgba(255, 180, 50, 1));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-shadow: none;
}

/* EXP Box integrated */
.pProfileHeader__expBox {
  padding: 16px 24px 20px;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.2) 100%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}
.pProfileHeader__expMeta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  font-weight: 800;
  opacity: 0.65;
  margin-bottom: 8px;
}
.pProfile__expBar {
  height: 10px;
  border-radius: 5px;
  background: rgba(0, 0, 0, 0.4);
  overflow: hidden;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3);
}
.pProfile__expBarFill {
  height: 100%;
  border-radius: 5px;
  background: linear-gradient(90deg, rgba(245, 200, 75, 0.9), rgba(255, 180, 50, 1));
  box-shadow: 0 0 12px rgba(245, 200, 75, 0.4);
  transition: width 0.4s ease;
}
.pProfile__expHint {
  margin-top: 8px;
  font-size: 11px;
  opacity: 0.45;
  font-weight: 700;
  text-align: center;
}

/* Resume block */
.pResume {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 8px;
}
.pResume__row {
  display: flex;
  gap: 14px;
  align-items: center;
  padding: 16px 18px;
  background: transparent;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  transition: background 0.2s ease, transform 0.15s ease;
  border-radius: 12px;
  margin-bottom: 2px;
}
.pResume__row:last-child {
  border-bottom: none;
  margin-bottom: 0;
}
.pResume__row:hover {
  background: rgba(255, 255, 255, 0.03);
}
.pResume__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(100, 180, 255, 0.1) 0%, rgba(140, 100, 255, 0.1) 100%);
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.pResume__row:hover .pResume__icon {
  transform: scale(1.05);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}
.pResume__icon svg {
  width: 18px;
  height: 18px;
  stroke: rgba(100, 180, 255, 0.9);
}
.pResume__icon--accent {
  background: linear-gradient(135deg, rgba(245, 200, 75, 0.12) 0%, rgba(255, 160, 50, 0.12) 100%);
}
.pResume__icon--accent svg {
  stroke: rgba(245, 200, 75, 0.95);
}
.pResume__icon--green {
  background: linear-gradient(135deg, rgba(100, 220, 120, 0.12) 0%, rgba(60, 180, 100, 0.12) 100%);
}
.pResume__icon--green svg {
  stroke: rgba(100, 220, 120, 0.95);
}
.pResume__content {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
  min-width: 0;
}
.pResume__k {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  opacity: 0.45;
}
.pResume__v {
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  display: flex;
  align-items: center;
  gap: 10px;
}
.pResume__noCpf {
  opacity: 0.35;
  font-style: italic;
  font-weight: 500;
}
.pResume__cpfWarning {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 500;
  color: #f59e0b;
  opacity: 0.85;
  margin-top: 2px;
}
.pResume__cpfWarning svg {
  flex-shrink: 0;
  color: #f59e0b;
}
.pResume__hint {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  font-size: 9px;
  font-weight: 700;
  cursor: help;
  margin-left: 4px;
  opacity: 0.6;
  vertical-align: middle;
  transition: all 0.2s ease;
}
.pResume__hint:hover {
  opacity: 1;
  background: rgba(255, 255, 255, 0.2);
  transform: scale(1.1);
}

/* Custom Tooltip for Withdrawable Balance */
.pCustomTooltip {
  position: fixed;
  z-index: 10000;
  max-width: 280px;
  padding: 12px 16px;
  background: linear-gradient(135deg, rgba(30, 30, 32, 0.98) 0%, rgba(20, 20, 21, 0.99) 100%);
  border: 1px solid rgba(245, 200, 75, 0.25);
  border-radius: 12px;
  color: rgba(255, 255, 255, 0.9);
  font-size: 13px;
  line-height: 1.5;
  box-shadow: 
    0 8px 32px rgba(0, 0, 0, 0.4),
    0 0 0 1px rgba(255, 255, 255, 0.05),
    0 0 20px rgba(245, 200, 75, 0.08);
  opacity: 0;
  transform: translateY(5px);
  transition: all 0.2s ease;
  pointer-events: none;
}
.pCustomTooltip--visible {
  opacity: 1;
  transform: translateY(0);
}
.pCustomTooltip::before {
  content: '';
  position: absolute;
  top: -6px;
  left: 50%;
  transform: translateX(-50%);
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-bottom: 6px solid rgba(245, 200, 75, 0.25);
}
.pCustomTooltip::after {
  content: '';
  position: absolute;
  top: -4px;
  left: 50%;
  transform: translateX(-50%);
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 5px solid rgba(30, 30, 32, 0.98);
}

/* Custom Tooltip variant for Promotional Balance (blue theme) */
.pCustomTooltip--promo {
  border-color: rgba(99, 179, 237, 0.35);
  box-shadow: 
    0 8px 32px rgba(0, 0, 0, 0.4),
    0 0 0 1px rgba(255, 255, 255, 0.05),
    0 0 20px rgba(99, 179, 237, 0.12);
}
.pCustomTooltip--promo::before {
  border-bottom-color: rgba(99, 179, 237, 0.35);
}
/* Support Balance Tooltip (Yellow/Amber Theme) */
.pCustomTooltip--support {
  border-color: rgba(251, 191, 36, 0.35);
  box-shadow: 
    0 8px 32px rgba(0, 0, 0, 0.4),
    0 0 0 1px rgba(255, 255, 255, 0.05),
    0 0 20px rgba(251, 191, 36, 0.12);
}
.pCustomTooltip--support::before {
  border-bottom-color: rgba(251, 191, 36, 0.35);
}

/* Modal Icon Styles */
.pModal__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(245, 200, 75, 0.12) 0%, rgba(255, 180, 50, 0.08) 100%);
  border: 1px solid rgba(245, 200, 75, 0.2);
}
.pModal__icon svg {
  color: rgba(245, 200, 75, 0.9);
}
.pModal__icon--warning {
  background: linear-gradient(135deg, rgba(255, 180, 60, 0.15) 0%, rgba(220, 120, 40, 0.1) 100%);
  border-color: rgba(255, 180, 60, 0.25);
}
.pModal__icon--warning svg {
  color: rgba(255, 180, 60, 0.95);
}
.pModal__content--compact {
  max-width: 380px;
  text-align: center;
}
.pModal__content--compact .pModal__title {
  text-align: center;
}
.pModal__content--compact .pModal__desc {
  text-align: center;
  margin-bottom: 20px;
}
.pModal__content--compact .pModal__btns {
  justify-content: center;
}

.pReferralCount {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 28px;
  padding: 0 12px;
  font-size: 14px;
  font-weight: 900;
  color: #111;
  background: linear-gradient(135deg, rgba(245, 200, 75, 1) 0%, rgba(255, 180, 50, 1) 100%);
  border-radius: 14px;
  box-shadow: 
    0 4px 12px rgba(245, 200, 75, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

/* Form */
.pForm {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.pInput {
  height: 48px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: linear-gradient(165deg, rgba(20, 20, 22, 0.8) 0%, rgba(15, 15, 16, 0.9) 100%);
  padding: 0 16px;
  color: #fff;
  outline: none;
  font-size: 14px;
  font-weight: 600;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2);
}
.pInput:focus {
  border-color: rgba(245, 200, 75, 0.4);
  box-shadow: 
    inset 0 2px 4px rgba(0, 0, 0, 0.2),
    0 0 0 3px rgba(245, 200, 75, 0.1);
}
.pInput::placeholder {
  opacity: 0.45;
  font-weight: 500;
}
.pInput--sm {
  height: 42px;
  font-size: 13px;
}
.pBtn {
  height: 48px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: linear-gradient(165deg, rgba(30, 30, 32, 0.9) 0%, rgba(20, 20, 21, 0.95) 100%);
  color: #fff;
  font-weight: 800;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}
.pBtn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}
.pBtn:active {
  transform: translateY(0);
}
.pBtn--primary {
  background: linear-gradient(135deg, rgba(245, 200, 75, 1) 0%, rgba(255, 180, 50, 1) 100%);
  border-color: rgba(245, 200, 75, 0.4);
  color: #111;
  box-shadow: 
    0 4px 16px rgba(245, 200, 75, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
}
.pBtn--primary:hover {
  box-shadow: 
    0 6px 24px rgba(245, 200, 75, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
.pBtn--ghost {
  background: linear-gradient(165deg, rgba(40, 40, 42, 0.8) 0%, rgba(25, 25, 26, 0.9) 100%);
  border-color: rgba(255, 255, 255, 0.1);
}
.pBtn--ghost:hover {
  background: linear-gradient(165deg, rgba(50, 50, 52, 0.9) 0%, rgba(30, 30, 31, 0.95) 100%);
  border-color: rgba(255, 255, 255, 0.15);
}
.pBtn--danger {
  background: linear-gradient(135deg, rgba(220, 60, 60, 1) 0%, rgba(180, 40, 40, 1) 100%);
  border-color: rgba(220, 60, 60, 0.4);
  color: #fff;
  box-shadow: 
    0 4px 16px rgba(220, 60, 60, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.15);
}
.pBtn--danger:hover {
  background: linear-gradient(135deg, rgba(240, 70, 70, 1) 0%, rgba(200, 50, 50, 1) 100%);
  box-shadow: 
    0 6px 24px rgba(220, 60, 60, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
}
.pBtn--sm {
  height: 42px;
  padding: 0 16px;
  font-size: 13px;
}
.pBtn--loading {
  opacity: 0.7;
  cursor: not-allowed;
  transform: none !important;
}
.pBtn .btnSpinner {
  display: inline-block;
  width: 18px;
  height: 18px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top-color: #fff;
  border-radius: 50%;
  animation: btnSpin 0.7s linear infinite;
  vertical-align: middle;
}
.pBtn--primary .btnSpinner {
  border-color: rgba(21, 21, 21, 0.3);
  border-top-color: #151515;
}
@keyframes btnSpin {
  to {
    transform: rotate(360deg);
  }
}

/* Alerts inline */
.pAlert {
  border-radius: 12px;
  padding: 10px 12px;
  margin-bottom: 10px;
  font-weight: 800;
  font-size: 12px;
}
.pAlert--err,
.pAlert--error {
  background: var(--error-bg);
  border: 1px solid rgba(239, 68, 68, 0.25);
  color: #fca5a5;
}
.pAlert--ok,
.pAlert--success {
  background: var(--success-bg);
  border: 1px solid rgba(34, 197, 94, 0.25);
  color: #86efac;
}
.pAlert--warning {
  background: var(--warning-bg);
  border: 1px solid rgba(245, 158, 11, 0.25);
  color: #fcd34d;
}
.pAlert--info {
  background: var(--info-bg);
  border: 1px solid rgba(59, 130, 246, 0.25);
  color: #93c5fd;
}
.pAlert--sm {
  font-size: 11px;
  padding: 8px 10px;
}

.pTwoCol {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin-top: 18px;
}

.pTabs {
  display: flex;
  gap: 10px;
  margin-bottom: 6px;
}
.pTabs--single {
  margin-bottom: 0;
}
.pTabs--inline {
  display: inline-flex;
  margin-bottom: 0;
}
.pTabs--withHint {
  display: flex;
  align-items: center;
  gap: 16px;
}
.pTabs__options {
  display: flex;
  gap: 10px;
}
.pTabs__hint {
  font-size: 11px;
  opacity: 0.6;
  font-weight: 700;
}
.pTab {
  display: flex;
  align-items: center;
  gap: 8px;
}
.pTab input {
  accent-color: rgba(245, 200, 75, 0.95);
}
.pTab span {
  font-weight: 900;
  opacity: 0.85;
  font-size: 12px;
}

.pGrid3 {
  display: grid;
  grid-template-columns: 120px 1fr 120px;
  gap: 10px;
}
.pGrid3__wide {
  grid-column: 2 / 3;
}
.pHint {
  opacity: 0.55;
  font-size: 11px;
  margin-top: 8px;
}

/* Deposit grid - 2 colunas (input + botão) ocupando toda largura */
.pGrid3--deposit {
  display: grid;
  grid-template-columns: 1fr 120px !important;
}

/* Tabs single (só PIX) */
.pTabs--single {
  margin-bottom: 10px;
}

/* Tables */
.pTableBlock {
  margin-top: 18px;
}
.pBlockTitle {
  font-weight: 900;
  opacity: 0.85;
  margin: 18px 0 10px;
}
.pTableWrap {
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(0, 0, 0, 0.22);
  overflow-x: auto;
}
.pTableWrap--desktop {
  display: block;
}
.pTable {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
.pTable thead th {
  text-align: left;
  padding: 12px 14px;
  opacity: 0.7;
  font-weight: 900;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  white-space: nowrap;
}
.pTable tbody td {
  padding: 12px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  opacity: 0.9;
}
.pTable tbody tr:last-child td {
  border-bottom: 0;
}
.pEmpty {
  opacity: 0.6;
}
.pMuted {
  opacity: 0.6;
}
.pMono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

/* Mobile Cards - Hidden by default on desktop */
.pMobileCards {
  display: none;
}

/* ===== Mobile Cards Styling ===== */
@media (max-width: 768px) {
  .pTableWrap--desktop {
    display: none !important;
  }
  .pMobileCards {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  .pMobileCard {
    background: linear-gradient(135deg, rgba(20, 20, 21, 0.95) 0%, rgba(15, 15, 16, 0.98) 100%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    padding: 16px;
    transition:
      transform 0.15s ease,
      box-shadow 0.15s ease;
  }
  .pMobileCard:active {
    transform: scale(0.98);
  }

  .pMobileCard--empty {
    background: rgba(0, 0, 0, 0.22);
    border: 1px dashed rgba(255, 255, 255, 0.12);
    padding: 24px;
    text-align: center;
  }
  .pMobileCard__emptyText {
    opacity: 0.5;
    font-size: 13px;
    font-weight: 600;
  }

  .pMobileCard__header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 8px;
  }

  .pMobileCard__type {
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    opacity: 0.7;
    background: rgba(255, 255, 255, 0.06);
    padding: 4px 10px;
    border-radius: 6px;
  }

  .pMobileCard__status {
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    padding: 4px 10px;
    border-radius: 6px;
  }
  .pMobileCard__status--success {
    background: rgba(34, 197, 94, 0.15);
    color: #22c55e;
    border: 1px solid rgba(34, 197, 94, 0.25);
  }
  .pMobileCard__status--warning {
    background: rgba(245, 158, 11, 0.15);
    color: #f59e0b;
    border: 1px solid rgba(245, 158, 11, 0.25);
  }
  .pMobileCard__status--neutral {
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.12);
  }

  .pMobileCard__value {
    font-size: 24px;
    font-weight: 900;
    color: rgba(245, 200, 75, 0.95);
    margin-bottom: 12px;
  }
  .pMobileCard__value--sm {
    font-size: 16px;
    margin-bottom: 0;
  }
  .pMobileCard__value--green {
    color: #22c55e;
  }

  .pMobileCard__item {
    font-size: 14px;
    font-weight: 800;
    color: #fff;
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .pMobileCard__badge {
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    background: linear-gradient(135deg, rgba(100, 180, 255, 0.15) 0%, rgba(140, 100, 255, 0.15) 100%);
    border: 1px solid rgba(100, 180, 255, 0.25);
    color: #64b4ff;
    padding: 5px 12px;
    border-radius: 8px;
  }

  .pMobileCard__packName {
    font-size: 15px;
    font-weight: 900;
    color: #fff;
  }
  .pMobileCard__packCards {
    font-size: 11px;
    font-weight: 700;
    opacity: 0.6;
    background: rgba(255, 255, 255, 0.06);
    padding: 4px 10px;
    border-radius: 6px;
  }
  .pMobileCard__packValue {
    font-size: 22px;
    font-weight: 900;
    color: rgba(245, 200, 75, 0.95);
    margin: 8px 0 12px;
  }

  .pMobileCard__balanceRow {
    display: flex;
    align-items: center;
    gap: 12px;
    background: rgba(0, 0, 0, 0.25);
    border-radius: 10px;
    padding: 10px 14px;
    margin-bottom: 12px;
  }
  .pMobileCard__balanceItem {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
  }
  .pMobileCard__balanceLabel {
    font-size: 9px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    opacity: 0.5;
  }
  .pMobileCard__balanceValue {
    font-size: 13px;
    font-weight: 800;
    color: rgba(255, 255, 255, 0.9);
  }
  .pMobileCard__arrow {
    width: 16px;
    height: 16px;
    opacity: 0.4;
    flex-shrink: 0;
  }

  .pMobileCard__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 16px;
    margin-bottom: 8px;
  }
  .pMobileCard__metaItem {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    opacity: 0.7;
  }
  .pMobileCard__icon {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    opacity: 0.6;
  }

  .pMobileCard__footer {
    display: flex;
    align-items: center;
    gap: 6px;
    padding-top: 10px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    font-size: 11px;
    opacity: 0.5;
  }
  .pMobileCard__footer .pMono {
    word-break: break-all;
  }

  .pMobileCard__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    margin-top: 12px;
    padding: 12px 16px;
    border-radius: 10px;
    border: 1px solid rgba(245, 200, 75, 0.35);
    background: linear-gradient(135deg, rgba(245, 200, 75, 0.12) 0%, rgba(245, 180, 75, 0.08) 100%);
    color: rgba(245, 200, 75, 0.95);
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
    transition: all 0.15s ease;
  }
  .pMobileCard__btn:active {
    transform: scale(0.98);
    background: linear-gradient(135deg, rgba(245, 200, 75, 0.18) 0%, rgba(245, 180, 75, 0.12) 100%);
  }
  .pMobileCard__btnIcon {
    width: 16px;
    height: 16px;
  }

  /* Sale card accent */
  .pMobileCard--sale {
    border-left: 3px solid #22c55e;
  }

  /* Purchase card accent */
  .pMobileCard--purchase {
    border-left: 3px solid rgba(100, 180, 255, 0.6);
  }

  /* Deposit card accent */
  .pMobileCard--deposit {
    border-left: 3px solid #22c55e;
  }

  /* Pack card accent */
  .pMobileCard--pack {
    border-left: 3px solid rgba(245, 200, 75, 0.6);
  }

  /* Gift Card card accent */
  .pMobileCard--giftcard {
    border-left: 3px solid rgba(147, 51, 234, 0.6);
  }

  /* Withdraw card accent */
  .pMobileCard--withdraw {
    border-left: 3px solid #ef4444;
  }

  .pMobileCard__value--red {
    color: #ef4444;
  }

  .pMobileCard__code {
    font-size: 14px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 10px;
    letter-spacing: 1px;
  }

  .pMobileCard__statusRow {
    margin-bottom: 10px;
  }
}

/* ===== pStatus badges ===== */
.pStatus {
  display: inline-block;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 4px 10px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.7);
}
.pStatus--success {
  background: rgba(34, 197, 94, 0.15);
  color: #22c55e;
  border: 1px solid rgba(34, 197, 94, 0.25);
}
.pStatus--warning {
  background: rgba(245, 158, 11, 0.15);
  color: #f59e0b;
  border: 1px solid rgba(245, 158, 11, 0.25);
}
.pStatus--error {
  background: rgba(239, 68, 68, 0.15);
  color: #ef4444;
  border: 1px solid rgba(239, 68, 68, 0.25);
}

/* Desktop pMobileCard__value--red/green */
.pMobileCard__value--red {
  color: #ef4444;
  font-weight: 700;
}
.pMobileCard__value--green {
  color: #22c55e;
  font-weight: 700;
}

@media (max-width: 1200px) {
  .pResume__row {
    padding: 12px 14px;
  }
  .pProfileGrid {
    grid-template-columns: 180px 1fr;
  }
  .pProfileHeader {
    flex-wrap: wrap;
    gap: 12px;
  }
  .pProfileHeader__stats {
    width: 100%;
    justify-content: center;
    margin-top: 8px;
  }
}

@media (max-width: 980px) {
  .pShell {
    grid-template-columns: 1fr;
  }
  .pNav {
    position: relative;
    top: auto;
  }
  .pTopGrid {
    grid-template-columns: 1fr;
  }
  .pTwoCol {
    grid-template-columns: 1fr;
  }
  .pGrid3 {
    grid-template-columns: 1fr;
  }
  .pGrid3__wide {
    grid-column: auto;
  }
  .pGrid3--depositCompact {
    grid-template-columns: 1fr;
  }
  .pProfileGrid {
    grid-template-columns: 1fr;
  }
  .pProfileLeft {
    border-right: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    padding: 20px;
  }
  .pProfileHeader {
    flex-direction: column;
    text-align: center;
    padding: 16px;
  }
  .pProfileHeader__info {
    align-items: center;
  }
  .pProfile__btns {
    justify-content: center;
  }
  .pProfileHeader__stats {
    width: 100%;
    justify-content: center;
  }
}

/* ===== Ajustes extras Profile v2 ===== */
.profileV2 .container {
  max-width: 1180px;
}
.pMain {
  min-width: 0;
}

/* pTwoCol alinhado, sem estourar */
.pTwoCol {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 24px;
  margin-top: 24px;
}
.pTwoCol .pCard {
  min-width: 0;
}
.pCard--deposit {
  min-width: 0;
}

/* grid do withdraw/deposit sem overflow */
.pGrid3 {
  display: grid;
  grid-template-columns: minmax(120px, 160px) minmax(0, 1fr) minmax(120px, 140px);
  gap: 12px;
}
.pGrid3--deposit {
  grid-template-columns: minmax(0, 1fr) minmax(120px, 160px);
}
.pGrid3--withdraw {
  grid-template-columns: minmax(120px, 160px) minmax(0, 1fr) minmax(120px, 140px);
}
.pGrid3--giftcard {
  grid-template-columns: minmax(0, 1fr) 140px;
  gap: 14px;
}
.pInput {
  width: 100%;
  box-sizing: border-box;
}

/* Security + Gift Card Row */
.pSecurityGiftRow {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-top: 24px;
}
.pSecurityGiftRow .pCard {
  flex: 1;
  padding: 28px;
}
@media (max-width: 980px) {
  .pSecurityGiftRow {
    grid-template-columns: 1fr;
  }
}
.pCard__title {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 16px;
}
.pCard__titleIcon {
  flex-shrink: 0;
  color: var(--accent);
  filter: drop-shadow(0 2px 8px rgba(245, 200, 75, 0.3));
}
.pHint {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  opacity: 0.5;
  margin-top: 12px;
}
.pHint__icon {
  flex-shrink: 0;
  opacity: 0.7;
}
.pHint__link {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.pHint__link:hover {
  opacity: 0.85;
}

/* upload input escondido */
.pHiddenFile {
  display: none;
}

/* eye button */
.pEyeBtn {
  --icon: url("https://cdn.jsdelivr.net/npm/lucide-static@0.460.0/icons/eye-off.svg");
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: 1px solid rgba(245, 200, 75, 0.2);
  background: transparent;
  cursor: pointer;
  flex: 0 0 auto;
  background-color: rgba(245, 200, 75, 0.9);
  -webkit-mask: var(--icon) no-repeat center / 16px 16px;
  mask: var(--icon) no-repeat center / 16px 16px;
  transition: all 0.2s ease;
  box-shadow: 0 2px 8px rgba(245, 200, 75, 0.15);
}
.pEyeBtn:hover {
  opacity: 0.85;
  transform: scale(1.05);
  box-shadow: 0 4px 12px rgba(245, 200, 75, 0.25);
}

/* Add button (+) */
.pAddBtn {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: 1px solid rgba(245, 200, 75, 0.3);
  background: linear-gradient(135deg, rgba(245, 200, 75, 0.12) 0%, rgba(255, 180, 50, 0.08) 100%);
  cursor: pointer;
  flex: 0 0 auto;
  color: rgba(245, 200, 75, 1);
  font-size: 18px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  box-shadow: 0 2px 8px rgba(245, 200, 75, 0.1);
}
.pAddBtn:hover {
  background: linear-gradient(135deg, rgba(245, 200, 75, 0.2) 0%, rgba(255, 180, 50, 0.15) 100%);
  transform: scale(1.08);
  box-shadow: 0 4px 16px rgba(245, 200, 75, 0.2);
}

/* Referral Code Section */
.pResume__row--referral .pResume__content {
  gap: 6px;
}
.pResume__row--referral .pResume__v {
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}
.pReferralBox {
  display: flex;
  align-items: center;
  gap: 12px;
  background: linear-gradient(135deg, rgba(100, 180, 255, 0.06) 0%, rgba(140, 100, 255, 0.06) 100%);
  border: 1px solid rgba(100, 180, 255, 0.15);
  border-radius: 12px;
  padding: 10px 16px;
  width: fit-content;
  margin-right: auto;
  transition: all 0.2s ease;
}
.pReferralBox:hover {
  border-color: rgba(100, 180, 255, 0.25);
  box-shadow: 0 4px 16px rgba(100, 180, 255, 0.1);
}
.pReferralCode {
  font-family: "SF Mono", "Courier New", monospace;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 2px;
  color: #fff;
  text-transform: uppercase;
  flex: 1;
  user-select: all;
}
.pReferralCopyBtn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 10px;
  border: 1px solid rgba(100, 180, 255, 0.25);
  background: linear-gradient(135deg, rgba(100, 180, 255, 0.12) 0%, rgba(140, 100, 255, 0.12) 100%);
  cursor: pointer;
  transition: all 0.2s ease;
  color: #64b4ff;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}
.pReferralCopyBtn:hover {
  background: linear-gradient(135deg, rgba(100, 180, 255, 0.2) 0%, rgba(140, 100, 255, 0.2) 100%);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(100, 180, 255, 0.2);
}
.pReferralCopyBtn:active {
  transform: translateY(0);
}
.pReferralCopyBtn__icon {
  flex-shrink: 0;
}
.pReferralCopyBtn__text {
  display: inline;
}

/* Mobile responsive */
@media (max-width: 480px) {
  .pReferralBox {
    max-width: 100%;
    flex-wrap: wrap;
    gap: 8px;
  }
  .pReferralCode {
    font-size: 13px;
    letter-spacing: 1px;
  }
  .pReferralCopyBtn {
    padding: 5px 10px;
    font-size: 11px;
  }
  .pReferralCopyBtn__text {
    display: none;
  }
}

/* Steam linking row */
.pResume__row--steam .pResume__icon {
  background: linear-gradient(135deg, rgba(102, 192, 244, 0.15) 0%, rgba(27, 40, 56, 0.25) 100%);
}
.pResume__row--steam .pResume__icon svg {
  fill: #66c0f4;
  stroke: none;
}
.pResume__unlinkBtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  border: 1px solid rgba(239, 68, 68, 0.3);
  background: rgba(239, 68, 68, 0.1);
  cursor: pointer;
  transition: all 0.2s ease;
  color: #ef4444;
  padding: 0;
}
.pResume__unlinkBtn:hover {
  background: rgba(239, 68, 68, 0.2);
  border-color: rgba(239, 68, 68, 0.5);
  transform: scale(1.05);
}
.pResume__unlinkBtn svg {
  stroke: #ef4444;
}
.pResume__linkBtn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 6px;
  border: 1px solid rgba(102, 192, 244, 0.3);
  background: rgba(102, 192, 244, 0.1);
  color: #66c0f4;
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  transition: all 0.2s ease;
}
.pResume__linkBtn:hover {
  background: rgba(102, 192, 244, 0.2);
  border-color: rgba(102, 192, 244, 0.5);
  transform: translateY(-1px);
}
.pResume__linkBtn svg {
  stroke: #66c0f4;
}

.pFlag {
  width: 22px;
  height: 16px;
  border-radius: 3px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  display: inline-block;
  object-fit: cover;
}

/* Transfer box */
.pTransferBox {
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: linear-gradient(165deg, rgba(20, 20, 22, 0.6) 0%, rgba(15, 15, 16, 0.8) 100%);
  border-radius: 16px;
  padding: 16px;
  margin-top: 12px;
}
.pTransferGrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

/* PIX QR Code display */
.pPixQr {
  text-align: center;
  padding: 16px 0;
}
.pPixQr__title {
  font-weight: 800;
  font-size: 15px;
  margin-bottom: 12px;
  color: rgba(255, 255, 255, 0.9);
}
.pPixQr__valor {
  font-weight: 900;
  font-size: 28px;
  background: linear-gradient(135deg, rgba(245, 200, 75, 1), rgba(255, 180, 50, 1));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 16px;
  text-shadow: none;
}
.pPixQr__img {
  display: flex;
  justify-content: center;
  margin-bottom: 16px;
}
.pPixQr__img img {
  width: 200px;
  height: 200px;
  border-radius: 16px;
  border: 2px solid rgba(255, 255, 255, 0.1);
  background: #fff;
  padding: 12px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}
.pPixQr__noImg {
  padding: 24px;
  background: rgba(255, 255, 255, 0.04);
  border-radius: 16px;
  margin-bottom: 16px;
  color: rgba(255, 255, 255, 0.5);
  font-size: 13px;
}
.pPixQr__copy {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
}
.pPixQr__copy .pInput {
  max-width: 300px;
  font-size: 11px;
  text-overflow: ellipsis;
}

/* PIX Status Indicator */
.pPixQr__status {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 12px 0;
  padding: 10px 16px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 10px;
}
.pPixQr__statusIcon {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: inline-block;
}
.pPixQr__statusIcon--pending {
  background: linear-gradient(135deg, #f5c84b, #e6a532);
  animation: pixPulse 1.5s ease-in-out infinite;
}
.pPixQr__statusIcon--paid {
  background: linear-gradient(135deg, #4ade80, #22c55e);
}
.pPixQr__statusIcon--failed {
  background: linear-gradient(135deg, #ff6b6b, #ef4444);
}
.pPixQr__statusText {
  font-size: 13px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.8);
}
.pPixQr__statusText--paid {
  color: #4ade80;
}
.pPixQr__statusText--failed {
  color: #ff6b6b;
}
@keyframes pixPulse {
  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.6;
    transform: scale(0.9);
  }
}

/* espaço final da página */
.pBottomSpacer {
  height: 48px;
}

/* ===== Notification System ===== */
.notificationContainer {
  position: fixed;
  top: 80px;
  right: 20px;
  z-index: 100000;
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 360px;
  width: 100%;
  pointer-events: none;
}

.notification {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: var(--bg2, #18181a);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 6px;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.5);
  pointer-events: auto;
  animation: notifSlideIn 0.25s cubic-bezier(0.34, 1.4, 0.64, 1);
}

@keyframes notifSlideIn {
  from {
    opacity: 0;
    transform: translateX(110%);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.notification--fadeOut {
  animation: notifFadeOut 0.25s ease forwards;
}

@keyframes notifFadeOut {
  from {
    opacity: 1;
    transform: translateX(0);
  }
  to {
    opacity: 0;
    transform: translateX(110%);
  }
}

/* Notification types - colored left border */
.notification--success { border-left: 3px solid var(--success, #22c55e); }
.notification--error   { border-left: 3px solid var(--error, #ef4444); }
.notification--warning { border-left: 3px solid var(--warning, #f59e0b); }
.notification--info    { border-left: 3px solid var(--accent, #f2b600); }

/* Icon using CSS mask for dynamic coloring */
.notification__icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  -webkit-mask: var(--icon) center/contain no-repeat;
  mask: var(--icon) center/contain no-repeat;
}

.notification--success .notification__icon { background-color: var(--success, #22c55e); }
.notification--error   .notification__icon { background-color: var(--error, #ef4444); }
.notification--warning .notification__icon { background-color: var(--warning, #f59e0b); }
.notification--info    .notification__icon { background-color: var(--accent, #f2b600); }

.notification__text {
  flex: 1;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--text);
}

.notification__close {
  background: none;
  border: none;
  color: var(--muted);
  font-size: 18px;
  cursor: pointer;
  padding: 0 4px;
  transition: color 0.2s;
  line-height: 1;
  flex-shrink: 0;
}

.notification__close:hover {
  color: var(--text);
}

/* Mobile adjustments */
@media (max-width: 768px) {
  .notificationContainer {
    left: 12px;
    right: 12px;
    max-width: none;
  }
}

/* ===== Modal ===== */
.pModal {
  position: fixed;
  inset: 0;
  z-index: 1001;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(4px);
  padding: 20px;
}

.pModal--visible {
  display: flex !important;
}

.pModal__content {
  position: relative;
  background: rgba(20, 20, 22, 0.98);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  padding: 24px 20px 20px;
  max-width: 380px;
  width: 100%;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
}

.pModal__close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 28px;
  height: 28px;
  border: none;
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.7);
  font-size: 20px;
  line-height: 1;
  border-radius: 6px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition:
    background 0.15s,
    color 0.15s;
}
.pModal__close:hover {
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
}

/* ===== Input Wrapper (para toggle de senha) ===== */
.inputWrapper {
  position: relative;
  display: flex;
  align-items: center;
}
.inputWrapper .input {
  padding-right: 44px;
}
.inputToggle {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  border: none;
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.6;
  transition: opacity 0.15s;
}
.inputToggle:hover {
  opacity: 1;
}
.inputToggle__icon {
  width: 18px;
  height: 18px;
  background-color: currentColor;
  -webkit-mask-image: var(--icon, url(https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/icons/eye.svg));
  mask-image: var(--icon, url(https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/icons/eye.svg));
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

.pModal__title {
  font-weight: 900;
  font-size: 18px;
  margin-bottom: 8px;
  color: rgba(255, 255, 255, 0.95);
}

.pModal__desc {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.6);
  margin-bottom: 16px;
  line-height: 1.5;
}

.pModal__btns {
  display: flex;
  gap: 10px;
  margin-top: 16px;
}
.pModal__btns .pBtn {
  flex: 1;
}

@media (max-width: 980px) {
  .pTwoCol {
    grid-template-columns: 1fr;
  }
  .pGrid3 {
    grid-template-columns: 1fr;
  }
  .pTransferGrid {
    grid-template-columns: 1fr;
  }
  .pGrid3--depositCompact {
    grid-template-columns: 1fr;
  }
  .notificationContainer {
    left: 10px;
    right: 10px;
    max-width: none;
  }
}

/* =============================================
   SQUAD PAGE STYLES
   ============================================= */


/* Shell com perfil no menu lateral */
.pShell--squad {
  gap: 24px;
}

/* Menu lateral com perfil */
.pNav--withProfile {
  display: flex;
  flex-direction: column;
}

.pNav__menu {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* Card de perfil no menu lateral — fica logo abaixo do menu */
.pNav__profile {
  padding: 8px 10px 16px;
  margin-top: auto;
}

.pNavProfile {
  background: rgba(255,255,255,0.03);
  border-radius: 8px;
  padding: 12px 10px 10px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
}

/* Avatar wrapper para posicionar badge em destaque */
.pNavProfile__avatarWrapper {
  position: relative;
  width: 40px;
  height: 40px;
  margin: 0 auto 2px;
}

.pNavProfile__avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  overflow: hidden;
  background: rgba(255,255,255,0.06);
  box-shadow: 0 0 0 2px rgba(242,182,0,0.2);
}
.pNavProfile__avatar img { width: 100%; height: 100%; object-fit: cover; }

.pNavProfile__featuredBadge {
  position: absolute;
  bottom: -3px;
  right: -3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  transition: transform 0.15s;
}
.pNavProfile__featuredBadge:hover { transform: scale(1.1); }
.pNavProfile__featuredBadge--svg {
  background: rgba(14,14,14,0.92);
  border: 1px solid var(--badge-color, #6b7280);
  color: var(--badge-color, #6b7280);
}
.pNavProfile__featuredBadge--svg svg { width: 9px; height: 9px; }
.pNavProfile__featuredBadge--png { background: transparent; border: none; }
.pNavProfile__featuredBadge--png img { width: 18px; height: 18px; object-fit: contain; border-radius: 50%; }

.pNavProfile__name {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  font-weight: 800;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.85);
  max-width: 170px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.verified-badge {
  flex-shrink: 0;
  filter: drop-shadow(0 1px 2px rgba(59, 130, 246, 0.4));
}

.pNavProfile__lp {
  font-size: 10px;
  color: var(--accent);
  font-weight: 800;
  letter-spacing: 0.5px;
}

.pNavProfile__stats {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-top: 6px;
  width: 100%;
}

.pNavProfile__stat {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 2px;
}

.pNavProfile__statLabel {
  font-size: 8px;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: rgba(233,234,237,0.3);
  font-weight: 700;
}

.pNavProfile__statValue {
  font-size: 11px;
  font-weight: 900;
  color: rgba(233,234,237,0.82);
}

.pNavProfile__statValue--level {
  color: var(--accent);
  font-weight: 900;
}

.pNavProfile__stat--exp {
  flex-direction: column;
  align-items: stretch;
}

.pNavProfile__expBar {
  width: 100%;
  height: 3px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 2px;
  overflow: hidden;
  margin-top: 2px;
}

.pNavProfile__expBarFill {
  height: 100%;
  background: var(--accent);
  border-radius: 2px;
  transition: width 0.3s ease;
}

.pNavProfile__expHint {
  font-size: 8px;
  color: rgba(233,234,237,0.3);
  text-align: right;
}







/* ── Hero da squad — estilo home-hero-card ── */
.squadHero {
  background: var(--bg2, #181819);
  border-radius: 8px;
  overflow: hidden;
  padding: 28px 32px 24px;
}

.squadHero__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  position: relative;
}

.squadHero__info { flex: 1; min-width: 220px; }

.squadHero__badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 12px;
  background: rgba(242,182,0,0.08);
  border: 1px solid rgba(242,182,0,0.2);
  border-radius: 4px;
  font-size: 10px;
  font-weight: 900;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 12px;
}

.squadHero__liveDot {
  width: 7px; height: 7px;
  background: #22c55e;
  border-radius: 50%;
  animation: livePulse 2s infinite;
  flex-shrink: 0;
}

.squadHero__title {
  font-size: clamp(17px, 2.2vw, 24px);
  font-weight: 900;
  letter-spacing: -0.5px;
  line-height: 1.1;
  margin: 0 0 8px;
  text-transform: uppercase;
  color: var(--text);
}

.squadHero__accent { color: var(--accent); }

.squadHero__subtitle {
  font-size: 13px;
  color: var(--muted2);
  line-height: 1.6;
  max-width: 420px;
  margin: 0;
}

.squadHero__round {
  text-align: right;
  min-width: 180px;
  flex-shrink: 0;
}

.squadHero__roundLabel {
  font-size: 10px;
  font-weight: 800;
  color: var(--muted2);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 4px;
}

.squadHero__roundName {
  font-size: 15px;
  font-weight: 900;
  color: var(--accent);
  margin-bottom: 10px;
  text-transform: uppercase;
}

.squadHero__countdown {
  display: flex;
  gap: 6px;
  justify-content: flex-end;
}

.squadHero__cdItem {
  background: rgba(0,0,0,0.4);
  border: 1px solid rgba(242,182,0,0.15);
  border-radius: 4px;
  padding: 6px 10px;
  text-align: center;
  min-width: 46px;
}

.squadHero__cdVal {
  font-size: 18px;
  font-weight: 900;
  color: var(--accent);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.squadHero__cdLbl {
  font-size: 9px;
  color: var(--muted2);
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 0.5px;
  margin-top: 3px;
}

@media (max-width: 768px) {
  .squadHero {
    display: none; /* hero oculto no mobile — substituído pelo smChamp */
  }
}

/* squadHero é idêntico em todas as abas — sem overrides por aba */

/* Main area do squad */
.pMain--squad {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* gap fixo — idêntico em todas as abas */

/* ── squadCard — alinhado ao design system da home ── */

/* Card do squad — fundo sólido, sem glassmorphism */
.squadCard {
  background: var(--bg2, #181819);
  border-radius: var(--radius2);
  padding: 24px;
  position: relative;
}

.squadCard__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  flex-wrap: wrap;
  gap: 12px;
}

/* Título: estilo home-section-title */
.squadCard__title {
  font-size: 11px;
  font-weight: 900;
  color: rgba(255,255,255,0.55);
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.squadCard__title svg { color: var(--accent); flex-shrink: 0; }

.squadCard__count {
  font-size: 13px;
  font-weight: 500;
  color: rgba(255,255,255,0.55);
  background: rgba(255,255,255,0.04);
  padding: 4px 10px;
  border-radius: 4px;
}

.squadCard__deadline {
  font-size: 12px;
  color: var(--muted);
  padding: 6px 12px;
  border-radius: 4px;
  background: rgba(255,255,255,0.03);
}

.squadCard__deadline--locked {
  color: var(--error);
  background: rgba(239,68,68,0.08);
}

.squadCard__deadlineIcon { margin-right: 4px; }

/* Line-up grid */
.squadLineup {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  column-gap: 16px;
  row-gap: 100px; /* garante espaço para glass frame + LP badge + LP Preview em qualquer quebra de linha */
  margin-bottom: 24px;
}

/* Slot de carta */
.squadSlot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  position: relative;
}

.squadSlot__badge {
  position: absolute;
  top: -8px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
}

.squadSlot__badge--star {
  background: linear-gradient(135deg, #ffd700, #ffaa00);
  color: #000;
}

.squadSlot__badge--captain {
  background: var(--error);
  color: #fff;
}

.squadSlot__badge--clutcher {
  background: linear-gradient(135deg, #60a5fa, #3b82f6);
  color: #fff;
}

.squadSlot__badge--opener {
  background: linear-gradient(135deg, #22c55e, #16a34a);
  color: #fff;
}

.squadSlot__badge--trader {
  background: linear-gradient(135deg, #a855f7, #9333ea);
  color: #fff;
}

.squadSlot__card {
  width: 100%;
  aspect-ratio: 3/4;
  background: rgba(255, 255, 255, 0.03);
  border: 2px dashed rgba(255, 255, 255, 0.15);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
  overflow: hidden;
  position: relative;
}

.squadSlot__card:hover {
  border-color: var(--accent);
  background: rgba(242, 182, 0, 0.05);
}

.squadSlot__card--filled {
  border-style: solid;
  border-color: rgba(255, 255, 255, 0.2);
}

.squadSlot__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.squadSlot__placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

.squadSlot__placeholder--filled {
  padding: 12px;
  text-align: center;
}

.squadSlot__plus {
  font-size: 32px;
  color: rgba(255, 255, 255, 0.3);
}

.squadSlot__nick {
  font-size: 12px;
  font-weight: 700;
  color: var(--text);
}

.squadSlot__team {
  font-size: 10px;
  color: var(--muted);
}

.squadSlot__role {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
}

.squadSlot__role--star {
  background: linear-gradient(135deg, #ffd700, #ffaa00);
}

.squadSlot__role--captain {
  background: var(--error);
  color: #fff;
}

.squadSlot__lp {
  font-size: 11px;
  font-weight: 700;
  color: var(--text);
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.4));
  backdrop-filter: blur(4px);
  padding: 6px 14px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  gap: 4px;
}

.squadSlot__lpValue {
  color: var(--accent);
  font-weight: 800;
}

/* Footer do squad — sem bordas, visual sólido coerente */
.squadFooter {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  padding-top: 20px;
}

/* ── LP Stats (row de números) ── */
.squadFooter__lpSummary {
  display: flex;
  align-items: center;
  gap: 0;
  background: var(--bg1, #111112);
  border-radius: 12px;
  overflow: hidden;
}

.squadFooter__stat {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 12px 20px;
  text-align: center;
}

.squadFooter__statDivider {
  width: 1px;
  height: 36px;
  background: rgba(255,255,255,0.07);
  align-self: center;
  flex-shrink: 0;
}

.squadFooter__statLabel {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--muted2, rgba(233,234,237,0.45));
  font-weight: 700;
}

.squadFooter__statLabel--preview {
  color: rgba(34, 197, 94, 0.7);
}

.squadFooter__statValue {
  font-size: 20px;
  font-weight: 900;
  color: var(--muted, rgba(233,234,237,0.65));
  line-height: 1;
}

.squadFooter__statValue--earned {
  color: var(--success, #22c55e);
}

.squadFooter__statValue--total {
  color: var(--accent, #f2b600);
}

.squadFooter__statValue--preview {
  color: #22c55e;
  font-size: 18px;
}

/* ── Role badges ── */
.squadFooter__roles {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.squadFooter__role {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--bg1, #111112);
  border-radius: 10px;
  padding: 8px 14px;
  position: relative;
  cursor: default;
}

/* Tooltip explicativo nos cards de role do footer */
.squadFooter__roleTooltip {
  pointer-events: none;
  position: absolute;
  bottom: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  z-index: 200;
  background: rgba(10, 10, 12, 0.97);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  padding: 7px 12px;
  white-space: nowrap;
  font-size: 11px;
  font-weight: 500;
  color: var(--text, #e9eaed);
  opacity: 0;
  transition: opacity 0.18s ease, transform 0.18s ease;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.65);
}
.squadFooter__role:hover .squadFooter__roleTooltip {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.squadFooter__roleTooltip::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: rgba(10, 10, 12, 0.97);
}
@media (hover: none) {
  .squadFooter__roleTooltip { display: none; }
}

.squadFooter__roleTexts {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.squadFooter__roleName {
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text, #e9eaed);
  line-height: 1;
}

.squadFooter__roleBonus {
  font-size: 10px;
  color: var(--accent, #f2b600);
  font-weight: 700;
  line-height: 1;
}

.squadFooter__roleIcon {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 800;
  flex-shrink: 0;
}

.squadFooter__roleIcon--star {
  background: linear-gradient(135deg, #ffd700, #ffaa00);
  color: #000;
}

.squadFooter__roleIcon--captain {
  background: linear-gradient(135deg, #ef4444, #dc2626);
  color: #fff;
}

.squadFooter__roleIcon--clutcher {
  background: linear-gradient(135deg, #60a5fa, #3b82f6);
  color: #fff;
}

.squadFooter__roleIcon--opener {
  background: linear-gradient(135deg, #22c55e, #16a34a);
  color: #fff;
}

.squadFooter__roleIcon--trader {
  background: linear-gradient(135deg, #a855f7, #9333ea);
  color: #fff;
}

/* ── Save button ── */
.squadFooter__save {
  background: linear-gradient(180deg, var(--accent), var(--accent2));
  color: #1a1a1a;
  border: none;
  padding: 13px 32px;
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1px;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 6px 20px rgba(242, 182, 0, 0.22);
  white-space: nowrap;
}

.squadFooter__save:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(242, 182, 0, 0.35);
}

.squadFooter__save--disabled {
  background: rgba(255, 255, 255, 0.1);
  color: var(--muted);
  cursor: not-allowed;
  box-shadow: none;
}

.squadFooter__save--disabled:hover {
  transform: none;
  box-shadow: none;
}

/* Grid de cartas */
.squadCards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 14px;
}

.squadCards--modal {
  max-height: 400px;
  overflow-y: auto;
  padding: 4px;
}

.squadCards__empty {
  grid-column: 1/-1;
  text-align: center;
  padding: 48px 24px;
  color: var(--muted);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.01));
  border: 1px dashed rgba(255, 255, 255, 0.1);
  border-radius: 16px;
}

.squadCards__empty p {
  margin-bottom: 16px;
}

/* Item de carta */
.squadCardItem {
  aspect-ratio: 3/4;
  background: rgba(255, 255, 255, 0.03);
  border: 2px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
}

.squadCardItem:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

/* Raridades */
.rarity--common {
  border-color: rgba(255, 255, 255, 0.15);
}

.rarity--rare {
  border-color: #3b82f6;
  box-shadow: 0 0 12px rgba(59, 130, 246, 0.2);
}

.rarity--epic {
  border-color: #a855f7;
  box-shadow: 0 0 12px rgba(168, 85, 247, 0.2);
}

.rarity--legendary {
  border-color: #ffd700;
  box-shadow: 0 0 12px rgba(255, 215, 0, 0.3);
}

.squadCardItem--inSquad {
  opacity: 0.5;
}

.squadCardItem__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.squadCardItem__placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 12px;
  text-align: center;
  gap: 4px;
}

.squadCardItem__nick {
  font-size: 12px;
  font-weight: 700;
  color: var(--text);
}

.squadCardItem__team {
  font-size: 10px;
  color: var(--muted);
}

.squadCardItem__inSquad {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.8);
  color: var(--accent);
  font-size: 10px;
  font-weight: 700;
  text-align: center;
  padding: 4px;
  text-transform: uppercase;
}

.squadCardItem__qty {
  position: absolute;
  top: 6px;
  right: 6px;
  background: rgba(0, 0, 0, 0.7);
  color: var(--text);
  font-size: 10px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 4px;
}

/* Modal wide */
.pModal__content--wide {
  max-width: 600px;
}

/* Role options */
.roleOptions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 16px 0;
}

.roleOption {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border);
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.15s ease;
  text-align: left;
}

.roleOption:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: var(--accent);
}

.roleOption__icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  background: rgba(255, 255, 255, 0.1);
}

.roleOption--star .roleOption__icon {
  background: linear-gradient(135deg, #ffd700, #ffaa00);
}

.roleOption--captain .roleOption__icon {
  background: var(--error);
  color: #fff;
}

.roleOption__label {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  flex: 1;
}

.roleOption__bonus {
  font-size: 12px;
  color: var(--muted);
}

/* Responsive */
@media (max-width: 1100px) {
  .squadLineup {
    grid-template-columns: repeat(3, 1fr);
    row-gap: 90px; /* espaço para glass frame + LP badge + LP Preview badge */
  }
}

@media (max-width: 768px) {
  .pShell--squad {
    grid-template-columns: 1fr;
  }

  .pNav--withProfile {
    flex-direction: row;
    flex-wrap: wrap;
  }

  .pNav__menu {
    flex-direction: row;
    flex-wrap: wrap;
    width: 100%;
  }

  .pNav__profile {
    width: 100%;
    margin-top: 0;
  }

  .pNavProfile {
    display: flex;
    align-items: center;
    gap: 16px;
    text-align: left;
    padding: 16px;
  }

  .pNavProfile__avatar {
    width: 60px;
    height: 60px;
    margin: 0;
    flex-shrink: 0;
  }

  .pNavProfile__stats {
    flex-direction: row;
    flex-wrap: wrap;
    border-top: none;
    padding-top: 0;
    gap: 16px;
  }

  .squadLineup {
    grid-template-columns: repeat(2, 1fr);
    row-gap: 90px; /* espaço para glass frame + LP badge + LP Preview badge */
  }

  .squadFooter {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }

  .squadFooter__lpSummary {
    justify-content: center;
  }

  .squadFooter__roles {
    justify-content: center;
  }

  .squadFooter__save {
    width: 100%;
  }

  .squadCards {
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  }
}

@media (max-width: 480px) {
  .squadLineup {
    grid-template-columns: repeat(2, 1fr);
    column-gap: 10px;
    row-gap: 85px; /* espaço para glass frame + LP badge + LP Preview badge */
  }

  .squadChampionship__name {
    font-size: 18px;
  }

  .squadFooter__roles {
    flex-direction: column;
    gap: 8px;
  }
}

/* =============================================
   Card Selection Modal - Styles
   ============================================= */

/* Modal fullscreen no mobile */
.pModal--fullMobile {
  padding: 16px;
}

/* Card selection modal - scales proportionally with screen size */
.pModal__box--cards {
  /* Proportional scaling: uses 92% of viewport, capped at 1400px for ultra-wide screens */
  max-width: min(92vw, 1400px);
  width: 92vw;
  /* Vertical scaling: uses 92% of viewport height */
  max-height: 92vh;
  height: 92vh;
  display: flex;
  flex-direction: column;
  /* overflow: hidden removes sticky behavior - keep visible for flex children */
  overflow: visible;
  /* Smooth transitions for responsive changes */
  transition: width 0.2s ease, height 0.2s ease, max-width 0.2s ease, max-height 0.2s ease;
}

.pModal__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 24px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.pModal__header .pModal__title {
  margin: 0;
  font-size: 18px;
}

.pModal__header .pModal__close {
  position: static;
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.2s ease;
  z-index: 200;
  pointer-events: auto !important;
}

.pModal__header .pModal__close:hover {
  background: rgba(255, 255, 255, 0.1);
}

/* Header do modal de pack com z-index alto */
.pModal__box--pack .pModal__header {
  position: relative;
  z-index: 150;
}

/* Grid de seleção de cartas - responsive scaling */
.cardSelectGrid {
  display: grid;
  /* Auto-fill with minimum card size, scales with container */
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 16px;
  padding: 20px;
  overflow-y: auto;
  /* CRITICAL: flex: 1 1 auto + min-height: 0 allows grid to expand and scroll */
  flex: 1 1 auto;
  min-height: 0;
  -webkit-overflow-scrolling: touch;
  /* Smooth height transition for desktop */
  transition: min-height 0.35s ease-out;
}

/* Large screens - more columns and spacing */
@media (min-width: 1200px) {
  .cardSelectGrid {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 20px;
    padding: 24px;
  }
}

/* Extra large screens - even more space */
@media (min-width: 1600px) {
  .cardSelectGrid {
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 24px;
    padding: 28px;
  }
}

/* Item de carta com ações */
.cardSelectItem {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  transition:
    opacity 0.2s ease,
    transform 0.2s ease;
}

.cardSelectItem--hidden {
  opacity: 0;
  transform: scale(0.9);
  pointer-events: none;
}

.cardSelectItem .proCardMini {
  flex-shrink: 0;
}

.cardSelect__actions {
  width: 100%;
  max-width: 140px;
}

.cardSelectItem--disabled {
  opacity: 0.5;
  pointer-events: none;
}

.cardSelectItem .proCardMini {
  cursor: pointer;
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
}

.cardSelectItem .proCardMini:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5);
}

/* Botões de ação abaixo da carta */
.cardSelect__actions {
  display: flex;
  gap: 6px;
}

.cardSelect__btn {
  flex: 1;
  padding: 10px 8px;
  font-size: 11px;
  font-weight: 600;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  background: rgba(255, 255, 255, 0.05);
  color: var(--text);
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: center;
}

.cardSelect__btn:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.25);
}

.cardSelect__btn:active {
  transform: scale(0.98);
}

.cardSelect__btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.cardSelect__btn--star:hover:not(:disabled),
.cardSelect__btn--star.cardSelect__btn--active {
  background: linear-gradient(135deg, rgba(255, 215, 0, 0.2), rgba(255, 170, 0, 0.2));
  border-color: #ffd700;
  color: #ffd700;
}

.cardSelect__btn--captain:hover:not(:disabled),
.cardSelect__btn--captain.cardSelect__btn--active {
  background: rgba(239, 68, 68, 0.2);
  border-color: var(--error);
  color: var(--error);
}

/* Ações do modal (botão remover) - ALWAYS at bottom */
.pModal__actions {
  display: flex;
  justify-content: center;
  gap: 12px;
  padding: 16px 24px;
  border-top: 1px solid var(--border);
  flex-shrink: 0;
  /* Ensure actions stay at bottom of flex container */
  margin-top: auto;
  background: var(--bg-secondary, #14141a);
}

/* =============================================
   Mobile Responsive - Squad Page
   ============================================= */

@media (max-width: 768px) {
  /* Modal fullscreen no mobile - uses entire screen */
  .pModal--fullMobile {
    padding: 0;
  }

  .pModal--fullMobile:not(.pModal--dock) .pModal__box--cards {
    /* Full screen on mobile for maximum card visibility */
    max-width: 100%;
    width: 100%;
    max-height: 100%;
    height: 100dvh; /* dynamic viewport height for mobile */
    min-height: 100dvh;
    border-radius: 0;
    margin: 0;
    /* Flex container to push actions to bottom */
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }
  
  /* Header mais compacto no mobile */
  .pModal--fullMobile .pModal__header {
    padding: 12px 16px;
    flex-shrink: 0;
  }
  
  .pModal--fullMobile .pModal__header .pModal__title {
    font-size: 16px;
  }

  .cardSelectGrid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    padding: 12px;
    /* Allow grid to take all available space - CRITICAL for pushing actions to bottom */
    flex: 1 1 auto;
    min-height: 0; /* Required for flex scroll to work */
    /* Ensure scroll works properly */
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    /* Add padding at bottom for breathing room */
    padding-bottom: 16px;
  }
  
  /* Actions FIXED at bottom on mobile - not sticky, use flexbox */
  .pModal--fullMobile .pModal__actions {
    /* Remove sticky, use flex positioning instead */
    position: relative;
    flex-shrink: 0;
    background: linear-gradient(to top, rgba(20, 20, 25, 0.98) 0%, rgba(20, 20, 25, 0.95) 100%);
    padding: 12px 16px;
    padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    gap: 8px;
    flex-wrap: wrap;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    z-index: 100;
    /* Ensure it stays at bottom */
    margin-top: 0;
  }
  
  .pModal--fullMobile .pModal__actions .btn {
    flex: 1 1 auto;
    min-width: 100px;
    padding: 12px 16px;
    font-size: 13px;
  }
  
  /* Ghost button takes less space on mobile */
  .pModal--fullMobile .pModal__actions .btn--ghost {
    flex: 0 1 auto;
  }

  /* Mantém tamanho da carta no mobile */
  .cardSelectItem .proCardMini {
    width: 100%;
    min-width: 140px;
    height: auto;
    aspect-ratio: 140/200;
  }

  .cardSelect__btn {
    padding: 12px 8px;
    font-size: 12px;
  }

  /* Topbar mobile - MANTER avatar, nome e saldo visíveis */
  .topbar__inner {
    padding: 12px 16px;
  }

  .brand__text {
    display: none;
  }

  /* MANTER userChip visível no mobile */
  .userChip__meta {
    display: flex;
  }

  .userChip__name {
    font-size: 12px;
  }

  .userChip__balance {
    font-size: 10px;
  }

  .userChip__avatar {
    width: 32px;
    height: 32px;
  }

  /* Shell layout mobile */
  .pShell--squad {
    flex-direction: column;
  }

  /* Menu lateral mobile */
  .pNav--withProfile {
    width: 100%;
    flex-direction: column;
    padding: 12px;
    gap: 12px;
    overflow-x: visible;
  }

  .pNav__menu {
    display: flex;
    flex-direction: row;
    gap: 4px;
    flex-shrink: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 8px;
  }

  .pNav__item {
    padding: 10px 14px;
    min-width: auto;
  }

  .pNav__text {
    display: none;
  }

  .pNav__icon {
    margin-right: 0;
  }

  /* MANTER perfil visível no mobile - layout compacto */
  .pNav__profile {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 12px;
    width: 100%;
  }

  /* Esconde perfil no desktop, mostra apenas no mobile */
  .pNav__profile--mobileOnly {
    display: none;
  }

  @media (max-width: 768px) {
    .pNav__profile--mobileOnly {
      display: flex;
    }
  }

  .pNavProfile--compact {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;
    width: 100%;
  }

  .pNavProfile__info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
  }

  .pNavProfile__stats--row {
    display: flex;
    flex-direction: row;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 8px;
  }

  .pNav__profileAvatar,
  .pNavProfile__avatar {
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    border-radius: 50%;
    overflow: hidden;
  }

  .pNavProfile__avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .pNav__profileInfo {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
  }

  .pNav__profileName,
  .pNavProfile__name {
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
  }

  .pNav__profileLP,
  .pNavProfile__lp {
    font-size: 12px;
    color: var(--accent);
  }

  .pNav__profileStats,
  .pNavProfile__stats {
    display: flex;
    flex-direction: row;
    gap: 16px;
    flex-wrap: wrap;
  }

  .pNav__profileStat,
  .pNavProfile__stat {
    flex: 1;
    min-width: 50px;
    display: flex;
    flex-direction: column;
    gap: 2px;
  }

  .pNav__profileStatLabel,
  .pNavProfile__statLabel {
    font-size: 9px;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
  }

  .pNav__profileStatValue,
  .pNavProfile__statValue {
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
  }

  .pNavProfile__statValue--level {
    background: var(--accent);
    color: #1a1a2e;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 800;
  }

  .pNavProfile__statValue--cards {
    color: var(--accent);
  }

  .pNav__profileExpBar,
  .pNavProfile__expBar {
    height: 4px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 2px;
    overflow: hidden;
    width: 100%;
  }

  .pNavProfile__expBarFill {
    height: 100%;
    background: var(--accent);
    border-radius: 2px;
    transition: width 0.3s ease;
  }

  .pNavProfile__expText {
    font-size: 9px;
    color: var(--muted);
  }

  /* Shell profile mobile */
  .pShell--profile {
    flex-direction: column;
  }

  /* Conteúdo principal mobile */
  .pMain--squad {
    padding: 16px;
  }

  /* Campeonato mobile */
  .squadChampionship {
    padding: 16px;
    margin-bottom: 16px;
  }

  .squadChampionship__label {
    font-size: 10px;
  }

  .squadChampionship__name {
    font-size: 18px;
  }

  /* Card do squad mobile */
  .squadCard {
    padding: 16px;
    margin-bottom: 16px;
  }

  .squadCard__header {
    flex-direction: column;
    gap: 8px;
    margin-bottom: 16px;
  }

  .squadCard__title {
    font-size: 16px;
  }

  .squadCard__deadline {
    font-size: 11px;
    text-align: center;
  }

  /* Lineup mobile - mantém proporção das cartas */
  .squadLineup {
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-bottom: 16px;
  }

  .squadSlot {
    min-height: auto;
  }

  .squadSlot .proCardMini {
    width: 100%;
    height: auto;
    aspect-ratio: 140/200;
  }

  .squadSlot__badge {
    width: 22px;
    height: 22px;
    font-size: 11px;
  }

  /* LP abaixo da carta - ajuste para não sobrepor */
  .squadSlot__lp {
    font-size: 11px;
    padding: 6px 10px;
    margin-top: 8px;
    position: relative;
    z-index: 5;
  }

  /* Footer mobile */
  .squadFooter {
    flex-direction: column;
    gap: 16px;
    align-items: center;
  }

  .squadFooter__lpSummary {
    flex-direction: column;
    gap: 16px;
    align-items: center;
  }

  .squadFooter__total {
    text-align: center;
  }

  .squadFooter__totalLabel {
    font-size: 11px;
  }

  .squadFooter__totalValue {
    font-size: 20px;
  }

  .squadFooter__roles {
    flex-direction: row;
    gap: 16px;
  }

  .squadFooter__role {
    font-size: 10px;
  }

  .squadFooter__roleIcon {
    width: 22px;
    height: 22px;
    font-size: 11px;
  }

  .squadFooter__save {
    width: 100%;
    padding: 14px 24px;
  }

  /* My Cards grid mobile */
  .squadCards {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }

  .squadCards .proCardMini {
    width: 100%;
    height: auto;
    aspect-ratio: 140/200;
  }
}

/* My Cards - coluna única centralizada em telas 440px ou menores */
@media (max-width: 440px) {
  .squadCards {
    grid-template-columns: 1fr;
    justify-items: center;
  }

  .squadCards .proCardMini,
  .squadCards .cardFilterItem {
    width: 140px;
    height: 200px;
  }
}

@media (max-width: 480px) {
  /* Lineup mobile pequeno - 2 colunas com 5ª carta centralizada */
  .squadLineup {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    row-gap: 50px; /* Espaço extra para o LP absoluto não ser sobreposto */
    justify-items: center;
  }

  /* No layout em grid, o espaçamento vertical deve vir do row-gap (evita “distâncias diferentes”) */
  .squadLineup .squadSlot {
    margin-bottom: 0;
    width: 100%;
    max-width: 140px;
  }

  /* Quando sobra apenas 1 coluna (telas bem estreitas), mantém o mesmo espaçamento */
  @media (max-width: 360px) {
    .squadLineup {
      grid-template-columns: 1fr;
    }
  }

  /* Posição 3 - corrigir bug de tamanho */
  .squadLineup .squadSlot:nth-child(3) {
    width: 100%;
    max-width: 140px;
  }

  /* Posição 5 centralizada ocupando linha inteira */
  .squadLineup .squadSlot:nth-child(5) {
    grid-column: 1 / -1;
    width: 100%;
    max-width: 140px;
    margin: 0 auto;
  }

  .squadChampionship__name {
    font-size: 16px;
  }

  .squadFooter__roles {
    flex-direction: column;
    gap: 8px;
  }

  .cardSelectGrid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    padding: 12px;
  }

  .cardSelect__actions {
    gap: 4px;
  }

  .cardSelect__btn {
    padding: 10px 6px;
    font-size: 10px;
  }
}

/* Safe area para iPhones com notch */
@supports (padding-top: env(safe-area-inset-top)) {
  .topbar {
    padding-top: env(safe-area-inset-top);
  }

  .pModal--fullMobile:not(.pModal--dock) .pModal__box--cards {
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
  }
}

/* =============================================
   LANDSCAPE MOBILE - Card Selection Modal
   iPhone 13 to 15 Pro Max landscape optimization
   Professional app-like design
   ============================================= */
@media (max-width: 932px) and (max-height: 450px) and (orientation: landscape) {
  /* Modal overlay - full dark */
  .pModal--fullMobile {
    padding: 0;
    background: rgba(10, 10, 20, 0.98);
  }

  /* Box do modal - layout horizontal */
  .pModal--fullMobile .pModal__box--cards {
    max-width: 100%;
    max-height: 100%;
    height: 100%;
    width: 100%;
    border-radius: 0;
    margin: 0;
    display: grid;
    grid-template-columns: 160px 1fr;
    grid-template-rows: auto 1fr auto;
    background: linear-gradient(135deg, #0f0f1a 0%, #1a1a2e 100%);
    overflow: hidden;
  }

  /* Modal header - spans full width, minimal */
  .pModal--fullMobile .pModal__header {
    grid-column: 1 / -1;
    grid-row: 1;
    padding: 6px 12px;
    background: rgba(0, 0, 0, 0.4);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  }

  .pModal__header .pModal__title {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.9);
  }

  .pModal__header .pModal__close {
    width: 24px;
    height: 24px;
    font-size: 14px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 6px;
  }

  /* Sidebar esquerdo - painel de controle */
  .multiSelectInfo {
    grid-column: 1;
    grid-row: 2 / 4;
    position: relative;
    left: auto;
    top: auto;
    bottom: auto;
    width: 100%;
    height: 100%;
    flex-direction: column;
    align-items: stretch;
    padding: 10px;
    margin: 0;
    gap: 10px;
    border-radius: 0;
    border: none;
    border-right: 1px solid rgba(255, 255, 255, 0.06);
    background: linear-gradient(180deg, rgba(20, 20, 35, 0.95) 0%, rgba(15, 15, 25, 0.98) 100%);
    overflow-y: auto;
    z-index: 1;
  }

  .multiSelectInfo__positions {
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
  }

  .multiSelectInfo__label {
    display: block;
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: rgba(255, 255, 255, 0.4);
    margin-bottom: 4px;
  }

  .multiSelectInfo__slots {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    width: 100%;
  }

  .multiSelectInfo__slot {
    flex: 1 1 calc(33.33% - 4px);
    min-width: 40px;
    height: 32px;
    border-radius: 6px;
    background: rgba(30, 41, 59, 0.6);
    border: 1px solid rgba(100, 116, 139, 0.3);
    transition: all 0.2s ease;
  }

  .multiSelectInfo__slot:hover {
    background: rgba(59, 130, 246, 0.15);
    border-color: rgba(59, 130, 246, 0.5);
  }

  .multiSelectInfo__slot--selected {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.25), rgba(22, 163, 74, 0.15));
    border-color: rgba(34, 197, 94, 0.6);
  }

  .multiSelectInfo__slotPos {
    font-size: 8px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.5);
  }

  .multiSelectInfo__slotName {
    font-size: 9px;
    max-width: 36px;
    font-weight: 600;
    color: #e2e8f0;
  }

  .multiSelectInfo__slotIcon {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.3);
  }

  .multiSelectInfo__slotRole {
    width: 12px;
    height: 12px;
    font-size: 7px;
    top: -4px;
    right: -4px;
  }

  /* Contador de seleção */
  .multiSelectInfo__count {
    font-size: 11px;
    text-align: center;
    padding: 8px 0;
    margin-top: auto;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 8px;
    color: rgba(255, 255, 255, 0.7);
  }

  .multiSelectInfo__count span:first-child {
    font-size: 16px;
    font-weight: 800;
    color: #22c55e;
  }

  /* Campo de busca no sidebar - escondido no landscape */
  .multiSelectInfo__search {
    display: none !important;
  }

  /* Toggle e filtros - escondidos no landscape */
  .cardFilters__toggle {
    display: none !important;
  }

  .cardFilters--modal {
    display: none !important;
  }

  /* Grid de cartas - área principal */
  .cardSelectGrid {
    grid-column: 2;
    grid-row: 2;
    margin-left: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 8px;
    padding: 10px;
    overflow-y: auto;
    background: transparent;
    height: auto;
    align-content: start;
  }

  /* Cards com design refinado */
  .cardSelectItem {
    transition:
      transform 0.15s ease,
      opacity 0.15s ease;
  }

  .cardSelectItem:hover {
    transform: translateY(-2px);
  }

  .cardSelectItem .proCardMini {
    transform: scale(0.9);
    transform-origin: center top;
    transition:
      transform 0.2s ease,
      box-shadow 0.2s ease;
  }

  .cardSelectItem:hover .proCardMini {
    transform: scale(0.93);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  }

  /* Empty state */
  .cardFilters__empty {
    grid-column: 2;
    margin-left: 0;
  }

  /* Footer com ações - design clean */
  .pModal__actions {
    grid-column: 2;
    grid-row: 3;
    position: relative;
    left: auto;
    right: auto;
    bottom: auto;
    padding: 8px 12px;
    gap: 10px;
    background: rgba(0, 0, 0, 0.4);
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    display: flex;
    justify-content: flex-end;
  }

  .pModal__actions .btn {
    padding: 8px 16px;
    font-size: 11px;
    font-weight: 600;
    border-radius: 6px;
    transition: all 0.2s ease;
  }

  .pModal__actions .btn--ghost {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.1);
  }

  .pModal__actions .btn--ghost:hover {
    background: rgba(255, 255, 255, 0.1);
  }

  .pModal__actions .btn--primary {
    background: linear-gradient(135deg, #22c55e, #16a34a);
    border: none;
    box-shadow: 0 2px 8px rgba(34, 197, 94, 0.3);
  }

  .pModal__actions .btn--primary:hover {
    box-shadow: 0 4px 12px rgba(34, 197, 94, 0.4);
    transform: translateY(-1px);
  }

  .pModal__actions .btn--secondary {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.8);
  }

  .pModal__actions .btn--secondary:hover {
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
  }
  /* Position badge nas cartas */
  .proCardMini__positionBadge {
    width: 18px;
    height: 18px;
    font-size: 9px;
    bottom: 4px;
    right: 4px;
  }
}

/* Landscape menor (iPhones menores) */
@media (max-width: 812px) and (max-height: 400px) and (orientation: landscape) {
  .pModal--fullMobile .pModal__box--cards {
    grid-template-columns: 140px 1fr;
  }

  .multiSelectInfo {
    padding: 8px;
    gap: 8px;
  }

  .multiSelectInfo__slot {
    height: 28px;
    min-width: 36px;
  }

  .multiSelectInfo__slotName {
    font-size: 8px;
    max-width: 32px;
  }

  .cardSelectGrid {
    grid-template-columns: repeat(auto-fill, minmax(85px, 1fr));
    gap: 6px;
    padding: 8px;
  }

  .cardSelectItem .proCardMini {
    transform: scale(0.8);
  }

  .pModal__actions .btn {
    padding: 6px 12px;
    font-size: 10px;
  }
}

/* =============================================
   RANKING PAGE STYLES
   ============================================= */

/* Header do Ranking */
.rankingHeader {
  text-align: center;
  padding: 30px 20px;
  background: linear-gradient(135deg, rgba(251, 191, 36, 0.1) 0%, rgba(30, 30, 50, 0.5) 100%);
  border-radius: 12px;
  margin-bottom: 24px;
}

.rankingHeader__title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.rankingHeader__icon {
  font-size: 36px;
}

.rankingHeader__title h1 {
  font-size: 28px;
  font-weight: 800;
  color: #fff;
  margin: 0;
  letter-spacing: 2px;
}

.rankingHeader__subtitle {
  color: rgba(255, 255, 255, 0.6);
  font-size: 14px;
  margin-top: 8px;
}

/* Prêmios */
.rankingPrizes {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}

.rankingPrize {
  background: rgba(30, 30, 50, 0.6);
  border-radius: 12px;
  padding: 20px 30px;
  text-align: center;
  min-width: 160px;
  border: 2px solid transparent;
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
}

.rankingPrize:hover {
  transform: translateY(-4px);
}

.rankingPrize--gold {
  border-color: #fbbf24;
  background: linear-gradient(135deg, rgba(251, 191, 36, 0.2) 0%, rgba(30, 30, 50, 0.6) 100%);
  box-shadow: 0 8px 32px rgba(251, 191, 36, 0.2);
}

.rankingPrize--silver {
  border-color: #9ca3af;
  background: linear-gradient(135deg, rgba(156, 163, 175, 0.2) 0%, rgba(30, 30, 50, 0.6) 100%);
  box-shadow: 0 8px 32px rgba(156, 163, 175, 0.15);
}

.rankingPrize--bronze {
  border-color: #cd7f32;
  background: linear-gradient(135deg, rgba(205, 127, 50, 0.2) 0%, rgba(30, 30, 50, 0.6) 100%);
  box-shadow: 0 8px 32px rgba(205, 127, 50, 0.15);
}

.rankingPrize__position {
  font-size: 14px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.5);
  margin-bottom: 4px;
}

.rankingPrize__icon {
  font-size: 40px;
  margin-bottom: 8px;
}

.rankingPrize__amount {
  font-size: 24px;
  font-weight: 800;
  color: #fff;
  margin-bottom: 4px;
}

.rankingPrize--gold .rankingPrize__amount {
  color: #fbbf24;
}

.rankingPrize--silver .rankingPrize__amount {
  color: #e5e7eb;
}

.rankingPrize--bronze .rankingPrize__amount {
  color: #cd7f32;
}

.rankingPrize__label {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.5);
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* Minha posição */
.rankingMyPosition {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background: rgba(251, 191, 36, 0.15);
  border: 1px solid rgba(251, 191, 36, 0.3);
  border-radius: 8px;
  padding: 12px 24px;
  margin-bottom: 24px;
}

.rankingMyPosition__label {
  color: rgba(255, 255, 255, 0.7);
  font-size: 14px;
}

.rankingMyPosition__rank {
  font-size: 20px;
  font-weight: 800;
  color: #fbbf24;
}

.rankingMyPosition__lp {
  font-size: 14px;
  color: #fff;
  background: rgba(0, 0, 0, 0.3);
  padding: 4px 12px;
  border-radius: 4px;
}

/* Card do Ranking */
.rankingCard {
  background: rgba(30, 30, 50, 0.6);
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 24px;
}

/* Tabela de Ranking */
.rankingTable {
  width: 100%;
}

.rankingTable__header {
  display: grid;
  grid-template-columns: 60px 1fr 80px 80px 120px 120px;
  gap: 12px;
  padding: 16px 20px;
  background: rgba(0, 0, 0, 0.3);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.rankingTable__col {
  font-size: 12px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.5);
  text-transform: uppercase;
  letter-spacing: 1px;
}

.rankingTable__col--pos {
  text-align: center;
}

.rankingTable__col--level,
.rankingTable__col--cards,
.rankingTable__col--lp,
.rankingTable__col--prize {
  text-align: center;
}

.rankingTable__body {
  max-height: 500px;
  overflow-y: auto;
}

.rankingTable__row {
  display: grid;
  grid-template-columns: 60px 1fr 80px 80px 120px 120px;
  gap: 12px;
  padding: 14px 20px;
  align-items: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  transition: background 0.2s ease;
}

.rankingTable__row:hover {
  background: rgba(255, 255, 255, 0.05);
}

.rankingTable__row--gold {
  background: linear-gradient(90deg, rgba(251, 191, 36, 0.15) 0%, transparent 100%);
}

.rankingTable__row--silver {
  background: linear-gradient(90deg, rgba(156, 163, 175, 0.1) 0%, transparent 100%);
}

.rankingTable__row--bronze {
  background: linear-gradient(90deg, rgba(205, 127, 50, 0.1) 0%, transparent 100%);
}

.rankingTable__row--me {
  background: rgba(59, 130, 246, 0.15) !important;
  border-left: 3px solid #3b82f6;
}

.rankingTable__medal {
  font-size: 24px;
  display: flex;
  justify-content: center;
}

.rankingTable__posNum {
  font-size: 16px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.5);
  display: flex;
  justify-content: center;
}

.rankingTable__col--player {
  display: flex;
  align-items: center;
  gap: 12px;
}

.rankingTable__avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid rgba(255, 255, 255, 0.2);
}

.rankingTable__name {
  font-size: 14px;
  font-weight: 600;
  color: #fff;
}

.rankingTable__you {
  font-size: 11px;
  color: #3b82f6;
  font-weight: 600;
}

.rankingTable__levelBadge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: var(--accent);
  color: #1a1a2e;
  font-size: 14px;
  font-weight: 800;
  border-radius: 6px;
}

.rankingTable__col--cards {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.7);
}

.rankingTable__col--lp {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.rankingTable__lpValue {
  font-size: 16px;
  font-weight: 700;
  color: #fbbf24;
}

.rankingTable__lpLabel {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.4);
  text-transform: uppercase;
}

.rankingTable__prizeAmount {
  font-size: 14px;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: 4px;
}

.rankingTable__prizeAmount--gold {
  background: rgba(251, 191, 36, 0.2);
  color: #fbbf24;
}

.rankingTable__prizeAmount--silver {
  background: rgba(156, 163, 175, 0.2);
  color: #e5e7eb;
}

.rankingTable__prizeAmount--bronze {
  background: rgba(205, 127, 50, 0.2);
  color: #cd7f32;
}

.rankingTable__noPrize {
  color: rgba(255, 255, 255, 0.3);
}

.rankingTable__empty {
  padding: 40px 20px;
  text-align: center;
  color: rgba(255, 255, 255, 0.5);
}

/* Informações */
.rankingInfo {
  background: rgba(30, 30, 50, 0.4);
  border-radius: 8px;
  padding: 16px 20px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.6);
  line-height: 1.6;
}

.rankingInfo strong {
  color: #fff;
}

/* =============================================
   RANKING RESPONSIVE
   ============================================= */
@media (max-width: 768px) {
  .rankingHeader {
    padding: 20px 16px;
  }

  .rankingHeader__icon {
    font-size: 28px;
  }

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

  .rankingPrizes {
    gap: 12px;
  }

  .rankingPrize {
    padding: 16px 20px;
    min-width: 100px;
    flex: 1;
  }

  .rankingPrize__icon {
    font-size: 32px;
  }

  .rankingPrize__amount {
    font-size: 18px;
  }

  .rankingMyPosition {
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px 16px;
  }

  .rankingTable__header {
    display: none;
  }

  .rankingTable__row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 12px 16px;
  }

  .rankingTable__col--pos {
    width: 40px;
  }

  .rankingTable__col--player {
    flex: 1;
    min-width: 120px;
  }

  .rankingTable__col--level,
  .rankingTable__col--cards {
    display: none;
  }

  .rankingTable__col--lp {
    flex-direction: row;
    gap: 4px;
  }

  .rankingTable__col--prize {
    width: 100%;
    text-align: left;
    margin-top: 4px;
    padding-left: 52px;
  }

  .rankingTable__avatar {
    width: 32px;
    height: 32px;
  }

  .rankingTable__name {
    font-size: 13px;
  }
}

@media (max-width: 480px) {
  .rankingPrizes {
    flex-direction: column;
    align-items: center;
  }

  .rankingPrize {
    width: 100%;
    max-width: 280px;
  }

  .rankingMyPosition {
    flex-direction: column;
    text-align: center;
  }
}

/* =============================================
   MOBILE IMPROVEMENTS - INDEX, LOGIN, CADASTRO
   ============================================= */

/* Topbar mobile improvements */
@media (max-width: 768px) {
  .topbar__inner {
    height: 60px;
    padding: 0 12px;
  }

  .topbar__actions {
    gap: 8px;
  }

  .topbar__actions .btn {
    padding: 8px 12px;
    font-size: 13px;
  }

  .topbar__actions .btn--ghost {
    display: none;
  }

  .brand {
    min-width: auto;
    gap: 8px;
  }

  .brand__mark {
    width: 32px;
    height: 32px;
  }

  .brand__name {
    font-size: 16px;
  }

  .brand__sub {
    font-size: 9px;
  }
}

@media (max-width: 480px) {
  .topbar__inner {
    height: 56px;
  }

  .brand__text {
    display: none;
  }

  .brand__mark {
    width: 36px;
    height: 36px;
  }

  /* UserChip compact on mobile - mantém meta visível */
  .userChip {
    gap: 8px;
    padding: 6px 10px 6px 6px;
  }

  .userChip__meta {
    display: flex;
  }

  .userChip__name {
    font-size: 12px;
    max-width: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .userChip__balance {
    font-size: 10px;
  }

  .userChip__avatar {
    width: 32px;
    height: 32px;
  }

  .userChip--compact .userChip__meta {
    display: none;
  }
}

/* Hero section mobile */
@media (max-width: 768px) {
  .hero {
    padding: 40px 0 30px;
  }

  .hero__grid {
    grid-template-columns: 1fr;
    gap: 30px;
    padding: 0;
  }

  .hero__copy {
    text-align: center;
    padding: 0 10px;
  }

  .hero__cta {
    flex-direction: column;
    gap: 12px;
    align-items: center;
  }

  .hero__cta .btn {
    width: 100%;
    max-width: 300px;
  }

  .h1 {
    font-size: 32px;
    line-height: 1.2;
  }

  .lead {
    font-size: 15px;
    line-height: 1.5;
  }

  .eyebrow {
    justify-content: center;
    font-size: 12px;
  }

  .trust {
    flex-direction: column;
    gap: 12px;
    align-items: center;
  }

  .trust__sep {
    display: none;
  }

  .trust__item {
    flex-direction: row;
    gap: 8px;
  }

  .hero__art {
    min-height: 250px;
    order: -1;
  }

  .hero__ghost {
    display: none;
  }
}

@media (max-width: 480px) {
  .hero {
    padding: 20px 0;
  }

  .h1 {
    font-size: 26px;
  }

  .lead {
    font-size: 14px;
  }

  .hero__art {
    min-height: 200px;
  }

  .art__card {
    transform: scale(0.7);
  }
}

/* Below hero section mobile */
@media (max-width: 768px) {
  .belowHero {
    padding: 30px 0;
  }

  .belowHero__grid {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .sectionHead {
    text-align: center;
  }

  .h2 {
    font-size: 24px;
  }

  .steps {
    gap: 20px;
  }

  .step {
    flex-direction: column;
    text-align: center;
    gap: 12px;
  }

  .step__n {
    margin: 0 auto;
  }

  .how__note {
    flex-direction: column;
    text-align: center;
    gap: 10px;
  }
}

/* Prize card mobile */
@media (max-width: 768px) {
  .prize {
    padding: 20px;
  }

  .prize__rows {
    gap: 12px;
  }

  .prize__row {
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    text-align: center;
  }

  .prize__label {
    width: 100%;
    order: 2;
  }

  .prize__cta {
    flex-direction: column;
    gap: 10px;
  }

  .prize__cta .btn {
    width: 100%;
  }
}

/* Stats grid mobile */
@media (max-width: 768px) {
  .stats__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }

  .stat {
    padding: 16px 12px;
  }

  .stat__v {
    font-size: 24px;
  }

  .stat__k {
    font-size: 11px;
  }
}

@media (max-width: 480px) {
  .stats__grid {
    grid-template-columns: 1fr;
  }
}

/* Auth pages (login/cadastro) mobile */
@media (max-width: 768px) {
  .authWrap {
    grid-template-columns: 1fr;
    gap: 30px;
    padding: 20px 0;
  }

  .authCard {
    padding: 24px 20px;
    border-radius: 16px;
  }

  .authHead {
    text-align: center;
    margin-bottom: 24px;
  }

  .authTitle {
    font-size: 26px;
  }

  .authSub {
    font-size: 14px;
  }

  .authSide {
    order: -1;
  }

  .authSideCard {
    padding: 16px;
  }

  .authSideTitle {
    font-size: 14px;
  }

  .authSideText {
    font-size: 13px;
  }

  .grid2 {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .field {
    margin-bottom: 16px;
  }

  .label {
    font-size: 13px;
  }

  .input {
    height: 48px;
    font-size: 16px; /* Prevents zoom on iOS */
    padding: 0 14px;
  }

  .help {
    font-size: 11px;
  }

  .btn--wide {
    width: 100%;
  }

  .btn--lg {
    height: 50px;
    font-size: 15px;
  }

  .authFoot {
    text-align: center;
    margin-top: 20px;
  }

  .authAlert {
    padding: 14px;
    font-size: 13px;
    border-radius: 12px;
  }
}

@media (max-width: 480px) {
  .authCard {
    padding: 20px 16px;
    margin: 0 -6px;
  }

  .authTitle {
    font-size: 22px;
  }

  .authSub {
    font-size: 13px;
  }

  /* Phone picker mobile */
  .phoneRow {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .phonePick {
    width: 100%;
    justify-content: flex-start;
  }

  .phoneInput {
    width: 100%;
  }

  .countryDrop {
    left: 0;
    right: 0;
    max-width: none;
  }
}

/* Footer mobile */
@media (max-width: 768px) {
  .footer {
    padding: 20px 0;
  }

  .footer__inner {
    flex-direction: column;
    gap: 16px;
    text-align: center;
  }

  .footer__left,
  .footer__right {
    justify-content: center;
  }

  .footer__right {
    flex-wrap: wrap;
    gap: 8px 16px;
  }

  .footer__right .sep {
    display: none;
  }
}

/* Notification container mobile */
@media (max-width: 768px) {
  .notificationContainer {
    top: 12px;
    bottom: auto;
    left: 12px;
    right: 12px;
    max-width: none;
    z-index: 100000; /* Acima de todos os modais e overlays */
  }

  .notification {
    padding: 12px 14px;
    font-size: 13px;
    border-radius: 12px;
  }
}

/* Input wrapper mobile (password toggle) */
@media (max-width: 768px) {
  .inputWrapper {
    position: relative;
  }

  .inputToggle {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
  }

  .inputToggle__icon {
    width: 20px;
    height: 20px;
    background-color: rgba(233, 234, 237, 0.6);
    -webkit-mask-image: var(--icon);
    mask-image: var(--icon);
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
  }

  .inputWrapper .input {
    padding-right: 50px;
  }
}

/* Art cards mobile animation fix */
@media (max-width: 768px) {
  .art {
    transform: scale(0.8);
  }

  .art__card {
    animation: none;
  }
}

/* Side section mobile */
@media (max-width: 768px) {
  .side {
    display: flex;
    flex-direction: column;
    gap: 20px;
  }
}

/* Container padding mobile */
@media (max-width: 768px) {
  .container {
    padding: 0 16px;
  }
}

@media (max-width: 480px) {
  .container {
    padding: 0 12px;
  }
}

/* =============================================
   PACK SYSTEM STYLES
   ============================================= */

/* Pack Grid */
.packGrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 20px;
  padding: 20px 0;
}

/* Pack Item */
.packItem {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 20px;
  background: linear-gradient(135deg, rgba(30, 30, 50, 0.8), rgba(20, 20, 35, 0.9));
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.packItem::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 0%, rgba(242, 182, 0, 0.15), transparent 70%);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.packItem:hover {
  transform: translateY(-4px);
  border-color: rgba(242, 182, 0, 0.4);
  box-shadow: 0 12px 40px rgba(242, 182, 0, 0.15);
}

.packItem:hover::before {
  opacity: 1;
}

.packItem__image {
  width: 140px;
  height: 200px;
  position: relative;
  z-index: 1;
  transition: transform 0.3s ease;
}

.packItem:hover .packItem__image {
  transform: scale(1.05) rotate(2deg);
}

.packItem__image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 10px 30px rgba(0, 0, 0, 0.5));
}

.packItem__info {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  text-align: center;
  position: relative;
  z-index: 1;
}

.packItem__type {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  text-transform: uppercase;
  letter-spacing: 1px;
}

.packItem__cards {
  font-size: 12px;
  color: var(--muted);
}

.packItem__open {
  width: 100%;
  padding: 12px 20px;
  font-size: 12px;
  letter-spacing: 1px;
  position: relative;
  z-index: 1;
}

/* Pack Modal */
.pModal__box--pack {
  max-width: 500px;
  width: 95%;
  background: linear-gradient(180deg, #1a1a2e 0%, #0f0f1a 100%);
  border: 1px solid rgba(242, 182, 0, 0.2);
  position: relative;
  overflow: hidden;
}

.pModal__box--pack::before {
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: conic-gradient(
    from 0deg,
    transparent,
    rgba(242, 182, 0, 0.1),
    transparent,
    rgba(242, 182, 0, 0.05),
    transparent
  );
  animation: packModalRotate 10s linear infinite;
  opacity: 0.5;
}

@keyframes packModalRotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* Pack Open Container */
.packOpenContainer {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 450px;
  padding: 30px;
  z-index: 1;
}

/* Pack Opening Animation */
.packOpen {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 200px;
  height: 285px;
  transition: all 0.5s ease;
}

.packOpen__pack {
  width: 100%;
  height: 100%;
  position: relative;
  z-index: 2;
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  filter: drop-shadow(0 20px 50px rgba(0, 0, 0, 0.6));
}

.packOpen__pack img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Glow effect behind pack */
.packOpen__glow {
  position: absolute;
  inset: -40px;
  background: radial-gradient(circle, rgba(242, 182, 0, 0.3), transparent 70%);
  border-radius: 50%;
  opacity: 0;
  transition: all 0.5s ease;
  z-index: 0;
  filter: blur(30px);
}

/* Particles effect */
.packOpen__particles {
  position: absolute;
  inset: -60px;
  pointer-events: none;
  z-index: 1;
}

.packOpen__particles span {
  position: absolute;
  display: block;
  width: 10px;
  height: 10px;
  background: var(--accent);
  border-radius: 50%;
  opacity: 0;
  box-shadow:
    0 0 10px var(--accent),
    0 0 20px var(--accent);
}

/* Opening animation state */
.packOpen--opening .packOpen__pack {
  animation: packShake 0.5s ease-in-out infinite;
}

.packOpen--opening .packOpen__glow {
  opacity: 1;
  animation: packGlowPulse 0.5s ease-in-out infinite;
}

.packOpen--opening .packOpen__particles span {
  animation: packParticle 2s ease-out forwards;
}

.packOpen--opening .packOpen__particles span:nth-child(1) {
  animation-delay: 0.1s;
  top: 50%;
  left: 10%;
}
.packOpen--opening .packOpen__particles span:nth-child(2) {
  animation-delay: 0.2s;
  top: 20%;
  left: 20%;
}
.packOpen--opening .packOpen__particles span:nth-child(3) {
  animation-delay: 0.3s;
  top: 30%;
  right: 10%;
}
.packOpen--opening .packOpen__particles span:nth-child(4) {
  animation-delay: 0.4s;
  top: 60%;
  right: 20%;
}
.packOpen--opening .packOpen__particles span:nth-child(5) {
  animation-delay: 0.5s;
  bottom: 30%;
  left: 15%;
}
.packOpen--opening .packOpen__particles span:nth-child(6) {
  animation-delay: 0.6s;
  bottom: 20%;
  right: 15%;
}
.packOpen--opening .packOpen__particles span:nth-child(7) {
  animation-delay: 0.7s;
  top: 10%;
  left: 50%;
}
.packOpen--opening .packOpen__particles span:nth-child(8) {
  animation-delay: 0.8s;
  bottom: 10%;
  left: 40%;
}

@keyframes packShake {
  0%,
  100% {
    transform: translateX(0) rotate(0deg);
  }
  25% {
    transform: translateX(-5px) rotate(-2deg);
  }
  75% {
    transform: translateX(5px) rotate(2deg);
  }
}

@keyframes packGlowPulse {
  0%,
  100% {
    opacity: 0.5;
    transform: scale(1);
  }
  50% {
    opacity: 1;
    transform: scale(1.1);
  }
}

@keyframes packParticle {
  0% {
    opacity: 0;
    transform: translate(0, 0) scale(0);
  }
  20% {
    opacity: 1;
    transform: translate(0, 0) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate(var(--tx, 30px), var(--ty, -60px)) scale(0.5);
  }
}

.packOpen__particles span:nth-child(1) {
  --tx: -50px;
  --ty: -80px;
}
.packOpen__particles span:nth-child(2) {
  --tx: -70px;
  --ty: -40px;
}
.packOpen__particles span:nth-child(3) {
  --tx: 60px;
  --ty: -70px;
}
.packOpen__particles span:nth-child(4) {
  --tx: 80px;
  --ty: -30px;
}
.packOpen__particles span:nth-child(5) {
  --tx: -60px;
  --ty: 50px;
}
.packOpen__particles span:nth-child(6) {
  --tx: 70px;
  --ty: 60px;
}
.packOpen__particles span:nth-child(7) {
  --tx: 0px;
  --ty: -100px;
}
.packOpen__particles span:nth-child(8) {
  --tx: 20px;
  --ty: 80px;
}

/* Opened state - pack disappears */
.packOpen--opened {
  animation: packExplode 0.6s ease-out forwards;
}

.packOpen--opened .packOpen__pack {
  animation: packDisappear 0.4s ease-out forwards;
}

.packOpen--opened .packOpen__glow {
  animation: packGlowExplode 0.6s ease-out forwards;
}

@keyframes packExplode {
  0% {
    transform: scale(1);
  }
  30% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(0.8);
    opacity: 0;
  }
}

@keyframes packDisappear {
  0% {
    transform: scale(1) rotate(0deg);
    opacity: 1;
  }
  50% {
    transform: scale(1.3) rotate(10deg);
    opacity: 0.8;
  }
  100% {
    transform: scale(0) rotate(45deg);
    opacity: 0;
  }
}

@keyframes packGlowExplode {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  100% {
    transform: scale(3);
    opacity: 0;
  }
}

/* Card Reveal */
.packOpen__reveal {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  opacity: 0;
  transform: scale(0.8) translateY(20px);
  transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.packOpen__reveal--visible {
  opacity: 1;
  transform: scale(1) translateY(0);
}

.packOpen__cardContainer {
  perspective: 1000px;
}

.packOpen__cardContainer .proCard {
  animation: cardRevealFlip 0.8s cubic-bezier(0.4, 0, 0.2, 1) forwards;
  transform-style: preserve-3d;
}

@keyframes cardRevealFlip {
  0% {
    transform: rotateY(180deg) scale(0.5);
    opacity: 0;
  }
  50% {
    transform: rotateY(90deg) scale(0.8);
    opacity: 0.5;
  }
  100% {
    transform: rotateY(0deg) scale(1);
    opacity: 1;
  }
}

/* Card revealed animation */
.proCard--revealed {
  box-shadow:
    0 0 30px rgba(242, 182, 0, 0.3),
    0 20px 60px rgba(0, 0, 0, 0.5);
  animation: cardGlow 2s ease-in-out infinite alternate;
}

@keyframes cardGlow {
  from {
    box-shadow:
      0 0 30px rgba(242, 182, 0, 0.3),
      0 20px 60px rgba(0, 0, 0, 0.5);
  }
  to {
    box-shadow:
      0 0 50px rgba(242, 182, 0, 0.5),
      0 25px 70px rgba(0, 0, 0, 0.6);
  }
}

/* Card info below revealed card */
.packOpen__cardInfo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
}

.packOpen__rarity {
  font-size: 14px;
  font-weight: 800;
  padding: 6px 16px;
  border-radius: 20px;
  text-transform: uppercase;
  letter-spacing: 2px;
}

.packOpen__rarity--common {
  background: linear-gradient(135deg, rgba(107, 114, 128, 0.3), rgba(107, 114, 128, 0.1));
  color: #9ca3af;
  border: 1px solid rgba(107, 114, 128, 0.5);
}

.packOpen__rarity--uncommon {
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.3), rgba(34, 197, 94, 0.1));
  color: #22c55e;
  border: 1px solid rgba(34, 197, 94, 0.5);
}

.packOpen__rarity--rare {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.3), rgba(59, 130, 246, 0.1));
  color: #3b82f6;
  border: 1px solid rgba(59, 130, 246, 0.5);
}

.packOpen__rarity--epic {
  background: linear-gradient(135deg, rgba(168, 85, 247, 0.3), rgba(168, 85, 247, 0.1));
  color: #a855f7;
  border: 1px solid rgba(168, 85, 247, 0.5);
}

.packOpen__rarity--legendary {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.3), rgba(245, 158, 11, 0.1));
  color: #f59e0b;
  border: 1px solid rgba(245, 158, 11, 0.5);
  animation: rarityPulse 1.5s ease-in-out infinite;
}

.packOpen__rarity--mythic {
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.3), rgba(239, 68, 68, 0.1));
  color: #ef4444;
  border: 1px solid rgba(239, 68, 68, 0.5);
  animation: rarityPulse 1s ease-in-out infinite;
}

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

.packOpen__proNumber {
  font-size: 11px;
  color: var(--muted);
  letter-spacing: 1px;
}

/* Pack Modal Actions */
.pModal__box--pack .pModal__actions {
  padding: 20px 30px;
  background: rgba(0, 0, 0, 0.3);
}

.pModal__box--pack .pModal__actions .btn--primary {
  width: 100%;
  padding: 14px 30px;
  font-size: 14px;
  letter-spacing: 2px;
}

/* Mobile Responsive for Pack */
@media (max-width: 768px) {
  .packGrid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }

  .packItem {
    padding: 16px;
  }

  .packItem__image {
    width: 100px;
    height: 142px;
  }

  .packItem__type {
    font-size: 12px;
  }

  .packOpenContainer {
    min-height: 400px;
    padding: 20px;
  }

  .packOpen {
    width: 160px;
    height: 228px;
  }

  .packOpen__reveal .proCard {
    width: 240px;
    height: 343px;
    transform: none;
  }

  /* Ajustes proporcionais para a carta revelada em tablets */
  .packOpen__reveal .proCard__content {
    padding: 12px;
  }

  .packOpen__reveal .proCard__flag {
    width: 40px;
    height: 40px;
    border-width: 2px;
  }

  .packOpen__reveal .proCard__countryCode {
    font-size: 10px;
  }

  .packOpen__reveal .proCard__role {
    font-size: 22px;
    letter-spacing: 2px;
  }

  .packOpen__reveal .proCard__rating {
    font-size: 38px;
  }

  .packOpen__reveal .proCard__ratingLabel {
    font-size: 9px;
    letter-spacing: 1.5px;
  }

  .packOpen__reveal .proCard__teamLogo {
    width: 36px;
    height: 36px;
  }

  .packOpen__reveal .proCard__octagon {
    width: 155px;
    height: 155px;
  }

  .packOpen__reveal .proCard__octagonInner {
    inset: 4px;
  }

  .packOpen__reveal .proCard__nameBox {
    padding: 0 14px;
  }

  .packOpen__reveal .proCard__name {
    padding: 10px 16px;
  }

  .packOpen__reveal .proCard__nameText {
    font-size: 20px;
    letter-spacing: 3px;
  }

  .packOpen__reveal .proCard__footer {
    margin-top: 10px;
    padding-top: 6px;
  }

  .packOpen__reveal .proCard__proNumber,
  .packOpen__reveal .proCard__edition {
    font-size: 7px;
  }

  .packOpen__reveal .proCard__photoArea {
    margin-top: 6px;
  }

  .packOpen__reveal .proCard__octagon--revealed {
    margin-top: -32px;
  }
}

@media (max-width: 480px) {
  .packGrid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }

  .packItem {
    padding: 12px;
  }

  .packItem__image {
    width: 80px;
    height: 114px;
  }

  .packItem__type {
    font-size: 11px;
  }

  .packItem__cards {
    font-size: 10px;
  }

  .packItem__open {
    padding: 10px 14px;
    font-size: 10px;
  }

  .packOpenContainer {
    min-height: 350px;
    padding: 16px;
  }

  .packOpen {
    width: 140px;
    height: 200px;
  }

  .packOpen__reveal .proCard {
    transform: scale(0.75);
  }

  .packOpen__rarity {
    font-size: 12px;
    padding: 4px 12px;
  }
}

/* =============================================
   OTHER CARDS FROM PACK (Multiple Cards Support)
   ============================================= */

/* Container para outras cartas */
.packOpen__otherCards {
  width: 100%;
  max-width: 500px;
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.packOpen__otherTitle {
  font-size: 14px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 1px;
  text-align: center;
  margin-bottom: 12px;
}

.packOpen__otherGrid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}

/* Mini card para outras cartas */
.packOpen__miniCard {
  width: 100px !important;
  height: 143px !important;
  min-width: 100px !important;
  min-height: 143px !important;
  transform: scale(1);
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
  cursor: default;
  animation: miniCardReveal 0.5s ease-out backwards;
}

.packOpen__miniCard:nth-child(1) {
  animation-delay: 0.1s;
}
.packOpen__miniCard:nth-child(2) {
  animation-delay: 0.2s;
}
.packOpen__miniCard:nth-child(3) {
  animation-delay: 0.3s;
}
.packOpen__miniCard:nth-child(4) {
  animation-delay: 0.4s;
}
.packOpen__miniCard:nth-child(5) {
  animation-delay: 0.5s;
}
.packOpen__miniCard:nth-child(6) {
  animation-delay: 0.6s;
}

@keyframes miniCardReveal {
  0% {
    opacity: 0;
    transform: scale(0.5) translateY(20px);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.packOpen__miniCard:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

/* Ajuste tamanhos internos das mini cards no reveal */
.packOpen__miniCard .proCardMini__octagon {
  width: 55px;
  height: 55px;
}

.packOpen__miniCard .proCardMini__rating {
  font-size: 16px;
}

.packOpen__miniCard .proCardMini__nameText {
  font-size: 9px;
}

.packOpen__miniCard .proCardMini__role {
  font-size: 8px;
}

.packOpen__miniCard .proCardMini__flag {
  width: 18px;
  height: 18px;
}

.packOpen__miniCard .proCardMini__teamLogo {
  width: 16px;
  height: 16px;
}

.packOpen__miniCard .proCardMini__countryCode {
  font-size: 5px;
}

.packOpen__miniCard .proCardMini__ratingLabel {
  font-size: 5px;
}

.packOpen__miniCard .proCardMini__footer {
  display: none;
}

.packOpen__miniCard .proCardMini__name {
  padding: 4px;
  margin-top: 2px;
  margin-bottom: 2px;
}

/* Fix carta centralizada no reveal */
.packOpen__cardContainer {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.packOpen__cardContainer .proCard {
  margin: 0 auto;
}

/* Ajuste do reveal para centralizar */
.packOpen__reveal {
  width: 100%;
  align-items: center;
  justify-content: flex-start;
  min-height: auto;
  padding: 10px 0;
}

/* Carta principal revelada - igual ao squad.php */
.packOpen__reveal .proCard {
  width: 280px;
  height: 400px;
  margin: 0 auto;
}

/* Ajuste do nome da carta revelada com borda arredondada */
.packOpen__reveal .proCard__name {
  border-radius: 6px;
}

/* Octógono da carta revelada - ajuste de margem */
.proCard__octagon--revealed {
  margin-top: -40px;
}

/* Nome da carta revelada - ajuste de padding */
.proCard__name--revealed {
  padding: 5px 10px;
}

/* Wrapper para mini card com info abaixo */
.packOpen__miniCardWrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

/* Info abaixo da mini card */
.packOpen__miniCardInfo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  text-align: center;
}

.packOpen__miniRarity {
  font-size: 10px;
  font-weight: 800;
  padding: 3px 10px;
  border-radius: 12px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.packOpen__miniProNumber {
  font-size: 9px;
  color: var(--muted2);
  letter-spacing: 0.5px;
}

/* Mobile responsivo para múltiplas cartas */
@media (max-width: 768px) {
  .packOpen__otherGrid {
    gap: 8px;
  }

  .packOpen__miniCard {
    width: 80px !important;
    height: 114px !important;
    min-width: 80px !important;
    min-height: 114px !important;
  }

  .packOpen__miniCard .proCardMini__octagon {
    width: 45px;
    height: 45px;
  }

  .packOpen__miniCard .proCardMini__rating {
    font-size: 14px;
  }

  .packOpen__miniCard .proCardMini__nameText {
    font-size: 8px;
  }

  .packOpen__otherTitle {
    font-size: 12px;
  }

  .packOpen__miniRarity {
    font-size: 8px;
    padding: 2px 8px;
  }

  .packOpen__miniProNumber {
    font-size: 8px;
  }
}

@media (max-width: 480px) {
  .packOpen__reveal .proCard {
    width: 200px;
    height: 286px;
    transform: none;
  }

  /* Ajustes proporcionais para a carta revelada no mobile */
  .packOpen__reveal .proCard__content {
    padding: 10px;
  }

  .packOpen__reveal .proCard__flag {
    width: 34px;
    height: 34px;
    border-width: 2px;
  }

  .packOpen__reveal .proCard__countryCode {
    font-size: 9px;
    letter-spacing: 0.5px;
  }

  .packOpen__reveal .proCard__role {
    font-size: 18px;
    letter-spacing: 1.5px;
  }

  .packOpen__reveal .proCard__rating {
    font-size: 32px;
  }

  .packOpen__reveal .proCard__ratingLabel {
    font-size: 8px;
    letter-spacing: 1px;
  }

  .packOpen__reveal .proCard__teamLogo {
    width: 30px;
    height: 30px;
  }

  .packOpen__reveal .proCard__octagon {
    width: 130px;
    height: 130px;
  }

  .packOpen__reveal .proCard__octagonInner {
    inset: 3px;
  }

  .packOpen__reveal .proCard__nameBox {
    padding: 0 10px;
  }

  .packOpen__reveal .proCard__name {
    padding: 8px 12px;
  }

  .packOpen__reveal .proCard__nameText {
    font-size: 16px;
    letter-spacing: 2px;
  }

  .packOpen__reveal .proCard__footer {
    margin-top: 8px;
    padding-top: 6px;
  }

  .packOpen__reveal .proCard__proNumber,
  .packOpen__reveal .proCard__edition {
    font-size: 6px;
  }

  .packOpen__reveal .proCard__photoArea {
    margin-top: 4px;
  }

  .packOpen__reveal .proCard__octagon--revealed {
    margin-top: -25px;
  }

  .packOpen__reveal .proCard__left,
  .packOpen__reveal .proCard__right {
    gap: 3px;
  }

  .packOpen__reveal .proCard__header {
    margin-bottom: 0;
  }

  .packOpen__miniCardWrapper {
    gap: 6px;
  }

  .packOpen__miniCard {
    width: 70px !important;
    height: 100px !important;
    min-width: 70px !important;
    min-height: 100px !important;
  }

  .packOpen__miniCard .proCardMini__octagon {
    width: 38px;
    height: 38px;
  }

  .packOpen__miniCard .proCardMini__rating {
    font-size: 12px;
  }

  .packOpen__miniCard .proCardMini__name {
    display: none;
  }

  .packOpen__miniRarity {
    font-size: 7px;
    padding: 2px 6px;
  }

  .packOpen__miniProNumber {
    display: none;
  }
}

/* Extra small mobile (iPhone SE, small phones) */
@media (max-width: 380px) {
  .packOpen__reveal .proCard {
    width: 180px;
    height: 257px;
  }

  .packOpen__reveal .proCard__content {
    padding: 8px;
  }

  .packOpen__reveal .proCard__flag {
    width: 28px;
    height: 28px;
    border-width: 2px;
  }

  .packOpen__reveal .proCard__countryCode {
    font-size: 7px;
    letter-spacing: 0.3px;
  }

  .packOpen__reveal .proCard__role {
    font-size: 14px;
    letter-spacing: 1px;
  }

  .packOpen__reveal .proCard__rating {
    font-size: 26px;
  }

  .packOpen__reveal .proCard__ratingLabel {
    font-size: 6px;
    letter-spacing: 0.5px;
  }

  .packOpen__reveal .proCard__teamLogo {
    width: 24px;
    height: 24px;
  }

  .packOpen__reveal .proCard__octagon {
    width: 110px;
    height: 110px;
  }

  .packOpen__reveal .proCard__octagonInner {
    inset: 3px;
  }

  .packOpen__reveal .proCard__nameBox {
    padding: 0 8px;
  }

  .packOpen__reveal .proCard__name {
    padding: 6px 10px;
    border-width: 1px;
  }

  .packOpen__reveal .proCard__nameText {
    font-size: 13px;
    letter-spacing: 1.5px;
  }

  .packOpen__reveal .proCard__footer {
    margin-top: 6px;
    padding-top: 4px;
  }

  .packOpen__reveal .proCard__proNumber,
  .packOpen__reveal .proCard__edition {
    font-size: 5px;
  }

  .packOpen__reveal .proCard__photoArea {
    margin-top: 2px;
  }

  .packOpen__reveal .proCard__octagon--revealed {
    margin-top: -20px;
  }

  .packOpen__reveal .proCard__left,
  .packOpen__reveal .proCard__right {
    gap: 2px;
  }

  .packOpen__reveal .proCard__ratingBox {
    gap: 1px;
  }

  .packOpen__cardInfo {
    margin-top: 10px;
    gap: 6px;
  }

  .packOpen__rarity {
    font-size: 10px;
    padding: 4px 10px;
  }

  .packOpen__proNumber {
    font-size: 9px;
  }

  .packOpen__otherTitle {
    font-size: 11px;
    margin-bottom: 8px;
  }

  .packOpen__otherGrid {
    gap: 6px;
  }

  .packOpen__miniCard {
    width: 60px !important;
    height: 86px !important;
    min-width: 60px !important;
    min-height: 86px !important;
  }

  .packOpen__miniCard .proCardMini__content {
    padding: 4px;
  }

  .packOpen__miniCard .proCardMini__octagon {
    width: 32px;
    height: 32px;
  }

  .packOpen__miniCard .proCardMini__rating {
    font-size: 10px;
  }

  .packOpen__miniCard .proCardMini__role {
    font-size: 6px;
  }

  .packOpen__miniCard .proCardMini__flag {
    width: 14px;
    height: 14px;
    border-width: 1px;
  }

  .packOpen__miniCard .proCardMini__teamLogo {
    width: 12px;
    height: 12px;
  }

  .packOpen__miniCard .proCardMini__countryCode {
    display: none;
  }

  .packOpen__miniCard .proCardMini__ratingLabel {
    display: none;
  }

  .packOpen__miniCard .proCardMini__photoArea {
    margin-top: -8px;
  }

  .packOpen__miniRarity {
    font-size: 6px;
    padding: 2px 5px;
  }

  .packOpen__miniCardWrapper {
    gap: 4px;
  }
}

/* =============================================
   RARITY BADGES (Profile History)
   ============================================= */

.pRarityBadge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-right: 4px;
  margin-bottom: 4px;
}

.pRarityBadge--common {
  background: rgba(107, 114, 128, 0.2);
  color: #9ca3af;
  border: 1px solid rgba(107, 114, 128, 0.3);
}

.pRarityBadge--uncommon {
  background: rgba(34, 197, 94, 0.2);
  color: #22c55e;
  border: 1px solid rgba(34, 197, 94, 0.3);
}

.pRarityBadge--rare {
  background: rgba(59, 130, 246, 0.2);
  color: #3b82f6;
  border: 1px solid rgba(59, 130, 246, 0.3);
}

.pRarityBadge--epic {
  background: rgba(168, 85, 247, 0.2);
  color: #a855f7;
  border: 1px solid rgba(168, 85, 247, 0.3);
}

.pRarityBadge--legendary {
  background: rgba(245, 158, 11, 0.2);
  color: #f59e0b;
  border: 1px solid rgba(245, 158, 11, 0.3);
}

.pRarityBadge--mythic {
  background: rgba(239, 68, 68, 0.2);
  color: #ef4444;
  border: 1px solid rgba(239, 68, 68, 0.3);
}

/* Fix botão Continuar clicável */
.pModal__box--pack .pModal__actions {
  position: relative;
  z-index: 100;
}

#packContinueBtn {
  position: relative;
  z-index: 101;
  pointer-events: auto !important;
  cursor: pointer !important;
}

/* =============================================
   Pack History - Histórico de Packs Abertos
   ============================================= */

.pExpandBtn {
  background: rgba(242, 182, 0, 0.15);
  border: 1px solid rgba(242, 182, 0, 0.3);
  color: var(--accent);
  padding: 2px 8px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 10px;
  margin-left: 8px;
  transition: all 0.2s ease;
}

.pExpandBtn:hover {
  background: rgba(242, 182, 0, 0.25);
  border-color: rgba(242, 182, 0, 0.5);
}

.pPackCardsRow {
  background: rgba(0, 0, 0, 0.2);
}

.pPackCardsCell {
  padding: 16px !important;
}

.pPackCardsGrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
}

.pPackCardItem {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px;
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
}

.pPackCardItem:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.pPackCardItem__name {
  font-weight: 600;
  font-size: 14px;
  margin-bottom: 6px;
  color: var(--text);
}

.pPackCardItem__details {
  display: flex;
  gap: 12px;
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 8px;
}

.pPackCardItem__rating {
  background: rgba(242, 182, 0, 0.1);
  color: var(--accent);
  padding: 2px 6px;
  border-radius: 4px;
  font-weight: 500;
}

.pPackCardItem__procard {
  font-family: monospace;
  font-size: 10px;
  opacity: 0.7;
}

.pPackCardItem__meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.pPackCardItem__championship {
  font-size: 11px;
  color: var(--muted2);
  background: rgba(255, 255, 255, 0.05);
  padding: 2px 6px;
  border-radius: 4px;
}

/* Bordas coloridas por raridade */
.pPackCardItem--common {
  border-left: 3px solid #9ca3af;
}

.pPackCardItem--uncommon {
  border-left: 3px solid #22c55e;
}

.pPackCardItem--rare {
  border-left: 3px solid #3b82f6;
}

.pPackCardItem--epic {
  border-left: 3px solid #a855f7;
}

.pPackCardItem--legendary {
  border-left: 3px solid #f59e0b;
}

.pPackCardItem--mythic {
  border-left: 3px solid #ef4444;
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.05), var(--card));
}

/* ========== PACK CARDS LIST (Linha horizontal) ========== */
.pPackCardsList {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.pPackCardLine {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 10px 16px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 13px;
  transition: background 0.2s ease;
}

.pPackCardLine:hover {
  background: rgba(255, 255, 255, 0.03);
}

.pPackCardLine__name {
  font-weight: 600;
  color: var(--text);
  min-width: 120px;
}

.pPackCardLine__rating {
  background: rgba(242, 182, 0, 0.1);
  color: var(--accent);
  padding: 3px 8px;
  border-radius: 4px;
  font-weight: 500;
  font-size: 12px;
  min-width: 80px;
}

.pPackCardLine__procard {
  font-family: monospace;
  font-size: 11px;
  color: var(--muted);
  min-width: 140px;
}

.pPackCardLine__championship {
  font-size: 12px;
  color: var(--muted2);
  flex: 1;
  min-width: 150px;
}

/* Bordas coloridas por raridade - linha */
.pPackCardLine--common {
  border-left: 3px solid #9ca3af;
}

.pPackCardLine--uncommon {
  border-left: 3px solid #22c55e;
}

.pPackCardLine--rare {
  border-left: 3px solid #3b82f6;
}

.pPackCardLine--epic {
  border-left: 3px solid #a855f7;
}

.pPackCardLine--legendary {
  border-left: 3px solid #f59e0b;
}

.pPackCardLine--mythic {
  border-left: 3px solid #ef4444;
  background: linear-gradient(90deg, rgba(239, 68, 68, 0.05), var(--card));
}

/* Responsivo para mobile */
@media (max-width: 768px) {
  .pPackCardLine {
    flex-wrap: wrap;
    gap: 8px 16px;
  }

  .pPackCardLine__name {
    min-width: 100%;
    font-size: 14px;
  }

  .pPackCardLine__championship {
    min-width: auto;
    flex: none;
  }
}

/* ========================================
   GLOBAL PAGE ANIMATIONS
   ======================================== */

/* Keyframe Animations */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeInLeft {
  from {
    opacity: 0;
    transform: translateX(-30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes fadeInRight {
  from {
    opacity: 0;
    transform: translateX(30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(50px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes pulse {
  0%,
  100% {
    opacity: 1;
    box-shadow: 0 0 0 0 rgba(242, 182, 0, 0.4);
  }
  50% {
    opacity: 0.8;
    box-shadow: 0 0 0 8px rgba(242, 182, 0, 0);
  }
}

@keyframes shimmer {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

/* Animation Classes */
.animate-fade-in {
  animation: fadeIn 0.5s ease-out forwards;
}

.animate-fade-in-up {
  animation: fadeInUp 0.6s ease-out forwards;
}

.animate-fade-in-down {
  animation: fadeInDown 0.5s ease-out forwards;
}

.animate-fade-in-left {
  animation: fadeInLeft 0.6s ease-out forwards;
}

.animate-fade-in-right {
  animation: fadeInRight 0.6s ease-out forwards;
}

.animate-scale-in {
  animation: scaleIn 0.4s ease-out forwards;
}

.animate-slide-up {
  animation: slideUp 0.7s ease-out forwards;
}

/* Staggered delays for child elements */
.stagger-1 {
  animation-delay: 0.1s;
  opacity: 0;
}
.stagger-2 {
  animation-delay: 0.2s;
  opacity: 0;
}
.stagger-3 {
  animation-delay: 0.3s;
  opacity: 0;
}
.stagger-4 {
  animation-delay: 0.4s;
  opacity: 0;
}
.stagger-5 {
  animation-delay: 0.5s;
  opacity: 0;
}
.stagger-6 {
  animation-delay: 0.6s;
  opacity: 0;
}

/* Page content animations - applies to main sections */
main > section,
main > .container > section,
.pDash,
.pPack,
.pCards,
.pProfile,
.pSquad,
.authWrap {
  animation: fadeInUp 0.6s ease-out forwards;
}

/* Card animations - Note: login-card, register-card and sidebar-card have their own animations in PHP files */
.pDash__card,
.card,
.packCard,
.pCard,
.sidebarCard,
.authSideCard {
  animation: fadeInUp 0.5s ease-out forwards;
  opacity: 0;
}

/* Stagger cards */
.pDash__card:nth-child(1),
.packCard:nth-child(1),
.pCard:nth-child(1) {
  animation-delay: 0.1s;
}
.pDash__card:nth-child(2),
.packCard:nth-child(2),
.pCard:nth-child(2) {
  animation-delay: 0.15s;
}
.pDash__card:nth-child(3),
.packCard:nth-child(3),
.pCard:nth-child(3) {
  animation-delay: 0.2s;
}
.pDash__card:nth-child(4),
.packCard:nth-child(4),
.pCard:nth-child(4) {
  animation-delay: 0.25s;
}
.pDash__card:nth-child(5),
.packCard:nth-child(5),
.pCard:nth-child(5) {
  animation-delay: 0.3s;
}
.pDash__card:nth-child(6),
.packCard:nth-child(6),
.pCard:nth-child(6) {
  animation-delay: 0.35s;
}

/* Sidebar card animations for login/register pages - separate to avoid conflicts */
.sidebar-card {
  animation: fadeInRight 0.6s ease-out forwards;
}
.sidebar-card:nth-child(1) {
  animation-delay: 0s;
}
.sidebar-card:nth-child(2) {
  animation-delay: 0.1s;
}
.sidebar-card:nth-child(3) {
  animation-delay: 0.2s;
}

/* Header animations */
.topbar {
  animation: fadeInDown 0.4s ease-out forwards;
}

/* Table animations - only apply to tables inside specific containers */
.pTableWrap .pTable,
.mktTable {
  animation: fadeIn 0.5s ease-out 0.2s forwards;
}

/* Button hover animations */
.btn {
  transition: all 0.25s ease;
}

.btn:hover {
  transform: translateY(-2px);
}

.btn:active {
  transform: translateY(0);
}

/* Grid item stagger */
.pGrid > *,
.packGrid > *,
.cardGrid > * {
  animation: scaleIn 0.4s ease-out forwards;
  opacity: 0;
}

.pGrid > *:nth-child(1),
.packGrid > *:nth-child(1),
.cardGrid > *:nth-child(1) {
  animation-delay: 0.05s;
}
.pGrid > *:nth-child(2),
.packGrid > *:nth-child(2),
.cardGrid > *:nth-child(2) {
  animation-delay: 0.1s;
}
.pGrid > *:nth-child(3),
.packGrid > *:nth-child(3),
.cardGrid > *:nth-child(3) {
  animation-delay: 0.15s;
}
.pGrid > *:nth-child(4),
.packGrid > *:nth-child(4),
.cardGrid > *:nth-child(4) {
  animation-delay: 0.2s;
}
.pGrid > *:nth-child(5),
.packGrid > *:nth-child(5),
.cardGrid > *:nth-child(5) {
  animation-delay: 0.25s;
}
.pGrid > *:nth-child(6),
.packGrid > *:nth-child(6),
.cardGrid > *:nth-child(6) {
  animation-delay: 0.3s;
}
.pGrid > *:nth-child(7),
.packGrid > *:nth-child(7),
.cardGrid > *:nth-child(7) {
  animation-delay: 0.35s;
}
.pGrid > *:nth-child(8),
.packGrid > *:nth-child(8),
.cardGrid > *:nth-child(8) {
  animation-delay: 0.4s;
}
.pGrid > *:nth-child(n + 9),
.packGrid > *:nth-child(n + 9),
.cardGrid > *:nth-child(n + 9) {
  animation-delay: 0.45s;
}

/* Titles and headers */
.pageTitle,
.sectionTitle,
.pTitle,
h1,
h2 {
  animation: fadeInUp 0.5s ease-out forwards;
}

/* Stats and counters */
.statBox,
.statCard,
.pStat {
  animation: scaleIn 0.4s ease-out forwards;
  opacity: 0;
}

.statBox:nth-child(1),
.statCard:nth-child(1),
.pStat:nth-child(1) {
  animation-delay: 0.1s;
}
.statBox:nth-child(2),
.statCard:nth-child(2),
.pStat:nth-child(2) {
  animation-delay: 0.2s;
}
.statBox:nth-child(3),
.statCard:nth-child(3),
.pStat:nth-child(3) {
  animation-delay: 0.3s;
}
.statBox:nth-child(4),
.statCard:nth-child(4),
.pStat:nth-child(4) {
  animation-delay: 0.4s;
}

/* Tab panels */
.tabPanel,
.pTab {
  animation: fadeIn 0.3s ease-out forwards;
}

/* Modal animations */
.modal,
.overlay {
  animation: fadeIn 0.25s ease-out forwards;
}

.modal__content,
.modalContent {
  animation: scaleIn 0.3s ease-out forwards;
}

/* Pack opening special animation */
.packReveal {
  animation: scaleIn 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

/* Note: prefers-reduced-motion is intentionally NOT enforced globally.
   Per project policy, animations are controlled by GPU capability detection
   in squad.js, not by OS accessibility settings. Users with good GPUs
   see full animations regardless of OS setting. */

/* ===== MARKET PAGE STYLES — Redesign v2 (Integrated Content) ===== */
/* Section Shell */
.mktSection {
  position: relative;
  margin-bottom: 0;
  padding: 28px 28px 0;
  animation: fadeInUp 0.4s ease-out forwards;
}
/* Header */
.mktSection__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0;
  padding-bottom: 20px;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  flex-wrap: wrap;
  gap: 12px;
}
.mktSection__title {
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 1.8px;
  color: var(--muted2);
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 10px;
}
.mktSection__titleIcon {
  width: 16px;
  height: 16px;
  display: inline-block;
  background-color: var(--accent);
  -webkit-mask: var(--icon) no-repeat center / contain;
  mask: var(--icon) no-repeat center / contain;
  flex: 0 0 auto;
}
.mktSection__info {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.mktSection__balance {
  display: flex;
  align-items: center;
  gap: 8px;
}
.mktSection__balanceLabel {
  font-size: 10px;
  font-weight: 700;
  color: var(--muted2);
  text-transform: uppercase;
  letter-spacing: 1px;
}
.mktSection__balanceValue {
  font-size: 16px;
  font-weight: 900;
  color: var(--accent);
}
.mktSection__fee {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--muted2);
  background: var(--bg1);
  padding: 5px 10px;
  border-radius: 4px;
}
.mktSection__feeIcon {
  width: 14px;
  height: 14px;
  display: inline-block;
  background-color: var(--muted2);
  -webkit-mask: var(--icon) no-repeat center / contain;
  mask: var(--icon) no-repeat center / contain;
  flex: 0 0 auto;
}
.mktSection__feeValue {
  color: var(--accent);
  font-weight: 800;
}

/* Market Tabs — same pattern as deskTabs */
.mktTabs {
  display: flex;
  gap: 0;
  margin: 0 -28px 0;
  padding: 0 28px;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
}
.mktTabs::-webkit-scrollbar { display: none; }
.mktTab {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 14px 18px;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  background: transparent;
  border-top: none;
  border-left: none;
  border-right: none;
  color: var(--muted2);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.2s ease, border-color 0.2s ease;
  flex-shrink: 0;
}
.mktTab:hover {
  color: var(--text);
}
.mktTab.is-active {
  color: var(--accent);
  border-bottom-color: var(--accent);
  background: transparent;
}
.mktTab__icon {
  width: 16px;
  height: 16px;
  display: inline-block;
  background-color: currentColor;
  -webkit-mask: var(--icon) no-repeat center / contain;
  mask: var(--icon) no-repeat center / contain;
  flex: 0 0 auto;
}

/* Market Grid */
.mktGrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 16px;
  margin-top: 20px;
}

/* ===== VIEW MODE TOGGLE ===== */
.viewModeToggle {
  display: flex;
  align-items: center;
  background: var(--bg2);
  border-radius: 4px;
  overflow: hidden;
  margin-left: 8px;
}
.viewModeToggle__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: transparent;
  border: none;
  color: var(--muted2);
  cursor: pointer;
  transition: all 0.2s ease;
}
.viewModeToggle__btn:hover { color: var(--text); background: rgba(255,255,255,0.05); }
.viewModeToggle__btn.is-active { background: rgba(242,182,0,0.12); color: var(--accent); }
.viewModeToggle__icon {
  width: 16px;
  height: 16px;
  background: currentColor;
  -webkit-mask: var(--icon) center/contain no-repeat;
  mask: var(--icon) center/contain no-repeat;
}

/* ===== LIST VIEW MODE ===== */
.mktGrid--list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.mktGrid--list .mktItem {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 20px;
  padding: 16px 20px;
  text-align: left;
}
.mktGrid--list .mktItem:hover {
  transform: translateX(4px);
}
.mktGrid--list .mktItem__seller {
  position: absolute;
  top: 8px;
  left: 16px;
  margin-bottom: 0;
  font-size: 10px;
}
.mktGrid--list .mktItem__card {
  flex-shrink: 0;
  margin-bottom: 0;
  transform: scale(0.7);
  transform-origin: center left;
  margin-right: -30px;
}
.mktGrid--list .mktItem__listInfo {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
  gap: 4px;
}
.mktGrid--list .mktItem__listName {
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mktGrid--list .mktItem__listMeta {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 12px;
  color: var(--muted);
}
.mktGrid--list .mktItem__listRating {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  padding: 3px 8px;
  background: rgba(242, 182, 0, 0.15);
  border: 1px solid rgba(242, 182, 0, 0.3);
  border-radius: 6px;
  font-size: 13px;
  font-weight: 800;
  color: var(--accent);
}
.mktGrid--list .mktItem__listTeam {
  display: flex;
  align-items: center;
  gap: 6px;
}
.mktGrid--list .mktItem__listTeamLogo {
  width: 20px;
  height: 20px;
  object-fit: contain;
}
.mktGrid--list .mktItem__listRarity {
  text-transform: capitalize;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
}
.mktGrid--list .mktItem__listRarity--mythic {
  background: rgba(139, 92, 246, 0.2);
  color: #a78bfa;
}
.mktGrid--list .mktItem__listRarity--legendary {
  background: rgba(234, 179, 8, 0.2);
  color: #facc15;
}
.mktGrid--list .mktItem__listRarity--epic {
  background: rgba(168, 85, 247, 0.2);
  color: #c084fc;
}
.mktGrid--list .mktItem__listRarity--rare {
  background: rgba(59, 130, 246, 0.2);
  color: #60a5fa;
}
.mktGrid--list .mktItem__listRarity--uncommon {
  background: rgba(34, 197, 94, 0.2);
  color: #4ade80;
}
.mktGrid--list .mktItem__listRarity--common {
  background: rgba(255, 255, 255, 0.1);
  color: var(--muted);
}
.mktGrid--list .mktItem__price {
  flex-shrink: 0;
  margin-bottom: 0;
  font-size: 20px;
  min-width: 100px;
  text-align: right;
}
.mktGrid--list .mktItem__receive {
  flex-shrink: 0;
  margin-bottom: 0;
  text-align: right;
  min-width: 120px;
}
.mktGrid--list .mktItem__btn,
.mktGrid--list .mktSellForm__btn {
  width: auto;
  min-width: 120px;
  flex-shrink: 0;
}
.mktGrid--list .mktSellForm {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 0;
  padding: 10px 14px;
  flex-shrink: 0;
}
.mktGrid--list .mktSellForm__row {
  flex-direction: row;
  align-items: center;
}
.mktGrid--list .mktSellForm__input {
  width: 100px;
  padding: 10px 12px;
}
.mktGrid--list .mktSellForm__calc {
  display: none;
}
.mktGrid--list .mktSellForm__blocked {
  flex-direction: row;
  gap: 8px;
  padding: 8px 12px;
}
.mktGrid--list .mktSellForm__blockedText {
  font-size: 11px;
}
.mktGrid--list .mktSellForm__blockedText br {
  display: none;
}
.mktGrid--list .buyForm {
  flex-shrink: 0;
}
.mktGrid--list .cancelForm {
  flex-shrink: 0;
}

/* List info hidden in grid mode */
.mktItem__listInfo {
  display: none;
}

/* Mobile list view adjustments */
@media (max-width: 768px) {
  .mktGrid--list .mktItem {
    flex-wrap: wrap;
    gap: 12px;
  }
  .mktGrid--list .mktItem__card {
    transform: scale(0.6);
    margin-right: -40px;
  }
  .mktGrid--list .mktItem__listInfo {
    flex: 1 1 calc(100% - 120px);
  }
  .mktGrid--list .mktItem__price {
    font-size: 18px;
    min-width: auto;
  }
  .mktGrid--list .mktItem__btn,
  .mktGrid--list .mktSellForm {
    width: 100%;
    flex: 1 1 100%;
  }
  .viewModeToggle__btn {
    width: 32px;
    height: 32px;
  }
  .viewModeToggle__icon {
    width: 16px;
    height: 16px;
  }
}
@media (max-width: 480px) {
  .mktGrid--list .mktItem__card {
    transform: scale(0.5);
    margin-right: -50px;
  }
  .mktGrid--list .mktItem__listMeta {
    flex-wrap: wrap;
    gap: 6px;
  }
}

/* Market Item Card */
.mktItem {
  position: relative;
  background: var(--bg1);
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.05);
  padding: 16px;
  text-align: center;
  overflow: hidden;
  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
  animation: scaleIn 0.35s ease-out forwards;
  opacity: 0;
}
.mktItem:nth-child(1) { animation-delay: 0.04s; }
.mktItem:nth-child(2) { animation-delay: 0.08s; }
.mktItem:nth-child(3) { animation-delay: 0.12s; }
.mktItem:nth-child(4) { animation-delay: 0.16s; }
.mktItem:nth-child(5) { animation-delay: 0.20s; }
.mktItem:nth-child(6) { animation-delay: 0.24s; }
.mktItem:nth-child(n+7) { animation-delay: 0.28s; }
.mktItem:hover {
  transform: translateY(-4px);
  border-color: rgba(242,182,0,0.25);
  box-shadow: 0 16px 40px rgba(0,0,0,0.4), 0 0 20px rgba(242,182,0,0.06);
}
.mktItem__seller {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  font-size: 10px;
  font-weight: 600;
  color: var(--muted2);
  margin-bottom: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.mktItem__sellerIcon {
  width: 12px; height: 12px;
  display: inline-block;
  background-color: var(--muted2);
  -webkit-mask: var(--icon) no-repeat center / contain;
  mask: var(--icon) no-repeat center / contain;
  flex: 0 0 auto;
}
.mktItem__card { display: flex; justify-content: center; margin-bottom: 14px; overflow: hidden; }
.mktItem__price {
  font-size: 20px;
  font-weight: 900;
  color: var(--accent);
  margin-bottom: 12px;
}
.mktItem__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  width: 100%;
  padding: 11px 16px;
  border-radius: 8px;
  border: none;
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 1px;
  cursor: pointer;
  background: linear-gradient(180deg, var(--accent), var(--accent2));
  color: #1a1a1a;
  transition: all 0.2s ease;
  box-shadow: 0 4px 14px rgba(242,182,0,0.2);
}
.mktItem__btn:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 8px 22px rgba(242,182,0,0.32);
}
.mktItem__btn:disabled { opacity: 0.45; cursor: not-allowed; box-shadow: none; }
.mktItem__btn--cancel {
  background: rgba(239,68,68,0.1);
  color: #ef4444;
  border: 1px solid rgba(239,68,68,0.2);
  box-shadow: none;
}
.mktItem__btn--cancel:hover:not(:disabled) {
  background: rgba(239,68,68,0.2);
  box-shadow: 0 6px 16px rgba(239,68,68,0.15);
}
.mktItem__btnIcon {
  width: 15px; height: 15px;
  display: inline-block;
  background-color: currentColor;
  -webkit-mask: var(--icon) no-repeat center / contain;
  mask: var(--icon) no-repeat center / contain;
  flex: 0 0 auto;
}
.mktItem__receive { margin-bottom: 10px; font-size: 11px; color: var(--muted2); }
.mktItem__receiveValue { color: #22c55e; font-weight: 700; }

/* Sell Form */
.mktSellForm {
  background: var(--bg2);
  border-radius: 8px;
  padding: 12px;
  margin-top: 12px;
}
.mktSellForm__row { display: flex; gap: 8px; align-items: stretch; }
.mktSellForm__inputWrap {
  flex: 1; min-width: 0;
  display: flex;
  align-items: center;
  background: var(--bg0);
  border: 1.5px solid rgba(255,255,255,0.08);
  border-radius: 6px;
  padding: 0 10px;
  gap: 4px;
  transition: border-color 0.2s ease;
}
.mktSellForm__inputWrap:focus-within { border-color: rgba(242,182,0,0.5); }
.mktSellForm__currency { color: var(--muted2); font-size: 12px; font-weight: 700; white-space: nowrap; flex-shrink: 0; }
.mktSellForm__input {
  flex: 1; min-width: 0;
  background: transparent; border: none; outline: none;
  padding: 10px 4px;
  color: var(--text); font-size: 14px; font-weight: 600;
}
.mktSellForm__input::placeholder { color: var(--muted2); }
.mktSellForm__btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 5px;
  padding: 10px 12px;
  width: 40px; flex-shrink: 0;
  border-radius: 6px; border: none;
  font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.8px;
  cursor: pointer;
  background: linear-gradient(180deg, var(--accent), var(--accent2));
  color: #1a1a1a;
  transition: all 0.2s ease;
}
.mktSellForm__btn:hover { box-shadow: 0 6px 16px rgba(242,182,0,0.28); }
.mktSellForm__btnIcon {
  width: 13px; height: 13px;
  display: inline-block;
  background-color: currentColor;
  -webkit-mask: var(--icon) no-repeat center / contain;
  mask: var(--icon) no-repeat center / contain;
  flex: 0 0 auto;
}
.mktSellForm__calc {
  margin-top: 10px; padding: 10px;
  background: rgba(242,182,0,0.06);
  border-radius: 6px;
}
.mktSellForm__calcRow {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 11px; color: var(--muted2); margin-bottom: 5px;
}
.mktSellForm__calcRow:last-child {
  margin-bottom: 0; padding-top: 7px;
  border-top: 1px solid rgba(255,255,255,0.06);
  font-size: 12px; font-weight: 800;
}
.mktSellForm__calcLabel { display: flex; align-items: center; gap: 5px; }
.mktSellForm__calcIcon {
  width: 11px; height: 11px;
  display: inline-block;
  background-color: var(--muted2);
  -webkit-mask: var(--icon) no-repeat center / contain;
  mask: var(--icon) no-repeat center / contain;
  flex: 0 0 auto;
}
.mktSellForm__calcValue { font-weight: 700; color: var(--text); }
.mktSellForm__calcValue--fee { color: #ef4444; }
.mktSellForm__calcValue--receive { color: #22c55e; font-size: 13px; }

/* Market Table */
.mktTable { width: 100%; border-collapse: collapse; }
.mktTable th, .mktTable td {
  padding: 13px 16px;
  text-align: left;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.mktTable th {
  font-size: 10px; font-weight: 900; color: var(--muted2);
  text-transform: uppercase; letter-spacing: 1.2px;
  background: var(--bg1);
}
.mktTable td { font-size: 13px; }
.mktTable__type {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 10px; border-radius: 4px;
  font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.5px;
}
.mktTable__type--sold { background: rgba(34,197,94,0.1); color: #22c55e; }
.mktTable__type--bought { background: rgba(59,130,246,0.1); color: #3b82f6; }
.mktTable__typeIcon {
  width: 11px; height: 11px;
  display: inline-block; background-color: currentColor;
  -webkit-mask: var(--icon) no-repeat center / contain;
  mask: var(--icon) no-repeat center / contain; flex: 0 0 auto;
}
.mktTable__player { font-weight: 700; color: var(--text); }
.mktTable__sub { font-size: 11px; color: var(--muted2); margin-top: 2px; }
.mktTable__result { font-weight: 800; font-size: 13px; }
.mktTable__result--positive { color: #22c55e; }
.mktTable__result--negative { color: #3b82f6; }

/* Market Empty State */
.mktEmpty { text-align: center; padding: 60px 20px; }
.mktEmpty__icon {
  width: 64px; height: 64px;
  margin: 0 auto 20px; display: block;
  background-color: var(--muted2); opacity: 0.25;
  -webkit-mask: var(--icon) no-repeat center / contain;
  mask: var(--icon) no-repeat center / contain;
}
.mktEmpty__title { font-size: 18px; font-weight: 800; color: var(--text); margin-bottom: 8px; }
.mktEmpty__text { color: var(--muted); font-size: 13px; max-width: 380px; margin: 0 auto; }
.mktEmpty__btn {
  display: inline-flex; align-items: center; justify-content: center;
  margin-top: 20px; padding: 11px 24px;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  color: #1a1a1a; font-weight: 700; font-size: 13px;
  border-radius: 6px; text-decoration: none; transition: all 0.2s ease;
  box-shadow: 0 4px 14px rgba(242,182,0,0.2);
}
.mktEmpty__btn:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(242,182,0,0.32); color: #1a1a1a; }
.mktEmpty--filtered {
  background: rgba(242,182,0,0.02);
  border: 1px dashed rgba(242,182,0,0.12);
  border-radius: 10px;
  margin: 16px 0;
}

/* Tab content wrapper */
.mktContent {
  padding: 20px 28px 28px;
}

@media (max-width: 768px) {
  .mktSection { padding: 16px 16px 0; }
  .mktTabs { margin: 0 -16px 0; padding: 0 16px; }
  .mktSection__header { flex-direction: column; align-items: flex-start; }
  .mktGrid { grid-template-columns: repeat(2, 1fr); gap: 10px; padding: 16px; }
  .mktItem { padding: 12px; }
  /* Escala o proCardMini para caber no container de 2 colunas sem ultrapassar */
  .mktItem__card .proCardMini {
    transform: scale(0.85);
    transform-origin: top center;
    margin-bottom: -24px;
  }
  .mktTable { font-size: 12px; }
  .mktTable th, .mktTable td { padding: 9px 8px; }
  .mktSellForm__row { flex-direction: column; }
  .mktSellForm__btn { width: 100%; }
}
@media (max-width: 630px) {
  .mktGrid { grid-template-columns: 1fr; }
  /* Em tela única coluna o proCardMini pode ter tamanho normal */
  .mktItem__card .proCardMini {
    transform: none;
    margin-bottom: 0;
  }
}
  }
}

/* ===== CARD FILTERS — design system integrado (sem bordas/linhas) ===== */
.cardFilters {
  background: var(--bg1, #131315);
  border-radius: 6px;
  padding: 14px 16px;
  margin-bottom: 16px;
}
.cardFilters__row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: flex-end;
}
.cardFilters__field {
  flex: 1;
  min-width: 120px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.cardFilters__label {
  font-size: 10px;
  font-weight: 900;
  color: rgba(233,234,237,0.45);
  text-transform: uppercase;
  letter-spacing: 1px;
}
.cardFilters__input,
.cardFilters__select {
  padding: 8px 12px;
  background: var(--bg2, #181819);
  border: none;
  border-radius: 4px;
  color: var(--text, #e9eaed);
  font-size: 12px;
  font-weight: 500;
  transition: background 0.15s;
}
.cardFilters__input:focus,
.cardFilters__select:focus {
  outline: none;
  background: rgba(242,182,0,0.06);
}
.cardFilters__input::placeholder {
  color: rgba(233,234,237,0.3);
}
.cardFilters__select {
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' fill='%23888' viewBox='0 0 16 16'%3E%3Cpath d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  padding-right: 28px;
}
.cardFilters__select option {
  background: #181819;
  color: #e9eaed;
}
.cardFilters__clear {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 8px 12px;
  background: rgba(255,255,255,0.05);
  border: none;
  border-radius: 4px;
  color: rgba(233,234,237,0.55);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  white-space: nowrap;
}
.cardFilters__clear:hover {
  background: rgba(239,68,68,0.12);
  color: #f87171;
}
.cardFilters__clear svg { width: 13px; height: 13px; }
.cardFilters__clearIcon {
  width: 13px; height: 13px;
  background-color: currentColor;
  -webkit-mask: var(--icon) no-repeat center / contain;
  mask: var(--icon) no-repeat center / contain;
}
.cardFilters__sort {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 8px 12px;
  background: rgba(255,255,255,0.05);
  border: none;
  border-radius: 4px;
  color: rgba(233,234,237,0.55);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  white-space: nowrap;
}
.cardFilters__sort:hover {
  background: rgba(242,182,0,0.08);
  color: var(--accent, #f2b600);
}
.cardFilters__sort svg { width: 13px; height: 13px; }
.cardFilters__sortIcon {
  width: 13px; height: 13px;
  background-color: currentColor;
  -webkit-mask: var(--icon) no-repeat center / contain;
  mask: var(--icon) no-repeat center / contain;
}
.cardFilters__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  text-align: center;
  color: var(--muted);
  gap: 12px;
}
.cardFilters__empty p { margin: 0; font-size: 14px; }
.cardFilterItem { display: block; }

/* Responsive Filters */
@media (max-width: 768px) {
  .cardFilters { padding: 10px 12px; }
  .cardFilters__row { gap: 6px; }
  .cardFilters__field { min-width: 90px; }
  .cardFilters__input,
  .cardFilters__select { padding: 7px 9px; font-size: 11px; }
  .cardFilters__clear,
  .cardFilters__sort { padding: 7px 10px; font-size: 10px; }
}
@media (max-width: 480px) {
  .cardFilters__field { flex: 1 1 calc(50% - 4px); min-width: auto; }
  .cardFilters__clear { width: 100%; justify-content: center; }
}

/* Card Filters Modal Variant */
/* Modal variant - Premium Glass Design */
.cardFilters--modal {
  margin-bottom: 16px;
  padding: 14px 16px;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.2));
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 12px;
  /* CRITICAL: Prevent shrinking so grid takes remaining space and buttons stay at bottom */
  flex-shrink: 0;
}
.cardFilters--modal .cardFilters__row {
  gap: 10px;
}
.cardFilters--modal .cardFilters__field {
  min-width: 110px;
}
.cardFilters--modal .cardFilters__input,
.cardFilters--modal .cardFilters__select {
  padding: 9px 12px;
  font-size: 12px;
  background: rgba(0, 0, 0, 0.4);
}
.cardFilters--modal .cardFilters__select {
  padding-right: 32px;
}
.cardFilters--modal .cardFilters__clear {
  padding: 9px 14px;
  font-size: 11px;
}

/* Desktop: Filters visible by default but toggleable */
@media (min-width: 769px) {
  /* Show toggle button on desktop too */
  #modalFiltersToggle {
    display: flex !important;
  }

  /* Filters visible by default (not collapsed) - with smooth transition */
  .cardFilters--modal.cardFilters--collapsible {
    max-height: 500px;
    overflow: visible;
    opacity: 1;
    padding: 12px;
    margin-bottom: 16px;
    transition:
      max-height 0.3s ease,
      opacity 0.3s ease,
      padding 0.3s ease,
      margin-bottom 0.3s ease;
  }

  /* When collapsed, hide filters with smooth slide animation */
  .cardFilters--modal.cardFilters--collapsed {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    padding: 0 12px;
    margin-bottom: 0;
    transition:
      max-height 0.3s ease,
      opacity 0.3s ease,
      padding 0.3s ease,
      margin-bottom 0.3s ease;
  }

  /* Ensure row layout on desktop */
  .cardFilters--modal .cardFilters__row {
    flex-wrap: wrap;
  }

  .cardFilters--modal .cardFilters__field {
    flex: 1 1 auto;
    min-width: 100px;
    max-width: 150px;
  }
}

/* Tablet/Mobile responsive */
@media (max-width: 768px) {
  .cardFilters--modal .cardFilters__field {
    flex: 1 1 calc(50% - 4px);
    min-width: auto;
    max-width: none;
  }
  .cardFilters--modal .cardFilters__clear {
    width: 100%;
    justify-content: center;
  }
}

/* Card Filters Toggle Button - Mobile only (specific to modal toggle) */
#modalFiltersToggle {
  display: none; /* Hidden by default, shown only on mobile */
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  height: auto;
  min-height: 40px;
  max-height: 40px;
  padding: 10px 16px;
  margin-bottom: 8px;
  background: rgba(242, 182, 0, 0.15);
  border: 1px solid rgba(242, 182, 0, 0.3);
  border-radius: 8px;
  color: #f2b600;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  flex-shrink: 0;
  flex-grow: 0;
}

@media (max-width: 768px) {
  #modalFiltersToggle {
    display: flex;
  }
}

#modalFiltersToggle:hover {
  background: rgba(242, 182, 0, 0.25);
  border-color: rgba(242, 182, 0, 0.5);
}
#modalFiltersToggle:active {
  transform: scale(0.98);
}
.cardFilters__toggleChevron {
  transition: transform 0.25s ease;
}
#modalFiltersToggle.cardFilters__toggle--open .cardFilters__toggleChevron {
  transform: rotate(180deg);
}

/* Collapsible filters animation - Mobile only */
@media (max-width: 768px) {
  .cardFilters--modal.cardFilters--collapsible {
    max-height: 0;
    overflow: hidden;
    margin-bottom: 0;
    padding: 0 12px;
    opacity: 0;
    transition:
      max-height 0.3s ease,
      opacity 0.25s ease,
      padding 0.3s ease,
      margin-bottom 0.3s ease;
  }
  .cardFilters--modal.cardFilters--collapsible.cardFilters--expanded {
    max-height: 500px;
    opacity: 1;
    padding: 12px;
    margin-bottom: 16px;
  }
}

/* Body scroll lock when modal is open (mobile) */
body.modal-open-noscroll {
  overflow: hidden;
  position: fixed;
  width: 100%;
  height: 100%;
}

/* =============================================
   FIFA PACK REVEAL EXPERIENCE (Desktop Only)
   ============================================= */

/* ========================================
   FORCED GPU ACCELERATION - Pack Animation
   ======================================== */
/* Apply hardware acceleration to all pack animation elements
   to ensure consistent rendering across all devices and browsers */

/* Hide mobile modal on desktop when FIFA is active */
@media (min-width: 1024px) {
  .packModal--mobile {
    display: none !important;
  }
}

/* Fullscreen FIFA reveal container - Cross-browser compatible */
.fifaReveal {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #0a0a15 0%, #0f0f2a 50%, #0a0a15 100%);
  overflow: hidden;
  /* GPU Acceleration on internal elements only - avoid transform on container
     to prevent stacking context issues with position:fixed children */
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-perspective: 1000px;
  perspective: 1000px;
  /* Removed: transform: translate3d(0,0,0) - breaks position:fixed children in Safari/Firefox */
  /* Removed: contain: layout style paint - causes inconsistencies in some browsers */
  /* Prevent text selection and image dragging */
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

/* Block image drag inside pack modal */
.fifaReveal img {
  -webkit-user-drag: none;
  user-drag: none;
  pointer-events: none;
  draggable: false;
}

/* Close button - GPU Accelerated */
.fifaReveal__close {
  position: absolute;
  top: 24px;
  right: 24px;
  z-index: 100;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  color: #fff;
  cursor: pointer;
  transition: all 0.3s ease;
  /* GPU Acceleration */
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.fifaReveal__close:hover {
  background: rgba(255, 255, 255, 0.2);
  transform: translate3d(0, 0, 0) scale(1.1);
}

/* Background effects - GPU Accelerated */
.fifaReveal__bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  /* GPU Acceleration */
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  will-change: transform;
}

.fifaReveal__rays {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 200vmax;
  height: 200vmax;
  transform: translate(-50%, -50%) translate3d(0, 0, 0);
  background: conic-gradient(from 0deg, transparent 0deg, rgba(242, 182, 0, 0.03) 10deg, transparent 20deg);
  animation: fifaRaysRotate 20s linear infinite;
  /* GPU Acceleration */
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  will-change: transform;
}
@keyframes fifaRaysRotate {
  from {
    transform: translate(-50%, -50%) translate3d(0, 0, 0) rotate(0deg);
  }
  to {
    transform: translate(-50%, -50%) translate3d(0, 0, 0) rotate(360deg);
  }
}

/* Particles - GPU Accelerated */
.fifaReveal__particles {
  /* GPU Acceleration for particle container */
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  will-change: transform;
}
.fifaReveal__particles span {
  position: absolute;
  width: 4px;
  height: 4px;
  background: var(--accent);
  border-radius: 50%;
  opacity: 0.3;
  animation: fifaParticleFloat 10s ease-in-out infinite;
  /* GPU Acceleration for each particle */
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  will-change: transform, opacity;
}
@keyframes fifaParticleFloat {
  0%,
  100% {
    transform: translateY(100vh) translate3d(0, 0, 0) scale(0);
    opacity: 0;
  }
  10% {
    opacity: 0.5;
  }
  90% {
    opacity: 0.5;
  }
  100% {
    transform: translateY(-100px) translate3d(0, 0, 0) scale(1);
    opacity: 0;
  }
}

/* Main content area - full viewport centered - GPU Accelerated */
.fifaReveal__content {
  position: absolute;
  inset: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  /* GPU Acceleration */
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

/* Pack stage - GPU Accelerated */
.fifaReveal__packStage {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  /* GPU Acceleration */
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-perspective: 1000px;
  perspective: 1000px;
  will-change: transform, opacity;
}
.fifaReveal__pack {
  width: 220px;
  height: 314px;
  filter: drop-shadow(0 30px 60px rgba(0, 0, 0, 0.8));
  transition: all 0.5s ease;
  /* GPU Acceleration */
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  will-change: transform;
}
.fifaReveal__pack img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.fifaReveal__packGlow {
  position: absolute;
  inset: -60px;
  background: radial-gradient(circle, rgba(242, 182, 0, 0.2), transparent 70%);
  border-radius: 50%;
  filter: blur(40px);
  opacity: 0;
  transition: opacity 0.5s ease;
  /* GPU Acceleration */
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  will-change: transform, opacity;
}
.fifaReveal__packStage--opening .fifaReveal__pack {
  animation: fifaPackShake 0.4s ease-in-out infinite;
}
.fifaReveal__packStage--opening .fifaReveal__packGlow {
  opacity: 1;
  animation: fifaGlowPulse 0.5s ease-in-out infinite;
}
.fifaReveal__packStage--hidden {
  animation: fifaPackExplode 0.5s ease-out forwards;
}
@keyframes fifaPackShake {
  0%,
  100% {
    transform: translate3d(0, 0, 0) rotate(0deg);
  }
  25% {
    transform: translate3d(0, 0, 0) rotate(-3deg) scale(1.02);
  }
  75% {
    transform: translate3d(0, 0, 0) rotate(3deg) scale(1.02);
  }
}
@keyframes fifaGlowPulse {
  0%,
  100% {
    opacity: 0.5;
    transform: translate3d(0, 0, 0) scale(1);
  }
  50% {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1.2);
  }
}
@keyframes fifaPackExplode {
  0% {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
    visibility: visible;
  }
  50% {
    opacity: 0.5;
    transform: translate3d(0, 0, 0) scale(1.3);
  }
  100% {
    opacity: 0;
    transform: translate3d(0, 0, 0) scale(0);
    visibility: hidden;
    /* Removed: display: none - not animatable, causes inconsistent behavior */
  }
}

/* Team/Nation stages - GPU Accelerated */
.fifaReveal__stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  opacity: 0;
  transform: translate3d(0, 0, 0) scale(0.5);
  transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
  /* GPU Acceleration */
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-perspective: 1000px;
  perspective: 1000px;
  will-change: transform, opacity;
}
.fifaReveal__stage--visible {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
}
.fifaReveal__stage--hidden {
  opacity: 0;
  transform: translate3d(0, 0, 0) scale(1.5);
  transition: all 0.3s ease-out;
}
.fifaReveal__stageIcon {
  width: 180px;
  height: 180px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.1), transparent 70%);
  border-radius: 50%;
  animation: fifaIconPulse 1s ease-in-out infinite;
  /* GPU Acceleration */
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  will-change: box-shadow;
}
.fifaReveal__stageIcon img {
  max-width: 120px;
  max-height: 120px;
  object-fit: contain;
  filter: drop-shadow(0 10px 30px rgba(0, 0, 0, 0.5));
}
.fifaReveal__stageIcon--flag img {
  max-width: 140px;
  max-height: 100px;
  border-radius: 4px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}
.fifaReveal__stageLabel {
  font-size: 28px;
  font-weight: 800;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 6px;
  text-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
  /* GPU Acceleration */
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.fifaReveal__teamPlaceholder {
  font-size: 48px;
  font-weight: 900;
  color: rgba(255, 255, 255, 0.3);
}
@keyframes fifaIconPulse {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(242, 182, 0, 0.3);
    transform: translate3d(0, 0, 0);
  }
  50% {
    box-shadow: 0 0 0 30px rgba(242, 182, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

/* Card stage - absolute centered - GPU Accelerated */
.fifaReveal__cardStage {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) translate3d(0, 0, 0) scale(0.8);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  opacity: 0;
  transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
  z-index: 20;
  /* GPU Acceleration */
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-perspective: 1000px;
  perspective: 1000px;
  will-change: transform, opacity;
}
.fifaReveal__cardStage--visible {
  opacity: 1;
  transform: translate(-50%, -50%) translate3d(0, 0, 0) scale(1);
}
.fifaReveal__cardWrapper {
  position: relative;
  /* Space for the scaled proCardMini (140x200 * 2.4 = 336x480) */
  width: 336px;
  height: 480px;
  display: flex;
  align-items: center;
  justify-content: center;
  /* GPU Acceleration */
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-perspective: 1000px;
  perspective: 1000px;
}
.fifaReveal__cardGlow {
  position: absolute;
  inset: -40px;
  border-radius: 20px;
  filter: blur(50px);
  opacity: 0.6;
  z-index: -1;
  /* GPU Acceleration */
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  will-change: transform, opacity;
}
.fifaReveal__cardGlow--common {
  background: rgba(107, 114, 128, 0.4);
}
.fifaReveal__cardGlow--uncommon {
  background: rgba(34, 197, 94, 0.4);
}
.fifaReveal__cardGlow--rare {
  background: rgba(59, 130, 246, 0.4);
}
.fifaReveal__cardGlow--epic {
  background: rgba(168, 85, 247, 0.4);
}
.fifaReveal__cardGlow--legendary {
  background: rgba(245, 158, 11, 0.5);
  animation: fifaLegendaryGlow 2s ease-in-out infinite;
}
.fifaReveal__cardGlow--mythic {
  background: rgba(239, 68, 68, 0.5);
  animation: fifaLegendaryGlow 1.5s ease-in-out infinite;
}
@keyframes fifaLegendaryGlow {
  0%,
  100% {
    opacity: 0.6;
    transform: translate3d(0, 0, 0) scale(1);
  }
  50% {
    opacity: 0.9;
    transform: translate3d(0, 0, 0) scale(1.1);
  }
}
/* zoom: 2.4 escala a carta sem afetar o getBoundingClientRect(),
   igual ao cardView usa zoom: 2 — tilt JS aplica só rotateX/Y */
.fifaReveal__mainCard .proCard,
.fifaReveal__mainCard .proCardMini {
  zoom: 2.4;
  transform-origin: center center;
  transform-style: preserve-3d;
  animation: fifaCardReveal 0.9s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  will-change: transform, opacity;
}
@keyframes fifaCardReveal {
  0% {
    transform: rotateY(180deg) scale(0.5);
    opacity: 0;
  }
  45% {
    transform: rotateY(90deg) scale(1.2);
    opacity: 0.6;
  }
  100% {
    transform: rotateY(0deg) scale(1);
    opacity: 1;
  }
}
.fifaReveal__cardInfo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.fifaReveal__rarity {
  font-size: 14px;
  font-weight: 800;
  padding: 8px 20px;
  border-radius: 20px;
  text-transform: uppercase;
  letter-spacing: 2px;
}
.fifaReveal__rarity--common {
  background: linear-gradient(135deg, rgba(107, 114, 128, 0.3), rgba(107, 114, 128, 0.1));
  color: #9ca3af;
  border: 1px solid rgba(107, 114, 128, 0.5);
}
.fifaReveal__rarity--uncommon {
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.3), rgba(34, 197, 94, 0.1));
  color: #22c55e;
  border: 1px solid rgba(34, 197, 94, 0.5);
}
.fifaReveal__rarity--rare {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.3), rgba(59, 130, 246, 0.1));
  color: #3b82f6;
  border: 1px solid rgba(59, 130, 246, 0.5);
}
.fifaReveal__rarity--epic {
  background: linear-gradient(135deg, rgba(168, 85, 247, 0.3), rgba(168, 85, 247, 0.1));
  color: #a855f7;
  border: 1px solid rgba(168, 85, 247, 0.5);
}
.fifaReveal__rarity--legendary {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.3), rgba(245, 158, 11, 0.1));
  color: #f59e0b;
  border: 1px solid rgba(245, 158, 11, 0.5);
}
.fifaReveal__rarity--mythic {
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.3), rgba(239, 68, 68, 0.1));
  color: #ef4444;
  border: 1px solid rgba(239, 68, 68, 0.5);
}
.fifaReveal__proNumber {
  font-size: 12px;
  color: var(--muted);
  letter-spacing: 1px;
}

/* Other cards - fixed left panel with scroll - GPU Accelerated */
.fifaReveal__otherCards {
  position: fixed;
  top: 50%;
  left: 0;
  transform: translate3d(-30px, -50%, 0);
  z-index: 30;
  /* 4 colunas + gaps + padding esquerdo (12px safe area) + padding direito + scrollbar (8px) */
  width: calc(var(--fifa-mini-w, 101px) * 4 + 10px * 3 + 12px + 8px + 8px);
  padding-left: 12px;
  padding-right: 8px;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  opacity: 0;
  transition: opacity 0.5s ease, transform 0.5s ease;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  will-change: transform, opacity;
}
.fifaReveal__otherCards--visible {
  opacity: 1;
  transform: translate3d(0, -50%, 0);
}
.fifaReveal__otherTitle {
  font-size: 10px;
  font-weight: 800;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  text-align: left;
  margin-bottom: 8px;
  flex-shrink: 0;
}

/* Contador de cartas no header do painel */
.fifaReveal__otherCount {
  display: inline-block;
  background: var(--bg1);
  color: var(--accent);
  font-size: 10px;
  font-weight: 900;
  padding: 2px 6px;
  border-radius: 4px;
  margin-left: 6px;
  letter-spacing: 0;
}

/* Scroll container — design system scrollbar */
.fifaReveal__otherScroll {
  overflow-y: auto;
  overflow-x: hidden;
  flex: 1;
  padding-right: 6px;
  scrollbar-width: thin;
  scrollbar-color: var(--accent) var(--bg1);
}
.fifaReveal__otherScroll::-webkit-scrollbar {
  width: 4px;
}
.fifaReveal__otherScroll::-webkit-scrollbar-track {
  background: var(--bg1);
  border-radius: 4px;
}
.fifaReveal__otherScroll::-webkit-scrollbar-thumb {
  background: var(--accent);
  border-radius: 4px;
}
.fifaReveal__otherScroll::-webkit-scrollbar-thumb:hover {
  background: color-mix(in srgb, var(--accent) 80%, white);
}

.fifaReveal__otherGrid {
  display: grid;
  grid-template-columns: repeat(4, var(--fifa-mini-w, 101px));
  gap: 10px;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.fifaReveal__miniWrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  opacity: 0;
  transform: translate3d(0, 20px, 0);
  animation: fifaMiniReveal 0.5s ease-out forwards;
  /* GPU Acceleration */
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  will-change: transform, opacity;
}
@keyframes fifaMiniReveal {
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}
/* Mini cards: keep EXACT My Cards mini proportions by scaling the whole card (no internal overrides) - GPU Accelerated */
.fifaReveal__miniCard {
  /* Keep original proCardMini size from cards.css */
  width: 140px;
  height: 200px;
  min-width: 140px;
  min-height: 200px;
  transform: translate3d(0, 0, 0) scale(var(--fifa-mini-scale, 0.72));
  transform-origin: top center;
  transition: transform 0.2s ease;
  /* GPU Acceleration */
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  will-change: transform;
}

.fifaReveal__miniCard:hover {
  transform: translate3d(0, -6px, 0) scale(var(--fifa-mini-scale, 0.72)) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
}

/* Wrapper owns layout size that matches the scaled card - GPU Accelerated */
.fifaReveal__miniWrapper {
  --fifa-mini-scale: 0.72;
  width: calc(140px * var(--fifa-mini-scale));
  height: calc(200px * var(--fifa-mini-scale));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 4px;
  opacity: 0;
  transform: translate3d(0, 20px, 0);
  animation: fifaMiniReveal 0.5s ease-out forwards;
  /* GPU Acceleration */
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  will-change: transform, opacity;
}

.fifaReveal__miniInfo {
  display: none; /* keep the mini card itself as the source of truth */
}

/* Actions - GPU Accelerated */
.fifaReveal__actions {
  position: fixed;
  bottom: 40px;
  left: 50%;
  transform: translate3d(-50%, 0, 0);
  opacity: 0;
  transition: opacity 0.5s ease;
  z-index: 100;
  pointer-events: none;
  /* GPU Acceleration */
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.fifaReveal__actions--visible {
  opacity: 1;
  pointer-events: auto;
}
.fifaReveal__continueBtn {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 40px;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: #0a0a15;
  background: linear-gradient(135deg, var(--accent), #d4a00a);
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 8px 30px rgba(242, 182, 0, 0.3);
  /* GPU Acceleration */
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.fifaReveal__continueBtn:hover {
  transform: translate3d(0, -2px, 0);
  box-shadow: 0 12px 40px rgba(242, 182, 0, 0.4);
}

/* Mobile responsive for FIFA reveal */
@media (max-width: 767px) {
  .fifaReveal__stage,
  .fifaReveal__cardReveal {
    padding-bottom: 220px; /* reserve space for other cards + CTA */
  }

  /* Keep the card fully readable; just reposition stage */
  .fifaReveal__cardStage {
    top: 44%;
    gap: 12px;
  }
  .fifaReveal__cardStage,
  .fifaReveal__cardStage--visible {
    transform: translate(-50%, -60%) scale(0.94);
  }

  .fifaReveal__stageIcon {
    width: 120px;
    height: 120px;
  }
  .fifaReveal__stageIcon img {
    max-width: 80px;
    max-height: 80px;
  }
  .fifaReveal__stageIcon--flag img {
    max-width: 100px;
    max-height: 70px;
  }
  .fifaReveal__stageLabel {
    font-size: 18px;
    letter-spacing: 3px;
  }

  .fifaReveal__pack {
    width: 160px;
    height: 228px;
  }

  .fifaReveal__cardGlow {
    inset: -20px;
    filter: blur(30px);
  }

  .fifaReveal__rarity {
    font-size: 11px;
    padding: 5px 14px;
    letter-spacing: 1px;
  }
  .fifaReveal__proNumber {
    font-size: 9px;
  }

  /* Other cards: layout vertical scrollável abaixo da carta principal */
  .fifaReveal__otherCards {
    position: fixed;
    left: 12px;
    right: 12px;
    bottom: calc(env(safe-area-inset-bottom) + 84px);
    top: auto;
    transform: translate3d(0, 20px, 0);
    max-width: none;
    width: auto;
    max-height: 38vh;
    z-index: 40;
    pointer-events: auto;
    opacity: 0;
    display: flex;
    flex-direction: column;
  }
  .fifaReveal__otherCards--visible {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
  .fifaReveal__otherTitle {
    font-size: 9px;
    margin-bottom: 8px;
    text-align: center;
  }
  /* Scroll container mobile */
  .fifaReveal__otherScroll {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 2px 4px 2px 0;
    scrollbar-width: thin;
    scrollbar-color: var(--accent) var(--bg1);
  }
  .fifaReveal__otherScroll::-webkit-scrollbar {
    width: 3px;
  }
  .fifaReveal__otherScroll::-webkit-scrollbar-track {
    background: var(--bg1);
    border-radius: 4px;
  }
  .fifaReveal__otherScroll::-webkit-scrollbar-thumb {
    background: var(--accent);
    border-radius: 4px;
  }
  .fifaReveal__otherGrid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(calc(140px * 0.46), 1fr));
    gap: 8px;
    max-height: none;
    overflow: visible;
  }

  /* Keep My Cards mini proportions: only scale the whole mini card */
  .fifaReveal__miniWrapper {
    --fifa-mini-scale: 0.46;
    width: calc(140px * var(--fifa-mini-scale));
    height: calc(200px * var(--fifa-mini-scale));
    gap: 0;
  }

  .fifaReveal__actions {
    bottom: calc(env(safe-area-inset-bottom) + 18px);
  }
  .fifaReveal__continueBtn {
    padding: 12px 28px;
    font-size: 13px;
    letter-spacing: 2px;
  }
  .fifaReveal__closeBtn {
    top: 16px;
    right: 16px;
    width: 40px;
    height: 40px;
  }
}

/* Extra small mobile (iPhone SE, small phones) */
@media (max-width: 400px) {
  .fifaReveal__stage,
  .fifaReveal__cardReveal {
    padding-bottom: 210px;
  }

  .fifaReveal__cardStage {
    top: 43%;
  }
  .fifaReveal__cardStage,
  .fifaReveal__cardStage--visible {
    transform: translate(-50%, -62%) scale(0.9);
  }

  .fifaReveal__otherCards {
    bottom: calc(env(safe-area-inset-bottom) + 78px);
  }

  .fifaReveal__miniWrapper {
    --fifa-mini-scale: 0.42;
  }

  .fifaReveal__continueBtn {
    padding: 10px 24px;
    font-size: 12px;
  }
}

/* ============================================
   SITE FOOTER - Global Component
   ============================================ */
.index-footer {
  margin-top: 60px;
  padding: 40px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

/* Footer dentro do pShell — respeita sidebar (220px) e right panel (90px) */
.pShell .index-footer,
.pShell + .index-footer,
body:has(.pShell) .index-footer {
  margin-left: var(--sidebar-w, 220px);
  margin-right: var(--right-panel-w, 90px);
  width: auto;
}

@media (max-width: 980px) {
  .pShell .index-footer,
  .pShell + .index-footer,
  body:has(.pShell) .index-footer {
    margin-left: 0;
    margin-right: var(--right-panel-w, 90px);
  }
}

@media (max-width: 600px) {
  .pShell .index-footer,
  .pShell + .index-footer,
  body:has(.pShell) .index-footer {
    margin-left: 0;
    margin-right: 0;
  }
}

/* Páginas internas com sidebar - espaçamento extra do footer */
.app-main .index-footer,
.squad-page ~ .index-footer,
.market-section ~ .index-footer,
.packs-shop-content ~ .index-footer,
.ranking-page ~ .index-footer {
  margin-top: 80px;
}

.footer-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
}

.footer-brand {
  display: flex;
  align-items: center;
  gap: 12px;
}

.footer-logo {
  width: 36px;
  height: 36px;
  border-radius: 10px;
}

.footer-name {
  font-weight: 900;
  font-size: 18px;
}

.footer-name span {
  color: var(--accent);
}

.footer-links {
  display: flex;
  gap: 24px;
}

.footer-link {
  font-size: 14px;
  color: rgba(233, 234, 237, 0.62);
  font-weight: 600;
  transition: color 0.2s ease;
}

.footer-link:hover {
  color: rgba(233, 234, 237, 0.92);
}

.footer-social {
  display: flex;
  gap: 16px;
  align-items: center;
}

.footer-social-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: rgba(233, 234, 237, 0.62);
  transition: all 0.2s ease;
}

.footer-social-link:hover {
  background: rgba(242, 182, 0, 0.15);
  border-color: rgba(242, 182, 0, 0.3);
  color: #f2b600;
  transform: translateY(-2px);
}

.footer-copy {
  font-size: 13px;
  color: rgba(233, 234, 237, 0.45);
  width: 100%;
  text-align: center;
  margin-top: 20px;
}

/* Footer Responsive */
@media (max-width: 768px) {
  .index-footer {
    padding: 30px 0;
  }

  .footer-content {
    flex-direction: column;
    text-align: center;
    gap: 24px;
  }

  .footer-links {
    flex-wrap: wrap;
    justify-content: center;
    gap: 16px 24px;
  }

  .footer-social {
    justify-content: center;
  }

  .footer-copy {
    margin-top: 10px;
  }
}

/* ===== LOAD MORE BUTTON (PAGINATION) ===== */
.pLoadMoreBtn {
  display: block;
  width: 100%;
  padding: 12px 20px;
  margin-top: 12px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  color: rgba(255, 255, 255, 0.7);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}
.pLoadMoreBtn:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.2);
}
.pLoadMoreBtn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.pLoadMoreBtn--mobile {
  margin-top: 16px;
}
.pBlockTitle__count {
  font-size: 12px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.5);
  margin-left: 6px;
}
.pHistoryRow--hidden {
  display: none !important;
}
.pMobileCard--hidden {
  display: none !important;
}

/* ===================================================================
   MOBILE BOTTOM NAVIGATION — 3-button bar + nav sheet
   =================================================================== */

/* ── Barra inferior ──────────────────────────────────────────────── */
.mobile-bottom-nav {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1020; /* acima do sheet, abaixo do rpDrawer (1050) */
  background: rgba(14, 14, 16, 0.98);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid rgba(255,255,255,0.07);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

.mobile-bottom-nav__bar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: stretch;
  height: 60px;
  padding: 0 4px;
}

/* ── Botões laterais (MENU e PAINEL) ─────────────────────────────── */
.mobile-bottom-nav__action {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 8px 4px;
  background: none;
  border: none;
  color: var(--muted);
  cursor: pointer;
  border-radius: 10px;
  transition: color 0.15s;
  min-width: 60px;
  position: relative;
}
/* Hover: só muda a cor, sem fundo — design flat do site */
.mobile-bottom-nav__action:hover {
  color: var(--text);
}
/* Quando menu está aberto: cor de destaque */
.mobile-bottom-nav__action.is-open {
  color: var(--accent);
}

/* Ponto indicador: página ativa está dentro do menu */

.mobile-bottom-nav__action-label {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  white-space: nowrap;
}

/* Barras hamburger */
.mobile-bottom-nav__ham {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 20px;
}
.mobile-bottom-nav__ham span {
  display: block;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  transition: transform 0.2s ease, opacity 0.2s ease;
  transform-origin: center;
}
.mobile-bottom-nav__action.is-open .mobile-bottom-nav__ham span:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}
.mobile-bottom-nav__action.is-open .mobile-bottom-nav__ham span:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}
.mobile-bottom-nav__action.is-open .mobile-bottom-nav__ham span:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
}

/* Avatar no botão de painel — img direto, sem wrapper */
.mobile-bottom-nav__avatar {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  flex-shrink: 0;
  border: 1.5px solid rgba(255,255,255,0.18);
  transition: border-color 0.15s;
}
.mobile-bottom-nav__panel-btn:hover .mobile-bottom-nav__avatar {
  border-color: rgba(255,255,255,0.40);
}
.mobile-bottom-nav__panel-btn.is-open .mobile-bottom-nav__avatar {
  border-color: var(--accent);
}

/* ── Botão central SQUAD ─────────────────────────────────────────── */
.mobile-bottom-nav__squad {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 0 20px;
  margin: 6px 8px;
  border-radius: 12px;
  background: var(--accent);
  color: #111;
  text-decoration: none;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  transition: opacity 0.15s, transform 0.15s;
  white-space: nowrap;
}
.mobile-bottom-nav__squad svg {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
}
.mobile-bottom-nav__squad:hover {
  opacity: 0.88;
}
.mobile-bottom-nav__squad.is-active {
  box-shadow: 0 0 12px rgba(242,182,0,0.5);
}

/* ── Nav Sheet (sobe de baixo) ───────────────────────────────────── */
.mobile-nav-sheet {
  display: none;
  position: fixed;
  inset: 0;
  /* z-index abaixo da barra (1020): barra fica visível e clicável acima do backdrop */
  z-index: 1010;
  pointer-events: none;
}

/* Backdrop: escurece a página, mas a barra (z-1020) fica acessível */
.mobile-nav-sheet__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.65);
  opacity: 0;
  transition: opacity 0.25s ease;
}

/* Painel deslizante — bottom = altura da barra + safe-area */
.mobile-nav-sheet__panel {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(60px + env(safe-area-inset-bottom, 0px));
  background: var(--bg2);
  border-radius: 16px 16px 0 0;
  border-top: 1px solid rgba(255,255,255,0.08);
  transform: translateY(100%);
  transition: transform 0.26s cubic-bezier(0.32, 0.72, 0, 1);
  max-height: calc(80vh - 60px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* Estado aberto */
.mobile-nav-sheet.is-open {
  pointer-events: auto;
}
.mobile-nav-sheet.is-open .mobile-nav-sheet__backdrop {
  opacity: 1;
}
.mobile-nav-sheet.is-open .mobile-nav-sheet__panel {
  transform: translateY(0);
}

/* Travar scroll do body quando sheet está aberto */
body.mob-sheet-lock {
  overflow: hidden;
  touch-action: none;
}

/* Header do sheet */
.mobile-nav-sheet__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px 8px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

.mobile-nav-sheet__title {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--muted);
}

.mobile-nav-sheet__close {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  background: transparent;
  border: none;
  color: var(--muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.12s;
}
.mobile-nav-sheet__close:hover {
  color: var(--text);
}

/* Grid de navegação: 2 colunas */
.mobile-nav-sheet__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
  padding: 8px;
}

.mobile-nav-sheet__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 16px 8px;
  border-radius: 8px;
  background: transparent;
  border: none;
  color: rgba(255,255,255,0.55);
  text-decoration: none;
  min-height: 76px;
  transition: background 0.12s, color 0.12s;
}
.mobile-nav-sheet__item:hover {
  background: rgba(255,255,255,0.05);
  color: var(--text);
}
.mobile-nav-sheet__item.is-active {
  background: rgba(242,182,0,0.08);
  color: var(--accent);
}
.mobile-nav-sheet__item.is-active .mobile-nav-sheet__item-icon svg {
  filter: drop-shadow(0 0 4px rgba(242,182,0,0.4));
}

.mobile-nav-sheet__item--special {
  color: var(--accent);
}
.mobile-nav-sheet__item--special .mobile-nav-sheet__item-icon svg {
  filter: drop-shadow(0 0 3px rgba(242,182,0,0.3));
}
.mobile-nav-sheet__item--special:hover {
  background: rgba(242,182,0,0.06);
}

.mobile-nav-sheet__item-icon {
  display: flex;
  align-items: center;
  justify-content: center;
}

.mobile-nav-sheet__item-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  text-align: center;
}

/* ── Mostrar em mobile (≤ 980px) ─────────────────────────────────── */
@media (max-width: 980px) {
  .mobile-bottom-nav {
    display: block;
  }

  .mobile-nav-sheet {
    display: block;
  }

  /* Esconde sidebar desktop */
  .pNav {
    display: none !important;
  }

  /* Padding-bottom para não ocultar conteúdo atrás da barra */
  .index-footer {
    padding-bottom: 80px;
  }

  .pPage {
    padding-bottom: 80px;
  }

  /* Esconde scrollbar no mobile — evita layout shift ao bloquear scroll no modal */
  html {
    scrollbar-width: none;
  }
  html::-webkit-scrollbar {
    display: none;
    width: 0;
  }
}

/* ===================================
   iOS PWA Install Banner
   =================================== */
.ios-install-banner {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  z-index: 10000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease, transform 0.3s ease;
  width: calc(100% - 32px);
  max-width: 360px;
}

.ios-install-banner--visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
}

.ios-install-banner__content {
  background: linear-gradient(165deg, rgba(30, 30, 32, 0.98), rgba(20, 20, 22, 0.98));
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 20px;
  padding: 20px;
  position: relative;
  box-shadow: 
    0 20px 60px rgba(0, 0, 0, 0.5),
    0 0 0 1px rgba(255, 255, 255, 0.05) inset;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

.ios-install-banner__close {
  position: absolute;
  top: 12px;
  right: 12px;
  background: rgba(255, 255, 255, 0.08);
  border: none;
  border-radius: 50%;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--muted);
  transition: all 0.2s ease;
}

.ios-install-banner__close:hover {
  background: rgba(255, 255, 255, 0.15);
  color: var(--text);
}

.ios-install-banner__icon {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  overflow: hidden;
  margin: 0 auto 16px;
  box-shadow: 0 4px 15px rgba(242, 182, 0, 0.3);
}

.ios-install-banner__icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ios-install-banner__text {
  text-align: center;
  margin-bottom: 20px;
}

.ios-install-banner__title {
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
  margin: 0 0 6px;
}

.ios-install-banner__desc {
  font-size: 13px;
  color: var(--muted);
  margin: 0;
}

.ios-install-banner__steps {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 20px;
}

.ios-install-banner__step {
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(255, 255, 255, 0.04);
  border-radius: 12px;
  padding: 12px 14px;
}

.ios-install-banner__step-num {
  width: 24px;
  height: 24px;
  background: var(--accent);
  color: #000;
  font-size: 13px;
  font-weight: 700;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.ios-install-banner__step-content {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  font-size: 14px;
  color: var(--text);
}

.ios-install-banner__step-text {
  color: var(--muted);
}

.ios-install-banner__share-icon {
  color: #007AFF;
  flex-shrink: 0;
}

.ios-install-banner__add-icon {
  color: var(--muted);
  flex-shrink: 0;
}

.ios-install-banner__step-label {
  font-weight: 600;
}

.ios-install-banner__actions {
  display: flex;
  gap: 10px;
}

.ios-install-banner__btn-later,
.ios-install-banner__btn-dismiss {
  flex: 1;
  padding: 12px 16px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  border: none;
}

.ios-install-banner__btn-later {
  background: var(--accent);
  color: #000;
}

.ios-install-banner__btn-later:hover {
  background: var(--accent2);
}

.ios-install-banner__btn-dismiss {
  background: rgba(255, 255, 255, 0.08);
  color: var(--muted);
}

.ios-install-banner__btn-dismiss:hover {
  background: rgba(255, 255, 255, 0.12);
  color: var(--text);
}

.ios-install-banner__arrow {
  position: absolute;
  bottom: -8px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 10px solid rgba(20, 20, 22, 0.98);
}

/* Ajusta posição quando mobile nav está visível */
@media (max-width: 980px) {
  .ios-install-banner {
    bottom: 100px;
  }
}

/* ========================================
   NETWORK OFFLINE BANNER
   ======================================== */
.network-offline-banner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 99999;
  background: linear-gradient(135deg, #dc2626 0%, #991b1b 100%);
  color: #fff;
  padding: 12px 20px;
  transform: translateY(-100%);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
}

.network-offline-banner--visible {
  transform: translateY(0);
}

.network-offline-banner__content {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  max-width: var(--max);
  margin: 0 auto;
  font-size: 0.9rem;
  font-weight: 500;
}

.network-offline-banner__content svg {
  flex-shrink: 0;
  opacity: 0.9;
}

@media (max-width: 640px) {
  .network-offline-banner {
    padding: 10px 16px;
  }
  
  .network-offline-banner__content {
    font-size: 0.8rem;
    gap: 8px;
  }
  
  .network-offline-banner__content svg {
    width: 16px;
    height: 16px;
  }
}

/* Ajusta conteúdo quando banner está visível */
body.has-offline-banner .topbar {
  margin-top: 44px;
}

/* ========================================
   NETWORK RETRY INDICATOR
   ======================================== */
.network-retry-toast {
  position: fixed;
  bottom: 100px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(20, 20, 22, 0.95);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px 20px;
  display: flex;
  align-items: center;
  gap: 10px;
  z-index: 9999;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
  animation: slideUpFadeIn 0.3s ease;
}

.network-retry-toast__spinner {
  width: 18px;
  height: 18px;
  border: 2px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

.network-retry-toast__text {
  font-size: 0.875rem;
  color: var(--muted);
}

@keyframes slideUpFadeIn {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}