/* Full d'estil de "Per què és tan difícil veure un eclipsi total".
   Tema fosc, tipografia amb serifa per al conte i monoespaiada per a les dades. */

:root{
  --nit:#120E22; --crema:#FBF1E2; --or:#FFC96B; --malva:#B9A9E8;
  --carta:rgba(30,23,54,.80);
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
}

/* ── base i escenari ─────────────────────────────────────────────── */
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--nit);color:var(--crema);
  font-family:var(--serif);overflow:hidden;-webkit-font-smoothing:antialiased}
#scene{position:fixed;inset:0}
canvas{display:block;touch-action:none}
#vinyeta{position:fixed;inset:0;pointer-events:none;z-index:2;
  background:radial-gradient(ellipse at 50% 45%,rgba(0,0,0,0) 40%,rgba(9,6,18,.75) 100%)}

/* ── capçalera ───────────────────────────────────────────────────── */
#cap{position:fixed;top:22px;left:26px;z-index:5}
#cap h1{font-size:21px;font-weight:400;margin:0;letter-spacing:.01em;line-height:1.18}
#tornar{display:inline-block;margin-top:7px;font-size:10.5px;letter-spacing:.13em;
  text-transform:uppercase;font-family:ui-monospace,Menlo,monospace;
  color:var(--malva);text-decoration:none;opacity:.72}
#tornar:hover,#tornar:focus-visible{opacity:1;color:var(--or);outline:none}

/* ── el conte, a baix a l'esquerra ───────────────────────────────── */
#conte{position:fixed;left:26px;bottom:24px;z-index:5;
  width:min(430px,calc(100% - 52px));background:var(--carta);
  border:1px solid rgba(251,241,226,.13);border-radius:12px;padding:16px 19px;
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
#text{font-size:15.5px;line-height:1.58;margin:0;transition:opacity .35s}
#text b{font-weight:400;color:var(--or)}

/* ── panell de dades i finestra del cel ──────────────────────────── */
#dades{position:fixed;top:22px;right:26px;z-index:5;width:214px;display:none;
  font-family:ui-monospace,Menlo,monospace;background:var(--carta);
  border:1px solid rgba(251,241,226,.13);border-radius:10px;padding:11px 13px;
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
#dades.on{display:block}
.d{display:flex;justify-content:space-between;align-items:baseline;gap:10px;
  padding:5px 0;border-bottom:1px solid rgba(251,241,226,.10)}
.d:last-child{border-bottom:none;padding-bottom:0}
.d span{color:var(--malva);letter-spacing:.05em;text-transform:uppercase;font-size:8px;
  flex:0 0 auto}
.d b{font-weight:400;font-size:10.5px;text-align:right;line-height:1.35}
.d.clau b{color:var(--or);font-size:12px}
#anell{position:fixed;top:206px;right:26px;z-index:5;width:214px;display:none;
  font-family:ui-monospace,Menlo,monospace;background:var(--carta);
  border:1px solid rgba(251,241,226,.13);border-radius:10px;padding:11px 13px;
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);text-align:center}
#anell.on{display:block}
.et{font-size:8px;letter-spacing:.18em;text-transform:uppercase;color:var(--malva)}
#cel{width:96px;height:96px;display:block;margin:8px auto 6px}
#celtext{font-size:9px;line-height:1.5;color:var(--malva)}
#celtext b{display:block;font-weight:400;font-size:11px;letter-spacing:.12em;
  text-transform:uppercase;margin-bottom:2px}
/* ── el crit: el titular que apareix quan l'ombra toca ───────────── */
#crit{position:fixed;left:50%;top:13%;transform:translate(-50%,0);z-index:4;
  font-size:15px;letter-spacing:.14em;text-transform:uppercase;color:var(--or);
  font-family:ui-monospace,Menlo,monospace;opacity:0;transition:opacity .5s;
  pointer-events:none;text-shadow:0 0 24px rgba(255,201,107,.45)}
#crit.on{opacity:1}

/* ── "per qui en vulgui més": desplegables de l'última pantalla ──── */
#mes{display:none;margin-top:13px;padding-top:12px;
  border-top:1px solid rgba(251,241,226,.13);
  max-height:min(46vh,340px);overflow-y:auto;overscroll-behavior:contain}
#mes.on{display:block}
#mes details{border-bottom:1px solid rgba(251,241,226,.08)}
#mes details:last-child{border-bottom:none}
#mes summary{cursor:pointer;list-style:none;padding:7px 0;font-size:13px;
  color:var(--malva);display:flex;align-items:baseline;gap:8px}
#mes summary::-webkit-details-marker{display:none}
#mes summary::before{content:'+';font-family:ui-monospace,Menlo,monospace;
  font-size:12px;color:var(--or);flex:0 0 auto}
