/* FuelFox — base styles, device frame, animations.
   Component-level styling is applied inline by the JS (faithful to the design
   prototype, which is style-object driven). This file owns the shell + globals. */

*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: #1a1a1d;
  font-family: 'Inter', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

input, button, textarea { font: inherit; color: inherit; }
button { -webkit-tap-highlight-color: transparent; }

/* Hide number-input spinners */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
input[type="number"] { -moz-appearance: textfield; }

/* Hide scrollbars */
.hide-scroll::-webkit-scrollbar { display: none; }
.hide-scroll { scrollbar-width: none; -ms-overflow-style: none; }

/* ── Stage / backdrop ─────────────────────────────────────────────────── */
#stage {
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: 32px 16px;
  background:
    radial-gradient(ellipse 90% 60% at 50% 0%, #26262b 0%, #1a1a1d 60%),
    #1a1a1d;
}

/* ── Device frame ─────────────────────────────────────────────────────── */
.device {
  width: 400px;
  height: 820px;
  max-height: calc(100dvh - 48px);
  border-radius: 44px;
  overflow: hidden;
  position: relative;
  isolation: isolate;
  background: var(--bg);
  color: var(--fg);
  box-shadow: 0 40px 80px rgba(0,0,0,.45), 0 0 0 1px rgba(0,0,0,.5);
}
.device--android { border-radius: 36px; }

/* Full-bleed on real phones — behave like an installed app */
@media (max-width: 480px) {
  #stage { padding: 0; background: var(--bg); }
  .device {
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    max-height: none;
    border-radius: 0;
    box-shadow: none;
  }
}

/* ── App content area — respects the real device safe areas (notch, etc.) ── */
.app-content {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding-top: calc(env(safe-area-inset-top) + 10px);
}

/* ── Animations ───────────────────────────────────────────────────────── */
@keyframes scanline {
  0%       { transform: translateY(-40px); opacity: 0; }
  10%, 90% { opacity: 1; }
  100%     { transform: translateY(40px); opacity: 0; }
}
@keyframes slideUp {
  from { transform: translateY(20px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Splash-Ladekreis (erscheint erst, wenn der Start länger als 3 s dauert) */
@keyframes ffspin { to { transform: rotate(360deg); } }
.ff-spinner {
  width: 30px; height: 30px; border-radius: 50%;
  border: 3px solid var(--line);
  border-top-color: var(--accent);
  animation: ffspin 0.9s linear infinite;
}