@import url('/studio-base.css');
:root{color-scheme:dark;--paper:var(--s-text,#f2f2f2);--muted:var(--s-muted,#a8a8a8);--lime:var(--s-tox,#9bff3a);--pink:var(--s-hot,#ff2e88);--line:var(--s-line,#262626)}
*{box-sizing:border-box}body{margin:0;background:var(--s-bg,#050505);color:var(--paper);font:16px/1.6 var(--s-body,Inter,system-ui,sans-serif)}a{color:inherit}button,a{touch-action:manipulation}button{font:inherit}header,main,footer{max-width:1200px;margin:auto;padding:24px}header{display:flex;align-items:center;justify-content:space-between;gap:18px;border-bottom:1px solid var(--line)}.brand{text-decoration:none;font-size:23px;letter-spacing:-1px;font-weight:900}.brand b{color:var(--pink)}.links{display:flex;gap:22px;font-size:14px;flex-wrap:wrap}.links a{text-decoration:none}.eyebrow{text-transform:uppercase;letter-spacing:3px;color:var(--lime);font-size:12px;font-weight:800}h1{font-size:clamp(44px,7vw,88px);line-height:1;letter-spacing:-4px;margin:18px 0 24px}h1 em{font-style:normal;color:var(--lime)}h2{letter-spacing:-1px;font-size:28px}.intro{padding:58px 0 38px;max-width:850px}.lead{font-size:20px;color:var(--muted);max-width:640px}.pill{padding:5px 12px;border:1px solid var(--line);border-radius:100px;font-size:12px;display:inline-block}.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.card{background:var(--s-bg-2,#0d0d0d);border:1px solid var(--line);border-radius:10px;overflow:hidden}.card a{text-decoration:none}.cover{aspect-ratio:16/11;position:relative;overflow:hidden;background:radial-gradient(at 60% 40%,#758c54,#223c32 80%)}.cover.space{background:radial-gradient(at 50% 40%,#583f8c,#171d3e 75%)}.cover.sea{background:radial-gradient(at 60% 20%,#237a83,#122e45 80%)}.cover .sprite{position:absolute;width:54%;height:auto;aspect-ratio:1;left:23%;top:7%;filter:drop-shadow(0 18px 12px #0006)}.cover .small{width:25%;left:70%;top:58%;transform:rotate(-12deg)}.cover span.label{position:absolute;bottom:12px;left:15px;letter-spacing:3px;font-size:11px;font-weight:800}.content{padding:22px}.content h2{margin:0 0 6px}.content p{color:var(--muted);font-size:14px;min-height:46px}.btn{background:var(--lime);color:#050505;border:0;border-radius:8px;font-weight:800;padding:12px 20px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;text-decoration:none;gap:8px}.btn.secondary{background:transparent;border:1px solid #ffffff36;color:var(--paper)}.actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}.pack{display:grid;grid-template-columns:1fr 1fr;gap:36px;align-items:center;margin:60px 0;background:var(--s-bg-2,#0d0d0d);border:1px solid var(--line);padding:32px;border-radius:10px}.pack img{width:100%;max-height:330px;object-fit:contain;image-rendering:pixelated}.pack p{color:var(--muted)}.sprite{display:inline-block;background-image:url('/arcade/assets/fliper-arcade-atlas.png');background-size:400% 400%;background-position:calc(var(--col,0)*100%/3) calc(var(--row,0)*100%/3);image-rendering:pixelated;width:96px;height:96px}footer{border-top:1px solid var(--line);color:var(--muted);font-size:12px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px}footer a{margin-left:14px}.game-heading{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:24px 0}.game-heading h1{font-size:32px;letter-spacing:-1.2px;margin:6px 0}.game-heading p{margin:0;color:var(--muted);font-size:14px}.game-layout{display:grid;grid-template-columns:minmax(0,1fr) 255px;gap:24px}.stage{position:relative;min-width:0;border-radius:16px;overflow:hidden;border:1px solid #ffffff30;background:#182b30;aspect-ratio:16/10}canvas{width:100%;height:100%;display:block;touch-action:none;outline-offset:-4px}.hud{position:absolute;inset:12px 12px auto;display:flex;justify-content:space-between;align-items:center;gap:12px;pointer-events:none;font-size:13px;font-weight:800}.hud>span{background:#0a1526cf;padding:7px 10px;border:1px solid #ffffff20;border-radius:7px;backdrop-filter:blur(6px)}.overlay{position:absolute;inset:0;display:grid;place-content:center;padding:24px;text-align:center;background:#101d2cb8;backdrop-filter:blur(7px)}.overlay[hidden]{display:none}.overlay h2{font-size:clamp(26px,5vw,46px);line-height:1.1;max-width:450px;margin:12px auto}.overlay p{max-width:370px;color:#e0e6de;margin:12px auto}.overlay .actions{justify-content:center}.overlay .eyebrow{margin:auto}.overlay .sprite{width:100px;height:100px;margin:auto}.controlbar{display:flex;gap:10px;justify-content:space-between;margin-top:12px;align-items:center}.controlbar button{background:#18181c;border:1px solid #ffffff30;color:var(--paper);font-size:13px;border-radius:8px;padding:8px 13px;cursor:pointer}.controlbar #action{min-width:130px;background:var(--lime);color:#111;font-weight:800;user-select:none;touch-action:none}.sidebar{border:1px solid var(--line);border-radius:16px;background:var(--s-bg-2,#0d0d0d);padding:22px;font-size:14px}.sidebar h2{font-size:19px;margin:0 0 10px}.sidebar p{color:var(--muted)}.sidebar .btn{width:100%;font-size:13px;padding:11px;margin:6px 0}.kbd{font-size:12px;padding:3px 7px;background:#26262c;border-radius:4px;white-space:nowrap}.status{min-height:24px;color:var(--lime);font-size:13px}.notice{font-size:12px;color:var(--muted);margin:22px 0 40px}.instructions{color:var(--muted);font-size:13px}.links a:hover,.content a:hover h2{color:var(--lime)}a:focus-visible,button:focus-visible{outline:3px solid var(--pink);outline-offset:3px}
@media(max-width:850px){.grid{grid-template-columns:1fr}.cover{aspect-ratio:2}.cover .sprite{width:38%;left:32%;top:-10%}.cover .small{width:18%;left:73%;top:48%}.game-layout{grid-template-columns:1fr}.sidebar{display:grid;grid-template-columns:1fr 1fr;gap:8px 20px}.sidebar h2,.sidebar p{margin:0}.pack{margin:32px 0;padding:22px;gap:20px}.game-heading{padding-top:10px}.game-heading>.pill{display:none}}
@media(max-width:540px){header,main,footer{padding:17px}.links{gap:12px;font-size:12px}.intro{padding:34px 0 24px}h1{letter-spacing:-2px}.lead{font-size:17px}.pack{grid-template-columns:1fr}.pack img{max-height:230px}.stage{aspect-ratio:4/3}.game-heading h1{font-size:28px}.hud{inset:8px 8px auto;font-size:11px;gap:4px}.hud>span{padding:5px 7px}.sidebar{display:block}.sidebar p{margin:10px 0}.overlay{padding:15px}.overlay .sprite{width:60px;height:60px}.overlay p{font-size:13px}.overlay h2{margin:7px auto}.overlay .actions{margin-top:10px}.controlbar{gap:6px}.controlbar button{padding:9px 10px}.controlbar #action{min-width:100px}}

/* Mesmo sistema visual do Studio; a arte de cada jogo mantém sua paleta. */
h1,h2,.brand{font-family:var(--s-head,Archivo,Impact,sans-serif)}
header{max-width:1200px;min-height:82px}.brand{display:flex;align-items:center;gap:12px;font-weight:900;letter-spacing:-.7px;text-transform:uppercase;font-size:24px;line-height:1}.brand b{color:var(--paper)}.brand i{color:var(--pink);font-style:normal}.brand small{font:600 10px/1 Inter,system-ui;letter-spacing:.13em;color:var(--lime);border-left:1px solid var(--line);padding:7px 0 7px 12px}.links{align-items:center;gap:20px}.links .nav-cta{border:1px solid var(--line);border-radius:6px;padding:9px 13px;background:#131313;font-weight:700}.links .nav-cta:hover{border-color:var(--lime)}
.intro{position:relative;padding:64px 0 42px}.intro:before{content:'';position:absolute;left:0;top:34px;width:42px;height:3px;background:var(--pink)}.intro h1{font-weight:900;letter-spacing:-3px}.eyebrow{color:var(--pink)}.lead{line-height:1.7;font-size:18px}.grid{gap:22px}.card{transition:border-color .2s,transform .2s}.card:hover{border-color:#555;transform:translateY(-3px)}.cover span.label{background:#08080be8;padding:5px 9px;border:1px solid #ffffff30;border-radius:4px;letter-spacing:1px;bottom:14px}.content{padding:23px}.content h2{font-size:26px}.content .btn{background:var(--pink);color:white;min-height:44px}.content .btn:hover{background:#ed1477}.btn{min-height:44px;border-radius:6px}.pack{border-top:3px solid var(--lime)}.game-heading .eyebrow{color:var(--pink)}footer{margin-top:30px;padding-top:24px;padding-bottom:30px}
@media(min-width:650px) and (max-width:1000px){.grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:650px){header{align-items:start;flex-direction:column;gap:18px;padding-top:20px;padding-bottom:18px}.brand{font-size:23px}.links{width:100%;justify-content:space-between;gap:12px}.links .nav-cta{padding:7px 10px}.intro{padding-top:44px}.intro:before{top:20px}.intro h1{letter-spacing:-2px}.lead{font-size:16px}.content h2{font-size:25px}.content p{min-height:0}.card:hover{transform:none}}
@media(prefers-reduced-motion:reduce){.card{transition:none}.card:hover{transform:none}}