/* Galgje met een sneeuwpop. Bouwt voort op klastools.css. */
.modes { width: min(100%, 780px); }
.modes button { white-space: nowrap; }
.gj-themes { align-self: center; flex-wrap: wrap; justify-content: center; }

.gj-stage { display: grid; grid-template-columns: minmax(200px, 30%) minmax(0, 1fr); gap: 24px; align-items: center; }

/* ---------- sneeuwpop ---------- */
.gj-snow { --melt: 0; display: flex; flex-direction: column; align-items: center; gap: 8px; min-width: 0; }
#snowman { width: 100%; max-height: 52vh; overflow: visible; filter: drop-shadow(0 14px 30px rgba(0,0,0,.35)); }
#snowman .ball { fill: #fff; }
#snowman .shade { fill: #dfe6ff; }
#snowman .coal { fill: #1a1640; }
#snowman .twig { fill: none; stroke: #8a5a2b; stroke-width: 7; stroke-linecap: round; stroke-linejoin: round; }
#snowman .carrot { fill: #ff8c1a; }
#snowman .scarf { fill: #e8364f; }
#snowman .scarf-stripe { stroke: #ffd43b; stroke-width: 4; }
#snowman .hat { fill: #3d3a5c; stroke: #8e89c4; stroke-width: 2.5; }
#snowman .hat-band { fill: #e8364f; }
#snowman .snowfield { fill: #e9edff; opacity: .18; }
#snowman .puddle { fill: #74c0fc; opacity: .75; transform-box: fill-box; transform-origin: center; transform: scale(calc(.12 + var(--melt) * .88), calc(.4 + var(--melt) * .6)); transition: transform .8s ease; }
#snowman .sun { fill: #ffd43b; stroke: #ffd43b; stroke-width: 5; stroke-linecap: round; transform-box: fill-box; transform-origin: center;
  opacity: calc(.25 + var(--melt) * .75); transform: scale(calc(.7 + var(--melt) * .5)); transition: opacity .8s, transform .8s; }
#snowman .part { transform-box: fill-box; transform-origin: 50% 100%; transition: transform .9s ease-in, opacity .9s ease-in; }
#snowman .part.gone { transform: translateY(24px) scaleY(.15); opacity: 0; }
#snowman.happy { animation: hop .5s ease 3; transform-origin: 50% 100%; }
@keyframes hop { 50% { transform: translateY(-14px); } }

