:root {
--ui-red: #e63946;
--ui-dark: #1d3557;
--ui-yellow: #ffbe0b;
}
.mothergameholder{
background: #1a1a2e;
font-family: "Fredoka", sans-serif;
-webkit-user-select: none;
user-select: none;
}
canvas {
display: block;
cursor:
url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" style="font-size:24px"><text y="24">👆</text></svg>')
14 4,
auto;
}

#clickDebug {
position: absolute;
pointer-events: none;
z-index: 9999;
transform: translate(-50%, -50%);
width: 20px;
height: 20px;
opacity: 0;
transition: opacity 0.3s ease;
}
#clickDebug::before,
#clickDebug::after {
content: "";
position: absolute;
left: 50%;
top: 50%;
width: 100%;
height: 3px;
background: #ff4444;
border-radius: 2px;
box-shadow: 0 0 4px rgba(0, 0, 0, 0.5);
}
#clickDebug::before {
transform: translate(-50%, -50%) rotate(45deg);
}
#clickDebug::after {
transform: translate(-50%, -50%) rotate(-45deg);
}
#performanceStats {
position: absolute;
top: 0;
left: 0;
z-index: 150;
display:none;
}
#statsCustom {
position: absolute;
top: 0;
left: 270px;
font: 10px monospace;
background: rgba(0, 0, 0, 1);
color: #0ff;
padding: 0px 5px;
display: block !important;
white-space: pre;
width: fit-content !important;
}
.start-screen {
position: absolute;
inset: 0;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
z-index: 200;
transition:
opacity 0.6s ease,
transform 0.6s ease;
}
.start-screen.hidden {
opacity: 0;
pointer-events: none;
transform: scale(1.1);
}
.start-title {
font-family: "Bangers", cursive;
font-size: clamp(56px, 14dvmin, 140px);
color: var(--ui-yellow);
text-shadow:
6px 6px 0 var(--ui-red),
12px 12px 0 var(--ui-dark);
animation: bounce 0.8s ease-in-out infinite alternate;
}
@keyframes bounce {
from {
transform: translateY(0) rotate(-1deg);
}
to {
transform: translateY(-15px) rotate(1deg);
}
}
.start-subtitle {
font-size: clamp(18px, 3vw, 28px);
color: white;
margin-top: 1dvh;
}
.start-btn {
margin-top: 50px;
padding: 20px 60px;
font-family: "Bangers", cursive;
font-size: clamp(28px, 5vw, 42px);
background: var(--ui-yellow);
color: var(--ui-dark);
border: 5px solid var(--ui-dark);
border-radius: 60px;
cursor: pointer;
box-shadow: 8px 8px 0 var(--ui-dark);
transition: all 0.15s ease;
}
.start-btn:hover {
transform: translate(-3px, -3px);
box-shadow: 11px 11px 0 var(--ui-dark);
}
.level-select {
margin-top: 2dvh;
text-align: center;
}
.level-label {
font-size: 22px;
color: white;
margin-bottom: 1dvh;
font-weight: 600;
}
.level-buttons {
display: flex;
gap: 12px;
flex-wrap: wrap;
justify-content: center;
}
.level-btn {
padding: 1dvh 24px;
font-family: "Fredoka", sans-serif;
background: white;
border: 4px solid var(--ui-dark);
border-radius: 16px;
cursor: pointer;
box-shadow: 5px 5px 0 var(--ui-dark);
transition: all 0.15s ease;
display: flex;
flex-direction: column;
align-items: center;
min-width: 120px;
}
.level-btn:hover {
transform: translate(-2px, -2px);
box-shadow: 7px 7px 0 var(--ui-dark);
}
.level-btn:active {
transform: translate(2px, 2px);
box-shadow: 2px 2px 0 var(--ui-dark);
}
.level-name {
font-family: "Bangers", cursive;
font-size: 24px;
color: var(--ui-dark);
white-space: nowrap;
}
.level-crowd {
font-size: 14px;
color: #666;
margin-top: 4px;
white-space: nowrap;
}
.level-btn[data-level="0"] {
background: #90ee90;
}
.level-btn[data-level="1"] {
background: #ffe066;
}
.level-btn[data-level="2"] {
background: #ffb347;
}
.level-btn[data-level="3"] {
background: #ff6b6b;
}
.level-btn[data-level="4"] {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
}
.level-btn[data-level="4"] .level-name {
color: white;
}
.level-btn[data-level="4"] .level-crowd {
color: rgba(255, 255, 255, 0.8);
}
.Walter-preview {
margin-top: 2dvh;
padding: 1dvh 35px;
background: white;
border: 5px solid var(--ui-dark);
border-radius: 24px;
box-shadow: 8px 8px 0 var(--ui-dark);
display: flex;
align-items: center;
gap: 20px;
}
.Walter-preview p {
font-weight: 600;
font-size: 18px;
color: var(--ui-dark);
}
.Walter-figure {
width: 50px;
height: 90px;
position: relative;
}
.Walter-figure .head {
width: 20px;
height: 20px;
background: #ffdbac;
border-radius: 50%;
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
}
.Walter-figure .body {
width: 24px;
height: 35px;
background: repeating-linear-gradient(
to bottom,
#cc0000 0px,
#cc0000 5px,
white 5px,
white 10px
);
position: absolute;
top: 22px;
left: 50%;
transform: translateX(-50%);
border-radius: 4px;
}
.Walter-figure .legs {
width: 24px;
height: 30px;
background: #1d3557;
position: absolute;
top: 55px;
left: 50%;
transform: translateX(-50%);
}
.hud {
position: absolute;
top: 20px;
left: 50%;
transform: translateX(-50%);
z-index: 100;
display: flex;
gap: 16px;
opacity: 0;
transition: opacity 0.5s ease;
}
.hud.visible {
opacity: 1;
}
.timer-box {
background: white;
border: 4px solid var(--ui-dark);
border-radius: 16px;
padding: 12px 14px;
box-shadow: 4px 4px 0 var(--ui-dark);
display: flex;
align-items: center;
gap: 12px;
}
.timer-text {
font-family: "Bangers", cursive;
font-size: 36px;
color: var(--ui-dark);
min-width: 80px;
}
.crowd-counter {
border: 4px solid var(--ui-dark);
border-radius: 16px;
padding: 8px 16px;
box-shadow: 4px 4px 0 var(--ui-dark);
display: flex;
flex-direction: column;
align-items: center;
cursor: pointer;
min-width: 100px;
}
.crowd-counter[data-level="0"] {
background: #90ee90;
}
.crowd-counter[data-level="1"] {
background: #ffe066;
}
.crowd-counter[data-level="2"] {
background: #ffb347;
}
.crowd-counter[data-level="3"] {
background: #ff6b6b;
}
.crowd-counter[data-level="4"] {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}
.crowd-counter[data-level="4"] .level-name,
.crowd-counter[data-level="4"] .level-crowd {
color: white;
}
.win-screen {
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.85);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
z-index: 300;
opacity: 0;
pointer-events: none;
transition: opacity 0.5s ease;
}
.win-screen.visible {
opacity: 1;
pointer-events: all;
}
.win-title {
font-family: "Bangers", cursive;
font-size: clamp(40px, 12vw, 100px);
color: var(--ui-yellow);
text-shadow: 6px 6px 0 var(--ui-red);
animation: pulse 0.4s ease-in-out infinite alternate;
}
@keyframes pulse {
from {
transform: scale(1);
}
to {
transform: scale(1.08);
}
}
.win-time {
font-size: clamp(28px, 6vw, 48px);
color: white;
margin-top: 30px;
}
.win-time span {
color: var(--ui-yellow);
font-weight: 700;
}
.win-buttons {
display: flex;
gap: 20px;
margin-top: 50px;
}
.change-level-btn,
.play-again-btn {
margin-top: 50px;
padding: 18px 50px;
font-family: "Bangers", cursive;
font-size: clamp(24px, 4vw, 32px);
border-radius: 50px;
cursor: pointer;
}
.change-level-btn,
.play-again-btn {
background: var(--ui-yellow);
color: var(--ui-dark);
border: 4px solid var(--ui-dark);
}
.play-again-btn {
background: var(--ui-red);
color: white;
border: 4px solid white;
}
.pause-screen {
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.85);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
z-index: 250;
opacity: 0;
pointer-events: none;
transition: opacity 0.3s ease;
}
.pause-screen.visible {
opacity: 1;
pointer-events: all;
}
.pause-title {
font-family: "Bangers", cursive;
font-size: clamp(48px, 10vw, 80px);
color: white;
text-shadow: 4px 4px 0 var(--ui-dark);
}
.pause-buttons {
display: flex;
flex-direction: column;
gap: 16px;
margin-top: 40px;
}
.pause-btn {
padding: 16px 60px;
font-family: "Bangers", cursive;
font-size: 28px;
border: 4px solid var(--ui-dark);
border-radius: 50px;
cursor: pointer;
transition: all 0.15s ease;
}
.pause-btn:hover {
transform: translate(-2px, -2px);
}
.resume-btn {
background: var(--ui-yellow);
color: var(--ui-dark);
}
.pause-btn:not(.resume-btn) {
background: white;
color: var(--ui-dark);
}
.pause-hint {
margin-top: 30px;
color: #888;
font-size: 16px;
}
.instructions {
position: absolute;
bottom: 10px;
left: 50%;
transform: translateX(-50%);
z-index: 100;
text-align: center;
background: rgba(255, 255, 255, 0.5);
border: 3px solid var(--ui-dark);
border-radius: 14px;
padding: 6px 12px;
box-shadow: 4px 4px 0 var(--ui-dark);
opacity: 0;
transition: opacity 0.5s ease;
white-space: nowrap;
font-size: min(3dvw, 12px);
letter-spacing: -0.5px;
}
.instructions.visible {
opacity: 0.95;
}
.instructions kbd {
background: var(--ui-dark);
color: white;
padding: 3px 5px;
border-radius: 6px;
margin: 0 0 0 3px;
}

