/* 
   VT/REALMS v2  Full Stylesheet
*/
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Orbitron:wght@400;500;600;700;800;900&display=swap');

/*  CSS Variables  */
:root {
  --void-black: #0A0A0C;
  --nebula-dark: #141719;
  --nebula-mid: #20272B;
  --twilight: #313B44;
  --stardust: #7E8D9A;
  --moonlight: #C6CCD1;
  --starlight: #F0F2F3;
  --signal-yellow: #f5f122;
  --steel-cyan: #64abc4;
  --gunmetal: #7f93a1;
  --neon-lime: #A1FF3C;
  --citrine-orange: #FF7A00;
  --success: #00E676;
  --warning: #FFD740;
  --danger: #FF7A00;
  --map-location: #22D3EE;
  --map-path: #F59E0B;
  --map-compass: #6A6A8A;
  --tag-boss: #EC407A;
  --player-amber: #FF9800;
  --player-rose: #E91E63;

  /*  Font Families  */
  --font-display: 'Orbitron', sans-serif;
  --font-body: 'Inter', sans-serif;

  /*  Typography Scale  */
  --fs-xs: 10px;
  --fs-sm: 12px;
  --fs-base: 14px;
  --fs-lg: 18px;
  --fs-xl: 24px;
  --fs-hero: clamp(26px, 3.5vw, 40px);

  /*  Font Weights  */
  --fw-normal: 500;
  --fw-medium: 600;
  --fw-bold: 700;

  /*  Letter Spacing  */
  --ls-tight: 0.5px;
  --ls-normal: 1px;
  --ls-wide: 2px;
  --ls-wider: 3px;
  --ls-hero: 6px;

  /*  Line Height  */
  --lh-tight: 1.3;
  --lh-normal: 1.5;
  --lh-relaxed: 1.7;

  /*  Font Weight (addition for t-hint / t-body)  */
  --fw-regular: 400;

  /*  Swatch Palette (Color Picker)  */
  --colorpicker-gold: #FFBB00;
  --colorpicker-hotpink: #FF69B4;
  --colorpicker-pink: #E91E63;
  --colorpicker-gray: #9E9E9E;
  --colorpicker-white: #FFFFFF;
  --colorpicker-green: #00E676;
  --colorpicker-cyan: #00E5FF;
  --colorpicker-blue: #3C78FF;
  --colorpicker-violet: #B43CFF;
  --colorpicker-black: #000000;

  /*  Opacity  */
  --opacity-disabled: 40%;
  --opacity-scrim: 60%;
  --opacity-shadow: 50%;
  --opacity-glass: 95%;

  /*  Border Width  */
  --border-width: 1px;
  --border-width-active: 2px;

  /*  Z-Index  Local (component-internal stacking)  */
  --z-local: 1;
  --z-local-mid: 2;
  --z-local-top: 3;

  /*  Z-Index  Global Scale  */
  --z-base: 0;
  --z-float: 50;
  --z-raised: 100;
  --z-dropdown: 150;
  --z-toolbar: 200;
  --z-panel: 250;
  --z-window: 300;
  --z-shelf: 350;
  --z-overlay: 400;
  --z-blanket: 450;
  --z-modal: 500;
  --z-dialog: 550;
  --z-popup: 600;
  --z-menu: 650;
  --z-tooltip: 700;
  --z-flag: 750;
  --z-toast: 800;
  --z-alert: 850;
  --z-cinematic: 900;
  --z-system: 950;

  /*  Backdrop Blur  */
  --blur-sm: 4px;
  --blur-md: 12px;
  --blur-lg: 20px;

  /*  Effect Tokens (internal  consumed by .fx-* and .tr-* classes)  */
  --duration-fast: 0.15s;
  --duration-normal: 0.2s;
  --duration-smooth: 0.3s;
  --ease-default: ease;
  --lift-sm: -2px;
  --lift-md: -4px;
  --scale-sm: 1.03;
  --scale-md: 1.05;
  --glow-radius-xs: 8px;
  --glow-radius-sm: 20px;
  --glow-radius-md: 30px;
  --opacity-tint: 40%;
  --opacity-glow: 40%;
  --opacity-glow-strong: 50%;

  /*  Spacing  */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 12px;
  --space-lg: 16px;
  --space-xl: 24px;
  --btn-padding: 12px 28px;

  /*  Radius  */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-pill: 100px;
  --radius-circle: 50%;
}

