/* Stil comun animatii — tema „planetariu", contrast mare pentru proiector */
:root{
  --bg:#050913; --bg2:#0b1426; --panel:rgba(12,20,38,.88); --line:rgba(140,170,220,.28);
  --text:#f4f7fb; --muted:#b4c0d4; --cyan:#3fd0ff; --gold:#ffc940; --red:#ff6262;
  --green:#5be39a; --violet:#b48cff; --orange:#ff9d3c;
  --font:"Segoe UI","Inter",system-ui,-apple-system,Roboto,Arial,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--bg);color:var(--text);font-family:var(--font);overflow:hidden}
body{background:radial-gradient(ellipse at 50% 40%,#0d1a33 0%,#050913 70%)}
canvas{display:block}
#stage{position:absolute;inset:0}

/* titlu si legenda */
.a-title{position:absolute;left:28px;top:20px;font-size:clamp(18px,2.1vw,34px);font-weight:700;letter-spacing:.2px;text-shadow:0 2px 8px #000}
.a-title small{display:block;font-size:.55em;font-weight:500;color:var(--muted);margin-top:4px}
.a-caption{position:absolute;left:50%;transform:translateX(-50%);bottom:84px;max-width:min(1100px,92vw);
  background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:12px 22px;
  font-size:clamp(15px,1.45vw,26px);line-height:1.35;text-align:center;transition:opacity .4s}
.a-caption b{color:var(--gold)}
.a-panel{position:absolute;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:14px 18px;
  font-size:clamp(13px,1.1vw,20px);line-height:1.4}
.a-panel h4{margin:0 0 8px;font-size:1.05em;color:var(--cyan)}
.a-panel table{border-collapse:collapse}
.a-panel td,.a-panel th{padding:3px 10px;border-bottom:1px solid var(--line);text-align:right}
.a-panel th{color:var(--muted);font-weight:600}
.a-panel td:first-child,.a-panel th:first-child{text-align:left}
.key{display:inline-block;width:.9em;height:.9em;border-radius:3px;vertical-align:-.1em;margin-right:6px}
.lbl{position:absolute;pointer-events:none;font-size:clamp(12px,1vw,18px);font-weight:600;white-space:nowrap;
  text-shadow:0 0 4px #000,0 0 8px #000;transform:translate(-50%,-50%)}

/* bara de control */
.ctrl{position:absolute;left:50%;bottom:16px;transform:translateX(-50%);display:flex;align-items:center;gap:10px;
  background:var(--panel);border:1px solid var(--line);border-radius:40px;padding:8px 16px;z-index:50;
  width:min(1100px,94vw);user-select:none}
.ctrl button{background:#16233f;color:var(--text);border:1px solid var(--line);border-radius:50%;width:44px;height:44px;
  font-size:20px;cursor:pointer;display:flex;align-items:center;justify-content:center;flex:none}
.ctrl button:hover{background:#21345c;border-color:var(--cyan)}
.ctrl button.on{background:var(--cyan);color:#04111f}
.ctrl .tl{position:relative;flex:1;height:30px;cursor:pointer}
.ctrl .tl .bar{position:absolute;left:0;right:0;top:13px;height:5px;background:#24365a;border-radius:3px}
.ctrl .tl .fill{position:absolute;left:0;top:13px;height:5px;background:var(--cyan);border-radius:3px}
.ctrl .tl .knob{position:absolute;top:6px;width:18px;height:18px;margin-left:-9px;border-radius:50%;background:#fff;box-shadow:0 0 8px var(--cyan)}
.ctrl .tl .mk{position:absolute;top:9px;width:2px;height:13px;background:var(--gold);opacity:.8}
.ctrl .spd{font-size:15px;color:var(--muted);display:flex;align-items:center;gap:6px;flex:none}
.ctrl .spd select{background:#16233f;color:var(--text);border:1px solid var(--line);border-radius:8px;padding:5px;font-size:15px}
.ctrl .tm{font-variant-numeric:tabular-nums;color:var(--muted);font-size:15px;width:84px;text-align:center;flex:none}
.opts{position:absolute;right:20px;top:20px;display:flex;flex-direction:column;gap:8px;z-index:40}
.opts button,.btn{background:var(--panel);color:var(--text);border:1px solid var(--line);border-radius:10px;
  padding:9px 16px;font-size:clamp(13px,1.05vw,18px);cursor:pointer;text-align:left;font-family:inherit}
.opts button:hover,.btn:hover{border-color:var(--cyan)}
.opts button.on,.btn.on{background:var(--cyan);color:#04111f;border-color:var(--cyan);font-weight:600}
.hint{position:absolute;right:20px;bottom:86px;color:var(--muted);font-size:13px;opacity:.75}
@media (max-width:700px){.ctrl .spd span,.ctrl .tm{display:none}.a-caption{bottom:78px}}