/* Arcade das Sagas — a vitrine dos jogos do Boreal Times */
.ax{--noite:#0a0716;--noite2:#140f2b;--roxo:#4b2a7b;--verde:#3dffb0;--azul:#5aa9ff;--mag:#c47bff;--ouro:#f0c15a;
  --c-mitos:#f0c15a;--c-sagas:#ff6a5a;--c-viking:#35c8e0;--c-contos:#62d484;
  background:var(--noite);color:#eee9ff;font-family:var(--util,Helvetica,Arial,sans-serif);overflow:hidden}
.ax *{box-sizing:border-box}
.ax a{color:inherit;text-decoration:none}

/* ── Hero ── */
.ax-hero{position:relative;min-height:clamp(560px,86vh,820px);display:flex;align-items:center;justify-content:center;
  overflow:hidden;isolation:isolate;text-align:center}
.ax-ceu{position:absolute;inset:0;z-index:-5;background:linear-gradient(180deg,#05030f 0%,#120a2e 45%,#2a1550 78%,#4b2a7b 100%)}
.ax-estrelas{position:absolute;inset:0;z-index:-4;opacity:.9;
  background-image:radial-gradient(1.6px 1.6px at 12% 18%,#fff,transparent),radial-gradient(1.2px 1.2px at 28% 8%,#fff,transparent),
  radial-gradient(1.8px 1.8px at 44% 22%,#cfe4ff,transparent),radial-gradient(1.2px 1.2px at 63% 12%,#fff,transparent),
  radial-gradient(1.6px 1.6px at 78% 26%,#fff,transparent),radial-gradient(1.2px 1.2px at 90% 10%,#ffe9c4,transparent),
  radial-gradient(1.2px 1.2px at 6% 40%,#fff,transparent),radial-gradient(1.6px 1.6px at 36% 38%,#fff,transparent),
  radial-gradient(1.2px 1.2px at 56% 44%,#cfe4ff,transparent),radial-gradient(1.2px 1.2px at 84% 46%,#fff,transparent);
  background-size:520px 360px;animation:ax-pisca 5s ease-in-out infinite alternate}
.ax-aurora{position:absolute;inset:-10% -10% 20% -10%;z-index:-3;filter:blur(46px);opacity:.85;mix-blend-mode:screen}
.ax-aurora i{position:absolute;border-radius:50%;display:block}
.ax-aurora i:nth-child(1){left:2%;top:6%;width:56%;height:46%;background:radial-gradient(closest-side,rgba(61,255,176,.75),transparent);animation:ax-onda1 14s ease-in-out infinite alternate}
.ax-aurora i:nth-child(2){left:32%;top:0;width:60%;height:50%;background:radial-gradient(closest-side,rgba(90,169,255,.7),transparent);animation:ax-onda2 18s ease-in-out infinite alternate}
.ax-aurora i:nth-child(3){left:58%;top:12%;width:46%;height:40%;background:radial-gradient(closest-side,rgba(196,123,255,.65),transparent);animation:ax-onda1 22s ease-in-out infinite alternate-reverse}
.ax-lua{position:absolute;right:11%;top:11%;width:78px;height:78px;border-radius:50%;z-index:-2;
  background:radial-gradient(circle at 36% 34%,#fffdf0,#f1e7c6 60%,#cdbf93);box-shadow:0 0 50px 14px rgba(255,244,210,.35),0 0 140px 50px rgba(160,140,255,.25)}
.ax-neve{position:absolute;inset:0;width:100%;height:100%;z-index:3;pointer-events:none}
.ax-hero-in{position:relative;z-index:4;padding:72px 22px 150px;max-width:980px}
.ax-runas{font-size:clamp(18px,3.4vw,30px);letter-spacing:.5em;color:var(--ouro);margin:0 0 6px;text-shadow:0 0 18px rgba(240,193,90,.8);animation:ax-brilha 3.2s ease-in-out infinite alternate}
.ax-chapeu{font-size:12px;letter-spacing:.32em;text-transform:uppercase;color:#bfb6e8;margin:0 0 12px;font-weight:700}
.ax-titulo{font-family:var(--display,Georgia,serif);font-weight:800;font-size:clamp(46px,10.5vw,112px);line-height:.98;letter-spacing:-.02em;margin:0 0 18px;padding:0 .04em .14em;
  background:linear-gradient(100deg,#fff 5%,#baffea 28%,#9ec9ff 50%,#e0b8ff 72%,#fff 95%);background-size:220% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;
  filter:drop-shadow(0 4px 30px rgba(120,90,255,.55));animation:ax-desliza 9s ease-in-out infinite alternate}
.ax-lead{font-size:clamp(16px,2.2vw,21px);line-height:1.5;color:#dcd5fb;max-width:680px;margin:0 auto 28px}
.ax-cta{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.ax-btn{display:inline-flex;align-items:center;gap:10px;padding:15px 28px;border-radius:999px;font-weight:800;font-size:16px;letter-spacing:.01em;
  border:2px solid transparent;cursor:pointer;font-family:inherit;transition:transform .2s,box-shadow .2s,background .2s}
.ax-btn-sorteio{background:linear-gradient(135deg,#7b3df0,#c44cff 55%,#ff7ab8);color:#fff;box-shadow:0 8px 30px rgba(160,70,255,.5),inset 0 1px 0 rgba(255,255,255,.35)}
.ax-btn-sorteio:hover{transform:translateY(-3px) scale(1.03);box-shadow:0 14px 40px rgba(180,80,255,.7),inset 0 1px 0 rgba(255,255,255,.4)}
.ax-btn-sec{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.35);color:#fff;backdrop-filter:blur(6px)}
.ax-btn-sec:hover{background:rgba(255,255,255,.18);transform:translateY(-3px)}
.ax-dado{display:inline-block;transition:transform .5s}
.ax-btn-sorteio:hover .ax-dado{transform:rotate(300deg) scale(1.2)}
.ax-btn:focus-visible,.ax-chip:focus-visible,.ax-card:focus-visible{outline:3px solid var(--verde);outline-offset:3px}
.ax-stats{list-style:none;padding:0;margin:34px 0 0;display:flex;justify-content:center;gap:clamp(18px,5vw,56px)}
.ax-stats li{display:flex;flex-direction:column;align-items:center}
.ax-stats b{font-family:var(--display,Georgia,serif);font-size:clamp(30px,5vw,46px);color:var(--ouro);line-height:1;text-shadow:0 0 22px rgba(240,193,90,.55)}
.ax-stats span{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:#bfb6e8;margin-top:6px}

.ax-montes{position:absolute;left:-2%;width:104%;bottom:-1px;z-index:2;display:block}
.ax-m3{height:44%;fill:#241a4a;opacity:.85;z-index:1}
.ax-m2{height:34%;fill:#171034;z-index:2}
.ax-m1{height:24%;fill:#0a0716;z-index:5}
.ax-navio{position:absolute;bottom:17%;left:0;width:clamp(120px,15vw,210px);z-index:3;filter:drop-shadow(0 10px 18px rgba(0,0,0,.5));
  animation:ax-navega 70s linear infinite}
.ax-navio svg{width:100%;height:auto;display:block;animation:ax-balanca 4.5s ease-in-out infinite}

/* ── Corpo ── */
.ax-corpo{background:linear-gradient(180deg,#0a0716 0%,#120d28 40%,#0a0716 100%);padding:34px 0 90px;position:relative}
.ax-corpo::before{content:"";position:absolute;inset:0;opacity:.5;pointer-events:none;
  background:radial-gradient(60% 30% at 15% 20%,rgba(90,169,255,.12),transparent),radial-gradient(50% 30% at 85% 55%,rgba(196,123,255,.12),transparent)}
.ax-env{max-width:1240px;margin:0 auto;padding:0 22px;position:relative}
.ax-filtros{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin:0 0 30px}
.ax-chip{display:inline-flex;align-items:center;gap:8px;padding:10px 18px;border-radius:999px;border:1.5px solid rgba(255,255,255,.22);
  background:rgba(255,255,255,.05);color:#e9e4ff;font-weight:700;font-size:13px;letter-spacing:.04em;cursor:pointer;font-family:inherit;transition:all .2s}
.ax-chip i{width:10px;height:10px;border-radius:50%;background:currentColor;box-shadow:0 0 10px currentColor}
.ax-chip em{font-style:normal;font-size:11px;background:rgba(255,255,255,.14);padding:2px 8px;border-radius:99px}
.ax-chip:hover{background:rgba(255,255,255,.14);transform:translateY(-2px)}
.ax-chip.ax-ativo{background:#fff;color:#1a1033;border-color:#fff;box-shadow:0 6px 24px rgba(255,255,255,.22)}
.ax-chip.ax-ativo em{background:rgba(26,16,51,.12)}
.ax-chip.ax-c-mitos{color:var(--c-mitos)}.ax-chip.ax-c-sagas{color:var(--c-sagas)}.ax-chip.ax-c-viking{color:var(--c-viking)}.ax-chip.ax-c-contos{color:var(--c-contos)}
.ax-chip.ax-ativo.ax-c-mitos,.ax-chip.ax-ativo.ax-c-sagas,.ax-chip.ax-ativo.ax-c-viking,.ax-chip.ax-ativo.ax-c-contos{color:#1a1033}
.ax-h2{font-family:var(--display,Georgia,serif);font-size:clamp(26px,4vw,40px);text-align:center;margin:0 0 30px;color:#fff;scroll-margin-top:70px}
.ax-h2::after{content:"ᛟ";display:block;color:var(--ouro);font-size:22px;margin-top:6px;opacity:.9}

.ax-grade{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:22px}
.ax-card{--cor:#888;position:relative;display:block;min-height:340px;border-radius:20px;overflow:hidden;background:#1a1236;
  border:1.5px solid rgba(255,255,255,.12);isolation:isolate;transform-style:preserve-3d;
  transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s,border-color .35s;
  opacity:0;transform:translateY(34px) scale(.97)}
.ax-card.ax-in{opacity:1;transform:none;transition:opacity .7s ease calc(var(--i)%6*70ms),transform .7s cubic-bezier(.2,.8,.2,1) calc(var(--i)%6*70ms),box-shadow .35s,border-color .35s}
.ax-card.ax-in.ax-tilt{transition:box-shadow .35s,border-color .35s}
.ax-c-mitos{--cor:var(--c-mitos)}.ax-c-sagas{--cor:var(--c-sagas)}.ax-c-viking{--cor:var(--c-viking)}.ax-c-contos{--cor:var(--c-contos)}
.ax-card:hover,.ax-card:focus-visible{border-color:var(--cor);box-shadow:0 0 0 1px var(--cor),0 20px 50px rgba(0,0,0,.55),0 0 46px -6px var(--cor)}
.ax-img{position:absolute;inset:0;z-index:-3;background:linear-gradient(140deg,var(--cor),#1a1236 80%)}
.ax-img img{width:100%;height:100%;object-fit:cover;background:transparent;transition:transform .8s cubic-bezier(.2,.8,.2,1),filter .5s;filter:saturate(1.08)}
.ax-card:hover .ax-img img{transform:scale(1.1);filter:saturate(1.3) brightness(1.06)}
.ax-veu{position:absolute;inset:0;z-index:-2;background:linear-gradient(180deg,rgba(10,7,22,.1) 0%,rgba(10,7,22,.15) 30%,rgba(10,7,22,.92) 82%)}
.ax-brilho{position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:0;transition:opacity .3s;
  background:radial-gradient(240px circle at var(--mx,50%) var(--my,30%),rgba(255,255,255,.28),transparent 60%)}
.ax-card:hover .ax-brilho{opacity:1}
.ax-tag{position:absolute;left:14px;top:14px;font-size:10.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#120b26;
  background:var(--cor);padding:5px 11px;border-radius:99px;box-shadow:0 4px 14px rgba(0,0,0,.35)}
.ax-tipo{position:absolute;left:14px;top:46px;font-size:12px;font-weight:700;color:#fff;background:rgba(10,7,22,.62);backdrop-filter:blur(6px);
  padding:5px 11px;border-radius:99px;border:1px solid rgba(255,255,255,.2)}
.ax-novo{position:absolute;right:14px;top:14px;background:linear-gradient(90deg,#ff3d77,#ff9a3d);color:#fff;font-weight:900;font-size:11px;
  letter-spacing:.16em;text-transform:uppercase;padding:6px 13px;border-radius:99px;box-shadow:0 4px 14px rgba(255,61,119,.5);animation:ax-pulsa 2.2s ease-in-out infinite}
.ax-info{position:absolute;left:0;right:0;bottom:0;padding:18px 18px 18px;display:flex;flex-direction:column;gap:8px;transform:translateY(46px);transition:transform .4s cubic-bezier(.2,.8,.2,1)}
.ax-card:hover .ax-info,.ax-card:focus-visible .ax-info{transform:none}
.ax-tit{font-family:var(--display,Georgia,serif);font-size:24px;line-height:1.12;color:#fff;text-shadow:0 2px 14px rgba(0,0,0,.7)}
.ax-desc{font-size:13.5px;line-height:1.45;color:#d9d2f4;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.ax-jogar{align-self:flex-start;display:inline-flex;gap:8px;align-items:center;font-weight:800;font-size:13px;letter-spacing:.06em;text-transform:uppercase;
  color:#120b26;background:var(--cor);padding:9px 16px;border-radius:99px;opacity:0;transform:translateY(8px);transition:all .35s .05s}
.ax-jogar i{font-style:normal;font-size:11px}
.ax-card:hover .ax-jogar,.ax-card:focus-visible .ax-jogar{opacity:1;transform:none}
.ax-card[hidden]{display:none}
.ax-card.ax-sorte{animation:ax-roleta .22s ease-in-out infinite alternate;border-color:#fff;box-shadow:0 0 0 3px #fff,0 0 60px 6px var(--cor)}
.ax-card.ax-sorteado{border-color:#fff;box-shadow:0 0 0 4px #fff,0 0 90px 14px var(--cor);transform:scale(1.04) translateY(-6px);animation:none}

.ax-pilares{list-style:none;padding:0;margin:70px 0 0;display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px}
.ax-pilares li{display:flex;flex-direction:column;gap:6px;padding:22px;border-radius:16px;background:linear-gradient(160deg,rgba(255,255,255,.08),rgba(255,255,255,.02));border:1px solid rgba(255,255,255,.12)}
.ax-pil-i{font-size:30px}
.ax-pilares b{font-family:var(--display,Georgia,serif);font-size:20px;color:#fff}
.ax-pilares span:last-child{color:#cfc7ef;font-size:14.5px;line-height:1.5}
.ax-fim{margin:60px auto 0;max-width:760px;text-align:center;padding:34px 26px;border-radius:22px;border:1px dashed rgba(240,193,90,.5);background:rgba(240,193,90,.05)}
.ax-fim-texto,.ax-fim-texto p{color:#d9d2f4;font-size:15.5px;line-height:1.6;margin:0 0 18px}

@keyframes ax-pisca{from{opacity:.55}to{opacity:1}}
@keyframes ax-brilha{from{opacity:.6;text-shadow:0 0 8px rgba(240,193,90,.4)}to{opacity:1;text-shadow:0 0 26px rgba(240,193,90,.95)}}
@keyframes ax-desliza{from{background-position:0% 0}to{background-position:100% 0}}
@keyframes ax-onda1{from{transform:translate(-8%,0) scale(1)}to{transform:translate(14%,10%) scale(1.25)}}
@keyframes ax-onda2{from{transform:translate(10%,6%) scale(1.2)}to{transform:translate(-12%,-4%) scale(.9)}}
@keyframes ax-navega{from{transform:translateX(-30vw)}to{transform:translateX(112vw)}}
@keyframes ax-balanca{0%,100%{transform:translateY(0) rotate(-1.6deg)}50%{transform:translateY(7px) rotate(1.6deg)}}
@keyframes ax-pulsa{0%,100%{filter:brightness(1)}50%{filter:brightness(1.3)}}
@keyframes ax-roleta{from{transform:scale(1)}to{transform:scale(1.045)}}

@media(max-width:640px){
  .ax-hero{min-height:620px}
  .ax-lua{width:54px;height:54px;right:7%;top:6%}
  .ax-hero-in{padding:56px 18px 150px}
  .ax-btn{width:100%;justify-content:center}
  .ax-grade{grid-template-columns:1fr}
  .ax-card{min-height:300px}
  .ax-info{transform:none}.ax-jogar{opacity:1;transform:none}
}
@media(hover:none){.ax-info{transform:none}.ax-jogar{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){
  .ax *,.ax *::before,.ax *::after{animation:none!important;transition:none!important}
  .ax-card{opacity:1;transform:none}
  .ax-navio{left:55%}
}

body:has(.ax) .rodape{margin-top:0}