/* 8-Bit NES/Famicom Theme */

/* 8-bit Pixel Font Stack - uses unicode-range for script-based font selection */

/* Latin (base font for ASCII, extended Latin, and common symbols) */
@font-face {
  font-family: 'PixelStack';
  src: local('Press Start 2P'), url('https://fonts.gstatic.com/s/pressstart2p/v15/e3t4euO8T-267oIAQAu6jDQyK3nVivM.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-007F, U+0080-00FF, U+0100-017F, U+0180-024F, U+2000-206F, U+2190-21FF, U+2200-22FF, U+25A0-25FF, U+2600-26FF, U+2700-27BF;
}

/* Hebrew */
@font-face {
  font-family: 'PixelStack';
  src: url("/fonts/DiaryOfAn8BitMage-lYDD.ttf") format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0590-05FF, U+FB1D-FB4F;
  size-adjust: 125%;
}

/* Japanese (Hiragana, Katakana, CJK) */
@font-face {
  font-family: 'PixelStack';
  src: url("/fonts/Nosutaru-dotMPlusH-10-Regular.ttf") format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
  unicode-range: U+3000-303F, U+3040-309F, U+30A0-30FF, U+4E00-9FFF, U+FF00-FFEF;
  size-adjust: 130%;
}

/* Arabic */
@font-face {
  font-family: 'PixelStack';
  src: url("/fonts/PixelAE-Regular.ttf") format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF;
  size-adjust: 135%;
}

/* Korean (Hangul) */
@font-face {
  font-family: 'PixelStack';
  src: url("/fonts/Unifontexmono-lxY45.ttf") format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
  unicode-range: U+AC00-D7AF, U+1100-11FF, U+3130-318F;
  size-adjust: 125%;
}

:root {
  /* Muted retro palette - softer on the eyes */
  --nes-black: #1a1a2e;
  --nes-white: #eef1f5;
  --nes-red: #c45c5c;
  --nes-blue: #5b7bb8;
  --nes-green: #5faa6e;
  --nes-yellow: #e8d4a0;
  --nes-cyan: #6cc4d6;
  --nes-magenta: #a86cb8;
  --nes-orange: #d68a5c;
  --nes-pink: #d4a0c4;
  --nes-gray: #8a9099;
  --nes-dark-blue: #16213e;
  --nes-dark-gray: #2a2a40;
}

/* NES Colors - Background */
.bg-nes-black { background-color: var(--nes-black); }
.bg-nes-white { background-color: var(--nes-white); }
.bg-nes-red { background-color: var(--nes-red); }
.bg-nes-blue { background-color: var(--nes-blue); }
.bg-nes-green { background-color: var(--nes-green); }
.bg-nes-yellow { background-color: var(--nes-yellow); }
.bg-nes-cyan { background-color: var(--nes-cyan); }
.bg-nes-magenta { background-color: var(--nes-magenta); }
.bg-nes-orange { background-color: var(--nes-orange); }
.bg-nes-pink { background-color: var(--nes-pink); }
.bg-nes-gray { background-color: var(--nes-gray); }
.bg-nes-dark-blue { background-color: var(--nes-dark-blue); }
.bg-nes-dark-gray { background-color: var(--nes-dark-gray); }

/* NES Colors - Text */
.text-nes-black { color: var(--nes-black); }
.text-nes-white { color: var(--nes-white); }
.text-nes-red { color: var(--nes-red); }
.text-nes-blue { color: var(--nes-blue); }
.text-nes-green { color: var(--nes-green); }
.text-nes-yellow { color: var(--nes-yellow); }
.text-nes-cyan { color: var(--nes-cyan); }
.text-nes-magenta { color: var(--nes-magenta); }
.text-nes-orange { color: var(--nes-orange); }
.text-nes-pink { color: var(--nes-pink); }
.text-nes-gray { color: var(--nes-gray); }
.text-nes-dark-blue { color: var(--nes-dark-blue); }
.text-nes-dark-gray { color: var(--nes-dark-gray); }

/* NES Colors - Border */
.border-nes-black { border-color: var(--nes-black); }
.border-nes-white { border-color: var(--nes-white); }
.border-nes-red { border-color: var(--nes-red); }
.border-nes-blue { border-color: var(--nes-blue); }
.border-nes-green { border-color: var(--nes-green); }
.border-nes-yellow { border-color: var(--nes-yellow); }
.border-nes-cyan { border-color: var(--nes-cyan); }
.border-nes-magenta { border-color: var(--nes-magenta); }
.border-nes-orange { border-color: var(--nes-orange); }
.border-nes-pink { border-color: var(--nes-pink); }
.border-nes-gray { border-color: var(--nes-gray); }
.border-nes-dark-blue { border-color: var(--nes-dark-blue); }
.border-nes-dark-gray { border-color: var(--nes-dark-gray); }

/* Pixel Font - uses PixelStack which auto-selects font based on script via unicode-range */
.font-pixel { font-family: "PixelStack", "Press Start 2P", monospace; }

/* Readable terminal body font. The pixel font is display-only; long-form copy uses a
   real monospace so it stays legible down to phone sizes. */
.font-term {
  font-family: ui-monospace, "SFMono-Regular", "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  line-height: 1.6;
  letter-spacing: 0.01em;
}

/* Phosphor glow for display headings - subtle, not neon */
.text-glow { text-shadow: 0 0 6px rgba(108, 196, 214, 0.35); }
.text-glow-yellow { text-shadow: 0 0 6px rgba(232, 212, 160, 0.35); }

/* CRT scanline overlay - fixed, non-interactive, very low opacity so text stays readable */
.crt-scanlines::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 40;
  pointer-events: none;
  background: repeating-linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0) 0,
    rgba(0, 0, 0, 0) 2px,
    rgba(0, 0, 0, 0.06) 3px,
    rgba(0, 0, 0, 0) 4px
  );
}

