/* ==========================================================================
   CoverGuesser — Redesign v2
   Camada visual carregada depois do style.css. Não altera a lógica do jogo.
   Todas as cores de destaque usam var(--cyan) / --accent-rgb, então os
   temas de nível do jogador continuam funcionando.
   ========================================================================== */

:root{
  --bg:#07050d;
  --bg-panel:#110c1f;
  --bg-cart:#171127;
  --bg-cart-2:#1f1735;
  --text:#f2f0f7;
  --muted:#9a95ad;
  --muted-2:#6c6781;

  --surface:rgba(23,17,40,.62);
  --surface-strong:rgba(26,19,45,.86);
  --hairline:rgba(255,255,255,.07);
  --hairline-strong:rgba(255,255,255,.12);

  --font-display:'Space Grotesk','Inter',system-ui,sans-serif;
  --font-body:'Inter',system-ui,sans-serif;
  --font-pixel:'Press Start 2P',monospace;
  --font-mono:'JetBrains Mono',monospace;

  --ease-out:cubic-bezier(.23,1,.32,1);
  --ease-in-out:cubic-bezier(.77,0,.175,1);
  --ease-drawer:cubic-bezier(.32,.72,0,1);

  --r-xl:28px;
  --r-lg:22px;
  --r-md:16px;
  --r-sm:12px;

  --good:#34d399;
  --bad:#ff5a7a;
}

/* --------------------------------------------------------------------------
   Página e fundo
   -------------------------------------------------------------------------- */
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
.gtc-body{
  display:block;
  min-height:100dvh;
  padding:0;
  overflow-x:hidden;
  overflow-y:auto;
  font-family:var(--font-body);
  -webkit-font-smoothing:antialiased;
  -webkit-tap-highlight-color:transparent;
}

/* Aurora suave que acompanha a cor do tema */
.gtc-body::before{
  content:"";
  position:fixed;
  inset:-20vmax;
  z-index:0;
  pointer-events:none;
  background:
    radial-gradient(38vmax 30vmax at 18% 12%,rgba(var(--accent-rgb),.26),transparent 70%),
    radial-gradient(34vmax 28vmax at 86% 18%,rgba(34,211,238,.10),transparent 70%),
    radial-gradient(40vmax 30vmax at 70% 92%,rgba(255,158,0,.08),transparent 70%);
  /* Sem filter:blur: os gradientes já são suaves e o blur numa camada desse
     tamanho era refeito a cada quadro da animação (pesado no celular). */
  will-change:transform;
  animation:ui-aurora 28s var(--ease-in-out) infinite alternate;
}
@keyframes ui-aurora{
  from{transform:translate3d(-2%,-1%,0) scale(1)}
  to{transform:translate3d(2%,2%,0) scale(1.06)}
}

/* Grade retrô em perspectiva no rodapé da tela */
.gtc-body::after{
  background:
    linear-gradient(rgba(var(--accent-rgb),.22) 1px,transparent 1px) 0 0/100% 34px,
    linear-gradient(90deg,rgba(var(--accent-rgb),.22) 1px,transparent 1px) 0 0/34px 100%;
  transform-origin:50% 100%;
}

.gtc-side-decor{opacity:.28;z-index:1}

::selection{background:rgba(var(--accent-rgb),.45);color:#fff}

/* --------------------------------------------------------------------------
   Estrutura principal: página que rola naturalmente
   -------------------------------------------------------------------------- */
#gtc-root{
  position:relative;
  z-index:2;
  width:min(1240px,calc(100% - 32px));
  max-height:none;
  margin:0 auto;
  padding:0 0 40px;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
  overflow:visible;
  will-change:auto;
  font-family:var(--font-body);
}
#gtc-root::before{display:none}
.gtc-wrap{overflow:visible}

/* O cabeçalho vira "contents" para o menu poder ficar fixo ao rolar */
.gtc-header{display:contents}

.gtc-header-main{
  position:sticky;
  z-index:60;
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;
  gap:16px;
  margin:12px 0 22px;
  padding:10px 12px 10px 16px;
  border:1px solid var(--hairline);
  border-radius:20px;
  background:rgba(14,10,26,.66);
  -webkit-backdrop-filter:blur(18px) saturate(150%);
  backdrop-filter:blur(18px) saturate(150%);
  box-shadow:0 18px 40px -18px rgba(0,0,0,.7),inset 0 1px rgba(255,255,255,.05);
}

