:root{color-scheme:dark;font-family:Arial,Helvetica,sans-serif;background:#0c0c0d;color:#f0f2ef}*{box-sizing:border-box}body{margin:0}a{color:inherit;text-decoration:none}header,main{width:min(1280px,calc(100% - 48px));margin:auto}header{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:24px 0;border-bottom:1px solid #303032}.brand{display:flex;align-items:center;gap:10px;font-size:19px}.brand img{width:40px;height:24px}.back{color:#aaa6b3;font-size:13px}main{padding:30px 0}.game-heading{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:16px}h1{font-size:20px;font-weight:500;margin:0}button{font:inherit;font-size:12px;background:transparent;color:#aaa6b3;border:1px solid #454148;padding:9px 13px;cursor:pointer}button:hover{color:#fff;border-color:#aaa6b3}a:focus-visible,button:focus-visible{outline:2px solid #c6b4f4;outline-offset:5px}.game-frame{width:100%;aspect-ratio:16/9;background:#000;overflow:hidden}iframe{display:block;width:100%;height:100%;border:0}.game-frame:fullscreen{width:100vw;height:100dvh;aspect-ratio:auto;display:grid;place-items:center}.game-frame:fullscreen iframe{width:min(100vw,177.7778dvh);height:min(100dvh,56.25vw)}.game-note,#fullscreen-status{color:#aaa6b3;font-size:12px;line-height:1.6;margin:14px 0 0}#fullscreen-status:empty{display:none}@media(max-width:600px){header,main{width:calc(100% - 24px)}header{padding:18px 0}.brand{font-size:16px}.brand img{width:30px}.back{font-size:11px}main{padding-top:22px}h1{font-size:18px}}
/* Delimita o jogo sem reduzir a proporção 16:9 da área interna. */
.game-frame{outline:2px solid #77717e;outline-offset:0}
.game-frame:fullscreen{outline:none}
canvas{display:block;width:100%;height:100%;touch-action:manipulation;outline:none}
canvas:focus-visible{outline:none}
.game-frame:fullscreen canvas{width:min(100vw,177.7778dvh);height:min(100dvh,56.25vw)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
/* Demo fits the client viewport; the game always keeps its 1280 × 720 framing. */
html,body{height:100%;overflow:hidden}
body{height:100dvh;display:flex;flex-direction:column}
header{flex:0 0 auto;padding:14px 0}
main{flex:1;min-height:0;display:flex;flex-direction:column;align-items:center;padding:12px 0}
.game-heading{width:100%;flex:none;margin-bottom:10px}
.game-frame{flex:none;width:min(100%,calc((100dvh - 180px)*16/9));height:auto;aspect-ratio:16/9}
.game-note{flex:none;text-align:center;margin-top:10px}
@media(max-height:500px){header{padding:5px 0}.brand{font-size:14px}.brand img{height:18px}main{padding:6px 0}.game-heading{margin-bottom:6px}h1{font-size:14px}.game-heading button{padding:4px 8px}.game-note{display:none}.game-frame{width:min(100%,calc((100dvh - 91px)*16/9))}}
.game-frame:fullscreen{width:100vw;height:100dvh;max-width:none}

@font-face{font-family:'Press Start 2P';src:url('assets/press-start-2p.ttf') format('truetype');font-style:normal;font-weight:400;font-display:swap}

/* User requested a natural edge and the homepage brand. */
.game-frame{outline:none;border:0}
.brand{font-family:'Outfit',sans-serif;font-size:21px;font-weight:600;letter-spacing:-.7px;gap:12px;line-height:1.7}
.brand .logo-mark{width:52px;height:27px;stroke:none;color:#f0f2ef;flex:none}
@media(max-width:600px){.brand .logo-mark{width:44px;height:23px}}
@media(max-height:500px){.brand{font-size:14px;line-height:1.3}.brand .logo-mark{width:36px;height:19px}}

.game-tools{display:flex;align-items:center;justify-content:flex-end;gap:8px;flex-wrap:wrap}.game-tools button{white-space:nowrap}@media(max-width:600px){.game-heading{align-items:flex-start;gap:10px}.game-tools{gap:6px}.game-tools button{font-size:10px;padding:7px 8px}}