/* ==========================================================================
   skins/arcade.css — tema ARCADE do launcher
   Fantasia: tela de seleção de fase de um fliperama noventista, desenhada
   por um artista de mangá. Sempre escuro; neon rosa como sinal-guia, amarelo
   como acento de moeda/score; retícula (screentone) de mangá.
   Ativa por html[data-skin="arcade"]. Par com skins/arcade.js (arte por app
   + poeira de luz no #skin-fx). Nenhuma regra vaza pra outros temas.
   ========================================================================== */

/* ─── 1. paleta do tema (os módulos compartilhados bebem daqui) ─── */
html[data-skin="arcade"], html[data-skin="arcade"].dark {
  --cream:#0D0C0B; --cream-soft:#161413; --paper:#1B1917;
  --ink:#F5F1E8; --ink-soft:#B8B2A6; --muted:#837D71;
  --border:#2E2A26; --pink-soft:#38121F;
  --shadow-sm:0 2px 10px rgba(0,0,0,.38);
  --shadow-md:0 10px 24px rgba(0,0,0,.5), 0 0 26px rgba(255,45,110,.10);
}
/* escuro por natureza: o botão claro/escuro não existe nesse mundo */
html[data-skin="arcade"] #btn-theme { display:none; }

/* ─── 2. o salão: breu quente + retícula + brilho de letreiro no horizonte ─── */
html[data-skin="arcade"] body.grid-paper {
  background-color:var(--cream);
  background-image:
    radial-gradient(ellipse 100% 52% at 50% -10%, rgba(255,45,110,.17), transparent 74%),
    radial-gradient(rgba(255,255,255,.04) 1px, transparent 1.6px);
  background-size:100% 100%, 22px 22px;
  background-repeat:no-repeat, repeat;
}
/* vinheta de sala escura (fica ATRÁS do conteúdo — não rouba legibilidade) */
html[data-skin="arcade"] #skin-fx {
  background:radial-gradient(ellipse 120% 90% at 50% 30%, transparent 55%, rgba(0,0,0,.5) 100%);
}
/* poeira de luz (nós .ak-mote injetados pelo arcade.js dentro do #skin-fx) */
html[data-skin="arcade"] .ak-mote {
  position:absolute; border-radius:50%; pointer-events:none;
  background:var(--pink); filter:blur(1px);
  animation:akFloat var(--dur,14s) linear infinite;
  opacity:0;
}
html[data-skin="arcade"] .ak-mote.gold { background:var(--yellow); }
@keyframes akFloat {
  0%   { transform:translateY(30px); opacity:0; }
  12%  { opacity:var(--o,.5); }
  88%  { opacity:var(--o,.5); }
  100% { transform:translateY(-60vh); opacity:0; }
}

/* ─── 3. abertura: o letreiro LIGA (flicker 1x), depois os cards acendem ─── */
html[data-skin="arcade"] .hero { padding-top:1.6rem; }
html[data-skin="arcade"] .hero-title {
  font-size:clamp(3.8rem, 12vw, 7.4rem); letter-spacing:.02em; color:#fff;
  text-shadow:0 0 12px rgba(255,45,110,.65), 0 0 44px rgba(255,45,110,.4), 0 0 90px rgba(255,45,110,.22);
  animation:akNeonOn .95s steps(1,end) both;
}
@keyframes akNeonOn {
  0%   { opacity:.12; text-shadow:none; }
  9%   { opacity:.75; text-shadow:0 0 10px rgba(255,45,110,.4); }
  14%  { opacity:.2;  text-shadow:none; }
  23%  { opacity:1;   text-shadow:0 0 12px rgba(255,45,110,.65), 0 0 44px rgba(255,45,110,.4); }
  31%  { opacity:.55; text-shadow:0 0 8px rgba(255,45,110,.3); }
  38%  { opacity:1;   text-shadow:0 0 12px rgba(255,45,110,.65), 0 0 44px rgba(255,45,110,.4), 0 0 90px rgba(255,45,110,.22); }
  100% { opacity:1; }
}
html[data-skin="arcade"] .hero-sub {
  color:var(--yellow); text-shadow:0 0 18px rgba(255,184,0,.35);
  animation:akFadeUp .4s ease-out .75s both;
}
@keyframes akFadeUp { from { opacity:0; transform:rotate(-2deg) translateY(8px); } to { opacity:1; transform:rotate(-2deg) translateY(0); } }

