/* NES output is 256x240 — lock that aspect and scale to fit 90% of the smaller viewport dimension (width-limited on narrow windows, height-limited on wide ones). This box is the source of truth for layout: HtmlLauncher.syncCanvasSize() reads it back and sizes the canvas BACKING STORE to match in device pixels, so the browser never rescales the framebuffer and the picture can't stretch. gdx-teavm is configured not to touch the canvas (config.width/height = -1), so !important is no longer needed to beat its inline styles. The explicit aspect-ratio is load-bearing, not decoration: without it a canvas with height:auto derives its box from the width/height ATTRIBUTES, so the launcher writing the backing store would feed back into layout. Pinning the ratio keeps the box purely CSS-driven. Pixelated keeps the 8-bit look instead of a bilinear smear. */ canvas { cursor: default; outline: none; aspect-ratio: 256 / 240; width: min(90vw, calc(90vh * (256 / 240))); height: auto; image-rendering: pixelated; } /* Center the canvas in the space under the toolbar. */ #embed-html { display: flex; justify-content: center; align-items: center; } /* ---------------------------------------------------------------- */ /* On-screen gamepad (touch devices) */ /* */ /* Hidden by default; reveals it. Sized in vw/vh */ /* via clamp() so it works from a small phone up to a tablet without */ /* breakpoints. Laid out for PORTRAIT: d-pad left, A/B right, the two */ /* system buttons centered between them — the NES layout everyone */ /* already knows. */ /* ---------------------------------------------------------------- */ #touch-controls { display: none; } body.touch #touch-controls { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 10px max(6px, env(safe-area-inset-left)) max(14px, env(safe-area-inset-bottom)) max(6px, env(safe-area-inset-right)); /* The pad must never intercept a scroll/zoom gesture or pop a selection callout — it is a game controller, not a document. */ touch-action: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; } /* When the pad is on, cap the canvas so the controls are always reachable without scrolling. Height-capped at 52vh leaves room for the toolbar above and the pad below on a typical phone. */ body.touch canvas { width: min(96vw, calc(52vh * (256 / 240))); } /* Landscape phones have almost no vertical room — shrink further so the pad still fits under the picture. */ @media (orientation: landscape) { body.touch canvas { width: min(70vw, calc(58vh * (256 / 240))); } } .tbtn { -webkit-appearance: none; appearance: none; border: 0; margin: 0; padding: 0; color: #e8e8e8; background-color: #3a3a3a; font-family: inherit; font-weight: 700; touch-action: none; /* No tap highlight / focus ring: both read as UI chrome on what is meant to feel like hardware. */ -webkit-tap-highlight-color: transparent; outline: none; } .tbtn:active { background-color: #6a9bea; color: #ffffff; } /* --- D-pad: a 3x3 grid with the four arms placed in the cross --- */ .pad-dpad { position: relative; display: grid; width: clamp(112px, 33vw, 180px); aspect-ratio: 1; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); } .tdir { background-color: #333333; } .tdir-up { grid-area: 1 / 2 / 2 / 3; } .tdir-left { grid-area: 2 / 1 / 3 / 2; } .tdir-right { grid-area: 2 / 3 / 3 / 4; } .tdir-down { grid-area: 3 / 2 / 4 / 3; } /* Diagonal corners — same slab as the arms, only the outer corner is rounded so the pad reads as one cross-shaped control. */ .tdiag { background-color: #333333; } .tdiag-ul { grid-area: 1 / 1 / 2 / 2; border-radius: 12px 0 0 0; } .tdiag-ur { grid-area: 1 / 3 / 2 / 4; border-radius: 0 12px 0 0; } .tdiag-dl { grid-area: 3 / 1 / 4 / 2; border-radius: 0 0 0 12px; } .tdiag-dr { grid-area: 3 / 3 / 4 / 4; border-radius: 0 0 12px 0; } /* Arrow glyphs, drawn with borders so there is no font dependency. */ .tdir::after { content: ""; display: block; margin: auto; width: 0; height: 0; border: 7px solid transparent; } .tdir-up::after { border-bottom-color: #cfcfcf; margin-bottom: 55%; } .tdir-down::after { border-top-color: #cfcfcf; margin-top: 55%; } .tdir-left::after { border-right-color: #cfcfcf; margin-right: 55%; } .tdir-right::after { border-left-color: #cfcfcf; margin-left: 55%; } /* Center hub — purely cosmetic, so it must not eat touches aimed at the arms. */ .dpad-hub { grid-area: 2 / 2 / 3 / 3; background-color: #333333; pointer-events: none; } /* --- A / B --- */ .pad-ab { display: flex; align-items: center; gap: clamp(8px, 2.5vw, 16px); /* B sits lower-left of A on real hardware; the slight offset makes the pair readable at a glance. */ padding-top: clamp(14px, 5vw, 28px); } .tab { width: clamp(50px, 15vw, 78px); aspect-ratio: 1; border-radius: 50%; background-color: #b03a48; font-size: clamp(17px, 5vw, 24px); } .pad-ab .tab:first-child { transform: translateY(clamp(10px, 4vw, 22px)); } .tab:active { background-color: #e4626f; } /* --- SELECT / START --- */ .pad-system { display: flex; flex-direction: column; gap: 10px; } .tsys { min-width: clamp(54px, 16vw, 90px); /* >= 44px tall: below that these stop being reliably thumb-sized. */ min-height: 46px; padding: 12px 10px; border-radius: 14px; font-size: clamp(10px, 2.8vw, 12px); letter-spacing: 0.09em; background-color: #4a4a4a; } /* Toolbar has to survive a narrow screen — let it wrap instead of pushing the canvas off. */ @media (max-width: 620px) { #rom-toolbar { flex-wrap: wrap; gap: 8px; padding: 6px 10px; } #rom-credit { margin-left: 0; text-align: left; flex-basis: 100%; } } body { background-color: #222222; color: #dddddd; font-family: sans-serif; margin: 0; } /* Phase F — ROM picker toolbar. Kept compact so the canvas is still the visual focus. */ #rom-toolbar { padding: 8px 12px; display: flex; gap: 12px; align-items: center; background-color: #1a1a1a; border-bottom: 1px solid #444444; } #rom-button { background-color: #3a7bd5; color: #ffffff; border: 0; padding: 6px 14px; border-radius: 4px; font-size: 14px; cursor: pointer; } #rom-button:hover { background-color: #5b94e1; } #rom-button:active { background-color: #2d62ab; } #rom-status { font-size: 13px; color: #b0b0b0; } /* Attribution for the bundled homebrew boot ROM + the key map. Pushed to the right so it reads as a credit line, not a status message. */ #rom-credit { font-size: 12px; color: #8c8c8c; margin-left: auto; text-align: right; } #rom-credit a { color: #6ea8f0; } /* Drag-drop target — the wrapper around the canvas. The dashed border shows up only while a file is being hovered over the page so the normal idle UI is uncluttered. */ #rom-drop { display: inline-block; padding: 4px; border: 2px dashed transparent; transition: border-color 120ms ease-in-out; } #rom-drop.rom-drop-hover { border-color: #3a7bd5; background-color: #2a3a55; } .superdev { color: rgb(37,37,37); text-shadow: 0px 1px 1px rgba(250,250,250,0.1); font-size: 50pt; display: block; position: relative; text-decoration: none; background-color: rgb(83,87,93); box-shadow: 0px 3px 0px 0px rgb(34,34,34), 0px 7px 10px 0px rgb(17,17,17), inset 0px 1px 1px 0px rgba(250, 250, 250, .2), inset 0px -12px 35px 0px rgba(0, 0, 0, .5); width: 70px; height: 70px; border: 0; border-radius: 35px; text-align: center; line-height: 68px; } .superdev:active { box-shadow: 0px 0px 0px 0px rgb(34,34,34), 0px 3px 7px 0px rgb(17,17,17), inset 0px 1px 1px 0px rgba(250, 250, 250, .2), inset 0px -10px 35px 5px rgba(0, 0, 0, .5); background-color: rgb(83,87,93); top: 3px; color: #fff; text-shadow: 0px 0px 3px rgb(250,250,250); } .superdev:hover { background-color: rgb(100,100,100); }