/*
 * Cozy Console Theme – style.css
 */
@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&family=Zen+Kaku+Gothic+New:wght@400;500;700;900&family=DotGothic16&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  --background: 40 30% 98%;
  --foreground: 220 22% 12%;
  --primary: 8 55% 58%;
  --primary-foreground: 0 0% 100%;
  --secondary: 158 60% 22%;
  --secondary-foreground: 0 0% 100%;
  --accent: 42 75% 68%;
  --accent-foreground: 220 22% 12%;
  --card: 0 0% 100%;
  --ink: 220 22% 12%;
  --ink-soft: 220 14% 30%;
  --moss: 158 40% 35%;
  --sky: 200 45% 82%;
  --peach: 18 65% 86%;
  --console-shell: 36 22% 94%;
  --console-shell-2: 36 18% 88%;
  --console-screen: 40 40% 99%;
  --console-bezel: 220 16% 18%;

  --shadow-soft: 0 1px 2px hsl(var(--ink) / 0.06), 0 8px 24px -8px hsl(var(--ink) / 0.12);
  --shadow-pop: 0 1px 0 hsl(var(--ink) / 0.08), 0 2px 0 hsl(var(--ink) / 0.06), 0 12px 28px -10px hsl(var(--ink) / 0.18);
  --shadow-inset-screen: inset 0 0 0 1px hsl(var(--ink) / 0.06), inset 0 2px 12px hsl(var(--ink) / 0.08);

  --gradient-screen: radial-gradient(120% 80% at 30% 0%, hsl(var(--peach) / 0.35), transparent 55%),
                     radial-gradient(120% 80% at 100% 100%, hsl(var(--sky) / 0.35), transparent 60%),
                     linear-gradient(180deg, hsl(var(--console-screen)), hsl(36 35% 94%));
  --gradient-shell: linear-gradient(180deg, hsl(var(--console-shell)), hsl(var(--console-shell-2)));
}

html, body {
  margin: 0; padding: 0;
  background: hsl(var(--background));
  color: hsl(var(--foreground));
  font-family: 'Zen Kaku Gothic New', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;
}

h1, h2, h3, h4 {
  font-family: 'Zen Kaku Gothic New', sans-serif;
  font-weight: 900;
  letter-spacing: -0.02em; margin: 0;
}

.font-pixel { font-family: 'Press Start 2P', system-ui; letter-spacing: 0.02em; }
.font-display { font-family: 'DotGothic16', sans-serif; }
.font-mono { font-family: 'JetBrains Mono', monospace; }
.font-soft { font-family: 'Zen Kaku Gothic New', sans-serif; }
.font-jp { font-family: 'DotGothic16', 'Zen Kaku Gothic New', sans-serif; }

a { text-decoration: none; color: inherit; }

/* Console Wrapper */
.console-wrapper {
  width: 100%; max-width: 1400px; margin: 0 auto;
  padding: 1.5rem; display: flex; flex-direction: column;
  justify-content: center; align-items: center; min-height: 100vh;
}

.console-chassis {
  width: 100%; position: relative; border-radius: 36px;
  background: var(--gradient-shell); padding: 1.25rem; box-shadow: var(--shadow-pop);
}

.chassis-ring {
  position: absolute; inset: 0; border-radius: 36px;
  pointer-events: none; border: 1px solid hsl(var(--ink)/0.1);
}

.hinge-dots {
  position: absolute; top: 0.75rem; left: 50%; transform: translateX(-50%);
  display: flex; gap: 0.375rem;
}
.hinge-dots span { width: 0.375rem; height: 0.375rem; border-radius: 50%; background: hsl(var(--ink)/0.15); }

.screw {
  position: absolute; width: 0.5rem; height: 0.5rem; border-radius: 50%;
  background: hsl(var(--ink)/0.1); box-shadow: inset 0 0 0 1px hsl(var(--ink)/0.15);
}
.screw.tl { top: 0.5rem; left: 0.5rem; }
.screw.tr { top: 0.5rem; right: 0.5rem; }
.screw.bl { bottom: 0.5rem; left: 0.5rem; }
.screw.br { bottom: 0.5rem; right: 0.5rem; }

/* Header */
.console-header {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  margin-bottom: 1rem; padding: 0.75rem 0.75rem 0; gap: 0.75rem;
}

.console-brand { display: flex; align-items: center; justify-self: start; }
.console-logo { height: 2.25rem; width: auto; }
@media (min-width: 768px) { .console-logo { height: 2.5rem; } }

