/* PONG Retro Arcade — estilos. Tamanhos usam cqw (relativos à largura da tela do jogo) para manter as proporções em qualquer aparelho. */
:root{box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px);--fg:#33ff66;--bg:#07080c;--px:"Press Start 2P","Courier New",monospace}
*,*:before,*:after{box-sizing:inherit}
html{scroll-padding-top:env(safe-area-inset-top,0px);height:100%}
body{margin:0;min-height:100%;background:radial-gradient(ellipse at center,#161a24 0%,var(--bg) 70%);color:var(--fg);font-family:var(--px);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:12px;user-select:none;-webkit-user-select:none;touch-action:none}
.cab{width:100%;max-width:min(720px,calc((100vh - 112px)*1.6 + 28px));max-width:min(720px,calc((100dvh - 112px)*1.6 + 28px));padding:14px;border-radius:22px;background:linear-gradient(#2a2d38,#14161d);box-shadow:0 0 0 2px #0a0b10,0 20px 50px #000a,inset 0 2px 0 #4a4e5e}
.screen{position:relative;border-radius:16px;overflow:hidden;background:#000;box-shadow:inset 0 0 40px #000,0 0 0 3px #05060a;transition:transform .05s}
canvas{display:block;width:100%;height:auto;image-rendering:pixelated}
.screen:after{content:"";position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,#0000 0 2px,#0004 2px 3px),radial-gradient(ellipse at center,#0000 55%,#000b 100%);animation:fl 5s infinite}
@keyframes fl{0%,100%{opacity:1}50%{opacity:.93}}
.ov{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;text-align:center;z-index:2;padding:8px;text-shadow:0 0 8px var(--fg);overflow:auto}
.ov{touch-action:pan-y}.grid2{touch-action:pan-y}
.ov.hide{display:none}
h1{margin:0;font-size:clamp(24px,8vw,46px);font-weight:400;letter-spacing:6px;text-shadow:0 0 14px var(--fg),0 0 34px var(--fg)}
h2{margin:0;font-size:clamp(11px,3.4vw,18px);font-weight:400}
.sub{font-size:clamp(6px,1.7vw,9px);opacity:.75;line-height:1.5}
.menu{display:grid;grid-template-columns:repeat(6,1fr);gap:5px;width:min(96%,440px)}
.it{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:6px 4px;font-size:clamp(7px,2vw,11px);cursor:pointer;border:2px solid #fff3;background:#0007;color:var(--fg);grid-column:span 3;min-height:38px}
.it.w6{grid-column:span 6}.it.w2{grid-column:span 2}
.it.sel{border-color:var(--fg);background:#ffffff1a;box-shadow:0 0 12px #0008}
.it .lb{font-size:.72em;opacity:.65}
.it b{font-weight:400;display:flex;align-items:center;gap:6px}
.it.off{opacity:.35}
.it.play{font-size:clamp(10px,2.8vw,14px);min-height:34px;flex-direction:row}
.ar{padding:2px 5px;cursor:pointer}.ar:active{opacity:.5}
.trophy{position:relative}
.cnt{color:#000;background:var(--fg);padding:1px 4px;font-size:.9em;text-shadow:none}
.list{display:flex;flex-direction:column;gap:8px;width:min(94%,430px);font-size:clamp(7px,1.9vw,10px);text-align:left;line-height:1.5}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:6px;width:min(96%,520px);max-height:62%;overflow:auto;font-size:clamp(6px,1.7vw,9px);text-align:left;line-height:1.5}
.ach{background:#06080ccc;display:flex;gap:8px;align-items:center;padding:5px;border:2px solid #fff3}
.ach.on{border-color:var(--fg);background:#ffffff14}.ach i{font-style:normal;font-size:16px;filter:grayscale(1) opacity(.4)}.ach.on i{filter:none}
.ach small{opacity:.7;font-size:.9em}
.toast{position:absolute;right:10px;bottom:10px;z-index:5;background:#0c0e14;border:2px solid var(--fg);padding:8px 10px;font-size:clamp(7px,1.8vw,9px);display:flex;gap:8px;align-items:center;transform:translateY(150%);transition:transform .35s;max-width:70%;text-align:left;box-shadow:0 0 14px #000}
.toast.show{transform:none}
a{color:var(--fg)}
.btn{font:inherit;font-size:clamp(8px,2.2vw,11px);color:var(--fg);background:none;border:2px solid var(--fg);padding:9px 14px;cursor:pointer;text-shadow:0 0 6px var(--fg)}
.btn:active{background:var(--fg);color:#000}
.hint{margin-top:12px;font-size:8px;opacity:.5;text-align:center;line-height:1.7}
.panel{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:10px}
.pt{flex:1;text-align:center;font-size:8px;opacity:.5;line-height:1.6}
.tb{font:inherit;height:40px;min-width:44px;padding:0 14px;gap:8px;display:flex;align-items:center;justify-content:center;color:var(--fg);background:linear-gradient(#262a36,#12141b);border:2px solid var(--fg);border-color:color-mix(in srgb,var(--fg) 60%,#000);border-radius:6px;box-shadow:0 4px 0 #05060a,0 0 12px rgba(255,255,255,.06),inset 0 1px 0 #ffffff22;cursor:pointer;text-shadow:0 0 6px var(--fg);transition:transform .05s}
.tb:hover{border-color:var(--fg)}
.tb svg{width:18px;height:18px;fill:currentColor;shape-rendering:crispEdges;filter:drop-shadow(0 0 4px var(--fg))}
.tb .tl{font-size:8px;letter-spacing:1px;white-space:nowrap}
.tb:active{transform:translateY(3px);box-shadow:0 1px 0 #05060a,inset 0 1px 0 #ffffff22}
h1{font-size:clamp(22px,7vw,40px);text-shadow:0 0 14px var(--fg),0 0 34px var(--fg),3px 3px 0 #0009}
.it{background:#06080c;border:2px solid rgba(255,255,255,.16);border-radius:3px;gap:5px;min-height:40px}
.it .lb{font-size:.68em;letter-spacing:1px;opacity:.6}
.it b{gap:10px;text-shadow:0 0 8px var(--fg)}
.it svg{width:14px;height:14px;fill:currentColor;shape-rendering:crispEdges;margin-right:4px}
.it.sel{border-color:var(--fg);background:#10151d;box-shadow:0 0 14px rgba(255,255,255,.12),inset 0 0 10px rgba(255,255,255,.06)}
.ar{opacity:.5;padding:4px 8px}.it.sel .ar{opacity:1;animation:nudge 1s steps(2) infinite}@keyframes nudge{50%{opacity:.45}}
.it.play{background:var(--fg);color:#000;border-color:var(--fg);font-size:clamp(11px,3vw,15px);min-height:42px;letter-spacing:3px;box-shadow:0 4px 0 rgba(0,0,0,.6)}
.it.play b{text-shadow:none}.it.play.sel{box-shadow:0 4px 0 rgba(0,0,0,.6),0 0 22px var(--fg);animation:gl 1s steps(2) infinite}@keyframes gl{50%{filter:brightness(1.18)}}
#desc{text-transform:uppercase;font-size:clamp(6px,1.7vw,8px);opacity:.7;letter-spacing:1px}
.screen canvas{transition:opacity .3s}.screen.dim canvas{opacity:.85}.screen.dim2 canvas{opacity:.4}
#menu{background:radial-gradient(ellipse at center,#0004 0%,#0000 80%)}
.olist{display:flex;flex-direction:column;gap:6px;width:min(94%,420px)}
.orow{display:flex;align-items:center;justify-content:space-between;padding:9px 12px;border:2px solid rgba(255,255,255,.16);background:#06080c;font-size:clamp(8px,2.2vw,12px);cursor:pointer;border-radius:3px}
.orow.sel{border-color:var(--fg);background:#10151d;box-shadow:0 0 14px rgba(255,255,255,.12)}
.orow.sel .ol:before{content:"► "}
.orow b{display:flex;gap:10px;align-items:center;font-weight:400;text-shadow:0 0 8px var(--fg)}
.orow.sel .ar{opacity:1}.orow.off{opacity:.35}
.orow.back{justify-content:center}
.rot{display:none}
@media (max-width:640px){.pt{display:none}.panel{justify-content:center}}
@media (max-width:520px){.tb .tl{display:none}.tb{padding:0 12px}}
@media (pointer:coarse) and (orientation:portrait){.rot{display:block}}
@media (max-height:520px){
 body{padding:6px}.cab{padding:6px;border-radius:14px;max-width:min(720px,calc((100vh - 66px)*1.6 + 12px));max-width:min(720px,calc((100dvh - 66px)*1.6 + 12px))}
 .endbox{padding:6px 14px;gap:4px}.escore{font-size:20px}#emsg{font-size:13px}.eopts{flex-direction:row}.orow{padding:3px 8px}.olist{gap:3px}.screen{border-radius:10px}.hint,.pt{display:none}.panel{margin-top:6px}.tb{height:30px;min-width:30px;padding:0 8px}.tb .tl{display:none}.it.play{min-height:28px}
 h1{font-size:clamp(18px,6vh,30px);letter-spacing:3px}.ov{gap:4px;padding:4px}
 .menu{gap:3px}.it{min-height:26px;padding:3px;gap:2px}.it.play{min-height:26px}
}
#end{background:rgba(0,0,0,.6)}
.endbox{border:3px solid var(--fg);background:#000d;box-shadow:0 0 24px var(--fg),inset 0 0 20px #0008;padding:clamp(10px,3vw,20px) clamp(14px,5vw,40px);display:flex;flex-direction:column;align-items:center;gap:clamp(6px,1.6vw,12px);min-width:min(88%,380px)}
.etag{font-size:clamp(8px,2vw,11px);letter-spacing:3px;opacity:.8}
#emsg{font-size:clamp(14px,4.4vw,26px);line-height:1.4;letter-spacing:2px}
.win #emsg{animation:pl 1s steps(2) infinite}@keyframes pl{50%{text-shadow:0 0 30px var(--fg),0 0 60px var(--fg)}}
.lose #emsg{animation:fk 2.4s steps(1) infinite}@keyframes fk{0%,92%{opacity:1}94%{opacity:.3}96%{opacity:1}98%{opacity:.4}}
.escore{font-size:clamp(22px,8vw,46px);text-shadow:0 0 14px var(--fg)}
.estats{display:flex;gap:6px 16px;flex-wrap:wrap;justify-content:center;font-size:clamp(6px,1.7vw,9px);opacity:.85}.estats b{font-weight:400;color:#fff}
.eopts{display:flex;flex-direction:column;gap:6px;width:100%}
.eo{padding:8px;border:2px solid #fff3;cursor:pointer;font-size:clamp(8px,2.2vw,12px)}
.eo.sel{border-color:var(--fg);background:#ffffff1a}.eo.sel:before{content:"► "}
:root{--pr:polygon(0 0,25% 0,25% 14.29%,50% 14.29%,50% 28.57%,75% 28.57%,75% 42.86%,100% 42.86%,100% 57.14%,75% 57.14%,75% 71.43%,50% 71.43%,50% 85.71%,25% 85.71%,25% 100%,0 100%);--pl:polygon(100% 0,75% 0,75% 14.29%,50% 14.29%,50% 28.57%,25% 28.57%,25% 42.86%,0 42.86%,0 57.14%,25% 57.14%,25% 71.43%,50% 71.43%,50% 85.71%,75% 85.71%,75% 100%,100% 100%)}
.pxr,.pxl,.orow.sel .ol:before,.eo.sel:before{content:"";display:inline-block;width:8px;height:14px;background:currentColor;flex:none}
.pxr,.orow.sel .ol:before,.eo.sel:before{clip-path:var(--pr)}.pxl{clip-path:var(--pl)}
.ar{display:inline-flex;align-items:center;justify-content:center}
.orow .ol{display:flex;align-items:center;gap:10px}
.orow.back{gap:10px;align-items:center}
.eo{display:flex;align-items:center;justify-content:center;gap:8px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px}
.pt{text-align:right}
.hrows{display:flex;flex-direction:column;gap:6px;width:min(96%,520px);max-height:58%;overflow:auto;touch-action:pan-y;text-align:left;font-size:clamp(7px,1.9vw,10px);line-height:1.6}
.hr{padding:5px 9px!important;display:flex;justify-content:space-between;align-items:center;gap:12px;padding:6px 9px;border:2px solid rgba(255,255,255,.14);background:#06080c;border-radius:3px}
.hr>span:first-child{opacity:.65;font-size:.85em;letter-spacing:1px;white-space:nowrap}.hv{text-align:right}
.hbtns{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
kbd{font:inherit;font-size:7px;display:inline-block;min-width:16px;padding:3px 5px;margin:0 2px;text-align:center;line-height:1;color:var(--fg);background:#161922;border:1px solid #ffffff40;border-color:color-mix(in srgb,var(--fg) 45%,#000);border-bottom-width:3px;border-radius:3px}
.hv kbd{font-size:8px}
.btn.sel{background:var(--fg);color:#000;text-shadow:none;box-shadow:0 0 14px var(--fg)}
.pt{opacity:.9}
.cab{padding:12px;max-width:min(720px,calc((100vh - 60px)*1.6 + 24px));max-width:min(720px,calc((100dvh - 60px)*1.6 + 24px))}
@media (max-height:520px){.cab{padding:6px;max-width:min(720px,calc((100vh - 26px)*1.6 + 12px));max-width:min(720px,calc((100dvh - 26px)*1.6 + 12px))}}
.pt{position:absolute;left:0;right:0;bottom:10px;z-index:3;text-align:center;pointer-events:none;font-size:7px;line-height:2;text-shadow:0 0 6px #000}
.fo{animation:fo 5s forwards}@keyframes fo{0%,65%{opacity:1}100%{opacity:0}}
#pb{position:absolute;top:8px;left:50%;transform:translateX(-50%);z-index:4;height:28px;min-width:34px;padding:0 8px}
#pb:active{transform:translateX(-50%) translateY(3px)}#pb .tl{display:none}#pb svg{width:14px;height:14px}
/* letter-spacing deixa um espaço depois da última letra: compensa para centralizar de verdade */
#menu h1{padding-left:6px}.it.play b{padding-left:3px}.etag{padding-left:3px}#emsg{padding-left:2px}
/* menu proporcional: tudo escala com a largura da tela do jogo (cqw), então título, caixas e botões mantêm a mesma proporção em qualquer tamanho */
.screen{container-type:inline-size}
#menu{gap:max(6px,1.4cqw)}
#menu h1{font-size:max(22px,7cqw);letter-spacing:.9cqw;padding-left:.9cqw;margin-bottom:.4cqw}
.menu{width:min(94%,max(46cqw,260px));gap:max(4px,.8cqw)}
.it{font-size:max(8px,1.9cqw);min-height:max(38px,6.2cqw);padding:.7cqw .6cqw;gap:.6cqw}
.it .lb{font-size:max(6.5px,1.25cqw)}
.it b{gap:max(8px,1.3cqw)}
.it.play{font-size:max(10px,2.2cqw);min-height:max(36px,5.6cqw);letter-spacing:.4cqw}
.it.play b{padding-left:.4cqw}
.it svg{width:max(12px,1.9cqw);height:max(12px,1.9cqw)}
.it .pxr,.it .pxl,.orow .pxr,.orow .pxl,.orow.sel .ol:before{width:max(6px,1cqw);height:max(10.5px,1.75cqw)}
.olist{width:min(94%,max(50cqw,300px));gap:max(5px,.9cqw)}
.orow{font-size:max(8px,1.9cqw);padding:max(7px,1.1cqw) max(10px,1.6cqw)}
@media (max-height:520px){#menu{gap:4px}#menu h1{font-size:max(16px,5cqw);margin:0}.menu{width:min(94%,max(40cqw,240px))}.it{min-height:max(26px,4.6cqw);padding:.3cqw}.it.play{min-height:max(26px,4.4cqw)}.orow{padding:max(3px,.6cqw) max(8px,1.4cqw)}}
/* Opções */
.olist{width:min(94%,max(58cqw,340px))}
.orow .ol,.orow b span{white-space:nowrap}
.orow .ar{padding:4px 5px}
.orow b{gap:max(8px,1.1cqw)}
/* título centrado de verdade na linha central do jogo: compensa o letter-spacing (.9cqw) + a coluna vazia de cada glifo da fonte pixel (.45cqw) */
#menu h1{padding-left:calc(1.35cqw + 2px)}
/* barra de rolagem não empurra o conteúdo para o lado */
.ov{scrollbar-width:none}.ov::-webkit-scrollbar{display:none}
/* amostra da cor nas Opções + lista mais compacta para caber 7 linhas */
.sw{display:inline-block;width:max(8px,1.2cqw);height:max(8px,1.2cqw);margin-right:max(6px,.8cqw);vertical-align:middle;box-shadow:0 0 6px currentColor}
.olist{gap:max(4px,.7cqw)}
.orow{padding:max(6px,.9cqw) max(10px,1.6cqw)}
/* textura LCD pixelada (grade 160x100, estilo Game Boy) por cima de tudo, sem alterar o jogo */
.screen:before{content:"";position:absolute;inset:0;z-index:6;pointer-events:none;background-image:linear-gradient(to right,transparent calc(100% - 1px),rgba(0,0,0,.24) 100%),linear-gradient(to bottom,transparent calc(100% - 1px),rgba(0,0,0,.24) 100%);background-size:calc(100% / 160) calc(100% / 100)}
.sw{width:max(10px,1.5cqw);height:max(10px,1.5cqw);outline:1px solid rgba(255,255,255,.45)}
.ach.imp{border-style:dashed}.ach .tg{display:inline-block;margin-left:5px;padding:1px 3px;background:#ff4d4d;color:#000;font-size:.75em;vertical-align:middle}
.ach.plat{grid-column:span 2;border-color:#ffd84a;color:#ffd84a}.ach.plat:not(.on){opacity:.6}.ach.plat.on{background:#ffd84a22;box-shadow:0 0 14px #ffd84a}
.hv b{color:#ffd84a;font-weight:400}
#menu h1.gold{color:#ffd84a;text-shadow:0 0 14px #ffd84a,0 0 34px #ffb300,3px 3px 0 #0009}
.toast.gold{border-color:#ffd84a;box-shadow:0 0 22px #ffd84a}
/* quadro de conquistas maior e proporcional à tela; selo IMPOSSÍVEL discreto */
.grid2{width:min(97%,max(88cqw,520px));max-height:72%;gap:max(5px,.8cqw);font-size:max(6.5px,1.5cqw);scrollbar-width:thin;scrollbar-color:var(--fg) #0008}
.ach{padding:max(5px,.8cqw) max(7px,1.1cqw);gap:max(8px,1.1cqw)}
.ach i{font-size:max(16px,2.6cqw)}
.ach .tg{display:block;margin:max(3px,.5cqw) 0 0;padding:0;background:none;color:#ff5c5c;font-size:.78em;letter-spacing:1px;text-shadow:0 0 6px #ff5c5c}
.ach.imp.on .tg{color:#ffd84a;text-shadow:0 0 6px #ffd84a}
/* Como jogar e Créditos: mesmo quadro ampliado das conquistas, tudo proporcional à tela */
.hrows{width:min(97%,max(88cqw,520px));max-height:72%;gap:max(5px,.8cqw);font-size:max(7px,1.55cqw);scrollbar-width:thin;scrollbar-color:var(--fg) #0008}
.hr{padding:max(6px,.9cqw) max(9px,1.3cqw)!important;gap:max(12px,1.8cqw)}
.hrows kbd{font-size:max(7px,1.25cqw);min-width:max(16px,2.4cqw)}
.hbtns .btn{font-size:max(8px,1.7cqw)}
h2{font-size:max(12px,2.8cqw)}
/* conquistas: texto do mesmo porte das outras telas (antes ~20% menor que menu/opções) */
.grid2{font-size:max(7.5px,1.75cqw)}
.ach i{font-size:max(18px,3cqw)}
.it.trophy svg{width:max(15px,2.3cqw);height:max(15px,2.3cqw)}.it.trophy .cnt{font-size:1.1em}
/* ícones alinhados: botões de baixo com ícone numa coluna fixa (mesmo tamanho e posição) e texto logo depois */
.it.w3{align-items:flex-start;padding-left:max(10px,2.2cqw)}
.it.w3 b{justify-content:flex-start;gap:max(8px,1.2cqw)}
.it.w3 svg,.it.trophy svg{width:max(14px,2.1cqw);height:max(14px,2.1cqw);margin:0;flex:none}
/* conquistas: caixa do ícone com largura fixa, para os nomes começarem todos na mesma coluna */
.ach i{flex:none;width:max(26px,3.8cqw);text-align:center;line-height:1}
/* cursor das Opções e da tela final reserva o espaço sempre: o texto não "pula" ao selecionar */
.orow .ol:before{content:"";display:inline-block;width:max(6px,1cqw);height:max(10.5px,1.75cqw);flex:none;visibility:hidden}
.orow.sel .ol:before{visibility:visible}
.eo:before{content:"";display:inline-block;width:8px;height:14px;flex:none;visibility:hidden}
.eo.sel:before{visibility:visible}
.it.trophy .cnt{position:relative;left:1px}
/* Como jogar / Créditos organizados: rótulo numa coluna fixa e conteúdo alinhado à esquerda */
.hr{display:grid;grid-template-columns:max(86px,14cqw) 1fr;align-items:start;gap:max(10px,1.6cqw)}
.hv{text-align:left;line-height:1.7}
.chips{display:flex;flex-wrap:wrap;align-items:center;gap:4px max(10px,1.6cqw)}
.two{display:grid;grid-template-columns:1fr 1fr;gap:3px max(10px,1.6cqw)}.two .full{grid-column:1/-1}
.two b{color:#fff;font-weight:400;margin-right:6px}
.nt{opacity:.7;font-size:.9em;margin-top:3px}
.pu i{font-style:normal;display:inline-block;min-width:1.9em;text-align:center;padding:1px 0;margin-right:7px;color:#000;background:var(--fg)}
@container (max-width:520px){.two{grid-template-columns:1fr}.hr{grid-template-columns:1fr;gap:2px}}
#pm{background:rgba(0,0,0,.55)}
/* menu de pausa alinhado: caixa de largura fixa, título com divisória, botões iguais e texto realmente centralizado (cursor ► fora do fluxo) */
#pm .endbox{width:min(88%,max(46cqw,290px));min-width:0;padding:max(12px,2.2cqw) max(14px,2.6cqw);gap:max(9px,1.5cqw)}
#pm .etag{width:100%;opacity:1;font-size:max(10px,2.3cqw);letter-spacing:4px;padding:0 0 max(8px,1.3cqw) 4px;border-bottom:2px solid var(--fg);text-shadow:0 0 8px var(--fg)}
#pm .eopts{gap:max(6px,1cqw)}
#pm .eo{position:relative;flex:1;justify-content:center;text-align:center;line-height:1.35;padding:max(9px,1.5cqw) max(24px,3.8cqw);font-size:max(8px,1.8cqw)}
#pm .eo:before{position:absolute;left:max(9px,1.5cqw);top:50%;transform:translateY(-50%)}
#pm .sub{width:100%;padding-top:max(6px,1cqw);border-top:1px solid #fff3;font-size:max(6px,1.3cqw)}