/*  TYPOGRAPHY CLASSES (DD §5.7)  */
/* Inter - reading classes */
.t-micro  { font-family: var(--font-body); font-size: var(--fs-xs);   font-weight: var(--fw-normal);  text-transform: none; letter-spacing: var(--ls-tight);  }
.t-hint   { font-family: var(--font-body); font-size: var(--fs-sm);   font-weight: var(--fw-regular); text-transform: none; letter-spacing: var(--ls-tight);  }
.t-body   { font-family: var(--font-body); font-size: var(--fs-base); font-weight: var(--fw-regular); text-transform: none; letter-spacing: normal;           }
.t-bold   { font-family: var(--font-body); font-size: var(--fs-base); font-weight: var(--fw-medium);  text-transform: none; letter-spacing: normal;           }

/* Orbitron - scanning classes */
.t-pill    { font-family: var(--font-display); font-size: var(--fs-xs);   font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: var(--ls-normal); }
.t-label   { font-family: var(--font-display); font-size: var(--fs-sm);   font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: var(--ls-normal); }
.t-button  { font-family: var(--font-display); font-size: var(--fs-base); font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: var(--ls-normal); }
.t-heading { font-family: var(--font-display); font-size: var(--fs-lg);   font-weight: var(--fw-bold); text-transform: none;      letter-spacing: var(--ls-wide);   }
.t-title   { font-family: var(--font-display); font-size: var(--fs-xl);   font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: var(--ls-wider);  }
.t-hero    { font-family: var(--font-display); font-size: var(--fs-hero); font-weight: var(--fw-bold); text-transform: none;      letter-spacing: var(--ls-hero);   }

/* -- Transition Speed -- */
.tr-fast {
  transition-duration: var(--duration-fast);
  transition-timing-function: var(--ease-default);
}
.tr-normal {
  transition-duration: var(--duration-normal);
  transition-timing-function: var(--ease-default);
}
.tr-smooth {
  transition-duration: var(--duration-smooth);
  transition-timing-function: var(--ease-default);
}

/* -- Hover Effects -- */
.fx-highlight {
  transition: border-color var(--duration-fast) var(--ease-default);
}
.fx-highlight:hover {
  border-color: var(--fx-color);
}

.fx-tint {
  transition: background-color var(--duration-fast) var(--ease-default);
}
.fx-tint:hover {
  background-color: color-mix(in srgb, var(--fx-color) var(--opacity-tint), transparent);
}

.fx-glow {
  transition: box-shadow var(--duration-normal) var(--ease-default);
}
.fx-glow:hover {
  box-shadow: 0 0 var(--glow-radius-sm)
    color-mix(in srgb, var(--fx-color) var(--opacity-glow), transparent);
}

.fx-glow-strong {
  transition: box-shadow var(--duration-normal) var(--ease-default);
}
.fx-glow-strong:hover {
  box-shadow: 0 0 var(--glow-radius-md)
    color-mix(in srgb, var(--fx-color) var(--opacity-glow-strong), transparent);
}

.fx-glow-static {
  box-shadow: 0 0 var(--glow-radius-xs)
    color-mix(in srgb, var(--fx-color) var(--opacity-glow), transparent);
}

.fx-lift {
  transition: transform var(--duration-normal) var(--ease-default);
}
.fx-lift:hover {
  transform: translateY(var(--lift-sm));
}

.fx-lift-strong {
  transition: transform var(--duration-smooth) var(--ease-default);
}
.fx-lift-strong:hover {
  transform: translateY(var(--lift-md));
}

.fx-scale {
  transition: transform var(--duration-fast) var(--ease-default);
}
.fx-scale:hover {
  transform: scale(var(--scale-sm));
}

.fx-scale-strong {
  transition: transform var(--duration-fast) var(--ease-default);
}
.fx-scale-strong:hover {
  transform: scale(var(--scale-md));
}

/* -- Idle / Ambient Effects -- */
.fx-pulse {
  animation: pulse 2s ease-in-out infinite;
}

.fx-spin {
  animation: spin 1s linear infinite;
}

.fx-fade-in {
  animation: fadeInUp 0.3s ease forwards;
}

