/* Frenzy base: Who What When Where Why pages */
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { font-size: 16px; -webkit-text-size-adjust: 100%; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  max-width: 520px;
  margin: 0 auto;
  padding: max(1rem, env(safe-area-inset-top)) max(1.5rem, env(safe-area-inset-right)) max(2rem, env(safe-area-inset-bottom)) max(1.5rem, env(safe-area-inset-left));
  background: linear-gradient(135deg, #1a0033, #3a0066, #001133, #33001a);
  background-size: 300% 300%;
  animation: gradientBg 10s ease infinite;
  color: #fff;
  min-height: 100vh;
  text-align: center;
  overflow-x: hidden;
}
@keyframes gradientBg {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.logo-wrap {
  margin: 0 auto 0;
  padding: max(0.5rem, env(safe-area-inset-top)) 1rem 0 1rem;
  position: relative;
  z-index: 10;
  text-align: center;
  overflow: visible;
}
.logo-wrap .logo {
  display: block;
  width: 337px;
  height: auto;
  margin: 0 auto;
  animation: glowFire 2.5s ease-in-out infinite;
}
@keyframes glowFire {
  0%, 100% { filter: drop-shadow(0 0 3px rgba(255,69,0,0.9)) drop-shadow(0 0 8px rgba(255,215,0,0.7)) drop-shadow(0 0 14px rgba(255,140,0,0.5)); }
  25% { filter: drop-shadow(0 0 4px rgba(255,215,0,0.95)) drop-shadow(0 0 10px rgba(255,69,0,0.8)) drop-shadow(0 0 18px rgba(255,200,50,0.6)); }
  50% { filter: drop-shadow(0 0 2px rgba(255,140,0,0.9)) drop-shadow(0 0 6px rgba(255,215,0,0.8)) drop-shadow(0 0 12px rgba(255,69,0,0.5)); }
  75% { filter: drop-shadow(0 0 5px rgba(255,200,50,0.95)) drop-shadow(0 0 12px rgba(255,140,0,0.7)) drop-shadow(0 0 20px rgba(255,215,0,0.5)); }
}

.page-title {
  font-family: 'Righteous', cursive;
  font-size: 2rem;
  color: #0affd4;
  text-shadow: 0 0 8px rgba(10,255,212,0.6);
  margin-top: 0;
  margin-bottom: 1rem;
  position: relative;
  z-index: 10;
  text-align: center;
}

.site-nav {
  background: rgba(0, 0, 0, 0.65);
  padding: 1rem 1.5rem;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.2);
  position: relative;
  z-index: 10;
  text-align: center;
  margin-top: 0;
  margin-bottom: 1.5rem;
  font-size: 1.4rem;
}
.site-nav a { color: #ffd166; text-decoration: none; font-family: 'Righteous', cursive; }
.site-nav a:hover { text-decoration: underline; }
.site-nav .nav-soon { color: rgba(255,255,255,0.85); font-weight: normal; }

.lang-switch {
  background: rgba(0, 0, 0, 0.65);
  padding: 1rem 1.5rem;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.2);
  position: relative;
  z-index: 10;
  margin-bottom: 1.5rem;
  text-align: center;
}
.lang-switch button {
  background: rgba(255,255,255,0.15);
  border: 1px solid rgba(255,255,255,0.3);
  color: #fff;
  padding: 0.5rem 1rem;
  border-radius: 8px;
  font-size: 1.2rem;
  font-family: 'Righteous', cursive;
  cursor: pointer;
  margin: 0 0.3rem;
}
.lang-switch button.active {
  background: rgba(10,255,212,0.3);
  border-color: #0affd4;
  color: #0affd4;
}

.card {
  background: rgba(0, 0, 0, 0.65);
  padding: 1.5rem;
  border-radius: 16px;
  margin-bottom: 1rem;
  border: 1px solid rgba(255,255,255,0.2);
  position: relative;
  z-index: 10;
  text-align: left;
}
.card h2 {
  font-family: 'Righteous', cursive;
  font-size: 1.4rem;
  color: #ffd166;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.5rem;
}
.card p { font-size: 1.2rem; margin-bottom: 0.5rem; line-height: 1.5; }
.card a { color: #0affd4; text-decoration: none; }
.card a:hover { text-decoration: underline; }

.map-placeholder {
  background: rgba(0,0,0,0.65);
  border: 1px dashed rgba(255,255,255,0.3);
  border-radius: 8px;
  padding: 2rem;
  margin-bottom: 1rem;
  color: rgba(255,255,255,0.8);
  font-size: 1.2rem;
}
.map-embed-wrap {
  margin-bottom: 1rem;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.2);
}
.map-embed-wrap iframe { display: block; }
.map-links { margin-top: 0.5rem; font-size: 1rem; }
.map-links a { color: #0affd4; text-decoration: none; }
.map-links a:hover { text-decoration: underline; }
.map-sep { color: rgba(255,255,255,0.6); }

.content-en, .content-jp { display: none; }
.content-en.active, .content-jp.active { display: block; }

.frenzy-footer {
  margin-top: 2rem;
  font-size: 0.85rem;
  position: relative;
  z-index: 10;
  text-align: center;
}
.frenzy-footer a { color: #ffd166; text-decoration: none; }
.frenzy-footer a:hover { text-decoration: underline; }

/* Sparkles */
.sparkle {
  position: fixed;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: #fff;
  animation: floatUp 4s linear infinite, sparkleFire 1.4s ease-in-out infinite;
  z-index: 0;
  pointer-events: none;
}
@keyframes floatUp {
  0% { transform: translateY(100vh) scale(0); opacity: 0; }
  20% { opacity: 1; transform: translateY(80vh) scale(1.5); }
  80% { opacity: 1; transform: translateY(20vh) scale(1); }
  100% { transform: translateY(-10vh) scale(0); opacity: 0; }
}
@keyframes sparkleFire {
  0%, 100% { opacity: 0.4; box-shadow: 0 0 6px 2px #ff4500, 0 0 12px 3px rgba(255,215,0,0.8); }
  25% { opacity: 1; box-shadow: 0 0 10px 3px #ffd700, 0 0 20px 4px rgba(255,69,0,0.9); }
  50% { opacity: 0.7; box-shadow: 0 0 8px 2px #ff6b35, 0 0 16px 3px rgba(255,215,0,0.8); }
  75% { opacity: 1; box-shadow: 0 0 12px 3px #ffd166, 0 0 24px 4px rgba(255,140,0,0.9); }
}

.orb {
  position: fixed;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,10,132,0.5) 0%, transparent 70%);
  box-shadow: 0 0 40px rgba(255,10,132,0.3);
  animation: drift 8s ease-in-out infinite;
  z-index: 0;
  pointer-events: none;
}
.orb:nth-child(odd) {
  background: radial-gradient(circle, rgba(10,255,212,0.4) 0%, transparent 70%);
  box-shadow: 0 0 40px rgba(10,255,212,0.3);
  animation-duration: 10s;
  animation-direction: alternate-reverse;
}
@keyframes drift {
  0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.5; }
  25% { transform: translate(15vw, -10vh) scale(1.2); opacity: 0.8; }
  50% { transform: translate(-10vw, 5vh) scale(0.9); opacity: 0.6; }
  75% { transform: translate(10vw, 10vh) scale(1.1); opacity: 0.7; }
}