.mothergameholder{
background: #000;
font-family: "SF Mono", "Fira Code", Menlo, monospace;
color: #e0e0e0;
-webkit-user-select: none;
user-select: none;
touch-action: none;
}
.mothergameholder #container {
position: absolute;
inset: 0;
}
#joy,
#firePad {
position: absolute;
z-index: 9;
touch-action: none;
display: none;
}
/* #joy is a small box around the joystick. */
#joy {
left: min(10px, 10%);
bottom: min(120px, 15%);
width: 180px;
height: 180px;
}
/* firePad covers the entire screen at a lower z-index. #joy sits on top in its corner; taps outside that small area fall through to firePad → fire. */
#firePad {
inset: 0;
z-index: 8;
}

#hud {
position: absolute;
left: 14px;
top: 12px;
z-index: 10;
font-size: 11px;
letter-spacing: 0.5px;
color: #fff;
pointer-events: none;
mix-blend-mode: difference;
}
#hud .v {
color: #f9a86f;
font-weight: bold;
}

/* Hit-flash overlay - red vignette when player crashes */
#flash {
position: absolute;
inset: 0;
z-index: 9;
pointer-events: none;
background: radial-gradient(
ellipse at center,
transparent 30%,
rgba(255, 0, 0, 0.6) 100%
);
opacity: 0;
transition: opacity 0.4s ease-out;
}
#flash.on {
opacity: 1;
}

/* Floating "+1000" / "BONUS: $2500" popups */
.popup {
position: absolute;
left: 50%;
z-index: 11;
pointer-events: none;
font-size: 20px;
font-weight: bold;
color: #ffd000;
text-shadow: 0 0 8px rgba(0, 0, 0, 0.9);
text-align: center;
white-space: nowrap;
transform: translateX(-50%);
animation: popup 1.2s ease-out forwards;
}
@keyframes popup {
0% {
opacity: 0;
transform: translate(-50%, 0) scale(0.6);
}
20% {
opacity: 1;
transform: translate(-50%, -20px) scale(1.1);
}
100% {
opacity: 0;
transform: translate(-50%, -80px) scale(1);
}
}

/* Stage banner - "STAGE 2 - NIGHT PATROL" */
#banner {
position: absolute;
left: 50%;
top: 35%;
transform: translate(-50%, -50%);
z-index: 11;
pointer-events: none;
font-size: 36px;
font-weight: bold;
color: #fff;
text-align: center;
text-shadow:
0 0 12px #000,
0 0 24px rgba(255, 80, 80, 0.6);
letter-spacing: 4px;
opacity: 0;
transition: opacity 0.6s;
}
#banner.show {
opacity: 1;
}
#banner small {
display: block;
font-size: 14px;
color: #ff8080;
letter-spacing: 8px;
margin-top: 8px;
}

/* Game-over overlay */
#gameover {
position: absolute;
inset: 0;
z-index: 12;
display: none;
align-items: center;
justify-content: center;
background: rgba(0, 0, 0, 0.7);
backdrop-filter: blur(4px);
flex-direction: column;
gap: 18px;
text-align: center;
}
#gameover.show {
display: flex;
}
#gameover h1,#gameover h2 {
margin: 0;
font-size: 48px;
color: #ff3030;
letter-spacing: 6px;
}
#gameover p {
margin: 0;
font-size: 18px;
color: #aaa;
}
#gameover button {
margin-top: 14px;
padding: 12px 28px;
background: #ff3030;
color: #000;
border: 0;
font-family: inherit;
font-size: 16px;
font-weight: bold;
letter-spacing: 2px;
cursor: pointer;
border-radius: 4px;
}
#gameover button:hover {
background: #ff5050;
}

/* Pause overlay - shown when game.paused is true */
#pauseOverlay {
position: absolute;
inset: 0;
z-index: 13;
display: none;
align-items: center;
justify-content: center;
background: rgba(0, 0, 0, 0.55);
backdrop-filter: blur(3px);
flex-direction: column;
gap: 14px;
text-align: center;
pointer-events: none;
}
#pauseOverlay.show {
display: flex;
pointer-events: auto;
cursor: pointer;
}
#pauseOverlay h1,#pauseOverlay h2 {
margin: 0;
font-size: 56px;
color: #fff;
letter-spacing: 10px;
}
#pauseOverlay p {
margin: 0;
font-size: 14px;
color: #aaa;
letter-spacing: 4px;
}
.overlayBrand {
font-size: 11px;
letter-spacing: 6px;
color: #ff5050;
opacity: 0.85;
margin-bottom: -6px;
}
#pauseOverlay b {
color: #ff5050;
}

