:root {
  --oxblood: #e2483f;
  --oxblood-dark: #b23129;
  --oxblood-light: #ff7267;
  --ochre: #ffb100;
  --ochre-light: #ffd166;
  --ochre-dark: #d98c00;
  --sage: #4caf7d;
  --sage-light: #9fe0bb;
  --sage-dark: #2f8a5e;
  --parchment: #fff3d9;
  --parchment-dark: #ffe4ad;
  --off-white: #fffdf6;
  --sage-night: #1f4a3a;
  --teal: #2f7a78;
  --teal-dark: #1d5654;
  --ink: #2c2b52;
  --ink-brown: #3a2f22;
  --paper-border: #3a2f22;
  --btn-primary: #b3492f;
  --shadow: rgba(60, 30, 10, 0.2);
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
}

body {
  font-family: 'Public Sans', sans-serif;
  color: var(--ink);
  background:
    radial-gradient(ellipse at top, #fffaf0 0%, var(--parchment) 55%, var(--parchment-dark) 100%);
  min-height: 100vh;
}

a {
  color: inherit;
}

h1,
h2,
h3,
h4 {
  font-family: 'Fraunces', serif;
  font-weight: 700;
}

.site-header {
  position: relative;
  padding: 2.8rem 1rem 2.4rem;
  text-align: center;
  background:
    repeating-linear-gradient(
      90deg,
      var(--sage-dark) 0px,
      var(--sage-dark) 26px,
      var(--off-white) 26px,
      var(--off-white) 52px
    );
  box-shadow: 0 6px 18px var(--shadow);
}

.site-header::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -30px;
  height: 42px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='42' viewBox='0 0 72 42'%3E%3Cpath d='M0 0H72V10A18 18 0 0 1 36 10A18 18 0 0 1 0 10Z' fill='%232f8a5e'/%3E%3C/svg%3E");
  background-repeat: repeat-x;
  background-size: 72px 42px;
  filter: drop-shadow(0 4px 4px var(--shadow));
}

.admin-link {
  position: absolute;
  top: 1rem;
  right: 1.2rem;
  font-size: 0.85rem;
  text-decoration: none;
  color: var(--parchment);
  background: rgba(0, 0, 0, 0.22);
  padding: 0.4rem 0.85rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.4);
  transition: background 0.2s ease;
}

.admin-link:hover {
  background: rgba(0, 0, 0, 0.4);
}

main {
  max-width: 1340px;
  margin: 0 auto;
  padding: 2.5rem 1.5rem 4rem;
}

/* ---------- Etalage: handgetekende gevel-illustratie ---------- */
.site-header.shop-header {
  background: none;
  box-shadow: none;
  padding: 1.2rem 1rem;
}

.site-header.shop-header::after {
  content: none;
}

.etalage-scene {
  position: relative;
  width: 100%;
  max-width: 1448px;
  margin: 0 auto;
  aspect-ratio: 1448 / 1086;
  background-image: url('../img/etalage-line-desktop.webp');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 14px 30px var(--shadow);
  container-type: inline-size;
}

/* De tekening zelf heeft geen tekst meer op het bordje (dat is expres
   afgedekt), zodat de titel hier als echte tekst in Fraunces staat. */
.shop-sign-text {
  position: absolute;
  left: 12.43%;
  top: 10.96%;
  width: 75%;
  height: 11.51%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  pointer-events: none;
}

.shop-sign-text h1 {
  margin: 0;
  font-family: 'Fraunces', serif;
  font-weight: 700;
  font-size: clamp(1rem, 5cqw, 2.4rem);
  line-height: 1;
  color: var(--ink-brown);
}

.shop-sign-text .shop-sign-subtitle {
  display: none;
}

.door-hit,
.mailbox-hit {
  position: absolute;
  border: none;
  background: transparent;
  padding: 0;
  margin: 0;
  cursor: pointer;
  border-radius: 6px;
  outline: none;
}

.door-hit {
  left: 41.09%;
  top: 29.46%;
  width: 17.96%;
  height: 58.93%;
}

