/* 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; }

/* 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;
}