/* ============================================================================
   pixel.css — the optional 8-bit design (html[data-design="pixel"]).
   Same page, same content; only the look changes. Palette: Sweetie 16 (16 colours),
   fonts: Press Start 2P (headings) and VT323 (text), both with full Turkish glyphs.
   Nothing here applies unless the visitor picks the retro design in the menu.
   ========================================================================== */

/* The menu button that switches designs (pixel.js); the gallery page has no experience.css. */
.nav-design { background: none; border: 0; color: inherit; cursor: pointer; padding: 0.35rem 0.5rem; font-size: 0.95rem; opacity: 0.8; }
.nav-design:hover { opacity: 1; }

/* ---------- Palette and fonts ---------- */
html[data-design="pixel"] {
  --px-ink: #1a1c2c;
  --px-paper: #f4f4f4;
  --px-line: #1a1c2c;
  --px-accent: #3b5dc9;
  --px-accent-2: #41a6f6;
  --px-hot: #ef7d57;
  --px-good: #38b764;

  --x-bg: #f4f4f4;
  --x-bg-alt: #e6eaf0;
  --x-tile: #ffffff;
  --x-text: #1a1c2c;
  --x-muted: #333c57;
  --x-faint: #566c86;
  --x-hair: #1a1c2c;
  --x-link: #3b5dc9;
  --x-link-rgb: 59, 93, 201;
  --x-stage: #f4f4f4;

  --x-display: 'Press Start 2P', ui-monospace, monospace;
  --x-font: 'VT323', ui-monospace, 'SF Mono', Menlo, monospace;
  --px-shadow: 4px 4px 0 var(--px-line);
  font-size: 118%;               /* VT323 has a small x-height: everything a size up */
}
html[data-design="pixel"][data-theme="dark"] {
  --px-ink: #f4f4f4;
  --px-paper: #1a1c2c;
  --px-line: #94b0c2;
  --px-accent: #41a6f6;
  --px-accent-2: #73eff7;

  --x-bg: #1a1c2c;
  --x-bg-alt: #232640;
  --x-tile: #29366f;
  --x-text: #f4f4f4;
  --x-muted: #94b0c2;
  --x-faint: #566c86;
  --x-hair: #566c86;
  --x-link: #73eff7;
  --x-link-rgb: 115, 239, 247;
  --x-stage: #1a1c2c;
}

/* ---------- Global: hard edges, no blur, no gradients ---------- */
html[data-design="pixel"] *,
html[data-design="pixel"] *::before,
html[data-design="pixel"] *::after { border-radius: 0 !important; }
html[data-design="pixel"] body {
  font-family: var(--x-font);
  line-height: 1.25;
  -webkit-font-smoothing: none;
  font-smooth: never;
  letter-spacing: 0;
}
html[data-design="pixel"] img { image-rendering: pixelated; }
html[data-design="pixel"] ::selection { background: var(--px-accent); color: var(--px-paper); }
html[data-design="pixel"] a { text-decoration: none; }
html[data-design="pixel"] a:hover { background: var(--x-link); color: var(--x-bg) !important; }
html[data-design="pixel"] h2,
html[data-design="pixel"] h3,
html[data-design="pixel"] h4 { font-family: var(--x-display); letter-spacing: 0; line-height: 1.5; }

/* ---------- Navigation ---------- */
html[data-design="pixel"] .nav,
html[data-design="pixel"] .nav.nav--scrolled {
  background: var(--x-bg) !important;
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
  border-bottom: 3px solid var(--px-line);
  box-shadow: none;
}
html[data-design="pixel"] .nav-brand { font-family: var(--x-font); font-size: 1.45rem; letter-spacing: 0; white-space: nowrap; margin-right: 1.25rem; }
html[data-design="pixel"] .nav-links a { font-size: 1.1rem; }
html[data-design="pixel"] .nav-links a::after { display: none; }
html[data-design="pixel"] .nav-search { border: 2px solid var(--px-line); }
html[data-design="pixel"] .nav-search kbd { font-family: var(--x-font); }
html[data-design="pixel"] .nav-design { color: var(--x-link); opacity: 1; }