.mailbox-hit {
  left: 44.89%;
  top: 66.3%;
  width: 11.74%;
  height: 7.37%;
}

/* De twee etalageramen zijn nu gewoon lege vlakken in de tekening — de
   verhaal-kaartjes worden er in CSS in gestapeld (flex-wrap), zodat er
   geen vast maximum meer is zoals bij de vorige illustratie. */
.window-pane {
  position: absolute;
  display: flex;
  flex-direction: column;
  gap: 4%;
  padding: 5%;
  overflow-y: auto;
}

.pane-left {
  left: 15.54%;
  top: 29.46%;
  width: 23.14%;
  height: 44.2%;
}

.pane-right {
  left: 61.46%;
  top: 29.46%;
  width: 23.14%;
  height: 44.2%;
}

.story-slot {
  flex: 0 0 auto;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 8% 6%;
  border: 1.5px solid var(--ink-brown);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.55);
  font-family: 'Fraunces', serif;
  color: var(--ink-brown);
}

.story-slot.filled {
  cursor: pointer;
  outline: none;
}

.story-slot .story-title {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: 0 0 0.3em;
  font-weight: 700;
  font-size: clamp(0.6rem, 2.7cqw, 1.05rem);
  line-height: 1.2;
}

.story-slot .story-author-badge {
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: 0;
  font-family: 'Public Sans', sans-serif;
  font-style: italic;
  font-size: clamp(0.52rem, 1.9cqw, 0.85rem);
  color: #6b5c46;
}

.story-slot .read-hint {
  margin: 0.5em 0 0;
  font-family: 'IBM Plex Mono', monospace;
  font-size: clamp(0.4rem, 1.3cqw, 0.65rem);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  opacity: 0.65;
}

.story-slot.empty {
  border-style: dashed;
  background: transparent;
}

.story-slot.empty .empty-label {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: 0;
  font-family: 'Public Sans', sans-serif;
  font-style: italic;
  font-size: clamp(0.52rem, 2cqw, 0.85rem);
  color: #8a7a63;
}

/* Op smalle schermen een eigen, rechtopstaande tekening van de gevel,
   met haar eigen posities voor de deur, de brievenbus en de twee
   etalageramen. */
@media (max-width: 640px) {
  .etalage-scene {
    aspect-ratio: 941 / 1672;
    background-image: url('../img/etalage-line-mobile.webp');
  }

  .shop-sign-text {
    left: 9.99%;
    top: 17.05%;
    width: 80.02%;
    height: 9.75%;
  }

  .shop-sign-text h1 {
    font-size: clamp(0.9rem, 6.5cqw, 1.7rem);
  }

  .shop-sign-text .shop-sign-subtitle {
    display: block;
    margin: 0.3em 0 0;
    font-family: 'Public Sans', sans-serif;
    font-size: clamp(0.5rem, 2.6cqw, 0.85rem);
    color: var(--ink-brown);
  }

  .door-hit {
    left: 38.26%;
    top: 28.71%;
    width: 24.44%;
    height: 53.53%;
  }

  .mailbox-hit {
    left: 70.14%;
    top: 70.87%;
    width: 13.28%;
    height: 3.89%;
  }

  .pane-left {
    left: 11.16%;
    top: 28.71%;
    width: 24.97%;
    height: 40.07%;
  }

  .pane-right {
    left: 64.29%;
    top: 28.71%;
    width: 24.97%;
    height: 40.07%;
  }
}

/* --- Modal met volledig verhaal --- */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(20, 10, 5, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  z-index: 50;
}

.modal-overlay[hidden] {
  display: none;
}

.club-lock-overlay {
  position: fixed;
  inset: 0;
  background:
    radial-gradient(ellipse at top, #fffaf0 0%, var(--parchment) 55%, var(--parchment-dark) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  z-index: 100;
}

.club-lock-overlay[hidden] {
  display: none;
}

.club-lock-box {
  background: var(--parchment);
  border: 2px solid var(--paper-border);
  border-radius: 14px;
  max-width: 380px;
  width: 100%;
  padding: 2rem 2.2rem 2.4rem;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.35);
  text-align: center;
}

