/*
 * Integrated Miracle Sanctuary design layer.
 *
 * The Three.js architecture and game systems remain in game.js/game.css. This
 * file supplies the repository build's frosted-glass language, typography,
 * motion rhythm, and control polish without replacing the underlying game.
 */

:root {
  --miracle-gold: #d7b56d;
  --glass-surface: rgba(6, 22, 15, 0.54);
  --glass-surface-soft: rgba(6, 22, 15, 0.38);
  --glass-surface-strong: rgba(2, 10, 7, 0.82);
  --glass-border: rgba(110, 231, 183, 0.18);
  --glass-border-active: rgba(110, 231, 183, 0.42);
  --glass-highlight: rgba(236, 253, 245, 0.085);
  --glass-shadow: 0 18px 54px rgba(0, 0, 0, 0.42);
  --glass-shadow-soft: 0 12px 34px rgba(0, 0, 0, 0.28);
  --ease-house: cubic-bezier(0.16, 1, 0.3, 1);
  --font-sans: "DM Sans", system-ui, sans-serif;
  --font-serif: "Cormorant Garamond", Georgia, serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Consolas, monospace;
}

html {
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

.glass-system {
  font-family: var(--font-sans);
}

.glass-system .game::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: 0.16;
  background-image:
    linear-gradient(rgba(110, 231, 183, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(110, 231, 183, 0.045) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(circle at 50% 46%, #000, transparent 78%);
  -webkit-mask-image: radial-gradient(circle at 50% 46%, #000, transparent 78%);
}

.glass-system h1,
.glass-system h2,
.glass-system .room-heading h1,
.glass-system .gate-intro h1,
.glass-system .auth-world h1,
.glass-system .overlay-head h2 {
  font-family: var(--font-serif);
  font-weight: 400;
  letter-spacing: -0.015em;
}

.glass-system .command-count,
.glass-system .hud-progress,
.glass-system .growth-button,
.glass-system .focus-ring span,
.glass-system .build-stamp,
.glass-system .book-date-nav time,
.glass-system .bible-progress-summary strong {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

.glass-system button:not(:disabled),
.glass-system [role="button"]:not([aria-disabled="true"]) {
  -webkit-tap-highlight-color: transparent;
  transition-property: color, background-color, border-color, box-shadow, filter, opacity, transform;
  transition-duration: 180ms;
  transition-timing-function: var(--ease-house);
}

.glass-system button:not(:disabled):active,
.glass-system [role="button"]:not([aria-disabled="true"]):active {
  transform: translateY(1px) scale(0.992);
}

.glass-system .auth-world,
.glass-system .gate-intro,
.glass-system .scene-command,
.glass-system .action-sheet,
.glass-system .room-heading,
.glass-system .room-map button,
.glass-system .feature-object,
.glass-system .icon-button,
.glass-system .feature-arrow,
.glass-system .sanctuary-notice,
.glass-system .game-update {
  border: 1px solid var(--glass-border);
  background:
    linear-gradient(145deg, var(--glass-highlight), transparent 46%),
    var(--glass-surface);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.045),
    var(--glass-shadow-soft),
    0 0 28px rgba(4, 120, 87, 0.055);
  backdrop-filter: blur(22px) saturate(126%);
  -webkit-backdrop-filter: blur(22px) saturate(126%);
}

.glass-system .auth-world,
.glass-system .action-sheet,
.glass-system .game-update {
  background:
    linear-gradient(145deg, rgba(236, 253, 245, 0.08), transparent 44%),
    var(--glass-surface-strong);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.055),
    var(--glass-shadow),
    0 0 38px rgba(4, 120, 87, 0.08);
}

.glass-system .gate-intro {
  bottom: calc(var(--safe-bottom) + 4vh);
  padding: clamp(22px, 5vw, 30px);
  border-radius: 20px;
}

.glass-system .gate-intro h1 {
  font-size: clamp(34px, 9vw, 50px);
}

.glass-system .hud-brand,
.glass-system .hud-progress {
  min-height: 40px;
  padding: 0 13px;
  border: 1px solid rgba(110, 231, 183, 0.12);
  border-radius: 999px;
  background: rgba(4, 17, 11, 0.4);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035);
  backdrop-filter: blur(18px) saturate(120%);
  -webkit-backdrop-filter: blur(18px) saturate(120%);
}

.glass-system .hud-progress {
  justify-self: center;
}

.glass-system .icon-button,
.glass-system .feature-arrow {
  border-radius: 50%;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 10px 30px rgba(0, 0, 0, 0.24);
}

.glass-system .icon-button:hover,
.glass-system .feature-arrow:hover,
.glass-system .room-map button:hover,
.glass-system .feature-object:hover {
  border-color: var(--glass-border-active);
  color: var(--mint);
  background:
    linear-gradient(145deg, rgba(236, 253, 245, 0.11), transparent 46%),
    rgba(7, 38, 25, 0.68);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    0 16px 42px rgba(0, 0, 0, 0.36),
    0 0 30px rgba(16, 185, 129, 0.14);
}

.glass-system .room-map button:hover,
.glass-system .feature-object:hover {
  transform: translateY(-2px);
}

.glass-system .scene-command {
  background:
    linear-gradient(145deg, rgba(236, 253, 245, 0.07), transparent 46%),
    linear-gradient(180deg, rgba(5, 21, 14, 0.5), rgba(2, 9, 6, 0.88));
}

.glass-system .room-heading {
  padding: 8px;
  border-radius: 16px;
}

.glass-system .feature-object {
  overflow: hidden;
  border-radius: 24px;
  background:
    radial-gradient(circle at 50% 28%, rgba(16, 185, 129, 0.12), transparent 48%),
    linear-gradient(145deg, var(--glass-highlight), transparent 48%),
    var(--glass-surface-soft);
}

.glass-system .directory,
.glass-system .feature-panel,
.glass-system .special-world {
  background:
    radial-gradient(circle at 50% 12%, rgba(16, 185, 129, 0.11), transparent 38%),
    linear-gradient(145deg, rgba(236, 253, 245, 0.045), transparent 40%),
    rgba(1, 8, 5, 0.88);
  backdrop-filter: blur(28px) saturate(125%);
  -webkit-backdrop-filter: blur(28px) saturate(125%);
}

.glass-system .overlay-head,
.glass-system .panel-actions,
.glass-system .directory-foot,
.glass-system .bible-controls {
  background:
    linear-gradient(145deg, rgba(236, 253, 245, 0.035), transparent 45%),
    rgba(4, 18, 12, 0.48);
  backdrop-filter: blur(18px) saturate(120%);
  -webkit-backdrop-filter: blur(18px) saturate(120%);
}

.glass-system .primary-command,
.glass-system .sheet-submit,
.glass-system .object-command,
.glass-system .panel-save,
.glass-system .focus-primary,
.glass-system #game-update-reload {
  border-color: rgba(110, 231, 183, 0.48);
  background:
    linear-gradient(145deg, rgba(236, 253, 245, 0.15), transparent 40%),
    linear-gradient(120deg, rgba(16, 185, 129, 0.94), rgba(4, 120, 87, 0.88));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    0 14px 34px rgba(0, 0, 0, 0.34),
    0 0 30px rgba(16, 185, 129, 0.14);
}

.glass-system .panel-save,
.glass-system .focus-primary,
.glass-system #game-update-reload {
  color: var(--mint);
}