.fx-sweep {
  position: relative;
  overflow: hidden;
}
.fx-sweep::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: linear-gradient(90deg,
    transparent 0%,
    color-mix(in srgb, var(--fx-color) 55%, transparent) 35%,
    color-mix(in srgb, var(--fx-color) 55%, transparent) 55%,
    transparent 90%);
  transform: translateX(-110%);
  animation: sweep 10s ease-in-out infinite;
  pointer-events: none;
}

/* -- Color Riders -- */
.color-cyan {
  --fx-color: var(--steel-cyan);
  --rider-border: var(--steel-cyan);
  --rider-bg-tint: color-mix(in srgb, var(--steel-cyan) var(--opacity-tint), transparent);
  --rider-text: var(--steel-cyan);
}

.color-yellow {
  --fx-color: var(--signal-yellow);
  --rider-border: var(--signal-yellow);
  --rider-bg-tint: color-mix(in srgb, var(--signal-yellow) var(--opacity-tint), transparent);
  --rider-text: var(--signal-yellow);
}

.color-orange {
  --fx-color: var(--citrine-orange);
  --rider-border: var(--citrine-orange);
  --rider-bg-tint: color-mix(in srgb, var(--citrine-orange) var(--opacity-tint), transparent);
  --rider-text: var(--citrine-orange);
}

.color-lime {
  --fx-color: var(--neon-lime);
  --rider-border: var(--neon-lime);
  --rider-bg-tint: color-mix(in srgb, var(--neon-lime) var(--opacity-tint), transparent);
  --rider-text: var(--neon-lime);
}

.color-gunmetal {
  --fx-color: var(--gunmetal);
  --rider-border: var(--gunmetal);
  --rider-bg-tint: color-mix(in srgb, var(--gunmetal) var(--opacity-tint), transparent);
  --rider-text: var(--gunmetal);
}

.color-green {
  --fx-color: var(--colorpicker-green);
  --rider-border: var(--colorpicker-green);
  --rider-bg-tint: color-mix(in srgb, var(--colorpicker-green) var(--opacity-tint), transparent);
  --rider-text: var(--colorpicker-green);
}

.color-gold {
  --fx-color: var(--colorpicker-gold);
  --rider-border: var(--colorpicker-gold);
  --rider-bg-tint: color-mix(in srgb, var(--colorpicker-gold) var(--opacity-tint), transparent);
  --rider-text: var(--colorpicker-gold);
}

.color-pink {
  --fx-color: var(--colorpicker-pink);
  --rider-border: var(--colorpicker-pink);
  --rider-bg-tint: color-mix(in srgb, var(--colorpicker-pink) var(--opacity-tint), transparent);
  --rider-text: var(--colorpicker-pink);
}
.color-starlight {
  --fx-color: var(--starlight);
  --rider-border: var(--starlight);
  --rider-bg-tint: color-mix(in srgb, var(--starlight) var(--opacity-tint), transparent);
  --rider-text: var(--starlight);
}
.color-void {
  --fx-color: var(--void-black);
  --rider-border: var(--void-black);
  --rider-bg-tint: color-mix(in srgb, var(--void-black) var(--opacity-tint), transparent);
  --rider-text: var(--void-black);
}

/* -- Spacing Utilities -- */
.gap-xs { gap: var(--space-xs); }
.gap-sm { gap: var(--space-sm); }
.gap-md { gap: var(--space-md); }
.gap-lg { gap: var(--space-lg); }
.gap-xl { gap: var(--space-xl); }

.pad-xs { padding: var(--space-xs); }
.pad-sm { padding: var(--space-sm); }
.pad-md { padding: var(--space-md); }
.pad-lg { padding: var(--space-lg); }
.pad-xl { padding: var(--space-xl); }

/* -- Radius Utilities -- */
/* All .r-* classes set --_radius (for components using the hook) AND border-radius (direct override) */
.r-xs { --_radius: var(--radius-xs); border-radius: var(--radius-xs); }
.r-sm { --_radius: var(--radius-sm); border-radius: var(--radius-sm); }
.r-md { --_radius: var(--radius-md); border-radius: var(--radius-md); }
.r-lg { --_radius: var(--radius-lg); border-radius: var(--radius-lg); }
.r-xl { --_radius: var(--radius-xl); border-radius: var(--radius-xl); }
.r-pill { --_radius: var(--radius-pill); border-radius: var(--radius-pill); }
.r-circle { --_radius: var(--radius-circle); border-radius: var(--radius-circle); }