.club-lock-box h2 {
  margin-top: 0;
  font-family: 'Fraunces', serif;
  color: var(--ink-brown);
}

.club-lock-box .field {
  text-align: left;
}

.club-lock-box .panel-back {
  display: inline-block;
  margin-top: 1.2rem;
  font-size: 0.85rem;
}

.modal-page {
  background: var(--parchment);
  border: 2px solid var(--paper-border);
  border-radius: 14px;
  max-width: 680px;
  width: 100%;
  max-height: 85vh;
  overflow-y: auto;
  padding: 2rem 2.2rem 2.4rem;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.35);
  position: relative;
}

.modal-close {
  position: absolute;
  top: 0.8rem;
  right: 0.9rem;
  background: #fff;
  color: var(--ink-brown);
  border: 1.5px solid var(--ink-brown);
  width: 34px;
  height: 34px;
  border-radius: 50%;
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 3px 6px var(--shadow);
}

.modal-close:hover {
  background: var(--ink-brown);
  color: #fff;
}

.modal-page h2 {
  margin: 0.2rem 2.2rem 0.9rem 0;
  font-family: 'Fraunces', serif;
  color: var(--ink-brown);
  font-size: 1.6rem;
}

.modal-author {
  margin: -0.5rem 0 0.9rem;
  color: var(--sage-dark);
  font-style: italic;
}

.modal-body {
  white-space: pre-wrap;
  line-height: 1.7;
  color: var(--ink);
}

.modal-illustration {
  display: block;
  max-width: 100%;
  border-radius: 8px;
  margin: 0 0 1rem;
  box-shadow: 0 6px 14px var(--shadow);
}

#modal-delete-story {
  margin-top: 1rem;
}

/* ---------- Reacties ---------- */

.comments-section {
  margin-top: 1.8rem;
  padding-top: 1.4rem;
  border-top: 2px solid var(--sage-light);
}

.comments-section h3 {
  margin: 0 0 0.9rem;
  font-family: 'Fraunces', serif;
  color: var(--ink-brown);
  font-size: 1.15rem;
}

.comments-list {
  list-style: none;
  margin: 0 0 1.2rem;
  padding: 0;
}

.comment-empty {
  font-style: italic;
  color: var(--sage-dark);
  font-size: 0.92rem;
}

.comment-item {
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--sage-light);
}

.comment-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.6rem;
}

.comment-name {
  font-weight: bold;
  color: var(--ink-brown);
}

.comment-date {
  font-size: 0.78rem;
  color: var(--sage-dark);
  white-space: nowrap;
}

.comment-text {
  margin: 0.3rem 0 0;
  line-height: 1.5;
}

.comment-delete {
  margin-top: 0.4rem;
  border: none;
  background: none;
  color: #8a2f1f;
  font-size: 0.76rem;
  text-decoration: underline;
  cursor: pointer;
  padding: 0;
}

.comment-delete:hover {
  color: #a83c28;
}

.comment-edit {
  margin-top: 0.4rem;
  margin-right: 0.9rem;
  border: none;
  background: none;
  color: var(--sage-dark);
  font-size: 0.76rem;
  text-decoration: underline;
  cursor: pointer;
  padding: 0;
}

.comment-edit:hover {
  color: var(--sage);
}

.comment-edit-form {
  margin-top: 0.4rem;
}

.comment-edit-textarea {
  width: 100%;
  padding: 0.5rem 0.6rem;
  border: 2px solid var(--sage);
  border-radius: 6px;
  font-family: inherit;
  font-size: 0.92rem;
  resize: vertical;
}

.comment-edit-actions {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: 0.5rem;
}

.comment-edit-actions .btn {
  padding: 0.4rem 1rem;
  font-size: 0.85rem;
}

.comment-form {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}

.comment-form input,
.comment-form textarea {
  width: 100%;
  padding: 0.6rem 0.7rem;
  border: 2px solid var(--sage);
  border-radius: 6px;
  font-family: inherit;
  font-size: 0.95rem;
  background: #fff;
  resize: vertical;
}

