olid #d8a920;
color: #ffd700; font-size: 24px;
cursor: pointer; padding: 0; margin: 0; flex-shrink: 0;
-webkit-tap-highlight-color: transparent;
display: flex; align-items: center; justify-content: center;
}
#os button:active { background: #d8a920; color: #111; }
#os button.on { background: #d8a920; color: #111; }
#os-toggle {
position: fixed; right: 16px; bottom: 16px;
width: 64px; height: 64px; border-radius: 50%;
background: #d8a920; border: 2px solid #ffd700;
color: #111; font-size: 28px; z-index: 101;
cursor: pointer; padding: 0;
-webkit-tap-highlight-color: transparent;
box-shadow: 0 0 20px rgba(255,215,0,0.4);
}
/* ===== JOYSTICK — never hides ===== */
#joy {
position: fixed; left: 20px; bottom: 100px;
width: 90px; height: 90px; border-radius: 50%;
border: 2px solid #8a6a1c; background: rgba(20,14,6,0.4);
z-index: 50; display: none; touch-action: none;
}
#joyknob {
position: absolute; left: 50%; top: 50%;
width: 36px; height: 36px; margin: -18px 0 0 -18px;
border-radius: 50%; background: rgba(216,169,32,0.8);
}
/* ===== STATUS — my words ===== */
#status {
position: fixed; top: 64px; left: 16px; max-width: 70%;
z-index: 15; color: #ffe9a8; font-size: 14px;
text-shadow: 0 2px 8px #000; pointer-events: none;
opacity: 0; transition: opacity 0.5s;
}
#status.show { opacity: 1; }
/* ===== BOOT ===== */
#boot {
position: fixed; inset: 0; z-index: 1000;
display: flex; align-items: center; justify-content: center;
background: #0b0906; color: #ffd700;
font-size: 16px; letter-spacing: 3px;
}
WAKING CODERS100