.lil-gui.root {
--width: 170px;
}
.lil-gui.autoPlace {
right: 0;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.mothergameholder{
font-family: system-ui, sans-serif;
overflow: hidden;
overscroll-behavior: none;
-webkit-user-select: none;
user-select: none;
}
#ui {
position: absolute;
top: 0;
left: 0;
color: #fff;
font: 600 13px/1.7 monospace;
background: rgba(0, 0, 0, 0.6);
padding: 5px 7px;
border-radius: 8px;
pointer-events: none;
min-width: 180px;
}
#ui #uiHeader {
font-size: 18px;
border-bottom: 1px solid rgba(255, 255, 255, 0.2);
cursor: pointer;
pointer-events: auto;
user-select: none;
}
#ui #uiHeader:hover {
color: #4ecdc4;
}
#ui #uiHeader::after {
content: " ▶";
margin-left: 10px;
font-size: 10px;
opacity: 0.6;
}
#ui.collapsed #uiHeader::after {
content: " ▼";
}
#ui.collapsed #uiContent {
display: none;
}
.score {
color: #ffd700;
font-size: 15px;
}
.mice-count {
color: #ff9999;
display: none;
}
:root {
--facecam-width: 150px;
--facecam-height: 105px;
}
#facecam {
pointer-events: all;
margin: 10px 0;
width: var(--facecam-width);
height: var(--facecam-height);
border: 4px solid rgba(255, 255, 255, 0.8);
border-radius: 12px;
overflow: hidden;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
z-index: 10;
}
#performanceStats {
display: none;
position: absolute;
flex-direction: column;
bottom: 0;
/*left: 0;*/
right: 275px;
height: 50px;
}
#performanceStats.gl {
display: flex;
}
#performanceStats div {
display: flex;
visibility: visible !important;
position: relative !important;
opacity: 0.9 !important;
z-index: 10000 !important;
}
#mobileControls {
font-family: Monospace;
font-size: 13px;
pointer-events: auto;
--unit: 8px;
--glass-bg: rgba(0, 0, 0, 0.35);
--solid-border: rgba(255, 255, 255, 1);
}
#mobileControls #joystick-left,
#mobileControls #joystick-right {
width: calc(14 * var(--unit)) !important;
height: calc(14 * var(--unit)) !important;
position: absolute;
z-index: 1000;
}
#mobileControls #joystick-left {
bottom: calc(3 * var(--unit));
left: calc(0.5 * var(--unit));
}
#mobileControls #joystick-right {
bottom: calc(3 * var(--unit));
right: calc(0.5 * var(--unit));
}
#mobileControls #joystick-left #nipple_0_0 .back,
#mobileControls #joystick-right #nipple_1_1 .back {
width: calc(14 * var(--unit)) !important;
height: calc(14 * var(--unit)) !important;
margin-left: calc(-7 * var(--unit)) !important;
margin-top: calc(-7 * var(--unit)) !important;
background: var(--glass-bg) !important;
border: 1px solid var(--solid-border) !important;
}
#mobileControls #joystick-left #nipple_0_0 .front,
#mobileControls #joystick-right #nipple_1_1 .front {
display: flex !important;
align-items: center;
justify-content: center;
width: calc(5 * var(--unit)) !important;
height: calc(5 * var(--unit)) !important;
margin-left: calc(-2.5 * var(--unit)) !important;
margin-top: calc(-2.5 * var(--unit)) !important;
background: rgba(255, 255, 255, 1) !important;
text-align: center;
color: black;
font-size: calc(1.8 * var(--unit));
font-weight: 600;
}
#mobileControls #joystick-left #nipple_0_0 .front::before {
content: "FWD";
}
#mobileControls #joystick-right #nipple_1_1 .front::before {
content: "TURN";
}
/* Score popup animation */
.score-popup {
position: absolute;
pointer-events: none;
z-index: 1000;
color: #ffd700;
font: bold 28px monospace;
text-shadow: 0 0 10px rgba(255, 215, 0, 0.8),
2px 2px 4px rgba(0, 0, 0, 0.5);
animation: scoreFloat 1.2s ease-out forwards;
}
@keyframes scoreFloat {
0% {
opacity: 1;
transform: translate(-50%, 0) scale(1);
}
100% {
opacity: 0;
transform: translate(-50%, -80px) scale(1.5);
}
}
/* Splash screen */
#splash {
position: absolute;
inset: 0;
z-index: 9999;
background: #000
url("/games/hiss-highness-directembedcode/hiss_highness_splash.png")
center/cover no-repeat;
display: flex;
align-items: center;
justify-content: center;
}
#splash .click-prompt {
position: absolute;
bottom: 50%;
transform: translateY(50%);
color: #fff;
font: bold 24px monospace;
text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.8);
animation: loadingPulse 1s ease-in-out infinite;
}
@keyframes loadingPulse {
0%,
100% {
opacity: 0.4;
}
50% {
opacity: 1;
}
}
#splash.hidden {
opacity: 0;
pointer-events: none;
transition: opacity 0.5s ease-out;
}
.lil-gui.autoPlace{position:absolute !important;display:none;top:5px !important;right:5px !important;}
.iframe_fs_back,.iframeoverlay{z-index:10001}
.gamestpIco{position:relative;z-index:10002}
.mothergameholder .lil-gui.autoPlace{display:block;}