/* ===== RETRO HOMEPAGE STYLE (90年代〜2000年代初期) ===== */
/* body.retro がついたときだけ適用 */

body.retro {
  background: #000080 !important;
  background-image:
    url("data:image/svg+xml,%3Csvg width='16' height='16' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='1' height='1' x='0' y='0' fill='%23000066'/%3E%3C/svg%3E") !important;
  color: #ffff00 !important;
  font-family: "MS Gothic", "MS PGothic", "Osaka", "HG丸ゴシックM-PRO", monospace !important;
  line-height: 1.6 !important;
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Ctext y='14' font-size='14'%3E✨%3C/text%3E%3C/svg%3E"), auto;
}

/* ===== Header ===== */
body.retro .site-header {
  background: #000000 !important;
  border: 3px double #ff00ff !important;
  margin: 10px !important;
  padding: 20px 10px !important;
  text-align: center !important;
}
body.retro .site-header::before { display: none !important; }

body.retro .site-title {
  font-size: 2rem !important;
  color: #ff00ff !important;
  text-shadow:
    0 0 10px #ff00ff,
    0 0 20px #ff00ff,
    0 0 40px #ff00ff !important;
  letter-spacing: .2em !important;
  font-weight: normal !important;
}
body.retro .site-title .subtitle {
  display: block !important;
  color: #00ff00 !important;
  font-size: 1rem !important;
  text-shadow: none !important;
  opacity: 1 !important;
}
body.retro .site-lead {
  color: #ffff00 !important;
  opacity: 1 !important;
  font-size: 1rem !important;
}

/* ===== Marquee Banner ===== */
body.retro .retro-marquee {
  display: block !important;
  background: #ff0000 !important;
  color: #ffffff !important;
  font-size: 1rem !important;
  font-weight: bold !important;
  padding: 6px 0 !important;
  overflow: hidden !important;
  white-space: nowrap !important;
}
body.retro .retro-marquee span {
  display: inline-block;
  animation: marquee-scroll 15s linear infinite;
}

@keyframes marquee-scroll {
  0%   { transform: translateX(100vw); }
  100% { transform: translateX(-100%); }
}

/* ===== Nav ===== */
body.retro .site-nav {
  background: #c0c0c0 !important;
  border: 2px outset #ffffff !important;
  border-bottom: 2px inset #808080 !important;
  backdrop-filter: none !important;
  margin: 0 10px !important;
  position: relative !important;
}
body.retro .nav-list {
  justify-content: center !important;
}
body.retro .nav-list li a {
  color: #0000ff !important;
  font-size: .9rem !important;
  font-weight: bold !important;
  text-decoration: underline !important;
  border-bottom: none !important;
  padding: 8px 12px !important;
}
body.retro .nav-list li a:hover {
  color: #ff0000 !important;
  background: #ffff00 !important;
}
body.retro .nav-list li a.active {
  color: #ff0000 !important;
  border-bottom: none !important;
  background: #ffff99 !important;
}
body.retro .nav-list li a::before {
  content: "★ " !important;
}

/* ===== Container ===== */
body.retro .container {
  max-width: 800px !important;
}

/* ===== Hero ===== */
body.retro .hero {
  padding: 30px 0 20px !important;
  border-bottom: 2px dashed #ff00ff !important;
}
body.retro .hero h2 {
  color: #00ffff !important;
  font-size: 1.2rem !important;
  font-weight: normal !important;
  text-shadow: 2px 2px 0 #000000 !important;
  animation: retro-blink 1.5s step-end infinite;
}
@keyframes retro-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

/* ===== Cards ===== */
body.retro .cards {
  display: block !important;
  padding-bottom: 20px !important;
}
body.retro .card {
  background: #000000 !important;
  border: 2px solid #00ff00 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  margin-bottom: 10px !important;
  padding: 15px !important;
}
body.retro .card::before { display: none !important; }
body.retro .card:hover {
  transform: none !important;
  box-shadow: 0 0 10px #00ff00 !important;
  border-color: #ffff00 !important;
}
body.retro .card-icon {
  background: none !important;
  border-radius: 0 !important;
  width: auto !important;
  height: auto !important;
  font-size: 1.5rem !important;
  margin-bottom: 8px !important;
}
body.retro .card h3 {
  color: #00ff00 !important;
  font-size: 1rem !important;
  font-weight: bold !important;
}
body.retro .card h3::before { content: "【" !important; }
body.retro .card h3::after { content: "】" !important; }
body.retro .card p {
  color: #cccccc !important;
  font-size: .85rem !important;
}
body.retro .card-link {
  color: #ff00ff !important;
  font-weight: normal !important;
}
body.retro .card-link::before { content: ">>> " !important; }

