/* ================================================================
   site.css — Vibration Playground shared styles
   
   Covers the fixed nav bar, landing page grid, and the 
   "how to play" sections on each world page.
   Each world page also has its own <style> block for 
   canvas-specific layout (panels, overlays, etc.).
   ================================================================ */

/* ---- Reset ---- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  background: #0a0a0a;
  color: #999;
  font-family: 'IBM Plex Mono', 'SF Mono', 'Fira Mono', monospace;
  font-size: 13px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

/* ================================================================
   Fixed nav bar — stays at top on scroll
   ================================================================ */
nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  height: 40px;
  background: rgba(10, 10, 10, 0.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid #1a1a1a;
  display: flex;
  align-items: center;
  padding: 0 24px;
  gap: 28px;
}

.nav-title {
  color: #ccc;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  text-decoration: none;
}
.nav-title:hover { color: #fff; }

.nav-links {
  display: flex;
  gap: 20px;
  margin-left: auto;
}

.nav-links a {
  color: #555;
  text-decoration: none;
  font-size: 11px;
  letter-spacing: 0.04em;
  transition: color 0.15s;
  white-space: nowrap;
}
.nav-links a:hover { color: #aaa; }
.nav-links a.active { color: #7af; }

/* ================================================================
   Hamburger button — hidden on desktop, visible on mobile.
   Three <span> elements form the bars.
   ================================================================ */
.nav-hamburger {
  display: none;            /* hidden until the mobile breakpoint */
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 6px 2px;
  margin-left: auto;        /* push to the right edge of the nav */
  flex-shrink: 0;
}
.nav-hamburger span {
  display: block;
  width: 20px;
  height: 2px;
  background: #888;
  border-radius: 1px;
  transition: background 0.15s;
}
.nav-hamburger:hover span { background: #ccc; }

/* ================================================================
   Mobile nav — breakpoint at 700px.
   Below this width the horizontal links are replaced by a
   hamburger button that toggles a full-width dropdown.
   ================================================================ */
@media (max-width: 700px) {

  /* Show the hamburger, suppress the always-visible link row */
  .nav-hamburger { display: flex; }
  .nav-links {
    display: none;
    flex-direction: column;
    gap: 0;
    margin-left: 0;
    /* Dropdown: absolutely positioned below the 40px nav bar, full viewport width */
    position: absolute;
    top: 40px;
    left: 0;
    right: 0;
    background: rgba(10, 10, 10, 0.97);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-bottom: 1px solid #2a2a2a;
    padding: 4px 0;
    z-index: 999;
  }

  /* Reveal dropdown when nav has .nav-open class */
  #vp-nav.nav-open .nav-links { display: flex; }

  /* Each link: full-width row, tall enough to tap comfortably */
  .nav-links a {
    padding: 13px 24px;
    font-size: 12px;
    letter-spacing: 0.06em;
    white-space: normal;
    border-bottom: 1px solid #1a1a1a;
    width: 100%;
  }
  .nav-links a:last-of-type { border-bottom: none; }

  /* Accessibility / Helper buttons inside dropdown */
  .nav-a11y {
    padding: 13px 24px;
    font-size: 11px;
    text-align: left;
    width: 100%;
    border: none;
    border-top: 1px solid #1a1a1a;
    border-radius: 0;
    background: transparent;
  }
}

/* ================================================================
   Landing page
   ================================================================ */
main.landing {
  max-width: 960px;
  margin: 0 auto;
  padding: 72px 24px 80px;
}

.page-header {
  margin-bottom: 48px;
}

.page-header h1 {
  font-size: 22px;
  font-weight: 400;
  color: #ddd;
  letter-spacing: 0.02em;
  margin-bottom: 12px;
}

.page-header p {
  max-width: 600px;
  color: #666;
  font-size: 13px;
  line-height: 1.6;
}

/* ---- 2x2 world grid ---- */
.world-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

@media (max-width: 640px) {
  .world-grid { grid-template-columns: 1fr; }
}

/* ---- World card ---- */
.world-card {
  display: block;
  text-decoration: none;
  background: #111;
  border: 1px solid #1e1e1e;
  border-radius: 3px;
  overflow: hidden;
  transition: border-color 0.2s, transform 0.15s;
}
.world-card:hover {
  border-color: #333;
  transform: translateY(-2px);
}

.card-image {
  width: 100%;
  aspect-ratio: 4 / 3;
  background: #0d0d0d;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
}

.card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.card-placeholder {
  color: #2a2a2a;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.card-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  background: rgba(0, 0, 0, 0.7);
  color: #555;
  font-size: 9px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: 2px;
}

.card-body {
  padding: 14px 16px 16px;
}

.card-title {
  font-size: 14px;
  font-weight: 400;
  color: #ccc;
  margin-bottom: 6px;
  letter-spacing: 0.02em;
}

.card-desc {
  font-size: 12px;
  color: #555;
  line-height: 1.5;
}

/* Color accent per world */
.world-card.mass .card-image    { border-top: 2px solid #8a5cf5; }
.world-card.string .card-image  { border-top: 2px solid #5c9ff5; }
.world-card.lattice .card-image { border-top: 2px solid #5cf5a8; }
.world-card.membrane .card-image { border-top: 2px solid #f5c85c; }

.world-card.disabled {
  pointer-events: none;
  opacity: 0.4;
}

/* ---- Footer ---- */
footer {
  margin-top: 56px;
  padding-top: 20px;
  border-top: 1px solid #1a1a1a;
  color: #333;
  font-size: 11px;
  line-height: 1.6;
}

footer a {
  color: #555;
  text-decoration: none;
}
footer a:hover { color: #888; }


/* ================================================================
   World page layout — canvas at top, prose below
   ================================================================ */

/* The canvas wrapper sits directly below the nav bar.
   Each world page sets its own canvas container styles inline
   (as they already do), but this wrapper constrains the 
   overall page width and centers the canvas. */
.world-page {
  padding-top: 40px;  /* clears the fixed nav */
}

/* The prose section below the canvas */
.world-prose {
  max-width: 720px;
  margin: 0 auto;
  padding: 36px 24px 80px;
}

.world-prose h2 {
  font-size: 16px;
  font-weight: 400;
  color: #ccc;
  margin-bottom: 16px;
  letter-spacing: 0.02em;
}

.world-prose h3 {
  font-size: 13px;
  font-weight: 600;
  color: #999;
  margin-top: 28px;
  margin-bottom: 10px;
  letter-spacing: 0.03em;
}

.world-prose p {
  color: #777;
  font-size: 13px;
  line-height: 1.65;
  margin-bottom: 14px;
}

.world-prose p:last-child {
  margin-bottom: 0;
}

/* Keyboard shortcut inline styling */
.world-prose kbd {
  display: inline-block;
  background: #1a1a1a;
  border: 1px solid #2a2a2a;
  border-radius: 3px;
  padding: 1px 5px;
  font-family: inherit;
  font-size: 11px;
  color: #aaa;
  line-height: 1.4;
  vertical-align: baseline;
}

/* A subtle horizontal rule between sections */
.world-prose hr {
  border: none;
  border-top: 1px solid #1a1a1a;
  margin: 28px 0;
}

/* For the "what's happening" physics hint at the end */
.world-prose .physics-note {
  color: #555;
  font-size: 12px;
  line-height: 1.6;
  border-left: 2px solid #222;
  padding-left: 14px;
  margin-top: 20px;
}