.glass-system input,
.glass-system textarea,
.glass-system select {
  caret-color: var(--emerald-bright);
}

.glass-system select,
.glass-system .game-field input,
.glass-system .game-field textarea,
.glass-system .book-tools input {
  border: 1px solid rgba(110, 231, 183, 0.16);
  border-radius: 10px;
  background: rgba(1, 8, 5, 0.38);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.025);
}

.glass-system .game-field input,
.glass-system .game-field textarea,
.glass-system .book-tools input {
  padding-inline: 13px;
}

.glass-system input:focus,
.glass-system textarea:focus,
.glass-system select:focus {
  border-color: rgba(110, 231, 183, 0.52);
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.09), 0 0 24px rgba(16, 185, 129, 0.07);
}

.glass-system .directory-body,
.glass-system .panel-content,
.glass-system .rhythm-scroll,
.glass-system .settings-scroll,
.glass-system .scripture-reader {
  scrollbar-width: thin;
  scrollbar-color: rgba(110, 231, 183, 0.3) rgba(255, 255, 255, 0.02);
}

.glass-system ::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}

.glass-system ::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.02);
}

.glass-system ::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: rgba(110, 231, 183, 0.3);
}

@media (min-width: 700px) {
  .glass-system .room-heading {
    right: auto;
    width: min(560px, calc(100% - 48px));
  }

  .glass-system .scene-command {
    border-radius: 18px;
  }

  .glass-system .action-sheet {
    border-radius: 20px;
  }
}

@media (max-width: 699px) {
  .glass-system .scene-command {
    border-right: 0;
    border-bottom: 0;
    border-left: 0;
  }

  .glass-system .hud-brand {
    display: none;
  }

  .glass-system .hud {
    grid-template-columns: 44px minmax(54px, 1fr) auto;
  }
}

@media (pointer: coarse) {
  .glass-system .room-map button:hover,
  .glass-system .feature-object:hover {
    transform: none;
  }
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass-system .auth-world,
  .glass-system .gate-intro,
  .glass-system .scene-command,
  .glass-system .action-sheet,
  .glass-system .room-heading,
  .glass-system .room-map button,
  .glass-system .feature-object,
  .glass-system .icon-button,
  .glass-system .feature-arrow,
  .glass-system .sanctuary-notice,
  .glass-system .game-update {
    background-color: rgba(2, 13, 8, 0.94);
  }
}

@media (prefers-reduced-motion: reduce) {
  .glass-system .game::after {
    opacity: 0.1;
  }
}