/* ===== Comparison Table ===== */
body.retro .comparison h2 {
  color: #00ffff !important;
  font-weight: normal !important;
  font-size: 1.2rem !important;
}
body.retro .comparison h2::before { content: "☆★☆ " !important; }
body.retro .comparison h2::after { content: " ☆★☆" !important; }

body.retro table {
  border: 3px ridge #808080 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: #000000 !important;
}
body.retro thead th {
  background: #800080 !important;
  color: #ffffff !important;
  border: 1px solid #c0c0c0 !important;
  font-size: .9rem !important;
}
body.retro tbody td {
  color: #00ff00 !important;
  border: 1px solid #333333 !important;
  font-size: .85rem !important;
  padding: 10px !important;
}
body.retro tbody tr:hover td {
  background: #000066 !important;
}

/* ===== Article ===== */
body.retro .article {
  background: #000000 !important;
  border: 2px solid #00ff00 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 20px !important;
  margin: 10px 0 !important;
}
body.retro .article h1 {
  color: #ff00ff !important;
  font-size: 1.5rem !important;
  text-align: center !important;
  font-weight: normal !important;
  border-bottom: 2px double #ff00ff !important;
  padding-bottom: 10px !important;
}
body.retro .article h1::before { content: "◆ " !important; }
body.retro .article h1::after { content: " ◆" !important; }

body.retro .article .lead {
  color: #cccccc !important;
  border-bottom-color: #333333 !important;
  font-size: .9rem !important;
}
body.retro .article h2 {
  color: #00ffff !important;
  border-bottom: 1px dashed #00ffff !important;
  font-weight: normal !important;
  font-size: 1.1rem !important;
}
body.retro .article h2::after { display: none !important; }
body.retro .article h2::before { content: "■ " !important; }

body.retro .article h3 {
  color: #ffff00 !important;
  font-weight: normal !important;
}
body.retro .article h3::before { content: "▼ " !important; }

