/* Middenstip — gedeelde meldingen- en doorstuurkaart (Album '86).
   Wordt geladen door de startpagina en alle spellen; alles zit onder .ms-kaart. */
.ms-kaart{margin:22px 0 0; border:2px solid #171310; background:#fff; padding:3px; color:#171310;
  font-family:"Archivo Narrow","Arial Narrow",Arial,sans-serif; text-align:left}
.ms-kaart *{box-sizing:border-box}
.ms-kop{background:#171310; color:#fff; font-family:Bevan,Georgia,serif; font-weight:400; font-size:16px; line-height:1.2;
  padding:7px 10px; display:flex; align-items:center; justify-content:space-between; gap:10px}
.ms-in{border:1px solid #171310; border-top:0; padding:11px 12px 12px}
.ms-in p{margin:0 0 9px; font-size:15.5px; line-height:1.4}
.ms-in p.ms-klein{font-size:14px; color:#6F6353}
.ms-in p:last-child{margin-bottom:0}
.ms-rij{display:flex; flex-wrap:wrap; align-items:center; gap:8px}
.ms-uren{display:flex; align-items:center; gap:6px; margin:0 0 10px; flex-wrap:wrap}
.ms-uren b{font-size:14.5px; margin-right:2px}
.ms-uur{min-width:50px; padding:6px 8px; border:1px solid #171310; background:#FBF4E4; color:#171310;
  font-family:Bevan,Georgia,serif; font-size:15px; line-height:1; cursor:pointer}
.ms-uur[aria-pressed="true"]{background:#171310; color:#fff}
.ms-knop{min-height:42px; padding:0 14px; border:1px solid #171310; background:#fff; color:#171310; cursor:pointer;
  font-family:inherit; font-weight:700; font-size:15px; box-shadow:2px 2px 0 rgba(23,19,16,.18)}
.ms-knop.ms-vol{background:#E9544C; color:#fff}
.ms-knop.ms-vol:hover{background:#C8403A}
.ms-knop:disabled{opacity:.55; cursor:default}
.ms-knop:active{transform:translate(1px,1px); box-shadow:1px 1px 0 rgba(23,19,16,.18)}
.ms-link{background:none; border:0; padding:0; font:inherit; font-size:14.5px; color:#171310; text-decoration:underline;
  text-underline-offset:2px; cursor:pointer}
.ms-kop .ms-link{color:#fff; font-family:"Archivo Narrow",Arial,sans-serif; font-size:13px; font-weight:600; opacity:.85}
.ms-aan{display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 10px; font-size:15.5px; margin:0 0 10px}
.ms-aan strong{color:#245F3E}
.ms-stappen{margin:0 0 4px; padding:0; list-style:none; counter-reset:ms}
.ms-stappen li{counter-increment:ms; display:flex; gap:9px; align-items:baseline; font-size:15.5px; line-height:1.4; padding:3px 0}
.ms-stappen li::before{content:counter(ms); flex:none; width:22px; height:22px; display:grid; place-items:center;
  background:#171310; color:#fff; font-family:Bevan,Georgia,serif; font-size:12px; transform:translateY(2px)}
.ms-ico{display:inline-block; width:19px; height:19px; vertical-align:-3px; margin:0 2px}
.ms-fout{color:#A3271F; font-size:14px; margin-top:8px}
.ms-ok{font-size:14px; color:#245F3E; font-weight:700}
.ms-kaart :focus-visible{outline:3px solid #F5C518; outline-offset:2px}

/* --- de thuisknop, vooraan in de balk van elke pagina ------------------------
   Het groene Middenstip-icoon: in een spel een link naar alle spellen, met een pijltje;
   op de startpagina zelf alleen het icoon. */
.ms-thuis{display:inline-flex; align-items:center; gap:3px; flex:none; text-decoration:none; color:#fff; line-height:1}
.ms-thuis .ms-terug{font-family:Bevan,Georgia,serif; font-size:22px; margin-top:-2px; text-shadow:1px 1px 0 rgba(0,0,0,.25)}
.ms-thuis svg{display:block; width:30px; height:30px; border:1px solid #171310; box-shadow:2px 2px 0 rgba(0,0,0,.2)}
a.ms-thuis:hover svg{transform:translate(-1px,-1px); box-shadow:3px 3px 0 rgba(0,0,0,.22)}
a.ms-thuis:focus-visible{outline:3px solid #F5C518; outline-offset:2px}

/* --- de balk op smalle gsm's: thuisknop + merk + drie tellers moeten passen --- */
@media (max-width:400px){
  .bar{gap:6px !important}
  .bar .mark{font-size:15px !important; padding:5px 7px 4px !important}
  .bar .stat{min-width:0 !important; padding:4px 5px 3px !important}
  .bar .stat b{font-size:15px !important}
  .bar .stat small{font-size:7.5px !important; letter-spacing:.06em !important}
  .ms-thuis svg{width:27px; height:27px}
  .ms-thuis .ms-terug{font-size:19px}
}
@media (max-width:340px){ .ms-thuis .ms-terug{display:none} .bar .mark{font-size:14px !important} }