html, body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
background: #08080c;
overflow: hidden;
/* stop mobile browsers from scrolling / pull-to-refresh / double-tap zoom */
overscroll-behavior: none;
touch-action: none;
-webkit-user-select: none;
user-select: none;
-webkit-tap-highlight-color: transparent;
}
body {
display: flex;
align-items: center;
justify-content: center;
}
#stage {
position: relative;
line-height: 0;
box-shadow: 0 0 60px rgba(80, 40, 160, 0.35), 0 0 12px rgba(0, 0, 0, 0.9);
}
#game {
image-rendering: pixelated;
image-rendering: crisp-edges;
background: #000;
display: block;
}
/* CRT scanline + phosphor mask overlay */
#scanlines {
position: absolute;
inset: 0;
pointer-events: none;
background:
repeating-linear-gradient(
to bottom,
rgba(0, 0, 0, 0) 0px,
rgba(0, 0, 0, 0) 2px,
rgba(0, 0, 0, 0.22) 3px
);
mix-blend-mode: multiply;
}
#stage::after {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background: radial-gradient(ellipse at center,
rgba(0, 0, 0, 0) 55%,
rgba(0, 0, 0, 0.28) 100%);
}
#stage.no-scanlines #scanlines,
#stage.no-scanlines::after {
display: none;
}
/* ===================== TOUCH CONTROLS ===================== */
/* Hidden by default; .touch on reveals them on touch devices. */
#touch-controls {
display: none;
position: fixed;
inset: 0;
z-index: 50;
pointer-events: none; /* only the buttons capture input */
}
body.touch #touch-controls {
display: block;
}
.tbtn {
pointer-events: auto;
position: absolute;
font-family: monospace;
font-weight: bold;
color: rgba(255, 255, 255, 0.85);
background: rgba(40, 44, 64, 0.42);
border: 2px solid rgba(180, 190, 220, 0.55);
border-radius: 12px;
-webkit-user-select: none;
user-select: none;
touch-action: none;
display: flex;
align-items: center;
justify-content: center;
padding: 0;
}
.tbtn.pressed {
background: rgba(120, 130, 180, 0.62);
color: #fff;
transform: scale(0.94);
}
/* directional d-pad, bottom-left */
#pad {
position: absolute;
left: calc(env(safe-area-inset-left, 0px) + 14px);
bottom: calc(env(safe-area-inset-bottom, 0px) + 18px);
width: min(42vw, 168px);
height: min(42vw, 168px);
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 1fr);
grid-template-areas:
". up ."
"lf . rt"
". dn .";
gap: 4px;
pointer-events: none;
}
#pad .tbtn {
position: static;
width: 100%;
height: 100%;
font-size: min(6vw, 26px);
border-radius: 14px;
}
/* action buttons, bottom-right */
#actions {
position: absolute;
right: calc(env(safe-area-inset-right, 0px) + 18px);
bottom: calc(env(safe-area-inset-bottom, 0px) + 30px);
pointer-events: none;
}
#actions .abtn {
width: min(22vw, 92px);
height: min(22vw, 92px);
border-radius: 50%;
font-size: min(3.6vw, 16px);
letter-spacing: 1px;
}
/* FIRE lower-left of the pair, JUMP upper-right — thumb-friendly diagonal */
#actions .abtn[data-key="shoot"] {
right: min(24vw, 104px);
bottom: 0;
background: rgba(96, 36, 30, 0.5);
border-color: rgba(240, 120, 90, 0.6);
}
#actions .abtn[data-key="jump"] {
right: 0;
bottom: min(16vw, 70px);
background: rgba(30, 70, 50, 0.5);
border-color: rgba(90, 220, 140, 0.6);
}
/* pause, top-right */
#pausebtn {
top: calc(env(safe-area-inset-top, 0px) + 12px);
right: calc(env(safe-area-inset-right, 0px) + 14px);
width: 40px;
height: 34px;
font-size: 16px;
letter-spacing: 2px;
}
/* On short landscape phones, pull the d-pad/actions in a touch tighter. */
@media (max-height: 430px) {
#pad { width: min(30vh, 150px); height: min(30vh, 150px); bottom: calc(env(safe-area-inset-bottom, 0px) + 10px); }
#actions { bottom: calc(env(safe-area-inset-bottom, 0px) + 18px); }
}