:root {
  --bg-deep: #03050a;
  --color-cyan: #38bdf8;
  --color-indigo: #6366f1;
  --color-violet: #c084fc;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: var(--bg-deep);
  font-family: 'Cinzel', -apple-system, sans-serif;
  user-select: none;
}

/* Background Canvas */
#cosmic-canvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}

/* Ambient Nebulae (静的グラデーション、アニメーションなし) */
.ambient-nebula {
  position: fixed;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
}

.nebula-1 {
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(56, 189, 248, 0.1) 0%, transparent 65%);
  top: 15%;
  left: 20%;
}

.nebula-2 {
  width: 650px;
  height: 650px;
  background: radial-gradient(circle, rgba(192, 132, 252, 0.08) 0%, transparent 65%);
  bottom: 15%;
  right: 20%;
}

/* Center Stage */
.center-stage {
  position: relative;
  z-index: 1;
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Emblem & Single Ring (軽量化: リングを1重に絞り、GPU負荷を最小化) */
.emblem-container {
  position: relative;
  width: clamp(240px, 35vw, 360px);
  height: clamp(240px, 35vw, 360px);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: default;
}

.orbital-ring {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  width: 100%;
  height: 100%;
  border: 1px solid transparent;
  border-top: 1px solid rgba(56, 189, 248, 0.5);
  border-bottom: 1px solid rgba(192, 132, 252, 0.4);
  animation: rotateSlow 36s linear infinite;
}

@keyframes rotateSlow {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Core Logo (アニメーションなし・完全静的でCPU負荷ゼロ) */
.core-logo {
  font-size: clamp(3rem, 7vw, 5.2rem);
  font-weight: 700;
  letter-spacing: 0.12em;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 2;
  transition: transform 0.2s ease;
}

.emblem-container:hover .core-logo {
  transform: scale(1.03);
}

.char-u {
  color: var(--color-cyan);
}

.char-digits {
  color: #ffffff;
  letter-spacing: 0.05em;
}

.char-q {
  color: var(--color-violet);
}