/*  RESET  */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { width: 100%; height: 100%; overflow: hidden; font-family: 'Inter', sans-serif; background: var(--void-black); color: var(--starlight); user-select: none; -webkit-user-select: none; }
input, textarea, [contenteditable], .custom-input, .vt-input, .adv-textarea-wrapper textarea { user-select: text; -webkit-user-select: text; }
input, textarea, button { font-family: inherit; color: inherit; }
a { color: var(--steel-cyan); text-decoration: none; cursor: pointer; }
:root {
  scrollbar-width: thin;
  scrollbar-color: var(--twilight) transparent;
}
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--twilight); border-radius: var(--radius-sm); }


/* -- Toast / Notification -- */
.vt-toast {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--nebula-dark) var(--opacity-glass), transparent);
  backdrop-filter: var(--blur-lg);
  -webkit-backdrop-filter: var(--blur-lg);
  border: 1px solid var(--twilight);
  z-index: var(--z-toast);
}

.vt-toast.success {
  color: var(--colorpicker-green);
  border-color: var(--colorpicker-green);
  background: color-mix(in srgb, var(--colorpicker-green) var(--opacity-tint), transparent);
}

.vt-toast.warning {
  color: var(--colorpicker-gold);
  border-color: var(--colorpicker-gold);
  background: color-mix(in srgb, var(--colorpicker-gold) var(--opacity-tint), transparent);
}

.vt-toast.error {
  color: var(--colorpicker-pink);
  border-color: var(--colorpicker-pink);
  background: color-mix(in srgb, var(--colorpicker-pink) var(--opacity-tint), transparent);
}

.vt-toast.info {
  color: var(--steel-cyan);
  border-color: var(--steel-cyan);
  background: color-mix(in srgb, var(--steel-cyan) var(--opacity-tint), transparent);
}

/* -- FAB (Floating Action Button) -- */
.vt-fab {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: var(--radius-circle);
  background: var(--fx-color, var(--signal-yellow));
  border: var(--border-width) solid var(--rider-border, var(--signal-yellow));
  color: var(--void-black);
  cursor: pointer;
  box-shadow: 0 0 var(--glow-radius-xs) color-mix(in srgb, var(--fx-color, var(--signal-yellow)) var(--opacity-glow), transparent);
  transition: transform var(--duration-normal) var(--ease-default),
              box-shadow var(--duration-normal) var(--ease-default);
}

.vt-fab:hover {
  transform: scale(1.1);
  box-shadow: 0 0 var(--glow-radius-sm) color-mix(in srgb, var(--fx-color, var(--signal-yellow)) 40%, transparent);
}

.vt-fab:disabled,
.vt-fab.disabled {
  opacity: var(--opacity-disabled);
  pointer-events: none;
  box-shadow: none;
  transform: none;
}

/* Large variant */
.vt-fab.fab-lg {
  width: 56px;
  height: 56px;
}


.vt-surface {
  background: color-mix(in srgb, var(--nebula-dark) var(--opacity-glass), transparent);
  backdrop-filter: var(--blur-lg);
  -webkit-backdrop-filter: var(--blur-lg);
  border: 1px solid var(--twilight);
  box-shadow: 0 24px 80px color-mix(in srgb, var(--void-black) var(--opacity-shadow), transparent);
  display: flex;
  flex-direction: column;
}

.vt-surface.modal {
  border-radius: var(--radius-lg);
  max-height: 85vh;
  overflow: hidden;
  align-items: center;
}

.btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--_pad, var(--btn-padding));
  border: 1px solid var(--fx-color, var(--steel-cyan));
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--fx-color, var(--steel-cyan));
  cursor: pointer;
  transition: all var(--transition-normal);
}
.btn-ghost:hover {
  background: var(--rider-bg-tint, color-mix(in srgb, var(--fx-color, var(--steel-cyan)) var(--opacity-tint), transparent));
  border-color: var(--rider-border, color-mix(in srgb, var(--fx-color, var(--steel-cyan)) 40%, transparent));
}
.btn-ghost:disabled {
  opacity: var(--opacity-disabled);
  cursor: not-allowed;
}