/* Logo */
.gtc-logo-container{
  transform:none;
  margin:0;
  gap:11px;
  border-radius:12px;
  outline-offset:4px;
  transition:transform 160ms var(--ease-out);
}
.gtc-logo-container:active{transform:scale(.97)}
.gtc-logo-icon{
  width:40px;
  height:40px;
  border-radius:12px;
  background:
    linear-gradient(#120d20,#120d20) padding-box,
    linear-gradient(140deg,var(--cyan),rgba(255,158,0,.9)) border-box;
  border:2px solid transparent;
  box-shadow:0 6px 18px -6px rgba(var(--accent-rgb),.7);
}
.gtc-logo-text{font-size:14px;gap:4px;line-height:1}
.gtc-logo-quest{
  color:transparent;
  background:linear-gradient(90deg,var(--cyan),color-mix(in srgb,var(--cyan) 50%,#fff));
  -webkit-background-clip:text;
  background-clip:text;
  text-shadow:none;
  filter:drop-shadow(0 0 10px rgba(var(--accent-rgb),.45));
}

/* Navegação segmentada com pílula deslizante */
.gtc-nav{
  position:relative;
  justify-self:center;
  gap:2px;
  margin:0;
  padding:4px;
  border:1px solid var(--hairline);
  border-radius:14px;
  background:rgba(255,255,255,.025);
  isolation:isolate;
}
.gtc-tab{
  position:relative;
  z-index:1;
  flex-direction:row;
  gap:7px;
  min-width:0;
  min-height:38px;
  padding:0 14px;
  border:0;
  border-radius:10px;
  background:transparent;
  color:var(--muted);
  font:700 11px/1 var(--font-body);
  letter-spacing:.07em;
  transition:color 180ms ease,background-color 180ms ease,transform 160ms var(--ease-out);
}
.gtc-tab-icon{font-size:14px;filter:none}
.gtc-tab:active{transform:scale(.96)}
.gtc-tab.active{
  color:#fff;
  background:rgba(var(--accent-rgb),.22);
  border:0;
  box-shadow:none;
  font-weight:700;
}
.gtc-nav.has-pill .gtc-tab.active{background:transparent}
@media (hover:hover) and (pointer:fine){
  .gtc-tab:hover{color:var(--text);background:rgba(255,255,255,.04)}
  .gtc-nav.has-pill .gtc-tab.active:hover{background:transparent}
}
.ui-nav-pill{
  position:absolute;
  top:0;
  left:0;
  z-index:0;
  border-radius:10px;
  background:linear-gradient(180deg,color-mix(in srgb,var(--cyan) 92%,#fff),var(--cyan));
  box-shadow:0 8px 22px -8px rgba(var(--accent-rgb),.9),inset 0 1px rgba(255,255,255,.35);
  pointer-events:none;
  opacity:1;
  transition:opacity 200ms ease;
  @starting-style{opacity:0}
}
.gtc-nav.has-pill .gtc-tab.active{color:#0c0816}

/* Botões do canto direito */
.gtc-header-actions{gap:6px}
.gtc-lang-btn,.gtc-level-btn,.gtc-profile-btn{
  min-height:38px;
  padding:0 12px;
  border:1px solid var(--hairline);
  border-radius:12px;
  background:rgba(255,255,255,.035);
  color:var(--text);
  font:700 11px/1 var(--font-body);
  letter-spacing:.04em;
  transition:background-color 180ms ease,border-color 180ms ease,transform 160ms var(--ease-out);
}
.gtc-lang-btn:active,.gtc-level-btn:active,.gtc-profile-btn:active{transform:scale(.96)}
@media (hover:hover) and (pointer:fine){
  .gtc-lang-btn:hover,.gtc-level-btn:hover,.gtc-profile-btn:hover{
    border-color:rgba(var(--accent-rgb),.55);
    background:rgba(var(--accent-rgb),.14);
  }
}
.gtc-profile-btn{
  border-color:rgba(var(--accent-rgb),.45);
  background:linear-gradient(180deg,rgba(var(--accent-rgb),.28),rgba(var(--accent-rgb),.14));
}
.gtc-profile-btn.has-profile{color:var(--text);border-color:rgba(var(--accent-rgb),.45)}

/* Barra de estatísticas (jogo diário, calendário, ranking) */
.gtc-stats-bar{
  max-width:none;
  width:fit-content;
  gap:4px;
  margin:-8px auto 18px;
  padding:5px;
  border:1px solid var(--hairline);
  border-radius:16px;
  background:var(--surface);
  -webkit-backdrop-filter:blur(12px);
  backdrop-filter:blur(12px);
  transition:border-color 180ms ease,transform 160ms var(--ease-out);
}
.gtc-stats-bar:active{transform:scale(.98)}
.gtc-stats-bar:hover,.gtc-stats-bar:focus-visible{background:var(--surface);border-color:rgba(var(--accent-rgb),.5)}
.gtc-stat-item,.gtc-stat-item:first-child,.gtc-stat-item:last-child{
  display:flex;
  align-items:baseline;
  gap:8px;
  padding:8px 14px;
  border-radius:12px;
  background:rgba(255,255,255,.03);
  box-shadow:none;
}
.gtc-stat-val{margin:0;color:var(--text);font:700 16px/1 var(--font-display);white-space:nowrap}
.gtc-stat-val.streak{color:#ffb547}
.gtc-stat-lbl{font:600 10px/1 var(--font-body);letter-spacing:.08em;color:var(--muted);white-space:nowrap}
.gtc-streak-stat,.gtc-streak-stat[data-level]{
  outline:0;
  background:linear-gradient(135deg,rgba(255,122,0,.2),rgba(255,193,7,.08));
  box-shadow:inset 0 0 0 1px rgba(255,158,0,.25);
}

/* --------------------------------------------------------------------------
   Painel de conteúdo
   -------------------------------------------------------------------------- */
.gtc-panel,
.gtc-panel.is-home{
  max-height:none;
  overflow:visible;
  will-change:auto;
}
.gtc-panel{
  padding:clamp(16px,2.4vw,32px);
  border:1px solid var(--hairline);
  border-radius:var(--r-xl);
  background:
    radial-gradient(120% 60% at 50% -10%,rgba(var(--accent-rgb),.12),transparent 60%),
    linear-gradient(180deg,rgba(22,16,39,.92),rgba(12,9,22,.94));
  background-size:auto;
  -webkit-backdrop-filter:blur(14px);
  backdrop-filter:blur(14px);
  box-shadow:0 30px 60px -30px rgba(0,0,0,.8),inset 0 1px rgba(255,255,255,.04);
}
.gtc-panel.is-home{
  padding:0;
  border:0;
  border-radius:0;
  background:none;
  -webkit-backdrop-filter:none;
  backdrop-filter:none;
  box-shadow:none;
}

/* A animação antiga rodava a cada palpite; agora só roda ao trocar de tela (ui-effects.js) */
.gtc-panel > :not(style){animation:none}
.gtc-hint.revealed{animation:none}
.gtc-result-final{animation:none}

.ui-enter{animation:ui-rise 460ms var(--ease-out) both}
@keyframes ui-rise{
  from{opacity:0;transform:translateY(12px)}
  to{opacity:1;transform:none}
}

.gtc-section-title{
  font:700 clamp(18px,1.6vw,22px)/1.2 var(--font-display);
  color:var(--text);
  letter-spacing:-.01em;
}

/* --------------------------------------------------------------------------
   Tela inicial
   -------------------------------------------------------------------------- */
.gtc-panel.is-home .gtc-home{max-width:none;padding:0}

.gtc-home-hero,
.gtc-panel.is-home .gtc-home-hero{
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,1.25fr) minmax(260px,.9fr);
  grid-template-areas:"copy fan" "stats fan";
  align-items:center;
  gap:22px 32px;
  min-height:clamp(300px,38vh,400px);
  padding:clamp(26px,4vw,52px);
  overflow:hidden;
  border:1px solid rgba(var(--accent-rgb),.35);
  border-radius:var(--r-xl);
}
.gtc-home-hero::before{
  content:"";
  position:absolute;
  inset:0;
  right:auto;
  top:auto;
  width:100%;
  height:100%;
  pointer-events:none;
  background:
    linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px) 0 0/28px 28px,
    linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px) 0 0/28px 28px;
  -webkit-mask-image:radial-gradient(80% 80% at 70% 30%,#000,transparent 75%);
  mask-image:radial-gradient(80% 80% at 70% 30%,#000,transparent 75%);
  color:transparent;
  font:0/0 a;
}

.gtc-home-hero > div:first-child{grid-area:copy;position:relative;z-index:2}
.gtc-home-kicker{
  gap:8px;
  padding:7px 12px;
  border:1px solid rgba(255,214,10,.35);
  border-radius:999px;
  background:rgba(255,214,10,.08);
  color:var(--amber);
  font:700 11px/1 var(--font-body);
  letter-spacing:.12em;
  box-shadow:none;
}
.gtc-home-hero h1,
.gtc-panel.is-home .gtc-home-hero h1{
  max-width:16ch;
  margin:18px 0 14px;
  font:700 clamp(34px,4.6vw,62px)/1.02 var(--font-display);
  letter-spacing:-.035em;
  color:transparent;
  background:linear-gradient(180deg,#fff 30%,color-mix(in srgb,var(--cyan) 45%,#fff));
  -webkit-background-clip:text;
  background-clip:text;
  text-shadow:none;
  text-wrap:balance;
}
.gtc-home-hero p,
.gtc-panel.is-home .gtc-home-hero p{
  max-width:42ch;
  margin:0;
  color:var(--muted);
  font:400 clamp(14px,1.1vw,17px)/1.55 var(--font-body);
}
.gtc-home-player-stats{grid-area:stats;position:relative;z-index:2;gap:10px}
.gtc-home-player-stats span,
.gtc-panel.is-home .gtc-home-player-stats span{
  flex-direction:row;
  align-items:baseline;
  gap:8px;
  min-width:0;
  min-height:0;
  padding:12px 16px;
  border:1px solid var(--hairline-strong);
  border-radius:14px;
  background:rgba(8,6,16,.45);
  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);
  box-shadow:none;
  color:var(--muted);
  font:600 11px/1 var(--font-body);
  letter-spacing:.08em;
}
.gtc-home-player-stats strong{color:#fff;font:700 22px/1 var(--font-display)}

/* Leque de capas (injetado pelo ui-effects.js com jogos já publicados) */
.ui-cover-fan{
  grid-area:fan;
  position:relative;
  z-index:1;
  height:clamp(220px,28vh,300px);
  perspective:900px;
}
.ui-fan-card{
  --spread:1;
  position:absolute;
  left:50%;
  top:50%;
  width:clamp(110px,10vw,150px);
  aspect-ratio:3/4;
  overflow:hidden;
  border-radius:14px;
  border:2px solid rgba(255,255,255,.14);
  background:#120d20;
  box-shadow:0 24px 40px -14px rgba(0,0,0,.85),0 0 0 1px rgba(0,0,0,.4);
  transform:
    translate(-50%,-50%)
    translateX(calc(var(--o) * 46px * var(--spread)))
    translateY(calc(var(--d) * 6px))
    rotate(calc(var(--o) * 8deg * var(--spread)));
  transition:transform 520ms var(--ease-out);
}
/* Capas nítidas no leque da tela inicial */
.ui-fan-card img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
}
.ui-fan-card:nth-child(3){z-index:3}
.ui-fan-card:nth-child(2),.ui-fan-card:nth-child(4){z-index:2}
@media (hover:hover) and (pointer:fine){
  .ui-cover-fan:hover .ui-fan-card{--spread:1.6}
}
.ui-cover-fan::after{
  content:"?";
  position:absolute;
  right:4%;
  top:2%;
  z-index:5;
  display:grid;
  place-items:center;
  width:46px;
  height:46px;
  border-radius:14px;
  background:var(--amber);
  color:#1a1200;
  font:16px var(--font-pixel);
  box-shadow:0 10px 24px -8px rgba(255,214,10,.8);
  transform:rotate(10deg);
}

/* Cartões dos modos — grade estilo bento */
.gtc-home-modes,
.gtc-panel.is-home .gtc-home-modes{
  grid-template-columns:repeat(6,minmax(0,1fr));
  gap:14px;
  margin-top:14px;
}
.gtc-home-modes .gtc-home-mode,
.gtc-panel.is-home .gtc-home-modes .gtc-home-mode{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  grid-column:span 2;
  gap:12px;
  min-height:210px;
  padding:22px;
  overflow:hidden;
  border:1px solid color-mix(in srgb,var(--mode-color) 30%,transparent);
  border-radius:var(--r-lg);
  box-shadow:0 20px 40px -24px rgba(0,0,0,.9),inset 0 1px rgba(255,255,255,.06);
  color:var(--text);
  text-align:left;
  transition:transform 260ms var(--ease-out),border-color 200ms ease,box-shadow 260ms var(--ease-out);
}
.gtc-panel.is-home .gtc-home-mode.is-daily{--mode-color:var(--cyan)}
.gtc-panel.is-home .gtc-home-mode.is-music{--mode-color:#f472b6}
.gtc-panel.is-home .gtc-home-mode.is-infinite{--mode-color:#22d3ee}
.gtc-panel.is-home .gtc-home-mode.is-duel{--mode-color:#ff9e00}
.gtc-panel.is-home .gtc-home-mode.is-coming{--mode-color:#7b8399}

/* Bento: Diário em destaque + Musical; depois Infinito, Duelo e Semanal */
.gtc-panel.is-home .gtc-home-modes .gtc-home-mode.is-daily{grid-column:span 4;min-height:260px}
.gtc-panel.is-home .gtc-home-modes .gtc-home-mode.is-music{grid-column:span 2;min-height:260px}
.gtc-panel.is-home .gtc-home-modes .gtc-home-mode.is-infinite,
.gtc-panel.is-home .gtc-home-modes .gtc-home-mode.is-duel,
.gtc-panel.is-home .gtc-home-modes .gtc-home-mode.is-coming{
  grid-column:span 2;
  display:flex;
  min-height:200px;
}

/* Luz que segue o cursor */
.gtc-home-mode::before,
.gtc-panel.is-home .gtc-home-mode::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  height:auto;
  border-radius:inherit;
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,-40%),color-mix(in srgb,var(--mode-color) 22%,transparent),transparent 45%);
  box-shadow:none;
  opacity:0;
  transition:opacity 260ms ease;
  pointer-events:none;
}
.gtc-home-mode::after,
.gtc-panel.is-home .gtc-home-mode::after{
  content:"";
  position:absolute;
  inset:auto -40px -60px auto;
  width:200px;
  height:200px;
  border:0;
  border-radius:50%;
  background:radial-gradient(circle,color-mix(in srgb,var(--mode-color) 28%,transparent),transparent 65%);
  box-shadow:none;
  transform:none;
  pointer-events:none;
  opacity:.7;
}
/* Diário: "?" gigante em pixel art */
.gtc-panel.is-home .gtc-home-mode.is-daily::after{
  content:"?";
  inset:50% 6% auto auto;
  display:grid;
  place-items:center;
  width:auto;
  height:auto;
  background:none;
  color:color-mix(in srgb,var(--cyan) 30%,transparent);
  font:clamp(90px,11vw,150px)/1 var(--font-pixel);
  text-shadow:0 0 40px rgba(var(--accent-rgb),.5);
  transform:translateY(-50%) rotate(8deg);
  opacity:1;
  animation:ui-float 6s var(--ease-in-out) infinite alternate;
}
@keyframes ui-float{to{transform:translateY(-56%) rotate(4deg)}}

@media (hover:hover) and (pointer:fine){
  .gtc-home-mode:hover,
  .gtc-home-mode:focus-visible,
  .gtc-panel.is-home .gtc-home-mode:hover{
    transform:translateY(-4px);
    border-color:color-mix(in srgb,var(--mode-color) 70%,transparent);
    box-shadow:0 30px 50px -24px color-mix(in srgb,var(--mode-color) 45%,rgba(0,0,0,.9)),inset 0 1px rgba(255,255,255,.08);
  }
  .gtc-home-mode:hover::before{opacity:1}
  .gtc-home-mode.is-coming:hover{transform:none;box-shadow:none;border-color:color-mix(in srgb,var(--mode-color) 30%,transparent)}
}
.gtc-home-mode:focus-visible{outline:2px solid var(--mode-color);outline-offset:3px}
.gtc-home-mode:not(.is-coming):active{transform:scale(.985);transition-duration:120ms}

.gtc-home-mode-icon,
.gtc-panel.is-home .gtc-home-mode-icon{
  position:relative;
  z-index:1;
  width:52px;
  height:52px;
  border:1px solid color-mix(in srgb,var(--mode-color) 45%,transparent);
  border-radius:16px;
  background:linear-gradient(160deg,color-mix(in srgb,var(--mode-color) 35%,#1d1530),#0e0a18);
  box-shadow:0 12px 24px -10px color-mix(in srgb,var(--mode-color) 70%,transparent),inset 0 1px rgba(255,255,255,.15);
  font-size:24px;
  text-shadow:none;
}
.gtc-home-mode-copy{position:relative;z-index:1;gap:8px}
.gtc-home-mode-copy small{
  color:var(--mode-color);
  font:700 10.5px/1 var(--font-body);
  letter-spacing:.12em;
}
.gtc-home-mode-copy strong,
.gtc-panel.is-home .gtc-home-mode-copy strong{
  font:700 clamp(19px,1.6vw,24px)/1.1 var(--font-display);
  letter-spacing:-.015em;
  text-shadow:none;
}
.gtc-panel.is-home .gtc-home-mode.is-daily .gtc-home-mode-copy strong{font-size:clamp(26px,2.6vw,36px)}
.gtc-home-mode-copy em,
.gtc-panel.is-home .gtc-home-mode-copy em{
  max-width:34ch;
  color:var(--muted);
  font:400 14px/1.5 var(--font-body);
}
.gtc-home-mode > b,
.gtc-home-modes .gtc-home-mode > b,
.gtc-home-modes .gtc-home-mode.is-duel > b,
.gtc-home-modes .gtc-home-mode.is-coming > b{
  position:relative;
  z-index:1;
  display:inline-flex;
  align-items:center;
  gap:6px;
  min-height:36px;
  margin:auto 0 0;
  padding:0 16px;
  border:1px solid color-mix(in srgb,var(--mode-color) 50%,transparent);
  border-radius:999px;
  background:color-mix(in srgb,var(--mode-color) 14%,transparent);
  color:#fff;
  font:700 11.5px/1 var(--font-body);
  letter-spacing:.1em;
  box-shadow:none;
  transition:background-color 200ms ease,color 200ms ease,padding 260ms var(--ease-out);
}
@media (hover:hover) and (pointer:fine){
  .gtc-home-mode:not(.is-coming):hover > b{
    padding-right:20px;
    background:var(--mode-color);
    color:#0b0812;
  }
}
.gtc-panel.is-home .gtc-home-mode.is-daily > b{
  min-height:44px;
  padding:0 22px;
  border:0;
  background:linear-gradient(180deg,color-mix(in srgb,var(--cyan) 85%,#fff),var(--cyan));
  color:#0c0816;
  box-shadow:0 14px 30px -12px rgba(var(--accent-rgb),.95);
}

.gtc-new-mode-badge{
  top:16px;
  right:16px;
  padding:6px 10px;
  border:0;
  background:#f472b6;
  color:#1d0715;
  font:800 10px/1 var(--font-body);
  letter-spacing:.1em;
  box-shadow:0 8px 20px -6px rgba(244,114,182,.9);
  animation:none;
}
.gtc-mode-help{
  top:16px;
  right:16px;
  width:28px;
  height:28px;
  border:1px solid var(--hairline-strong);
  background:rgba(8,6,16,.6);
  color:var(--muted);
  font:700 12px/1 var(--font-body);
  box-shadow:none;
}
.gtc-mode-tooltip{
  top:36px;
  width:240px;
  padding:12px 14px;
  border:1px solid var(--hairline-strong);
  border-radius:14px;
  background:rgba(18,13,32,.96);
  -webkit-backdrop-filter:blur(12px);
  backdrop-filter:blur(12px);
  color:var(--text);
  font:400 12.5px/1.5 var(--font-body);
  transform:translateY(-4px) scale(.97);
  transform-origin:top right;
  transition:opacity 160ms var(--ease-out),transform 160ms var(--ease-out),visibility 0s linear 160ms;
}
.gtc-mode-help:hover .gtc-mode-tooltip,
.gtc-mode-help:focus .gtc-mode-tooltip,
.gtc-mode-help.is-open .gtc-mode-tooltip{transform:none;transition-delay:0s}

.gtc-home-mode.is-coming,
.gtc-panel.is-home .gtc-home-mode.is-coming{
  border-style:dashed;
  border-color:rgba(255,255,255,.14);
  background:repeating-linear-gradient(135deg,rgba(255,255,255,.02) 0 10px,transparent 10px 20px),linear-gradient(165deg,#15111f,#0c0a14);
  filter:none;
  opacity:.75;
}
.gtc-home-mode.is-coming::after,
.gtc-panel.is-home .gtc-home-mode.is-coming::after{
  content:"🔒";
  inset:18px 18px auto auto;
  display:grid;
  place-items:center;
  width:40px;
  height:40px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.04);
  font-size:16px;
  opacity:1;
}
.gtc-home-mode.is-coming > b{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.14);color:var(--amber)}

/* Entrada escalonada da tela inicial */
.ui-enter .gtc-home-hero{animation:ui-rise 560ms var(--ease-out) both}
.ui-enter .gtc-home-mode{animation:ui-rise 520ms var(--ease-out) both}
.ui-enter .gtc-home-mode:nth-child(1){animation-delay:90ms}
.ui-enter .gtc-home-mode:nth-child(2){animation-delay:140ms}
.ui-enter .gtc-home-mode:nth-child(3){animation-delay:190ms}
.ui-enter .gtc-home-mode:nth-child(4){animation-delay:240ms}
.ui-enter .gtc-home-mode:nth-child(5){animation-delay:290ms}

/* --------------------------------------------------------------------------
   Jogo diário
   -------------------------------------------------------------------------- */
.gtc-daily-heading{
  margin-bottom:22px;
  padding-bottom:18px;
  border-bottom:1px solid var(--hairline);
}
.gtc-daily-kicker{
  display:flex;
  align-items:center;
  gap:12px;
  color:var(--text);
  font:700 clamp(22px,2.2vw,30px)/1.1 var(--font-display);
  letter-spacing:-.02em;
  text-shadow:none;
}
.gtc-daily-kicker::before{
  content:"";
  width:10px;
  height:10px;
  border-radius:50%;
  background:var(--cyan);
  box-shadow:0 0 0 4px rgba(var(--accent-rgb),.2),0 0 16px rgba(var(--accent-rgb),.9);
}
.gtc-attempts-label{color:var(--muted);font:600 10.5px/1 var(--font-body);letter-spacing:.12em}
.gtc-pips{gap:6px}
.gtc-pip,
.gtc-heading-attempts .gtc-pip{
  width:38px;
  height:38px;
  border:1px solid var(--hairline-strong);
  border-radius:12px;
  background:rgba(255,255,255,.03);
  box-shadow:none;
  color:var(--muted-2);
  font:700 13px/1 var(--font-display);
  transition:background-color 300ms ease,border-color 300ms ease,color 300ms ease;
}
.gtc-pip span{transform:none}
.gtc-pip.used-wrong{border-color:rgba(255,90,122,.5);background:rgba(255,90,122,.14);color:#ff8ba2}
.gtc-pip.used-right{border-color:rgba(52,211,153,.6);background:rgba(52,211,153,.16);color:#6ee7b7}
.gtc-pip.current{
  border-color:var(--cyan);
  background:rgba(var(--accent-rgb),.18);
  color:#fff;
  box-shadow:0 0 0 4px rgba(var(--accent-rgb),.14),0 8px 20px -8px rgba(var(--accent-rgb),.9);
}

.gtc-game-layout{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(24px,3.4vw,48px);align-items:start}
.gtc-game-layout.is-won{grid-template-columns:minmax(0,1fr)}
@media (min-width:1280px) and (min-height:720px){
  .gtc-game-layout{gap:clamp(28px,3.4vw,52px);align-items:start}
  .gtc-pip{width:40px;height:40px}
}

/* Gabinete arcade com inclinação 3D */
.gtc-arcade-shell{
  padding:12px 12px 12px;
  border:1px solid rgba(var(--accent-rgb),.45);
  border-radius:24px 24px 16px 16px;
  background:
    radial-gradient(100% 60% at 50% 0%,rgba(var(--accent-rgb),.35),transparent 70%),
    linear-gradient(170deg,#2a1d48,#120c22 60%,#0a0713);
  box-shadow:0 30px 60px -24px rgba(var(--accent-rgb),.6),0 10px 30px -10px rgba(0,0,0,.8),inset 0 1px rgba(255,255,255,.12);
  transform-style:preserve-3d;
  will-change:transform;
}
.gtc-arcade-shell::after{display:none}
.gtc-cover-frame{
  width:clamp(200px,20vw,260px);
  margin:0;
  border:0;
  border-radius:14px;
  box-shadow:0 0 0 1px rgba(255,255,255,.08),inset 0 0 20px rgba(0,0,0,.6);
}
.gtc-cover-label{
  padding:20px 10px 9px;
  color:#fff;
  font:600 11px/1 var(--font-mono);
  letter-spacing:.06em;
  background:linear-gradient(0deg,rgba(0,0,0,.85),transparent);
}
.gtc-scan{opacity:.55}
.ui-glare{
  position:absolute;
  inset:-50%;
  z-index:3;
  pointer-events:none;
  background:radial-gradient(circle at center,rgba(255,255,255,.28),transparent 40%);
  mix-blend-mode:overlay;
  opacity:0;
  transition:opacity 300ms ease;
}
.gtc-arcade-shell.is-tilting .ui-glare{opacity:1}
.gtc-arcade-controls{
  height:34px;
  margin:10px 0 0;
  border:1px solid rgba(var(--accent-rgb),.35);
  border-radius:10px;
  background:linear-gradient(170deg,#2b1e48 0 45%,#150f25 47%);
}

/* Dicas */
.gtc-hints{gap:12px}
.gtc-hint,
.gtc-hint.gtc-synopsis-hint{
  position:relative;
  overflow:hidden;
  min-height:72px;
  padding:14px 16px;
  border:1px dashed rgba(255,255,255,.12);
  border-radius:var(--r-md);
  background:repeating-linear-gradient(135deg,rgba(255,255,255,.018) 0 8px,transparent 8px 16px),rgba(10,7,18,.6);
  transition:border-color 300ms ease,background-color 300ms ease;
}
.gtc-hint-label{
  gap:8px;
  margin-bottom:8px;
  color:var(--muted-2);
  font:700 10.5px/1 var(--font-body);
  letter-spacing:.12em;
}
.gtc-hint-icon{
  display:grid;
  place-items:center;
  width:24px;
  height:24px;
  border-radius:8px;
  background:rgba(255,255,255,.05);
  font-size:12px;
}
.gtc-hint-val{color:var(--muted-2);font:600 clamp(15px,1.1vw,17px)/1.35 var(--font-display);letter-spacing:.02em}
.gtc-hint.revealed{
  border:1px solid rgba(var(--accent-rgb),.38);
  background:
    radial-gradient(120% 120% at 0% 0%,rgba(var(--accent-rgb),.16),transparent 60%),
    linear-gradient(170deg,rgba(32,23,56,.9),rgba(17,12,31,.9));
  box-shadow:inset 0 1px rgba(255,255,255,.06);
}
.gtc-hint.revealed .gtc-hint-label{color:color-mix(in srgb,var(--cyan) 70%,#fff)}
.gtc-hint.revealed .gtc-hint-icon{background:rgba(var(--accent-rgb),.25)}
.gtc-hint.revealed .gtc-hint-val{color:#fff;font-weight:600}
.gtc-synopsis-hint .gtc-hint-val,
.gtc-hint.gtc-synopsis-hint .gtc-hint-val{font:400 14px/1.6 var(--font-body)!important;letter-spacing:0}
.gtc-hint.gtc-synopsis-hint{margin-top:12px!important;min-height:110px!important;padding:16px 18px!important}

/* Dica recém-revelada: vira como uma carta */
.gtc-hints{perspective:900px}
.gtc-hint.ui-new{animation:ui-flip 640ms var(--ease-out) both;transform-origin:50% 0}
@keyframes ui-flip{
  from{opacity:0;transform:rotateX(-80deg) translateY(-6px)}
  60%{opacity:1}
  to{opacity:1;transform:none}
}
.gtc-hint.ui-new::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.22) 50%,transparent 70%);
  transform:translateX(-100%);
  animation:ui-sheen 900ms 260ms var(--ease-out) both;
  pointer-events:none;
}
@keyframes ui-sheen{to{transform:translateX(100%)}}

/* Campo de palpite */
.gtc-guess-container{margin-top:18px;padding-top:18px;border-top:1px solid var(--hairline)}
.gtc-guess-row{gap:10px}
.gtc-input,
.gtc-modal-body .gtc-input{
  min-height:52px;
  padding:0 18px;
  border:1px solid var(--hairline-strong);
  border-radius:14px;
  background:rgba(255,255,255,.04);
  color:var(--text);
  font:500 15px/1 var(--font-body);
  transition:border-color 160ms ease,box-shadow 200ms var(--ease-out),background-color 160ms ease;
}
select.gtc-input{padding-right:12px}
.gtc-input::placeholder{color:var(--muted-2)}
.gtc-input:focus{
  border-color:rgba(var(--accent-rgb),.85);
  background:rgba(var(--accent-rgb),.06);
  box-shadow:0 0 0 4px rgba(var(--accent-rgb),.18);
}
@media (min-width:1280px) and (min-height:720px){
  .gtc-input{padding:0 18px;font-size:15px}
}

/* Botões */
.gtc-btn{
  min-height:44px;
  padding:0 22px;
  border:0;
  border-radius:14px;
  background:linear-gradient(180deg,color-mix(in srgb,var(--cyan) 85%,#fff),var(--cyan));
  color:#0c0816;
  font:700 13px/1 var(--font-body);
  letter-spacing:.08em;
  box-shadow:0 12px 26px -12px rgba(var(--accent-rgb),.95),inset 0 1px rgba(255,255,255,.35);
  transition:transform 160ms var(--ease-out),filter 160ms ease,box-shadow 200ms ease;
}
.gtc-guess-row .gtc-btn{min-height:52px;padding:0 26px}
@media (hover:hover) and (pointer:fine){
  .gtc-btn:hover{opacity:1;filter:brightness(1.08)}
}
.gtc-btn:active{transform:scale(.97)}
.gtc-btn:disabled{filter:grayscale(.4);box-shadow:none}
@media (min-width:1280px) and (min-height:720px){
  .gtc-btn{font-size:13px;padding:0 24px}
}
.gtc-share-toggle{
  background:transparent;
  color:var(--text);
  box-shadow:inset 0 0 0 1px rgba(var(--accent-rgb),.6);
}
@media (hover:hover) and (pointer:fine){
  .gtc-share-toggle:hover{background:rgba(var(--accent-rgb),.14)}
}

.gtc-feedback{margin-top:8px;font:500 12.5px/1.4 var(--font-body)}
.gtc-feedback.wrong{color:#ff8ba2}

/* Sugestões do autocomplete */
.gtc-suggestions-box{
  top:calc(100% + 8px);
  padding:6px;
  border:1px solid var(--hairline-strong);
  border-radius:16px;
  background:rgba(20,15,35,.97);
  -webkit-backdrop-filter:blur(16px);
  backdrop-filter:blur(16px);
  box-shadow:0 24px 50px -20px rgba(0,0,0,.95);
  max-height:260px;
  transform-origin:top center;
  transition:opacity 160ms var(--ease-out),transform 160ms var(--ease-out);
  @starting-style{opacity:0;transform:translateY(-4px) scale(.98)}
}
.gtc-suggestion-item{
  padding:11px 12px;
  border:0;
  border-radius:10px;
  font:500 14px/1.3 var(--font-body);
  transition:background-color 120ms ease;
}
.gtc-suggestion-item:hover,
.gtc-suggestion-item.selected{background:rgba(var(--accent-rgb),.2);color:#fff}

/* Resultado final */
.gtc-result.gtc-result-final{
  position:relative;
  overflow:hidden;
  padding:clamp(20px,3vw,32px)!important;
  border-radius:var(--r-lg);
}
.gtc-result.win{
  background:radial-gradient(90% 120% at 50% 0%,rgba(52,211,153,.25),transparent 60%),linear-gradient(170deg,#0f2a22,#0a1712)!important;
  border:1px solid rgba(52,211,153,.55)!important;
  box-shadow:0 30px 60px -30px rgba(52,211,153,.6);
}
.gtc-result.lose{
  background:radial-gradient(90% 120% at 50% 0%,rgba(255,90,122,.22),transparent 60%),linear-gradient(170deg,#2a0f19,#16090e)!important;
  border:1px solid rgba(255,90,122,.5)!important;
}
.gtc-result-title{font:13px/1.4 var(--font-pixel);letter-spacing:.04em}
.gtc-result.win .gtc-result-title{color:#6ee7b7!important}
.gtc-result.lose .gtc-result-title{color:#ff8ba2!important}
.gtc-result.win .gtc-result-game,
.gtc-result.lose .gtc-result-game,
.gtc-result-final .gtc-result-game{
  margin:10px 0 6px;
  color:#fff!important;
  font:700 clamp(26px,3vw,40px)/1.05 var(--font-display);
  letter-spacing:-.02em;
}
.gtc-result-meta{color:var(--muted);font:500 13px/1.4 var(--font-body)}
.gtc-result-details span{
  padding:6px 12px;
  border:1px solid var(--hairline-strong);
  border-radius:999px;
  background:rgba(0,0,0,.25);
  color:var(--text);
  font:500 12px/1.2 var(--font-body);
}
.gtc-xp-earned{border-radius:999px;font-size:10px;padding:8px 14px}
.gtc-next-countdown{color:var(--amber);font:600 12px/1 var(--font-mono);letter-spacing:.06em}
.gtc-result-modes{gap:10px;margin-top:16px}
.gtc-result-mode{
  min-height:48px;
  border-radius:14px;
  font:700 12px/1.2 var(--font-body);
  letter-spacing:.08em;
  transition:transform 160ms var(--ease-out),box-shadow 200ms ease,background-color 200ms ease;
}
.gtc-result-mode:active{transform:scale(.97)}
.gtc-result.ui-new{animation:ui-pop 520ms var(--ease-out) both}
@keyframes ui-pop{from{opacity:0;transform:translateY(10px) scale(.97)}to{opacity:1;transform:none}}

.gtc-trailer-panel{
  border:1px solid rgba(var(--accent-rgb),.45);
  border-radius:var(--r-lg);
  padding:14px;
}
.gtc-trailer-heading{font:700 12px/1 var(--font-body);letter-spacing:.12em}
.gtc-daily-trailer{border-radius:14px}

/* Confete da vitória */
.ui-confetti{position:fixed;inset:0;z-index:100000;pointer-events:none}

/* --------------------------------------------------------------------------
   Calendário, ranking, troféus e outras telas (herdam os novos tokens)
   -------------------------------------------------------------------------- */
.gtc-month-tabs{gap:6px;padding:4px;border:1px solid var(--hairline);border-radius:14px;}
.gtc-month-tab,.gtc-rank-tab{
  border:0;
  border-radius:10px;
  background:transparent;
  font:700 11px/1 var(--font-body);
  letter-spacing:.06em;
  padding:11px 12px;
}
.gtc-month-tab.active,.gtc-rank-tab.active{
  background:rgba(var(--accent-rgb),.22)!important;
  color:#fff!important;
  box-shadow:inset 0 0 0 1px rgba(var(--accent-rgb),.5);
}

.gtc-calendar-card{
  transition:transform 220ms var(--ease-out),border-color 200ms ease,box-shadow 220ms ease;
}
@media (hover:hover) and (pointer:fine){
  .gtc-calendar-card:not(.locked):hover{transform:translateY(-3px);box-shadow:0 18px 30px -18px rgba(var(--accent-rgb),.7)}
}
.gtc-calendar-card:not(.locked):active{transform:scale(.97)}

.gtc-cal-status.won,.gtc-cal-status.lost{border-radius:8px;font:700 11px/1.2 var(--font-body)}

.gtc-rank-row:hover{background:rgba(var(--accent-rgb),.08)}
.gtc-ranking-tabs{border-radius:16px;}
.gtc-ranking-tabs button{border-radius:12px;font:700 11.5px/1.2 var(--font-body);letter-spacing:.06em}

.gtc-achievement-hero{border-radius:var(--r-lg)}
.gtc-month-recap{border-radius:var(--r-lg)}

/* --------------------------------------------------------------------------
   Modal
   -------------------------------------------------------------------------- */
.gtc-modal-overlay{
  background:rgba(5,3,10,.62);
  -webkit-backdrop-filter:blur(10px) saturate(120%);
  backdrop-filter:blur(10px) saturate(120%);
  transition:opacity 220ms ease;
  @starting-style{opacity:0}
}
.gtc-modal-box{
  max-height:min(86vh,860px);
  border:1px solid rgba(var(--accent-rgb),.38);
  border-radius:var(--r-lg);
  background:
    radial-gradient(100% 50% at 50% 0%,rgba(var(--accent-rgb),.14),transparent 70%),
    linear-gradient(180deg,#171127,#0f0b1b);
  box-shadow:0 40px 80px -30px rgba(0,0,0,.9),inset 0 1px rgba(255,255,255,.06);
  overflow:hidden;
  transition:opacity 240ms var(--ease-out),transform 280ms var(--ease-out);
  @starting-style{opacity:0;transform:translateY(10px) scale(.96)}
}
.gtc-modal-header{padding:18px 20px;border-bottom:1px solid var(--hairline)}
.gtc-modal-header h3{color:var(--text);font:700 18px/1.2 var(--font-display);letter-spacing:-.01em}
.gtc-modal-close-btn{
  display:grid;
  place-items:center;
  width:36px;
  height:36px;
  border-radius:12px;
  background:rgba(255,255,255,.05);
  color:var(--muted);
  font-size:20px;
  line-height:1;
  transition:background-color 160ms ease,color 160ms ease,transform 160ms var(--ease-out);
}
.gtc-modal-close-btn:hover{background:rgba(255,255,255,.1);color:#fff}
.gtc-modal-close-btn:active{transform:scale(.92)}
.gtc-modal-body{padding:20px;font-size:14px}
.gtc-field label{font:700 10.5px/1 var(--font-body);letter-spacing:.1em;margin-bottom:8px}

/* Toast */
.gtc-toast{
  bottom:24px;
  padding:12px 18px;
  border-radius:14px;
  font:700 13px/1.3 var(--font-body);
  box-shadow:0 20px 40px -12px rgba(0,0,0,.8);
  transition:opacity 260ms var(--ease-out),transform 320ms var(--ease-out);
  @starting-style{opacity:0;transform:translate(-50%,14px)}
}

/* Cookies */
.gtc-cookie-banner{
  border-radius:var(--r-md)!important;
  border:1px solid var(--hairline-strong)!important;
  background:rgba(18,13,32,.94)!important;
  -webkit-backdrop-filter:blur(14px);
  backdrop-filter:blur(14px);
}

/* --------------------------------------------------------------------------
   Rodapé
   -------------------------------------------------------------------------- */
.gtc-footer{
  flex-wrap:wrap;
  gap:6px 14px;
  padding:0;
  border:0;
  background:none;
  font:500 12.5px/1.4 var(--font-body);
}
.gtc-footer > span{color:var(--muted-2);opacity:.5}
.gtc-footer a{color:var(--muted);transition:color 160ms ease}
.gtc-footer a:hover{color:#fff}
.gtc-data-attribution{margin-top:10px;font:500 11px/1.4 var(--font-body)}

/* --------------------------------------------------------------------------
   Responsivo
   -------------------------------------------------------------------------- */
@media (max-width:1100px){
  .gtc-tab-label{display:none}
  .gtc-tab{padding:0 12px}
  .gtc-tab-icon{font-size:16px}
}

@media (max-width:900px){
  .gtc-body{padding:0;align-items:initial}
  /* Item flexível com margens automáticas: precisa de limite, senão a fileira de
     filtros dos troféus estica a página para os lados no celular. */
  .gtc-achievements{width:100%;min-width:0}
  .gtc-panel > *{min-width:0;max-width:100%}
  .gtc-panel > .ui-duel{width:100%}
  #gtc-root{width:calc(100% - 20px);min-height:0;padding:0 0 110px;border-radius:0}
  /* Sem backdrop-filter aqui: ele prenderia a barra fixa de navegação dentro do cabeçalho */
  .gtc-header-main{
    grid-template-columns:auto 1fr;
    margin:8px 0 16px;
    padding:8px 8px 8px 12px;
    border-radius:18px;
    background:rgba(14,10,26,.94);
    -webkit-backdrop-filter:none;
    backdrop-filter:none;
  }
  .gtc-header-actions{grid-column:2;justify-self:end}
  .gtc-logo-text{font-size:11px}

  /* Navegação vira barra inferior estilo app */
  .gtc-nav{
    position:fixed;
    left:10px;
    right:10px;
    bottom:calc(10px + env(safe-area-inset-bottom,0px));
    z-index:70;
    display:grid;
    grid-template-columns:repeat(4,1fr);
    padding:6px;
    border-radius:20px;
    background:rgba(14,10,26,.82);
    -webkit-backdrop-filter:blur(18px) saturate(150%);
    backdrop-filter:blur(18px) saturate(150%);
    box-shadow:0 20px 40px -10px rgba(0,0,0,.85),inset 0 1px rgba(255,255,255,.06);
    transition:transform 300ms var(--ease-drawer),opacity 200ms ease;
  }
  .gtc-tab{flex-direction:column;gap:5px;min-height:54px;padding:0 4px;font-size:9.5px}
  .gtc-tab-label{display:block}
  body:has(.gtc-input:focus) .gtc-nav{transform:translateY(calc(100% + 30px));opacity:0}

  .gtc-panel{padding:16px;border-radius:var(--r-lg);flex:none}
  .gtc-stats-bar{margin:-4px auto 14px}

  .gtc-home-hero,
  .gtc-panel.is-home .gtc-home-hero{
    grid-template-columns:1fr;
    grid-template-areas:"copy" "fan" "stats";
    padding:26px 22px;
  }
  .ui-cover-fan{height:200px}
  .gtc-panel.is-home .gtc-home-modes{grid-template-columns:repeat(2,minmax(0,1fr))}
  .gtc-panel.is-home .gtc-home-modes .gtc-home-mode.is-daily{grid-column:1 / -1;min-height:230px}
  .gtc-panel.is-home .gtc-home-modes .gtc-home-mode.is-music,
  .gtc-panel.is-home .gtc-home-modes .gtc-home-mode.is-infinite,
  .gtc-panel.is-home .gtc-home-modes .gtc-home-mode.is-duel,
  .gtc-panel.is-home .gtc-home-modes .gtc-home-mode.is-coming{grid-column:auto;min-height:190px}

  .gtc-game-layout{grid-template-columns:1fr;justify-items:center}
  .gtc-game-right{width:100%}
  .gtc-cookie-banner{bottom:96px!important}
  .gtc-toast{bottom:100px}
}

@media (max-width:560px){
  .gtc-header-actions{gap:4px}
  .gtc-lang-btn,.gtc-level-btn,.gtc-profile-btn{min-height:34px;padding:0 9px;font-size:10px;white-space:nowrap}
  .gtc-level-btn span:not(.gtc-level-star){display:none}
  .gtc-header-actions{min-width:0}
  .gtc-lang-btn{font-size:0;gap:0}
  .gtc-profile-btn{display:block;min-width:0;overflow:hidden;text-overflow:ellipsis;line-height:34px}
  .gtc-profile-btn.has-profile{display:flex;max-width:130px}
  .gtc-logo-icon{width:34px;height:34px;border-radius:10px}
  .gtc-panel.is-home .gtc-home-modes{grid-template-columns:1fr}
  .gtc-home-hero h1,.gtc-panel.is-home .gtc-home-hero h1{font-size:34px}
  .gtc-daily-heading{flex-direction:column;align-items:flex-start}
  .gtc-pip,.gtc-heading-attempts .gtc-pip{width:34px;height:34px}
  .gtc-hints{grid-template-columns:1fr 1fr;gap:8px}
  .gtc-hint{min-height:64px;padding:12px}
  .gtc-guess-row .gtc-btn{padding:0 18px}
  .gtc-stat-item,.gtc-stat-item:first-child,.gtc-stat-item:last-child{flex-direction:column;align-items:center;gap:5px;padding:8px 12px}
}

/* ==========================================================================
   Efeitos extras (v2.1)
   ========================================================================== */
@property --ui-angle{syntax:'<angle>';inherits:false;initial-value:0deg}

/* Granulado de filme por cima de tudo, bem sutil */
html::after{
  content:"";
  position:fixed;
  inset:0;
  z-index:3;
  pointer-events:none;
  opacity:.06;
  mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Brilho do cursor e partículas ficam atrás do conteúdo */
.ui-cursor-glow{
  position:fixed;
  left:-300px;
  top:-300px;
  z-index:1;
  width:600px;
  height:600px;
  border-radius:50%;
  pointer-events:none;
  background:radial-gradient(circle,rgba(var(--accent-rgb),.16),transparent 62%);
  opacity:0;
  transition:opacity 600ms ease;
}
.ui-cursor-glow.is-on{opacity:1}
.ui-particles{position:fixed;inset:0;width:100%;height:100%;pointer-events:none}

/* Borda com feixe de luz girando (hero e Jogo Diário) */
.ui-beam{
  position:absolute;
  inset:0;
  z-index:4;
  padding:2px;
  border-radius:inherit;
  pointer-events:none;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);
  animation:ui-spin 6s linear infinite;
}
.gtc-home-mode.is-daily .ui-beam{animation-duration:4.5s;animation-direction:reverse}
@keyframes ui-spin{to{--ui-angle:360deg}}

/* Título do hero entra palavra por palavra */
.gtc-home-hero h1.ui-split,
.gtc-panel.is-home .gtc-home-hero h1.ui-split{background:none;color:var(--text)}
.ui-word{
  display:inline-block;
  padding-bottom:.1em;
  margin-bottom:-.1em;
  color:transparent;
  background:linear-gradient(180deg,#fff 30%,color-mix(in srgb,var(--cyan) 45%,#fff));
  -webkit-background-clip:text;
  background-clip:text;
  animation:ui-word-in 760ms var(--ease-out) both;
  animation-delay:calc(120ms + var(--w) * 70ms);
}
@keyframes ui-word-in{
  from{opacity:0;transform:translateY(18px) rotate(2deg);filter:blur(10px)}
  to{opacity:1;transform:none;filter:blur(0)}
}

/* Leque de capas flutuando devagar */
.ui-cover-fan{transform-style:preserve-3d;transition:none}
.ui-fan-card{animation:ui-bob 5s var(--ease-in-out) infinite alternate;animation-delay:calc(var(--n) * -900ms)}
.ui-enter .ui-fan-card{animation:ui-deal 700ms var(--ease-out) both,ui-bob 5s var(--ease-in-out) 900ms infinite alternate}
@keyframes ui-bob{to{translate:0 -8px}}
@keyframes ui-deal{from{opacity:0;translate:0 40px;scale:.9}}

/* Cartões de modo: ícone pula, CTA do diário brilha */
.gtc-home-mode.is-tilting,
.gtc-panel.is-home .gtc-home-mode.is-tilting,
.gtc-calendar-card.is-tilting{transition-property:border-color,box-shadow,background-color}
.gtc-home-mode-icon,
.gtc-panel.is-home .gtc-home-mode-icon{transition:transform 460ms cubic-bezier(.34,1.56,.64,1),box-shadow 300ms ease}
@media (hover:hover) and (pointer:fine){
  .gtc-home-mode:not(.is-coming):hover .gtc-home-mode-icon{
    transform:translateY(-3px) rotate(-8deg) scale(1.1);
    box-shadow:0 18px 30px -10px color-mix(in srgb,var(--mode-color) 85%,transparent),inset 0 1px rgba(255,255,255,.2);
  }
}
.gtc-panel.is-home .gtc-home-mode.is-daily > b{overflow:hidden}
.gtc-panel.is-home .gtc-home-mode.is-daily > b::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(110deg,transparent 35%,rgba(255,255,255,.6) 50%,transparent 65%);
  transform:translateX(-120%);
  animation:ui-cta-shine 3.8s var(--ease-in-out) infinite;
}
@keyframes ui-cta-shine{0%,62%{transform:translateX(-120%)}100%{transform:translateX(120%)}}

/* Logo reage ao passar o mouse */
.gtc-logo-icon{transition:transform 460ms cubic-bezier(.34,1.56,.64,1)}
@media (hover:hover) and (pointer:fine){
  .gtc-logo-container:hover .gtc-logo-icon{transform:rotate(-10deg) scale(1.08)}
  .gtc-logo-container:hover .gtc-logo-text{animation:ui-rgb-split 420ms steps(4) 1}
}
@keyframes ui-rgb-split{
  0%{text-shadow:2px 0 #ff3d7f,-2px 0 #22d3ee}
  50%{text-shadow:-2px 1px #ff3d7f,2px -1px #22d3ee}
  100%{text-shadow:none}
}

/* Entrada da tela com desfoque */
.gtc-panel > .ui-enter:not(.gtc-home){animation:ui-rise-blur 520ms var(--ease-out) both}
.gtc-home.ui-enter{animation:none}
@keyframes ui-rise-blur{
  from{opacity:0;transform:translateY(14px);filter:blur(6px)}
  to{opacity:1;transform:none;filter:blur(0)}
}
.ui-stagger{animation:ui-rise 480ms var(--ease-out) both;animation-delay:calc(120ms + var(--i) * 32ms)}

/* Capa: faixa de luz passando como num monitor CRT */
.gtc-scan{overflow:hidden}
.gtc-scan::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:0;
  height:28%;
  background:linear-gradient(180deg,transparent,rgba(var(--accent-rgb),.22),rgba(255,255,255,.08),transparent);
  transform:translateY(-110%);
  animation:ui-crt 5s linear infinite;
}
@keyframes ui-crt{0%{transform:translateY(-110%)}70%,100%{transform:translateY(380%)}}

/* Erro: capa dá "glitch" e a tela pisca em vermelho */
.gtc-cover-frame.ui-glitch{animation:ui-glitch 560ms steps(1) both}
.gtc-cover-frame.ui-glitch:not(.load-error)::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:4;
  background:repeating-linear-gradient(0deg,rgba(255,61,127,.35) 0 2px,transparent 2px 7px);
  mix-blend-mode:screen;
  animation:ui-glitch-bars 560ms steps(7) both;
}
@keyframes ui-glitch{
  0%{transform:translate(0)}
  12%{transform:translate(-5px,1px) skewX(-4deg)}
  24%{transform:translate(4px,-1px) skewX(3deg)}
  36%{transform:translate(-3px,0)}
  48%{transform:translate(2px,1px) skewX(-2deg)}
  60%{transform:translate(-1px,0)}
  72%,100%{transform:none}
}
@keyframes ui-glitch-bars{
  0%{clip-path:inset(10% 0 70% 0);opacity:1}
  20%{clip-path:inset(55% 0 20% 0)}
  40%{clip-path:inset(30% 0 45% 0)}
  60%{clip-path:inset(75% 0 5% 0)}
  80%{clip-path:inset(5% 0 85% 0)}
  100%{clip-path:inset(0);opacity:0}
}
.ui-flash{
  position:fixed;
  inset:0;
  z-index:99990;
  pointer-events:none;
  animation:ui-flash 700ms var(--ease-out) forwards;
}
.ui-flash.is-bad{box-shadow:inset 0 0 140px rgba(255,61,100,.55)}
.ui-flash.is-good{box-shadow:inset 0 0 160px rgba(52,211,153,.5)}
@keyframes ui-flash{from{opacity:1}to{opacity:0}}

/* Vitória: onda de choque saindo do resultado */
.ui-shock{
  position:fixed;
  z-index:99991;
  width:60px;
  height:60px;
  margin:-30px 0 0 -30px;
  border:3px solid #6ee7b7;
  border-radius:50%;
  pointer-events:none;
  box-shadow:0 0 30px rgba(52,211,153,.8),inset 0 0 20px rgba(52,211,153,.6);
  animation:ui-shock 900ms var(--ease-out) forwards;
}
@keyframes ui-shock{from{transform:scale(.4);opacity:1}to{transform:scale(14);opacity:0}}

/* Tentativa usada: o quadradinho "pula" */
.gtc-pip.ui-new{animation:ui-pip 560ms cubic-bezier(.34,1.56,.64,1) both}
@keyframes ui-pip{from{transform:scale(.5);opacity:.4}to{transform:none;opacity:1}}
.gtc-pip.current{animation:ui-pip-breathe 2.2s var(--ease-in-out) infinite}
@keyframes ui-pip-breathe{50%{box-shadow:0 0 0 7px rgba(var(--accent-rgb),.08),0 8px 24px -6px rgba(var(--accent-rgb),1)}}

/* Botão principal com brilho ao passar o mouse */
.gtc-btn{position:relative;overflow:hidden}
.gtc-btn::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(110deg,transparent 35%,rgba(255,255,255,.45) 50%,transparent 65%);
  transform:translateX(-120%);
  pointer-events:none;
}
@media (hover:hover) and (pointer:fine){
  .gtc-btn:not(:disabled):hover::after{transform:translateX(120%);transition:transform 700ms var(--ease-out)}
}

/* Cartão de resultado com brilho girando atrás do título */
.gtc-result.win.gtc-result-final::before{
  content:"";
  position:absolute;
  left:50%;
  top:-140px;
  width:420px;
  height:420px;
  margin-left:-210px;
  border-radius:50%;
  background:conic-gradient(from 0deg,transparent,rgba(110,231,183,.18),transparent 30%,rgba(255,214,10,.14),transparent 60%,rgba(110,231,183,.18),transparent);
  animation:ui-rays 14s linear infinite;
  pointer-events:none;
}
.gtc-result-final > *{position:relative}
@keyframes ui-rays{to{transform:rotate(360deg)}}

/* ==========================================================================
   Cenário arcade do fundo (v2.2)
   ========================================================================== */

.gtc-side-decor{display:none}

.ui-scene{
  --horizon:66vh;
  position:fixed;
  inset:0;
  z-index:0;
  overflow:hidden;
  pointer-events:none;
}

/* Sol retrô com faixas */
.ui-sun{
  position:absolute;
  left:50%;
  top:var(--horizon);
  width:min(56vmin,560px);
  aspect-ratio:1;
  border-radius:50%;
  transform:translate(-50%,-62%);
  background:linear-gradient(180deg,#fff3a3 0%,#ffcf4a 22%,#ff8a3d 46%,#ff3d8b 70%,rgba(var(--accent-rgb),1) 100%);
  -webkit-mask-image:linear-gradient(180deg,#000 0 48%,transparent 48% 51%,#000 51% 58%,transparent 58% 62%,#000 62% 68%,transparent 68% 73%,#000 73% 78%,transparent 78% 84%,#000 84% 88%,transparent 88%);
  mask-image:linear-gradient(180deg,#000 0 48%,transparent 48% 51%,#000 51% 58%,transparent 58% 62%,#000 62% 68%,transparent 68% 73%,#000 73% 78%,transparent 78% 84%,#000 84% 88%,transparent 88%);
  opacity:.92;
  filter:drop-shadow(0 0 80px rgba(255,61,139,.65));
  will-change:translate;
}
.ui-sun::after{
  content:"";
  position:absolute;
  inset:-30%;
  z-index:-1;
  border-radius:50%;
  background:radial-gradient(circle,rgba(255,110,150,.35),transparent 60%);
}

/* Montanhas em silhueta com contorno neon */
.ui-mountains{
  position:absolute;
  left:-4%;
  width:108%;
  top:calc(var(--horizon) - 15vh);
  height:15vh;
  overflow:visible;
  will-change:translate;
}
.ui-mountains-back{fill:#140a22;stroke:rgba(var(--accent-rgb),.55);stroke-width:1.5;vector-effect:non-scaling-stroke}
.ui-mountains-front{fill:#0b0614;stroke-width:1.5;vector-effect:non-scaling-stroke}

/* Chão em grade que corre na direção do jogador */
.ui-floor{
  position:absolute;
  left:0;
  right:0;
  top:var(--horizon);
  bottom:0;
  overflow:hidden;
  perspective:260px;
  perspective-origin:50% 0;
  background:linear-gradient(180deg,rgba(var(--accent-rgb),.28),#07040c 75%);
}
.ui-floor-grid{
  position:absolute;
  left:-100%;
  right:-100%;
  top:0;
  height:300%;
  transform-origin:50% 0;
  transform:rotateX(72deg);
  background:
    linear-gradient(rgba(var(--accent-rgb),.75) 2px,transparent 2px) 0 0/100% 64px,
    linear-gradient(90deg,rgba(var(--accent-rgb),.6) 2px,transparent 2px) 50% 0/64px 100%;
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 12%,#000 70%,transparent);
  mask-image:linear-gradient(180deg,transparent,#000 12%,#000 70%,transparent);
  animation:ui-floor-run 1.6s linear infinite;
}
@keyframes ui-floor-run{
  from{transform:rotateX(72deg) translateY(-64px)}
  to{transform:rotateX(72deg) translateY(0)}
}
.ui-horizon{
  position:absolute;
  left:0;
  right:0;
  top:var(--horizon);
  height:2px;
}

/* Pac-Man, fantasmas e peças de Tetris (desenhados pelo arcade-bg.js) */
.ui-arcade{position:fixed;inset:0;z-index:0;width:100%;height:100%;pointer-events:none}
/* No celular o conteúdo deixa uma faixa livre em cada lateral: é por ali que o
   Pac-Man corre (arcade-bg.js, SIDE_X), atrás do conteúdo como o resto do fundo. */
@media (max-width:560px){#gtc-root,.gtc-body #gtc-root{width:calc(100% - 56px)}}
.ui-particles{z-index:0}

/* --------------------------------------------------------------------------
   Letreiro no topo
   -------------------------------------------------------------------------- */
.ui-marquee{
  position:relative;
  z-index:2;
  height:30px;
  overflow:hidden;
  border-bottom:1px solid rgba(var(--accent-rgb),.25);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}
.ui-marquee-track{
  display:flex;
  width:max-content;
  height:100%;
  animation:ui-marquee 50s linear infinite;
}
.ui-marquee-track > div{display:flex;align-items:center;gap:22px;padding-right:22px}
.ui-marquee span{color:#e9defc;font:8px/1 var(--font-pixel);letter-spacing:.06em;white-space:nowrap}
.ui-marquee i{color:var(--amber);font-style:normal;font-size:10px;text-shadow:0 0 8px rgba(255,214,10,.8)}
@keyframes ui-marquee{to{transform:translateX(-50%)}}
@media (hover:hover) and (pointer:fine){.ui-marquee:hover .ui-marquee-track{animation-play-state:paused}}

/* --------------------------------------------------------------------------
   Cantos de mira (HUD) no painel e no hero
   -------------------------------------------------------------------------- */
.gtc-panel{position:relative}
.gtc-panel:not(.is-home)::before,
.gtc-home-hero::after,
.gtc-panel.is-home .gtc-home-hero::after{
  content:"";
  position:absolute;
  inset:12px;
  z-index:3;
  display:block;
  width:auto;
  height:auto;
  transform:none;
  animation:none;
  pointer-events:none;
  --c:rgba(var(--accent-rgb),.85);
  --l:18px;
  background:
    linear-gradient(var(--c),var(--c)) left top/var(--l) 2px,
    linear-gradient(var(--c),var(--c)) left top/2px var(--l),
    linear-gradient(var(--c),var(--c)) right top/var(--l) 2px,
    linear-gradient(var(--c),var(--c)) right top/2px var(--l),
    linear-gradient(var(--c),var(--c)) left bottom/var(--l) 2px,
    linear-gradient(var(--c),var(--c)) left bottom/2px var(--l),
    linear-gradient(var(--c),var(--c)) right bottom/var(--l) 2px,
    linear-gradient(var(--c),var(--c)) right bottom/2px var(--l);
  background-repeat:no-repeat;
  border:0;
  border-radius:0;
  box-shadow:none;
  opacity:.75;
}

/* Rótulo de seção na tela inicial */
.ui-section-label{
  display:flex;
  align-items:center;
  gap:12px;
  margin:34px 2px 4px;
}
.ui-section-label b{
  display:grid;
  place-items:center;
  height:24px;
  padding:0 8px;
  border-radius:6px;
  font:9px/1 var(--font-pixel);
}
.ui-section-label span{color:var(--text);font:10px/1 var(--font-pixel);letter-spacing:.06em}
.ui-section-label i{flex:1;height:1px;}
.ui-section-label em{color:var(--muted);font:700 11px/1 var(--font-body);font-style:normal;letter-spacing:.1em}
.ui-enter .ui-section-label,.gtc-home.ui-enter .ui-section-label{animation:ui-rise 520ms var(--ease-out) 60ms both}

/* --------------------------------------------------------------------------
   Rodapé "INSERT COIN"
   -------------------------------------------------------------------------- */
.ui-coin{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  margin:42px auto 0;
  width:fit-content;
  padding:14px 22px;
  border:1px solid rgba(var(--accent-rgb),.35);
  border-radius:16px;
  background:rgba(12,8,22,.7);
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
}
.ui-coin-icon{
  width:22px;
  height:22px;
  border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#fff6c4,#ffd60a 45%,#c98a00 100%);
  box-shadow:inset 0 0 0 2px #a46f00,0 0 14px rgba(255,214,10,.6);
  animation:ui-coin-spin 2.4s var(--ease-in-out) infinite;
}
@keyframes ui-coin-spin{0%,100%{transform:scaleX(1)}50%{transform:scaleX(.15)}}
.ui-coin-text{color:var(--amber);font:11px/1 var(--font-pixel);text-shadow:0 0 10px rgba(255,214,10,.6);animation:ui-blink 1.1s steps(2,end) infinite}
.ui-coin-credit{color:var(--muted);font:9px/1 var(--font-pixel)}
@keyframes ui-blink{50%{opacity:.2}}
.gtc-footer{margin-top:18px}
.gtc-data-attribution{opacity:.6}

/* Vidro: o cenário aparece por trás do hero e dos cartões */
.gtc-home-hero,
.gtc-panel.is-home .gtc-home-hero{
  background:
    radial-gradient(70% 90% at 100% 0%,rgba(var(--accent-rgb),.32),transparent 60%),
    radial-gradient(60% 80% at 0% 100%,rgba(255,158,0,.1),transparent 60%),
    linear-gradient(160deg,rgba(27,19,48,.6),rgba(13,9,25,.72) 70%);
  -webkit-backdrop-filter:blur(14px) saturate(150%);
  backdrop-filter:blur(14px) saturate(150%);
}
.gtc-home-modes .gtc-home-mode,
.gtc-panel.is-home .gtc-home-modes .gtc-home-mode{
  background:
    radial-gradient(90% 70% at 100% 0%,color-mix(in srgb,var(--mode-color) 22%,transparent),transparent 70%),
    linear-gradient(165deg,rgba(25,18,40,.78),rgba(13,10,24,.86) 75%);
  -webkit-backdrop-filter:blur(12px);
  backdrop-filter:blur(12px);
}
.gtc-panel.is-home .gtc-home-modes .gtc-home-mode.is-coming{
  background:repeating-linear-gradient(135deg,rgba(255,255,255,.02) 0 10px,transparent 10px 20px),linear-gradient(165deg,rgba(21,17,31,.8),rgba(12,10,20,.86));
}
/* O sol fica à direita no desktop, visível ao lado do conteúdo */
@media (min-width:901px){
  .ui-sun{left:auto;right:4vw;width:min(62vmin,600px);transform:translate(0,-60%)}
}

@media (max-width:900px){
  .ui-scene{--horizon:72vh}
  .ui-sun{width:min(70vmin,380px)}
  .ui-marquee{height:26px}
  .ui-coin{gap:10px;padding:12px 16px}
  .ui-coin-text{font-size:9px}
}

@media (prefers-reduced-motion:reduce){
  .ui-marquee-track,.ui-coin-icon,.ui-coin-text{animation:none}
}

@media (prefers-reduced-motion:reduce){
  .ui-beam,.ui-fan-card,.gtc-scan::after,.gtc-pip.current,
  .gtc-result.win.gtc-result-final::before,
  .gtc-panel.is-home .gtc-home-mode.is-daily > b::after{animation:none}
  .ui-word{animation:ui-fade 200ms ease both}
  .gtc-panel > .ui-enter:not(.gtc-home),.ui-stagger{animation:ui-fade 200ms ease both}
  .gtc-scan::after{display:none}
  .ui-cursor-glow{display:none}
}

/* --------------------------------------------------------------------------
   Movimento reduzido: mantém cor/opacidade, remove deslocamentos
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  .gtc-panel.is-home .gtc-home-mode.is-daily::after{animation:none}
  .ui-enter,.ui-enter .gtc-home-hero,.ui-enter .gtc-home-mode,.ui-enter .ui-fan-card,
  .gtc-hint.ui-new,.gtc-result.ui-new{animation:ui-fade 200ms ease both}
  .gtc-hint.ui-new::after{display:none}
  .gtc-home-mode,.gtc-home-mode:hover{transition:border-color 200ms ease,opacity 200ms ease;transform:none}
  .ui-fan-card{transition:none}
  .ui-cover-fan:hover .ui-fan-card{--spread:1}
}
@keyframes ui-fade{from{opacity:0}}

/* ==========================================================================
   Cabeçalho fixo no topo da página (não acompanha a rolagem) — v2.3
   ========================================================================== */
.gtc-header-main{position:relative;top:auto}
@media (max-width:900px){
  .gtc-header-main{position:relative;top:auto}
}

/* ==========================================================================
   Detalhes nos cartões de modo
   ========================================================================== */
.ui-mode-meta{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin-top:6px;
}
.ui-mode-meta i{
  display:inline-flex;
  align-items:center;
  gap:5px;
  padding:5px 9px;
  border:1px solid color-mix(in srgb,var(--mode-color) 28%,rgba(255,255,255,.08));
  border-radius:999px;
  background:rgba(8,6,16,.45);
  color:color-mix(in srgb,var(--text) 82%,var(--mode-color));
  font:600 11px/1 var(--font-body);
  font-style:normal;
  letter-spacing:.02em;
  white-space:nowrap;
  transition:border-color 200ms ease,background-color 200ms ease;
}
@media (hover:hover) and (pointer:fine){
  .gtc-home-mode:not(.is-coming):not(.is-maintenance):hover .ui-mode-meta i{
    border-color:color-mix(in srgb,var(--mode-color) 55%,transparent);
    background:color-mix(in srgb,var(--mode-color) 12%,rgba(8,6,16,.5));
  }
}
.ui-mode-status{
  display:inline-flex;
  align-items:center;
  gap:6px;
  margin-top:4px;
  color:var(--muted);
  font:600 12px/1.3 var(--font-body);
}
.ui-mode-status b{color:#fff;font:600 12px/1 var(--font-mono);letter-spacing:.04em}
.ui-mode-status.is-live{color:#6ee7b7}
.ui-mode-status.is-live::first-letter{animation:ui-blink 1.4s steps(2,end) infinite}
.ui-mode-status.is-done{color:#6ee7b7}
.ui-mode-status.is-lost{color:#ff8ba2}
.ui-mode-status.is-record{color:var(--amber)}
.ui-mode-status.is-record b{color:var(--amber);font-family:var(--font-pixel);font-size:10px}

/* Arte de fundo própria de cada modo */
.gtc-panel.is-home .gtc-home-mode.is-infinite::after{
  content:"∞";
  inset:auto -6px -34px auto;
  display:grid;
  place-items:center;
  width:auto;
  height:auto;
  background:none;
  color:color-mix(in srgb,var(--mode-color) 32%,transparent);
  font:700 150px/1 var(--font-display);
  text-shadow:0 0 40px color-mix(in srgb,var(--mode-color) 50%,transparent);
  opacity:1;
  animation:ui-float 7s var(--ease-in-out) infinite alternate;
}
.gtc-panel.is-home .gtc-home-mode.is-duel::after{
  content:"VS";
  inset:auto 14px 10px auto;
  display:grid;
  place-items:center;
  width:auto;
  height:auto;
  background:none;
  color:color-mix(in srgb,var(--mode-color) 30%,transparent);
  font:46px/1 var(--font-pixel);
  text-shadow:4px 4px 0 rgba(0,0,0,.35),0 0 30px color-mix(in srgb,var(--mode-color) 45%,transparent);
  transform:rotate(-8deg);
  opacity:1;
}

/* Modo Musical em manutenção: apagado, com faixa de obra */
.gtc-panel.is-home .gtc-home-modes .gtc-home-mode.is-maintenance{
  --mode-color:#8a8fa3;
  cursor:not-allowed;
  border-style:dashed;
  border-color:rgba(255,214,10,.28);
  background:linear-gradient(165deg,rgba(24,20,32,.82),rgba(12,10,18,.9));
  filter:saturate(.25);
}
.gtc-home-mode.is-maintenance > *:not(.gtc-new-mode-badge){opacity:.55}
.gtc-panel.is-home .gtc-home-modes .gtc-home-mode.is-maintenance{padding-bottom:48px}
.gtc-panel.is-home .gtc-home-mode.is-maintenance::after{
  content:"";
  inset:auto -40px 12px -40px;
  width:auto;
  height:16px;
  border-radius:0;
  background:repeating-linear-gradient(135deg,#ffd60a 0 14px,#16120a 14px 28px);
  box-shadow:0 4px 14px rgba(0,0,0,.45);
  transform:rotate(-2.5deg);
  opacity:.6;
}
.gtc-home-mode.is-maintenance .gtc-new-mode-badge{
  background:#ffd60a;
  color:#1a1200;
  box-shadow:0 8px 20px -6px rgba(255,214,10,.7);
  filter:saturate(4);
}
.gtc-home-mode.is-maintenance > b,
.gtc-home-modes .gtc-home-mode.is-maintenance > b{
  border-color:rgba(255,255,255,.14);
  background:rgba(255,255,255,.04);
  color:var(--muted);
}
.gtc-home-mode.is-maintenance:hover,
.gtc-panel.is-home .gtc-home-mode.is-maintenance:hover{transform:none;box-shadow:none}
.gtc-home-mode.is-maintenance:hover::before{opacity:0}
.gtc-home-mode.is-maintenance:hover .gtc-home-mode-icon{transform:none}

/* Tela do Modo Musical em manutenção (link direto) */
.gtc-maintenance{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:12px;
  max-width:520px;
  margin:20px auto;
  padding:clamp(24px,4vw,40px);
  text-align:center;
}
.gtc-maintenance-icon{
  display:grid;
  place-items:center;
  width:72px;
  height:72px;
  border-radius:22px;
  background:repeating-linear-gradient(135deg,rgba(255,214,10,.22) 0 10px,rgba(255,214,10,.08) 10px 20px);
  border:1px solid rgba(255,214,10,.45);
  font-size:34px;
}
.gtc-maintenance small{color:var(--amber);font:10px/1 var(--font-pixel);letter-spacing:.06em}
.gtc-maintenance h1{margin:0;color:#fff;font:700 clamp(26px,3vw,36px)/1.1 var(--font-display);letter-spacing:-.02em}
.gtc-maintenance p{margin:0 0 8px;color:var(--muted);font:400 15px/1.55 var(--font-body)}
.gtc-maintenance-back{border:0;background:none;color:var(--muted);font:600 13px/1 var(--font-body);cursor:pointer;padding:8px}
.gtc-maintenance-back:hover{color:#fff}

@media (max-width:560px){
  .ui-mode-meta i{font-size:10.5px;padding:4px 8px}
  .gtc-panel.is-home .gtc-home-mode.is-infinite::after{font-size:110px}
  .gtc-panel.is-home .gtc-home-mode.is-duel::after{font-size:34px}
}
@media (prefers-reduced-motion:reduce){
  .ui-mode-status.is-live::first-letter,
  .gtc-panel.is-home .gtc-home-mode.is-infinite::after{animation:none}
}

/* ==========================================================================
   Medalhas dos troféus em pixel art (trophy-icons.js) — v2.4
   ========================================================================== */
.gtc-trophy-svg{
  display:block;
  width:1.6em;
  height:1.6em;
  overflow:visible;
  filter:drop-shadow(0 3px 4px rgba(0,0,0,.55));
}
/* O ícone ocupa todo o espaço onde antes ficava o emoji */
.gtc-achievement-icon{
  width:58px;
  height:58px;
  border:0;
  border-radius:0;
  background:none;
  box-shadow:none;
  font-size:inherit;
}
.gtc-achievement-icon .gtc-trophy-svg{width:100%;height:100%}
.gtc-achievement-card{grid-template-columns:58px minmax(0,1fr) 18px;gap:12px;min-height:90px}

/* Brilho na cor da raridade para troféus conquistados */
.gtc-achievement-card.unlocked .gtc-trophy-svg,
.gtc-achievement-celebration-icons .gtc-trophy-svg,
.gtc-unlock-list .gtc-trophy-svg,
.gtc-public-trophy .gtc-trophy-svg,
.gtc-shelf-choices .gtc-trophy-svg{
  filter:drop-shadow(0 3px 4px rgba(0,0,0,.55)) drop-shadow(0 0 8px color-mix(in srgb,var(--rarity,#cd7f32) 55%,transparent));
}
.gtc-trophy-svg.tier-legendary,
.gtc-trophy-svg.tier-platinum{animation:ui-trophy-glow 2.6s var(--ease-in-out) infinite}
@keyframes ui-trophy-glow{
  50%{filter:drop-shadow(0 3px 4px rgba(0,0,0,.55)) drop-shadow(0 0 14px rgba(255,236,150,.75))}
}
.gtc-trophy-svg.tier-platinum{animation-name:ui-trophy-glow-plat}
@keyframes ui-trophy-glow-plat{
  50%{filter:drop-shadow(0 3px 4px rgba(0,0,0,.55)) drop-shadow(0 0 14px rgba(190,240,255,.85))}
}

/* Troféu ainda não conquistado: medalha apagada */
.gtc-achievement-card.locked .gtc-trophy-svg{filter:grayscale(1) brightness(.7);animation:none}

/* Reflexo que atravessa a medalha ao passar o mouse */
.gtc-trophy-shine{transition:opacity 300ms ease}
@media (hover:hover) and (pointer:fine){
  .gtc-achievement-card.unlocked:hover .gtc-trophy-svg{animation:ui-trophy-pop 520ms cubic-bezier(.34,1.56,.64,1)}
  .gtc-achievement-card.unlocked:hover .gtc-trophy-shine{opacity:.45}
}
@keyframes ui-trophy-pop{
  0%{transform:scale(1) rotate(0)}
  40%{transform:scale(1.12) rotate(-6deg)}
  100%{transform:scale(1) rotate(0)}
}

/* Tamanhos nos outros lugares onde o troféu aparece */
.gtc-achievement-celebration-icons .gtc-trophy-svg{width:64px;height:64px}
.gtc-achievement-celebration-icons{display:flex;justify-content:center;gap:6px;flex-wrap:wrap}
.gtc-unlock-list article > span .gtc-trophy-svg{width:42px;height:42px}
.gtc-public-trophy > span .gtc-trophy-svg{width:36px;height:36px}
.gtc-trophy-shelf .gtc-public-trophy > span .gtc-trophy-svg{width:48px;height:48px}
.gtc-shelf-choices .gtc-trophy-svg{width:34px;height:34px}

@media (prefers-reduced-motion:reduce){
  .gtc-trophy-svg.tier-legendary,.gtc-trophy-svg.tier-platinum,
  .gtc-achievement-card.unlocked:hover .gtc-trophy-svg{animation:none}
}

/* ==========================================================================
   Temas que pintam o cenário inteiro — v2.5
   Variáveis definidas pelo applyPlayerTheme (xp-system.js)
   ========================================================================== */
:root{
  --accent-2:#FF3D8B;
  --accent-2-rgb:255,61,139;
  --sun-1:#FFF3A3;
  --sun-2:#FF8A3D;
  --sun-3:#FF3D8B;
  --sky-mid:#1A0B2A;
}
/* O céu fica numa camada fixa própria em vez de background-attachment:fixed,
   que no celular obriga a repintar a página inteira a cada quadro de rolagem. */
.gtc-body{background:#05030a}
.gtc-body::after{
  display:block;
  content:"";
  position:fixed;
  inset:0 0 auto;
  height:100vh;
  height:100lvh;
  z-index:-1;
  pointer-events:none;
  transform:none;
  -webkit-mask-image:none;
  mask-image:none;
  opacity:1;
  background:linear-gradient(180deg,#05030a 0%,color-mix(in srgb,var(--sky-mid) 55%,#05030a) 40%,var(--sky-mid) 64%,#07040c 100%);
}
.ui-sun{
  background:linear-gradient(180deg,var(--sun-1) 0%,color-mix(in srgb,var(--sun-1) 50%,var(--sun-2)) 22%,var(--sun-2) 46%,var(--sun-3) 70%,rgba(var(--accent-rgb),1) 100%);
  filter:drop-shadow(0 0 80px color-mix(in srgb,var(--sun-3) 65%,transparent));
}
.ui-sun::after{background:radial-gradient(circle,color-mix(in srgb,var(--sun-3) 35%,transparent),transparent 60%)}
.ui-horizon{
  background:linear-gradient(90deg,transparent,rgba(var(--accent-rgb),1) 20%,var(--accent-2) 50%,rgba(var(--accent-rgb),1) 80%,transparent);
  box-shadow:0 0 18px 2px rgba(var(--accent-2-rgb),.6),0 0 60px 6px rgba(var(--accent-rgb),.45);
}
.ui-mountains-front{stroke:rgba(var(--accent-2-rgb),.5)}
.ui-marquee{background:linear-gradient(90deg,rgba(var(--accent-rgb),.18),rgba(var(--accent-2-rgb),.14),rgba(var(--accent-rgb),.18))}
.gtc-body::before{
  background:
    radial-gradient(38vmax 30vmax at 18% 12%,rgba(var(--accent-rgb),.26),transparent 70%),
    radial-gradient(34vmax 28vmax at 86% 18%,rgba(var(--accent-2-rgb),.12),transparent 70%),
    radial-gradient(40vmax 30vmax at 70% 92%,color-mix(in srgb,var(--sun-2) 10%,transparent),transparent 70%);
}

/* Game Boy: tudo em verde monocromático, como a tela do portátil */
:root[data-theme="gameboy"]{--text:#e0f8d0;--muted:#8bac0f;--muted-2:#4d7a2a;--amber:#c4e86b}
:root[data-theme="gameboy"] .ui-mountains-back{fill:#0f2a0c}
:root[data-theme="gameboy"] .ui-mountains-front{fill:#081a06}
:root[data-theme="gameboy"] .ui-particles,
:root[data-theme="gameboy"] .ui-arcade{filter:sepia(1) hue-rotate(40deg) saturate(2.2)}
:root[data-theme="gameboy"] .ui-fan-card img,
:root[data-theme="gameboy"] .gtc-cover-img{filter:sepia(.6) hue-rotate(40deg) saturate(1.4)}
:root[data-theme="gameboy"] html::after,
:root[data-theme="gameboy"]::after{opacity:.1}

/* Vaporwave: céu em degradê rosa/ciano */
:root[data-theme="vapor"] .ui-floor{background:linear-gradient(180deg,rgba(1,205,254,.25),#0b0420 75%)}
:root[data-theme="vapor"] .ui-floor-grid{
  background:
    linear-gradient(rgba(1,205,254,.8) 2px,transparent 2px) 0 0/100% 64px,
    linear-gradient(90deg,rgba(255,113,206,.7) 2px,transparent 2px) 50% 0/64px 100%;
}

/* Prévia dos temas: mini cenário com o sol e a grade de cada tema */
.gtc-theme-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.gtc-theme-option{
  padding:8px 8px 10px;
  border:1px solid var(--hairline-strong);
  border-radius:16px;
  background:rgba(255,255,255,.025);
  transition:transform 180ms var(--ease-out),border-color 180ms ease,box-shadow 220ms ease;
}
.gtc-theme-option:not(:disabled):active{transform:scale(.97)}
@media (hover:hover) and (pointer:fine){
  .gtc-theme-option:not(:disabled):hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--swatch) 60%,transparent)}
}
.gtc-theme-option.is-selected{border-color:var(--swatch);box-shadow:0 0 0 1px var(--swatch),0 12px 28px -12px var(--swatch)}
.gtc-theme-option strong{margin-top:10px;padding:0 4px;font:700 14px/1.2 var(--font-display)}
.gtc-theme-option small{margin-top:4px;padding:0 4px;font:600 11.5px/1.2 var(--font-body)}
.gtc-theme-preview{
  position:relative;
  display:block;
  height:74px;
  overflow:hidden;
  border-radius:11px;
  background:linear-gradient(180deg,#05030a,var(--p-sky) 62%,#05030a 62%);
}
.gtc-theme-preview .is-sun{
  position:absolute;
  left:50%;
  top:62%;
  width:52px;
  height:52px;
  border-radius:50%;
  transform:translate(-50%,-62%);
  background:linear-gradient(180deg,var(--p-sun-1),var(--p-sun-2) 50%,var(--p-sun-3));
  -webkit-mask-image:linear-gradient(180deg,#000 0 50%,transparent 50% 56%,#000 56% 66%,transparent 66% 74%,#000 74% 82%,transparent 82%);
  mask-image:linear-gradient(180deg,#000 0 50%,transparent 50% 56%,#000 56% 66%,transparent 66% 74%,#000 74% 82%,transparent 82%);
  box-shadow:0 0 30px color-mix(in srgb,var(--p-sun-3) 60%,transparent);
}
.gtc-theme-preview .is-grid{
  position:absolute;
  left:-50%;
  right:-50%;
  top:62%;
  bottom:-40%;
  transform:perspective(60px) rotateX(55deg);
  transform-origin:50% 0;
  background:
    linear-gradient(var(--swatch) 1px,transparent 1px) 0 0/100% 9px,
    linear-gradient(90deg,var(--swatch) 1px,transparent 1px) 50% 0/12px 100%;
  opacity:.75;
}
.gtc-theme-preview .is-line{
  position:absolute;
  left:0;
  right:0;
  top:62%;
  height:2px;
  background:linear-gradient(90deg,transparent,var(--swatch),var(--swatch-2),var(--swatch),transparent);
  box-shadow:0 0 8px var(--swatch-2);
}
.gtc-theme-option:disabled .gtc-theme-preview{filter:grayscale(.85) brightness(.7)}
@media (max-width:560px){.gtc-theme-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ==========================================================================
   Molduras da foto — v2.5
   Cada moldura é um anel (::before) com detalhes opcionais (::after).
   ========================================================================== */
@property --fr-glow{syntax:'<color>';inherits:true;initial-value:transparent}

.gtc-profile-avatar{--ring:7px;--r:24px;--deco:22px;border-radius:24px}
.gtc-profile-avatar > img{border-radius:20px}
.gtc-rank-avatar{--ring:3px;--r:6px;--deco:10px}
.gtc-frame-picker i[data-frame]{
  --ring:3px;
  --r:7px;
  --deco:9px;
  width:30px;
  height:30px;
  flex:0 0 30px;
  border:0;
  border-image:none;
  border-radius:7px;
  background:linear-gradient(145deg,#2a2140,#120d20);
  outline:0;
  animation:none;
}

:where(.gtc-profile-avatar,.gtc-rank-avatar,.gtc-frame-picker i)[data-frame]:not([data-frame=""]){
  position:relative;
  isolation:isolate;
  overflow:visible;
  outline:0;
  animation:none;
  --frame-color:var(--fr-glow);
  box-shadow:0 7px 20px rgba(0,0,0,.5),0 0 calc(var(--ring) * 3) var(--fr-glow);
}
.gtc-frame-picker i[data-frame]:not([data-frame=""]){box-shadow:0 0 10px var(--fr-glow)}
:where(.gtc-profile-avatar,.gtc-rank-avatar,.gtc-frame-picker i)[data-frame]:not([data-frame=""])::before{
  content:"";
  position:absolute;
  z-index:-1;
  inset:calc(var(--ring) * -1);
  padding:var(--ring);
  border-radius:calc(var(--r) + var(--ring));
  background:var(--fr,#777);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);
  pointer-events:none;
}
:where(.gtc-profile-avatar,.gtc-rank-avatar,.gtc-frame-picker i)[data-frame]::after{content:none}
:where(.gtc-profile-avatar,.gtc-rank-avatar,.gtc-frame-picker i)[data-frame]:not([data-frame=""])::after{
  position:absolute;
  z-index:3;
  pointer-events:none;
}

/* Estáticas */
:is(.gtc-profile-avatar,.gtc-rank-avatar,.gtc-frame-picker i)[data-frame="pride"]{--fr:linear-gradient(135deg,#e40303 0 16.6%,#ff8c00 16.6% 33.2%,#ffed00 33.2% 49.8%,#008026 49.8% 66.4%,#24408e 66.4% 83%,#732982 83%);--fr-glow:rgba(255,140,0,.25)}
:is(.gtc-profile-avatar,.gtc-rank-avatar,.gtc-frame-picker i)[data-frame="cyan"]{--fr:linear-gradient(180deg,#e0fdff,#22d3ee 35%,#0e7490 70%,#67e8f9);--fr-glow:rgba(34,211,238,.6)}
:is(.gtc-profile-avatar,.gtc-rank-avatar,.gtc-frame-picker i)[data-frame="green"]{--fr:conic-gradient(from 45deg,#064e3b,#34d399,#d1fae5,#059669,#064e3b,#34d399,#d1fae5,#059669,#064e3b);--fr-glow:rgba(52,211,153,.45)}
:is(.gtc-profile-avatar,.gtc-rank-avatar,.gtc-frame-picker i)[data-frame="red"]{--fr:conic-gradient(from 45deg,#4c0519,#fb7185,#ffe4e6,#be123c,#4c0519,#fb7185,#ffe4e6,#be123c,#4c0519);--fr-glow:rgba(251,113,133,.45)}
/* Pedras facetadas: brilhos nos quatro cantos */
:is(.gtc-profile-avatar,.gtc-rank-avatar,.gtc-frame-picker i):is([data-frame="green"],[data-frame="red"])::after{
  content:"";
  inset:calc(var(--ring) * -1.6);
  background:
    radial-gradient(circle,#fff 0 18%,transparent 22%) left top/calc(var(--deco) * .9) calc(var(--deco) * .9) no-repeat,
    radial-gradient(circle,#fff 0 18%,transparent 22%) right top/calc(var(--deco) * .9) calc(var(--deco) * .9) no-repeat,
    radial-gradient(circle,#fff 0 18%,transparent 22%) left bottom/calc(var(--deco) * .9) calc(var(--deco) * .9) no-repeat,
    radial-gradient(circle,#fff 0 18%,transparent 22%) right bottom/calc(var(--deco) * .9) calc(var(--deco) * .9) no-repeat;
  filter:drop-shadow(0 0 3px #fff);
}
:is(.gtc-profile-avatar,.gtc-rank-avatar,.gtc-frame-picker i)[data-frame="pixel"]{--fr:var(--cyan);--fr-glow:rgba(var(--accent-rgb),.45)}
:is(.gtc-profile-avatar,.gtc-rank-avatar,.gtc-frame-picker i)[data-frame="pixel"]::before{
  border-radius:0;
  background:repeating-linear-gradient(90deg,var(--cyan) 0 calc(var(--ring) * 2),color-mix(in srgb,var(--cyan) 70%,#fff) calc(var(--ring) * 2) calc(var(--ring) * 4));
  clip-path:polygon(var(--ring) 0,calc(100% - var(--ring)) 0,calc(100% - var(--ring)) var(--ring),100% var(--ring),100% calc(100% - var(--ring)),calc(100% - var(--ring)) calc(100% - var(--ring)),calc(100% - var(--ring)) 100%,var(--ring) 100%,var(--ring) calc(100% - var(--ring)),0 calc(100% - var(--ring)),0 var(--ring),var(--ring) var(--ring));
}
:is(.gtc-profile-avatar,.gtc-rank-avatar,.gtc-frame-picker i)[data-frame="pink"]{--fr:linear-gradient(135deg,#fdf2f8,#f9a8d4 30%,#f472d0 55%,#c084fc);--fr-glow:rgba(244,114,208,.45)}
:is(.gtc-profile-avatar,.gtc-rank-avatar,.gtc-frame-picker i)[data-frame="pink"]::after{
  content:"♥";
  right:calc(var(--deco) * -.45);
  bottom:calc(var(--deco) * -.5);
  color:#ff4fa8;
  font:700 calc(var(--deco) * 1.3)/1 var(--font-body);
  text-shadow:0 0 0 #fff,0 2px 0 #9d174d,0 0 10px rgba(255,79,168,.8);
  transform:rotate(12deg);
}

:is(.gtc-profile-avatar,.gtc-rank-avatar,.gtc-frame-picker i)[data-frame="cat"]::after{
  content:"";
  left:2%;
  right:2%;
  top:calc(var(--deco) * -1.15);
  height:calc(var(--deco) * 1.3);
  background:
    linear-gradient(var(--cyan),var(--cyan));
  clip-path:polygon(0 100%,14% 0,38% 100%,62% 100%,86% 0,100% 100%);
  filter:drop-shadow(0 -1px 0 color-mix(in srgb,var(--cyan) 50%,#fff));
}
:is(.gtc-profile-avatar,.gtc-rank-avatar,.gtc-frame-picker i)[data-frame="gold"]{--fr:linear-gradient(135deg,#fff7c2,#f5c518 22%,#8a5a00 45%,#fde68a 62%,#b45309 82%,#fde68a);--fr-glow:rgba(250,204,21,.5)}
:is(.gtc-profile-avatar,.gtc-rank-avatar,.gtc-frame-picker i)[data-frame="gold"]::after{
  content:"";
  inset:calc(var(--ring) * -2.2);
  --c:#fde68a;
  --l:calc(var(--deco) * .9);
  background:
    linear-gradient(var(--c),var(--c)) left top/var(--l) 3px,
    linear-gradient(var(--c),var(--c)) left top/3px var(--l),
    linear-gradient(var(--c),var(--c)) right top/var(--l) 3px,
    linear-gradient(var(--c),var(--c)) right top/3px var(--l),
    linear-gradient(var(--c),var(--c)) left bottom/var(--l) 3px,
    linear-gradient(var(--c),var(--c)) left bottom/3px var(--l),
    linear-gradient(var(--c),var(--c)) right bottom/var(--l) 3px,
    linear-gradient(var(--c),var(--c)) right bottom/3px var(--l);
  background-repeat:no-repeat;
  filter:drop-shadow(0 0 4px rgba(250,204,21,.8));
}
.gtc-rank-avatar[data-frame="gold"]::after,.gtc-frame-picker i[data-frame="gold"]::after{background-size:var(--l) 2px,2px var(--l),var(--l) 2px,2px var(--l),var(--l) 2px,2px var(--l),var(--l) 2px,2px var(--l)}

:is(.gtc-profile-avatar,.gtc-rank-avatar,.gtc-frame-picker i)[data-frame="retro"]::after{
  content:"";
  left:calc(var(--ring) * -0.6);
  top:calc(var(--ring) * -0.6);
  width:calc(var(--deco) * .45);
  height:calc(var(--deco) * .45);
  border-radius:50%;
  background:radial-gradient(circle at 35% 35%,#ffb4b4,#ff2a2a 55%,#7a0000);
  box-shadow:0 0 8px #ff2a2a,0 0 0 2px #6b6b78;
}

/* Animadas */
:is(.gtc-profile-avatar,.gtc-rank-avatar,.gtc-frame-picker i)[data-frame="pulse"]{--fr:linear-gradient(180deg,#e0fdff,#22d3ee);animation:ui-frame-breathe 1.6s var(--ease-in-out) infinite}
@keyframes ui-frame-breathe{0%,100%{--fr-glow:rgba(34,211,238,.25)}50%{--fr-glow:rgba(34,211,238,.95)}}
:is(.gtc-profile-avatar,.gtc-rank-avatar,.gtc-frame-picker i)[data-frame="rainbow"]{--fr-glow:rgba(255,183,3,.35)}
/* O degradê giratório fica no ::before: é nele que o ângulo é animado */
:is(.gtc-profile-avatar,.gtc-rank-avatar,.gtc-frame-picker i)[data-frame="rainbow"]::before{background:conic-gradient(from var(--ui-angle),#ff477e,#ffb703,#4ade80,#22d3ee,#a78bfa,#ff477e);animation:ui-spin 3s linear infinite}
:is(.gtc-profile-avatar,.gtc-rank-avatar,.gtc-frame-picker i)[data-frame="fire"]{--fr-glow:rgba(255,109,0,.6)}
:is(.gtc-profile-avatar,.gtc-rank-avatar,.gtc-frame-picker i)[data-frame="fire"]::before{background:conic-gradient(from var(--ui-angle),#ff3d00,#ffb300,#fff176,#ff6d00,#d50000,#ff3d00);animation:ui-spin 1.4s linear infinite}
:is(.gtc-profile-avatar,.gtc-rank-avatar,.gtc-frame-picker i)[data-frame="fire"]::after{
  content:"";
  left:-6%;
  right:-6%;
  top:calc(var(--deco) * -1.6);
  height:calc(var(--deco) * 1.9);
  background:linear-gradient(0deg,#d50000 0%,#ff3d00 25%,#ff9100 55%,#ffd740 80%,#fff8c4 100%);
  clip-path:polygon(0 100%,4% 55%,10% 75%,17% 20%,25% 70%,33% 35%,41% 72%,50% 0,58% 68%,66% 30%,74% 72%,82% 15%,89% 70%,95% 45%,100% 100%);
  transform-origin:50% 100%;
  animation:ui-flame .38s ease-in-out infinite alternate;
  filter:drop-shadow(0 0 6px rgba(255,109,0,.9));
}
/* As pontas das labaredas mudam de altura: o clip-path interpola entre as duas formas */
@keyframes ui-flame{
  from{clip-path:polygon(0 100%,4% 55%,10% 75%,17% 20%,25% 70%,33% 35%,41% 72%,50% 0,58% 68%,66% 30%,74% 72%,82% 15%,89% 70%,95% 45%,100% 100%);transform:scaleY(.92)}
  to{clip-path:polygon(0 100%,4% 40%,10% 70%,17% 35%,25% 60%,33% 10%,41% 66%,50% 22%,58% 62%,66% 8%,74% 66%,82% 32%,89% 62%,95% 30%,100% 100%);transform:scaleY(1.06)}
}
:is(.gtc-profile-avatar,.gtc-rank-avatar,.gtc-frame-picker i)[data-frame="pixel"]{border-radius:0}
:is(.gtc-profile-avatar,.gtc-rank-avatar,.gtc-frame-picker i)[data-frame="pixel"] > img{border-radius:0}
:is(.gtc-profile-avatar,.gtc-rank-avatar,.gtc-frame-picker i)[data-frame="crown"]{--fr:linear-gradient(135deg,#fff7c2,#f5c518 30%,#a16207 60%,#fde68a);--fr-glow:rgba(250,204,21,.55)}
:is(.gtc-profile-avatar,.gtc-rank-avatar,.gtc-frame-picker i)[data-frame="crown"]::after{
  content:"";
  left:22%;
  right:22%;
  top:calc(var(--deco) * -1.35);
  height:calc(var(--deco) * 1.3);
  background:
    radial-gradient(circle at 50% 62%,#ff2a6d 0 9%,transparent 11%),
    radial-gradient(circle at 18% 72%,#22d3ee 0 7%,transparent 9%),
    radial-gradient(circle at 82% 72%,#22d3ee 0 7%,transparent 9%),
    linear-gradient(180deg,#fff7c2,#f5c518 50%,#b45309);
  clip-path:polygon(0 100%,0 35%,22% 62%,50% 0,78% 62%,100% 35%,100% 100%);
  filter:drop-shadow(0 0 6px rgba(250,204,21,.9));
  animation:ui-crown-shine 2.4s var(--ease-in-out) infinite;
}
@keyframes ui-crown-shine{50%{filter:drop-shadow(0 0 12px rgba(255,247,194,1))}}
:is(.gtc-profile-avatar,.gtc-rank-avatar,.gtc-frame-picker i)[data-frame="galaxy"]{--fr-glow:rgba(168,85,247,.55)}
:is(.gtc-profile-avatar,.gtc-rank-avatar,.gtc-frame-picker i)[data-frame="galaxy"]::before{background:conic-gradient(from var(--ui-angle),#1e1b4b,#7c3aed,#ec4899,#22d3ee,#1e1b4b,#a855f7,#1e1b4b);animation:ui-spin 6s linear infinite}
:is(.gtc-profile-avatar,.gtc-rank-avatar,.gtc-frame-picker i)[data-frame="galaxy"]::after{
  content:"";
  inset:calc(var(--ring) * -2);
  background:
    radial-gradient(circle,#fff 0 1.2px,transparent 2px) 10% 20%/30% 30% no-repeat,
    radial-gradient(circle,#fff 0 1px,transparent 1.8px) 88% 12%/30% 30% no-repeat,
    radial-gradient(circle,#fff 0 1.4px,transparent 2.2px) 94% 82%/30% 30% no-repeat,
    radial-gradient(circle,#fff 0 1px,transparent 1.8px) 6% 90%/30% 30% no-repeat;
  animation:ui-twinkle 1.8s ease-in-out infinite alternate;
}
@keyframes ui-twinkle{from{opacity:.3}to{opacity:1}}
:is(.gtc-profile-avatar,.gtc-rank-avatar,.gtc-frame-picker i)[data-frame="holo"]{--fr-glow:rgba(240,171,252,.45)}
:is(.gtc-profile-avatar,.gtc-rank-avatar,.gtc-frame-picker i)[data-frame="holo"]::before{background:conic-gradient(from var(--ui-angle),#a5f3fc,#f0abfc,#fde68a,#bbf7d0,#c4b5fd,#a5f3fc);animation:ui-spin 4s linear infinite}
:is(.gtc-profile-avatar,.gtc-rank-avatar,.gtc-frame-picker i)[data-frame="holo"]::after{
  content:"";
  inset:0;
  border-radius:var(--r);
  background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.45) 45%,rgba(240,171,252,.35) 52%,transparent 66%) -150% 0/250% 100% no-repeat;
  mix-blend-mode:overlay;
  animation:ui-holo-sweep 3.2s var(--ease-in-out) infinite;
}
@keyframes ui-holo-sweep{0%,30%{background-position:-150% 0}100%{background-position:250% 0}}
:is(.gtc-profile-avatar,.gtc-rank-avatar,.gtc-frame-picker i)[data-frame="electric"]{--fr-glow:rgba(0,229,255,.7)}
:is(.gtc-profile-avatar,.gtc-rank-avatar,.gtc-frame-picker i)[data-frame="electric"]::before{background:repeating-conic-gradient(from var(--ui-angle),#79f7ff 0 12deg,#0ea5e9 12deg 22deg,#fff 22deg 26deg,#0369a1 26deg 40deg);animation:ui-spin 1.2s steps(10) infinite,ui-zap .3s steps(2,end) infinite}
@keyframes ui-zap{50%{opacity:.55}}

/* Seletor de molduras mais organizado */
.gtc-frame-picker{gap:8px}
.gtc-frame-picker button{
  min-height:52px;
  padding:6px 10px 6px 6px;
  border:1px solid var(--hairline-strong);
  border-radius:12px;
  background:rgba(255,255,255,.025);
  transition:border-color 160ms ease,background-color 160ms ease,transform 160ms var(--ease-out);
}
.gtc-frame-picker button:not(:disabled):active{transform:scale(.97)}
.gtc-frame-picker button[aria-pressed="true"]{border-color:var(--cyan);background:rgba(var(--accent-rgb),.14)}
.gtc-frame-picker button span{font:600 12.5px/1.25 var(--font-body)}
.gtc-frame-picker button small{display:block;margin-top:2px;color:var(--muted);font:500 10.5px/1.2 var(--font-body)}
.gtc-frame-picker button:disabled i{filter:grayscale(.85) brightness(.75)}

@media (prefers-reduced-motion:reduce){
  :is(.gtc-profile-avatar,.gtc-rank-avatar,.gtc-frame-picker i)[data-frame]::before,
  :is(.gtc-profile-avatar,.gtc-rank-avatar,.gtc-frame-picker i)[data-frame]::after,
  :is(.gtc-profile-avatar,.gtc-rank-avatar,.gtc-frame-picker i)[data-frame]{animation:none}
}

/* ==========================================================================
   Sala de troféus: o quadro não muda de tamanho ao filtrar
   ========================================================================== */
.gtc-achievement-grid{align-content:start}
.gtc-achievement-card.ui-filter-in{animation:ui-filter-in 220ms var(--ease-out) both;animation-delay:calc(var(--i, 0) * 14ms)}
@keyframes ui-filter-in{from{opacity:0;transform:translateY(6px) scale(.98)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.gtc-achievement-card.ui-filter-in{animation:ui-fade 150ms ease both}}

/* ==========================================================================
   Molduras temáticas de jogo (SVG animado em img/frames) — v2.6
   A imagem cobre a foto + 30% de margem em cada lado (viewBox 160, foto em 30..130).
   ========================================================================== */
:is(.gtc-profile-avatar,.gtc-rank-avatar,.gtc-frame-picker i):is([data-frame="cat"],[data-frame="retro"],[data-frame="pacman"],[data-frame="tetris"],[data-frame="hearts"],[data-frame="invaders"])::after{
  content:"";
  inset:-30%;
  left:-30%;
  right:-30%;
  top:-30%;
  width:auto;
  height:auto;
  border-radius:0;
  box-shadow:none;
  clip-path:none;
  filter:none;
  animation:none;
  background:var(--frame-art) center/100% 100% no-repeat;
}
:is(.gtc-profile-avatar,.gtc-rank-avatar,.gtc-frame-picker i)[data-frame="cat"]{--fr:linear-gradient(180deg,#fff,#fbcfe8);--fr-glow:rgba(249,168,212,.45);--frame-art:url("img/frames/cat.svg")}
:is(.gtc-profile-avatar,.gtc-rank-avatar,.gtc-frame-picker i)[data-frame="retro"]{--fr:transparent;--fr-glow:rgba(0,0,0,0);--frame-art:url("img/frames/retro.svg")}
:is(.gtc-profile-avatar,.gtc-rank-avatar,.gtc-frame-picker i)[data-frame="pacman"]{--fr:transparent;--fr-glow:rgba(59,91,255,.55);--frame-art:url("img/frames/pacman.svg")}
:is(.gtc-profile-avatar,.gtc-rank-avatar,.gtc-frame-picker i)[data-frame="tetris"]{--fr:transparent;--fr-glow:rgba(34,211,238,.35);--frame-art:url("img/frames/tetris.svg")}
:is(.gtc-profile-avatar,.gtc-rank-avatar,.gtc-frame-picker i)[data-frame="hearts"]{--fr:linear-gradient(180deg,#ff8fa3,#ff2a4a 50%,#9f1239);--fr-glow:rgba(255,42,74,.5);--frame-art:url("img/frames/hearts.svg")}
:is(.gtc-profile-avatar,.gtc-rank-avatar,.gtc-frame-picker i)[data-frame="invaders"]{--fr:linear-gradient(180deg,#b6ff9e,#39ff14);--fr-glow:rgba(57,255,20,.45);--frame-art:url("img/frames/invaders.svg")}
:is(.gtc-profile-avatar,.gtc-rank-avatar,.gtc-frame-picker i)[data-frame="pacman"]::after{filter:drop-shadow(0 0 3px rgba(59,91,255,.9))}
/* Espaço extra no seletor para os detalhes que saem da foto */
.gtc-frame-picker i[data-frame]{margin:10px 12px 10px 10px}

/* ==========================================================================
   Identidade de cada tela (calendário, ranking, troféus) — v2.7
   ========================================================================== */

.gtc-body[data-view="archive"]{--view-accent:#22d3ee;--view-accent-rgb:34,211,238}
.gtc-body[data-view="ranking"]{--view-accent:#facc15;--view-accent-rgb:250,204,21}
.gtc-body[data-view="trophies"]{--view-accent:#f59e0b;--view-accent-rgb:245,158,11}

/* Faixa de luz no topo do painel na cor da tela */
.gtc-body[data-view] .gtc-panel:not(.is-home){
  box-shadow:inset 0 2px 0 rgba(var(--view-accent-rgb),.85),0 30px 60px -30px rgba(0,0,0,.8),0 -10px 50px -30px rgba(var(--view-accent-rgb),.6);
}

.gtc-body[data-view="ranking"] .gtc-panel{
  background:
    radial-gradient(70% 45% at 50% -8%,rgba(250,204,21,.2),transparent 65%),
    repeating-conic-gradient(from 180deg at 50% -10%,rgba(250,204,21,.05) 0 6deg,transparent 6deg 14deg),
    linear-gradient(180deg,rgba(30,22,12,.94),rgba(12,9,18,.95));
}

.gtc-body[data-view] .gtc-panel:not(.is-home)::before{--c:rgba(var(--view-accent-rgb),.85)}

/* Brasão grande no canto do painel */
/* O recorte fica só no brasão: o painel não pode cortar a lista de sugestões */
.ui-panel-watermark{
  position:absolute;
  inset:0;
  z-index:0;
  overflow:hidden;
  border-radius:inherit;
  pointer-events:none;
}
.ui-panel-watermark .gtc-trophy-svg{
  position:absolute;
  right:-30px;
  bottom:-40px;
  width:280px;
  height:280px;
  opacity:.07;
  transform:rotate(-12deg);
  filter:none;
  animation:none;
}
.gtc-panel > :not(.ui-panel-watermark){position:relative;z-index:1}

/* Títulos de seção com selo colorido */
.gtc-section-title{display:flex;align-items:center;gap:12px}
.gtc-section-title::before{
  content:"";
  flex:none;
  width:10px;
  height:26px;
  border-radius:4px;
  background:linear-gradient(180deg,var(--view-accent),rgba(var(--view-accent-rgb),.35));
  box-shadow:0 0 14px rgba(var(--view-accent-rgb),.7);
}

/* ---------------------------- Calendário ---------------------------- */
.gtc-calendar-heading{padding-bottom:14px;border-bottom:1px solid rgba(34,211,238,.18)}

.gtc-month-recap{
  position:relative;
  overflow:hidden;
  border:1px solid rgba(34,211,238,.3);
}
.gtc-month-recap::after{
  content:"";
  position:absolute;
  inset:0 0 auto;
  height:2px;
}

.gtc-month-recap-stat{
  position:relative;
  overflow:hidden;
  padding:14px 8px 12px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:14px;
  background:rgba(6,6,16,.55);
}
.gtc-month-recap-stat::before{content:"";position:absolute;inset:0 0 auto;height:3px;background:var(--stat,#22d3ee);box-shadow:0 0 10px var(--stat,#22d3ee)}
.gtc-month-recap-stat.is-cyan{--stat:#22d3ee}.gtc-month-recap-stat.is-green{--stat:#39d98a}.gtc-month-recap-stat.is-purple{--stat:#b965ff}
.gtc-month-recap-stat.is-amber{--stat:#ff9e00}.gtc-month-recap-stat.is-orange{--stat:#ff6b35}.gtc-month-recap-stat.is-yellow{--stat:#ffd60a}
.gtc-month-recap-stat strong{font:700 24px/1 var(--font-display);color:#fff}

.gtc-calendar-grid{grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:14px}
.gtc-calendar-card,
.gtc-calendar-card.won,
.gtc-calendar-card.lost{
  position:relative;
  overflow:hidden;
  justify-content:flex-start;
  gap:8px;
  min-height:0;
  padding:8px 8px 10px;
  border:1px solid rgba(255,255,255,.09)!important;
  border-radius:16px;
  background:linear-gradient(170deg,rgba(26,22,44,.95),rgba(12,10,22,.95))!important;
  box-shadow:0 10px 24px -14px rgba(0,0,0,.9);
}
.gtc-calendar-card::before{content:"";position:absolute;inset:0 0 auto;height:3px;background:var(--cal,rgba(255,255,255,.12))}
.gtc-calendar-card.won{--cal:#39d98a;border-color:rgba(57,217,138,.45)!important;box-shadow:0 10px 26px -14px rgba(57,217,138,.7)!important}
.gtc-calendar-card.lost{--cal:#ff526f;border-color:rgba(255,82,111,.4)!important;box-shadow:0 10px 26px -14px rgba(255,82,111,.6)!important}
.gtc-calendar-card.pending{--cal:#ffd60a}
.gtc-calendar-card.locked{--cal:transparent;border-style:dashed!important;background:repeating-linear-gradient(135deg,rgba(255,255,255,.02) 0 8px,transparent 8px 16px),rgba(12,10,20,.7)!important;opacity:.6}
.gtc-calendar-card.won:hover,.gtc-calendar-card.lost:hover{background:linear-gradient(170deg,rgba(30,26,50,.95),rgba(14,12,26,.95))!important}
.gtc-cal-date{
  align-self:flex-start;
  margin:0;
  padding:4px 8px;
  border-radius:999px;
  background:rgba(255,255,255,.06);
  color:var(--text);
  font:700 11px/1 var(--font-body);
  letter-spacing:.04em;
}
.gtc-cal-thumb,.gtc-cal-thumb-locked{
  position:relative;
  height:auto!important;
  aspect-ratio:4/5;
  margin:0;
  border:0;
  border-radius:11px;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);
}
.gtc-cal-thumb::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(0,0,0,.55));pointer-events:none}
.gtc-calendar-card.won .gtc-cal-thumb,.gtc-calendar-card.lost .gtc-cal-thumb{border:0;box-shadow:inset 0 0 0 1px rgba(255,255,255,.1)}
.gtc-cal-thumb-locked{display:grid;place-items:center;border:1px dashed rgba(255,255,255,.14);background:rgba(255,255,255,.02);font-size:26px}
.gtc-cal-status{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:5px;
  margin:0;
  padding:6px 8px;
  border-radius:9px;
  font:700 11px/1 var(--font-body);
  letter-spacing:.03em;
}
.gtc-cal-status.won{background:rgba(57,217,138,.16);color:#6ee7b7;box-shadow:inset 0 0 0 1px rgba(57,217,138,.45)}
.gtc-cal-status.lost{background:rgba(255,82,111,.14);color:#ff8fa3;box-shadow:inset 0 0 0 1px rgba(255,82,111,.4)}
.gtc-cal-status.pending{background:rgba(255,214,10,.1);color:var(--amber);box-shadow:inset 0 0 0 1px rgba(255,214,10,.3)}
.gtc-cal-status.pending::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--amber);box-shadow:0 0 8px var(--amber);animation:ui-blink 1.4s steps(2,end) infinite}
/* Dia de hoje em destaque */

.gtc-calendar-card.is-today::after{
  content:"HOJE";
  position:absolute;
  top:10px;
  right:10px;
  padding:4px 7px;
  border-radius:6px;
  font:8px/1 var(--font-pixel);
}
:root[lang="en"] .gtc-calendar-card.is-today::after{content:"TODAY"}

/* ----------------------------- Ranking ------------------------------ */
.gtc-ranking-tabs{border-color:rgba(250,204,21,.22);background:rgba(250,204,21,.04)}
.gtc-body[data-view="ranking"] .gtc-ranking-tabs button.is-active{border-color:rgba(250,204,21,.7);background:rgba(250,204,21,.16);color:#fde68a;box-shadow:0 0 16px rgba(250,204,21,.2)}
.gtc-ranking-header{padding-bottom:12px;border-bottom:1px solid rgba(250,204,21,.18)}
.gtc-ranking-header>span{border-color:rgba(250,204,21,.35);color:#fde68a;border-radius:999px;padding:6px 12px}
.gtc-rank-table-head,.gtc-inf-rank-head{color:var(--muted);font:700 10px/1 var(--font-body);letter-spacing:.1em}
.gtc-rank-row,.gtc-inf-rank-row{
  margin-bottom:6px;
  border:1px solid rgba(255,255,255,.06)!important;
  border-radius:14px;
  background:rgba(10,8,18,.5);
  transition:transform 200ms var(--ease-out),border-color 200ms ease,background-color 200ms ease;
}
@media (hover:hover) and (pointer:fine){
  .gtc-rank-row:hover,.gtc-inf-rank-row:hover{transform:translateX(4px);border-color:rgba(250,204,21,.35)!important}
}

/* Capa (GIF) e molduras animadas em camadas próprias: um GIF trocando de quadro
   não repinta o resto do card, e as molduras não repintam o GIF. */
.gtc-rank-row.has-cover::before,
.gtc-inf-rank-row::before,
.gtc-rank-avatar[data-frame]::before{will-change:transform}
.gtc-rank-avatar img{will-change:transform}
.gtc-rank-medal{width:28px;height:28px;font:800 13px/1 var(--font-display);box-shadow:inset 0 -3px 0 rgba(0,0,0,.25),0 0 12px rgba(0,0,0,.3)}
.gtc-rank-medal.medal-1{background:radial-gradient(circle at 35% 30%,#fff7c2,#facc15 55%,#a16207);box-shadow:0 0 14px rgba(250,204,21,.7),inset 0 -3px 0 rgba(0,0,0,.25)}
.gtc-rank-medal.medal-2{background:radial-gradient(circle at 35% 30%,#ffffff,#cbd5e1 55%,#64748b)}
.gtc-rank-medal.medal-3{background:radial-gradient(circle at 35% 30%,#ffe2c4,#d99559 55%,#7c3f12)}
.gtc-ranking-profile-cta{border:1px dashed rgba(250,204,21,.5);border-radius:16px;background:linear-gradient(135deg,rgba(250,204,21,.12),rgba(168,85,247,.06))}
.gtc-ranking-profile-cta strong{color:#fde68a;font:700 14px/1.2 var(--font-display)}

/* Lista vazia com cara de "ninguém jogou ainda" */
.gtc-body[data-view="ranking"] .gtc-empty{
  margin:10px 0;
  padding:34px 16px;
  border:1px dashed rgba(250,204,21,.3);
  border-radius:16px;
  background:rgba(250,204,21,.03);
  color:var(--muted);
  font:600 13px/1.4 var(--font-body);
}
.gtc-body[data-view="ranking"] .gtc-empty::before{content:"🏆";display:block;margin-bottom:8px;font-size:30px;filter:grayscale(.3)}

/* ----------------------------- Troféus ------------------------------ */
.gtc-achievement-hero{
  position:relative;
  overflow:hidden;
  border:1px solid rgba(245,158,11,.5);
  background:
    radial-gradient(60% 120% at 0% 0%,rgba(255,214,10,.22),transparent 60%),
    linear-gradient(135deg,rgba(60,38,8,.9),rgba(30,16,40,.92));
  box-shadow:0 20px 40px -24px rgba(245,158,11,.7),inset 0 1px rgba(255,255,255,.08);
}
.gtc-achievement-hero::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(110deg,transparent 40%,rgba(255,236,150,.12) 50%,transparent 60%) -150% 0/250% 100% no-repeat;
  animation:ui-holo-sweep 5s var(--ease-in-out) infinite;
  pointer-events:none;
}
.gtc-achievement-hero h2{font:700 clamp(28px,3vw,40px)/1 var(--font-display);color:#fff;text-shadow:0 0 18px rgba(255,214,10,.4)}
.gtc-achievement-filters{gap:6px;padding:4px;border:1px solid rgba(245,158,11,.2);border-radius:14px;background:rgba(245,158,11,.04);width:fit-content;max-width:100%}
.gtc-achievement-filters button{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:9px 12px;
  border:0;
  border-radius:10px;
  background:transparent;
  color:var(--muted);
  font:700 11px/1 var(--font-body);
  letter-spacing:.06em;
  transition:background-color 160ms ease,color 160ms ease;
}
.gtc-achievement-filters button::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--dot,#9a95ad)}
.gtc-achievement-filters [data-trophy-filter="common"]{--dot:#cd7f32}
.gtc-achievement-filters [data-trophy-filter="rare"]{--dot:#39a8ff}
.gtc-achievement-filters [data-trophy-filter="epic"]{--dot:#b965ff}
.gtc-achievement-filters [data-trophy-filter="legendary"]{--dot:#ffd43b}
.gtc-achievement-filters [data-trophy-filter="platinum"]{--dot:#d5f6ff}
.gtc-achievement-filters [data-trophy-filter="secret"]{--dot:#6c6781}
.gtc-achievement-filters [data-trophy-filter="all"]{--dot:linear-gradient(135deg,#cd7f32,#39a8ff,#b965ff,#ffd43b)}
.gtc-achievement-filters button.active{background:rgba(245,158,11,.18);color:#fff;box-shadow:inset 0 0 0 1px rgba(245,158,11,.5)}
.gtc-achievement-card{
  border-radius:16px;
  border-color:color-mix(in srgb,var(--rarity) 30%,rgba(255,255,255,.06));
  background:linear-gradient(110deg,color-mix(in srgb,var(--rarity) 14%,rgba(18,14,30,.95)),rgba(14,11,24,.95) 55%);
  transition:transform 200ms var(--ease-out),border-color 200ms ease,box-shadow 220ms ease;
}
.gtc-achievement-card::before{width:4px;box-shadow:0 0 12px var(--rarity)}
@media (hover:hover) and (pointer:fine){
  .gtc-achievement-card.unlocked:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--rarity) 65%,transparent);box-shadow:0 14px 30px -16px var(--rarity)}
}
.gtc-achievement-card.locked{filter:saturate(.25);opacity:.6;background:repeating-linear-gradient(135deg,rgba(255,255,255,.02) 0 8px,transparent 8px 16px),rgba(12,10,20,.85)}
.gtc-achievement-copy strong{font:700 13px/1.25 var(--font-display);letter-spacing:0}
.gtc-achievement-copy p{font-size:11.5px;line-height:1.4}
.gtc-konami{border-radius:20px;border-color:rgba(245,158,11,.4);background:linear-gradient(160deg,rgba(40,26,8,.6),rgba(12,9,20,.85))}

@media (max-width:560px){
  .ui-panel-watermark .gtc-trophy-svg{width:180px;height:180px}
  .gtc-calendar-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .gtc-achievement-filters{width:auto}
}
@media (prefers-reduced-motion:reduce){
  .gtc-achievement-hero::after,.gtc-cal-status.pending::before{animation:none}
}

/* ==========================================================================
   Quadros dourados em todas as telas (inclusive a inicial) — v2.8
   A cor do tema continua nos botões, navegação e destaques.
   ========================================================================== */
.gtc-body,
.gtc-body[data-view]{--view-accent:#facc15;--view-accent-rgb:250,204,21;--gold:#facc15;--gold-rgb:250,204,21;--gold-light:#fde68a;--gold-dark:#a16207}

/* Painéis das telas */
.gtc-panel:not(.is-home){border:1px solid rgba(var(--gold-rgb),.38)}
.gtc-body[data-view="archive"] .gtc-panel,
.gtc-body[data-view="play"] .gtc-panel,
.gtc-body[data-view="infinito"] .gtc-panel,
.gtc-body[data-view="duelo"] .gtc-panel,
.gtc-body[data-view="musical"] .gtc-panel{
  background:
    radial-gradient(120% 50% at 50% -10%,rgba(var(--gold-rgb),.14),transparent 60%),
    linear-gradient(rgba(var(--gold-rgb),.04) 1px,transparent 1px) 0 0/56px 56px,
    linear-gradient(90deg,rgba(var(--gold-rgb),.04) 1px,transparent 1px) 0 0/56px 56px,
    linear-gradient(180deg,rgba(26,20,16,.94),rgba(12,9,18,.95));
}
.gtc-body[data-view="trophies"] .gtc-panel{
  background:
    radial-gradient(90% 45% at 50% -8%,rgba(var(--gold-rgb),.18),transparent 62%),
    repeating-linear-gradient(60deg,rgba(var(--gold-rgb),.035) 0 1px,transparent 1px 30px),
    repeating-linear-gradient(-60deg,rgba(var(--gold-rgb),.035) 0 1px,transparent 1px 30px),
    linear-gradient(180deg,rgba(28,20,16,.94),rgba(12,9,20,.95));
}

/* Calendário em dourado */
.gtc-calendar-heading{border-bottom-color:rgba(var(--gold-rgb),.2)}
.gtc-month-tabs{border-color:rgba(var(--gold-rgb),.22);background:rgba(var(--gold-rgb),.04)}
.gtc-body[data-view="archive"] .gtc-month-tab.active{background:rgba(var(--gold-rgb),.18)!important;color:#fff!important;box-shadow:inset 0 0 0 1px rgba(var(--gold-rgb),.6)}
.gtc-month-recap{border-color:rgba(var(--gold-rgb),.35);background:linear-gradient(135deg,rgba(var(--gold-rgb),.12),rgba(168,85,247,.06) 60%,rgba(12,10,24,.9))}
.gtc-month-recap::after{background:linear-gradient(90deg,transparent,var(--gold-light),var(--gold),transparent)}
.gtc-month-recap-head{color:var(--gold-light)}
.gtc-calendar-card.is-today{border-color:rgba(var(--gold-rgb),.85)!important;box-shadow:0 0 0 1px rgba(var(--gold-rgb),.6),0 14px 30px -12px rgba(var(--gold-rgb),.8)!important}
.gtc-calendar-card.is-today::after{background:var(--gold);color:#2a1d00;box-shadow:0 0 12px rgba(var(--gold-rgb),.8)}

/* Tela inicial: hero e cartões com moldura dourada */
.gtc-home-hero,
.gtc-panel.is-home .gtc-home-hero{
  border-color:rgba(var(--gold-rgb),.5);
  box-shadow:0 40px 80px -40px rgba(var(--gold-rgb),.45),inset 0 1px rgba(255,236,150,.12);
}
.gtc-home-hero::after,
.gtc-panel.is-home .gtc-home-hero::after{--c:rgba(var(--gold-rgb),.9)}
.ui-beam{background:conic-gradient(from var(--ui-angle),transparent 0deg 220deg,var(--gold-dark) 270deg,var(--gold) 305deg,#fff6c4 330deg,var(--gold) 345deg,transparent 360deg);filter:drop-shadow(0 0 6px rgba(var(--gold-rgb),.9))}
.gtc-home-modes .gtc-home-mode,
.gtc-panel.is-home .gtc-home-modes .gtc-home-mode{border-color:rgba(var(--gold-rgb),.32)}
@media (hover:hover) and (pointer:fine){
  .gtc-home-mode:not(.is-coming):not(.is-maintenance):hover,
  .gtc-panel.is-home .gtc-home-mode:not(.is-coming):not(.is-maintenance):hover{border-color:rgba(var(--gold-rgb),.75)}
}
.gtc-panel.is-home .gtc-home-modes .gtc-home-mode::after{opacity:.55}
.gtc-panel.is-home .gtc-home-modes .gtc-home-mode.is-coming{border-color:rgba(var(--gold-rgb),.22)}
.ui-section-label b{background:var(--gold);color:#2a1d00}
.ui-section-label i{background:linear-gradient(90deg,rgba(var(--gold-rgb),.6),transparent)}

/* Barras e caixas gerais */
.gtc-stats-bar{border-color:rgba(var(--gold-rgb),.3)}
.ui-coin{border-color:rgba(var(--gold-rgb),.45)}
.gtc-modal-box{border-color:rgba(var(--gold-rgb),.45)}

/* ==========================================================================
   Modo Duelo — mesmo visual do resto do site — v2.9
   ========================================================================== */
.ui-duel{max-width:720px;margin:0 auto;padding:clamp(10px,2vw,24px) 6px;text-align:center}
.ui-duel-title{margin:0 0 8px;color:#fff;font:700 clamp(26px,3vw,38px)/1.1 var(--font-display);letter-spacing:-.02em}
.ui-duel-desc{max-width:52ch;margin:0 auto 22px;color:var(--muted);font:400 15px/1.55 var(--font-body)}

/* Arte P1 VS P2 */
.ui-duel-versus{display:flex;align-items:center;justify-content:center;gap:clamp(14px,3vw,30px);margin:6px 0 22px}
.ui-duel-player{
  display:grid;
  place-items:center;
  width:clamp(64px,8vw,86px);
  aspect-ratio:1;
  border-radius:22px;
  color:#fff;
  font:clamp(13px,1.5vw,16px)/1 var(--font-pixel);
  box-shadow:0 18px 34px -14px var(--pc),inset 0 1px rgba(255,255,255,.25);
  background:linear-gradient(160deg,color-mix(in srgb,var(--pc) 75%,#fff),var(--pc) 45%,color-mix(in srgb,var(--pc) 45%,#000));
}
.ui-duel-player.is-p1{--pc:#22d3ee;transform:rotate(-6deg);animation:ui-duel-bob 2.4s var(--ease-in-out) infinite alternate}
.ui-duel-player.is-p2{--pc:#ff9e00;transform:rotate(6deg);animation:ui-duel-bob 2.4s var(--ease-in-out) -1.2s infinite alternate}
@keyframes ui-duel-bob{to{translate:0 -6px}}
.ui-duel-versus b{
  color:var(--gold);
  font:clamp(30px,4vw,44px)/1 var(--font-pixel);
  text-shadow:3px 3px 0 #7a2e00,0 0 24px rgba(var(--gold-rgb),.7);
  animation:ui-duel-vs 1.6s var(--ease-in-out) infinite;
}
@keyframes ui-duel-vs{50%{transform:scale(1.12) rotate(-4deg)}}

/* Ações do lobby */
.ui-duel-actions{max-width:440px;margin:0 auto}
.ui-duel-create{width:100%;min-height:54px;font-size:14px}
.ui-duel-divider{display:flex;align-items:center;gap:12px;margin:18px 0;color:var(--muted);font:600 11px/1 var(--font-body);letter-spacing:.12em;text-transform:uppercase}
.ui-duel-divider::before,.ui-duel-divider::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,transparent,rgba(var(--gold-rgb),.45),transparent)}
.ui-duel-join{display:flex;gap:8px}
.ui-duel-join .gtc-input{flex:1;min-width:0;text-align:center;letter-spacing:.3em;font:700 16px/1 var(--font-mono)}
.ui-duel-join-btn,.ui-duel-skip{
  background:transparent;
  color:var(--text);
  box-shadow:inset 0 0 0 1px rgba(var(--gold-rgb),.6);
}
@media (hover:hover) and (pointer:fine){.ui-duel-join-btn:hover{background:rgba(var(--gold-rgb),.14)}}
.ui-duel-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:28px 0 0;padding:0;list-style:none}
.ui-duel-steps li{
  display:flex;
  align-items:center;
  gap:10px;
  padding:12px;
  border:1px solid rgba(var(--gold-rgb),.22);
  border-radius:14px;
  background:rgba(10,8,18,.5);
  color:var(--text);
  font:600 12.5px/1.3 var(--font-body);
  text-align:left;
}
.ui-duel-steps b{
  display:grid;
  place-items:center;
  flex:none;
  width:28px;
  height:28px;
  border-radius:9px;
  background:linear-gradient(180deg,#fff7c2,var(--gold) 55%,#a16207);
  color:#2a1d00;
  font:10px/1 var(--font-pixel);
}

/* Gerando sala */
.ui-duel-loading{display:flex;flex-direction:column;align-items:center;gap:16px;padding:60px 10px;color:var(--gold-light);font:600 15px/1.4 var(--font-body)}
.ui-duel-spinner{width:44px;height:44px;border-radius:50%;border:4px solid rgba(var(--gold-rgb),.2);border-top-color:var(--gold);animation:ui-spin-rot .7s linear infinite}
@keyframes ui-spin-rot{to{transform:rotate(360deg)}}

/* Sala criada / aguardando */
.ui-duel-code{display:flex;justify-content:center;gap:8px;margin:6px 0 14px}
.ui-duel-code span{
  display:grid;
  place-items:center;
  width:clamp(40px,6vw,54px);
  height:clamp(52px,7.5vw,68px);
  border:1px solid rgba(var(--gold-rgb),.55);
  border-radius:12px;
  background:linear-gradient(180deg,rgba(var(--gold-rgb),.16),rgba(10,8,18,.7));
  color:#fff;
  font:clamp(18px,2.4vw,24px)/1 var(--font-pixel);
  text-shadow:0 0 12px rgba(var(--gold-rgb),.7);
  box-shadow:0 10px 20px -12px rgba(var(--gold-rgb),.8);
}
.ui-duel-copy{
  min-height:38px;
  padding:0 16px;
  border:0;
  border-radius:999px;
  background:rgba(var(--gold-rgb),.14);
  color:var(--gold-light);
  font:700 12px/1 var(--font-body);
  letter-spacing:.06em;
  box-shadow:inset 0 0 0 1px rgba(var(--gold-rgb),.5);
  cursor:pointer;
  transition:transform 160ms var(--ease-out),background-color 160ms ease;
}
.ui-duel-copy:active{transform:scale(.96)}
.ui-duel-radar{position:relative;width:70px;height:70px;margin:26px auto 12px}
.ui-duel-radar i{position:absolute;inset:0;border:2px solid rgba(var(--gold-rgb),.7);border-radius:50%;animation:ui-radar 2.4s var(--ease-out) infinite;opacity:0}
.ui-duel-radar i:nth-child(2){animation-delay:.8s}
.ui-duel-radar i:nth-child(3){animation-delay:1.6s}
.ui-duel-radar::after{content:"";position:absolute;inset:28px;border-radius:50%;background:var(--gold);box-shadow:0 0 14px var(--gold)}
@keyframes ui-radar{from{transform:scale(.3);opacity:1}to{transform:scale(1.4);opacity:0}}
.ui-duel-wait,.ui-duel-partial{color:var(--amber);font:600 14px/1.4 var(--font-body)}
.ui-duel-partial strong{color:#fff}

/* Partida: placar, fotos e dicas */
.ui-duel-match{padding:0}
.ui-duel-scoreboard{display:grid;grid-template-columns:1fr auto 1fr;gap:10px;align-items:stretch;margin-bottom:14px}
.ui-duel-score,.ui-duel-round{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:4px;
  padding:10px;
  border-radius:16px;
  background:rgba(10,8,18,.55);
}
.ui-duel-score span,.ui-duel-round span{color:var(--muted);font:700 10.5px/1 var(--font-body);letter-spacing:.12em;text-transform:uppercase}
.ui-duel-score strong{font:700 28px/1 var(--font-display);color:#fff}
.ui-duel-score.is-me{box-shadow:inset 0 0 0 1px rgba(34,211,238,.5),0 10px 24px -14px rgba(34,211,238,.8)}
.ui-duel-score.is-me strong{color:#67e8f9}
.ui-duel-score.is-rival{box-shadow:inset 0 0 0 1px rgba(255,158,0,.5),0 10px 24px -14px rgba(255,158,0,.8)}
.ui-duel-score.is-rival strong{color:#ffb547}
.ui-duel-round{min-width:110px;box-shadow:inset 0 0 0 1px rgba(var(--gold-rgb),.55)}
.ui-duel-round strong{color:var(--gold-light);font:14px/1 var(--font-pixel)}
.duel-grid-row{gap:12px;margin-bottom:12px}
.duel-img-box{
  height:150px;
  border:1px solid rgba(var(--gold-rgb),.3);
  border-radius:16px;
  background:#0b0716;
  box-shadow:0 14px 28px -18px rgba(0,0,0,.9);
  transition:transform 220ms var(--ease-out),border-color 200ms ease;
}
@media (hover:hover) and (pointer:fine){.duel-img-box:hover{transform:scale(1.02);border-color:rgba(var(--gold-rgb),.7)}}
.ui-duel-photo-tag{
  position:absolute;
  left:8px;
  bottom:8px;
  padding:4px 8px;
  border-radius:8px;
  background:rgba(8,6,16,.75);
  -webkit-backdrop-filter:blur(6px);
  backdrop-filter:blur(6px);
  color:#fff;
  font:700 10px/1 var(--font-body);
  letter-spacing:.08em;
  text-transform:uppercase;
}
.duel-tip-card{
  min-height:58px;
  padding:10px 14px;
  border:1px solid rgba(var(--gold-rgb),.25);
  border-radius:14px;
  background:radial-gradient(120% 120% at 0% 0%,rgba(var(--gold-rgb),.1),transparent 60%),rgba(16,12,28,.9);
}
.duel-tip-card span{color:var(--muted);font:700 10.5px/1 var(--font-body);letter-spacing:.12em;text-transform:uppercase}
.duel-tip-card strong{color:#fff;font:600 14px/1.3 var(--font-display);text-align:right;word-break:break-word}
.ui-duel-guess{margin-top:4px}
.ui-duel-guess .gtc-btn{min-height:52px}
.ui-duel-skip{color:#ff8fa3;box-shadow:inset 0 0 0 1px rgba(255,90,122,.6)}
@media (hover:hover) and (pointer:fine){.ui-duel-skip:hover{background:rgba(255,90,122,.12)}}

/* Resultado final */
.ui-duel-over{max-width:1100px}
.ui-duel-final{display:flex;align-items:center;justify-content:center;gap:clamp(12px,3vw,28px);margin-bottom:20px}
.ui-duel-final-card{
  flex:1;
  max-width:260px;
  padding:16px 18px;
  border-radius:20px;
  background:rgba(10,8,18,.6);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);
}
.ui-duel-final-card span{display:block;margin-bottom:6px;color:var(--muted);font:700 11px/1.3 var(--font-body);letter-spacing:.1em;text-transform:uppercase}
.ui-duel-final-card strong{font:700 40px/1 var(--font-display);color:#fff}
.ui-duel-final-card small{margin-left:4px;color:var(--muted);font:600 12px/1 var(--font-body)}
.ui-duel-final-card.is-winner{background:radial-gradient(100% 120% at 50% 0%,rgba(52,211,153,.25),rgba(10,8,18,.7));box-shadow:inset 0 0 0 1px rgba(52,211,153,.7),0 18px 36px -16px rgba(52,211,153,.8)}
.ui-duel-final-card.is-winner strong{color:#6ee7b7}
.ui-duel-final-card.is-winner span::after{content:" 👑"}
.ui-duel-final-card.is-tie{box-shadow:inset 0 0 0 1px rgba(var(--gold-rgb),.6)}
.ui-duel-final-vs{color:var(--gold);font:22px/1 var(--font-pixel);text-shadow:2px 2px 0 #7a2e00}
.gtc-gameover-grid{gap:14px;margin-bottom:16px}
.ui-duel-table{overflow:hidden;border:1px solid rgba(var(--gold-rgb),.3);border-radius:16px;background:rgba(10,8,18,.55)}
.ui-duel-table table{width:100%;border-collapse:collapse;font:500 12px/1.3 var(--font-body)}
.ui-duel-table th{padding:10px 8px;border-bottom:1px solid rgba(var(--gold-rgb),.35);background:rgba(var(--gold-rgb),.08);color:var(--gold-light);font:700 10.5px/1 var(--font-body);letter-spacing:.1em;text-transform:uppercase}
.ui-duel-table th:first-child,.ui-duel-table td:first-child{text-align:left}
.ui-duel-table td{padding:8px;border-bottom:1px solid rgba(255,255,255,.05);text-align:center}
.ui-duel-table tr:last-child td{border-bottom:0}
.ui-duel-game{max-width:160px;overflow:hidden;color:#fff;text-overflow:ellipsis;white-space:nowrap}
.ui-duel-game span{color:var(--gold-light);font:9px/1 var(--font-pixel)}
.ui-duel-answer{display:inline-block;max-width:150px;overflow:hidden;padding:4px 8px;border-radius:8px;font:600 11px/1.2 var(--font-body);text-overflow:ellipsis;white-space:nowrap;vertical-align:middle}
.ui-duel-answer.is-right{background:rgba(52,211,153,.14);color:#6ee7b7;box-shadow:inset 0 0 0 1px rgba(52,211,153,.5)}
.ui-duel-answer.is-wrong{background:rgba(255,90,122,.12);color:#ff8fa3;box-shadow:inset 0 0 0 1px rgba(255,90,122,.45)}
.ui-duel-restart{width:100%;min-height:52px}

@media (max-width:620px){
  .ui-duel-steps{grid-template-columns:1fr}
  .ui-duel-code span{width:38px;height:50px;font-size:16px}
  .ui-duel-scoreboard{grid-template-columns:1fr 1fr}
  .ui-duel-round{grid-column:1 / -1;grid-row:1}
  .ui-duel-guess{flex-wrap:wrap}
  .ui-duel-guess .gtc-input{flex-basis:100%}
  .ui-duel-guess .gtc-btn{flex:1}
}
@media (prefers-reduced-motion:reduce){
  .ui-duel-player,.ui-duel-versus b,.ui-duel-radar i,.ui-duel-spinner{animation:none}
}

/* ==========================================================================
   Rodapé completo — v3.0
   ========================================================================== */
.ui-footer{
  position:relative;
  margin-top:22px;
  padding:clamp(22px,3vw,34px);
  border:1px solid rgba(var(--gold-rgb),.3);
  border-radius:var(--r-xl);
  background:
    radial-gradient(90% 60% at 0% 0%,rgba(var(--accent-rgb),.14),transparent 60%),
    linear-gradient(180deg,rgba(20,15,32,.9),rgba(10,8,18,.94));
  -webkit-backdrop-filter:blur(14px);
  backdrop-filter:blur(14px);
  box-shadow:inset 0 2px 0 rgba(var(--gold-rgb),.6),0 30px 60px -30px rgba(0,0,0,.85);
  text-align:left;
}

.ui-footer .gtc-footer-alert{width:16px;height:16px;font-size:8px}

/* ==========================================================================
   Caixas abertas pelo rodapé (Sobre, Privacidade, Contato, Roadmap, Atualizações)
   ========================================================================== */
.gtc-modal-box{max-width:640px}
.gtc-modal-header h3{display:flex;align-items:center;gap:10px}
.gtc-modal-header h3::before{content:"";width:8px;height:20px;border-radius:4px;background:var(--gold);box-shadow:0 0 12px rgba(var(--gold-rgb),.7)}
.gtc-modal-body{scrollbar-gutter:stable}

.ui-info{display:flex;flex-direction:column;gap:14px}
.ui-info-hero{
  padding:18px;
  border:1px solid rgba(var(--gold-rgb),.35);
  border-radius:18px;
  background:radial-gradient(100% 120% at 0% 0%,rgba(var(--gold-rgb),.16),transparent 60%),rgba(10,8,18,.5);
}
.ui-info-kicker{color:var(--amber);font:8px/1 var(--font-pixel);letter-spacing:.08em}
.ui-info-hero h4{margin:10px 0 6px;color:#fff;font:700 22px/1.15 var(--font-display);letter-spacing:-.01em}
.ui-info-hero p,.ui-info-lead{margin:0;color:var(--muted);font:400 14px/1.55 var(--font-body)}
.ui-info-lead{color:#d8d4e3}
.ui-info-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.ui-info-card{
  position:relative;
  padding:14px;
  border:1px solid color-mix(in srgb,var(--tone) 40%,transparent);
  border-radius:16px;
  background:linear-gradient(160deg,color-mix(in srgb,var(--tone) 14%,transparent),rgba(10,8,18,.6));
}
.ui-info-card b{display:grid;place-items:center;width:34px;height:34px;margin-bottom:8px;border-radius:10px;background:color-mix(in srgb,var(--tone) 22%,#120d20);font-size:17px}
.ui-info-card strong{display:block;margin-bottom:4px;color:#fff;font:700 15px/1.2 var(--font-display)}
.ui-info-card p{margin:0;color:var(--muted);font:400 12.5px/1.5 var(--font-body)}
.ui-info-list{display:flex;flex-direction:column;gap:8px}
.ui-info-row{display:flex;gap:12px;padding:12px 14px;border:1px solid rgba(255,255,255,.07);border-radius:14px;background:rgba(10,8,18,.5)}
.ui-info-row > b{display:grid;place-items:center;flex:none;width:34px;height:34px;border-radius:10px;background:rgba(var(--gold-rgb),.12);font-size:16px}
.ui-info-row strong{display:block;color:#fff;font:700 14px/1.3 var(--font-display)}
.ui-info-row p{margin:2px 0 0;color:var(--muted);font:400 12.5px/1.5 var(--font-body)}
.ui-info-foot{margin:0;color:var(--muted);font:500 12px/1.5 var(--font-body);text-align:center}
.ui-info-foot a{color:var(--gold-light)}
.ui-info-contact{align-items:center;text-align:center}
.ui-info-mail{display:grid;place-items:center;width:72px;height:72px;border-radius:22px;background:radial-gradient(circle at 35% 30%,rgba(var(--gold-rgb),.35),rgba(var(--gold-rgb),.08));box-shadow:inset 0 0 0 1px rgba(var(--gold-rgb),.5);font-size:34px;animation:ui-duel-bob 2.4s var(--ease-in-out) infinite alternate}
.ui-info-email{padding:10px 16px;border:1px dashed rgba(var(--gold-rgb),.55);border-radius:12px;background:rgba(var(--gold-rgb),.06);color:var(--gold-light);font:600 15px/1 var(--font-mono)}
.ui-info-cta{display:inline-flex;align-items:center;justify-content:center;width:100%;text-decoration:none}
.ui-info-chips{display:flex;flex-wrap:wrap;justify-content:center;gap:6px}
.ui-info-chips span{padding:5px 10px;border-radius:999px;background:rgba(255,255,255,.05);color:var(--muted);font:600 11.5px/1 var(--font-body)}

/* Roadmap em cartões */
.ui-roadmap{display:flex;flex-direction:column;gap:8px}
.ui-roadmap-item{
  display:grid;
  grid-template-columns:auto auto minmax(0,1fr) auto;
  align-items:center;
  gap:12px;
  padding:12px 14px;
  border:1px solid rgba(255,255,255,.07);
  border-radius:14px;
  background:rgba(10,8,18,.5);
  transition:border-color 200ms ease,transform 200ms var(--ease-out);
}
@media (hover:hover) and (pointer:fine){.ui-roadmap-item:hover{border-color:rgba(var(--gold-rgb),.45);transform:translateX(3px)}}
.ui-roadmap-step{color:var(--gold-light);font:9px/1 var(--font-pixel)}
.ui-roadmap-item > b{display:grid;place-items:center;width:34px;height:34px;border-radius:10px;background:rgba(var(--accent-rgb),.16);font-size:16px}
.ui-roadmap-item strong{display:block;color:#fff;font:700 14px/1.3 var(--font-display)}
.ui-roadmap-item p{margin:2px 0 0;color:var(--muted);font:400 12.5px/1.45 var(--font-body)}
.ui-roadmap-item em{padding:4px 8px;border-radius:999px;background:rgba(var(--gold-rgb),.12);color:var(--gold-light);font:700 10px/1 var(--font-body);font-style:normal;letter-spacing:.06em;white-space:nowrap}
@media (max-width:520px){
  .ui-info-grid{grid-template-columns:1fr}
  .ui-roadmap-item{grid-template-columns:auto minmax(0,1fr)}
  .ui-roadmap-step,.ui-roadmap-item em{display:none}
}

/* Atualizações como linha do tempo (o conteúdo vem do updates.js) */
.gtc-modal-body:has(> hr) > hr{display:none}
.gtc-modal-body:has(> hr) > p:has(+ hr){
  position:relative;
  margin:22px 0 10px;
  padding:12px 14px 12px 40px;
  border:1px solid rgba(var(--gold-rgb),.35);
  border-radius:14px;
  background:linear-gradient(90deg,rgba(var(--gold-rgb),.14),rgba(var(--gold-rgb),.02));
  color:var(--muted);
  font:500 12px/1.4 var(--font-body);
}
.gtc-modal-body:has(> hr) > p:has(+ hr):first-child{margin-top:0}
.gtc-modal-body:has(> hr) > p:has(+ hr)::before{
  content:"";
  position:absolute;
  left:15px;
  top:50%;
  width:12px;
  height:12px;
  border-radius:50%;
  background:var(--gold);
  box-shadow:0 0 0 4px rgba(var(--gold-rgb),.2),0 0 12px var(--gold);
  transform:translateY(-50%);
}
.gtc-modal-body:has(> hr) > p:has(+ hr) strong{display:block;color:#fff;font:700 15px/1.3 var(--font-display)}
.gtc-modal-body:has(> hr) > ul{
  margin:0 0 6px 21px!important;
  padding:2px 0 2px 18px!important;
  border-left:2px solid rgba(var(--gold-rgb),.25);
  list-style:none;
}
.gtc-modal-body:has(> hr) > ul > li{
  position:relative;
  margin:0 0 8px;
  padding:10px 12px;
  border:1px solid rgba(255,255,255,.06);
  border-radius:12px;
  background:rgba(10,8,18,.45);
  color:var(--muted);
  font:400 13px/1.5 var(--font-body);
}
.gtc-modal-body:has(> hr) > ul > li::before{
  content:"";
  position:absolute;
  left:-24px;
  top:16px;
  width:8px;
  height:8px;
  border-radius:50%;
  background:#120d20;
  box-shadow:0 0 0 2px rgba(var(--gold-rgb),.6);
}
.gtc-modal-body:has(> hr) > ul > li strong{color:#fff}

/* Rodapé compacto (como o original, só que no visual novo) */
.ui-footer.is-compact{
  width:fit-content;
  max-width:100%;
  margin:26px auto 0;
  padding:12px 20px 12px;
  border-radius:18px;
  text-align:center;
}
.ui-footer-links{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:4px 0}
.ui-footer-links a{
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:5px;
  padding:4px 12px;
  color:var(--muted);
  font:500 13px/1.3 var(--font-body);
  text-decoration:none;
  transition:color 160ms ease;
}
.ui-footer-links a + a::before{
  content:"";
  position:absolute;
  left:-2px;
  top:50%;
  width:4px;
  height:4px;
  border-radius:50%;
  background:rgba(var(--gold-rgb),.55);
  transform:translateY(-50%);
}
@media (hover:hover) and (pointer:fine){.ui-footer-links a:hover{color:#fff}}
.ui-footer-links a:focus-visible{outline:2px solid var(--gold);outline-offset:2px;border-radius:6px}
.ui-footer-meta{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  gap:6px 14px;
  margin-top:8px;
  padding-top:8px;
  border-top:1px solid rgba(var(--gold-rgb),.16);
  color:var(--muted-2);
  font:500 11.5px/1.4 var(--font-body);
}
.ui-footer-meta .gtc-data-attribution{display:inline-flex;gap:4px;margin:0;opacity:1;color:var(--muted-2);font:inherit}
.ui-footer-meta .gtc-data-attribution a{color:var(--gold-light);font-weight:700;text-decoration:none}
.ui-footer-version{padding:3px 8px;border-radius:999px;background:var(--gold);color:#2a1d00;font:8px/1.2 var(--font-pixel)}
@media (max-width:560px){
  .ui-footer.is-compact{padding:12px}
  .ui-footer-links a{padding:4px 9px;font-size:12px}
}

/* ==========================================================================
   Prateleira de troféus em vitrine — v5.1
   ========================================================================== */
.ui-shelf.gtc-trophy-shelf{
  position:relative;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(8px,2vw,18px);
  margin:10px 0 14px;
  padding:22px clamp(10px,2vw,20px) 22px;
  border:1px solid rgba(var(--gold-rgb),.35);
  border-radius:20px;
  background:
    radial-gradient(120% 70% at 50% -10%,rgba(var(--gold-rgb),.16),transparent 60%),
    repeating-linear-gradient(90deg,rgba(255,255,255,.015) 0 1px,transparent 1px 40px),
    linear-gradient(180deg,rgba(24,18,36,.95),rgba(10,8,18,.95));
  box-shadow:inset 0 1px rgba(255,255,255,.06),inset 0 -40px 60px -40px rgba(0,0,0,.8);
  overflow:hidden;
}
/* Tampo de vidro onde os pedestais ficam apoiados */
.ui-shelf.gtc-trophy-shelf::after{
  content:"";
  position:absolute;
  left:12px;
  right:12px;
  bottom:72px;
  height:8px;
  border-radius:4px;
  background:linear-gradient(180deg,rgba(255,255,255,.28),rgba(var(--gold-rgb),.25) 40%,rgba(0,0,0,.4));
  box-shadow:0 6px 16px rgba(0,0,0,.6),0 0 18px rgba(var(--gold-rgb),.25);
  pointer-events:none;
}
.ui-shelf-slot{
  --rarity:#cd7f32;
  position:relative;
  z-index:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  min-width:0;
  text-align:center;
}
.ui-shelf-slot.rarity-common{--rarity:#cd7f32}
.ui-shelf-slot.rarity-rare{--rarity:#39a8ff}
.ui-shelf-slot.rarity-epic{--rarity:#b965ff}
.ui-shelf-slot.rarity-legendary{--rarity:#ffd43b}
.ui-shelf-slot.rarity-platinum{--rarity:#d5f6ff}
.ui-shelf-slot.is-empty{--rarity:#6c6781}

/* Holofote vindo de cima */
.ui-shelf-light{
  position:absolute;
  top:-22px;
  left:50%;
  width:120%;
  height:120px;
  transform:translateX(-50%);
  background:conic-gradient(from 180deg at 50% 0%,transparent 160deg,color-mix(in srgb,var(--rarity) 30%,transparent) 180deg,transparent 200deg);
  filter:blur(6px);
  opacity:.8;
  pointer-events:none;
}
.ui-shelf-medal{
  position:relative;
  z-index:2;
  display:grid;
  place-items:center;
  width:clamp(56px,9vw,74px);
  height:clamp(56px,9vw,74px);
  animation:ui-shelf-float 3.2s var(--ease-in-out) infinite alternate;
  animation-delay:calc(var(--i) * -1s);
}
.ui-shelf-medal .gtc-trophy-svg{
  width:100%;
  height:100%;
  filter:drop-shadow(0 6px 6px rgba(0,0,0,.55)) drop-shadow(0 0 14px color-mix(in srgb,var(--rarity) 60%,transparent));
}
@keyframes ui-shelf-float{to{translate:0 -6px}}
.ui-shelf-medal.is-empty{
  border:2px dashed rgba(255,255,255,.18);
  border-radius:50%;
  color:var(--muted-2);
  font:300 30px/1 var(--font-display);
  animation:none;
}
/* Pedestal */
.ui-shelf-pedestal{
  position:relative;
  z-index:1;
  width:62%;
  height:16px;
  margin-top:6px;
  border-radius:50% / 100% 100% 0 0;
  background:linear-gradient(180deg,color-mix(in srgb,var(--rarity) 55%,#fff),color-mix(in srgb,var(--rarity) 35%,#1a1228) 60%,#0e0a18);
  box-shadow:0 0 18px color-mix(in srgb,var(--rarity) 45%,transparent);
}
.ui-shelf-pedestal::after{
  content:"";
  position:absolute;
  left:50%;
  top:-4px;
  width:70%;
  height:6px;
  border-radius:50%;
  background:radial-gradient(ellipse,rgba(0,0,0,.6),transparent 70%);
  transform:translateX(-50%);
}
.ui-shelf-slot.is-empty .ui-shelf-pedestal{background:rgba(255,255,255,.06);box-shadow:none}
/* Plaquinha de museu */
.ui-shelf-plaque{
  width:100%;
  min-width:0;
  margin-top:18px;
  padding:7px 8px;
  border:1px solid color-mix(in srgb,var(--rarity) 45%,transparent);
  border-radius:10px;
  background:linear-gradient(180deg,rgba(30,22,44,.95),rgba(14,10,24,.95));
  box-shadow:inset 0 1px rgba(255,255,255,.06);
}
.ui-shelf-plaque strong{
  display:block;
  overflow:hidden;
  color:#fff;
  font:700 12.5px/1.25 var(--font-display);
  text-overflow:ellipsis;
  white-space:nowrap;
}
.ui-shelf-plaque small{display:block;margin-top:5px;color:var(--rarity);font:8px/1.4 var(--font-pixel);letter-spacing:.04em}
.ui-shelf-slot.is-empty .ui-shelf-plaque{border-style:dashed}
.ui-shelf-slot.is-empty .ui-shelf-plaque strong{color:var(--muted)}
.ui-shelf-slot.is-empty .ui-shelf-plaque small{color:var(--muted-2);font:600 10.5px/1 var(--font-body);letter-spacing:0}
@media (hover:hover) and (pointer:fine){
  .ui-shelf-slot:not(.is-empty):hover .ui-shelf-medal{animation-play-state:paused;transform:scale(1.08) rotate(-4deg);transition:transform 320ms cubic-bezier(.34,1.56,.64,1)}
}

/* Escolher troféus: lista em grade com marcação clara */
.gtc-trophy-collection{margin-top:4px;border:1px solid rgba(var(--gold-rgb),.25);border-radius:16px;background:rgba(10,8,18,.45);overflow:hidden}
.gtc-trophy-collection > summary{padding:12px 14px;color:var(--gold-light);font:700 13px/1 var(--font-body);letter-spacing:.04em;cursor:pointer;list-style:none}
.gtc-trophy-collection > summary::-webkit-details-marker{display:none}
.gtc-trophy-collection > summary::before{content:"▸";display:inline-block;margin-right:8px;transition:transform 200ms var(--ease-out)}
.gtc-trophy-collection[open] > summary::before{transform:rotate(90deg)}
.gtc-shelf-choices{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:8px;max-height:260px;overflow:auto;padding:0 12px 12px}
.gtc-shelf-choices button{
  display:flex;
  align-items:center;
  gap:8px;
  min-width:0;
  padding:7px 9px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:12px;
  background:rgba(255,255,255,.025);
  color:var(--text);
  text-align:left;
  cursor:pointer;
  transition:border-color 160ms ease,background-color 160ms ease,transform 160ms var(--ease-out);
}
.gtc-shelf-choices button:active{transform:scale(.97)}
.gtc-shelf-choices button strong{flex:1;min-width:0;overflow:hidden;font:600 12px/1.25 var(--font-body);text-overflow:ellipsis;white-space:nowrap}
.gtc-shelf-choices button[aria-pressed="true"]{border-color:rgba(var(--gold-rgb),.7);background:rgba(var(--gold-rgb),.12)}
.gtc-favorite-check{display:grid;place-items:center;flex:none;width:22px;height:22px;border-radius:50%;background:rgba(255,255,255,.07);color:var(--muted);font:700 12px/1 var(--font-body)}
.gtc-shelf-choices button[aria-pressed="true"] .gtc-favorite-check{background:var(--gold);color:#2a1d00}

/* Perfil público: todos os troféus e títulos */
.gtc-public-trophies > h3,.gtc-public-titles h3{display:flex;align-items:center;gap:10px;margin:18px 0 6px;color:#fff;font:700 17px/1.2 var(--font-display)}
.gtc-public-trophies > h3::before,.gtc-public-titles h3::before{content:"";width:6px;height:18px;border-radius:3px;background:var(--gold);box-shadow:0 0 10px rgba(var(--gold-rgb),.7)}
.gtc-public-trophy-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px;padding:0 12px 12px}
.gtc-public-trophy{display:flex;align-items:center;gap:8px;padding:8px;border:1px solid rgba(255,255,255,.08);border-radius:12px;background:rgba(255,255,255,.025)}
.gtc-public-trophy strong{font:600 12px/1.25 var(--font-body)}
.gtc-public-title{display:inline-block;margin:0 6px 6px 0;padding:6px 10px;border:1px solid rgba(var(--gold-rgb),.3);border-radius:999px;background:rgba(var(--gold-rgb),.06);color:var(--gold-light);font:600 12px/1 var(--font-body)}

@media (max-width:480px){
  .ui-shelf.gtc-trophy-shelf{padding:18px 8px 12px}
  .ui-shelf-plaque strong{font-size:11px}
}
@media (prefers-reduced-motion:reduce){
  .ui-shelf-medal{animation:none}
}

/* ==========================================================================
   Texto sobre o jogo na tela inicial (conteúdo para buscadores e novos jogadores)
   ========================================================================== */
.ui-home-info{
  position:relative;
  margin-top:22px;
  padding:clamp(20px,3vw,32px);
  border:1px solid rgba(var(--gold-rgb),.28);
  border-radius:var(--r-xl);
  background:linear-gradient(180deg,rgba(20,15,32,.86),rgba(10,8,18,.9));
  -webkit-backdrop-filter:blur(12px);
  backdrop-filter:blur(12px);
}
/* Só aparece depois que a home foi montada: antes o painel está vazio e a
   seção subia para o topo por um instante ("piscada"). */
.gtc-body:not([data-view]) .ui-home-info,
.gtc-panel:empty + .ui-home-info,
.gtc-body[data-view]:not([data-view="home"]) .ui-home-info{display:none}
:root[lang^="pt"] .ui-home-info [lang="en"],
:root:not([lang^="pt"]) .ui-home-info [lang="pt"]{display:none}
.ui-home-info h2{display:flex;align-items:center;gap:10px;margin:0 0 10px;color:#fff;font:700 clamp(20px,2vw,26px)/1.2 var(--font-display)}
.ui-home-info h2::before{content:"";width:8px;height:22px;border-radius:4px;background:var(--gold);box-shadow:0 0 12px rgba(var(--gold-rgb),.7)}
.ui-home-info > div > p{max-width:80ch;margin:0 0 18px;color:#d3cfde;font:400 15px/1.65 var(--font-body)}
.ui-home-info-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.ui-home-info-grid > div{padding:16px;border:1px solid rgba(255,255,255,.07);border-radius:16px;background:rgba(10,8,18,.5)}
.ui-home-info h3{margin:0 0 8px;color:var(--gold-light);font:700 15px/1.3 var(--font-display)}
.ui-home-info-grid p{margin:0;color:var(--muted);font:400 13.5px/1.6 var(--font-body)}
.ui-home-info-grid strong{color:#fff}
.ui-home-info-links{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0 0!important}
.ui-home-info-links a{padding:7px 12px;border:1px solid rgba(var(--gold-rgb),.35);border-radius:999px;background:rgba(var(--gold-rgb),.06);color:var(--gold-light);font:600 12.5px/1 var(--font-body);text-decoration:none}
.ui-home-info-links a:hover{background:rgba(var(--gold-rgb),.16)}
@media (max-width:900px){.ui-home-info-grid{grid-template-columns:1fr}}

/* Recolhido: só uma linha discreta; ao tocar abre o texto completo */
details.ui-home-info{padding:0;background:rgba(14,10,26,.72);-webkit-backdrop-filter:none;backdrop-filter:none}
details.ui-home-info > div{padding:0 clamp(16px,3vw,32px) clamp(18px,3vw,28px)}
.ui-home-info summary{
  display:flex;
  align-items:center;
  gap:10px;
  padding:14px clamp(16px,3vw,24px);
  color:var(--muted);
  font:600 13px/1.35 var(--font-body);
  list-style:none;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.ui-home-info summary::-webkit-details-marker{display:none}
.ui-home-info summary::after{content:"";flex:none;width:8px;height:8px;margin-left:auto;border-right:2px solid var(--gold);border-bottom:2px solid var(--gold);transform:rotate(45deg) translateY(-2px);transition:transform 200ms var(--ease-out)}
.ui-home-info[open] summary::after{transform:rotate(225deg) translate(-2px,0)}
.ui-home-info[open] summary{color:#fff}
.ui-home-info-icon{display:grid;place-items:center;flex:none;width:22px;height:22px;border:1px solid rgba(var(--gold-rgb),.5);border-radius:50%;color:var(--gold);font:700 12px/1 var(--font-display)}
@media (hover:hover) and (pointer:fine){.ui-home-info summary:hover{color:#fff}}

/* ==========================================================================
   Aviso de cookies (cg-consent.js)
   ========================================================================== */
.cg-consent{
  position:fixed;
  z-index:100005;
  left:50%;
  bottom:18px;
  width:min(680px,calc(100% - 24px));
  padding:18px 18px 16px;
  border:1px solid rgba(var(--gold-rgb,250,204,21),.45);
  border-radius:20px;
  background:radial-gradient(100% 120% at 0% 0%,rgba(var(--gold-rgb,250,204,21),.12),transparent 60%),linear-gradient(180deg,rgba(24,18,38,.97),rgba(12,9,20,.98));
  -webkit-backdrop-filter:blur(16px);
  backdrop-filter:blur(16px);
  box-shadow:0 30px 70px -20px rgba(0,0,0,.9),inset 0 1px rgba(255,255,255,.06);
  color:var(--text,#f2f0f7);
  font-family:var(--font-body,Inter,sans-serif);
  transform:translateX(-50%);
  animation:cgc-in 420ms cubic-bezier(.23,1,.32,1) both;
}
.cg-consent.out{animation:cgc-out 240ms ease forwards}
@keyframes cgc-in{from{opacity:0;transform:translate(-50%,24px)}}
@keyframes cgc-out{to{opacity:0;transform:translate(-50%,24px)}}
.cg-consent::before{content:"";position:absolute;left:22px;right:22px;top:0;height:2px;background:linear-gradient(90deg,transparent,var(--gold,#facc15),var(--cyan,#9d4edd),transparent)}
.cgc-main{display:flex;gap:14px;align-items:flex-start}
.cgc-ic{display:grid;place-items:center;flex:none;width:44px;height:44px;border-radius:14px;background:rgba(var(--gold-rgb,250,204,21),.14);color:var(--gold-light,#fde68a);box-shadow:inset 0 0 0 1px rgba(var(--gold-rgb,250,204,21),.4)}
.cgc-ic svg{width:24px;height:24px}
.cgc-copy strong{display:block;color:#fff;font:700 16px/1.2 var(--font-display,sans-serif)}
.cgc-copy p{margin:6px 0 0;color:var(--muted,#9a95ad);font:400 13px/1.55 var(--font-body,sans-serif)}
.cgc-copy b{color:#fff}
.cgc-copy a{color:var(--gold-light,#fde68a);font-weight:600}
.cgc-prefs{display:grid;gap:8px;margin-top:14px}
.cgc-prefs[hidden]{display:none}
.cgc-opt{position:relative;display:flex;align-items:center;justify-content:space-between;gap:14px;padding:10px 12px;border:1px solid rgba(255,255,255,.08);border-radius:14px;background:rgba(255,255,255,.03);cursor:pointer}
.cgc-opt b{display:block;color:#fff;font:700 13px/1.2 var(--font-display,sans-serif)}
.cgc-opt small{display:block;margin-top:3px;color:var(--muted,#9a95ad);font:400 11.5px/1.4 var(--font-body,sans-serif)}
.cgc-opt input{position:absolute;opacity:0;pointer-events:none}
.cgc-opt i{position:relative;flex:none;width:42px;height:24px;border-radius:999px;background:#3a3350;transition:background-color 200ms ease}
.cgc-opt i::after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 2px 4px rgba(0,0,0,.4);transition:transform 260ms cubic-bezier(.23,1,.32,1)}
.cgc-opt input:checked + i{background:var(--gold,#facc15)}
.cgc-opt input:checked + i::after{transform:translateX(18px)}
.cgc-opt input:disabled + i{opacity:.55}
.cgc-opt input:focus-visible + i{outline:2px solid var(--gold,#facc15);outline-offset:2px}
.cgc-actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px;margin-top:14px}
.cgc-btn{min-height:42px;padding:0 18px;border:0;border-radius:12px;font:700 13px/1 var(--font-body,sans-serif);letter-spacing:.03em;cursor:pointer;transition:transform 160ms cubic-bezier(.23,1,.32,1),background-color 160ms ease,filter 160ms ease}
.cgc-btn:active{transform:scale(.97)}
.cgc-btn[hidden]{display:none}
.cgc-btn.ghost{background:rgba(255,255,255,.05);color:var(--text,#f2f0f7);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)}
.cgc-btn.ghost:hover{background:rgba(255,255,255,.1)}
.cgc-btn.primary{background:linear-gradient(180deg,#fff1a8,var(--gold,#facc15));color:#2a1d00;box-shadow:0 10px 24px -10px rgba(var(--gold-rgb,250,204,21),.9)}
.cgc-btn.primary:hover{filter:brightness(1.06)}
.cg-consent-backdrop{position:fixed;inset:0;z-index:100004;background:rgba(5,3,10,.6);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.cg-consent.center{top:50%;bottom:auto;width:min(540px,calc(100% - 24px));transform:translate(-50%,-50%);animation:cgc-in-center 320ms cubic-bezier(.23,1,.32,1) both}
.cg-consent.center.out{animation:cgc-out-center 220ms ease forwards}
@keyframes cgc-in-center{from{opacity:0;transform:translate(-50%,-46%) scale(.97)}}
@keyframes cgc-out-center{to{opacity:0;transform:translate(-50%,-46%) scale(.97)}}
@media (max-width:900px){.cg-consent{bottom:calc(92px + env(safe-area-inset-bottom,0px))}}
.seo-page .cg-consent{bottom:18px}
@media (max-width:560px){
  .cg-consent{padding:14px;max-height:70vh;overflow-y:auto}
  .cgc-ic{display:none}
  .cgc-actions{display:grid;grid-template-columns:1fr 1fr}
  .cgc-actions .primary{grid-column:1 / -1;order:-1}
}
@media (prefers-reduced-motion:reduce){.cg-consent,.cg-consent.center,.cg-consent.out{animation:none}}

/* ==========================================================================
   Home no celular — v5.2
   Hero compacto (os cards de jogar aparecem logo na primeira tela) e cards
   quase opacos, com cor do modo e botão de jogar em largura total.
   Fundos opacos dispensam o backdrop-filter, que pesava no celular.
   ========================================================================== */
@media (max-width:560px){
  .gtc-panel.is-home .gtc-home-hero{
    display:grid;
    grid-template-columns:minmax(0,1fr) 112px;
    grid-template-areas:"copy fan" "stats stats";
    align-items:center;
    gap:14px 4px;
    min-height:0;
    padding:18px 12px 16px 16px;
  }
  .gtc-panel.is-home .gtc-home-hero h1{max-width:none;margin:12px 0 8px;font-size:26px;line-height:1.06}
  .gtc-panel.is-home .gtc-home-hero p{font-size:13px;line-height:1.45}
  .gtc-panel.is-home .gtc-home-kicker{padding:6px 10px;}
  .gtc-panel.is-home .ui-cover-fan{height:250px;zoom:.5;align-self:center}
  .gtc-panel.is-home .gtc-home-player-stats{display:flex;gap:8px}
  .gtc-panel.is-home .gtc-home-player-stats span{flex:1;justify-content:center;padding:10px 12px;-webkit-backdrop-filter:none;backdrop-filter:none;background:rgba(8,6,16,.7)}
  .gtc-panel.is-home .gtc-home-player-stats strong{font-size:19px}

  .gtc-panel.is-home .gtc-home-modes .gtc-home-mode{
    display:grid!important;
    grid-template-columns:46px minmax(0,1fr);
    grid-template-areas:"icon copy" "cta cta";
    align-items:start;
    gap:12px 14px;
    padding:16px!important;
    border:1px solid color-mix(in srgb,var(--mode-color) 55%,transparent);
    background:
      radial-gradient(120% 90% at 100% 0%,color-mix(in srgb,var(--mode-color) 20%,transparent),transparent 60%),
      linear-gradient(165deg,rgba(26,19,42,.96),rgba(11,8,20,.97));
    -webkit-backdrop-filter:none;
    backdrop-filter:none;
    box-shadow:inset 3px 0 0 var(--mode-color),0 16px 30px -20px color-mix(in srgb,var(--mode-color) 70%,rgba(0,0,0,.9));
    text-align:left;
  }
  .gtc-panel.is-home .gtc-home-modes .gtc-home-mode.is-daily{
    border-color:rgba(var(--gold-rgb,250,204,21),.7);
    box-shadow:inset 3px 0 0 var(--mode-color),0 18px 40px -18px rgba(var(--accent-rgb),.9);
  }
  /* Ordem no celular: Diário, Duelo, Infinito, Musical, Semanal */
  .gtc-panel.is-home .gtc-home-modes .gtc-home-mode.is-daily{order:1}
  .gtc-panel.is-home .gtc-home-modes .gtc-home-mode.is-duel{order:2}
  .gtc-panel.is-home .gtc-home-modes .gtc-home-mode.is-infinite{order:3}
  .gtc-panel.is-home .gtc-home-modes .gtc-home-mode.is-music{order:4}
  .gtc-panel.is-home .gtc-home-modes .gtc-home-mode.is-coming{order:5}

  .gtc-panel.is-home .gtc-home-mode-icon{grid-area:icon;width:46px;height:46px;border-radius:14px;font-size:21px}
  .gtc-panel.is-home .gtc-home-mode-copy{grid-area:copy;gap:6px;min-width:0;padding-right:30px}
  .gtc-panel.is-home .gtc-home-mode-copy strong{font-size:19px}
  .gtc-panel.is-home .gtc-home-mode-copy em{max-width:none;color:#d6cfe8;font-size:13.5px;line-height:1.45}
  .gtc-panel.is-home .ui-mode-meta{gap:6px}
  .gtc-panel.is-home .ui-mode-meta i{background:rgba(255,255,255,.07)}

  .gtc-panel.is-home .gtc-home-modes .gtc-home-mode > b{
    grid-area:cta;
    justify-content:center;
    width:100%;
    min-height:46px;
    margin:2px 0 0;
    border:0;
    background:linear-gradient(180deg,color-mix(in srgb,var(--mode-color) 80%,#fff),var(--mode-color));
    color:#0b0812;
    font-size:12.5px;
    box-shadow:0 12px 24px -14px var(--mode-color);
  }
  .gtc-panel.is-home .gtc-home-modes .gtc-home-mode:is(.is-coming,.is-maintenance) > b{
    border:1px solid var(--hairline-strong);
    background:rgba(255,255,255,.05);
    color:var(--muted);
    box-shadow:none;
  }
  /* O selo do canto (NOVO MODO / MANUTENÇÃO) fica acima do texto */
  .gtc-panel.is-home .gtc-home-mode:has(.gtc-new-mode-badge) .gtc-home-mode-copy{padding-top:26px;padding-right:0}

  /* Menos informação na tela pequena: o Diário fica em destaque e os
     outros modos viram linhas compactas (ícone, nome, frase curta e botão). */
  .gtc-panel.is-home .gtc-home-hero p,
  .gtc-panel.is-home .ui-mode-meta{display:none}
  .gtc-panel.is-home .gtc-home-hero h1{margin-bottom:0}
  .gtc-panel.is-home .gtc-home-modes{gap:10px}
  .gtc-panel.is-home .gtc-home-modes .gtc-home-mode:not(.is-daily){
    grid-template-columns:42px minmax(0,1fr) auto;
    grid-template-areas:"icon copy cta";
    align-items:center;
    gap:12px;
    padding:12px 12px 12px 14px!important;
  }
  .gtc-panel.is-home .gtc-home-mode:not(.is-daily) .gtc-home-mode-icon{width:42px;height:42px;border-radius:12px;font-size:19px}
  .gtc-panel.is-home .gtc-home-mode:not(.is-daily) .gtc-home-mode-copy{gap:3px;padding:0!important}
  .gtc-panel.is-home .gtc-home-mode:not(.is-daily) .gtc-home-mode-copy strong{font-size:16px}
  .gtc-panel.is-home .gtc-home-mode:not(.is-daily) .gtc-home-mode-copy em{font-size:12.5px;line-height:1.35;color:#bdb5d3}
  .gtc-panel.is-home .gtc-home-mode:not(.is-daily) .ui-mode-status{font-size:11px}
  .gtc-panel.is-home .gtc-home-mode.is-music .gtc-home-mode-copy small,
  .gtc-panel.is-home .gtc-home-mode:not(.is-daily) .gtc-mode-help{display:none}
  .gtc-panel.is-home .gtc-home-modes .gtc-home-mode:not(.is-daily) > b{
    width:auto;
    min-height:38px;
    margin:0;
    padding:0 14px;
    font-size:11px;
    white-space:nowrap;
  }
  /* Em breve / manutenção: linha discreta, sem botão (o selo já diz o estado) */
  .gtc-panel.is-home .gtc-home-modes .gtc-home-mode:is(.is-coming,.is-maintenance) > b{display:none}
  .gtc-panel.is-home .gtc-home-modes .gtc-home-mode:is(.is-coming,.is-maintenance){grid-template-columns:42px minmax(0,1fr);grid-template-areas:"icon copy";opacity:.8}
  .gtc-panel.is-home .gtc-home-mode.is-maintenance .gtc-new-mode-badge{top:12px;right:12px;padding:5px 8px;font-size:9px}
  .gtc-panel.is-home .gtc-home-mode.is-maintenance .gtc-home-mode-copy{padding-right:96px!important}
  .gtc-panel.is-home .gtc-home-mode:not(.is-daily)::after{opacity:.25}
  /* Faixa de obras fina, colada na borda de baixo da linha compacta */
  .gtc-panel.is-home .gtc-home-mode.is-maintenance::after{inset:auto -20px 0 -20px;height:6px;transform:none;opacity:.7}

  /* Todos os cards no mesmo tamanho: o Diário também vira linha compacta */
  .gtc-panel.is-home .gtc-home-modes .gtc-home-mode.is-daily{
    grid-template-columns:42px minmax(0,1fr) auto;
    grid-template-areas:"icon copy cta";
    align-items:center;
    gap:12px;
    padding:12px 12px 12px 14px!important;
  }
  .gtc-panel.is-home .gtc-home-mode.is-daily .gtc-home-mode-icon{width:42px;height:42px;border-radius:12px;font-size:19px}
  .gtc-panel.is-home .gtc-home-mode.is-daily .gtc-home-mode-copy{gap:3px;padding:0}
  .gtc-panel.is-home .gtc-home-mode.is-daily .gtc-home-mode-copy strong{font-size:16px}
  .gtc-panel.is-home .gtc-home-mode.is-daily .gtc-home-mode-copy em{font-size:12.5px;line-height:1.35;color:#bdb5d3}
  .gtc-panel.is-home .gtc-home-mode.is-daily .ui-mode-status{font-size:11px}
  .gtc-panel.is-home .gtc-home-mode.is-daily .ui-mode-status b{font-size:11px}
  .gtc-panel.is-home .gtc-home-mode.is-daily .gtc-mode-help{display:none}
  .gtc-panel.is-home .gtc-home-modes .gtc-home-mode.is-daily > b{width:auto;min-height:38px;margin:0;padding:0 14px;font-size:11px;white-space:nowrap}
  .gtc-panel.is-home .gtc-home-mode.is-daily::after{font-size:56px;opacity:.25}
  .gtc-panel.is-home .gtc-home-modes .gtc-home-mode{height:104px;min-height:104px!important}
  .gtc-panel.is-home .gtc-home-modes .gtc-home-mode > b{padding:0 12px}
  /* Contador do Diário só com o tempo, para caber numa linha */
  .gtc-panel.is-home .gtc-home-mode.is-daily .ui-mode-status.is-live{font-size:0;white-space:nowrap}
  .gtc-panel.is-home .gtc-home-mode.is-daily .ui-mode-status.is-live::before{content:"⏱ ";font-size:11px}
  /* Cabeçalho e selo do hero na largura menor (faixa lateral do Pac-Man) */
  .gtc-header-main{gap:8px;padding:8px 8px 8px 10px}
  .gtc-logo-container{gap:6px;min-width:0}
  .gtc-logo-text{font-size:8px}
  .gtc-profile-btn{max-width:118px;padding:0 8px;font-size:9.5px}
  .gtc-panel.is-home .gtc-home-kicker{white-space:nowrap;font-size:9px;letter-spacing:.06em}
}

/* ==========================================================================
   Ranking no celular — cada jogador vira um card de duas linhas:
   posição | nome e nível em cima | números com rótulo embaixo.
   ========================================================================== */
@media (max-width:560px){
  .gtc-panel .gtc-rank-table-head,
  .gtc-panel .gtc-inf-rank-head{display:none}
  .gtc-panel .gtc-rank-row,
  .gtc-panel .gtc-inf-rank-row{
    grid-template-columns:30px repeat(3,minmax(0,1fr));
    grid-auto-rows:auto;
    gap:8px 8px;
    padding:12px 12px 10px;
    font-size:13px;
  }
  .gtc-panel :is(.gtc-rank-row,.gtc-inf-rank-row) > :first-child{grid-column:1;grid-row:1 / 3;align-self:center}
  .gtc-panel .gtc-rank-row > :nth-child(2){grid-column:2 / 4;grid-row:1;min-width:0}
  .gtc-panel .gtc-rank-row > :nth-child(3){grid-column:4;grid-row:1;justify-self:end}
  .gtc-panel .gtc-inf-rank-row > :nth-child(2){grid-column:2 / 5;grid-row:1;min-width:0}
  .gtc-panel .gtc-inf-rank-row > :nth-child(3){grid-column:5;grid-row:1;justify-self:end}
  .gtc-panel :is(.gtc-rank-row,.gtc-inf-rank-row) > :nth-child(n+4){
    grid-row:2;
    display:flex;
    border-radius:10px;
    color:#fff;
    font:700 13px/1.1 var(--font-display);
    text-align:left;
    justify-self:stretch;
  }
  .gtc-panel :is(.gtc-rank-row,.gtc-inf-rank-row) > :nth-child(n+4)::before{
    color:var(--muted);
    font:600 9px/1 var(--font-body);
    text-transform:uppercase;
  }
  :root[lang^="pt"] .gtc-panel .gtc-rank-row > :nth-child(4)::before{content:"Vitórias"}
  :root[lang^="pt"] .gtc-panel .gtc-rank-row > :nth-child(5)::before{content:"Média"}
  :root[lang^="pt"] .gtc-panel .gtc-rank-row > :nth-child(6)::before{content:"Ofensiva"}
  :root:not([lang^="pt"]) .gtc-panel .gtc-rank-row > :nth-child(4)::before{content:"Wins"}
  :root:not([lang^="pt"]) .gtc-panel .gtc-rank-row > :nth-child(6)::before{content:"Streak"}
  :root[lang^="pt"] .gtc-panel .gtc-inf-rank-row > :nth-child(4)::before{content:"Pontos"}
  :root[lang^="pt"] .gtc-panel .gtc-inf-rank-row > :nth-child(5)::before{content:"Recorde"}
  :root[lang^="pt"] .gtc-panel .gtc-inf-rank-row > :nth-child(6)::before{content:"Modo"}
  :root[lang^="pt"] .gtc-panel .gtc-inf-rank-row > :nth-child(7)::before{content:"Precisão"}
  :root:not([lang^="pt"]) .gtc-panel .gtc-inf-rank-row > :nth-child(4)::before{content:"Points"}
  :root:not([lang^="pt"]) .gtc-panel .gtc-inf-rank-row > :nth-child(5)::before{content:"Record"}
  :root:not([lang^="pt"]) .gtc-panel .gtc-inf-rank-row > :nth-child(6)::before{content:"Mode"}
  :root:not([lang^="pt"]) .gtc-panel .gtc-inf-rank-row > :nth-child(7)::before{content:"Accuracy"}
  .gtc-panel .gtc-rank-row .gtc-rank-player-copy strong,
  .gtc-panel .gtc-inf-rank-row .gtc-rank-player-copy strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px}
  .gtc-panel :is(.gtc-rank-row,.gtc-inf-rank-row) .gtc-xp-badge small{display:none}
  .gtc-panel .gtc-rank-nick > i{display:none}
  :root:not([lang^="pt"]) .gtc-panel .gtc-rank-row > :nth-child(5)::before{content:"Avg."}
  .gtc-body[data-view="ranking"] .gtc-panel{padding-left:10px;padding-right:10px}
  .gtc-panel :is(.gtc-rank-row,.gtc-inf-rank-row){grid-template-columns:24px repeat(3,minmax(0,1fr));}
  .gtc-panel .gtc-inf-rank-row{grid-template-columns:24px repeat(4,minmax(0,1fr))}
  /* Cards mais baixos: números numa linha só, com o rótulo ao lado */
  .gtc-panel :is(.gtc-rank-row,.gtc-inf-rank-row){gap:5px 6px;padding:8px 10px 8px 8px}
  .gtc-panel :is(.gtc-rank-row,.gtc-inf-rank-row) > :nth-child(n+4){
    flex-direction:row;
    align-items:baseline;
    gap:4px;
    padding:0;
    background:none;
    font-size:13px;
    white-space:nowrap;
  }
  .gtc-panel :is(.gtc-rank-row,.gtc-inf-rank-row) > :nth-child(n+4)::before{font-size:8.5px;letter-spacing:.04em}
  .gtc-panel :is(.gtc-rank-row,.gtc-inf-rank-row) .gtc-rank-avatar{width:30px;height:30px;min-width:30px}
  .gtc-panel :is(.gtc-rank-row,.gtc-inf-rank-row) .gtc-equipped-title.is-empty{display:none}
  .gtc-panel :is(.gtc-rank-row,.gtc-inf-rank-row) .gtc-rank-medal{width:24px;height:24px;font-size:11px}
}

/* Carregando (app.js withLoading): aparece só se os dados demorarem */
.gtc-view-loading{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;min-height:260px;color:var(--muted);font:600 13px/1 var(--font-body);letter-spacing:.06em;animation:ui-fade 200ms ease both}
.gtc-view-loading span{width:34px;height:34px;border-radius:50%;border:3px solid rgba(var(--accent-rgb),.25);border-top-color:var(--cyan);animation:ui-spin-rot .7s linear infinite}

/* Toque responde na hora: sem espera por duplo-toque/zoom em botões e links */
button,a,[role="button"],[data-nav],[data-home-view],summary,label,select{touch-action:manipulation}

/* Celular: sem o granulado de filme por cima da tela. Ele obrigava o aparelho a
   misturar cores na tela inteira a cada quadro do fundo animado. */
@media (max-width:900px) and (pointer:coarse){
  html::after,
  :root::after{display:none!important}
}

/* Modo mosaico na capa do Jogo Diário (reveal-modes.js) */
.gtc-reveal-tiles{position:absolute;inset:0;display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(5,1fr);pointer-events:none}
.gtc-reveal-tiles span{background:#1c1533;box-shadow:inset 0 0 0 1px rgba(157,78,221,.45);transition:opacity .45s ease,transform .45s ease}
.gtc-reveal-tiles span.is-open{opacity:0;transform:scale(.6)}
.gtc-daily-title-row{display:flex;align-items:center;flex-wrap:wrap;gap:10px;min-width:0}
.gtc-reveal-badge{display:inline-flex;align-items:center;gap:5px;padding:5px 9px;border-radius:999px;background:rgba(var(--accent-rgb),.14);border:1px solid rgba(var(--accent-rgb),.55);color:#fff;font:600 10px/1 var(--font-mono,monospace);letter-spacing:.06em;white-space:nowrap}