.comment-form input:focus,
.comment-form textarea:focus {
  outline: none;
  border-color: var(--ink-brown);
  box-shadow: 0 0 0 3px rgba(58, 47, 34, 0.15);
}

.comment-form .btn {
  align-self: flex-start;
}

.site-footer {
  text-align: center;
  padding: 1.5rem;
  color: var(--sage-dark);
  font-size: 0.85rem;
}

/* ---------- Login & admin pagina's ---------- */

.centered-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
}

.panel {
  width: 100%;
  max-width: 420px;
  background: var(--parchment);
  border: 2px solid var(--paper-border);
  border-radius: 14px;
  padding: 2.2rem 2rem;
  box-shadow: 0 16px 30px var(--shadow);
}

.panel.wide {
  max-width: 980px;
}

.admin-room + .admin-room {
  margin-top: 2.4rem;
}

.admin-room-title {
  margin: 0 0 1.2rem;
  padding-bottom: 0.5rem;
  font-family: 'Fraunces', serif;
  font-size: 1.4rem;
  color: var(--ink-brown);
  border-bottom: 2px solid var(--paper-border);
}

.admin-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.6rem;
  align-items: start;
}

.admin-card {
  background: rgba(255, 250, 240, 0.55);
  border: 2px solid var(--sage-light);
  border-radius: 10px;
  padding: 1.4rem 1.5rem 1.6rem;
}

.admin-card-title {
  margin-top: 0;
  font-size: 1.15rem;
  color: var(--ink-brown);
}

.admin-sublist-title {
  margin: 1.6rem 0 0.6rem;
  font-size: 0.95rem;
  color: var(--ink-brown);
}

.admin-card-hint {
  margin: -0.4rem 0 1rem;
  font-size: 0.82rem;
  font-style: italic;
  color: var(--sage-dark);
}

.panel h1,
.panel h2 {
  font-family: 'Fraunces', serif;
  color: var(--ink-brown);
  margin-top: 0;
}

.panel-back {
  display: inline-block;
  margin-bottom: 1rem;
  font-size: 0.85rem;
  color: var(--sage-dark);
  text-decoration: none;
}

.panel-back:hover {
  text-decoration: underline;
}

.field {
  margin-bottom: 1.2rem;
}

.field label {
  display: block;
  margin-bottom: 0.4rem;
  font-weight: bold;
  color: var(--ink-brown);
}

.field input[type='text'],
.field input[type='password'],
.field input[type='file'] {
  width: 100%;
  padding: 0.6rem 0.7rem;
  border: 1.5px solid var(--ink-brown);
  border-radius: 6px;
  font-family: inherit;
  font-size: 1rem;
  background: #fff;
}

.field input:focus {
  outline: none;
  border-color: var(--ink-brown);
  box-shadow: 0 0 0 3px rgba(58, 47, 34, 0.15);
}

.btn {
  display: inline-block;
  padding: 0.6rem 1.4rem;
  border: 1.5px solid var(--ink-brown);
  border-radius: 999px;
  background: #fff;
  color: var(--ink-brown);
  font-size: 1rem;
  font-weight: bold;
  cursor: pointer;
  box-shadow: 0 4px 10px var(--shadow);
  transition: background 0.2s ease, color 0.2s ease, transform 0.1s ease;
}

.btn:hover {
  background: var(--ink-brown);
  color: #fff;
}

.btn:active {
  transform: translateY(1px);
}

.btn.secondary {
  border-color: var(--sage-dark);
  color: var(--sage-dark);
}

.btn.secondary:hover {
  background: var(--sage-dark);
  color: #fff;
}

.btn.danger {
  border-color: #8a2f1f;
  color: #8a2f1f;
  padding: 0.3rem 0.8rem;
  font-size: 0.85rem;
}

.btn.danger:hover {
  background: #8a2f1f;
  color: #fff;
}

.message {
  margin-top: 1rem;
  padding: 0.7rem 0.9rem;
  border-radius: 6px;
  font-size: 0.92rem;
}

