/* Telefoonschermen. Alles is groot, dik omlijnd en indrukbaar, zodat een kind
   van vier meteen ziet wat een knop is. */

.screen {
  max-width: 480px;
  margin: 0 auto;
  padding: 16px 16px 32px;
  animation: pop-in 0.32s ease-out both;
}

.logo {
  text-align: center;
  font-size: 46px;
  margin: 26px 0 22px;
  color: var(--gold);
  text-shadow: var(--outline);
  animation: wiggle 3.4s ease-in-out infinite;
}

.big-label {
  display: block;
  font-family: var(--font-display);
  font-size: 23px;
  font-weight: 800;
  margin-bottom: 12px;
}

input[type="text"] {
  width: 100%;
  font-family: var(--font-body);
  font-size: 25px;
  font-weight: 700;
  color: #fff;
  padding: 15px;
  background: #10204f;
  border: var(--line) solid var(--ink);
  border-radius: var(--radius-sm);
  box-shadow: inset 0 3px 0 rgba(0, 0, 0, 0.35);
  margin-bottom: 14px;
}
input[type="text"]::placeholder { color: rgba(255, 255, 255, 0.45); }
input[type="text"]:focus {
  outline: none;
  background: #0d1b45;
  box-shadow: inset 0 3px 0 rgba(0, 0, 0, 0.35), 0 0 0 4px var(--yellow);
}

.error {
  background: #4a1220;
  border: 3px solid #ff5a63;
  border-radius: var(--radius-sm);
  color: #ffc9ce;
  font-size: 18px;
  font-weight: 800;
  padding: 10px 12px;
  margin-bottom: 14px;
}

.center { text-align: center; }
.big-emoji {
  font-size: 76px;
  margin: 10px 0;
  animation: bob 2.1s ease-in-out infinite;
}
.result {
  display: inline-block;
  background: var(--yellow);
  border: 3px solid var(--ink);
  border-radius: var(--radius-sm);
  box-shadow: var(--sticker-sm);
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 800;
  padding: 8px 16px;
  margin-top: 16px;
  transform: rotate(-1.5deg);
}
.small { font-size: 16px; color: var(--muted); margin-top: 14px; }

#screen-wait h2 { font-size: 25px; }

.choice-icon {
  font-size: 58px;
  text-align: center;
  margin-bottom: 4px;
  animation: bob 2.4s ease-in-out infinite;
}
.choice-help {
  color: var(--muted);
  font-size: 17px;
  line-height: 1.45;
  margin: 8px 0 18px;
}

/* --- keuzeknoppen met namen (wie heeft dit getekend?) --- */
.name-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.name-option {
  min-height: 64px;
  border: var(--line) solid var(--ink);
  border-radius: var(--radius-sm);
  background: linear-gradient(180deg, #3d63bd 0%, var(--soft) 55%, #23407f 100%);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.22), 0 5px 0 0 var(--ink);
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.3);
  color: #fff;
  font-family: var(--font-display);
  font-size: 21px;
  font-weight: 800;
  padding: 10px;
  cursor: pointer;
  transition: transform 0.08s, box-shadow 0.08s;
}
.name-option:active {
  background: var(--soft-dark);
  transform: translateY(4px);
  box-shadow: 0 1px 0 0 var(--ink);
}
.name-option:disabled, .vote-option:disabled {
  opacity: 0.5;
  box-shadow: none;
  transform: none;
}

/* --- tekenen --- */
.prompt-bar {
  background: var(--card);
  border: var(--line) solid var(--ink);
  border-radius: var(--radius-sm);
  box-shadow: var(--sticker-sm);
  padding: 10px 14px;
  margin-bottom: 14px;
  text-align: center;
}
.prompt-label {
  display: block;
  font-size: 15px;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 1px;
}
.prompt-text {
  font-family: var(--font-display);
  font-size: 25px;
  font-weight: 800;
  color: var(--accent);
}

#draw-canvas {
  width: 100%;
  background: #fff;
  border: var(--line) solid var(--ink);
  border-radius: var(--radius-sm);
  box-shadow: var(--sticker);
  touch-action: none;
  display: block;
}

.draw-tools { margin-top: 16px; }

.color-row {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin-bottom: 12px;
}
.color-swatch {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 3px solid var(--ink);
  box-shadow: 0 3px 0 0 var(--ink);
  cursor: pointer;
  flex-shrink: 0;
  transition: transform 0.1s;
}
/* De gekozen kleur springt eruit met een gele ring, ook zichtbaar voor wie
   kleuren moeilijk onderscheidt. */
