/* ═══════════════════════════════════════════════════════════════
   base.css — reset, design tokens, themes, wallpaper, boot

   Every glass surface in this OS derives from the tokens below.
   Change one variable and the whole system re-glazes.
   ═══════════════════════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; margin: 0; padding: 0; }

:root {
  /* ── glass physics ──────────────────────────────────────────── */
  --g-blur:     20px;   /* how much the backdrop diffuses          */
  --g-sat:      185%;   /* glass concentrates colour               */
  --g-bright:   1.06;   /* light gathered by the pane              */
  --g-tint:     255 255 255;
  --g-alpha:    .085;   /* body tint. keep LOW or it reads plastic */
  --g-thick:    1.3px;  /* rim thickness = perceived depth         */
  --g-disperse: .6;     /* prismatic colour split at the edge      */
  --g-sheen:    .5;     /* moving specular highlight strength      */
  --g-radius:    22px;
  --g-radius-sm: 12px;
  --g-radius-xs: 9px;
  --g-radius-2xs: 6px;

  /* Every rounded thing in the OS derives from --g-radius, including
     the ones that would otherwise be hard-coded. Set the corner radius
     to 0 and pills become rectangles and circles become squares,
     because a customisation that only reaches half the system is worse
     than not having it. */
  --r-pill:  min(999px, calc(var(--g-radius) * 45));
  --r-round: min(50%,   calc(var(--g-radius) * 3));

  /* the pane tint, with a per-theme multiplier so smoked glass can be
     dense without moving the user's own Tint slider */
  --tint-a: calc(var(--g-alpha) * var(--g-alpha-mul, 1));

  /* ── light behaviour ───────────────────────────────────────── */
  --edge-hi: 255 255 255;
  --edge-lo: 0 0 0;
  --refract-cool: 130 205 255;  /* light entering the glass */
  --refract-warm: 255 168 125;  /* light leaving the glass  */

  /* ── type ──────────────────────────────────────────────────── */
  --text:     rgb(255 255 255 / .95);
  --text-2:   rgb(255 255 255 / .68);
  --text-3:   rgb(255 255 255 / .54);
  --accent:   192 100% 66%;
  --accent-2: 282 90% 74%;
  --danger:   358 88% 66%;
  --ok:       150 72% 56%;

  /* ── motion ────────────────────────────────────────────────── */
  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-back: cubic-bezier(.16,1.12,.3,1);
  --dur: 320ms;

  /* The dispersion + inner-surface layers, as one reusable token.
     Any component that needs its own outer shadow must still compose
     this in, or it silently loses the layers that make glass read as
     glass:  box-shadow: var(--g-inset), <my shadow>;                */
  --g-inset:
    inset 0 1.5px 10px -5px rgb(var(--refract-cool) / calc(var(--g-disperse) * .85)),
    inset 0 -1.5px 10px -5px rgb(var(--refract-warm) / calc(var(--g-disperse) * .60)),
    inset 0 1px 0 0 rgb(var(--edge-hi) / .28),
    inset 0 -1px 0 0 rgb(var(--edge-lo) / .10);

  --shadow-lift: 0 2px 6px -2px rgb(0 0 0/.30), 0 18px 46px -14px rgb(0 0 0/.50);
  --shadow-deep: 0 4px 10px -3px rgb(0 0 0/.35), 0 40px 90px -20px rgb(0 0 0/.62);

  --menubar-h: 30px;
  --dock-h: 68px;
}