.mailbox-disclaimer {
  margin: 0.6rem 0 0;
  font-size: 0.78rem;
  font-style: italic;
  color: var(--sage-dark);
}

.message.error {
  background: #f5d9d0;
  color: #7a2211;
  border: 1px solid #c9694a;
}

.message.success {
  background: #e2ecd6;
  color: #3c5223;
  border: 1px solid var(--sage);
}

.message[hidden] {
  display: none;
}

.admin-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1.4rem;
}

.story-manage-list {
  list-style: none;
  margin: 1.6rem 0 0;
  padding: 0;
  border-top: 2px solid var(--sage-light);
}

.story-manage-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.8rem 0.2rem;
  border-bottom: 1px solid var(--sage-light);
}

.story-manage-list .story-manage-title {
  font-weight: bold;
  color: var(--ink-brown);
}

.story-manage-actions {
  display: flex;
  gap: 0.5rem;
  flex-shrink: 0;
}

.story-manage-list .story-manage-teaser {
  display: block;
  font-size: 0.85rem;
  font-style: italic;
  color: var(--sage-dark);
  font-weight: normal;
}

.empty-note {
  color: var(--sage-dark);
  font-style: italic;
}

/* ---------- Achterkamertje: handgetekende kamer-illustratie ---------- */

.room-main {
  max-width: 1200px;
  margin: 0 auto;
  padding: 1.5rem 1.5rem 4rem;
}

.room-scene {
  position: relative;
  width: 100%;
  max-width: 1449px;
  margin: 0 auto;
  aspect-ratio: 1449 / 1086;
  background-image: url('../img/kamer-line.webp');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 14px 30px var(--shadow);
  container-type: inline-size;
}

/* Het bordje in de tekening is afgedekt, dus de titel staat hier als
   echte tekst in Fraunces. */
.room-sign-text {
  position: absolute;
  left: 27.88%;
  top: 10.41%;
  width: 44.44%;
  height: 16.02%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  pointer-events: none;
}

.room-sign-text h1 {
  margin: 0;
  font-family: 'Fraunces', serif;
  font-weight: 700;
  font-size: clamp(0.9rem, 4.2cqw, 1.9rem);
  line-height: 1.1;
  color: var(--ink-brown);
}

.room-sign-text p {
  margin: 0.2em 0 0;
  font-family: 'Public Sans', sans-serif;
  font-size: clamp(0.5rem, 2.2cqw, 0.95rem);
  color: var(--ink-brown);
}

/* Op een telefoon wordt alles anders piepklein: de kamer blijft op een
   leesbaar formaat staan en je scrollt in de breedte, zoals vroeger. */