/* ---------- Stage (hero) ---------- */
html[data-design="pixel"] .stage-canvas { image-rendering: pixelated; }
html[data-design="pixel"] .stage .hero-name {
  font-size: clamp(1.5rem, 5.4vw, 4.4rem);
  line-height: 1.3;
  background: none;
  -webkit-background-clip: border-box; background-clip: border-box;
  color: var(--x-text);
  text-shadow: 4px 4px 0 var(--px-accent);
}
html[data-design="pixel"] .stage .hero-name .hero-honorific { font-family: var(--x-font); font-size: clamp(1.1rem, 1.8vw, 1.5rem); text-shadow: none; }
html[data-design="pixel"] .stage .hero-eyebrow { font-family: var(--x-font); font-size: clamp(1.2rem, 1.8vw, 1.6rem); }
html[data-design="pixel"] .hero-motto { font-family: var(--x-display) !important; font-size: clamp(0.7rem, 1.25vw, 1.05rem) !important; line-height: 1.7 !important; }
html[data-design="pixel"] .stage .hero-links a {
  display: inline-block; padding: 0.15rem 0.6rem;
  border: 2px solid var(--x-link); box-shadow: 3px 3px 0 var(--x-link) !important;
}
html[data-design="pixel"] .stage .hero-links a::after { content: ' >'; }
html[data-design="pixel"] .brain-text .hero-statement {
  font-family: var(--x-display);
  font-size: clamp(0.85rem, 2.1vw, 1.75rem);
  line-height: 1.6;
  letter-spacing: 0;
}
html[data-design="pixel"] .brain-text .w.on {
  color: #f4f4f4;
  text-shadow: 3px 3px 0 #1a1c2c, -1px -1px 0 #1a1c2c, 1px -1px 0 #1a1c2c, -1px 1px 0 #1a1c2c;
}
html[data-design="pixel"] .brain-text .w { transition: color 0.2s steps(2), opacity 0.2s steps(2); }
html[data-design="pixel"] .stage-hud,
html[data-design="pixel"] .stage-caption { font-family: var(--x-font); font-size: 1rem; }
@media (max-width: 768px) {
  html[data-design="pixel"] .brain-text .hero-statement { font-size: clamp(0.7rem, 3.4vw, 1rem); }
}

/* ---------- Sections and cards ---------- */
html[data-design="pixel"] .section-label {
  font-family: var(--x-display); font-size: 0.6rem; color: var(--px-accent);
  text-transform: uppercase;
}
html[data-design="pixel"] .section-label::before { content: "> "; background: none; width: auto; height: auto; display: inline; }
html[data-design="pixel"] .section-header h2 { font-size: clamp(1.1rem, 2.6vw, 2rem); text-shadow: 3px 3px 0 var(--px-accent); }
html[data-design="pixel"] .pub-cat-title { font-size: 0.8rem; }

html[data-design="pixel"] .course-card,
html[data-design="pixel"] .metrics-grid > div,
html[data-design="pixel"] .palette-box,
html[data-design="pixel"] .expand-btn {
  border: 3px solid var(--px-line) !important;
  box-shadow: var(--px-shadow) !important;
  background: var(--x-tile);
}
html[data-design="pixel"] .expand-btn { font-family: var(--x-display); font-size: 0.6rem; padding: 0.7rem 1rem; }
html[data-design="pixel"] .expand-btn:hover { background: var(--x-link); color: var(--x-bg); }
html[data-design="pixel"] .accordion-header { font-family: var(--x-font); }
html[data-design="pixel"] .accordion-item { border-bottom: 2px dashed var(--x-hair); }
html[data-design="pixel"] .course-code { font-family: var(--x-display); font-size: 0.65rem; }

/* Publications: numbered like a list on a terminal. */
html[data-design="pixel"] .pub-item { border-bottom: 2px dashed var(--x-hair); }
html[data-design="pixel"] .pub-number { font-family: var(--x-display); font-size: 0.6rem; color: var(--px-accent); }
html[data-design="pixel"] .pub-title { font-size: 1.15rem; line-height: 1.2; }
html[data-design="pixel"] .pub-year,
html[data-design="pixel"] .announcement-tag,
html[data-design="pixel"] .project-status {
  border: 2px solid currentColor; padding: 0 0.35rem; background: none;
}
html[data-design="pixel"] .announcement-date,
html[data-design="pixel"] .timeline-year,
html[data-design="pixel"] .project-years { font-family: var(--x-display); font-size: 0.55rem; line-height: 1.8; }
html[data-design="pixel"] .metrics-grid dd { font-family: var(--x-display); font-size: 1.1rem; }
html[data-design="pixel"] .timeline-item::before { width: 10px; height: 10px; background: var(--px-accent); }

