/* ================================
   1) TOKENS (root variables)
   ================================ */
:root {
  color-scheme: dark;

  /* Typography */
  --ui-font: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --ui-line: 1.3;
  --fs-xs: 12px;
  --fs-sm: 14px;
  --fs-md: 16px;

  /* Radii & spacing */
  --radius-sm: 10px;
  --radius-md: 12px;
  --sp-1: 8px;
  --sp-2: 10px;
  --sp-3: 12px;
  --sp-4: 16px;

  /* Z-index stack */
  --z-fx: 0;
  --z-world: 1;
  --z-hud: 9;
  --z-home: 10;

  /* Colors */
  --text: #eaf2ff;
  --bg-page: rgb(0, 0, 0);

  /* Glass surface */
  --glass-alpha: 0.65; /* lower = airier, higher = more opaque */
  --glass-blur: 8px;
  --glass-bg: rgba(15, 20, 28, var(--glass-alpha));
  --glass-border: rgba(255, 255, 255, 0.2);
  --glass-shadow: 0 6px 18px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.08);

  /* Solid (non-glass) surface */
  --solid-bg: #12161d;
  --solid-border: #ffffff1a;
  --solid-shadow: 0 6px 18px rgba(0, 0, 0, 0.4);
}

/* ================================
   2) BASE ELEMENTS
   ================================ */
html, body { height: 100%; margin: 0; }
body {
  background: var(--bg-page);
  color: var(--text);
  font-family: var(--ui-font);
  line-height: var(--ui-line);
  font-size: var(--fs-sm);
}

/* ================================
   3) LAYOUT LAYERS
   ================================ */
.viewport {
  position: fixed;
  inset: 0;
  background: transparent;
  overflow: hidden;      /* clip the world outside */
  touch-action: none;    /* smooth pan/pinch on touch */
  user-select: none;
  cursor: grab;
}

#fx {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: var(--z-fx);  /* under the world */
}

#world {
  position: absolute;
  inset: 0;
  will-change: transform;
  z-index: var(--z-world);
}

/* Make scale available to CSS for crisp composition */
#world { --world-scale: 1; }

/* ================================
   4) COMPONENTS
   ================================ */

/* 4a) Surfaces */
.glass {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow);
  color: var(--text);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
}

.solid {
  background: var(--solid-bg);
  border: 1px solid var(--solid-border);
  box-shadow: var(--solid-shadow);
  color: var(--text);
}

/* 4b) Buttons */
.btn {
  display: inline-block;
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--radius-md);
  font-size: var(--fs-sm);
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}
.btn--lg { font-size: var(--fs-md); }

.btn--home {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: var(--z-home);
}
.btn--home:active { transform: translateY(1px); }

/* 4c) HUD (display-only; visual comes from .glass on the element) */
.hud {
  position: fixed;
  left: 12px;
  bottom: 10px;
  z-index: var(--z-hud);
  font-size: var(--fs-xs);
  padding: var(--sp-1) var(--sp-2);
  border: none;
  border-radius: var(--radius-sm);
  pointer-events: none;
  /* NOTE: No background/border/shadow here—those come from .glass */
}

/* 4d) World-space center positioning utility for the CTA button */
.center-abs {
  position: absolute;
  left: 50%;
  top: 50%;
  /* compose: base translate + optional crisp scale */
  transform: translate(-50%, -50%) var(--extra-transform, none);
  transform-origin: 50% 50%;
}

/* 4e) Crisp scaling (opt-in on world children)
   - Cancels parent bitmap scale
   - Compensates position drift using TOP-LEFT world coords (wx/wy)
   - Scales typography/layout so proportions stay constant
*/
.crisp {
  /* world scale provided by zoomquality */
  --invS: calc(1 / var(--world-scale));

  /* per-element TOP-LEFT position in world coords (set from JS) */
  --wx: 0px;
  --wy: 0px;

  /* Correct compensation for a child with transform-origin: 0 0
     fix = (1 - 1/s) * L  (applied per axis) */
  --fixX: calc((1 - var(--invS)) * var(--wx));
  --fixY: calc((1 - var(--invS)) * var(--wy));

  /* applied by .window and .center-abs via --extra-transform */
  --extra-transform: translate(var(--fixX), var(--fixY)) scale(var(--invS));

  /* vector-sharp scaling of text/layout */
  font-size: calc(1em * var(--world-scale));
}

/* ensure button proportions follow text when crisp */
.btn.crisp {
  padding: 0.75em 1.0em;
  border-radius: 0.75em;
}

/* 4f) Glass window component */
.window {
  position: absolute;
  border-radius: var(--radius-md);
  overflow: hidden;
  box-sizing: border-box;
  transform: var(--extra-transform, none);
  transform-origin: 0 0;
  display: flex;
  flex-direction: column;
}
.window__titlebar {
  padding: var(--sp-2) var(--sp-3);
  font-size: 1em;
  font-weight: 600;
  letter-spacing: 0.02em;
  user-select: none;
  -webkit-user-select: none;
  cursor: grab;
  border-bottom: 1px solid rgba(255,255,255,0.10);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.12);
  /* center title content */
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.window.is-dragging .window__titlebar { cursor: grabbing; }
.window__body {
  padding: var(--sp-3);
  font-size: 1em;
  overflow: auto;
  flex: 1 1 auto;
  min-height: 0;
  overscroll-behavior: contain;
  touch-action: auto;
  /* prevent content from growing/shrinking the window */
}

/* Rounded, responsive media inside windows */
.window__body img,
.window__body video {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 0.5em; /* inherits crisp scaling */
  margin: 0 auto;       /* centers media if width < 100% in the future */
}

/* Vertical rhythm for stacked body children */
.window__body > * + * { margin-top: 0.75em; }

/* Crisp-friendly spacing/radius when the window opts into .crisp */
.window.crisp { border-radius: 0.75em; }
.window.crisp .window__titlebar { padding: 0.75em 1em; }
.window.crisp .window__body { padding: 1em; }

/* ================================
   5) UTILITIES & STATES
   ================================ */
.viewport.dragging { cursor: grabbing; }