/* Illustrated Knusperhaus facade. The 24 .wk-flap buttons stay the doors. */

.wk-knusper.wk-house {
  background: transparent;
  border: 0;
  box-shadow: none;
  transform: rotate(-1.15deg);
  transform-origin: 62% 88%;
  border-radius: 22px;
  margin: 21rem 0.45rem 0.45rem;
  padding: 1.15rem 1.45rem 1.25rem;
  overflow: visible;
  filter: none;
}

.wk-knusper.wk-house::after {
  content: none;
}

.wk-knusper > .wk-roof,
.wk-knusper > .wk-chimney,
.wk-knusper > .wk-sweets,
.wk-knusper > .wk-icing,
.wk-knusper > .wk-cane,
.wk-knusper > .wk-pretzel,
.wk-knusper > .wk-lolli,
.wk-knusper > .wk-ledge {
  display: none;
}

.wk-house-art,
.wk-house-art * {
  pointer-events: none;
}

.wk-house-art {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: visible;
}

.wk-art-wall {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  overflow: visible;
  border-radius: 22px;
}

.wk-art-roof {
  position: absolute;
  left: -11%;
  width: 122%;
  height: auto;
  aspect-ratio: 1180 / 470;
  top: 0;
  transform: translateY(calc(-100% + 16px)) rotate(-0.7deg);
  transform-origin: 50% 100%;
  z-index: 2;
  overflow: visible;
}