/* ═══════════════════════ THEMES ═══════════════════════ */
[data-theme="aurora"] {
  --wp-base: radial-gradient(120% 90% at 18% 8%, #123a52 0%, #0a1424 46%, #05070f 100%);
  --o1:#22d3ee; --o2:#a855f7; --o3:#2563eb; --o4:#14b8a6; --o5:#ec4899;
}
[data-theme="sunset"] {
  --wp-base: radial-gradient(120% 90% at 78% 12%, #5a2340 0%, #2a1327 48%, #0d0710 100%);
  --o1:#fb923c; --o2:#f43f5e; --o3:#a855f7; --o4:#fbbf24; --o5:#e879f9;
  --refract-cool: 255 190 210; --refract-warm: 255 214 150;
  --accent: 22 95% 66%;
}
[data-theme="abyss"] {
  --wp-base: radial-gradient(110% 100% at 50% 0%, #062b3a 0%, #04121d 52%, #01040a 100%);
  --o1:#06b6d4; --o2:#3b82f6; --o3:#0ea5e9; --o4:#22d3ee; --o5:#6366f1;
  --g-alpha: .07;
  --accent: 190 100% 60%;
}
[data-theme="verdant"] {
  --wp-base: radial-gradient(120% 90% at 25% 90%, #0f3b2e 0%, #08211c 50%, #030b09 100%);
  --o1:#34d399; --o2:#84cc16; --o3:#06b6d4; --o4:#a3e635; --o5:#14b8a6;
  --accent: 158 76% 56%;
}
/* Smoked glass. The pane itself is dark rather than light, which is a
   different thing from a dark theme: --g-tint flips to near-black and
   the density goes up, so light is absorbed passing through instead of
   added. The rims stay bright, because that is where the light still
   catches. */
[data-theme="obsidian"] {
  --wp-base: radial-gradient(125% 95% at 30% 6%, #1c1b22 0%, #0c0c10 46%, #000 100%);
  --o1:#4c1d95; --o2:#155e75; --o3:#3730a3; --o4:#7f1d1d; --o5:#134e4a;
  --g-tint: 6 6 10;
  --g-alpha-mul: 4.2;
  --g-sat: 128%;
  --g-bright: 1.02;
  --edge-hi: 255 255 255;
  --edge-lo: 0 0 0;
  --refract-cool: 140 190 255;
  --refract-warm: 255 152 92;
  --text:   rgb(255 255 255 / .94);
  --text-2: rgb(255 255 255 / .66);
  --text-3: rgb(255 255 255 / .46);
  --accent: 268 92% 72%;
  --accent-2: 190 100% 66%;
  --shadow-lift: 0 2px 6px -2px rgb(0 0 0/.6), 0 18px 46px -14px rgb(0 0 0/.8);
  --shadow-deep: 0 4px 10px -3px rgb(0 0 0/.7), 0 40px 90px -20px rgb(0 0 0/.9);
}
[data-theme="obsidian"] .orb { opacity: calc(var(--orb-op, .62) * .8); }

/* A light theme, to prove the glass system works in both directions. */
[data-theme="lumen"] {
  --wp-base: radial-gradient(120% 90% at 20% 10%, #eef4ff 0%, #dfe8f6 45%, #cfd9ec 100%);
  --o1:#60a5fa; --o2:#c084fc; --o3:#22d3ee; --o4:#fda4af; --o5:#fcd34d;
  --g-alpha: .42; --g-blur: 24px; --g-sat: 150%; --g-bright: 1.14; --g-thick: 1.1px;
  --text:   rgb(15 23 42 / .92);
  --text-2: rgb(15 23 42 / .62);
  --text-3: rgb(15 23 42 / .50);
  --edge-hi: 255 255 255; --edge-lo: 30 41 59;
  --refract-cool: 90 160 255; --refract-warm: 255 140 90;
  --accent: 222 88% 56%;
  --shadow-lift: 0 2px 6px -2px rgb(30 41 59/.14), 0 18px 40px -14px rgb(30 41 59/.28);
  --shadow-deep: 0 4px 10px -3px rgb(30 41 59/.18), 0 40px 80px -20px rgb(30 41 59/.34);
}

body {
  font: 400 13.5px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI Variable Text",
        "Segoe UI", Inter, system-ui, "Helvetica Neue", sans-serif;
  color: var(--text);
  background: #04060c;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  user-select: none;
  cursor: default;
}
button { background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: default; }
input, textarea { font: inherit; color: inherit; }
svg { display: block; }
[hidden] { display: none !important; }

::selection { background: hsl(var(--accent) / .40); color: #fff; }

/* ── scrollbars ──────────────────────────────────────────────
   These have to read as part of the same material, not as a
   control bolted on top of it.

   The earlier version used a transparent border with an inset
   box-shadow for the rim. That never lines up: inset shadows are
   drawn against the border box, so the rim floated a few pixels
   outside the visible capsule. Here the highlight comes from a
   background *gradient* instead, which background-clip clips
   correctly — so the thumb reads as a small lit glass rod lying in
   a groove, with no stray outline. */
* { scrollbar-width: thin; scrollbar-color: rgb(var(--edge-hi) / .24) transparent; }

*::-webkit-scrollbar { width: 12px; height: 12px; }

*::-webkit-scrollbar-track,
*::-webkit-scrollbar-corner { background: transparent; }

*::-webkit-scrollbar-thumb {
  border: 3.5px solid transparent;
  background-clip: padding-box;
  border-radius: var(--r-pill);
  background-image: linear-gradient(180deg,
    rgb(var(--edge-hi) / .40) 0%,
    rgb(var(--edge-hi) / .15) 45%,
    rgb(var(--edge-hi) / .26) 100%);
  transition: background-image 160ms linear;
}
*::-webkit-scrollbar-thumb:horizontal {
  background-image: linear-gradient(90deg,
    rgb(var(--edge-hi) / .40) 0%,
    rgb(var(--edge-hi) / .15) 45%,
    rgb(var(--edge-hi) / .26) 100%);
}
*::-webkit-scrollbar-thumb:hover {
  background-image: linear-gradient(180deg,
    rgb(var(--edge-hi) / .62), rgb(var(--edge-hi) / .30) 50%, rgb(var(--edge-hi) / .44));
}
*::-webkit-scrollbar-thumb:active {
  background-image: linear-gradient(180deg,
    hsl(var(--accent) / .8), hsl(var(--accent-2) / .55));
}
/* the groove the rod sits in — only while that area is scrollable */
*::-webkit-scrollbar-track:vertical {
  background-image: linear-gradient(90deg,
    transparent 5px, rgb(var(--edge-lo) / .16) 5px,
    rgb(var(--edge-lo) / .16) 7px, transparent 7px);
}
*::-webkit-scrollbar-track:horizontal {
  background-image: linear-gradient(180deg,
    transparent 5px, rgb(var(--edge-lo) / .16) 5px,
    rgb(var(--edge-lo) / .16) 7px, transparent 7px);
}

/* ═══════════════════════ WALLPAPER ═══════════════════════
   Vivid, slowly moving colour. This is what the glass refracts.
   A flat grey desktop makes even perfect glass invisible. */
.wallpaper { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.wp-base {
  position: absolute; inset: 0;
  background: var(--wp-base);
  transition: background 900ms var(--ease);
}
.wp-orbs { position: absolute; inset: -12%; }
.orb {
  position: absolute; border-radius: var(--r-round);
  /* every value here is overridable by the wallpaper studio */
  filter: blur(var(--orb-blur, 72px)) saturate(150%);
  opacity: var(--orb-op, .62);
  mix-blend-mode: screen;
  will-change: transform;
}
[data-theme="lumen"] .orb {
  mix-blend-mode: normal;
  opacity: calc(var(--orb-op, .62) * .8);
  filter: blur(calc(var(--orb-blur, 72px) * 1.16)) saturate(130%);
}
.orb-1 { width:calc(44vw * var(--orb-scale,1)); height:calc(44vw * var(--orb-scale,1)); left:2%;   top:4%;      background:var(--o1); animation:drift1 calc(34s * var(--orb-speed,1)) var(--ease) infinite alternate; }
.orb-2 { width:calc(38vw * var(--orb-scale,1)); height:calc(38vw * var(--orb-scale,1)); right:4%;  top:-4%;     background:var(--o2); animation:drift2 calc(41s * var(--orb-speed,1)) var(--ease) infinite alternate; }
.orb-3 { width:calc(50vw * var(--orb-scale,1)); height:calc(50vw * var(--orb-scale,1)); left:22%;  bottom:-16%; background:var(--o3); animation:drift3 calc(47s * var(--orb-speed,1)) var(--ease) infinite alternate; }
.orb-4 { width:calc(26vw * var(--orb-scale,1)); height:calc(26vw * var(--orb-scale,1)); right:16%; bottom:6%;   background:var(--o4); animation:drift1 calc(29s * var(--orb-speed,1)) var(--ease) infinite alternate-reverse; }
.orb-5 { width:calc(22vw * var(--orb-scale,1)); height:calc(22vw * var(--orb-scale,1)); left:44%;  top:32%;     background:var(--o5); animation:drift2 calc(37s * var(--orb-speed,1)) var(--ease) infinite alternate-reverse; }
@keyframes drift1 { to { transform: translate3d(18vw, 12vh, 0) scale(1.22); } }
@keyframes drift2 { to { transform: translate3d(-16vw, 16vh, 0) scale(.82); } }
@keyframes drift3 { to { transform: translate3d(12vw, -14vh, 0) scale(1.14); } }

/* Faint structural grid: gives refraction straight lines to bend. */
.wp-grid {
  position: absolute; inset: 0; opacity: var(--wp-grid-op, .16);
  background-image:
    linear-gradient(rgb(var(--edge-hi)/.5) .5px, transparent .5px),
    linear-gradient(90deg, rgb(var(--edge-hi)/.5) .5px, transparent .5px);
  background-size: 64px 64px, 64px 64px;
  mask-image: radial-gradient(90% 80% at 50% 40%, #000 10%, transparent 78%);
}
.wp-grain {
  position: absolute; inset: 0;
  filter: url(#ds-grain);
  opacity: .5;
  mix-blend-mode: overlay;
}

@media (prefers-reduced-motion: reduce) {
  .orb { animation: none !important; }
}

/* ── motion levels (Settings › Desktop) ── */
html[data-motion="reduced"] .orb { animation: none !important; }
html[data-motion="reduced"] .win,
html[data-motion="reduced"] .land-card,
html[data-motion="reduced"] .toast,
html[data-motion="reduced"] .menu-pop,
html[data-motion="reduced"] .ctx { animation-duration: 120ms !important; }
html[data-motion="off"] .orb { animation: none !important; }
html[data-motion="off"] *,
html[data-motion="off"] *::before,
html[data-motion="off"] *::after {
  animation-duration: .01ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: .01ms !important;
}

/* ═══════════════════════ BOOT ═══════════════════════ */
.boot {
  position: fixed; inset: 0; z-index: 9000;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: rgb(4 6 12 / .55);
  backdrop-filter: blur(30px) saturate(140%);
  -webkit-backdrop-filter: blur(30px) saturate(140%);
  transition: opacity 640ms var(--ease), transform 900ms var(--ease);
}
.boot.done { opacity: 0; transform: scale(1.06); pointer-events: none; }
.boot-mark { animation: bootspin 9s linear infinite, bootin 900ms var(--ease-back); }
@keyframes bootspin { to { transform: rotate(360deg); } }
@keyframes bootin { from { opacity: 0; transform: scale(.6); } }
.boot-name {
  margin-top: 22px; font-size: 24px; font-weight: 250;
  letter-spacing: .24em; text-transform: uppercase;
  color: rgb(255 255 255 / .9);
}
.boot-name span { font-weight: 600; letter-spacing: .1em; opacity: .55; }
.boot-bar {
  margin-top: 30px; width: 180px; height: 2px;
  border-radius: var(--g-radius-xs); overflow: hidden;
  background: rgb(255 255 255 / .12);
  box-shadow: inset 0 0 0 .5px rgb(255 255 255 / .16);
}
.boot-bar i {
  display: block; height: 100%; width: 0%; border-radius: var(--g-radius-xs);
  background: linear-gradient(90deg, transparent, #fff, transparent);
  animation: bootload 2.3s var(--ease) forwards;
}
@keyframes bootload { 0% { width: 0; } 55% { width: 62%; } 100% { width: 100%; } }
.boot-status {
  margin-top: 16px; font-size: 10.5px;
  letter-spacing: .2em; text-transform: uppercase;
  color: rgb(255 255 255 / .40);
  font-variant-numeric: tabular-nums;
}

.ds-filters { position: absolute; width: 0; height: 0; overflow: hidden; }
.desktop { position: fixed; inset: 0; z-index: 10; display: flex; flex-direction: column; }