/* ---------- ASCII portrait (drawn by experience.js from the portrait photo itself) ---------- */
.ascii-canvas { display: none; }
html[data-design="pixel"] .about-portrait img { display: none; }
html[data-design="pixel"] .about-portrait {
  border: 3px solid var(--px-line); box-shadow: var(--px-shadow) !important;
  background: var(--x-tile); padding: 0.6rem; overflow: hidden;
  width: 100%; max-width: 26rem; box-sizing: border-box;
}
html[data-design="pixel"] .ascii-canvas { display: block; width: 100%; height: auto; image-rendering: auto; }
html[data-design="pixel"][data-theme="dark"] .about-portrait { background: #1a1c2c; }

/* ---------- Footer ---------- */
html[data-design="pixel"] .footer { border-top: 3px solid var(--px-line); font-family: var(--x-font); font-size: 1.05rem; }

/* ============================================================================
   Everything else, without exception: the gallery page (index.css only), overlays,
   modals, menus, buttons, inputs, badges, scrollbars, focus rings.
   ========================================================================== */

/* index.css tokens (the gallery page has no experience.css) follow the pixel palette too */
html[data-design="pixel"] {
  --color-bg: var(--x-bg); --color-bg-alt: var(--x-bg-alt); --color-bg-dark: var(--x-bg);
  --color-text: var(--x-text); --color-text-secondary: var(--x-muted); --color-text-tertiary: var(--x-faint);
  --color-accent: var(--x-link); --color-accent-light: var(--x-link); --color-accent-rgb: var(--x-link-rgb);
  --color-border: var(--x-hair); --color-border-light: var(--x-hair); --color-card-bg: var(--x-tile);
  --color-card-shadow: none; --color-hero-bg: var(--x-bg-alt); --color-overlay: rgba(26, 28, 44, 0.85);
  --color-nav-bg: var(--x-bg); --color-nav-bg-scrolled: var(--x-bg); --color-nav-bg-mobile: var(--x-bg);
  --color-section-alt-bg: var(--x-bg-alt); --border-color: var(--x-hair); --surface-color: var(--x-tile);
  --text-color: var(--x-text); --text-muted: var(--x-muted); --primary-color: var(--x-link); --shadow-sm: none;
  --font-display: var(--x-display); --font-prose: var(--x-font); --font-body: var(--x-font); --font-mono: var(--x-font);
  scrollbar-color: var(--px-accent) var(--x-bg-alt);
}
html[data-design="pixel"] body { background: var(--x-bg); color: var(--x-text); }

/* No soft shadows, no frosted glass, no blur anywhere; the hard shadows above are !important */
html[data-design="pixel"] * { box-shadow: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
html[data-design="pixel"] .course-card,
html[data-design="pixel"] .metrics-grid > div,
html[data-design="pixel"] .palette-box,
html[data-design="pixel"] .expand-btn,
html[data-design="pixel"] .about-portrait { box-shadow: var(--px-shadow) !important; }

/* Form controls and buttons */
html[data-design="pixel"] input,
html[data-design="pixel"] button,
html[data-design="pixel"] select,
html[data-design="pixel"] textarea { font-family: var(--x-font); }
html[data-design="pixel"] input[type="text"],
html[data-design="pixel"] input[type="password"],
html[data-design="pixel"] input[type="search"] {
  border: 2px solid var(--px-line) !important; background: var(--x-bg); color: var(--x-text); font-size: 1.2rem;
}
html[data-design="pixel"] :focus-visible { outline: 3px dashed var(--px-accent) !important; outline-offset: 2px; }

/* Scrollbar (WebKit): a square thumb on a flat track */
html[data-design="pixel"] ::-webkit-scrollbar { width: 14px; height: 14px; }
html[data-design="pixel"] ::-webkit-scrollbar-track { background: var(--x-bg-alt); }
html[data-design="pixel"] ::-webkit-scrollbar-thumb { background: var(--px-accent); border: 3px solid var(--x-bg-alt); }

/* "New" dot next to Announcements: a blinking square instead of a soft pulse */
html[data-design="pixel"] .pulse-dot {
  width: 10px; height: 10px; background: var(--px-hot) !important; animation: px-blink 1s steps(1) infinite !important;
}
html[data-design="pixel"] .pulse-dot::before,
html[data-design="pixel"] .pulse-dot::after { display: none !important; }
html[data-design="pixel"] .pulse-dot--small { width: 7px; height: 7px; }

/* Back-to-top arrow */
html[data-design="pixel"] .back-to-top {
  background: var(--x-tile) !important; color: var(--x-text) !important;
  border: 3px solid var(--px-line) !important; box-shadow: var(--px-shadow) !important;
}
html[data-design="pixel"] .back-to-top:hover { background: var(--px-accent) !important; color: var(--px-paper) !important; }

/* Menu buttons: music, design, theme, search, gallery, hamburger */
html[data-design="pixel"] .nav-toggle span { height: 3px; background: var(--x-text); }
html[data-design="pixel"] .nav-music:hover,
html[data-design="pixel"] .nav-theme-toggle:hover,
html[data-design="pixel"] .nav-star:hover { background: var(--x-link); color: var(--x-bg) !important; }

/* Phone menu (opened by the hamburger) */
@media (max-width: 900px) {
  html[data-design="pixel"] .nav-links { background: var(--x-bg) !important; border-bottom: 3px solid var(--px-line); }
  html[data-design="pixel"] .nav-links a { font-size: 1.4rem; }
}

/* Search palette */
html[data-design="pixel"] .palette { background: rgba(26, 28, 44, 0.75) !important; }
html[data-design="pixel"] .palette-input { font-family: var(--x-font); font-size: 1.4rem; }
html[data-design="pixel"] .palette-list li[aria-selected="true"] { background: var(--px-accent); color: var(--px-paper); }
html[data-design="pixel"] .palette-k { font-family: var(--x-display); font-size: 0.55rem; }

/* Listen pop-up */
html[data-design="pixel"] .listen-overlay { background: rgba(26, 28, 44, 0.85) !important; }
html[data-design="pixel"] .listen-modal {
  border: 3px solid var(--px-line); box-shadow: 8px 8px 0 var(--px-line) !important; background: var(--x-bg-alt) !important;
}
html[data-design="pixel"] .listen-header { background: var(--x-tile) !important; border-bottom: 3px solid var(--px-line) !important; }
html[data-design="pixel"] .listen-info h3 { font-family: var(--x-display); font-size: 0.8rem; line-height: 1.6; }
html[data-design="pixel"] .listen-close,
html[data-design="pixel"] .login-close { border: 2px solid var(--px-line); }
html[data-design="pixel"] .category-pill {
  border: 2px solid var(--px-line) !important; background: var(--x-tile) !important; color: var(--x-text) !important;
}
html[data-design="pixel"] .category-pill.active,
html[data-design="pixel"] .category-pill:hover { background: var(--px-accent) !important; color: var(--px-paper) !important; }

/* The "legend" log-in pop-up and its success screen */
html[data-design="pixel"] .login-modal { background: rgba(26, 28, 44, 0.85) !important; }
html[data-design="pixel"] .login-modal-content {
  border: 3px solid var(--px-line); box-shadow: 8px 8px 0 var(--px-line) !important; background: var(--x-tile) !important;
}
html[data-design="pixel"] .login-modal h3 { font-family: var(--x-display); font-size: 0.9rem; line-height: 1.6; }
html[data-design="pixel"] #legendLoginBtn {
  font-family: var(--x-display); font-size: 0.6rem; border: 2px solid var(--px-line) !important;
  background: var(--px-accent) !important; color: var(--px-paper) !important; box-shadow: 3px 3px 0 var(--px-line) !important;
}
html[data-design="pixel"] .success-overlay { background: var(--x-bg) !important; }
html[data-design="pixel"] .shimmer-text { background: none !important; -webkit-text-fill-color: currentColor !important; color: var(--x-text) !important; animation: none !important; }

/* YouTube card, social and contact icons, tags */
html[data-design="pixel"] .yt-promo { border: 3px solid var(--px-line) !important; box-shadow: var(--px-shadow) !important; background: var(--x-tile) !important; }
html[data-design="pixel"] .yt-promo-title { font-family: var(--x-display); font-size: 0.65rem; line-height: 1.6; }
html[data-design="pixel"] .yt-promo-btn { border: 2px solid var(--px-line) !important; background: var(--px-accent) !important; color: var(--px-paper) !important; }
html[data-design="pixel"] .social-icon,
html[data-design="pixel"] .contact-icon { border: 2px solid var(--px-line) !important; background: var(--x-tile) !important; }
html[data-design="pixel"] .social-icon:hover { background: var(--x-link) !important; color: var(--x-bg) !important; }

/* Gallery page: no wave background, photos in pixel frames, a pixel lightbox */
html[data-design="pixel"] #wave-canvas,
html[data-design="pixel"] .gradient-bg-container { display: none !important; }
html[data-design="pixel"] .gallery-cell { border: 3px solid var(--px-line) !important; box-shadow: var(--px-shadow) !important; background: #1a1c2c !important; }
html[data-design="pixel"] .gallery-name { font-family: var(--x-display); font-size: 0.5rem; letter-spacing: 0; line-height: 1.8; }
/* Photos as coloured ASCII (pixel.js): the image keeps the layout, the canvas covers it */
.px-ascii, .px-ascii-view { display: none; }
html[data-design="pixel"] .gallery-cell img { opacity: 0; transform: none !important; }
html[data-design="pixel"] .px-ascii { display: block; position: absolute; inset: 0; }
html[data-design="pixel"] #lightboxImg { display: none; }
html[data-design="pixel"] .px-ascii-view { display: block; border: 4px solid #f4f4f4; }
html[data-design="pixel"] .lightbox { background: rgba(26, 28, 44, 0.94) !important; }
html[data-design="pixel"] .lightbox img { border: 4px solid #f4f4f4; }
html[data-design="pixel"] .lightbox-btn { border: 2px solid #f4f4f4 !important; background: #1a1c2c !important; color: #f4f4f4 !important; }
html[data-design="pixel"] .lightbox-caption,
html[data-design="pixel"] .lightbox-counter { font-family: var(--x-font); font-size: 1.2rem; }

@keyframes px-blink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { html[data-design="pixel"] .pulse-dot { animation: none !important; } }