/* ===== Accessible, responsive theme ===== */
:root{
  --bg:#0a0d14; --text:#f2f6ff; --muted:#c7d2e8; --subtle:#a9b6cf;
  --panel:#0f1730; --panel-2:#0c1326; --border:#41557acc; --line:#2a3b5e;
  --accent:#7fd1ff; --accent-strong:#3fb6ff; --ok:#7fffd4; --warn:#ffd166;

  --c-pendulum: linear-gradient(135deg,#0e203d 0%, #1c3f69 100%);
  --c-projectile: linear-gradient(135deg,#0c2a22 0%, #155e49 100%);
  --c-incline: linear-gradient(135deg,#2b1f0f 0%, #7d4e10 100%);
  --c-collision: linear-gradient(135deg,#2c0f28 0%, #7a2f73 100%);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:var(--bg); color:var(--text);
  font:16px/1.55 system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial,sans-serif;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
img{max-width:100%; height:auto; display:block}

/* Links */
a{ color:var(--accent); text-underline-offset:2px; }
a:hover{ color:var(--accent-strong); text-decoration:underline; }
a:focus-visible{ outline:2px solid var(--accent-strong); outline-offset:2px; border-radius:6px; }

/* ===== Header (kids-facing title + subtitle) ===== */
.site-header{
  display:flex; flex-wrap:wrap; gap:10px 16px;
  align-items:center; justify-content:space-between;
  padding:14px 16px; border-bottom:1px solid var(--line);
  background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0));
}
.site-header h1{
  margin:0; font-size:clamp(24px, 2.6vw, 34px); line-height:1.2;
  letter-spacing:0.2px; color:#ffffff;
}
.subtitle{
  margin:0; width:100%;
  font-size:clamp(14px, 1.4vw, 18px);
  color:var(--muted);
}
nav label{margin-right:8px; color:var(--muted)}
.nav-link{margin-left:12px; color:var(--accent); text-decoration:none; font-weight:600}
.nav-link:hover{text-decoration:underline}
select{
  background:#0f1a37; color:var(--text); border:1px solid var(--border);
  padding:8px 10px; border-radius:10px;
}

/* ===== Layout ===== */
.app{
  display:grid; grid-template-columns: 1fr 380px; gap:16px; padding:16px;
}
.stage{
  position:relative; min-height:62vh; border:1px solid var(--border);
  border-radius:14px; overflow:hidden; background:var(--panel-2);
}
#canvas{width:100%; height:100%; display:block}
.stage::after{content:""; position:absolute; inset:6px;
  border:1px dashed rgba(127,209,255,0.15); border-radius:10px; pointer-events:none;}

/* AR video (hidden until toggled) */
.ar-video{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; display:none; filter:saturate(1.05) contrast(1.05);
}

/* HUD + FABs */
.hud{
  position:absolute; left:12px; top:12px; background:#0b1226f0;
  border:1px solid var(--border); border-radius:10px; padding:6px 10px;
  font-size:13px; color:#e6eeff; box-shadow:0 6px 18px rgba(0,0,0,0.35);
}
.fab-wrap{ position:absolute; right:14px; bottom:14px; display:flex; gap:10px; }
.fab{
  width:60px; height:60px; border-radius:50%; border:1px solid var(--border);
  background:#13224a; color:#eaf2ff; font-size:22px; font-weight:700;
  box-shadow:0 12px 28px rgba(0,0,0,0.45); cursor:pointer;
}
.fab.small{ width:48px; height:48px; font-size:20px; }
.fab:hover{ border-color:var(--accent); background:#16305f; }
.fab:active{ transform:scale(0.98) }
.fab:focus-visible{ outline:3px solid var(--accent-strong); outline-offset:3px }

/* ===== Control Panel ===== */
.panel{
  background:var(--panel); border:1px solid var(--border); border-radius:14px;
  padding:14px; height:fit-content; position:sticky; top:14px;
  box-shadow:0 14px 40px rgba(0,0,0,0.35);
}
.panel h3{margin:6px 0 8px; color:#ffffff}
.buttons{display:flex; gap:10px; align-items:center; margin-bottom:12px}
.btn{
  background:#1a2c59; color:#f4f8ff; border:1px solid #6bb6ff;
  padding:8px 12px; border-radius:10px; cursor:pointer; font-weight:600;
}
.btn:hover{ background:#1f376e; border-color:#8bd3ff }
.btn:active{ transform:translateY(1px) }
.btn:focus-visible{ outline:3px solid var(--accent-strong); outline-offset:2px }
.chk{margin-left:auto; font-size:14px; color:var(--muted)}

.control{margin-bottom:12px}
.control label{display:flex; justify-content:space-between; font-size:14px; color:var(--muted); margin-bottom:6px}
.control input[type="range"], .control input[type="number"]{
  width:100%; background:#0f1a37; color:#eef4ff; border:1px solid var(--border);
  padding:8px 10px; border-radius:10px;
}
.range-row{display:grid; grid-template-columns: 1fr 92px; gap:10px}

/* ===== Docs / Guide ===== */
.docs{padding:16px; border-top:1px solid var(--line)}
.docs h2{margin:8px 0 12px; color:#ffffff}

.guide-grid{display:grid; grid-template-columns: repeat(12, 1fr); gap:16px}
.guide-card{
  grid-column: span 6; padding:16px; border-radius:16px; color:#f7fbff;
  box-shadow: 0 16px 42px rgba(0,0,0,0.35); border:1px solid rgba(255,255,255,0.18);
}
.guide-card h3{margin:0 0 8px; color:#fff; text-shadow:0 1px 0 rgba(0,0,0,0.25)}
.guide-card h4{margin:12px 0 8px; font-size:17px; color:#ffffff; letter-spacing:0.2px}
.guide-card .bullets{margin:8px 0 0 18px; color:#eef4ff}
.guide-card .bullets li{margin:4px 0}
.guide-card.pendulum{background: var(--c-pendulum)}
.guide-card.projectile{background: var(--c-projectile)}
.guide-card.incline{background: var(--c-incline)}
.guide-card.collision{background: var(--c-collision)}

.examples-title{font-size:18px; line-height:1.35; color:#ffffff}
.examples-list{list-style:none; padding:0; margin:10px 0 0; display:grid; gap:12px}
.example-item{
  display:grid; grid-template-columns: 128px 1fr; gap:12px; align-items:center;
  background: rgba(10,18,40,0.55); border:1px solid rgba(127,209,255,0.35);
  border-radius:12px; padding:10px; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06);
}
.example-img{width:128px; height:86px; border-radius:10px; display:block; box-shadow:0 8px 18px rgba(0,0,0,0.35)}
.example-text{font-size:17px; line-height:1.5; color:#f4f8ff; text-decoration:none}
.example-text:hover{color:#e8f5ff; text-decoration:underline}
.example-text:focus-visible{outline:3px solid var(--accent-strong); outline-offset:3px; border-radius:8px}
.place-badge{
  display:inline-block; margin:0 0 6px 0; padding:3px 10px;
  font-size:12px; font-weight:700; color:#072036; background:#a8e6ff;
  border:1px solid #7fd1ff; border-radius:999px;
}

/* Quiz */
.quiz{margin-top:12px; background:rgba(0,0,0,0.25); border:1px solid rgba(255,255,255,0.2); border-radius:12px; padding:10px}
.quiz-q{margin:0 0 8px; color:#ffffff}
.quiz-options{display:flex; flex-wrap:wrap; gap:8px}
.quiz-option{
  background:#11305f; color:#f0f6ff; border:1px solid #6bb6ff; border-radius:10px;
  padding:6px 10px; cursor:pointer; font-weight:600;
}
.quiz-option:hover{background:#173a72}
.quiz-result{margin-top:8px; min-height:22px; color:#f2f6ff}

/* Map */
.map-note{color:var(--muted); margin:0 0 8px}
.map-grid{display:grid; grid-template-columns: repeat(12, 1fr); gap:16px}
.map-card{
  grid-column: span 6; background:var(--panel); border:1px solid var(--border);
  border-radius:16px; padding:12px; box-shadow:0 16px 42px rgba(0,0,0,0.35)
}
.map-card h3{margin:4px 0 8px; color:#ffffff}
.map-card iframe{width:100%; height:240px; border:0; border-radius:10px; filter:saturate(1.05) contrast(1.05)}
.map-link{display:inline-block; margin-top:8px; font-weight:600}

/* Fun Facts */
.facts-card{
  background:var(--panel); border:1px solid var(--border); border-radius:16px; padding:14px;
  box-shadow:0 16px 42px rgba(0,0,0,0.35); max-width:900px;
}
#factText{font-size:18px; line-height:1.6; color:#ffffff}
.facts-actions{margin-top:10px}

/* Footer */
.site-footer{
  display:flex; align-items:center; justify-content:center;
  padding:14px 16px; border-top:1px solid var(--line); color:var(--subtle)
}

/* ===== Responsive ===== */
@media (max-width:1100px){
  .app{grid-template-columns: 1fr}
  .panel{position:relative; top:auto}
  .guide-card, .map-card{grid-column: span 12}
}
@media (max-width:720px){
  body{font-size:15px}
  .site-header{gap:8px 12px}
  .fab{width:64px; height:64px; font-size:24px}
  .fab.small{width:52px; height:52px; font-size:22px}
  .examples-list .example-item{grid-template-columns: 1fr}
  .example-img{width:100%; height:auto}
}
@media (prefers-reduced-motion: reduce){
  .fab, .btn{transition:none}
}