.color-swatch.active {
  transform: scale(1.18) translateY(-2px);
  box-shadow: 0 0 0 4px var(--yellow), 0 4px 0 0 var(--ink);
}
.color-swatch.eraser {
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
}

.tool-row {
  display: flex;
  gap: 10px;
  margin-bottom: 14px;
}
.tool-btn {
  flex: 1;
  min-height: 56px;
  font-family: var(--font-display);
  font-size: 18px;
  white-space: nowrap;
  font-weight: 800;
  color: #fff;
  border: var(--line) solid var(--ink);
  border-radius: var(--radius-sm);
  background: linear-gradient(180deg, #3d63bd 0%, var(--soft) 55%, #23407f 100%);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.22), 0 5px 0 0 var(--ink);
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.3);
  cursor: pointer;
  transition: transform 0.08s, box-shadow 0.08s;
}
.tool-btn:active {
  background: var(--soft-dark);
  transform: translateY(4px);
  box-shadow: 0 1px 0 0 var(--ink);
}

/* --- stemmen --- */
.vote-option {
  display: flex;
  align-items: center;
  gap: 13px;
  width: 100%;
  min-height: 68px;
  border: var(--line) solid var(--ink);
  border-radius: var(--radius-sm);
  color: #fff;
  font-family: var(--font-display);
  font-size: 21px;
  font-weight: 800;
  padding: 12px 16px;
  margin-bottom: 12px;
  cursor: pointer;
  text-align: left;
  /* Donkere tekstschaduw: wit blijft leesbaar, ook op geel of oranje. */
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.28);
  box-shadow:
    inset 0 3px 0 rgba(255, 255, 255, 0.32),
    inset 0 -4px 0 rgba(0, 0, 0, 0.2),
    0 5px 0 0 var(--ink);
  transition: transform 0.08s, box-shadow 0.08s;
  animation: pop-in 0.3s ease-out both;
}
.vote-option:nth-child(2) { animation-delay: 0.06s; }
.vote-option:nth-child(3) { animation-delay: 0.12s; }
.vote-option:nth-child(4) { animation-delay: 0.18s; }
.vote-option:nth-child(5) { animation-delay: 0.24s; }
.vote-option:nth-child(6) { animation-delay: 0.3s; }
.vote-option:nth-child(7) { animation-delay: 0.36s; }
.vote-option:nth-child(8) { animation-delay: 0.42s; }
.vote-option:active {
  filter: brightness(0.94);
  transform: translateY(4px);
  box-shadow: 0 1px 0 0 var(--ink);
}
.vote-letter {
  background: rgba(255, 255, 255, 0.32);
  border: 2px solid rgba(0, 0, 0, 0.22);
  border-radius: 11px;
  min-width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 23px;
  flex-shrink: 0;
}
.favorite-option {
  outline: 3px dashed rgba(255, 255, 255, 0.85);
  outline-offset: -8px;
}

.icon-row {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 8px;
  margin-bottom: 16px;
}
.icon-keuze {
  aspect-ratio: 1;
  font-size: 26px;
  border: 3px solid var(--ink);
  border-radius: var(--radius-sm);
  background: linear-gradient(180deg, #3d63bd 0%, var(--soft) 55%, #23407f 100%);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.2), 0 3px 0 0 var(--ink);
  cursor: pointer;
}
.icon-keuze.active {
  background: var(--yellow);
  box-shadow: 0 0 0 4px var(--yellow-hi), 0 3px 0 0 var(--ink);
  transform: translateY(-2px);
}
#pin-input {
  letter-spacing: 14px;
  text-align: center;
  font-size: 34px;
  font-family: var(--font-display);
}

/* Zelfportret: zelfde canvas-uitstraling als het tekenscherm. */
#avatar-canvas {
  width: 100%;
  background: #fff;
  border: var(--line) solid var(--ink);
  border-radius: var(--radius-sm);
  box-shadow: var(--sticker);
  touch-action: none;
  display: block;
}
#avatar-skip-btn { margin-top: 10px; }

