:root {
  color-scheme: dark;
  font-family: "Courier New", ui-monospace, monospace;
  background: #05050d;
  color: #eefcff;
}
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; background: radial-gradient(circle at top, #19214d 0, #080914 48%, #030308 100%); }
a { color: #8ffaff; }
button, a { -webkit-tap-highlight-color: transparent; }
.game-preview { padding: 18px; }
.retro-shell { width: min(1180px, 100%); margin: 0 auto; }
.retro-eyebrow { margin: 0 0 4px; color: #69f5ff; letter-spacing: .12em; font-weight: 700; font-size: .82rem; }
h1 { margin: 0; font-size: clamp(1.35rem, 3vw, 2.25rem); }
.retro-toolbar { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin: 14px 0; }
.retro-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.retro-button, .preview-nav a {
  appearance: none;
  border: 1px solid #5df5ff;
  background: #101631;
  color: #eaffff;
  padding: 10px 14px;
  border-radius: 7px;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 0 0 1px rgba(93,245,255,.12) inset;
}
.retro-button:focus-visible, .preview-nav a:focus-visible { outline: 3px solid #ffe66b; outline-offset: 2px; }
.retro-button:active { transform: translateY(1px); }
.retro-frame { position: relative; width: 100%; border: 2px solid #5df5ff; background: #02030a; box-shadow: 0 0 28px rgba(41,226,255,.17); overflow: hidden; }
canvas { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; touch-action: none; image-rendering: pixelated; }
.retro-overlay { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(2,3,12,.78); padding: 18px; }
.retro-overlay.hidden { display: none; }
.retro-card { width: min(520px, 100%); padding: 24px; border: 1px solid #8cf8ff; background: rgba(10,15,38,.96); text-align: center; box-shadow: 0 0 24px rgba(93,245,255,.22); }
.retro-card h2 { margin-top: 0; }
.retro-help, .audio-status { color: #b9cce4; line-height: 1.5; }
.audio-status { margin: 7px 0 0; font-size: .88rem; min-height: 1.3em; }
.touch-controls { display: none; grid-template-columns: repeat(5, minmax(54px, 1fr)); gap: 8px; margin-top: 12px; }
.touch-controls .retro-button { min-height: 52px; font-size: 1.2rem; touch-action: manipulation; }
.preview-nav { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; }
.preview-nav a { text-decoration: none; }
.library-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(245px, 1fr)); gap: 14px; margin-top: 20px; }
.library-card { border: 1px solid #3d5d8d; background: rgba(12,17,39,.92); padding: 18px; border-radius: 8px; }
.library-card strong { display: block; margin-bottom: 8px; color: #8ffaff; }
.status { display: inline-block; margin-top: 12px; padding: 4px 8px; border: 1px solid #64748b; border-radius: 999px; color: #cbd5e1; font-size: .78rem; }
.status.candidate { border-color: #5df5ff; color: #8ffaff; }
@media (pointer: coarse), (max-width: 820px) {
  .game-preview { padding: 8px; }
  .retro-toolbar { display: block; }
  .retro-actions { justify-content: flex-start; margin-top: 12px; }
  .touch-controls { display: grid; }
  .retro-help { font-size: .86rem; }
}
@media (max-width: 520px) {
  .touch-controls { grid-template-columns: repeat(3, 1fr); }
  .retro-button { padding: 9px 10px; }
}
.audio-status{margin:.35rem 0 0;color:#9fc7d5;font-size:.88rem}.audio-test{opacity:.9}.retro-toolbar h1{margin-bottom:.2rem}.touch-controls{flex-wrap:wrap}.retro-frame canvas{image-rendering:pixelated}.retro-button:focus-visible{outline:3px solid #ffe66b;outline-offset:2px}
.audio-diagnostic{margin:.75rem 0 1rem;padding:.65rem .8rem;border:1px solid rgba(87,230,220,.2);border-radius:10px;background:rgba(4,15,23,.65);color:#a9c8d2;font-size:.78rem}.audio-diagnostic code{display:block;white-space:normal;overflow-wrap:anywhere;margin:.5rem 0}.audio-diagnostic audio{width:min(420px,100%);height:36px}

/* Revisão móvel e visual retrô v5.0 */
body { padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); }
.orientation-hint { display: none; margin: 0 0 10px; padding: 8px 12px; border: 1px solid rgba(255,230,107,.35); border-radius: 8px; color: #ffe66b; background: rgba(32,26,8,.72); text-align: center; font-size: .82rem; }
.touch-controls button { min-width: 48px; min-height: 48px; user-select: none; -webkit-user-select: none; }
@media (pointer: coarse) and (orientation: portrait) and (max-width: 820px) { .orientation-hint { display: block; } }
@media (pointer: coarse) and (orientation: landscape) and (max-height: 520px) {
  .game-preview { padding: max(4px, env(safe-area-inset-top)) 6px max(4px, env(safe-area-inset-bottom)); }
  .preview-nav { margin-bottom: 5px; }
  .retro-toolbar { display: flex; margin: 4px 0 6px; gap: 8px; }
  .retro-toolbar h1 { font-size: 1rem; }
  .retro-eyebrow, .retro-help, .audio-status, .audio-diagnostic { display: none; }
  .retro-actions { margin-top: 0; gap: 4px; }
  .retro-actions .retro-button { min-height: 36px; padding: 5px 8px; font-size: .72rem; }
  .retro-frame { width: min(100%, calc((100dvh - 122px) * 16 / 9)); margin-inline: auto; }
  .touch-controls { width: min(100%, 760px); margin: 5px auto 0; gap: 5px; }
  .touch-controls .retro-button { min-height: 42px; padding: 5px 7px; font-size: .85rem; }
}

/* Ênfase 8-bit v5.0 */
.retro-frame { image-rendering: pixelated; }
.retro-button { text-transform: uppercase; letter-spacing: .025em; }
@media (prefers-reduced-motion: reduce) { .retro-button:active { transform: none; } }

/* v5.1 — diagnóstico e robustez dos controles */
.control-status{margin:.55rem auto .35rem;padding:.5rem .75rem;max-width:960px;border:1px solid rgba(110,242,206,.35);background:rgba(5,12,20,.82);font:700 .78rem/1.2 monospace;letter-spacing:.04em;color:#bceee3;text-align:center}
.control-status[data-state="active"]{border-color:#fff16a;color:#fff16a;box-shadow:0 0 12px rgba(255,241,106,.18)}
.touch-controls button[aria-pressed="true"]{transform:translateY(2px) scale(.97);filter:brightness(1.35);box-shadow:inset 0 0 0 2px rgba(255,255,255,.45)}
.touch-controls{touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
.touch-controls .retro-button{min-width:56px;min-height:52px}
@media (max-width:760px) and (orientation:landscape){.control-status{font-size:.68rem;margin:.25rem auto}.touch-controls .retro-button{min-width:50px;min-height:48px;padding:.45rem .6rem}}

/* v5.3 — navegação superior simplificada */
.preview-nav{position:sticky;top:0;z-index:30;padding:8px 0;background:linear-gradient(180deg,rgba(5,5,13,.97),rgba(5,5,13,.84),transparent);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.preview-nav .nav-primary{display:inline-flex;align-items:center;min-height:44px;padding:10px 14px;border-color:rgba(93,245,255,.42);background:#0d1730;color:#eaffff;font-weight:800}
.preview-nav .nav-primary:hover{border-color:#fff16a;color:#fff16a}
.game-footer-help{margin:.6rem 0 0;padding:.8rem 1rem;border:1px solid rgba(93,245,255,.22);border-radius:9px;background:#090f20;color:#d5e6f3;box-shadow:0 -8px 24px rgba(2,3,12,.28);font-size:.82rem;line-height:1.55}.retro-overlay .retro-card{background:#0a0f26}.retro-overlay .retro-card p{color:#cbddec;line-height:1.6}.retro-overlay .retro-card .retro-button{min-width:150px;margin-top:.5rem}

/* v5.4 — mobile-first, toque responsivo e tela cheia */
html,body{overscroll-behavior:none}
.fullscreen-button{white-space:nowrap}
@media (pointer:coarse), (max-width:820px){
  .touch-controls{position:sticky;bottom:max(6px,env(safe-area-inset-bottom));z-index:25;padding:8px;border:1px solid rgba(93,245,255,.2);border-radius:12px;background:rgba(4,9,20,.94);box-shadow:0 8px 28px rgba(0,0,0,.38)}
  .touch-controls .retro-button{min-width:64px;min-height:60px;padding:10px 12px;font-size:1rem;touch-action:none}
  .touch-controls button[data-action="confirm"],.touch-controls button[data-action="inspect"]{background:#173c45;border-color:#66f2ce;color:#f3fffc;font-weight:900}
  .retro-overlay{padding:10px}.retro-card{padding:18px}.retro-overlay .retro-card .retro-button{min-height:54px;min-width:180px}
}
@media (pointer:coarse) and (orientation:landscape){
  .touch-controls{position:fixed;left:max(8px,env(safe-area-inset-left));right:max(8px,env(safe-area-inset-right));bottom:max(6px,env(safe-area-inset-bottom));width:auto;margin:0;grid-template-columns:repeat(6,minmax(58px,1fr));background:rgba(3,8,16,.86)}
  .touch-controls .retro-button{min-height:52px}
  .retro-frame{margin-bottom:70px}
}
html.nexo-fullscreen body{height:100dvh;overflow:auto;padding-top:env(safe-area-inset-top);padding-bottom:env(safe-area-inset-bottom)}
html.nexo-fullscreen .game-preview{padding:6px}
html.nexo-fullscreen .preview-nav,html.nexo-fullscreen .retro-eyebrow,html.nexo-fullscreen .retro-help:not(.game-footer-help),html.nexo-fullscreen .audio-status{display:none}
html.nexo-fullscreen .retro-toolbar{margin:2px 0 5px;align-items:center}
html.nexo-fullscreen .retro-toolbar h1{font-size:clamp(.9rem,2.4vw,1.25rem)}
html.nexo-fullscreen .retro-frame{width:min(100%,calc((100dvh - 128px)*16/9));margin-inline:auto}
html.nexo-fullscreen .game-footer-help{display:none}