.wk-art-plinth {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 26px;
  z-index: 3;
  border-radius: 0 0 18px 18px;
  background:
    radial-gradient(circle at 8% 0, #fffef8 0 9px, transparent 10px),
    radial-gradient(circle at 22% 0, #fffef8 0 11px, transparent 12px),
    radial-gradient(circle at 38% 0, #fffef8 0 8px, transparent 9px),
    radial-gradient(circle at 54% 0, #fffef8 0 12px, transparent 13px),
    radial-gradient(circle at 70% 0, #fffef8 0 9px, transparent 10px),
    radial-gradient(circle at 86% 0, #fffef8 0 11px, transparent 12px),
    linear-gradient(#fffef8, #f3e7d2);
  box-shadow: inset 0 3px 0 rgba(255, 255, 255, 0.8), 0 4px 0 #e6d3ae;
}

.wk-art-cane {
  position: absolute;
  top: -0.35rem;
  bottom: 0.55rem;
  width: 15px;
  border-radius: 9px;
  z-index: 6;
  background: repeating-linear-gradient(#fffef8 0 9px, #d3122f 9px 18px);
  box-shadow:
    inset -3px 0 0 rgba(120, 12, 18, 0.28),
    inset 3px 0 0 rgba(255, 255, 255, 0.45),
    2px 3px 0 rgba(70, 24, 10, 0.22);
}

.wk-art-cane--l { left: -2px; }
.wk-art-cane--r { right: -2px; }

.wk-art-hook {
  position: absolute;
  top: -8px;
  width: 52px;
  height: 58px;
  overflow: visible;
}

.wk-art-cane--l .wk-art-hook { left: -20px; }
.wk-art-cane--r .wk-art-hook { right: -20px; }

.wk-art-base {
  position: absolute;
  left: 7%;
  right: 7%;
  bottom: 2px;
  z-index: 4;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  pointer-events: none;
}

.wk-art-drop {
  display: block;
  width: 16px;
  height: 20px;
  border-radius: 10px 10px 8px 8px;
  background: #e23b4a;
  box-shadow:
    inset 4px 4px 0 rgba(255, 255, 255, 0.45),
    inset -3px -4px 0 rgba(80, 16, 16, 0.18),
    0 2px 0 rgba(70, 28, 10, 0.25);
}

.wk-art-mint {
  display: block;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background:
    conic-gradient(#fffef8 0 25%, #e03138 0 50%, #fffef8 0 75%, #e03138 0 100%);
  box-shadow: 0 0 0 1.5px #f0d7a6, 0 2px 0 rgba(70, 28, 10, 0.22);
}

.wk-knusper .wk-windows {
  position: relative;
  z-index: 5;
  gap: 0.52rem 0.48rem;
}

.wk-knusper .wk-slot .wk-flap,
.wk-knusper .wk-slot.is-shut .wk-flap,
.wk-knusper .wk-slot.is-today .wk-flap,
.wk-knusper .wk-d5 .wk-flap,
.wk-knusper .wk-d12 .wk-flap,
.wk-knusper .wk-d16 .wk-flap,
.wk-knusper .wk-d20 .wk-flap,
.wk-knusper .wk-d24 .wk-flap {
  border: 4px solid #fffef8;
  border-radius: 15px 15px 6px 6px;
  color: #5c2414;
  background-color: var(--wk-b, #e7a04a);
  background-image:
    linear-gradient(118deg, transparent 0 46%, rgba(255, 255, 255, 0.55) 49%, transparent 52%),
    url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 100'%3E%3Cpath d='M8 98V38Q8 8 40 8Q72 8 72 38V98' fill='none' stroke='%235c3016' stroke-width='3.2'/%3E%3Cpath d='M8 62H72M8 84H72M26 38V98M40 8V98M54 38V98M18 48L40 66L62 48' fill='none' stroke='%235c3016' stroke-width='1.35' opacity='.72'/%3E%3Cpath d='M22 24Q40 14 58 24' fill='none' stroke='%23fff' stroke-width='2' opacity='.55'/%3E%3C/svg%3E"),
    radial-gradient(circle at 30% 26%, rgba(255, 255, 255, 0.78), transparent 26%),
    linear-gradient(168deg, var(--wk-c, #fff3cf) 0%, var(--wk-a, #ffd27a) 40%, var(--wk-b, #e0893a) 100%);
  background-size: auto, 100% 100%, auto, auto;
  background-repeat: no-repeat;
  background-position: center, center, center, center;
  background-clip: padding-box;
  box-shadow:
    0 0 0 2px #e7c98a,
    inset 0 0 0 1px rgba(255, 255, 255, 0.65),
    inset 0 -10px 14px rgba(80, 36, 12, 0.12),
    0 3px 0 #7a4320;
}

.wk-knusper .wk-flap::before {
  content: "";
  position: absolute;
  left: 8%;
  right: 8%;
  top: 0;
  height: 8px;
  z-index: 2;
  pointer-events: none;
  background: #fffef8;
  clip-path: polygon(0 0, 100% 0, 100% 35%, 88% 100%, 74% 40%, 60% 100%, 46% 32%, 32% 100%, 18% 42%, 6% 100%, 0 35%);
}

.wk-knusper .wk-d2 .wk-flap,
.wk-knusper .wk-d8 .wk-flap,
.wk-knusper .wk-d10 .wk-flap,
.wk-knusper .wk-d11 .wk-flap,
.wk-knusper .wk-d14 .wk-flap,
.wk-knusper .wk-d18 .wk-flap,
.wk-knusper .wk-d19 .wk-flap {
  border-radius: 50%;
}

.wk-knusper .wk-d2 .wk-flap::before,
.wk-knusper .wk-d8 .wk-flap::before,
.wk-knusper .wk-d10 .wk-flap::before,
.wk-knusper .wk-d11 .wk-flap::before,
.wk-knusper .wk-d14 .wk-flap::before,
.wk-knusper .wk-d18 .wk-flap::before,
.wk-knusper .wk-d19 .wk-flap::before {
  display: none;
}

.wk-knusper .wk-d3 .wk-flap,
.wk-knusper .wk-d7 .wk-flap,
.wk-knusper .wk-d13 .wk-flap,
.wk-knusper .wk-d22 .wk-flap {
  border-radius: 42px 42px 8px 8px;
}

.wk-knusper .wk-slot.is-shut .wk-flap {
  box-shadow:
    0 0 0 2px #e7c98a,
    inset 0 0 0 1px rgba(255, 255, 255, 0.4),
    0 3px 0 #7a4320;
}

.wk-knusper .wk-slot.is-shut .wk-flap::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 252, 246, 0.38), rgba(255, 244, 226, 0.12));
}

.wk-knusper .wk-slot.is-today .wk-flap {
  box-shadow:
    0 0 0 2px #fffef8,
    0 0 0 5px #f0c14b,
    0 0 22px rgba(255, 186, 70, 0.95),
    inset 0 0 12px rgba(255, 244, 210, 0.65);
}

.wk-knusper .wk-door__no,
.wk-knusper .wk-door__label {
  position: relative;
  z-index: 1;
  color: #6a1c14;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.85), 0 0 6px rgba(255, 255, 255, 0.75);
}

.wk-knusper .wk-knob {
  width: 0.58rem;
  height: 0.74rem;
  border-radius: 45% 45% 42% 42%;
  background:
    radial-gradient(circle at 35% 28%, #fff 0 2px, transparent 3px),
    linear-gradient(#ff8fa0, #d01238);
  box-shadow: inset -1px -2px 0 rgba(80, 0, 16, 0.25), 0 1px 0 rgba(0, 0, 0, 0.2);
}

.wk-knusper .wk-d1 { --wk-c: #fff4cc; --wk-a: #ffe08a; --wk-b: #f0962a; }
.wk-knusper .wk-d2 { --wk-c: #fff0f4; --wk-a: #ffc0d4; --wk-b: #e44878; }
.wk-knusper .wk-d3 { --wk-c: #f3fff6; --wk-a: #c8f6d8; --wk-b: #2f9d62; }
.wk-knusper .wk-d4 { --wk-c: #f7f2ff; --wk-a: #e0d0ff; --wk-b: #7a52d0; }
.wk-knusper .wk-d5 { --wk-c: #fffceb; --wk-a: #fff4b0; --wk-b: #e2b020; }
.wk-knusper .wk-d6 { --wk-c: #fff5f7; --wk-a: #ffb0c4; --wk-b: #c42048; }
.wk-knusper .wk-d7 { --wk-c: #f2fffd; --wk-a: #b8f4ee; --wk-b: #1f8f86; }
.wk-knusper .wk-d8 { --wk-c: #fff6ef; --wk-a: #ffd0b4; --wk-b: #e07038; }
.wk-knusper .wk-d9 { --wk-c: #fff5fc; --wk-a: #f6c8ef; --wk-b: #b44e9a; }
.wk-knusper .wk-d10 { --wk-c: #fff8ea; --wk-a: #ffe0a8; --wk-b: #d48820; }
.wk-knusper .wk-d11 { --wk-c: #f4f7ff; --wk-a: #c8d6ff; --wk-b: #4458c0; }
.wk-knusper .wk-d12 { --wk-c: #fff5f5; --wk-a: #ffb4b8; --wk-b: #d01838; }
.wk-knusper .wk-d13 { --wk-c: #f8fff0; --wk-a: #e4f6b0; --wk-b: #6ea02e; }
.wk-knusper .wk-d14 { --wk-c: #fff4fb; --wk-a: #f0c0e4; --wk-b: #8e3484; }
.wk-knusper .wk-d15 { --wk-c: #fff6ee; --wk-a: #ffd0a4; --wk-b: #e06828; }
.wk-knusper .wk-d16 { --wk-c: #f3fffb; --wk-a: #c6f6e6; --wk-b: #21886c; }
.wk-knusper .wk-d17 { --wk-c: #fffaf0; --wk-a: #ffe6b0; --wk-b: #e09a20; }
.wk-knusper .wk-d18 { --wk-c: #fff5f7; --wk-a: #f8c0cc; --wk-b: #a81838; }
.wk-knusper .wk-d19 { --wk-c: #f5f7ff; --wk-a: #d0dcff; --wk-b: #4e62c4; }
.wk-knusper .wk-d20 { --wk-c: #fff6ee; --wk-a: #ffd0a0; --wk-b: #e06018; }
.wk-knusper .wk-d21 { --wk-c: #fff5f8; --wk-a: #ffc0d0; --wk-b: #d03058; }
.wk-knusper .wk-d22 { --wk-c: #f7fff2; --wk-a: #daf2bc; --wk-b: #4e9234; }
.wk-knusper .wk-d23 { --wk-c: #faf6ff; --wk-a: #e4d0ff; --wk-b: #7040b4; }
.wk-knusper .wk-d24 { --wk-c: #fff4f0; --wk-a: #ffc8b8; --wk-b: #e05040; }

.wk-knusper .wk-interior {
  border: 4px solid #fffaf3;
  box-shadow: 0 0 0 3px #e6c98a, inset 0 0 0 1px #f3e2c0;
}

@media (max-width: 720px) {
  .wk-knusper.wk-house {
    margin-top: 13.5rem;
    padding: 0.85rem 1.05rem 1rem;
  }
  .wk-art-cane { width: 12px; }
  .wk-art-hook { width: 42px; height: 46px; }
  .wk-art-drop { width: 12px; height: 15px; }
  .wk-art-mint { width: 12px; height: 12px; }
}

@media (max-width: 420px) {
  .wk-knusper.wk-house { margin-top: 10.5rem; }
}