/* Het Nachtmuseum — gedeelde stijl voor bord, team, print en startpagina.
   De pagina's zijn zelfdragend: alle tokens staan hieronder, zodat de deploy
   platte bestanden in /spelen/ kan neerzetten zonder afhankelijkheid van de
   stylesheets van de site. */
:root{
  --hs-bg:#fdfbf7; --hs-text:#2c2c2c;
  --hs-green:#00A676; --hs-green-dark:#007A5E; --hs-green-light:rgba(0,166,118,.1);
  --hs-blue:#3b82f6; --hs-orange:#f59e0b; --hs-yellow:#ffcb5b;
  --hs-purple:#8b5cf6; --hs-red:#EF4444;
  /* Eén museumpalet voor het hele spel. Deze drie waren eerder net anders
     dan die van de teaser en de docentpagina (#171429 en #ffcb5b), waardoor
     het digibord en de publieke pagina's zichtbaar uit elkaar liepen. */
  --nacht:#141220; --nacht-2:#1b1830; --goud:#e9c46a;
  --goud-hoog:#fbe4a6; --goud-diep:#a5762c;
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:'Plus Jakarta Sans','Segoe UI',system-ui,-apple-system,sans-serif;
  background:var(--hs-bg);color:var(--hs-text);-webkit-font-smoothing:antialiased}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
