/* Escape v1 (Mijn Leerplein): klok, tijdstraf, hulpknoppen, hulpkaart en intro. Versie 1.1.0, 9 oktober 2026.
   Hoort bij escape-v1.js. Het spel bepaalt zelf waar het hulppaneel staat (positie, breedte). */
.esc-klok { display: inline-flex; align-items: center; gap: 5px; color: #fff; font-weight: 700; background: rgba(10, 16, 30, .78); padding: 5px 11px; border-radius: 12px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.esc-klok svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
.esc-straf { color: #fff; font-weight: 700; background: #c92a2a; padding: 5px 10px; border-radius: 12px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.esc-straf.esc-net { animation: escPop .7s ease-out; }
@keyframes escPop { 0% { transform: scale(1); } 35% { transform: scale(1.35); box-shadow: 0 0 0 6px rgba(201, 42, 42, .35); } 100% { transform: scale(1); } }

.esc-knop { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; }
.esc-knop small { font-weight: 700; font-size: 14px; color: #c92a2a; }
.esc-knop svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.esc-hint1 { background: #fff4d6; border-color: #f3c55b; }
.esc-hint2 { background: #fff0f0; border-color: #e8a3a3; }
.esc-knipper { animation: escKnipper .5s 4 alternate; }
@keyframes escKnipper { to { box-shadow: 0 0 0 6px rgba(245, 184, 46, .7); transform: scale(1.05); } }

.esc-kaart { display: grid; grid-template-columns: 80px 1fr; gap: 8px; background: #fff; border: 3px solid #f3d29b; border-radius: 20px; padding: 12px; box-shadow: 0 16px 40px rgba(0, 0, 0, .4); max-height: calc(100dvh - 100px); overflow: auto; }
.esc-robot { width: 80px; align-self: start; }
.esc-tekst h3 { margin: 0 0 4px; color: #9a6200; }
.esc-tekst ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.esc-tekst li { background: #fff7e6; border-radius: 12px; padding: 6px 10px; line-height: 1.35; }
.esc-tekst li.esc-antwoord { background: #ebfbee; border: 2px solid #8ce99a; }
.esc-label { display: block; font-weight: 700; font-size: 13px; color: #9a6200; text-transform: uppercase; letter-spacing: .04em; }
.esc-antwoord .esc-label { color: #2b8a3e; }
.esc-prijs { margin: 4px 0; font-size: 18px; }
.esc-prijs b { color: #c92a2a; }
.esc-aftel { margin: 6px 0; text-align: center; }
.esc-aftel span { display: inline-grid; place-items: center; width: 74px; height: 74px; border-radius: 50%; background: #f5b82e; color: #3b2600; font-size: 42px; font-weight: 700; animation: escTel 1s ease-out infinite; }
@keyframes escTel { 0% { transform: scale(1.18); } 100% { transform: scale(1); } }
.esc-naam { display: grid; gap: 4px; margin: 8px 0 2px; font-weight: 700; }
.esc-naam input { font: inherit; font-size: 20px; padding: 8px 12px; border: 3px solid #ced4da; border-radius: 12px; min-height: 44px; }
.esc-naam input:focus { outline: none; border-color: #f5b82e; }
.esc-knoppen { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; margin-top: 10px; }
.esc-knoppen .mlp-knop[disabled] { opacity: .45; cursor: not-allowed; }

.esc-intro-kop { display: flex; align-items: center; gap: 12px; margin-bottom: 6px; }
.esc-intro-kop h2 { margin: 0; }
.esc-nr { font-weight: 700; color: #9a6200; white-space: nowrap; }
.esc-opdracht { font-size: 20px; line-height: 1.4; margin: 4px 0 10px; }
.esc-regels { list-style: none; padding: 0; margin: 8px 0; display: grid; gap: 6px; }
.esc-regels li { display: flex; align-items: center; gap: 10px; }
.esc-regels .esc-rn { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; color: #fff; font-weight: 700; flex: none; }
.esc-r1 { background: #2f9e44; } .esc-r2 { background: #f08c00; } .esc-r3 { background: #c92a2a; }
.esc-intro .esc-knoppen { justify-content: center; }

.esc-tijden { border-collapse: collapse; margin: 8px 0; font-size: 19px; font-variant-numeric: tabular-nums; }
.esc-tijden th { text-align: left; font-weight: 400; padding: 3px 18px 3px 0; }
.esc-tijden td { font-weight: 700; text-align: right; padding: 3px 0; }
.esc-tijden .esc-eind th, .esc-tijden .esc-eind td { border-top: 2px solid currentColor; padding-top: 6px; font-weight: 700; font-size: 23px; }
.esc-tijden small { font-size: 14px; color: #2b8a3e; display: block; }
.esc-team { font-size: 19px; margin: 6px 0; }
.esc-kort { display: block; font-size: 22px; margin: 2px 0 6px; }
.esc-kort b { display: inline-block; background: #2b8a3e; color: #fff; border-radius: 10px; padding: 1px 12px; letter-spacing: .04em; }