/* Iemand overslaan die te lang wegblijft — bewust klein en onopvallend. */
.skip-list { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
.skip-btn {
  min-height: 46px;
  border: 3px solid var(--ink);
  border-radius: var(--radius-sm);
  background: #24428c;
  color: var(--muted);
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 800;
  cursor: pointer;
}
.skip-btn:active { background: var(--soft); transform: translateY(2px); }
.skip-btn:disabled { opacity: 0.5; }
/* Na de eerste tik: het moet er even anders uitzien, anders tikt een kind
   nietsvermoedend twee keer achter elkaar op dezelfde plek. De balk eronder
   loopt leeg, zodat je ziet hoe lang je nog hebt voor die tweede tik. */
.skip-btn-zeker {
  position: relative;
  overflow: hidden;
  background: #8c2424;
  color: #fff;
  line-height: 1.25;
  padding: 6px 10px;
}
.skip-btn-zeker::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  height: 5px;
  width: 100%;
  background: #ffd166;
  transform-origin: left center;
  animation: leeglopen var(--bevestig, 5000ms) linear forwards;
}
@keyframes leeglopen {
  from { transform: scaleX(1); }
  to { transform: scaleX(0); }
}

/* Hoe lang duurt het nog voor je iemand mag overslaan? */
.wacht-klok { margin-top: 14px; }
.wacht-balk {
  height: 10px;
  border: 3px solid var(--ink);
  border-radius: 999px;
  background: #1b2f66;
  overflow: hidden;
}
.wacht-balk span {
  display: block;
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, #4a7de0, #7fb3ff);
  transition: width 0.25s linear;
}
.wacht-klok .small { margin-top: 6px; }

/* De klaar-knop staat na een schermwissel heel even op slot. Hij "laadt op",
   zodat een dode knop niet als kapot voelt. */
.btn-oplaadt { position: relative; overflow: hidden; }
.btn-oplaadt::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  height: 5px;
  width: 100%;
  background: rgba(255, 255, 255, 0.75);
  transform-origin: left center;
  animation: opladen var(--rust, 1300ms) linear forwards;
}
@keyframes opladen {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

/* --- knoppen naar winkel, prijzen en pesten --- */
.wait-menu {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 16px;
}
#screen-end .wait-menu { grid-template-columns: repeat(2, 1fr); }
.menu-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-height: 74px;
  border: var(--line) solid var(--ink);
  border-radius: var(--radius-sm);
  background: linear-gradient(180deg, var(--card) 0%, var(--card-deep) 100%);
  color: #fff;
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 5px 0 0 var(--ink);
  padding: 8px 4px;
}
.menu-tile span { font-size: 15px; }
.menu-tile:active { transform: translateY(4px); box-shadow: 0 1px 0 0 var(--ink); }
.menu-tile:disabled { opacity: 0.45; box-shadow: 0 5px 0 0 #2a3357; border-color: #2a3357; }

/* --- winkel, prijzenkast en pestkaarten --- */
.panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}
.coin-badge {
  color: var(--ink);
  background: var(--yellow);
  border: 3px solid var(--ink);
  border-radius: 12px;
  box-shadow: 0 3px 0 0 var(--ink);
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 800;
  padding: 3px 11px;
  white-space: nowrap;
}
.panel-sub {
  font-size: 19px;
  margin: 16px 0 8px;
  padding-bottom: 4px;
  border-bottom: 3px dashed var(--soft-dark);
}
.shop-message {
  background: #4a1220;
  border: 3px solid #ff5a63;
  color: #ffc9ce;
  border-radius: var(--radius-sm);
  font-size: 16px;
  font-weight: 800;
  padding: 9px 11px;
  margin-bottom: 10px;
}
.shop-message.good {
  background: #123c22;
  border-color: #35d073;
  color: #b8f5cc;
}

.shop-list { display: flex; flex-direction: column; }
.shop-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
  margin-bottom: 9px;
  border: 3px solid var(--ink);
  border-radius: var(--radius-sm);
  background: #24428c;
}
.shop-info { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; }
.shop-info strong { font-family: var(--font-display); font-size: 18px; }
.shop-info small { font-size: 14px; color: var(--muted); line-height: 1.35; }
.shop-info em {
  font-size: 13px;
  font-weight: 800;
  font-style: normal;
  color: var(--blue);
}
.have-badge {
  align-self: flex-start;
  background: var(--green);
  border: 2px solid var(--ink);
  border-radius: 9px;
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  padding: 1px 8px;
}
.buy-btn {
  flex-shrink: 0;
  min-width: 78px;
  min-height: 50px;
  border: 3px solid var(--ink);
  border-radius: 13px;
  background: var(--yellow);
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 4px 0 0 var(--ink);
}
.buy-btn:active { transform: translateY(3px); box-shadow: 0 1px 0 0 var(--ink); }
.buy-btn:disabled {
  background: #414c75;
  border-color: #2a3357;
  color: #96a0c4;
  box-shadow: 0 4px 0 0 #2a3357;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
.stat-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  border: 3px solid var(--ink);
  border-radius: var(--radius-sm);
  background: var(--soft);
  padding: 9px;
}
.stat-tile strong { font-family: var(--font-display); font-size: 26px; }
.stat-tile small { font-size: 13px; color: var(--muted); text-align: center; }

