8px;
}
#codeinput {
flex: 1; height: 40px; border-radius: 20px;
border: 1px solid #ffd700; background: rgba(0,0,0,0.7);
color: #ffd700; padding: 0 16px; font-size: 14px;
outline: none;
}
#codeinput::placeholder { color: #8a6a1c; }
#codesend {
width: 60px; height: 40px; border-radius: 20px;
border: 1px solid #ffd700; background: #ffd700;
color: #000; font-weight: bold; font-size: 14px;
cursor: pointer;
}
/* ===== THE OS — every control lives here ===== */
#os {
position: fixed; bottom: 24px; left: 50%;
transform: translateX(-50%);
z-index: 100; display: none;
flex-direction: row; flex-wrap: wrap;
gap: 12px; justify-content: center; align-items: center;
max-width: 94vw; max-height: 60vh; overflow-y: auto;
padding: 18px;
background: rgba(10,8,4,0.95);
border: 2px solid #8a6a1c; border-radius: 24px;
}
#os.open { display: flex; }
#os button {
width: 60px; height: 60px; border-radius: 50%;
background: rgba(20,14,6,0.9); border: 1px solid #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;
}
#grade { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 4; background: linear-gradient(180deg, rgba(255,180,100,0.06) 0%, transparent 40%, transparent 70%, rgba(100,50,150,0.08) 100%); mix-blend-mode: overlay; }
#vignette { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 5; background: radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,0.4) 100%); }
LAT -- LON --