/* cards ligam em cascata como telas de fliperama (flash branco → cor) */
html[data-skin="arcade"] .cards > .card, html[data-skin="arcade"] .cards > .saga-card {
  animation-name:akPowerOn; animation-duration:.5s;
  animation-timing-function:cubic-bezier(.22,1,.36,1); animation-fill-mode:both;
}
@keyframes akPowerOn {
  0%  { opacity:0; transform:translateY(12px) scale(.965); filter:brightness(2.4) saturate(.1); }
  55% { opacity:1; filter:brightness(1.35) saturate(.7); }
  100%{ opacity:1; transform:translateY(0) scale(1); filter:brightness(1) saturate(1); }
}
html[data-skin="arcade"] .cards > *:nth-child(1) { animation-delay:.55s; }
html[data-skin="arcade"] .cards > *:nth-child(2) { animation-delay:.67s; }
html[data-skin="arcade"] .cards > *:nth-child(3) { animation-delay:.79s; }
html[data-skin="arcade"] .cards > *:nth-child(4) { animation-delay:.91s; }
html[data-skin="arcade"] .cards > *:nth-child(5) { animation-delay:1.03s; }

/* ─── 4. topbar: fichas escuras com hover neon ─── */
html[data-skin="arcade"] .tbtn, html[data-skin="arcade"] .waffle-btn {
  background:var(--paper); border-color:#332E29; color:var(--ink-soft); border-radius:9px;
}
html[data-skin="arcade"] .tbtn:hover, html[data-skin="arcade"] .waffle-btn:hover {
  border-color:var(--pink); color:var(--pink); box-shadow:0 0 12px rgba(255,45,110,.25);
}
html[data-skin="arcade"] .kit-badge {
  background:var(--paper); border:1.5px solid var(--pink); color:var(--ink); border-radius:8px;
  box-shadow:0 0 14px rgba(255,45,110,.3), inset 0 0 10px rgba(255,45,110,.08);
}
html[data-skin="arcade"] .kit-badge::before { border-color:var(--pink); box-shadow:0 0 8px var(--pink); }
html[data-skin="arcade"] .skin-menu, html[data-skin="arcade"] #aura-launcher {
  border-color:#3A342E; box-shadow:0 18px 44px rgba(0,0,0,.55), 0 0 24px rgba(255,45,110,.08);
}