.console-nav {
  display: flex; gap: 0.25rem; padding: 0.25rem; border-radius: 9999px;
  background: hsl(var(--card)/0.8); box-shadow: var(--shadow-soft); border: 1px solid hsl(var(--ink)/0.1);
  backdrop-filter: blur(4px); justify-self: center; max-width: 100%; overflow-x: auto;
}
.console-nav a {
  padding: 0.375rem 0.875rem; border-radius: 9999px; font-family: 'Press Start 2P', system-ui;
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.1em; color: hsl(var(--ink-soft));
  transition: color 0.2s, background 0.2s; white-space: nowrap;
}
.console-nav a.active { background: hsl(var(--ink)); color: hsl(var(--console-screen)); box-shadow: var(--shadow-soft); }
.console-nav a:hover:not(.active) { color: hsl(var(--ink)); }

@media (max-width: 640px) {
  .console-header { grid-template-columns: 1fr; justify-items: center; }
}

/* Screen & Bezel */
.console-bezel {
  position: relative; border-radius: 26px; padding: 0.375rem; background: hsl(var(--console-bezel));
}
.speaker-grille {
  position: absolute; top: 50%; transform: translateY(-50%);
  display: flex; flex-direction: column; gap: 0.375rem;
}
.speaker-grille.left { left: -0.25rem; }
.speaker-grille.right { right: -0.25rem; }
.speaker-grille span { width: 0.25rem; height: 0.75rem; border-radius: 9999px; background: hsl(var(--ink)/0.15); }
@media (max-width: 768px) { .speaker-grille { display: none; } }

.screen-surface {
  position: relative; border-radius: 20px; overflow: hidden;
  background: var(--gradient-screen); box-shadow: var(--shadow-inset-screen);
}
.scanlines::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(to bottom, transparent 0, transparent 2px, hsl(var(--ink)/0.025) 2px, hsl(var(--ink)/0.025) 3px);
  mix-blend-mode: multiply; border-radius: inherit; z-index: 20;
}

.console-content { padding: 1.5rem 1.25rem; position: relative; z-index: 1; }
@media (min-width: 768px) { .console-content { padding: 2rem 2.5rem; } }

/* Controls */
.console-controls {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: 1rem; padding: 0 0.75rem 0.5rem;
}
.d-pad { position: relative; width: 3.5rem; height: 3.5rem; }
.d-pad .h { position: absolute; top: 50%; left: 0; transform: translateY(-50%); width: 100%; height: 1rem; background: hsl(var(--console-bezel)); border-radius: 0.375rem; }
.d-pad .v { position: absolute; left: 50%; top: 0; transform: translateX(-50%); width: 1rem; height: 100%; background: hsl(var(--console-bezel)); border-radius: 0.375rem; }
.d-pad .c { position: absolute; inset: 50%; transform: translate(-50%, -50%); width: 0.75rem; height: 0.75rem; border-radius: 50%; background: hsl(var(--ink)/0.3); }

.ab-btns { display: flex; gap: 0.625rem; align-items: center; }
.ab-btns button {
  width: 2.5rem; height: 2.5rem; border-radius: 50%; font-size: 0.75rem; border: none; cursor: pointer;
  box-shadow: var(--shadow-soft), inset 0 0 0 1px hsl(var(--ink)/0.15); display: flex; align-items: center; justify-content: center;
}
.ab-btns button.b { background: hsl(var(--card)); color: hsl(var(--ink)); }
.ab-btns button.a { background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); }

/* Animations & Utils */
.press { transition: transform 180ms cubic-bezier(.2,.8,.2,1); }
.press:hover { transform: translateY(-2px); }
.press:active { transform: translateY(0); }
.eyebrow { font-family: 'Press Start 2P', system-ui; font-size: 9px; text-transform: uppercase; letter-spacing: 0.2em; color: hsl(var(--ink-soft)); }

/* Prose / Content layout */
.content-grid {
  display: grid; gap: 2rem; grid-template-columns: 1fr;
}
@media(min-width: 1024px) { .content-grid { grid-template-columns: 1fr 280px; align-items: start; } }

.article-card {
  background: white; border-radius: 1.5rem; padding: 1.5rem; border: 1px solid hsl(var(--ink)/0.1);
  box-shadow: var(--shadow-soft); position: relative;
}
@media (min-width: 768px) { .article-card { padding: 2.5rem; } }

.tape-1 { position: absolute; top: -0.75rem; left: 2.5rem; width: 4rem; height: 1.25rem; background: hsl(var(--accent)/0.7); transform: rotate(-3deg); border-radius: 0.125rem; box-shadow: 0 1px 2px rgba(0,0,0,0.05); }
.tape-2 { position: absolute; top: -0.75rem; right: 2.5rem; width: 4rem; height: 1.25rem; background: hsl(var(--secondary)/0.4); transform: rotate(2deg); border-radius: 0.125rem; box-shadow: 0 1px 2px rgba(0,0,0,0.05); }

