:root{--bg:#0b0d12;--card:#151924;--txt:#f2f4f8;--mut:#a9b0c0;--acc:#e5b84b;--acc2:#c8382f}
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--txt);font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;line-height:1.5}
a{color:inherit;text-decoration:none}
.selo-beta{position:fixed;top:14px;right:14px;z-index:30;display:inline-flex;align-items:center;gap:5px;padding:5px 13px;border:1.5px solid var(--acc);border-radius:99px;background:#0b0d12f0;box-shadow:0 2px 10px #000a;color:var(--acc);font-size:.75rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;transition:filter .2s}
.selo-beta svg{width:14px;height:14px;flex:0 0 auto}
.selo-beta:hover,.selo-beta:focus-visible{filter:brightness(1.2)}
.topo{position:fixed;inset:0 0 auto 0;z-index:20;padding:16px clamp(16px,4vw,56px);opacity:0;pointer-events:none;transition:opacity .3s,background .3s}
.topo.solido{opacity:1;pointer-events:auto;background:#0b0d12ee;backdrop-filter:blur(8px)}
.marca{font-size:1rem;letter-spacing:.04em;color:var(--mut)}
.marca b{color:var(--acc);font-size:1.15rem;text-transform:uppercase;letter-spacing:.14em;margin-left:6px}
.hero{position:relative;z-index:0;width:100%}
.hero-img{display:block;width:100%;height:auto;max-height:92vh;object-fit:cover;object-position:center top}
.hero::after{content:"";position:absolute;inset:auto 0 0 0;height:32%;background:linear-gradient(transparent,var(--bg));pointer-events:none}
.hero-info{position:absolute;z-index:1;inset:auto 0 clamp(14px,3vw,40px) 0;display:flex;flex-direction:column;align-items:center;gap:10px;padding:0 16px;text-align:center}
.hero-info p{max-width:100%;font-weight:600;font-size:clamp(.95rem,1.6vw,1.2rem);text-shadow:0 2px 8px #000}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
#fileiras{scroll-margin-top:70px}
.btn{display:inline-flex;align-items:center;gap:8px;padding:12px 26px;border-radius:6px;font-weight:700;font-size:1rem;border:0;cursor:pointer;font-family:inherit}
.btn-jogar{background:var(--acc);color:#1a1300}
.btn-jogar:hover{filter:brightness(1.1)}
.fileira{position:relative;z-index:1;padding:8px 0 20px}
.fileira h2{font-size:1.25rem;padding:0 clamp(16px,4vw,56px);margin-bottom:12px}
.trilho{display:flex;gap:14px;overflow-x:auto;padding:20px clamp(16px,4vw,56px);margin:-14px 0;scroll-snap-type:x proximity;scroll-padding-inline:clamp(16px,4vw,56px)}
.card{flex:0 0 auto;width:clamp(220px,26vw,340px);aspect-ratio:16/9;border-radius:8px;overflow:hidden;background:var(--card) center/cover;position:relative;cursor:pointer;border:0;padding:0;scroll-snap-align:start;transition:transform .2s,box-shadow .2s}
.card:hover,.card:focus-visible{transform:scale(1.06);box-shadow:0 10px 30px #000a;outline:2px solid var(--acc);z-index:2}
.card span{position:absolute;inset:auto 0 0 0;padding:26px 12px 10px;font-weight:700;text-align:left;color:#fff;background:linear-gradient(transparent,#000d)}
.rodape{padding:40px 16px;text-align:center;color:var(--mut);font-size:.85rem}
.modal{position:fixed;inset:0;z-index:50;background:#000b;display:flex;align-items:center;justify-content:center;padding:16px;overflow-y:auto}
.modal[hidden]{display:none}
.modal-caixa{position:relative;width:min(760px,100%);max-height:calc(100vh - 32px);overflow-y:auto;background:var(--card);border-radius:12px;box-shadow:0 20px 60px #000}
.fechar{position:absolute;top:10px;right:10px;z-index:2;width:38px;height:38px;border-radius:50%;border:0;background:#000a;color:#fff;font-size:1.1rem;cursor:pointer}
.m-capa{aspect-ratio:16/9;background:center/cover}
.m-corpo{padding:22px clamp(18px,4vw,34px) 30px}
.m-corpo h2{font-size:1.8rem}
.m-sub{color:var(--acc);margin-bottom:10px}
.tags{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px}
.tags span{font-size:.78rem;padding:3px 10px;border:1px solid #ffffff40;border-radius:99px;color:var(--mut)}
#m-recursos{margin:14px 0 22px 20px;color:var(--mut);font-size:.95rem}
@media(max-width:600px){.hero-info{position:static;margin-top:12px;padding-bottom:12px}.hero::after{display:none}}
@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto}}