/* ─── 5. estante de jogos: grade mais coesa, gabinete com marquee ─── */
html[data-skin="arcade"] .cards { max-width:940px; gap:1.05rem; }
html[data-skin="arcade"] .card, html[data-skin="arcade"] .saga-card {
  background:linear-gradient(180deg, #191614 0%, #14110F 100%);
  border:1px solid #2E2A26; border-radius:12px;
}
html[data-skin="arcade"] .card.live:hover {
  border-color:var(--pink); transform:translateY(-5px);
  box-shadow:0 0 0 1px var(--pink), 0 16px 38px rgba(0,0,0,.55), 0 0 34px rgba(255,45,110,.24);
}
/* colchetes de cursor de jogo — "fecham" no card selecionado */
html[data-skin="arcade"] .card.live::after {
  content:''; position:absolute; inset:6px; border-radius:7px; pointer-events:none; z-index:3;
  opacity:0; transition:opacity .15s, inset .15s;
  background-image:
    linear-gradient(var(--pink),var(--pink)), linear-gradient(var(--pink),var(--pink)),
    linear-gradient(var(--pink),var(--pink)), linear-gradient(var(--pink),var(--pink)),
    linear-gradient(var(--pink),var(--pink)), linear-gradient(var(--pink),var(--pink)),
    linear-gradient(var(--pink),var(--pink)), linear-gradient(var(--pink),var(--pink));
  background-position:top left, top left, top right, top right, bottom left, bottom left, bottom right, bottom right;
  background-size:16px 3px, 3px 16px, 16px 3px, 3px 16px, 16px 3px, 3px 16px, 16px 3px, 3px 16px;
  background-repeat:no-repeat;
  filter:drop-shadow(0 0 6px rgba(255,45,110,.7));
}
html[data-skin="arcade"] .card.live:hover::after,
html[data-skin="arcade"] .card.live:focus-visible::after { opacity:1; inset:10px; }

/* marquee: a tela luminosa do gabinete — escura, com burst de retícula rosa
   e a ARTE NEON do app (injetada pelo arcade.js) como protagonista */
html[data-skin="arcade"] .card-head, html[data-skin="arcade"] .saga-head {
  height:138px;
  background-color:#0F0D0C;
  background-image:
    radial-gradient(circle at 50% 58%, rgba(255,45,110,.38), rgba(255,45,110,0) 66%),
    radial-gradient(rgba(255,45,110,.5) 1.1px, transparent 1.8px);
  background-size:100% 100%, 9px 9px;
  background-repeat:no-repeat, repeat;
  border-bottom:1px solid #2E2A26;
}
/* a arte neon do app */
html[data-skin="arcade"] .ak-art {
  position:absolute; left:50%; top:50%; width:96px; height:96px;
  transform:translate(-50%,-52%); pointer-events:none;
  filter:drop-shadow(0 0 7px rgba(255,45,110,.75)) drop-shadow(0 0 22px rgba(255,45,110,.35));
  transition:transform .22s cubic-bezier(.22,1,.36,1), filter .22s;
}
html[data-skin="arcade"] .ak-art path, html[data-skin="arcade"] .ak-art circle {
  fill:none; stroke:#FF6E9C; stroke-width:4.5; stroke-linecap:round; stroke-linejoin:round;
}
html[data-skin="arcade"] .ak-art .alt { stroke:var(--yellow); }
html[data-skin="arcade"] .ak-art .fill { fill:#FF6E9C; stroke:none; }
html[data-skin="arcade"] .card.live:hover .ak-art {
  transform:translate(-50%,-52%) scale(1.08);
  filter:drop-shadow(0 0 9px rgba(255,45,110,.95)) drop-shadow(0 0 30px rgba(255,45,110,.5));
}
/* o badge da marca vira o "logo do estúdio" no canto do marquee */
html[data-skin="arcade"] .card-ico {
  position:absolute; left:10px; top:10px; width:34px; height:34px; border-radius:9px;
  box-shadow:0 0 12px rgba(255,45,110,.4), 0 2px 0 rgba(0,0,0,.5);
  transition:none;
}
html[data-skin="arcade"] .card-ico b { font-size:1.15rem; }
html[data-skin="arcade"] .card.live:hover .card-ico { transform:none; }
/* selo de categoria como tag de gênero de jogo */
html[data-skin="arcade"] .card-chip, html[data-skin="arcade"] .saga-badge {
  background:rgba(13,11,10,.92); border-color:rgba(255,45,110,.55);
  box-shadow:0 3px 0 rgba(0,0,0,.4), 0 0 14px rgba(255,45,110,.25);
}
html[data-skin="arcade"] .card-chip svg { color:var(--yellow); }
/* logo do Discord no marquee da Saga, no mesmo peso da arte dos apps */
html[data-skin="arcade"] .saga-head-logo {
  width:76px; height:76px;
  filter:drop-shadow(0 0 8px rgba(255,45,110,.8)) drop-shadow(0 0 24px rgba(255,45,110,.4));
}

/* corpo do gabinete */
html[data-skin="arcade"] .card-name { text-shadow:0 0 18px rgba(255,45,110,.25); }
html[data-skin="arcade"] .card-cta, html[data-skin="arcade"] .saga-cta {
  border-radius:9px;
  box-shadow:0 3px 0 var(--pink-dark), 0 0 18px rgba(255,45,110,.35);
}
html[data-skin="arcade"] .card.live:hover .card-cta {
  box-shadow:0 3px 0 var(--pink-dark), 0 0 26px rgba(255,45,110,.6);
}
html[data-skin="arcade"] .card.live:hover .card-cta svg { transform:translateX(3px); }
html[data-skin="arcade"] .card-cta svg { transition:transform .15s; }

/* ─── 6. barra de fichas: a HUD vira o painel do fliperama, fixa embaixo ─── */
@media (min-width:721px) {
  html[data-skin="arcade"] body { padding-bottom:84px; }
  html[data-skin="arcade"] .aura-hud-wrap {
    position:fixed; left:0; right:0; bottom:0; z-index:60; padding:10px 16px;
    background:rgba(13,11,10,.88); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
    border-top:1px solid #2E2A26;
    box-shadow:0 -12px 34px rgba(0,0,0,.5), 0 -1px 0 rgba(255,45,110,.14);
  }
  html[data-skin="arcade"] .aura-hud { background:none; border:none; box-shadow:none; padding:0; }
  /* o FAB de bug sobe pra não brigar com a barra */
  html[data-skin="arcade"] #abr-fab-launcher { bottom:96px !important; }
  html[data-skin="arcade"] main { padding-top:.6rem; }
}
html[data-skin="arcade"] .aura-shop-cta.aura-ghost {
  background:var(--paper); border-color:#332E29;
}
html[data-skin="arcade"] .aura-shop-cta.aura-ghost:hover {
  border-color:var(--pink); box-shadow:0 0 14px rgba(255,45,110,.2);
}
html[data-skin="arcade"] .aura-shop-cta:not(.aura-ghost) {
  box-shadow:0 3px 0 var(--pink-dark), 0 0 20px rgba(255,45,110,.35);
}
html[data-skin="arcade"] .aa-btn { background:var(--paper); border-color:#332E29; }
html[data-skin="arcade"] .aa-btn:hover { box-shadow:0 0 12px rgba(255,45,110,.2); }

/* ─── 7. miudezas do mundo ─── */
html[data-skin="arcade"] .last-tag {
  background:var(--yellow); box-shadow:0 3px 0 rgba(0,0,0,.4), 0 0 16px rgba(255,184,0,.4);
}
html[data-skin="arcade"] footer { color:#6E675C; }
html[data-skin="arcade"] footer a { border-bottom-color:#3A342E; }

/* ─── 8. mobile: marquee um pouco menor, HUD volta pro fluxo ─── */
@media (max-width:720px) {
  html[data-skin="arcade"] .card-head, html[data-skin="arcade"] .saga-head { height:118px; }
  html[data-skin="arcade"] .ak-art { width:80px; height:80px; }
  html[data-skin="arcade"] .saga-head-logo { width:64px; height:64px; }
  html[data-skin="arcade"] .hero-title { font-size:clamp(3.2rem, 15vw, 4.6rem); }
}

/* ─── 9. menos movimento: mundo parado, tudo legível ─── */
@media (prefers-reduced-motion: reduce) {
  html[data-skin="arcade"] .hero-title, html[data-skin="arcade"] .hero-sub,
  html[data-skin="arcade"] .cards > .card, html[data-skin="arcade"] .cards > .saga-card {
    animation:none;
  }
  html[data-skin="arcade"] .ak-mote { animation:none; opacity:0; }
  html[data-skin="arcade"] .card.live::after { transition:none; }
  html[data-skin="arcade"] .ak-art { transition:none; }
}