/* ============================================================
   verbeterd/_shared.css  ·  Ronde 2 doorgevoerd
   Wordt geladen NA de eigen <style>-block van iedere subpagina.

   v1: 44px tikdoelen + voorleesknop + groep-hint
   v2: topbar nowrap (F1) + .ss-dimmed (F2) + prog-toggle nowrap (QW B)
============================================================ */

/* ============ v1: Tikdoelen ≥ 44px ============ */
.btn-back,
.chip,
.chip-btn,
.diff,
.help-btn,
.help-mode-btn,
.mode-card .go,
.level-card .lv-start,
.slim-diff-start{
  min-height:44px !important;
  font-size:15px !important;
  padding:11px 16px !important;
}
.btn{ min-height:48px !important }
.btn-back{ font-size:15px !important; padding:10px 16px !important }
.chip{ padding:10px 14px !important; font-size:15px !important }
.mode-card .go{ font-size:15px !important; padding:11px 18px !important; min-height:44px !important }
body{ font-size:16px !important }
.hero p, .lead, .page-intro{ font-size:16.5px !important }

button:focus-visible, a:focus-visible{
  outline:3px solid #4dabf7 !important;
  outline-offset:3px !important;
  border-radius:8px;
}

/* ============ v2.F1: Topbar mag NIETS afbreken ============ */
.brand,
.brand span,
.ss-read-btn,
.chip,
.chip-btn{
  white-space:nowrap !important;
  flex-shrink:0 !important;
}
/* Topbar mag wrappen tussen brand en chips, maar binnen elk niet */
.topbar{ flex-wrap:wrap !important; gap:10px !important; row-gap:10px !important }
.score-chips{ flex-wrap:wrap !important; gap:8px !important }

/* Op smaller scherm: chips compacter zodat ze passen */
@media (max-width:640px){
  .chip:not(.profile):not(.stars):not(.streak) .ico + span{ font-size:13px !important }
  .chip.profile span:not(.ico){ max-width:80px;overflow:hidden;text-overflow:ellipsis }
}
@media (max-width:480px){
  .ss-read-btn .lbl{ display:none !important }
  .ss-read-btn{ padding:11px 14px !important; min-width:44px;justify-content:center }
}

