/* Gedeeld designsysteem: variabelen, reset, knoppen, lettertegels. */

:root {
  --oranje: #ff8a3d;
  --oranje-donker: #d96a1f;
  --teal: #1fb6a6;
  --teal-donker: #148f82;
  --paars: #7c5cbf;
  --paars-donker: #5d4494;
  --roze: #f45b9c;
  --geel: #ffd23f;
  --geel-donker: #dfa900;
  --creme: #fff8ee;
  --wit: #ffffff;
  --inkt: #3b2e2a;
  --inkt-zacht: #8a776e;
  --radius: 16px;
  --schaduw-kaart: 0 2px 10px rgba(59, 46, 42, 0.1);
  --font-vrolijk: ui-rounded, "Comic Sans MS", "Segoe UI", system-ui, sans-serif;
  --font-neutraal: "Segoe UI", system-ui, -apple-system, sans-serif;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--creme);
  color: var(--inkt);
  font-family: var(--font-vrolijk);
  font-size: 18px;
  line-height: 1.5;
}

h1,
h2,
h3,
p {
  margin: 0 0 0.5em;
  overflow-wrap: break-word;
}

img,
canvas,
svg {
  max-width: 100%;
}

input,
textarea,
select,
button {
  font: inherit;
  color: inherit;
}

/* ---------- knoppen ---------- */

.knop {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  min-height: 56px;
  padding: 0.55em 1.4em;
  border: 0;
  border-radius: var(--radius);
  font-size: 1.15rem;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
  text-align: center;
  color: #fff;
  background: var(--oranje);
  box-shadow: 0 4px 0 var(--oranje-donker);
  transition: transform 0.08s ease, box-shadow 0.08s ease;
  -webkit-tap-highlight-color: transparent;
}

.knop:active {
  transform: translateY(4px);
  box-shadow: 0 0 0 var(--oranje-donker);
}

.knop--teal {
  background: var(--teal);
  box-shadow: 0 4px 0 var(--teal-donker);
}

.knop--teal:active {
  box-shadow: 0 0 0 var(--teal-donker);
}

.knop--paars {
  background: var(--paars);
  box-shadow: 0 4px 0 var(--paars-donker);
}

.knop--paars:active {
  box-shadow: 0 0 0 var(--paars-donker);
}

.knop--stil {
  min-height: 44px;
  background: transparent;
  color: var(--inkt-zacht);
  box-shadow: none;
  font-size: 1rem;
  text-decoration: underline;
}

.knop--stil:active {
  transform: none;
}

.knop--breed {
  width: 100%;
}

.knop:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* ---------- lettertegels (Scrabble-stijl) ---------- */

.tegel {
  display: inline-grid;
  place-items: center;
  width: 46px;
  height: 50px;
  border-radius: 10px;
  background: var(--geel);
  box-shadow: 0 3px 0 var(--geel-donker);
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--inkt);
  user-select: none;
}

.tegel--leeg {
  background: transparent;
  box-shadow: none;
  border: 2px dashed #d9c9b2;
}

.tegel--paars {
  background: var(--paars);
  box-shadow: 0 3px 0 var(--paars-donker);
  color: #fff;
}

/* Hint-letter die al vast op de goede plek staat. */
.tegel--vast {
  background: var(--teal);
  box-shadow: 0 3px 0 var(--teal-donker);
  color: #fff;
}

.tegel--knop {
  cursor: pointer;
  border: 0;
  padding: 0;
  transition: transform 0.08s ease;
  -webkit-tap-highlight-color: transparent;
}

.tegel--knop:active {
  transform: translateY(3px);
  box-shadow: none;
}

.tegel--onzichtbaar {
  visibility: hidden;
}

/* ---------- Web-id credit ---------- */

.webid-rij {
  text-align: center;
  font-size: 0.85rem;
  color: var(--inkt-zacht);
  margin: 24px 0 8px;
}

.webid-credit {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: inherit;
  font-weight: 700;
  text-decoration: none;
  vertical-align: middle;
}

.webid-credit:hover {
  text-decoration: underline;
}

.webid-w {
  display: inline-grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: 3px;
  background: #e2001a;
  color: #fff;
  font-weight: 800;
  font-size: 12px;
  font-family: var(--font-neutraal);
}

/* ---------- animaties ---------- */

@keyframes schud {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-8px); }
  40% { transform: translateX(8px); }
  60% { transform: translateX(-6px); }
  80% { transform: translateX(6px); }
}

.schud {
  animation: schud 0.4s ease;
}

@keyframes pop {
  0% { transform: scale(0.2); opacity: 0; }
  70% { transform: scale(1.15); opacity: 1; }
  100% { transform: scale(1); }
}

.pop {
  animation: pop 0.45s cubic-bezier(0.2, 0.9, 0.3, 1.2);
}

@keyframes zweef {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

.zweef {
  animation: zweef 2.2s ease-in-out infinite;
}

.confetti-canvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 50;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
}