/* ================================================= */
/* CUSTOM MODAL                                      */
/* ================================================= */
.custom-modal {
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.85);
display: flex;
align-items: center;
justify-content: center;
z-index: 250;
opacity: 0;
pointer-events: none;
transition: opacity 0.3s ease;
}
.custom-modal.visible {
opacity: 1;
pointer-events: all;
}
.custom-content {
background: white;
border: 5px solid var(--ui-dark);
border-radius: 24px;
padding: 30px 40px;
box-shadow: 8px 8px 0 var(--ui-dark);
min-width: 320px;
}
.custom-content h2 {
font-family: "Bangers", cursive;
font-size: 36px;
color: var(--ui-dark);
margin-bottom: 20px;
text-align: center;
}
.custom-content label {
display: block;
margin: 16px 0;
font-weight: 600;
color: var(--ui-dark);
}
.custom-content input[type="range"] {
width: 100%;
margin: 8px 0;
}
.custom-content span {
float: right;
font-family: monospace;
background: var(--ui-dark);
color: white;
padding: 2px 8px;
border-radius: 4px;
}
.custom-buttons {
display: flex;
gap: 12px;
margin-top: 24px;
}
.custom-buttons button {
flex: 1;
}
.custom-warning {
margin-top: 16px;
color: #e63946;
font-size: 14px;
text-align: center;
min-height: 20px;
}




.iframe_fs_back,.iframeoverlay{z-index:10001}
.gamestpIco{position:relative;z-index:10002}
.contentLoader{z-index:20000}