/* ============ v1: 🔊 Voorleesknop ============ */
.ss-read-btn{
  display:inline-flex;align-items:center;gap:8px;
  background:#4dabf7;color:#fff;
  padding:11px 16px;border-radius:999px;
  font-family:inherit;font-size:15px;font-weight:700;
  border:none;cursor:pointer;min-height:44px;
  box-shadow:0 3px 0 #2f8dde;
  transition:background .12s,transform .1s;
  -webkit-tap-highlight-color:transparent;
}
.ss-read-btn:hover{ background:#2f8dde }
.ss-read-btn:active{ transform:translateY(2px);box-shadow:0 1px 0 #2f8dde }
.ss-read-btn.is-playing{ background:#ff6b6b;box-shadow:0 3px 0 #d94545 }
.ss-read-btn .ico{ font-size:17px;line-height:1 }

/* ============ v1: Groep-hint ============ */
.ss-group-hint{
  display:inline-flex;align-items:center;gap:8px;
  background:#e8f4ff;color:#1a6baa;
  padding:8px 14px;border-radius:999px;
  font-family:inherit;font-size:13.5px;font-weight:700;
  margin:0 0 16px;
  border:1.5px solid #b8d6f5;
  max-width:fit-content;
  white-space:nowrap;
}
.ss-group-hint .ico{ font-size:14px }
.ss-group-hint .x{
  background:transparent;border:none;color:inherit;
  font-weight:700;cursor:pointer;padding:4px 6px;margin-left:2px;
  font-size:15px;border-radius:6px;
}
.ss-group-hint .x:hover{ background:rgba(26,107,170,.12) }

/* ============ v1: Reading highlight ============ */
.ss-reading{
  background:#fff48a !important;
  box-shadow:0 0 0 4px #fff48a, 0 0 0 6px #f0a72b !important;
  border-radius:8px;
  transition:background .15s, box-shadow .15s;
}

/* ============ v2.F2: Buiten-leeftijd kaarten dimmen ============ */
.ss-dimmed{
  opacity:.42 !important;
  position:relative;
}
.ss-dimmed::after{
  content:"voor later";
  position:absolute;top:10px;right:10px;
  background:#fff;color:#5b6385;
  font-family:inherit;font-size:11px;font-weight:700;
  padding:3px 9px;border-radius:999px;
  border:1.5px solid #d8dbe8;
  letter-spacing:.02em;
  pointer-events:none;
  z-index:2;
}
.ss-dimmed:hover{ opacity:.68 !important }

/* ============ v2.QW B: prog-toggle mag niet wrappen ============ */
.prog-toggle{
  white-space:nowrap !important;
  flex-shrink:0 !important;
}

/* ============ v2.F5: Floating decorations dempen ============ */
/* Verwijder alle decoraties behalve de eerste; minder visuele ruis */
.tile-deco:nth-of-type(n+2),
.math-deco:nth-of-type(n+2){
  display:none !important;
}
.tile-deco, .math-deco{
  opacity:.22 !important;
}

/* ============ v3: Footer-tools (reset op alle pagina's) ============ */
.ss-footer-tools{
  display:flex;flex-wrap:wrap;gap:14px;align-items:center;
  margin-top:16px;font-size:13px;color:#7a8aae;font-weight:600;
}
.ss-footer-tools .sep{opacity:.4}
.ss-footer-tool-btn{
  background:none;border:none;color:#a8b5d1;
  font-family:inherit;font-size:13px;font-weight:600;
  cursor:pointer;padding:6px 0;
  text-decoration:underline;text-decoration-color:rgba(168,181,209,.4);
  text-underline-offset:3px;
  transition:color .12s,text-decoration-color .12s;
}
.ss-footer-tool-btn:hover{color:#fff;text-decoration-color:#fff}

/* Reset confirm modal — eigen markup zodat subpagina's hem ook hebben */
.ss-modal-bg{
  position:fixed;inset:0;background:rgba(20,28,55,.55);
  display:none;align-items:center;justify-content:center;
  z-index:300;padding:20px;
}
.ss-modal-bg.show{display:flex;animation:ssFade .2s ease both}
@keyframes ssFade{from{opacity:0}to{opacity:1}}
.ss-modal{
  background:#fff;border-radius:20px;
  box-shadow:0 8px 40px rgba(31,42,77,.22);
  padding:28px 26px 22px;max-width:420px;width:100%;text-align:center;
  font-family:'Fredoka',system-ui,sans-serif;color:#1f2a4d;
  animation:ssPop .25s cubic-bezier(.2,1.5,.4,1) both;
}
@keyframes ssPop{from{transform:scale(.92);opacity:0}to{transform:none;opacity:1}}
.ss-modal-emoji{font-size:46px;margin-bottom:8px;display:block}
.ss-modal h2{font-size:22px;font-weight:700;margin-bottom:6px;color:#1f2a4d}
.ss-modal p{font-size:15px;color:#5b6385;font-weight:600;margin-bottom:18px;line-height:1.5}
.ss-modal-btn-row{display:flex;gap:10px;margin-top:6px}
.ss-modal-btn{
  flex:1;padding:14px;border-radius:14px;
  font-family:inherit;font-size:16px;font-weight:700;
  cursor:pointer;border:none;min-height:48px;
  transition:transform .1s,background .12s;
}
.ss-modal-btn:active{transform:translateY(2px)}
.ss-modal-btn.ss-prim{background:#e94f4f;color:#fff;box-shadow:0 3px 0 #b83030}
.ss-modal-btn.ss-prim:hover{background:#d94545}
.ss-modal-btn.ss-skip{background:#fff5e6;color:#5b6385;border:1.5px solid #ffe9c7}
.ss-modal-btn.ss-skip:hover{background:#ffe9c7}