.knop{background:var(--hs-green);color:#fff;border-radius:999px;padding:.85rem 1.75rem;font-weight:800;font-size:1rem}
.knop:hover{background:var(--hs-green-dark)}
.knop[disabled]{background:#e5e1d8;color:#a8a296;cursor:not-allowed}
.melding{border-radius:1rem;padding:.85rem 1rem;font-weight:700;font-size:.95rem}
.melding.fout{background:#fff4e6;color:#9a5b00}
.melding.goed{background:var(--hs-green-light);color:var(--hs-green-dark)}

/* ══════════ startpagina en keuzekaarten ══════════ */
.midden{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:2rem}
.kaart{background:#fff;border-radius:2rem;padding:3rem;box-shadow:0 8px 30px rgba(0,0,0,.06);max-width:860px;width:100%}
.kaart h1{font-size:2.25rem;font-weight:800;line-height:1.15;margin-bottom:.75rem}
.kaart p{font-size:1.05rem;color:#6b7280;font-weight:500;line-height:1.6;margin-bottom:2rem}
.keuzes3{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:1rem}
.keuzeknop{background:#fff;border:2px solid #e9e6df;border-radius:1.5rem;padding:1.5rem;text-align:left;
  display:block;text-decoration:none;color:inherit;transition:all .2s}
.keuzeknop:hover{border-color:var(--hs-green);transform:translateY(-2px)}
.keuzeknop b{display:block;font-size:1.1rem;font-weight:800;margin-bottom:.25rem}
.keuzeknop span{font-size:.85rem;color:#6b7280;font-weight:500;line-height:1.5}
.tip{margin-top:1.5rem;font-size:.85rem;color:#9ca3af;line-height:1.6}

/* ══════════ digibord ══════════ */
body.bord{background:var(--nacht);color:#fff;height:100vh;overflow:hidden}
.bordapp{height:100vh;display:flex;flex-direction:column}
/* De kop is docentgereedschap. Tijdens de missie schuift hij weg zodat de klas
   alleen het museum ziet, en komt terug bij muisbeweging of een tik. */
.bord-kop{display:flex;align-items:center;gap:1.25rem;padding:.7rem 1.4rem;background:rgba(0,0,0,.25);flex:none;
  max-height:8rem;overflow:hidden;transition:max-height .35s ease,padding .35s ease,opacity .25s ease}
body.bord.kop-weg .bord-kop{max-height:0;padding-top:0;padding-bottom:0;opacity:0;pointer-events:none}
body.bord.kop-weg.kop-zichtbaar .bord-kop{max-height:8rem;padding-top:.7rem;padding-bottom:.7rem;opacity:1;pointer-events:auto}
.bord-kop h1{font-size:clamp(1.1rem,1.3vw,1.7rem);font-weight:800}
.bord-kop .knopje{background:rgba(255,255,255,.1);border-radius:999px;padding:.45rem .9rem;font-size:.8rem;font-weight:700}
.bord-kop .knopje:hover{background:rgba(255,255,255,.2)}
.bord-kop .knopje-hint{font-size:.75rem;font-weight:700;color:#6b6489}
.bord-kop .knopje-hint b{color:#a9a2cc}
.bord-kop .rond{width:2.1rem;height:2.1rem;padding:0;display:grid;place-items:center;font-size:1rem;flex:none}

/* Bereikbaar op een digibord zonder toetsenbord: de D-toets blijft werken,
   maar dit is het aanraakpunt voor het docentpaneel. */
.docentknop{position:fixed;right:.7rem;bottom:.7rem;z-index:45;width:2.9rem;height:2.9rem;border-radius:999px;
  background:rgba(255,255,255,.14);color:#fff;font-size:1.15rem;display:grid;place-items:center;
  opacity:.3;transition:opacity .2s,background .2s}
.docentknop:hover,.docentknop:focus-visible{opacity:1;background:rgba(255,255,255,.28)}
body.docent-aan .docentknop{opacity:1}
.bord-kop .rechts{margin-left:auto;display:flex;align-items:center;gap:.9rem}
.sessiecode{background:rgba(255,255,255,.1);border-radius:999px;padding:.4rem 1.1rem;font-weight:800;
  letter-spacing:.22em;font-size:clamp(.9rem,1vw,1.3rem)}
.verbinding{font-size:.8rem;font-weight:800;color:#8b86a8}
.verbinding.weg{color:var(--hs-red)}

/* lobby */
.lobby{flex:1;min-height:0;display:grid;place-items:center;text-align:center;padding:2rem;gap:1rem}
.lobby h2{font-size:clamp(1.4rem,2.2vw,2.6rem);font-weight:800}
.lobby .url{font-size:clamp(1rem,1.4vw,1.8rem);color:#cfc9e8;font-weight:700}
.grotecode{font-size:clamp(4rem,11vw,13rem);font-weight:800;letter-spacing:.14em;color:var(--goud);line-height:1.05}
.lobby .uitleg{font-size:clamp(.85rem,1vw,1.15rem);color:#8b86a8;font-weight:600;max-width:44rem;line-height:1.6}
.wachtrij{display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center}
.wachtrij .plek{border:2px dashed rgba(255,255,255,.18);border-radius:999px;padding:.4rem .9rem;
  font-size:clamp(.85rem,1vw,1.15rem);font-weight:800;color:#5b5480}
.wachtrij .plek.in{border-style:solid;border-color:transparent;color:#fff}

/* doorsnede */
.doorsnede{flex:1;min-height:0;display:grid;grid-template-columns:repeat(3,1fr);gap:.9rem;padding:.9rem}
.ruimte{position:relative;min-height:0;border-radius:1.5rem;padding:clamp(.7rem,1vw,1.4rem);
  display:flex;flex-direction:column;gap:.6rem;overflow:hidden;transition:background .8s,box-shadow .8s}
.ruimte.dicht{background:#100e1c}
.ruimte.open{background:var(--nacht-2);box-shadow:inset 0 0 130px rgba(255,203,91,.1)}
.ruimte-kop{display:flex;align-items:center;gap:.6rem;flex:none}
.ruimte-kop h2{font-size:clamp(.95rem,1.15vw,1.6rem);font-weight:800}
.ruimte-kop .nr{width:clamp(1.7rem,1.9vw,2.6rem);aspect-ratio:1;border-radius:999px;background:rgba(255,255,255,.12);
  display:grid;place-items:center;font-weight:800;font-size:clamp(.8rem,.95vw,1.2rem);flex:none}
.ruimte.open .nr{background:var(--goud);color:#2c2c2c}
.slot{position:absolute;inset:0;display:grid;place-items:center;background:rgba(10,9,18,.92);z-index:5;gap:.5rem;text-align:center;padding:2rem}
.slot .hangslot{font-size:clamp(2.5rem,4vw,5rem);opacity:.3}
.slot p{font-size:clamp(.85rem,1vw,1.25rem);color:#8b86a8;font-weight:600;max-width:20rem;line-height:1.5}
.object{flex:1;min-height:0;display:flex;flex-direction:column;justify-content:center;gap:.5rem}
.objectnaam{font-size:clamp(.62rem,.72vw,.95rem);text-transform:uppercase;letter-spacing:.16em;
  color:var(--goud);font-weight:800;text-align:center;flex:none}

/* De bordobjecten zijn bewust groot: ze moeten van achter in de klas leesbaar
   zijn en elke ruimte heeft een derde van het scherm om in te groeien. */
.planbord{display:grid;grid-template-columns:auto 1fr 1fr 1fr;gap:.45rem .7rem;align-items:center}
.planbord .h{font-size:clamp(.6rem,.78vw,1.05rem);text-transform:uppercase;letter-spacing:.1em;color:#a9a2cc;font-weight:800}
.planbord .g{display:flex;align-items:center;gap:.45rem;font-size:clamp(.85rem,1.3vw,2.1rem);font-weight:800}
.planbord .g i{width:clamp(1.3rem,1.9vw,2.9rem);aspect-ratio:1;border-radius:999px;background:rgba(255,255,255,.14);
  display:grid;place-items:center;font-style:normal;font-size:clamp(.7rem,1.05vw,1.6rem);flex:none}
.planbord .v{font-size:clamp(1rem,1.7vw,2.8rem);font-weight:800;color:var(--goud);text-align:center;font-variant-numeric:tabular-nums}
.planbord .v.wit{color:#fff}

.meters{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(.4rem,.8vw,1.2rem)}
.meter{background:rgba(255,255,255,.06);border-radius:1rem;padding:clamp(.4rem,.75vw,1.2rem);text-align:center}
.meter .z{font-size:clamp(.58rem,.78vw,1.05rem);text-transform:uppercase;letter-spacing:.1em;color:#a9a2cc;font-weight:800}
.meter .w{font-size:clamp(1.8rem,3.4vw,5.5rem);font-weight:800;color:var(--goud);line-height:1.1;font-variant-numeric:tabular-nums}

.muur{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(.3rem,.6vw,.9rem)}
.vlak{background:rgba(255,255,255,.06);border-radius:.9rem;padding:clamp(.25rem,.5vw,.8rem);text-align:center}
.vlak .m{font-size:clamp(1.2rem,2.4vw,3.8rem);line-height:1.2}
.vlak .n{font-size:clamp(.85rem,1.5vw,2.4rem);font-weight:800;color:var(--goud);font-variant-numeric:tabular-nums}

.emblemen{flex:none;display:flex;flex-wrap:wrap;gap:.35rem;align-items:center;padding-top:.4rem}
.embleem{display:flex;align-items:center;gap:.3rem;border-radius:999px;padding:.25rem .6rem;
  font-size:clamp(.7rem,.85vw,1.05rem);font-weight:800;color:#fff}
.embleem.offline{opacity:.4}
.lampjes{display:flex;gap:.25rem;margin-left:auto}
.lamp{width:clamp(.5rem,.6vw,.85rem);aspect-ratio:1;border-radius:999px;background:var(--goud);box-shadow:0 0 10px var(--goud)}

.koepel{grid-column:1/-1;display:flex;flex-direction:row;align-items:center;gap:1.25rem;padding:.6rem 1.2rem}
.fragmenten{display:flex;gap:.45rem}
.fragment{width:clamp(2rem,2.6vw,3rem);height:clamp(2.6rem,3.3vw,3.9rem);border-radius:.8rem;
  background:rgba(255,255,255,.08);display:grid;place-items:center;font-size:clamp(1.2rem,1.7vw,2rem);font-weight:800;color:#fff}
.fragment.leeg{color:#4b4470}
.koepel p{flex:1;font-size:clamp(.8rem,.95vw,1.2rem);color:#cfc9e8;font-weight:600}

/* Een balk over de bovenkant en geen zwart scherm: het bord belooft dat het
   nooit iets wegneemt, dus de ruimtes blijven zichtbaar terwijl dit speelt. */
#gebeurtenis{position:fixed;left:0;right:0;top:0;z-index:60;display:none;align-items:center;gap:clamp(1rem,2vw,2.5rem);
  background:linear-gradient(rgba(10,9,18,.97),rgba(10,9,18,.88));border-bottom:3px solid var(--goud);
  padding:clamp(.9rem,1.6vw,2rem) clamp(1.4rem,3vw,3.5rem);box-shadow:0 12px 40px rgba(0,0,0,.5)}
#gebeurtenis.aan{display:flex;animation:inschuiven .45s cubic-bezier(.2,.9,.3,1)}
#gebeurtenis .deur{font-size:clamp(2.4rem,4vw,5rem);flex:none;animation:draai .9s ease-out}
#gebeurtenis h2{font-size:clamp(1.3rem,2.4vw,3rem);font-weight:800;color:var(--goud);line-height:1.15}
#gebeurtenis p{font-size:clamp(.9rem,1.3vw,1.7rem);color:#cfc9e8;font-weight:600}
@keyframes draai{from{transform:rotateY(-90deg) scale(.6);opacity:0}to{transform:none;opacity:1}}
@keyframes inschuiven{from{transform:translateY(-100%)}to{transform:none}}

#docent{background:rgba(0,0,0,.35);padding:.7rem 4.6rem .7rem 1.4rem;display:none;gap:.6rem;flex-wrap:wrap;align-items:center;flex:none}
#docent.aan{display:flex}
.dteam{background:rgba(255,255,255,.07);border-radius:1rem;padding:.4rem .7rem;font-size:.78rem;font-weight:700;display:flex;align-items:center;gap:.45rem}
.dteam .stip{width:.55rem;height:.55rem;border-radius:999px}
.dteam.vast{background:rgba(239,68,68,.22)}
.dknop{background:var(--hs-green);color:#fff;border-radius:999px;padding:.4rem .85rem;font-size:.75rem;font-weight:800}
.dknop.grijs{background:rgba(255,255,255,.14)}
#pauze{position:fixed;inset:0;z-index:70;background:rgba(10,9,18,.95);display:none;place-items:center;color:#fff;text-align:center}
#pauze.aan{display:grid}
#pauze h2{font-size:3rem;font-weight:800;color:var(--goud)}
/* De pauze was een doodlopende weg: het scherm lag over het docentpaneel heen,
   dus er was geen weg terug en de les was af. Nu staat de knop in het
   pauzescherm zelf en blijft het docentgereedschap er bovenop bereikbaar. */
#pauze .knop{margin-top:1.6rem}
#pauze .pauze-tip{margin:1rem auto 0;max-width:34rem;font-size:1rem;color:#cfc9e8;font-weight:600}
body.pauze-aan .docentknop{z-index:75;opacity:1}
body.pauze-aan #docent.aan{position:relative;z-index:75}

/* ══════════ teamscherm ══════════ */
.team-kop{position:sticky;top:0;z-index:20;background:#fff;border-bottom:2px solid #f0ede6;padding:.9rem 1.25rem;
  display:flex;align-items:center;gap:.9rem}
.team-kop .bol{width:2.5rem;height:2.5rem;border-radius:999px;display:grid;place-items:center;font-size:1.4rem;flex:none}
.team-kop b{font-size:1.15rem;font-weight:800;display:block;line-height:1.2}
.team-kop small{color:#6b7280;font-weight:600;font-size:.85rem}
.team-kop .code{margin-left:auto;display:flex;gap:.4rem}
.hokje{width:2.4rem;height:2.9rem;border-radius:.75rem;background:#f3f0e9;display:grid;place-items:center;
  font-size:1.35rem;font-weight:800;color:#c4bfb4}
/* een naam past niet in een cijfervakje */
.hokje.breed{width:auto;min-width:4.5rem;padding:0 .7rem;font-size:1rem;text-transform:capitalize}
.hokje.vol{background:var(--hs-green-light);color:var(--hs-green-dark)}
.offline{background:var(--hs-red);color:#fff;text-align:center;padding:.5rem;font-weight:800;font-size:.85rem;display:none}
.offline.aan{display:block}

/* Breder dan 1180 zodat vier opdrachten naast elkaar passen op een
   schoollaptop van 1366 breed, zonder dat de cijferknoppen gaan afbreken. */
.werktafel{max-width:1320px;margin:0 auto;padding:1.25rem 1.25rem 6.5rem}
.voorwerp{background:linear-gradient(135deg,#fff,#fbf7ee);border-radius:1.5rem;padding:.9rem 1.25rem;
  box-shadow:0 8px 30px rgba(0,0,0,.05);border:2px dashed #e4dfd2;margin-bottom:1rem}
.voorwerp .tag{font-size:.7rem;text-transform:uppercase;letter-spacing:.14em;color:#a89f88;font-weight:800;margin-bottom:.6rem}
.voorwerp .rij{display:flex;gap:1.75rem;align-items:center;flex-wrap:wrap}
.veld small{display:block;font-size:.8rem;color:#8b93a1;font-weight:800;text-transform:uppercase;letter-spacing:.08em;margin-bottom:.15rem}
.veld b{font-size:1.4rem;font-weight:800}
.veld b.groot{font-size:2.2rem}

/* align-items:start houdt elke kaart op zijn eigen inhoudshoogte. Zonder dit
   rekten kortere kaarten mee met de langste en ontstond er een blok wit tussen
   de laatste stap en het invulveld. */
.opdrachten{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1rem;align-items:start}
.opdracht{background:#fff;border-radius:1.75rem;padding:1.25rem;box-shadow:0 8px 30px rgba(0,0,0,.04);
  border:2px solid transparent;display:flex;flex-direction:column;transition:border-color .2s}
.opdracht.klaar{border-color:var(--hs-green)}
.opdracht .letter{width:2.2rem;height:2.2rem;border-radius:999px;background:var(--hs-green-light);
  color:var(--hs-green-dark);display:grid;place-items:center;font-weight:800;margin-bottom:.75rem}
.opdracht h3{font-size:1.2rem;font-weight:800;line-height:1.35;margin-bottom:.75rem}
.stappen{list-style:none;margin-bottom:1rem}
/* De pil loopt mee in de tekstregel in plaats van ernaast te staan. Naast de
   tekst kostte hij tot een derde van de kaartbreedte, en omdat 'achterkant'
   veel breder is dan 'bord' begon elke stap op een andere plek. Zo staan alle
   vervolgregels netjes onder elkaar en past er veel meer op een regel. */
.stappen li{display:block;font-size:1rem;color:#414b59;font-weight:600;line-height:1.6;margin-bottom:.55rem}
.stappen li i{padding:.1rem .55rem;border-radius:999px;font-style:normal;font-size:.66rem;
  font-weight:800;color:#fff;text-transform:uppercase;letter-spacing:.04em;
  display:inline-block;vertical-align:.1em;margin-right:.4rem;white-space:nowrap}
/* Een opdracht die af is, klapt zijn stappen in. Zo groeit de ruimte voor het
   werk dat nog moet gebeuren, en blijft alles met één tik terug te halen. */
.stappenknop{align-self:flex-start;font-size:.85rem;font-weight:800;color:#8b93a1;margin-bottom:1rem}
.stappenknop:hover{color:var(--hs-green-dark)}
/* De merkjes heten stap-* en niet bord/vel/pas: .vel is hieronder het printvel,
   en een <li class="vel"> kreeg daardoor min-height:297mm mee. */
.stappen li.stap-bord i{background:var(--hs-purple)}
.stappen li.stap-vel i,
.stappen li.stap-voorkant i,
.stappen li.stap-achterkant i{background:var(--hs-orange)}
.stappen li.stap-pas i{background:var(--hs-blue)}
/* krappe tussenruimte zodat negen cijferknoppen in twee rijen passen
   binnen een kolom van vier; de knoppen zelf blijven 3rem voor de vinger */
.keuzes{display:flex;flex-wrap:wrap;gap:.3rem;margin-top:auto}
.keuze{width:3rem;height:3rem;border-radius:1rem;background:#f3f0e9;font-size:1.2rem;font-weight:800;color:#6b7280;transition:all .15s}
.keuze:hover{background:#e8e4da}
.keuze.gekozen{background:var(--hs-green);color:#fff;transform:scale(1.06)}
.getalveld{font-size:1.5rem;font-weight:800;letter-spacing:.2em;text-align:center;border:2px solid #e5e1d8;
  border-radius:1rem;padding:.7rem;width:7rem;font-family:inherit}
/* open antwoord: een naam intypen, hoofdletters maken niet uit */
.woordveldje{font-size:1.35rem;font-weight:800;border:2px solid #e5e1d8;border-radius:1rem;
  padding:.7rem 1rem;width:100%;max-width:16rem;font-family:inherit;text-transform:capitalize}
.woordveldje:focus{outline:none;border-color:var(--hs-green)}
.woordveldje::placeholder{font-weight:600;font-size:1rem;color:#b9b3a6;text-transform:none}
.hintknop{margin-top:1rem;font-size:.92rem;font-weight:800;color:var(--hs-blue);align-self:flex-start}
.hintknop:hover{text-decoration:underline}
.hinttekst{margin-top:.75rem;background:#eff6ff;border-radius:1rem;padding:.85rem 1rem;font-size:1rem;color:#1e40af;font-weight:600;line-height:1.55}

.uv-veld{position:relative;height:11rem;border-radius:1.25rem;overflow:hidden;background:#14121f;cursor:crosshair;touch-action:none;margin-bottom:1rem}
.uv-teken{position:absolute;inset:0;display:grid;place-items:center;font-size:6rem;font-weight:800;color:#7cf5c8;
  text-shadow:0 0 30px #22c9a0,0 0 60px #22c9a0}
.uv-dek{position:absolute;inset:0;background:#14121f}
.uv-hint{position:absolute;left:0;right:0;bottom:.6rem;text-align:center;font-size:.78rem;color:#6b6489;font-weight:700}

.codebalk{position:fixed;left:0;right:0;bottom:0;z-index:25;background:#fff;border-top:2px solid #f0ede6;
  padding:1rem 1.25rem;display:flex;align-items:center;gap:1rem;flex-wrap:wrap;box-shadow:0 -8px 30px rgba(0,0,0,.05)}
.codebalk .uitleg{font-size:1rem;color:#4b5563;font-weight:600}
.codebalk .uitleg b{color:var(--hs-green-dark)}

/* korte overgang op de laptop wanneer de deur opengaat */
#deuroverlay{position:fixed;inset:0;z-index:90;display:none;place-items:center;text-align:center;
  background:rgba(23,20,41,.96);color:#fff;padding:2rem}
#deuroverlay.aan{display:grid;animation:opdoemen .3s ease-out}
#deuroverlay .deur{font-size:clamp(4rem,12vw,7rem);animation:draai .9s ease-out}
#deuroverlay h2{font-size:clamp(1.5rem,5vw,2.4rem);font-weight:800;color:var(--goud);margin-top:1rem}
#deuroverlay p{font-size:clamp(1rem,3vw,1.25rem);color:#cfc9e8;font-weight:600;margin-top:.5rem}
@keyframes opdoemen{from{opacity:0}to{opacity:1}}
.codebalk .knop{margin-left:auto}
.codebalk .melding{width:100%}
.finale-kaart{background:#fff;border-radius:2rem;padding:2rem;box-shadow:0 8px 30px rgba(0,0,0,.05);text-align:center}
.finale-kaart h2{font-size:1.75rem;font-weight:800;margin-bottom:.5rem}
.finale-kaart p{color:#6b7280;font-weight:500;line-height:1.6;margin-bottom:1.5rem}
.woordveld{font-size:1.75rem;font-weight:800;letter-spacing:.35em;text-align:center;border:2px solid #e5e1d8;
  border-radius:1.25rem;padding:1rem;width:100%;max-width:22rem;text-transform:uppercase;font-family:inherit}
.codeveld{font-size:2.5rem;font-weight:800;letter-spacing:.3em;text-align:center;border:2px solid #e5e1d8;
  border-radius:1.25rem;padding:1rem;width:100%;max-width:20rem;font-family:inherit}
.teamkiezer{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:1rem;margin:1.5rem 0}
.teamkiezer button{background:#fff;border:2px solid #e9e6df;border-radius:1.5rem;padding:1.25rem;text-align:center;transition:all .2s}
.teamkiezer button:hover{border-color:var(--hs-green)}
.teamkiezer button.gekozen{border-color:var(--hs-green);background:var(--hs-green-light)}
.teamkiezer button .dier{font-size:2.5rem;display:block}
.teamkiezer button b{font-weight:800}

/* ══════════ teamscherm op een telefoon ══════════
   Op een smal scherm liep de kop stuk (teamnaam en ruimte braken elk in twee
   regels), wrapte de dossierstrip scheef en viel de vaste codebalk over de
   onderste opdracht heen. */
@media (max-width:600px){
  .team-kop{padding:.65rem .9rem;gap:.6rem;flex-wrap:wrap}
  .team-kop .bol{width:2.1rem;height:2.1rem;font-size:1.15rem}
  .team-kop b{font-size:1rem;white-space:nowrap}
  .team-kop small{font-size:.78rem;white-space:nowrap}
  .team-kop .code{margin-left:auto;gap:.3rem}
  .hokje{width:2rem;height:2.4rem;border-radius:.6rem;font-size:1.05rem}
  .hokje.breed{min-width:3.4rem;padding:0 .4rem;font-size:.8rem}

  /* twee vaste kolommen leest rustiger dan een rij die willekeurig afbreekt */
  .voorwerp{padding:.8rem 1rem;margin-bottom:.85rem}
  /* align-items:start moet mee: de flexregel hierboven centreert verticaal,
     en dan staan de labels van twee cellen naast elkaar niet op één lijn */
  .voorwerp .rij{display:grid;grid-template-columns:1fr 1fr;gap:.7rem 1rem;align-items:start}
  .veld b{font-size:1.15rem}
  .veld b.groot{font-size:1.8rem}

  .werktafel{padding:1rem .9rem 10.5rem}
  .opdracht{padding:1.1rem;border-radius:1.5rem}
  .opdracht h3{font-size:1.1rem}

  /* knop over de volle breedte: prettiger voor een duim, en de balk krijgt
     een vaste hoogte waar de werktafel onderin ruimte voor houdt */
  .codebalk{padding:.8rem 1rem;gap:.6rem}
  .codebalk .uitleg{font-size:.95rem;width:100%}
  .codebalk .knop{margin-left:0;width:100%;text-align:center}
}

/* ══════════ het voorleesverhaal op het digibord ══════════
   Dia's, geen tekstpagina's. Het beeld krijgt alle ruimte die overblijft; de
   voorleestekst staat eronder als een band en kan uit. Alles zit in één
   flexkolom van 100% hoogte, want body.bord staat op 100vh met overflow
   hidden: groeit er iets, dan valt de knoppenrij eruit. */
.dia{height:100%;display:flex;flex-direction:column;min-height:0;
  gap:clamp(.6rem,1.4vh,1.2rem);
  padding:clamp(.8rem,2vh,1.6rem) clamp(1.2rem,3.5vw,3rem) clamp(.8rem,2vh,1.4rem)}

.dia-hoek{flex:none;display:flex;align-items:baseline;gap:1rem;flex-wrap:wrap}
.dia-tel{font-size:.78rem;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:var(--goud)}
.dia-hoek h2{font-size:clamp(1.2rem,2.4vw,2rem);font-weight:800;line-height:1.1}

/* Beeld en tekst staan naast elkaar en wisselen per dia van kant. Op een
   digibord is dat rustiger dan een plaat met een strook tekst eronder: het
   beeld wordt groter en de tekst krijgt een eigen kolom met grote letters.
   Past het niet meer naast elkaar, dan gaan ze onder elkaar staan. */
.dia-lijf{flex:1;min-height:0;display:grid;gap:clamp(1rem,2.5vw,2.5rem);
  grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);align-items:center}
.dia-lijf.kant-rechts .dia-beeld{order:2}
.dia-tekstkolom{height:100%;min-height:0;display:flex;flex-direction:column;
  gap:clamp(.5rem,1.4vh,1rem)}

/* Tekst verborgen: het beeld pakt het scherm, maar de speelknop blijft staan.
   Anders kan de leerkracht die de tekst wegklikt niet meer laten voorlezen. */
.dia.tekst-uit .dia-lijf{grid-template-columns:minmax(0,1fr) auto}
.dia.tekst-uit .dia-band{display:none}
.dia.tekst-uit .dia-tekstkolom{height:auto;align-self:center}

/* De speelbalk boven de tekst: een gouden schijfje met het driehoekje, het
   woord erachter, de tijd en een dunne lijn die meeloopt. Klein genoeg om
   niet met de dia te concurreren, groot genoeg om vanaf het bord te zien
   waar je moet drukken. */
.leesbalk{flex:none;display:flex;align-items:center;gap:.75rem}
.leesknop{display:inline-flex;align-items:center;gap:.55rem;flex:none;
  padding:.3rem .95rem .3rem .3rem;border:0;border-radius:99px;cursor:pointer;
  font:inherit;font-size:clamp(.8rem,.95vw,1.05rem);font-weight:700;color:#fff;
  background:rgba(255,255,255,.09)}
.leesknop:hover{background:rgba(255,255,255,.16)}
.leesknop .lees-icoon{display:grid;place-items:center;width:1.9em;height:1.9em;
  border-radius:99px;font-size:1em;line-height:1;color:#241c04;
  background:linear-gradient(160deg,#f0d183 0%,#d4a93f 52%,#b98c25 100%)}
.leesknop.speelt .lees-icoon{background:rgba(255,255,255,.22);color:#fff}
.leesknop.laadt{cursor:default;color:#b8b2d0}
.leesknop.laadt .lees-icoon{background:rgba(255,255,255,.14);color:#fff;
  animation:leeslader 1.1s linear infinite}
.leesknop.stuk{cursor:default;color:#ffb4a2}
.leesknop.stuk .lees-icoon{background:rgba(255,120,90,.22);color:#ffb4a2}
@keyframes leeslader{to{transform:rotate(360deg)}}
.lees-tijd{flex:none;font-size:.8rem;font-weight:700;color:#8f89ad;
  font-variant-numeric:tabular-nums}
.lees-voortgang{flex:1;min-width:3rem;height:3px;border-radius:99px;
  background:rgba(255,255,255,.12);overflow:hidden}
.lees-voortgang i{display:block;height:100%;width:0;border-radius:99px;
  background:var(--goud);transition:width .25s linear}

/* Het beeld is de dia. Contain en niet cover, want een klassenfoto mag je niet
   aansnijden; er staan kinderen op de rand. */
.dia-beeld{height:100%;min-height:0;margin:0;display:flex;align-items:center;justify-content:center}
.dia-beeld img{max-width:100%;max-height:100%;object-fit:contain;border-radius:.5rem;
  box-shadow:0 22px 50px rgba(0,0,0,.55);border:1px solid rgba(255,255,255,.10)}
.dia-beeld.dia-leeg{border:1px dashed rgba(233,196,106,.3);border-radius:.6rem;
  background:linear-gradient(180deg,rgba(233,196,106,.06),transparent)}
.dia-kop-groot{font-size:clamp(1.6rem,4vw,3.4rem);font-weight:800;color:var(--goud);
  text-align:center;padding:2rem;line-height:1.15}

/* De tekstkolom loopt mee met de opname: hij schuift zichzelf zo dat de zin
   die klinkt op ooghoogte staat. Er is dus geen scrollbalk nodig, en niemand
   hoeft er met de muis in. Boven en onder lopen de regels weg in het donker,
   zodat je ziet dat er meer is zonder dat het rommelig wordt. */
.dia-band{flex:1;min-height:0;overflow-y:auto;scrollbar-width:none;
  -ms-overflow-style:none;padding:2.5rem 0;
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 8%,#000 92%,transparent 100%);
  mask-image:linear-gradient(180deg,transparent 0,#000 8%,#000 92%,transparent 100%)}
.dia-band::-webkit-scrollbar{display:none}
.dia.tekst-uit .dia-band{display:none}
.dia-tekst{font-size:clamp(1rem,1.5vw,1.75rem);line-height:1.55;color:#d9d4ea}
.dia-tekst p{margin:0 0 .75em}
.dia-tekst p:last-child{margin-bottom:0}
.verhaal-brief{margin:.6em 0 0;padding:.5em 0 .5em .9em;border-left:3px solid var(--goud);
  font-style:italic;color:#efe9ff}
.verhaal-brief p{margin:0 0 .35em}
.verhaal-brief p:last-child{margin-bottom:0}
.verhaal-fout{color:#ffb4a2;font-weight:700;font-size:.95rem;margin-top:.5rem}

.dia-voet{flex:none;display:flex;align-items:center;gap:.7rem;flex-wrap:wrap}
.dia-voet .knop{margin-left:auto}
.dia-stippen{display:flex;gap:.45rem}
.dia-stippen span{width:.55rem;height:.55rem;border-radius:99px;background:rgba(255,255,255,.22)}
.dia-stippen span.nu{background:var(--goud)}

/* ══════════ meelezen, tijdbalk en tijdsprong ══════════ */

/* Tijdens het voorlezen licht de zin op die op dat moment klinkt. De rest
   zakt weg maar blijft leesbaar, zodat een kind dat achterloopt de weg terug
   kan vinden. Leest de leerkracht zelf voor, dan staat alles gewoon aan. */
.dia-tekst .zin{transition:opacity .25s ease,color .25s ease}
.dia-tekst.leest .zin{opacity:.42}
.dia-tekst .zin.nu{opacity:1;color:#fff;background:rgba(233,196,106,.16);
  box-shadow:0 0 0 .18em rgba(233,196,106,.16);border-radius:.18em;
  /* clone: een zin die over twee regels loopt krijgt op elke regel een eigen
     blokje in plaats van één balk die er half omheen valt */
  -webkit-box-decoration-break:clone;box-decoration-break:clone}

/* Dia 1 ligt vijfentwintig jaar terug. Dat staat in geen enkele gesproken zin,
   dus doet het beeld het: warmer en vergeeld tegenover het koele nachtblauw
   van de dia's die vanavond spelen. */
.dia-beeld.beeld-toen img{filter:sepia(.38) saturate(.92) contrast(.97)}
.dia-beeld.beeld-toen img{border-color:rgba(233,196,106,.35)}

/* De tijdbalk in de kop van elke dia: twee punten en een streep ertussen. De
   punt van deze dia licht op, de andere staat uit. */
.tijdbalk{display:flex;align-items:center;gap:.55rem;margin-left:auto;
  font-size:.72rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.tb-punt{color:rgba(255,255,255,.35);white-space:nowrap;
  display:flex;align-items:center;gap:.35rem}
.tb-punt::before{content:"";width:.5rem;height:.5rem;border-radius:99px;
  background:rgba(255,255,255,.25)}
.tb-lijn{width:clamp(1.5rem,4vw,3.5rem);height:2px;background:rgba(255,255,255,.18)}
.tijdbalk.is-toen .tb-toen,.tijdbalk.is-nu .tb-nu{color:var(--goud)}
.tijdbalk.is-toen .tb-toen::before,.tijdbalk.is-nu .tb-nu::before{
  background:var(--goud);box-shadow:0 0 .6rem rgba(233,196,106,.8)}

/* Het tussenbeeld tussen dia 1 en dia 2. Kort, schermvullend en zonder tekst
   die voorgelezen moet worden: de klas ziet in één oogopslag dat het verhaal
   van vroeger naar vanavond springt. */
.tijdsprong{position:fixed;inset:0;z-index:80;display:flex;align-items:center;
  justify-content:center;background:rgba(8,7,20,.96);cursor:pointer;
  animation:tijdsprong-in .35s ease both}
.ts-binnen{text-align:center;color:#fff;padding:2rem}
.ts-balk{display:flex;align-items:center;justify-content:center;gap:1rem;
  font-size:clamp(.8rem,1.6vw,1.1rem);font-weight:800;letter-spacing:.12em;
  text-transform:uppercase;color:rgba(255,255,255,.45)}
.ts-lijn{position:relative;width:clamp(6rem,26vw,22rem);height:3px;
  background:rgba(255,255,255,.16);border-radius:99px;overflow:hidden}
.ts-lijn i{position:absolute;inset:0;background:var(--goud);transform-origin:left;
  animation:tijdsprong-lijn 2.2s cubic-bezier(.6,0,.2,1) .2s both}
.ts-balk .ts-punt:last-child{animation:tijdsprong-aan .01s linear 2.1s both}
.ts-kop{display:block;margin-top:1.6rem;color:var(--goud);
  font-size:clamp(2rem,7vw,5rem);font-weight:800;line-height:1;
  animation:tijdsprong-kop 1s ease .9s both}
.ts-onder{display:block;margin-top:.9rem;color:#c8c2e2;
  font-size:clamp(.9rem,1.6vw,1.15rem);font-weight:600;
  animation:tijdsprong-kop 1s ease 1.5s both}
@keyframes tijdsprong-in{from{opacity:0}to{opacity:1}}
@keyframes tijdsprong-lijn{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes tijdsprong-aan{to{color:var(--goud)}}
@keyframes tijdsprong-kop{from{opacity:0;transform:translateY(.6rem)}
  to{opacity:1;transform:none}}

/* Het bordje van de testversie. Klein en rustig, maar het staat er de hele
   les, ook als de kop is weggeschoven. */
.testbordje{position:fixed;left:.9rem;bottom:.9rem;z-index:90;
  padding:.32rem .7rem;border-radius:99px;pointer-events:none;
  font-size:.7rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  color:#241c04;background:var(--goud);opacity:.85}

/* De ontknoping ligt als eigen scherm over de doorsnede heen, zodat de
   voortgang van de klas eronder blijft staan. */
.dia-overlay{position:fixed;inset:0;z-index:70;background:var(--nacht,#0a0918);
  animation:tijdsprong-in .4s ease both}
.dia-overlay .dia{height:100%}

@media (max-width:900px){
  .dia-lijf{grid-template-columns:minmax(0,1fr);align-items:stretch}
  .dia-lijf.kant-rechts .dia-beeld{order:0}
  .dia.tekst-uit .dia-lijf{grid-template-columns:minmax(0,1fr)}
  .leesknop{justify-content:center}
  .dia-band{padding:1rem 0}
  .tijdbalk{margin-left:0;width:100%}
}

/* ══════════ printpagina op het scherm ══════════
   Alleen de schermweergave van nachtmuseum-print.html. De vellen zelf zijn
   210 mm breed, dus krijgen de kop, de uitleg en de knoppen exact diezelfde
   breedte en hetzelfde midden. Daardoor staat alles op één lijn in plaats van
   losse blokken linksboven met gecentreerde vellen eronder.
   Alles in dit blok verdwijnt bij het printen; zie het @media print-blok. */
.printpagina{background:var(--hs-bg);padding-bottom:3.5rem}
.printbreedte{width:min(210mm,100% - 2rem);margin:0 auto}
.printpagina-kop{background:var(--nacht);color:#fff;padding:1.5rem 0 1.75rem;margin-bottom:2.25rem}
.printpagina-kop .terug{display:inline-block;font-size:.85rem;font-weight:700;color:#a9a2cc;
  text-decoration:none;margin-bottom:.85rem}
.printpagina-kop .terug:hover{color:var(--goud)}
.printpagina-kop h1{font-size:1.7rem;font-weight:800;line-height:1.2;margin-bottom:.6rem}
.printpagina-kop h1 span{color:var(--goud)}
.printuitleg{font-size:.9rem;font-weight:500;line-height:1.65;color:#c5c0dc;margin-bottom:1.35rem}
.printuitleg b{color:#fff;font-weight:800}
.printpagina-kop .printknoppen{margin-bottom:0}
/* De kop van de printpagina staat op de museumwand, dus daar zijn de knoppen
   goud in plaats van het groen van de site. Op het antwoordblad van het bord,
   dat op wit staat, blijven ze wel groen; vandaar dat dit gescopet is. */
.printpagina-kop .printknoppen button{
  background:linear-gradient(160deg,#f0d183 0%,#d4a93f 52%,#b98c25 100%);color:#241c04}
.printpagina-kop .printknoppen button:hover{filter:brightness(1.08)}
.printpagina-kop .printknoppen .grijs{background:rgba(255,255,255,.14);color:#fff}
.printpagina-kop .printknoppen .grijs:hover{background:rgba(255,255,255,.24)}

/* Kopje boven elke stapel vellen, zodat je ziet wat je voor je hebt. */
.doc-label{display:flex;align-items:baseline;gap:.6rem;flex-wrap:wrap;
  margin:0 0 .9rem;font-size:1.05rem;font-weight:800;color:var(--hs-text)}
.doc-label::before{content:"";width:.55rem;height:.55rem;border-radius:99px;background:var(--hs-green)}
.doc-label span{font-size:.85rem;font-weight:600;color:#8b93a1}
.doc{margin-bottom:2.5rem}
/* Op een smal scherm past 210 mm niet. De vellen krimpen dan als geheel mee,
   zodat de verhoudingen kloppen en de pagina niet zijwaarts gaat schuiven.
   --velzoom wordt door de printpagina zelf gezet en is standaard 1. */
.printpagina .doc{zoom:var(--velzoom,1)}

/* ══════════ printvellen ══════════
   Zelfde aanpak als het Code Rood-printpakket: het vel is exact 210 bij 297 mm
   en draagt zijn eigen marge van 12 mm, en @page zet de printermarge op nul.
   Wat je op het scherm ziet, komt daardoor precies zo uit de printer. */
.vel,.codeblad{width:210mm;max-width:100%;min-height:297mm;background:#fff;color:#111;padding:12mm;
  margin:0 auto 2rem;box-shadow:0 10px 30px rgba(0,0,0,.12);page-break-after:always}
.vel{font-size:11pt}
.vel-kop{display:flex;align-items:baseline;gap:3mm;border-bottom:2.5px solid #111;padding-bottom:3mm;margin-bottom:5mm}
.vel-kop h1{font-size:19pt;font-weight:800;letter-spacing:-.01em}
.vel-kop span{margin-left:auto;font-size:10pt;font-weight:800;color:#111;border:2px solid #111;border-radius:99px;
  padding:1mm 4mm;white-space:nowrap}
.vel-kolommen{display:grid;grid-template-columns:1fr 1fr;gap:7mm;align-items:start}
.vel-blok{border:2px solid #111;border-radius:3.5mm;padding:4mm;margin-bottom:6mm}
.vel-blok > h2{font-size:14pt;font-weight:800;margin-bottom:3mm;padding-bottom:1.5mm;border-bottom:1.5px solid #111}
.vel-kaart{border:1px solid #888;border-radius:2.5mm;padding:3mm;margin-bottom:3.5mm}
.vel-kaart:last-child{margin-bottom:0}
.vel-kaart h3{font-size:10pt;text-transform:uppercase;letter-spacing:.06em;font-weight:800;margin-bottom:2mm;color:#222}
.vel table{width:100%;border-collapse:collapse;font-size:10pt}
.vel td,.vel th{border-bottom:.5px solid #bbb;padding:1mm 1.5mm;text-align:left}
.vel th{font-weight:800;font-size:9pt;text-transform:uppercase;color:#333}
.vel-voet{margin-top:4mm;border-top:1px solid #999;padding-top:2mm;font-size:9pt;color:#444;font-weight:700}
.namen{columns:2;column-gap:5mm;font-size:10pt;line-height:1.6}
.namen span{display:block;break-inside:avoid}
.symrij{display:flex;flex-wrap:wrap;gap:2mm}
.symrij div{border:1px solid #888;border-radius:2mm;padding:1mm 2mm;font-size:9pt;font-weight:700;text-align:center;min-width:19mm}
.symrij div b{display:block;font-size:17pt;line-height:1.1}
.symrij.klein div{min-width:14mm;padding:1mm 1.5mm;font-size:9.5pt}
.symrij.klein div b{font-size:15pt}
.velzoeker{display:grid;grid-template-columns:repeat(7,1fr);gap:.8mm;max-width:54mm}
.velzoeker span{border:.5px solid #999;text-align:center;font-size:11.5pt;font-weight:800;padding:.6mm 0}
.sommen-vel{font-size:16pt;line-height:1.65;font-weight:700}
.vel svg{width:100%;height:auto}
.lijntjes{height:12mm;background:repeating-linear-gradient(#fff 0 6mm,#bbb 6mm 6.3mm)}

/* codeblad: één pagina per groepje, met de eigen teamnaam er al op */
.codeblad h1{font-size:20pt;font-weight:800}
.codeblad .kop{display:flex;align-items:center;gap:4mm;border-bottom:2.5px solid #111;padding-bottom:3mm;margin-bottom:4mm}
.codeblad .teamnaam{margin-left:auto;display:flex;align-items:center;gap:2.5mm;border:2.5px solid #111;
  border-radius:99px;padding:1.5mm 5mm;font-size:13pt;font-weight:800;white-space:nowrap}
.codeblad .teamnaam span{font-size:20pt;line-height:1}
.codeblad .regel{font-size:10.5pt;color:#333;margin-bottom:6mm;font-weight:600}
.codeblad .lijn{display:inline-block;width:38mm;border-bottom:1.5px solid #111;margin:0 1mm}
.codeblad h2{font-size:13pt;font-weight:800;margin-bottom:2mm}
.codeblad .ruimte-vak{border:2px solid #111;border-radius:3.5mm;padding:4mm;margin-bottom:5mm}
.codeblad .vakjes{display:flex;gap:3mm;margin:0 0 3mm}
.codeblad .vakjes div{width:18mm;height:22mm;border:2px solid #111;border-radius:3mm;position:relative}
.codeblad .vakjes div.breed{width:30mm}
.codeblad .vakjes div.woord{width:46mm}
.codeblad .vakjes div b{position:absolute;top:1mm;left:2mm;font-size:8pt;color:#777;font-weight:800}
.codeblad .vragen{font-size:9pt;color:#444;line-height:1.5}
.codeblad .vragen b{color:#111}

.printknoppen{display:flex;gap:.75rem;margin-bottom:1.5rem;flex-wrap:wrap}
.printknoppen button,.printknoppen a{background:var(--hs-green);color:#fff;border-radius:999px;padding:.7rem 1.4rem;
  font-weight:800;text-decoration:none;display:inline-block}
.printknoppen .grijs{background:#e5e1d8;color:#2c2c2c}

@media print{
  @page{size:A4 portrait;margin:0}
  body{background:#fff !important;padding:0 !important}
  .printknoppen,.printuitleg,.printpagina-kop,.doc-label{display:none !important}
  /* het scherm mag krimpen, het papier nooit */
  .printpagina{padding:0 !important}
  .printbreedte{width:auto !important;margin:0 !important}
  .printpagina .doc{zoom:1 !important}
  .doc{margin-bottom:0}
  body[data-print="vel"]      .doc:not(.doc-vel){display:none !important}
  body[data-print="codeblad"] .doc:not(.doc-codeblad){display:none !important}
  /* vaste paginahoogte, zodat één vel nooit doorloopt naar een tweede blad */
  .doc .vel,.doc .codeblad{width:210mm;height:297mm;min-height:297mm;overflow:hidden;
    margin:0;box-shadow:none;page-break-after:always}
  .doc > :last-child{page-break-after:auto}
  .velzoeker span,.symrij div,.vel-blok,.vel-kaart,.codeblad .vakjes div{print-color-adjust:exact;-webkit-print-color-adjust:exact}

  /* het antwoordblad op het digibord: de donkere bordlaag eruit, de overlay
     als gewone pagina laten doorlopen */
  body[data-print="antwoord"]{height:auto !important;overflow:visible !important;background:#fff !important;color:#111 !important}
  body[data-print="antwoord"] .bordapp,
  body[data-print="antwoord"] #gebeurtenis,
  body[data-print="antwoord"] #pauze{display:none !important}
  body[data-print="antwoord"] #antwoordblad{position:static !important;overflow:visible !important;padding:0 !important}
  body[data-print="antwoord"] #antwoordblad .codeblad{width:auto;min-height:0;height:auto;padding:0;
    margin:0;box-shadow:none;page-break-after:auto}
  body[data-print="antwoord"] #antwoordblad .printknoppen{display:none !important}
}

/* Handleiding voor de leerkracht op de startpagina. Staat bewust vóór de drie
   genummerde stappen: eerst lezen, dan printen. */
.handleiding{display:block;margin:0 0 1.25rem;padding:1.1rem 1.35rem;text-decoration:none;color:inherit;
  border:2px solid var(--goud);border-radius:1.25rem;background:rgba(255,203,91,.10);transition:.2s}
.handleiding:hover{background:rgba(255,203,91,.18);transform:translateY(-2px)}
.handleiding b{display:block;font-size:1.05rem;font-weight:800;margin-bottom:.2rem}
.handleiding span{display:block;font-size:.85rem;color:#6b7280;font-weight:500;line-height:1.5}