/* Blinking terminal cursor for the hero prompt */
.term-cursor {
  display: inline-block;
  width: 0.6em;
  height: 1em;
  background: var(--nes-green);
  vertical-align: text-bottom;
  animation: term-blink 1.1s steps(1) infinite;
}
@keyframes term-blink { 50% { opacity: 0; } }

/* Pixel identity chip - the "also true about me" badges */
.pixel-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  border: 2px solid var(--nes-dark-gray);
  background: var(--nes-black);
  padding: 0.4rem 0.7rem;
  white-space: nowrap;
}
.pixel-chip:hover { border-color: var(--nes-cyan); }

/* Respect reduced-motion: kill the cursor blink and any scanline shimmer */
@media (prefers-reduced-motion: reduce) {
  .term-cursor { animation: none; }
}

/* Ensure disclosure triangles use system font (some pixel fonts have broken triangle glyphs) */
summary::marker,
summary::-webkit-details-marker {
  font-family: system-ui, sans-serif;
}

/* Pixel Shadows */
.shadow-pixel { box-shadow: 4px 4px 0px var(--nes-black); }
.shadow-pixel-sm { box-shadow: 2px 2px 0px var(--nes-black); }
.shadow-pixel-lg { box-shadow: 6px 6px 0px var(--nes-black); }
.shadow-pixel-white { box-shadow: 4px 4px 0px var(--nes-white); }

/* Pixel-perfect borders */
.border-pixel {
  border-width: 4px;
  border-style: solid;
}

.border-pixel-sm {
  border-width: 2px;
  border-style: solid;
}

/* Pixelated image rendering */
.pixelated {
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

/* 8-bit button press effect */
.pixel-btn:active {
  transform: translate(2px, 2px);
  box-shadow: none !important;
}

/* Hover states for NES colors */
.hover\:bg-nes-orange:hover { background-color: var(--nes-orange); }
.hover\:bg-nes-cyan:hover { background-color: var(--nes-cyan); }
.hover\:bg-nes-pink:hover { background-color: var(--nes-pink); }
.hover\:bg-nes-yellow:hover { background-color: var(--nes-yellow); }
.hover\:bg-nes-white:hover { background-color: var(--nes-white); }
.hover\:bg-nes-magenta:hover { background-color: var(--nes-magenta); }
.hover\:bg-nes-gray:hover { background-color: var(--nes-gray); }
.hover\:text-nes-black:hover { color: var(--nes-black); }
.hover\:text-nes-white:hover { color: var(--nes-white); }

/* Retro Circular Audio Player */
.retro-audio-player {
  --player-size: 80px;
  --progress-width: 4px;
  position: relative;
  width: var(--player-size);
  height: var(--player-size);
}

.retro-audio-player .player-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(
    var(--nes-cyan) calc(var(--progress, 0) * 1%),
    var(--nes-dark-gray) calc(var(--progress, 0) * 1%)
  );
  padding: var(--progress-width);
}

.retro-audio-player .player-inner {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: var(--nes-dark-blue);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color 0.15s;
  border: 2px solid var(--nes-dark-gray);
}

.retro-audio-player .player-inner:hover {
  background: var(--nes-black);
}

.retro-audio-player .player-inner:active {
  transform: scale(0.95);
}

.retro-audio-player .play-icon,
.retro-audio-player .pause-icon {
  width: 24px;
  height: 24px;
  fill: var(--nes-cyan);
}

.retro-audio-player .pause-icon {
  display: none;
}

.retro-audio-player.playing .play-icon {
  display: none;
}

.retro-audio-player.playing .pause-icon {
  display: block;
}

.retro-audio-player .time-display {
  position: absolute;
  bottom: -20px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 8px;
  color: var(--nes-gray);
  white-space: nowrap;
}