#mes details[open]>summary{color:var(--or)}
#mes details[open]>summary::before{content:'–'}
#mes summary:hover{color:var(--crema)}
#mes summary:focus-visible{outline:2px solid var(--or);outline-offset:2px;border-radius:4px}
#mes .cos{padding:2px 0 11px 18px}
#mes .f{display:flex;justify-content:space-between;align-items:baseline;gap:12px;
  padding:3px 0;font-family:ui-monospace,Menlo,monospace}
#mes .f span{font-size:9px;letter-spacing:.04em;text-transform:uppercase;
  color:var(--malva);opacity:.85}
#mes .f b{font-weight:400;font-size:10.5px;text-align:right;flex:0 0 auto;color:var(--crema)}
#mes .nota{margin:9px 0 0;font-size:12.5px;line-height:1.5;color:var(--crema);opacity:.78}
#mes .nota b{font-weight:400;color:var(--or)}

/* ── enllaç a un altre experiment ────────────────────────────────── */
#enllac{display:none;margin-top:12px;padding-top:11px;
  border-top:1px solid rgba(251,241,226,.13);
  font-size:13px;color:var(--malva);text-decoration:none}
#enllac.on{display:block}
#enllac:hover,#enllac:focus-visible{color:var(--or);outline:none}

/* ── controls i navegació ────────────────────────────────────────── */
#control{display:none;align-items:center;gap:10px;margin-top:14px;
  padding-top:13px;border-top:1px solid rgba(251,241,226,.13)}
#control.on{display:flex}
#control span{font-family:ui-monospace,Menlo,monospace;font-size:8.5px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--malva);margin-right:auto}
#control button{font-family:var(--serif);font-size:13px;color:var(--crema);cursor:pointer;
  background:rgba(255,201,107,.10);border:1px solid rgba(255,201,107,.35);
  border-radius:999px;padding:6px 15px;user-select:none;touch-action:none}
#control button:hover{background:rgba(255,201,107,.22)}
#control kbd{font-family:ui-monospace,Menlo,monospace;font-size:10px;line-height:1;
  padding:2px 5px;margin-left:3px;border-radius:4px;color:var(--or);
  background:rgba(255,201,107,.14);border:1px solid rgba(255,201,107,.30)}
#nav{display:flex;align-items:center;gap:9px;margin-top:14px}
#compta{margin-right:auto;font-family:ui-monospace,Menlo,monospace;font-size:9.5px;
  letter-spacing:.14em;color:var(--malva)}
#nav button{font-family:var(--serif);font-size:13px;color:var(--crema);cursor:pointer;
  background:rgba(251,241,226,.07);border:1px solid rgba(251,241,226,.20);
  border-radius:999px;padding:6px 14px}
#nav button:hover:not(:disabled){background:rgba(251,241,226,.17)}
#nav button:disabled{opacity:.28;cursor:default}
#control button:focus-visible,#nav button:focus-visible{outline:2px solid var(--or);
  outline-offset:2px}

/* ── pantalles estretes ──────────────────────────────────────────── */
@media (max-width:760px){
  #cap{top:12px;left:14px} #cap h1{font-size:16px}
  #tornar{margin-top:4px;font-size:9px}
  #dades{top:56px;right:10px;left:auto;width:auto;max-width:62%;padding:6px 9px}
  #dades:not(.obert) .d{display:none}
  #dades:not(.obert) .d.clau{display:flex}
  #dades .d.clau{border:none}
  #anell{top:96px;bottom:auto;right:10px;width:92px;padding:6px 7px}
  #dades.obert ~ #anell{display:none}   /* no hi caben tots dos */
  #cel{width:58px;height:58px;margin:4px auto 3px} #celtext{font-size:7.5px}
  #celtext b{font-size:8.5px}
  .d{padding:3px 0} .d span{font-size:7px} .d b{font-size:9px} .d.clau b{font-size:10px}
  #conte{left:10px;bottom:10px;padding:10px 12px 8px;width:calc(100% - 20px)}
  #text{font-size:12.5px;line-height:1.45}
  #mes{max-height:38vh;margin-top:10px;padding-top:9px}
  #mes summary{font-size:12px;padding:6px 0}
  #mes .cos{padding-left:14px}
  #mes .f span{font-size:8px} #mes .f b{font-size:9.5px}
  #mes .nota{font-size:11.5px}
  #nav button{font-size:12px;padding:5px 12px}
  #control button{font-size:12px;padding:5px 11px}
  #control kbd{display:none}     /* al mòbil no hi ha teclat i l'espai és or */
  #crit{font-size:9.5px;top:auto;bottom:calc(100% - 200px);letter-spacing:.09em;
    width:100%;text-align:center;transform:translate(-50%,0)}
}
@media (prefers-reduced-motion:reduce){#text{transition:none}}