/* ===== 詩雲 — Poetry Cloud ===== */

:root {
  --bg: #05060d;
  --bg-deep: #02030a;
  --star-blue: #a8b4ff;
  --star-violet: #c8a8ff;
  --star-white: #f0f4ff;
  --paper: rgba(220, 225, 255, 0.85);
  --paper-glow: rgba(168, 180, 255, 0.45);
  --frame: rgba(220, 225, 255, 0.6);
}

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

html,
body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--bg);
  color: var(--paper);
  font-family: "Courier New", "Consolas", monospace;
  cursor: default;
  user-select: none;
}

/* radial gradient gives a faint "you are inside the cloud" feel */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  background:
    radial-gradient(
      ellipse at 30% 40%,
      rgba(168, 180, 255, 0.04),
      transparent 50%
    ),
    radial-gradient(
      ellipse at 70% 60%,
      rgba(200, 168, 255, 0.04),
      transparent 55%
    ),
    var(--bg-deep);
  pointer-events: none;
  z-index: 0;
}

/* faint static starfield */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  background-image:
    radial-gradient(1px 1px at 12% 22%, rgba(255, 255, 255, 0.5), transparent),
    radial-gradient(1px 1px at 87% 14%, rgba(200, 210, 255, 0.4), transparent),
    radial-gradient(1px 1px at 33% 78%, rgba(255, 255, 255, 0.35), transparent),
    radial-gradient(1px 1px at 64% 55%, rgba(220, 200, 255, 0.3), transparent),
    radial-gradient(1px 1px at 8% 91%, rgba(255, 255, 255, 0.4), transparent),
    radial-gradient(1px 1px at 95% 70%, rgba(200, 180, 255, 0.35), transparent),
    radial-gradient(1px 1px at 50% 8%, rgba(255, 255, 255, 0.3), transparent),
    radial-gradient(1px 1px at 22% 50%, rgba(200, 210, 255, 0.3), transparent);
  pointer-events: none;
  z-index: 0;
}

/* ===== far layer: thousands of distant paper specks (canvas) ===== */
#far-layer {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
  /* extremely slow drift to suggest scale */
  animation: far-drift 240s linear infinite alternate;
}

@keyframes far-drift {
  from {
    transform: translate(-8px, -4px);
  }
  to {
    transform: translate(8px, 4px);
  }
}

/* ===== mid layer: small blurred fragments (DOM, non-interactive) ===== */
#mid-layer {
  position: fixed;
  inset: 0;
  z-index: 2;
  overflow: hidden;
  pointer-events: none;
  /* single filter on parent — much cheaper than per-element blur */
  filter: blur(0.6px);
}

.paper-mid {
  position: absolute;
  top: 0;
  left: 0;
  width: var(--w);
  height: var(--h);
  background: linear-gradient(
    135deg,
    rgba(220, 225, 255, 0.7),
    rgba(180, 195, 240, 0.4)
  );
  box-shadow: 0 0 3px rgba(168, 180, 255, 0.3);
  animation: paper-breathe var(--bdur, 16s) ease-in-out var(--bdelay, 0s)
    infinite;
  opacity: var(--op-max, 0.2);
  will-change: transform, opacity;
}

/* ===== main viewport (near layer, interactive) ===== */
#viewport {
  position: fixed;
  inset: 0;
  z-index: 3;
  overflow: hidden;
}

/* ===== floating paper fragments (light shards, no text) ===== */
.paper {
  position: absolute;
  top: 0;
  left: 0;
  width: var(--w);
  height: var(--h);
  cursor: pointer;
  /* DO NOT add `transform` here — wraparound jumps would interpolate across the screen */
  transition: opacity 0.7s ease;
  will-change: transform;
  pointer-events: auto;
}

/* widen the click target without enlarging the visible shard */
.paper::before {
  content: "";
  position: absolute;
  inset: -8px;
}