/* Click-to-start splash. Removed from the DOM after the first click (which also resumes the AudioContext). */
#splash {
position: absolute;
inset: 0;
z-index: 100;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 18px;
padding: 0 16px;
text-align: center;
background: radial-gradient(
ellipse at center,
rgba(0, 0, 0, 0.85) 0%,
rgba(0, 0, 0, 0.98) 100%
);
cursor: pointer;
transition: opacity 0.5s ease-out;
}
#splash.hidden {
opacity: 0;
pointer-events: none;
}
#splash .splashBrand {
font-size: 56px;
font-weight: bold;
letter-spacing: 10px;
color: #ff5050;
text-shadow: 0 0 24px rgba(255, 80, 80, 0.4);
}
#splash .splashTagline {
font-size: 12px;
letter-spacing: 4px;
color: #888;
}
#splash .splashByline {
font-size: 11px;
letter-spacing: 2px;
color: #666;
font-style: italic;
margin-top: -8px;
}
/* Narrow viewports: scale the brand down + tighten letter-spacing so "DEATHCHASE 3D" and the tagline fit on one line on iPhones. */
@media (max-width: 480px) {
#splash .splashBrand {
font-size: 36px;
letter-spacing: 6px;
}
#splash .splashTagline {
font-size: 10px;
letter-spacing: 2px;
}
}
#splash .splashCTA {
margin-top: 32px;
font-size: 14px;
letter-spacing: 6px;
color: #fff;
animation: splashPulse 1.6s ease-in-out infinite;
}
@keyframes splashPulse {
0%,
100% {
opacity: 0.5;
}
50% {
opacity: 1;
}
}

/* Top-right icon strip (right-to-left): mute | ? | fullscreen. */
#helpBtn,
#muteBtn {
position: absolute;
top: 10px;
width: 26px;
height: 26px;
display: inline-flex;
align-items: center;
justify-content: center;
background: none;
border: none;
cursor: pointer;
transition: all 0.15s ease;
padding: 0;
z-index: 11;
}
#muteBtn {
right: 10px;
}
#helpBtn {
right: 42px;
}
/* Muted state */
#muteIcon .slash {
opacity: 0;
}
#muteBtn.muted #muteIcon .wave {
opacity: 0.15;
}
#muteBtn.muted #muteIcon .slash {
opacity: 1;
}
#muteBtn.muted #muteIcon {
color: #c44;
}

/* Controls flyout — text only, dark backdrop only when visible */
#helpPanel {
position: absolute;
top: 44px;
right: 10px;
z-index: 11;
font-size: 11px;
line-height: 1.7;
color: #aaa;
background: rgba(0, 0, 0, 0.78);
border: 1px solid rgba(255, 255, 255, 0.08);
padding: 10px 14px;
border-radius: 6px;
text-align: left;
opacity: 0;
pointer-events: none;
transform: translateY(-4px);
transition:
opacity 0.18s ease-out,
transform 0.18s ease-out;
}
#helpPanel.show {
opacity: 1;
transform: translateY(0);
pointer-events: auto;
}
#helpPanel b {
color: #fff;
}

/* Debug stats (FPS + optional draw call / triangle / memory). Click to toggle expanded on desktop. Touch-only devices stay minimal so the fire pad isn't blocked. */
#stats {
position: absolute;
right: 12px;
bottom: 12px;
z-index: 10;
font-size: 10px;
line-height: 1.3;
color: #fff;
text-align: right;
white-space: normal;
mix-blend-mode: difference;
cursor: pointer;
user-select: none;
padding: 2px 4px;
}
/* Portrait: keep `\n` line breaks so the extra metrics stack vertically. Landscape collapses them so the stats read as a single line — saves vertical space on wide displays. */
@media (orientation: portrait) {
#stats {
white-space: pre-line;
}
}
#stats .extra {
display: none;
}
#stats.expanded .extra {
display: block;
}

/* Top-right icons: fullscreen, help, mute.  */
#fullscreenBtn,
#helpBtn,
#muteBtn {
color: #fff;
mix-blend-mode: difference;
}
#fullscreenBtn {
position: absolute;
top: 10px;
right: 74px;
width: 26px;
height: 26px;
display:none;
align-items: center;
justify-content: center;
text-align: center;
vertical-align: middle;
background: none;
border: none;
cursor: pointer;
transition: all 0.15s ease;
padding: 0;
}
#fullscreenBtn:hover,
#helpBtn:hover,
#muteBtn:hover {
transform: scale(1.15);
}


.iframeoverlay{z-index:200}
.gamestpIco{position:relative;z-index:201;}
.iframe_fs_back{z-index:201;}