body.retro .article p { color: #cccccc !important; }
body.retro .article li { color: #cccccc !important; }
body.retro .article strong { color: #ff6600 !important; }
body.retro .article a { color: #0099ff !important; text-decoration: underline !important; }

body.retro .article pre {
  background: #001100 !important;
  color: #00ff00 !important;
  border: 1px solid #00ff00 !important;
  border-radius: 0 !important;
  font-family: "MS Gothic", monospace !important;
}
body.retro .article p code,
body.retro .article li code {
  background: #333300 !important;
  color: #ffff00 !important;
  border-radius: 0 !important;
  border: 1px solid #666600 !important;
}
body.retro .article blockquote {
  border-left: 4px solid #ff6600 !important;
  background: #1a0a00 !important;
  border-radius: 0 !important;
  color: #ff9933 !important;
}
body.retro .article .summary-box {
  background: #000066 !important;
  border: 2px dotted #ffff00 !important;
  border-radius: 0 !important;
}
body.retro .article table {
  border: 2px solid #00ff00 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
body.retro .article table th {
  background: #003300 !important;
  color: #00ff00 !important;
  border: 1px solid #006600 !important;
}
body.retro .article table td {
  color: #cccccc !important;
  border: 1px solid #333333 !important;
}
body.retro .article hr {
  border-top: 2px dashed #ff00ff !important;
}

/* ===== Footer ===== */
body.retro .site-footer {
  background: #000000 !important;
  border-top: 3px double #ff00ff !important;
  color: #808080 !important;
  margin-top: 10px !important;
  padding: 20px 0 !important;
  font-size: .8rem !important;
}

/* ===== Retro Decorations ===== */
body.retro .retro-visitor-counter {
  display: block !important;
  text-align: center !important;
  color: #ffff00 !important;
  font-size: .8rem !important;
  padding: 10px !important;
  border-top: 1px dashed #333333 !important;
  margin-top: 10px !important;
}
.retro-counter-number {
  background: #000000;
  color: #00ff00;
  border: 1px inset #808080;
  padding: 2px 10px;
  font-family: "Courier New", monospace;
  letter-spacing: .15em;
}

body.retro .retro-guestbook {
  display: block !important;
  text-align: center !important;
  padding: 10px !important;
}
body.retro .retro-guestbook a {
  color: #ff00ff !important;
  text-decoration: underline !important;
  font-weight: bold !important;
}

/* ===== Toggle Button ===== */
.theme-toggle-btn {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 9999;
  border: none;
  padding: 12px 20px;
  font-size: .85rem;
  font-weight: 700;
  cursor: pointer;
  border-radius: 50px;
  box-shadow: 0 4px 20px rgba(0,0,0,.2);
  transition: all .3s ease;
  font-family: inherit;
}

/* Modern mode: button style */
.theme-toggle-btn {
  background: linear-gradient(135deg, #1a1a2e, #4a3aff);
  color: #ffffff;
}
.theme-toggle-btn:hover {
  transform: scale(1.05);
  box-shadow: 0 6px 28px rgba(74,58,255,.3);
}

/* Retro mode: button style */
body.retro .theme-toggle-btn {
  background: #c0c0c0 !important;
  color: #000000 !important;
  border: 2px outset #ffffff !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  font-family: "MS Gothic", monospace !important;
  padding: 8px 16px !important;
}
body.retro .theme-toggle-btn:hover {
  transform: none !important;
  background: #e0e0e0 !important;
}
body.retro .theme-toggle-btn:active {
  border-style: inset !important;
}

/* ===== Retro Sparkle Effect ===== */
body.retro .retro-sparkle {
  display: inline !important;
  animation: retro-twinkle 0.8s ease-in-out infinite alternate;
}
.retro-sparkle { display: none; }

@keyframes retro-twinkle {
  0% { opacity: 0.3; }
  100% { opacity: 1; }
}

/* ===== Under Construction Banner ===== */
body.retro .retro-construction {
  display: block !important;
  text-align: center !important;
  background: #ffff00 !important;
  color: #000000 !important;
  padding: 8px !important;
  font-weight: bold !important;
  font-size: .9rem !important;
  border: 2px solid #000000 !important;
  margin: 10px !important;
  animation: retro-blink 2s step-end infinite;
}

/* ===== Flash Theater (retro mode only) ===== */
body.retro .retro-flash-theater {
  display: block !important;
  margin: 20px 0 !important;
  text-align: center !important;
}
body.retro .flash-theater-title {
  color: #ff00ff !important;
  font-size: 1.2rem !important;
  margin-bottom: 10px !important;
  text-shadow: 0 0 10px #ff00ff !important;
}
body.retro .flash-player {
  background: #000000 !important;
  border: 3px ridge #808080 !important;
  max-width: 480px !important;
  margin: 0 auto !important;
  overflow: hidden !important;
}
body.retro .flash-stage {
  position: relative !important;
  width: 100% !important;
  height: 220px !important;
  background: #000000 !important;
  overflow: hidden !important;
}
body.retro .flash-scene {
  position: absolute !important;
  inset: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  opacity: 0;
}

/* Scene timing: 21s total loop */
body.retro .flash-scene-1 { animation: flash-s1 21s infinite !important; }
body.retro .flash-scene-2 { animation: flash-s2 21s infinite !important; }
body.retro .flash-scene-3 { animation: flash-s3 21s infinite !important; }
body.retro .flash-scene-4 { animation: flash-s4 21s infinite !important; }
body.retro .flash-scene-5 { animation: flash-s5 21s infinite !important; }
body.retro .flash-scene-6 { animation: flash-s6 21s infinite !important; }

/* Scene 1: Loading 0%-14% (0-3s) */
@keyframes flash-s1 {
  0%   { opacity: 1; }
  13%  { opacity: 1; }
  15%  { opacity: 0; }
  100% { opacity: 0; }
}
/* Scene 2: Title 14%-29% (3-6s) */
@keyframes flash-s2 {
  0%, 13%  { opacity: 0; }
  15%  { opacity: 1; }
  27%  { opacity: 1; }
  29%  { opacity: 0; }
  100% { opacity: 0; }
}
/* Scene 3: Character 29%-43% (6-9s) */
@keyframes flash-s3 {
  0%, 27%  { opacity: 0; }
  29%  { opacity: 1; }
  41%  { opacity: 1; }
  43%  { opacity: 0; }
  100% { opacity: 0; }
}
/* Scene 4: Typing 43%-57% (9-12s) */
@keyframes flash-s4 {
  0%, 41%  { opacity: 0; }
  43%  { opacity: 1; }
  55%  { opacity: 1; }
  57%  { opacity: 0; }
  100% { opacity: 0; }
}
/* Scene 5: Complete 57%-71% (12-15s) */
@keyframes flash-s5 {
  0%, 55%  { opacity: 0; }
  57%  { opacity: 1; }
  69%  { opacity: 1; }
  71%  { opacity: 0; }
  100% { opacity: 0; }
}
/* Scene 6: Fin 71%-95% (15-20s) */
@keyframes flash-s6 {
  0%, 69%  { opacity: 0; }
  71%  { opacity: 1; }
  93%  { opacity: 1; }
  95%  { opacity: 0; }
  100% { opacity: 0; }
}

/* Loading bar */
body.retro .flash-loading-text {
  color: #ffffff !important;
  font-size: 0.85rem !important;
  margin-bottom: 15px !important;
}
body.retro .flash-loading-bar {
  width: 200px !important;
  height: 14px !important;
  border: 2px inset #808080 !important;
  background: #222222 !important;
}
body.retro .flash-loading-fill {
  height: 100% !important;
  background: #00ff00 !important;
  animation: flash-load-bar 21s infinite !important;
}
@keyframes flash-load-bar {
  0%   { width: 0%; }
  12%  { width: 100%; }
  15%  { width: 0%; }
  100% { width: 0%; }
}

/* Title scene */
body.retro .flash-big-title {
  color: #ffff00 !important;
  font-size: 1.5rem !important;
  animation: flash-title-glow 1s infinite alternate !important;
}
@keyframes flash-title-glow {
  0%   { text-shadow: 0 0 5px #ffff00, 0 0 10px #ff8800; }
  100% { text-shadow: 0 0 15px #ffff00, 0 0 30px #ff8800, 0 0 50px #ff4400; }
}
body.retro .flash-subtitle {
  color: #00ffff !important;
  font-size: 0.9rem !important;
  margin-top: 10px !important;
}

/* Character scene */
body.retro .flash-character {
  color: #ffffff !important;
  font-size: 1.8rem !important;
  animation: flash-char-bounce 0.6s ease-in-out infinite alternate !important;
}
@keyframes flash-char-bounce {
  0%   { transform: translateY(0); }
  100% { transform: translateY(-8px); }
}
body.retro .flash-speech {
  color: #ffff00 !important;
  font-size: 1rem !important;
  margin-top: 15px !important;
}

/* Typing scene */
body.retro .flash-typing {
  color: #00ff00 !important;
  font-size: 1.3rem !important;
  letter-spacing: 0.15em !important;
  animation: flash-typing-shake 0.1s linear infinite !important;
}
@keyframes flash-typing-shake {
  0%   { transform: translate(0, 0); }
  25%  { transform: translate(-1px, 1px); }
  50%  { transform: translate(1px, -1px); }
  75%  { transform: translate(-1px, -1px); }
  100% { transform: translate(1px, 1px); }
}
body.retro .flash-ai {
  color: #00ffff !important;
  font-size: 1rem !important;
  margin-top: 20px !important;
}

/* Complete scene */
body.retro .flash-complete {
  color: #ff00ff !important;
  font-size: 2rem !important;
  animation: flash-complete-pulse 0.4s ease-in-out infinite alternate !important;
}
@keyframes flash-complete-pulse {
  0%   { transform: scale(1); text-shadow: 0 0 10px #ff00ff; }
  100% { transform: scale(1.15); text-shadow: 0 0 30px #ff00ff, 0 0 60px #ffff00; }
}
body.retro .flash-stars-line {
  color: #ffff00 !important;
  font-size: 1rem !important;
  margin-top: 10px !important;
  animation: flash-stars-expand 1.5s ease-in-out infinite alternate !important;
}
@keyframes flash-stars-expand {
  0%   { letter-spacing: 0.05em; }
  100% { letter-spacing: 0.4em; }
}

/* Fin scene */
body.retro .flash-fin-text {
  color: #ffffff !important;
  font-size: 2rem !important;
  letter-spacing: 0.5em !important;
}

/* Controls bar */
body.retro .flash-controls {
  background: #c0c0c0 !important;
  border-top: 2px outset #ffffff !important;
  padding: 3px 10px !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  font-size: 0.65rem !important;
  color: #000000 !important;
  font-family: "MS Gothic", monospace !important;
}

/* Notice */
body.retro .flash-notice {
  color: #808080 !important;
  font-size: 0.7rem !important;
  margin-top: 8px !important;
}

/* ===== Responsive (retro is simpler) ===== */
@media (max-width: 768px) {
  body.retro .site-title { font-size: 1.5rem !important; }
  body.retro .hero h2 { font-size: 1rem !important; }
  body.retro .article { padding: 15px !important; }
  body.retro .article h1 { font-size: 1.2rem !important; }
  .theme-toggle-btn { bottom: 16px; right: 16px; font-size: .8rem; padding: 10px 16px; }
}