/* klok.css - Klokkijken (aanvulling op spel.css) */
#worlds .lvls { grid-template-columns: repeat(7, 1fr); }
.lvl .t { font-size: clamp(12px, 1.4vw, 16px); }
.kleine { color: #3fb8ff; }
.grote { color: #ff7b8c; }
.panel .kleine, .panel .grote { text-shadow: 0 2px 0 var(--line); }

.lcd { display: inline-block; font-family: var(--pixel); font-weight: 400; font-size: .8em; letter-spacing: 2px; color: #7dffa1; background: #0d1a14; border: 3px solid var(--line); border-radius: 8px; padding: .25em .45em .2em; box-shadow: inset 0 0 12px rgba(125,255,161,.25); text-shadow: 0 0 6px rgba(125,255,161,.6); vertical-align: middle; }

.klokveld { display: grid; grid-template-columns: minmax(0, 480px) 1fr; border: 3px solid var(--line); border-top: 0; border-radius: 0 0 14px 14px; overflow: hidden; box-shadow: 0 5px 0 var(--line); background: var(--panel); }
.stage--klok { border: 0; }
.stage--klok #cv { touch-action: none; cursor: grab; }
.stage--klok #cv:active { cursor: grabbing; }
.klokpaneel { padding: 18px; display: flex; flex-direction: column; justify-content: center; gap: 14px; }
.klokpaneel .tip { margin: 0; color: var(--muted); font-size: 16px; }
.stappen { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.stappen .knop { font-size: 16px; padding: 8px 6px; }
.klaarknop { align-self: stretch; }

.optie--digi { text-align: center; padding-left: 14px; }
.optie--digi .lcd { font-size: 20px; }

@media (max-width: 820px) {
  .klokveld { grid-template-columns: 1fr; }
  .stage--klok { max-width: 480px; width: 100%; margin: 0 auto; }
  .klokpaneel { padding: 12px; }
}
@media (max-width: 520px) {
  #worlds .lvls { grid-template-columns: repeat(4, 1fr); }
}