.paper-shell {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    rgba(240, 244, 255, 0.85),
    rgba(200, 210, 250, 0.55)
  );
  box-shadow:
    0 0 4px rgba(168, 180, 255, 0.45),
    0 0 10px rgba(168, 180, 255, 0.2);
  animation: paper-breathe var(--bdur, 10s) ease-in-out var(--bdelay, 0s)
    infinite;
  opacity: var(--op-max, 0.85);
  transition:
    box-shadow 0.25s ease,
    background 0.25s ease;
}

.paper:hover .paper-shell {
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.95),
    rgba(220, 225, 255, 0.7)
  );
  box-shadow:
    0 0 6px rgba(255, 255, 255, 0.7),
    0 0 16px rgba(168, 180, 255, 0.5);
}

@keyframes paper-breathe {
  0%,
  100% {
    opacity: var(--op-min, 0.3);
  }
  50% {
    opacity: var(--op-max, 0.85);
  }
}

/* ===== minimap (bottom-right) ===== */
#minimap {
  position: fixed;
  right: 20px;
  bottom: 20px;
  width: 256px;
  height: 256px;
  z-index: 10;
  border: 1px solid rgba(168, 180, 255, 0.3);
  background: #000;
  cursor: crosshair;
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.8),
    0 0 20px rgba(168, 180, 255, 0.15),
    inset 0 0 30px rgba(0, 0, 0, 0.6);
}

#minimap-canvas {
  width: 256px;
  height: 256px;
  display: block;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  image-rendering: -moz-crisp-edges;
}

#viewport-frame {
  position: absolute;
  top: 0;
  left: 0;
  width: 28px;
  height: 20px;
  border: 1px solid rgba(255, 255, 255, 0.9);
  box-shadow:
    0 0 6px rgba(168, 180, 255, 0.7),
    inset 0 0 3px rgba(255, 255, 255, 0.4);
  pointer-events: none;
  z-index: 2;
  transform: translate(150px, 155px);
  transition: transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* ===== credit (bottom-left, intentionally low-contrast) ===== */
#credit {
  position: fixed;
  left: 14px;
  bottom: 14px;
  z-index: 5;
  font-family: "Courier New", "Consolas", monospace;
  font-size: 10px;
  letter-spacing: 0.5px;
  color: rgba(220, 225, 255, 0.28);
  text-shadow: 0 0 4px rgba(168, 180, 255, 0.15);
  pointer-events: none;
  user-select: none;
}

#credit i {
  font-style: italic;
  color: rgba(220, 225, 255, 0.4);
}

/* ===== poem overlay ===== */
#poem-overlay {
  position: fixed;
  inset: 0;
  background: rgba(2, 3, 10, 0.7);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  pointer-events: none;
  opacity: 1;
  transition: opacity 0.4s ease;
}

#poem-overlay.hidden {
  opacity: 0;
  pointer-events: none;
}

#poem-paper {
  width: min(680px, 86vw);
  max-height: 80vh;
  background: rgba(15, 18, 32, 0.92);
  border: 1px solid rgba(168, 180, 255, 0.4);
  box-shadow:
    0 0 40px rgba(168, 180, 255, 0.25),
    inset 0 0 30px rgba(168, 180, 255, 0.05);
  padding: 20px 24px;
  color: var(--paper);
  pointer-events: auto;
  transform: scale(0.4);
  opacity: 0;
  transition:
    transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1),
    opacity 0.5s ease;
}

#poem-overlay:not(.hidden) #poem-paper {
  transform: scale(1);
  opacity: 1;
}

#poem-header {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-bottom: 16px;
}

#poem-close {
  background: transparent;
  border: 1px solid rgba(168, 180, 255, 0.3);
  color: var(--paper);
  width: 24px;
  height: 24px;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.2s;
}

#poem-close:hover {
  border-color: var(--star-white);
  color: var(--star-white);
  box-shadow: 0 0 8px var(--paper-glow);
}

#poem-text {
  font-family: "Courier New", "Consolas", monospace;
  font-size: 15px;
  line-height: 1.7;
  white-space: pre-wrap;
  word-break: break-all;
  color: var(--star-white);
  text-shadow: 0 0 6px var(--paper-glow);
  user-select: text;
  letter-spacing: 1px;
}