/* Shared base for phone, screen and host.
   Colors are variables only — the skin (event.skin.colors) overrides them at runtime via skin.js. */

@font-face { font-family: 'Afek'; src: url('../assets/fonts/afek-regular-aaa.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Afek'; src: url('../assets/fonts/afek-medium-aaa.woff2') format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Afek'; src: url('../assets/fonts/afek-demibold-aaa.woff2') format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Afek'; src: url('../assets/fonts/afek-bold-aaa.woff2') format('woff2'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Afek'; src: url('../assets/fonts/afek-black-aaa.woff2') format('woff2'); font-weight: 900; font-display: swap; }

:root {
  --c-bg: #140b24;
  --c-bg-2: #22123f;
  --c-surface: #2a1a4a;
  --c-text: #ffffff;
  --c-text-dim: #b9acd6;
  --c-primary: #FFD552;
  --c-on-primary: #301680;
  --c-accent: #6B10EB;
  --c-opt-1: #FFD552;
  --c-opt-2: #F989DC;
  --c-opt-3: #5CD0FF;
  --c-opt-4: #6DE0CE;
  --c-good: #38e08a;
  --c-bad: #ff5b6e;
  --c-hot: #FF1B7C;
  --c-neon: #39FF14;
  --c-tot-this: #C25FC9;
  --c-tot-that: #3B49BE;
  --c-line: rgba(255, 255, 255, .14);
  --c-glass: rgba(255, 255, 255, .06);

  --font: 'Afek', 'Rubik', system-ui, Arial, sans-serif;
  --radius: 18px;
  --radius-lg: 28px;
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  font-family: var(--font);
  color: var(--c-text);
  background: var(--c-bg);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}
button, input { font: inherit; color: inherit; }
button { cursor: pointer; border: 0; background: none; padding: 0; }
img { display: block; max-width: 100%; }

/* Space background: two parallax star layers + a soft nebula. Pure CSS, no images. */
.space {
  position: fixed; inset: 0; z-index: -1; overflow: hidden;
  background:
    radial-gradient(120% 70% at 85% -10%, color-mix(in srgb, var(--c-accent) 55%, transparent) 0%, transparent 60%),
    radial-gradient(90% 60% at 0% 110%, color-mix(in srgb, var(--c-opt-2) 22%, transparent) 0%, transparent 60%),
    linear-gradient(180deg, var(--c-bg-2) 0%, var(--c-bg) 70%);
}
.space::before, .space::after {
  content: ''; position: absolute; inset: -50% 0 0 0;
  background-repeat: repeat;
  animation: drift 90s linear infinite;
}
.space::before {
  background-image:
    radial-gradient(1px 1px at 20px 30px, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 120px 80px, #fff 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 60px 150px, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 170px 190px, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 90px 240px, #fff 50%, transparent 51%);
  background-size: 200px 260px;
  opacity: .55;
}
.space::after {
  background-image:
    radial-gradient(2px 2px at 40px 60px, #fff 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 260px 200px, var(--c-opt-3) 50%, transparent 51%),
    radial-gradient(2px 2px at 180px 330px, var(--c-primary) 50%, transparent 51%);
  background-size: 320px 400px;
  opacity: .7;
  animation-duration: 60s;
}
@keyframes drift { from { transform: translateY(0); } to { transform: translateY(50%); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}