.gj-lives { display: flex; gap: 2px; font-size: clamp(16px, 2.2vw, 24px); line-height: 1; color: #a5d8ff; }
.gj-lives i { font-style: normal; transition: opacity .4s; }
.gj-lives i.used { opacity: .18; }
.gj-lives-text { font-family: var(--font-display); font-weight: 800; font-size: 19px; color: var(--muted); }

/* ---------- speelveld ---------- */
.gj-play { min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 14px; position: relative; }
.gj-play.nowords > :not(.empty) { visibility: hidden; }
.gj-play .empty { inset: 30% 0 auto; }

.gj-score { display: flex; gap: 10px; align-items: stretch; justify-content: center; flex-wrap: wrap; }
.gj-score .team { display: flex; align-items: center; gap: 12px; padding: 6px 16px; border-radius: 14px; background: rgba(0,0,0,.25); border: 3px solid transparent; transition: border-color .2s, transform .2s; }
.gj-score .team span { font-weight: 800; font-size: 16px; color: var(--muted); }
.gj-score .team b { font-family: var(--font-display); font-weight: 800; font-size: 30px; line-height: 1; }
.gj-score .team b small { font-size: 16px; color: var(--muted); }
.gj-score .t0 b { color: #ff8787; }
.gj-score .t1 b { color: #74c0fc; }
.gj-score .team.turn { transform: scale(1.06); }
.gj-score .t0.turn { border-color: #ff8787; background: rgba(255,107,107,.18); }
.gj-score .t1.turn { border-color: #74c0fc; background: rgba(77,171,247,.18); }
.gj-score .team.turn span { color: var(--ink); }
.gj-score .reset { border: 0; border-radius: 12px; width: 42px; background: rgba(255,255,255,.08); font-size: 20px; font-weight: 800; color: var(--muted); }
.gj-score .reset:hover { background: rgba(255,255,255,.17); color: var(--ink); }
.status b.t0 { color: #ff8787; }
.status b.t1 { color: #74c0fc; }

.gj-cat { font-weight: 800; font-size: 15px; letter-spacing: .06em; text-transform: uppercase; color: var(--gold); }

.gj-word { --slot: 64px; --gap: 8px; width: 100%; display: flex; flex-wrap: wrap; justify-content: center; gap: calc(var(--gap) * 2) calc(var(--slot) * .5); }
.gj-word .chunk { display: flex; gap: var(--gap); }
.gj-word .slot {
  width: var(--slot); height: calc(var(--slot) * 1.2); display: grid; place-items: center;
  font-family: var(--font-display); font-weight: 800; font-size: calc(var(--slot) * .85); line-height: 1;
  border-bottom: max(3px, calc(var(--slot) * .07)) solid rgba(255,255,255,.6);
}
.gj-word .slot.on { color: #fff; animation: popin .35s cubic-bezier(.3,1.5,.5,1); }
.gj-word .slot.hint { color: var(--gold); }
.gj-word .slot.miss { color: #ff8787; border-bottom-color: #ff8787; }
.gj-word .slot.fixed { border-bottom-color: transparent; color: var(--muted); }

.gj-msg { margin: 0; min-height: 2.6em; text-align: center; font-weight: 700; font-size: clamp(18px, 2.2vw, 24px); line-height: 1.3; color: var(--muted); text-wrap: balance; }
.gj-msg b { color: var(--ink); }
.gj-msg.good b { color: #69db7c; }
.gj-msg.bad b { color: #ff8787; }
.gj-msg.hint b { color: var(--gold); }
.gj-msg.win { color: var(--gold); font-family: var(--font-display); font-weight: 800; font-size: clamp(24px, 3.2vw, 38px); }
.gj-msg b.word { font-family: var(--font-display); font-size: 1.3em; color: var(--gold); }
.gj-msg b.t0 { color: #ff8787; }
.gj-msg b.t1 { color: #74c0fc; }

.gj-keys { width: 100%; max-width: 820px; display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); gap: 8px; }
.gj-keys button {
  height: clamp(48px, 7.5vh, 72px); border: 0; border-radius: 14px; background: #fff; color: var(--bg);
  font-family: var(--font-display); font-weight: 800; font-size: clamp(26px, 3.4vw, 38px); line-height: 1;
  box-shadow: inset 0 -5px 0 rgba(0,0,0,.14); transition: background .15s, transform .08s;
}
.gj-keys button:hover:not(:disabled) { background: #ffe066; }
.gj-keys button:active:not(:disabled) { transform: translateY(2px); }
.gj-keys button:disabled { cursor: default; }
.gj-keys button.good { background: #51cf66; color: #08311a; box-shadow: none; }
.gj-keys button.bad { background: rgba(255,255,255,.1); color: rgba(255,255,255,.35); box-shadow: none; text-decoration: line-through; }
.gj-keys button:disabled:not(.good):not(.bad) { opacity: .45; }

#btnHint small { font-size: 14px; font-weight: 700; opacity: .75; }
#btnHint:disabled { opacity: .4; cursor: default; }
.gj-own-go { align-self: flex-start; font-size: 22px; padding: 10px 24px; }

/* ---------- smaller scherm ---------- */
@media (max-width: 820px) {
  .gj-stage { grid-template-columns: minmax(0, 1fr); gap: 10px; align-items: start; }
  .gj-snow { display: grid; grid-template-columns: auto auto; column-gap: 14px; row-gap: 4px; align-items: center; justify-content: center; }
  #snowman { grid-row: 1 / 3; width: auto; height: min(20vh, 170px); max-height: none; }
  .gj-lives { align-self: end; display: grid; grid-template-columns: repeat(5, auto); }
  .gj-lives-text { align-self: start; font-size: 17px; }
  .gj-play { gap: 10px; }
}
@media (max-width: 560px) {
  .modes button i { display: none; }
  .modes button { font-size: 14px; white-space: normal; }
  .gj-keys { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
  .gj-keys button { height: 48px; font-size: 26px; border-radius: 10px; }
  .gj-score .team { padding: 4px 10px; gap: 8px; }
  .gj-score .team span { font-size: 14px; }
  .gj-score .team b { font-size: 24px; }
  .gj-msg { font-size: 17px; }
  .controls { gap: 10px; }
  .controls .seg button { padding: 8px 10px; font-size: 15px; }
  .gj-themes { flex-wrap: nowrap; width: 100%; }
  .gj-themes button { flex: 1; padding: 8px 4px; font-size: 14px; }
  .gj-msg { min-height: 2.6em; }
  #btnHint { padding: 8px 14px; font-size: 17px; }
}
@media (prefers-reduced-motion: reduce) {
  #snowman .part, #snowman .puddle, #snowman .sun, .gj-keys button, .gj-score .team { transition: none; }
  #snowman.happy, .gj-word .slot.on { animation: none; }
}