/* Lunar Looters — hand-written custom CSS.
   Split out of index.html on 2026-09-03 as the first step of a "give this game
   room to grow" pass (see the Claude Project's README.md Technology Plan): the
   compiled Tailwind utility classes already lived in their own file
   (tailwind.css); this is the small amount of genuinely custom CSS that used
   to sit in a <style> block at the top of index.html. Purely a file-
   organization move — no rule below changed, only where it lives. */

/* overflow-x on both html and body (not just body's shorthand overflow:hidden):
   iOS Safari can still expand its layout viewport to fit horizontally-overflowing
   content even with a device-width meta viewport, which shrinks/shifts everything
   on screen and was a likely contributor to top UI buttons landing off-screen on
   iPad. Belt-and-suspenders alongside the flex-wrap fix on the top HUD row. */
html { overflow-x: hidden; max-width: 100vw; }
body { margin: 0; overflow: hidden; overflow-x: hidden; max-width: 100vw; background-color: #050505; touch-action: none; user-select: none; -webkit-user-select: none; }
canvas { display: block; }

/* Any touch device (phone or tablet) in portrait — pointer:coarse is what
   actually distinguishes "touchscreen" from "desktop/laptop with a mouse or
   trackpad", regardless of window width/aspect ratio, so a narrow desktop
   browser window never triggers this, but an iPad in portrait does. */
@media (orientation: portrait) and (pointer: coarse) {
    #rotateDeviceOverlay { display: flex !important; }
}

/* Custom scrollbar for panels */
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #1e293b; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #06b6d4; }

/* 2026-09-21: kill Chrome/Safari's native autofill styling on form inputs. Every
   text input in this app already sets text-white via Tailwind (see index.html's
   #authFirstName/#authLastName/etc. and the rest of the New Account form), but
   the New Account form's address-style fields carry standard autocomplete
   tokens (given-name, family-name, address-line1, address-level2, postal-code,
   country-name, ...) so the browser's own address-autofill can kick in on them -
   and WebKit/Blink autofill overrides text/background color with its own
   near-black-on-pale-yellow styling via -webkit-text-fill-color, at a
   specificity plain `color`/`background-color` rules can't beat. That's why
   those fields could look dark-on-light instead of the white-on-dark every
   other field (like #authEmail, which has no matching autocomplete token and
   so never triggers this) already had. -webkit-box-shadow's inset trick below
   repaints the autofilled background back to roughly the same bg-black/40 the
   field already uses instead of the browser's yellow, and the huge transition
   delay stops Chrome's own background flash from ever becoming visible. */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    -webkit-text-fill-color: #ffffff;
    -webkit-box-shadow: 0 0 0 1000px rgba(0, 0, 0, 0.4) inset;
    box-shadow: 0 0 0 1000px rgba(0, 0, 0, 0.4) inset;
    caret-color: #ffffff;
    transition: background-color 5000s ease-in-out 0s;
}