* { box-sizing: border-box; }
:root { color-scheme: dark; background: #0e1815; color: #ebf6ef; font: 15px system-ui, sans-serif; }
body { margin: 0; }
[hidden] { display: none !important; }
.console { display: grid; gap: 9px; padding: 10px; max-width: 1080px; margin: auto; }
.visor { position: relative; aspect-ratio: 16 / 9; max-height: calc(100vh - 85px); min-height: 120px; background: #0a110f url("../media/ronda-jogo-cftv.png") center / cover; border: 1px solid #435c51; }
canvas { display: block; width: 100%; height: 100%; touch-action: none; outline: none; }
canvas:focus-visible { outline: 2px solid #b7eccd; outline-offset: -3px; }
.loading, .start { position: absolute; inset: 0; }
.loading { display: grid; place-items: center; padding: 18px; text-align: center; background: #0a110fec; }
.loading p { margin: 6px 0; }
progress { width: min(58vw, 220px); height: 10px; accent-color: #85cdaa; }
.tag { color: #9ce9bd; font: 700 12px ui-monospace, monospace; letter-spacing: .13em; }
button, a { -webkit-tap-highlight-color: transparent; }
button { border: 1px solid #446b59; color: #ebf6ef; background: #182b24; border-radius: 3px; padding: 8px 13px; font: inherit; font-weight: 700; cursor: pointer; }
button:active { background: #355e4a; }
.start { inset: auto auto 15% 50%; transform: translateX(-50%); min-width: 162px; padding: 12px 18px; background: #163a2b; }
.help { color: #b9cec2; font-size: 12px; margin: 0; }
.foot { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.foot a { color: #a5e4bf; font-size: 13px; }
.touch { display: flex; align-items: center; justify-content: space-between; gap: 8px; touch-action: none; }
.dpad { display: grid; grid-template: repeat(2, 42px) / repeat(3, 43px); gap: 4px; flex: none; }
.dpad button { padding: 0; font-size: 20px; touch-action: none; }
.up { grid-column: 2; }
.left { grid-row: 2; grid-column: 1; }
.down { grid-row: 2; grid-column: 2; }
.right { grid-row: 2; grid-column: 3; }
.touch-actions { display: grid; gap: 4px; text-align: center; }
@media (pointer: coarse) { .visor { max-height: calc(100vh - 152px); } }