.prize-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 9px;
}
.prize-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  border: 3px solid #2a3f7d;
  border-radius: var(--radius-sm);
  background: #1a2c5e;
  padding: 8px 4px;
  opacity: 0.6;
}
.prize-tile.earned {
  color: var(--ink);
  border-color: var(--ink);
  background: var(--yellow);
  box-shadow: var(--sticker-sm);
  opacity: 1;
}
.prize-emoji { font-size: 26px; }
.prize-tile small { font-size: 11px; text-align: center; line-height: 1.2; font-weight: 700; }

.background-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
.bg-tile {
  min-height: 66px;
  border: 3px solid var(--ink);
  border-radius: var(--radius-sm);
  cursor: pointer;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 6px;
  font-family: var(--font-display);
}
.bg-tile span {
  background: rgba(255, 255, 255, 0.9);
  border: 2px solid var(--ink);
  border-radius: 9px;
  font-size: 13px;
  font-weight: 800;
  padding: 2px 7px;
}
.bg-tile.active { box-shadow: 0 0 0 4px var(--green), var(--sticker-sm); }
.bg-tile.locked { opacity: 0.55; cursor: default; }

.prank-card {
  display: flex;
  flex-direction: column;
  gap: 7px;
  border: 3px solid var(--ink);
  border-radius: var(--radius-sm);
  background: #24428c;
  padding: 11px;
  margin-bottom: 11px;
}
.prank-card strong { font-family: var(--font-display); font-size: 18px; }
.prank-card small { font-size: 14px; color: var(--muted); line-height: 1.35; }

/* Een kaart die nú niets kan doen. Wel zichtbaar (je hébt hem), maar duidelijk
   niet aan de beurt — met eronder waarom, en wanneer dan wel. */
.prank-card-uit { opacity: 0.72; background: #1b2f66; }
.prank-waarom { color: #ffd166 !important; }

.back-btn { margin-top: 16px; }

/* --- extra tekengereedschap --- */
.size-row {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin-bottom: 12px;
}
.size-btn {
  width: 52px;
  height: 46px;
  border: 3px solid var(--ink);
  border-radius: 13px;
  background: var(--card);
  color: #fff;
  font-size: 18px;
  cursor: pointer;
  box-shadow: 0 4px 0 0 var(--ink);
}
.size-btn.active { background: var(--yellow); color: var(--ink); }
.size-btn:active { transform: translateY(3px); box-shadow: 0 1px 0 0 var(--ink); }
.tool-btn.active { background: var(--yellow); color: var(--ink); }

.draw-notice {
  background: var(--pink);
  border: 3px solid var(--ink);
  border-radius: var(--radius-sm);
  box-shadow: var(--sticker-sm);
  color: #fff;
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 800;
  padding: 8px 12px;
  margin-bottom: 12px;
  text-align: center;
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.25);
}

/* Wiebelkaart: het tekenvel schudt in korte stoten heen en weer. */
.canvas-wrap { position: relative; }
@keyframes shake {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  20% { transform: translate(-7px, 3px) rotate(-1.2deg); }
  40% { transform: translate(6px, -4px) rotate(1deg); }
  60% { transform: translate(-5px, -3px) rotate(-0.8deg); }
  80% { transform: translate(7px, 4px) rotate(1.1deg); }
}
.canvas-wrap.shaking { animation: shake 0.42s linear infinite; }

/* Smalle telefoons: titel en tekst iets kleiner zodat niets tegen de rand komt. */
@media (max-width: 390px) {
  .logo { font-size: 38px; }
  .prompt-text { font-size: 22px; }
  .vote-option { font-size: 19px; }
  .name-option { font-size: 19px; }
  /* De gereedschapsknoppen moeten naast elkaar op één regel passen. */
  .tool-btn { font-size: 15px; }
  .tool-row { gap: 7px; }
  .prize-grid { grid-template-columns: repeat(3, 1fr); }
  .size-btn { width: 46px; }
}