/* Shared styles for the lane-runner games built on lane-runner.js (Units 5–9).
   Each page sets its own --blue / --lime accents in a :root block after this file. */
:root{
  --navy:#111a3f;--blue:#2d5deb;--sky:#e8f0ff;--lime:#d8f13a;--coral:#ff684c;
  --white:#fbfcff;--muted:#485586;--line:#c9d5f5;--green:#1a8a4a
}
*{box-sizing:border-box}
html{font-size:18px}
body{margin:0;background:var(--white);color:var(--navy);font:1rem/1.5 'Lato',-apple-system,'Segoe UI',sans-serif}
a{color:inherit}

.bar{height:66px;padding:0 max(20px,3vw);background:var(--navy);color:#fff;display:flex;align-items:center;justify-content:space-between;gap:18px;position:sticky;top:0;z-index:60;box-shadow:0 2px 0 var(--blue)}
.brand{font:900 16.8px 'Lato',sans-serif;letter-spacing:-.04em;text-decoration:none;color:#fff;white-space:nowrap}
.brand b{color:var(--lime)}
.links a{color:#fff;text-decoration:none;font-size:10.56px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:6px 2px;border-bottom:2px solid transparent}
.links a:hover{color:var(--lime);border-bottom-color:var(--lime)}

.main{max-width:1160px;margin:auto;padding:26px max(16px,3vw) 70px}
.eyebrow{font-size:.64rem;color:var(--blue);font-weight:700;letter-spacing:.15em;text-transform:uppercase}
h1{font-family:'Lato',sans-serif;font-weight:900;letter-spacing:-.055em;line-height:.98;font-size:2.1rem;margin:6px 0 8px}
.sub{margin:0;color:var(--muted);max-width:720px;font-size:.82rem}

.how{display:grid;grid-template-columns:repeat(4,1fr);gap:11px;margin:22px 0 4px}
.how .card{border:2px solid var(--navy);background:#fff;padding:13px 14px}
.how .card:nth-child(2){background:var(--sky)}
.how b{display:block;font-size:.7rem;text-transform:uppercase;letter-spacing:.04em}
.how span{display:block;font-size:.65rem;color:var(--muted);margin-top:5px;line-height:1.45}
.how .k{display:inline-block;background:var(--navy);color:#fff;font-weight:700;font-size:.58rem;padding:2px 6px;letter-spacing:.04em;margin-right:4px}

.play{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:20px;margin-top:18px;align-items:start}
canvas{display:block;width:100%;height:auto;border:2px solid var(--navy);background:#000;touch-action:none}
.keys{margin-top:8px;font-size:.62rem;color:var(--muted);line-height:1.6}
.stage{position:relative}
.ctrls{display:flex;gap:8px;margin-top:8px;flex-wrap:wrap}
.ctrls button{font:700 .6rem 'Lato',sans-serif;letter-spacing:.08em;text-transform:uppercase;background:var(--navy);color:#fff;border:0;padding:8px 13px;cursor:pointer}
.ctrls button:hover:not(:disabled){background:var(--blue)}
.ctrls button:disabled{opacity:.45;cursor:default}
.stage:fullscreen{background:#000;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:10px}
.stage:fullscreen canvas{width:min(100vw - 20px,(100vh - 70px) * 1.6);border:0}
.stage:-webkit-full-screen{background:#000;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:10px}
.stage:-webkit-full-screen canvas{width:min(100vw - 20px,(100vh - 70px) * 1.6);border:0}

.notes{border:2px solid var(--navy);background:#fff;display:flex;flex-direction:column;max-height:540px}
.notes h3{margin:0;font:900 .8rem 'Lato',sans-serif;background:var(--navy);color:#fff;padding:12px 16px;text-transform:uppercase;letter-spacing:.04em}
.notes .feed{padding:12px 14px;overflow-y:auto;flex:1;display:flex;flex-direction:column;gap:9px}
.notes .empty{color:var(--muted);font-size:.72rem;line-height:1.5}
.notes-foot{border-top:2px solid var(--line);padding:9px 14px;font-size:.6rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.li{border-left:4px solid var(--green);background:#eef7f0;padding:9px 11px;font-size:.72rem;line-height:1.4;animation:pop .25s ease}
.li.miss{border-left-color:var(--coral);background:#fff0ec}
.li .tag{display:block;font-size:.54rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;margin-bottom:3px;color:var(--green)}
.li.miss .tag{color:var(--coral)}
.li .ans{display:block;margin-top:4px;font-weight:700}
.li .why{display:block;margin-top:4px;color:var(--muted)}
@keyframes pop{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

.foot{margin-top:40px;border-top:2px solid var(--navy);padding-top:16px;font-size:.64rem;color:var(--muted);line-height:1.7}
@media(max-width:900px){ .play{grid-template-columns:1fr} .how{grid-template-columns:1fr 1fr} .notes{max-height:none} }
@media(max-width:560px){ .how{grid-template-columns:1fr} }