@media (max-width: 640px) {
  .room-main {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .room-scene {
    width: 720px;
    max-width: none;
    flex-shrink: 0;
  }
}

.bookshelf-hit,
.typewriter-hit,
.cat-hit,
.clock-hit {
  position: absolute;
  border: none;
  background: transparent;
  padding: 0;
  margin: 0;
  cursor: pointer;
  border-radius: 6px;
  outline: none;
}

@keyframes boink {
  0% {
    transform: scale(1);
  }
  35% {
    transform: scale(1.12);
  }
  60% {
    transform: scale(0.96);
  }
  100% {
    transform: scale(1);
  }
}

.bookshelf-hit.boink,
.cat-hit.boink,
.clock-hit.boink {
  animation: boink 0.4s ease;
}

.bookshelf-hit {
  left: 4.83%;
  top: 27.63%;
  width: 18.98%;
  height: 51.57%;
}

/* Geen apart getekend knopje in deze tekening, dus een gewoon zichtbaar
   knopje net onder de boekenkast. */
.book-tip-submit-btn {
  position: absolute;
  left: 4.83%;
  top: 80.5%;
  width: max-content;
  max-width: 40%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.25em;
  padding: 0.35em 0.6em;
  border: 1.5px solid var(--ink-brown);
  border-radius: 999px;
  background: #fff;
  color: var(--ink-brown);
  font-family: 'Public Sans', sans-serif;
  font-weight: bold;
  font-size: clamp(0.4rem, 1.6cqw, 0.8rem);
  cursor: pointer;
  box-shadow: 0 4px 10px var(--shadow);
}

.book-tip-submit-btn::after {
  content: '+ Tip insturen';
  white-space: nowrap;
}

.typewriter-hit {
  left: 42.1%;
  top: 63.54%;
  width: 13.11%;
  height: 6.45%;
}

.typewriter-hint {
  position: absolute;
  left: 25%;
  top: 56.2%;
  width: 50%;
  margin: 0;
  text-align: center;
  white-space: nowrap;
  font-family: 'Public Sans', sans-serif;
  font-style: italic;
  color: var(--ink-brown);
  font-size: clamp(0.35rem, 1.5cqw, 0.78rem);
  line-height: 1.2;
  pointer-events: none;
}

.cat-hit {
  left: 82.47%;
  top: 66.3%;
  width: 10.7%;
  height: 19.8%;
  border-radius: 50%;
}

.clock-hit {
  left: 79.42%;
  top: 31.54%;
  width: 11.91%;
  height: 15.89%;
  border-radius: 50%;
}

/* De klok in de tekening staat stil op een vast tijdstip. Om 'm toch de
   echte tijd te laten wijzen, dekken we alleen het wijzerplaatje zelf af
   met een effen kleurtje en tekenen we er zelf werkende wijzers overheen —
   de buitenste cirkel van de tekening blijft zichtbaar. De klok blijft
   aanklikbaar via .clock-hit, dat hier los overheen ligt. */
.clock-face-mask {
  position: absolute;
  left: 80.12%;
  top: 32.48%;
  width: 10.49%;
  height: 13.99%;
  border-radius: 50%;
  background: #fff;
  pointer-events: none;
}

.clock-tick {
  position: absolute;
  background: var(--ink-brown);
  border-radius: 1px;
}

.tick-12,
.tick-6 {
  left: 50%;
  width: 3%;
  height: 8%;
  margin-left: -1.5%;
}

.tick-12 {
  top: 7%;
}

.tick-6 {
  bottom: 7%;
}

.tick-3,
.tick-9 {
  top: 50%;
  width: 8%;
  height: 3%;
  margin-top: -1.5%;
}

.tick-3 {
  right: 7%;
}

.tick-9 {
  left: 7%;
}

.clock-hand {
  position: absolute;
  left: 50%;
  bottom: 50%;
  transform-origin: bottom center;
  background: var(--ink-brown);
  border-radius: 2px;
}

.clock-hour {
  width: 5%;
  height: 26%;
  margin-left: -2.5%;
}

.clock-minute {
  width: 3.5%;
  height: 37%;
  margin-left: -1.75%;
}

.clock-second {
  width: 2%;
  height: 40%;
  margin-left: -1%;
  background: var(--btn-primary);
}

.clock-center {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 8%;
  height: 8%;
  border-radius: 50%;
  background: var(--ink-brown);
  transform: translate(-50%, -50%);
}

/* Geen teruglink getekend in deze illustratie, dus een gewone zichtbare
   kop erboven — op elk schermformaat, net als bij de etalage. */
.site-header.room-header {
  background: none;
  box-shadow: none;
  padding: 1.2rem 1rem;
}

.site-header.room-header::after {
  content: none;
}

/* Spreekbelletje bij het tikken op de boekenkast, de klok of de poes */
.room-bubble {
  position: absolute;
  z-index: 20;
  max-width: 260px;
  padding: 0.8rem 1.1rem;
  background: var(--parchment);
  border: 2px solid var(--paper-border);
  border-radius: 10px;
  box-shadow: 0 6px 14px var(--shadow);
  color: var(--ink-brown);
  font-family: 'Public Sans', sans-serif;
  font-style: italic;
  font-weight: 600;
  font-size: 1.05rem;
  line-height: 1.45;
  text-align: center;
  transform: translateX(-50%);
  pointer-events: none;
}

.room-bubble::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 8px solid transparent;
  border-top-color: var(--paper-border);
}