/* /js/jogos/fortnite/fortnite.css -- hub do Fortnite (mockup aprovado docs/mockups/fortnite/hub-fortnite.html, 04/11/2026).
   Cenário do Fortnite: céu em degradê, nuvens à deriva e o ônibus de batalha sob o balão (regra 11); feixe de luz do site nos cards (regra 20,
   public/artes/feixe-onda.css). Letra mínima 15px (regra 18); cartões da mesma fileira alinhados (regra 25). */
#ftApp{--ft-ac:#4da3ff;--ft-viol:#b36bff;--ft-gold:#ffcb3d;--ft-line:var(--line,#28324a);display:grid;gap:30px;padding-bottom:50px;color:var(--t-hi,#f1f4fa)}
#ftApp[hidden]{display:none!important}
#ftApp h1,#ftApp h2,#ftApp h3{font-family:var(--display);margin:0;line-height:1.1;text-wrap:balance}
#ftApp p{margin:0}
#ftApp .ft-num{font-variant-numeric:tabular-nums}

#ftApp .ft-cab{position:relative;border:1px solid rgba(77,163,255,.4);border-radius:18px;padding:26px;overflow:hidden;isolation:isolate;display:grid;gap:14px;align-content:end;min-height:240px;
  background:linear-gradient(180deg,#14307a 0%,#4a2a9c 52%,#a14fb5 100%)}
#ftApp .ft-cenario{position:absolute;inset:0;z-index:-1;pointer-events:none}
#ftApp .ft-nuvem{position:absolute;height:34px;border-radius:999px;background:rgba(255,255,255,.14);filter:blur(1px);animation:ft-deriva 38s linear infinite;left:-30%}
#ftApp .ft-n1{top:48%;width:230px}
#ftApp .ft-n2{top:22%;width:150px;animation-duration:52s;animation-delay:-20s}
#ftApp .ft-n3{top:70%;width:110px;animation-duration:44s;animation-delay:-8s}
@keyframes ft-deriva{from{left:-30%}to{left:110%}}
#ftApp .ft-balao{position:absolute;top:14%;right:9%;font-size:44px;animation:ft-flutua 5s ease-in-out infinite;filter:drop-shadow(0 8px 12px rgba(0,0,0,.4))}
@keyframes ft-flutua{50%{transform:translateY(12px) rotate(-3deg)}}
#ftApp .ft-faixa{position:absolute;left:0;right:0;top:0;height:4px;background:linear-gradient(90deg,var(--ft-ac),var(--ft-viol),var(--ft-gold))}
#ftApp .ft-cab h1{font-size:clamp(34px,5vw,56px);font-weight:900}
#ftApp .ft-lead{color:#e1e6f5;max-width:62ch;font-size:16px}
#ftApp .ft-aviso{font-size:15px;color:#cfd6ea;border-left:3px solid rgba(255,255,255,.35);padding-left:12px}
#ftApp .ft-selos{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
#ftApp .ft-selo{display:inline-flex;align-items:center;gap:8px;font:500 15px var(--mono,monospace);letter-spacing:.06em;text-transform:uppercase;border-radius:999px;padding:6px 14px;border:1px solid}
#ftApp .ft-selo i{width:9px;height:9px;border-radius:3px;background:currentColor}
#ftApp .ft-obra{color:var(--ft-gold);border-color:rgba(255,203,61,.55);background:rgba(36,26,4,.78)}
#ftApp .ft-vivo{color:#38d6a0;border-color:rgba(56,214,160,.55);background:rgba(5,24,18,.78)}
#ftApp .ft-vivo i{border-radius:50%;animation:ft-pulsa 1.6s infinite}
@keyframes ft-pulsa{50%{opacity:.25}}

#ftApp .ft-sec{display:grid;gap:14px;scroll-margin-top:70px}
#ftApp .ft-sec-h{display:flex;gap:12px 16px;align-items:baseline;flex-wrap:wrap}
#ftApp .ft-sec-h h2{font-size:clamp(22px,2.6vw,28px);font-weight:800}
#ftApp .ft-sec-h p{color:var(--t-mid,#a9b3c7);flex:1 1 260px;font-size:15px}
#ftApp .ft-card{border:1px solid var(--ft-line);border-radius:14px;background:var(--card,#131a2b);padding:16px;display:grid;gap:8px;align-content:start;grid-template-rows:auto auto 1fr}
#ftApp .ft-rot{font:500 15px var(--mono,monospace);letter-spacing:.06em;text-transform:uppercase;color:var(--t-low,#8b96ad)}
#ftApp .ft-v{font:700 30px/1 var(--display);font-variant-numeric:tabular-nums}
#ftApp .ft-nota{font:500 15px var(--mono,monospace);color:var(--t-low,#8b96ad)}
#ftApp .ft-resumo{display:grid;grid-template-columns:minmax(0,1.2fr) repeat(3,minmax(0,1fr));gap:14px;align-items:stretch}
@media(max-width:1000px){#ftApp .ft-resumo{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){#ftApp .ft-resumo{grid-template-columns:1fr}}

#ftApp .ft-filtros{display:grid;gap:12px;border:1px solid var(--ft-line);border-radius:14px;background:var(--card,#131a2b);padding:14px;position:relative;z-index:1}
#ftApp .ft-lin{display:flex;gap:8px 12px;flex-wrap:wrap;align-items:center}
#ftApp .ft-lin .ft-rot{min-width:86px}
#ftApp .ft-chips{display:flex;gap:8px;flex-wrap:wrap}
#ftApp .ft-ficha{font:600 15px var(--body,inherit);color:inherit;background:rgba(255,255,255,.05);border:1px solid var(--line-hi,#3a4766);border-radius:999px;padding:7px 14px;cursor:pointer;min-height:40px}
#ftApp .ft-ficha[aria-pressed="true"]{border-color:var(--ft-ac);box-shadow:inset 0 0 0 1px var(--ft-ac);color:#9fd0ff}
#ftApp .ft-ficha:focus-visible,#ftApp .ft-busca:focus-visible,#ftApp .ft-gav summary:focus-visible{outline:2px solid var(--ft-ac);outline-offset:2px}
#ftApp .ft-busca{flex:1 1 220px;min-width:0;background:rgba(255,255,255,.05);border:1px solid var(--line-hi,#3a4766);border-radius:10px;color:inherit;font:inherit;font-size:15px;padding:8px 12px;min-height:40px}

#ftApp .ft-grade{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
@media(max-width:1180px){#ftApp .ft-grade{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:860px){#ftApp .ft-grade{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:480px){#ftApp .ft-grade{grid-template-columns:1fr}}
#ftApp .ft-it{--r:#9aa4b5;border:1px solid var(--ft-line);border-top:4px solid var(--r);border-radius:14px;background:var(--card,#131a2b);display:grid;grid-template-rows:auto auto auto auto 1fr auto;gap:8px;padding:14px;position:relative;overflow:hidden}
#ftApp .ft-r-comum{--r:#9aa4b5}#ftApp .ft-r-incomum{--r:#60aa3a}#ftApp .ft-r-raro{--r:#2cb7ff}#ftApp .ft-r-epico{--r:#b36bff}
#ftApp .ft-r-lendario{--r:#ffb347}#ftApp .ft-r-serie{--r:#ff6fb5}#ftApp .ft-r-neutro{--r:#4da3ff}
#ftApp .ft-arte{height:150px;border-radius:10px;display:grid;place-items:center;overflow:hidden;background:linear-gradient(160deg,color-mix(in srgb,var(--r) 38%,#0b1020),#0b1020)}
#ftApp .ft-arte img{max-width:100%;max-height:100%;object-fit:contain}
#ftApp .ft-q{display:grid;place-items:center;font:700 34px var(--display);color:var(--t-low,#8b96ad)}
#ftApp .ft-it h3{font-size:19px;font-weight:800;min-height:2.2em;display:flex;align-items:center}
#ftApp .ft-tipo{color:var(--t-mid,#a9b3c7);font-size:15px}
#ftApp .ft-raro{font:500 15px var(--mono,monospace);letter-spacing:.04em;text-transform:uppercase;color:var(--r)}
#ftApp .ft-rod{display:flex;justify-content:space-between;align-items:center;gap:10px;border-top:1px solid var(--ft-line);padding-top:10px;align-self:end}
#ftApp .ft-vb{font:700 19px var(--display);display:inline-flex;align-items:center;gap:6px}
#ftApp .ft-vb i{width:16px;height:16px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#bfe3ff,#4da3ff 60%,#2a63c9);display:inline-block}
#ftApp .ft-sai{font:500 15px var(--mono,monospace);color:var(--t-low,#8b96ad);font-variant-numeric:tabular-nums;text-align:right}
#ftApp .ft-vazio,#ftApp .ft-msg{padding:14px;border:1px solid var(--ft-line);border-radius:12px;background:var(--card,#131a2b);font-size:15px;display:flex;gap:12px;align-items:center;flex-wrap:wrap}

#ftApp .ft-gav{border:1px dashed var(--line-hi,#3a4766);border-radius:12px;background:var(--bg-alt,#0e1220)}
#ftApp .ft-gav>summary{cursor:pointer;padding:12px 16px;font-weight:600;color:var(--t-mid,#a9b3c7);font-size:15px;min-height:44px;display:flex;align-items:center}
#ftApp .ft-gav>div{padding:0 12px 12px}
#ftApp .ft-gav>.ft-grade{padding-top:12px}

#ftApp .ft-mapa{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:14px;align-items:stretch}
@media(max-width:860px){#ftApp .ft-mapa{grid-template-columns:1fr}}
#ftApp .ft-mapa-img{border:1px solid var(--ft-line);border-radius:14px;overflow:hidden;background:#13304f;min-height:240px;display:grid;place-items:center}
#ftApp .ft-mapa-img img{width:100%;height:auto;display:block}
#ftApp .ft-pois{display:grid;border:1px solid var(--ft-line);border-radius:12px;background:var(--card,#131a2b);overflow:hidden;align-content:start}
#ftApp .ft-pois>div{padding:11px 14px;border-bottom:1px solid var(--ft-line);display:flex;justify-content:space-between;gap:12px}
#ftApp .ft-pois>div:last-child{border-bottom:0}
#ftApp .ft-nots{display:grid;border:1px solid var(--ft-line);border-radius:12px;background:var(--card,#131a2b);overflow:hidden}
#ftApp .ft-not{display:grid;grid-template-columns:140px minmax(0,1fr);gap:14px;padding:12px 14px;border-bottom:1px solid var(--ft-line);align-items:center}
#ftApp .ft-not:last-child{border-bottom:0}
#ftApp .ft-not img,#ftApp .ft-not .ft-q{width:140px;height:78px;object-fit:cover;border-radius:8px;background:rgba(255,255,255,.05)}
#ftApp .ft-not p{color:var(--t-mid,#a9b3c7);font-size:15px;margin-top:4px}
@media(max-width:560px){#ftApp .ft-not{grid-template-columns:1fr}#ftApp .ft-not img,#ftApp .ft-not .ft-q{width:100%;height:auto;aspect-ratio:16/9}}
#ftApp .ft-rodape{padding-top:18px;border-top:1px solid var(--ft-line);color:var(--t-low,#8b96ad);font-size:15px;display:grid;gap:6px}
@media(prefers-reduced-motion:reduce){#ftApp *{animation:none!important;transition:none!important}}