.prose h2 { font-size: 1.5rem; margin: 2.5rem 0 0.75rem; }
.prose h3 { font-size: 1.25rem; margin: 2rem 0 0.5rem; }
.prose p { margin-bottom: 1rem; color: hsl(var(--ink)/0.85); line-height: 1.7; }
.prose a { color: hsl(var(--primary)); text-decoration: none; transition: text-decoration 0.2s; }
.prose a:hover { text-decoration: underline; }
.prose ul, .prose ol { margin-bottom: 1rem; padding-left: 1.5rem; color: hsl(var(--ink)/0.85); line-height: 1.7; }
.prose li { margin-bottom: 0.5rem; }
.prose blockquote { border-left: 4px solid hsl(var(--secondary)); background: hsl(var(--secondary)/0.05); padding: 0.5rem 1rem; border-radius: 0 0.5rem 0.5rem 0; margin-bottom: 1rem; font-style: normal; }

.sidebar-widget {
  background: hsl(var(--card)); border-radius: 1rem; padding: 1.25rem;
  border: 1px solid hsl(var(--ink)/0.1); box-shadow: var(--shadow-soft);
}
.sidebar-widget ul { list-style: none; padding: 0; margin: 0; }
.sidebar-widget li { margin-bottom: 0.375rem; }
.toc-link { display: block; padding: 0.25rem 0; border-left: 2px solid transparent; padding-left: 0.75rem; margin-left: -2px; color: hsl(var(--ink-soft)); transition: color 0.2s, border-color 0.2s; font-size: 0.875rem; }
.toc-link:hover { color: hsl(var(--ink)); border-color: hsl(var(--ink)/0.3); }

.breadcrumb {
  display: flex; align-items: center; gap: 0.5rem; font-family: 'Press Start 2P', system-ui;
  font-size: 9px; text-transform: uppercase; letter-spacing: 0.1em; color: hsl(var(--ink-soft));
  margin-bottom: 1.5rem;
}
.breadcrumb a { transition: color 0.2s; }
.breadcrumb a:hover { color: hsl(var(--ink)); }
.breadcrumb span.sep { color: hsl(var(--ink)/0.3); }
.breadcrumb span.current { color: hsl(var(--ink)); max-width: 40ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Site footer (matches main app Footer.tsx) */
.site-footer { width: 100%; margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid hsl(var(--ink)/0.1); }
.site-footer-top {
  display: flex; flex-direction: column; align-items: center; justify-content: space-between;
  gap: 1rem;
}
@media (min-width: 640px) { .site-footer-top { flex-direction: row; gap: 1.5rem; } }

.site-footer-brand { display: flex; flex-direction: column; align-items: center; gap: 0.375rem; }
@media (min-width: 640px) { .site-footer-brand { align-items: flex-start; } }
.site-footer-logo { height: 1.5rem; width: auto; opacity: 0.8; transition: opacity 0.2s; }
.site-footer-logo:hover { opacity: 1; }
.site-footer-tagline { font-size: 0.75rem; color: hsl(var(--ink-soft)); }

.site-footer-nav { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; justify-content: center; }
.site-footer-nav a {
  font-family: 'Press Start 2P', system-ui; font-size: 9px; text-transform: uppercase;
  letter-spacing: 0.1em; color: hsl(var(--ink-soft)); transition: color 0.2s;
}
.site-footer-nav a:hover, .site-footer-nav a.active { color: hsl(var(--ink)); }

.site-footer-socials { display: flex; align-items: center; gap: 0.5rem; }
.site-footer-social {
  width: 2rem; height: 2rem; border-radius: 9999px; background: hsl(var(--card));
  box-shadow: var(--shadow-soft); border: 1px solid hsl(var(--ink)/0.1);
  display: flex; align-items: center; justify-content: center; color: hsl(var(--ink-soft));
  transition: color 0.2s, transform 0.2s;
}
.site-footer-social:hover { color: hsl(var(--ink)); transform: translateY(-2px); }
.site-footer-social svg { width: 1rem; height: 1rem; }

.site-footer-legal { display: flex; align-items: center; justify-content: center; gap: 1rem; margin-top: 1.25rem; }
.site-footer-legal a { font-size: 11px; color: hsl(var(--ink-soft)); opacity: 0.7; transition: opacity 0.2s; }
.site-footer-legal a:hover { opacity: 1; }

.site-footer-copy { text-align: center; margin-top: 0.5rem; font-size: 11px; color: hsl(var(--ink-soft)); opacity: 0.7; }