:root {
  --gras: #4a7c2e;
  --gras-licht: #6ba03e;
  --hout: #6b4423;
  --hout-licht: #8a5a2f;
  --room: #f4ecd6;
  --zwart: #2a1f14;
}

* { box-sizing: border-box; }

/* Het hek- en hok-scherm worden in JS met het `hidden`-attribuut geschakeld.
   De ID-selectors hieronder zetten `display`, wat de UA-regel voor [hidden]
   qua specificiteit zou verslaan; dit dwingt af dat een verborgen scherm ook
   echt verdwijnt. */
[hidden] { display: none !important; }

body {
  margin: 0;
  font-family: 'Courier New', monospace;
  background: var(--gras);
  color: var(--zwart);
  image-rendering: pixelated;
}

.pixel-title {
  font-size: 3rem;
  color: var(--room);
  text-shadow: 3px 3px 0 var(--hout), 6px 6px 0 var(--zwart);
  letter-spacing: 2px;
  margin: 0.3em 0;
}

.pixel-subtitle {
  color: var(--hout);
  text-shadow: 2px 2px 0 var(--room);
  border-bottom: 4px dashed var(--hout);
  padding-bottom: 4px;
}

.slogan { font-weight: bold; color: var(--room); }

.blink { animation: blink 1s steps(2, start) infinite; }
@keyframes blink { to { visibility: hidden; } }

/* HEK */
#gate-screen {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    repeating-linear-gradient(90deg, var(--hout) 0 12px, transparent 12px 60px),
    var(--gras-licht);
}
.gate-fence {
  background: var(--room);
  border: 8px solid var(--hout);
  box-shadow: 8px 8px 0 var(--zwart);
  padding: 2rem;
  text-align: center;
  max-width: 420px;
}
.gate-sheep { font-size: 4rem; margin: 0.5rem 0; }
#gate-form { display: flex; flex-direction: column; gap: 1rem; text-align: left; }
#gate-form input {
  width: 100%;
  padding: 8px;
  border: 4px solid var(--hout);
  font-family: inherit;
  font-size: 1rem;
}
button {
  background: var(--gras);
  color: var(--room);
  border: 4px solid var(--zwart);
  box-shadow: 4px 4px 0 var(--zwart);
  padding: 10px;
  font-family: inherit;
  font-weight: bold;
  font-size: 1rem;
  cursor: pointer;
}
button:active { transform: translate(4px, 4px); box-shadow: none; }
.gate-error { color: #a11; font-weight: bold; }

/* Hek open-animatie: de fence-box wijkt uiteen */
#gate-screen.opening .gate-fence {
  animation: gate-open 1.2s ease-in forwards;
}
@keyframes gate-open {
  0% { transform: scale(1); opacity: 1; }
  60% { transform: scale(1.05) rotate(-1deg); }
  100% { transform: scale(1.4); opacity: 0; }
}

/* HOK */
#pen-screen {
  max-width: 900px;
  margin: 0 auto;
  padding: 1rem;
}
.pen-header { text-align: center; }
.cam-zone { margin: 1rem 0; }
.cam-placeholder {
  position: relative;
  aspect-ratio: 16 / 9;
  background: #111;
  border: 8px solid var(--hout);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gras-licht);
  font-weight: bold;
  overflow: hidden;
}
.cam-noise {
  position: absolute; inset: 0;
  background-image: repeating-linear-gradient(0deg, rgba(255,255,255,.05) 0 2px, transparent 2px 4px);
  animation: noise 0.2s steps(2) infinite;
}
@keyframes noise { to { transform: translateY(2px); } }
.cam-placeholder p { position: relative; z-index: 1; }

/* Shoutbox */
.shoutbox-zone {
  background: var(--room);
  border: 6px solid var(--hout);
  padding: 1rem;
  margin: 1rem 0;
}
#shoutbox-messages {
  list-style: none;
  margin: 0;
  padding: 0;
  height: 260px;
  overflow-y: auto;
  border: 4px solid var(--hout-licht);
  background: #fff;
}
#shoutbox-messages li { padding: 4px 8px; border-bottom: 1px dashed #ccc; }
#shoutbox-messages .nick { color: var(--hout); font-weight: bold; }
.chat-status { min-height: 1.2em; color: #a11; font-size: 0.9rem; }
#chat-form { display: flex; gap: 8px; margin-top: 8px; }
#chat-input { flex: 1; padding: 8px; border: 4px solid var(--hout); font-family: inherit; }

/* Monument */
#monument {
  background: var(--room);
  border: 6px solid var(--hout);
  padding: 1rem 1.5rem;
  margin: 1rem 0;
  text-align: center;
}
.monument-sheep { font-size: 3rem; }
.monument-story { text-align: left; line-height: 1.5; }
.gags-box { border-top: 4px dashed var(--hout); margin-top: 1rem; padding-top: 1rem; }
#gags { list-style: '🐑 '; text-align: left; }
.visitor-counter {
  background: var(--zwart);
  color: #0f0;
  font-family: 'Courier New', monospace;
  padding: 6px;
  display: inline-block;
  border: 3px solid var(--gras-licht);
}

@media (max-width: 600px) {
  .pixel-title { font-size: 2rem; }
}