:root {
  --night: #0b1330;
  --text: #f4f7ff;
  --muted: rgba(222, 231, 250, 0.8);
  --seal: #b3312a;
  --glass: rgba(18, 28, 62, 0.42);
  --glass-line: rgba(220, 232, 255, 0.22);
}

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

html, body {
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
  -webkit-text-size-adjust: 100%;
  touch-action: manipulation;
  background: var(--night);
  color: var(--text);
  font-family: "Cormorant Garamond", Georgia, serif;
  -webkit-font-smoothing: antialiased;
}

.scene { position: fixed; inset: 0; overflow: hidden; }

.scene svg,
.scene canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.scene canvas { pointer-events: none; }

.vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(to bottom, rgba(4, 7, 22, 0.55), transparent 32%),
    radial-gradient(ellipse at 50% 55%, transparent 55%, rgba(4, 7, 22, 0.55) 100%);
}

/* Title */
.hero {
  position: fixed;
  top: clamp(28px, 7vh, 84px);
  left: 50%;
  transform: translateX(-50%);
  width: min(92vw, 760px);
  text-align: center;
  pointer-events: none;
  animation: rise 2.6s cubic-bezier(.2, .7, .2, 1) both;
}

.hero .kanji {
  font-family: "Shippori Mincho", serif;
  font-size: clamp(13px, 1.3vw, 17px);
  letter-spacing: 0.7em;
  margin-right: -0.7em;
  color: var(--muted);
}

.hero h1 {
  font-weight: 300;
  font-size: clamp(48px, 8.4vw, 112px);
  line-height: 1.05;
  letter-spacing: 0.24em;
  margin-right: -0.24em;
  text-transform: uppercase;
  text-shadow: 0 0 34px rgba(170, 196, 255, 0.38), 0 2px 14px rgba(0, 0, 0, 0.4);
}

.hero .tag {
  font-style: italic;
  font-weight: 300;
  font-size: clamp(16px, 1.65vw, 22px);
  letter-spacing: 0.05em;
  color: var(--muted);
}

.seal {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  margin-top: 18px;
  border-radius: 5px;
  background: var(--seal);
  color: #fbeae5;
  font-family: "Shippori Mincho", serif;
  font-weight: 600;
  font-size: 19px;
  box-shadow: 0 4px 18px rgba(179, 49, 42, 0.45), inset 0 0 0 2px rgba(255, 220, 210, 0.25);
  animation: rise 2.6s 0.6s cubic-bezier(.2, .7, .2, 1) both;
}

/* Snow intensity toggle: small round icon button */
.pill {
  position: fixed;
  top: max(16px, env(safe-area-inset-top));
  right: max(16px, env(safe-area-inset-right));
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 50%;
  background: rgba(8, 13, 36, 0.78);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
  color: #ffffff;
  cursor: pointer;
  transition: background 0.3s, border-color 0.3s, color 0.3s, box-shadow 0.3s, transform 0.3s;
  animation: fade 2s 1.2s both;
}

.pill svg { display: block; transition: transform 0.6s cubic-bezier(.2, .7, .2, 1); }
.pill:hover { background: rgba(24, 36, 80, 0.88); border-color: rgba(255, 255, 255, 0.55); transform: translateY(-1px); }
.pill:hover svg { transform: rotate(30deg); }
.pill[aria-pressed="true"] { color: #ffcf8a; border-color: rgba(255, 207, 138, 0.7); box-shadow: 0 0 0 3px rgba(255, 207, 138, 0.18), 0 6px 20px rgba(0, 0, 0, 0.35); }
.pill[aria-pressed="true"] svg { transform: rotate(60deg); }
.pill:focus-visible { outline: 2px solid #ffcf8a; outline-offset: 3px; }

/* Footer credit */
.credit {
  position: fixed;
  left: 50%;
  bottom: max(16px, env(safe-area-inset-bottom));
  transform: translateX(-50%);
  white-space: nowrap;
  padding: 11px 20px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 999px;
  background: rgba(8, 13, 36, 0.78);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
  color: #ffffff;
  font: 600 17px/1 "Cormorant Garamond", serif;
  letter-spacing: 0.08em;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
  pointer-events: none;
  animation: fade 1.2s 0.6s both;
}

.credit strong { font-weight: 700; color: #ffffff; letter-spacing: 0.12em; }

/* Scene animations */
.tw { animation: twinkle 4s ease-in-out infinite; }
.win { animation: flicker 7s ease-in-out infinite; }
.flame { animation: flame 1.6s ease-in-out infinite; }

@keyframes twinkle { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }
@keyframes flicker { 0%, 100% { opacity: 1; } 46% { opacity: 1; } 50% { opacity: 0.78; } 54% { opacity: 0.95; } 70% { opacity: 0.88; } }
@keyframes flame { 0%, 100% { opacity: 1; } 30% { opacity: 0.8; } 55% { opacity: 0.95; } 75% { opacity: 0.72; } }
@keyframes rise { from { opacity: 0; transform: translate(-50%, 14px); } to { opacity: 1; transform: translate(-50%, 0); } }
.seal { animation-name: fade; }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }

/* Title scales with whichever side of the screen is smaller */
.hero h1 { font-size: clamp(34px, min(8.4vw, 13vh), 132px); }
.hero .tag { font-size: clamp(14px, min(1.65vw, 2.6vh), 26px); }

@media (max-width: 600px) {
  .hero { top: calc(max(16px, env(safe-area-inset-top)) + 58px); }
  .hero h1 { font-size: clamp(34px, 10.5vw, 56px); }
  .hero .tag { font-size: 15px; padding: 0 8px; }
  .credit { padding: 10px 15px; font-size: 15px; }
}

@media (max-width: 360px) {
  .credit { padding: 9px 12px; font-size: 14px; letter-spacing: 0.04em; }
  .hero h1 { letter-spacing: 0.16em; margin-right: -0.16em; }
  .hero .kanji { letter-spacing: 0.5em; margin-right: -0.5em; }
}

/* Phones held sideways and other short screens */
@media (max-height: 520px) {
  .hero { top: max(12px, env(safe-area-inset-top)); }
  .hero .kanji { font-size: 12px; }
  .seal { display: none; }
  .credit { padding: 8px 14px; font-size: 15px; }
}

@media (max-height: 340px) {
  .hero .tag { display: none; }
}

/* Very large displays */
@media (min-width: 2200px) and (min-height: 1100px) {
  .hero .kanji { font-size: 22px; }
  .seal { width: 44px; height: 44px; font-size: 24px; }
  .pill { width: 58px; height: 58px; }
  .pill svg { width: 28px; height: 28px; }
}

@media (prefers-reduced-motion: reduce) {
  .tw, .win, .flame, .hero, .seal, .pill, .credit { animation: none; }
}