.preloader__half {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  background-color: #fff;
  background-image: url(../textures/paper-texture.webp);
  background-size: cover;
  background-position: center;
  will-change: transform;
  filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.1));
}
.achievement-popup {
  position: fixed;
  bottom: 32px;
  left: 50%;
  transform: translate(-50%) translateY(100px);
  opacity: 0;
  pointer-events: none;
  z-index: 110;
  background: #fff;
  padding: 12px 24px;
  display: flex;
  align-items: center;
  gap: 16px;
}
.achievement-popup:before {
  content: "";
  position: absolute;
  top: -20%;
  left: -20%;
  width: 140%;
  height: 140%;
  background: url(../textures/paper-texture.webp) center center;
  background-size: cover;
  z-index: -1;
  pointer-events: none;
}
.achievement-popup {
  clip-path: polygon(
    0% 0%,
    100% 0%,
    100% 0%,
    98% 10%,
    100% 20%,
    97% 35%,
    100% 50%,
    98% 65%,
    100% 80%,
    97% 90%,
    100% 100%,
    90% 97%,
    80% 100%,
    70% 96%,
    60% 100%,
    50% 97%,
    40% 100%,
    30% 96%,
    20% 100%,
    10% 97%,
    0% 100%,
    0% 100%,
    2% 90%,
    0% 80%,
    3% 65%,
    0% 50%,
    2% 35%,
    0% 20%,
    3% 10%,
    0% 0%
  );
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.15));
  animation: popupEnter 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}
.achievement-popup.hiding {
  animation: popupExit 0.4s ease forwards;
}
.achievement-popup .popup-border {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 10;
}
.achievement-popup .popup-content {
  display: flex;
  align-items: center;
  gap: 16px;
  position: relative;
  z-index: 1;
}
.achievement-popup .checkbox {
  width: 24px;
  height: 24px;
  border: 2px solid #1a1a1a;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
}
.achievement-popup .checkbox.checked {
  animation: bounceCheck 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.achievement-popup .checkbox .checkmark {
  width: 18px;
  height: 18px;
  background: transparent;
  stroke-dasharray: 24;
  stroke-dashoffset: 24;
  animation: drawCheck 0.3s ease forwards 0.1s;
}
.achievement-popup .text-content {
  display: flex;
  flex-direction: column;
}
.achievement-popup .text-content .title {
  font-family:
    Patrick Hand,
    cursive,
    sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: #1a1a1a;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 2px;
}
.achievement-popup .text-content .description {
  font-size: 13px;
  color: #444;
  line-height: 1.4;
}
.achievement-popup .text-content .description .inline-sound-toggle {
  background: none;
  border: none;
  padding: 0;
  margin-left: 4px;
  font-family:
    Patrick Hand,
    cursive,
    sans-serif;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  text-decoration: underline;
  text-decoration-style: dashed;
  text-underline-offset: 3px;
  transition:
    opacity 0.2s ease,
    transform 0.2s ease;
  display: inline-flex;
  align-items: center;
}
.achievement-popup .text-content .description .inline-sound-toggle.on {
  color: #1a1a1a;
}
.achievement-popup .text-content .description .inline-sound-toggle.off {
  color: #888;
}
.achievement-popup .text-content .description .inline-sound-toggle:hover {
  opacity: 0.7;
  transform: scale(1.05);
}
@keyframes popupEnter {
  0% {
    opacity: 0;
    transform: translate(-50%) translateY(50px);
  }
  to {
    opacity: 1;
    transform: translate(-50%) translateY(0);
  }
}
@keyframes popupExit {
  0% {
    opacity: 1;
    transform: translate(-50%) translateY(0);
  }
  to {
    opacity: 0;
    transform: translate(-50%) translateY(20px);
  }
}
@keyframes drawCheck {
  to {
    stroke-dashoffset: 0;
  }
}
@keyframes bounceCheck {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.2);
  }
  to {
    transform: scale(1);
  }
}
@media (max-width: 768px) {
  .achievement-popup {
    bottom: 24px;
    padding: 10px 16px;
  }
  .achievement-popup .text-content .title {
    font-size: 13px;
  }
  .achievement-popup .text-content .description {
    font-size: 12px;
  }
}
.achievements-panel {
  position: fixed;
  top: 0;
  right: 24px;
  width: 280px;
  filter: drop-shadow(0 4px 15px rgba(0, 0, 0, 0.15));
  opacity: 0;
  pointer-events: none;
  transform: translateY(-100%);
  transition:
    transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
    opacity 0.3s ease;
  z-index: 95;
}
.achievements-panel.open {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
.achievements-panel .achievements-card {
  position: relative;
  width: 100%;
  padding: 18px 16px 20px;
  background: #fff;
  overflow: hidden;
}
.achievements-panel .achievements-card:before {
  content: "";
  position: absolute;
  top: -20%;
  left: -20%;
  width: 140%;
  height: 140%;
  background: url(../textures/paper-texture.webp) center center;
  background-size: cover;
  z-index: -1;
  pointer-events: none;
}
.achievements-panel .achievements-card:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 10;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M0 0 L100 0 L98 10 L100 20 L97 35 L100 50 L98 65 L100 80 L97 90 L100 100 L90 97 L80 100 L70 96 L60 100 L50 97 L40 100 L30 96 L20 100 L10 97 L0 100 L2 90 L0 80 L3 65 L0 50 L2 35 L0 20 L3 10 L0 0 Z' fill='none' stroke='%231a1a1a' stroke-width='0.5'/%3E%3C/svg%3E");
  background-size: 100% 100%;
}
.achievements-panel .achievements-card {
  clip-path: polygon(
    0% 0%,
    100% 0%,
    100% 0%,
    98% 10%,
    100% 20%,
    97% 35%,
    100% 50%,
    98% 65%,
    100% 80%,
    97% 90%,
    100% 100%,
    90% 97%,
    80% 100%,
    70% 96%,
    60% 100%,
    50% 97%,
    40% 100%,
    30% 96%,
    20% 100%,
    10% 97%,
    0% 100%,
    0% 100%,
    2% 90%,
    0% 80%,
    3% 65%,
    0% 50%,
    2% 35%,
    0% 20%,
    3% 10%,
    0% 0%
  );
}
.achievements-panel .achievements-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 2px dashed #bbb;
  position: relative;
  z-index: 1;
}
.achievements-panel .achievements-header h3 {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 1.5px;
  color: #1a1a1a;
  font-family:
    Patrick Hand,
    cursive,
    sans-serif;
}
.achievements-panel .achievements-header .close-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  background: transparent;
  border: none;
  cursor: pointer;
  opacity: 0.6;
  transition:
    transform 0.2s,
    opacity 0.2s;
}
.achievements-panel .achievements-header .close-btn svg {
  width: 14px;
  height: 14px;
  stroke: #1a1a1a;
  stroke-width: 2.5;
  fill: none;
  stroke-linecap: round;
}
.achievements-panel .achievements-header .close-btn:hover {
  opacity: 1;
  transform: scale(1.1);
}
.achievements-panel .achievements-header .close-btn:active {
  transform: scale(0.95);
}
.achievements-panel .achievements-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  position: relative;
  z-index: 1;
  max-height: 50vh;
  overflow-y: auto;
  padding-right: 4px;
  scrollbar-width: thin;
  scrollbar-color: #ccc transparent;
}
.achievements-panel .achievements-list::-webkit-scrollbar {
  width: 4px;
}
.achievements-panel .achievements-list::-webkit-scrollbar-thumb {
  background-color: #ccc;
  border-radius: 2px;
}
.achievements-panel .achievement-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px 0;
}
.achievements-panel .achievement-item.locked {
  opacity: 0.5;
}
.achievements-panel .achievement-item.locked .achievement-title {
  color: #555;
}
.achievements-panel .achievement-item.locked .achievement-label {
  color: #777;
}
.achievements-panel .achievement-item .achievement-icon {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.achievements-panel .achievement-item .achievement-icon svg {
  width: 100%;
  height: 100%;
}
.achievements-panel .achievement-item .achievement-text {
  display: flex;
  flex-direction: column;
}
.achievements-panel .achievement-item .achievement-text .achievement-title {
  font-family:
    Patrick Hand,
    cursive,
    sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: #1a1a1a;
  letter-spacing: 0.5px;
  margin-bottom: 1px;
}
.achievements-panel .achievement-item .achievement-text .achievement-label {
  font-size: 12px;
  color: #444;
  line-height: 1.2;
}
.achievements-panel .achievements-footer {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 2px dashed #bbb;
  text-align: center;
  font-family:
    Patrick Hand,
    cursive,
    sans-serif;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 1px;
  color: #1a1a1a;
  position: relative;
  z-index: 1;
}
@media (max-width: 768px) {
  .achievements-panel {
    right: 16px;
    width: 260px;
  }
}
.navigation-ui {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 100;
}
.navigation-ui button,
.navigation-ui .map-panel,
.navigation-ui .audio-panel,
.navigation-ui .menu-overlay {
  pointer-events: auto;
}
.nav-btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 55px;
  padding-top: 8px;
  background: transparent;
  border: none;
  cursor: pointer;
  transition: transform 0.2s ease;
  overflow: visible;
}
.nav-btn:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background:
    linear-gradient(#ffffff73, #ffffff73),
    url(../textures/paper-texture.webp) center center;
  background-size: cover;
  z-index: -1;
  clip-path: polygon(
    0% 0%,
    100% 0%,
    100% 0%,
    98% 10%,
    100% 20%,
    97% 35%,
    100% 50%,
    98% 65%,
    100% 80%,
    97% 90%,
    100% 100%,
    90% 97%,
    80% 100%,
    70% 96%,
    60% 100%,
    50% 97%,
    40% 100%,
    30% 96%,
    20% 100%,
    10% 97%,
    0% 100%,
    0% 100%,
    2% 90%,
    0% 80%,
    3% 65%,
    0% 50%,
    2% 35%,
    0% 20%,
    3% 10%,
    0% 0%
  );
}
.nav-btn:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 50 55' preserveAspectRatio='none'%3E%3Cpath d='M0 0 L50 0 L49 5.5 L50 11 L48.5 19 L50 27.5 L49 36 L50 44 L48.5 49.5 L50 55 L45 54 L40 55 L35 53 L30 55 L25 54 L20 55 L15 53 L10 55 L5 54 L0 55 L1 49.5 L0 44 L1.5 36 L0 27.5 L1 19 L0 11 L1.5 5.5 L0 0 Z' fill='none' stroke='%231a1a1a' stroke-width='1.5'/%3E%3C/svg%3E");
  background-size: 100% 100%;
}
.nav-btn {
  box-shadow: 0 3px 10px #0000001a;
}
.nav-btn:hover {
  transform: translateY(-2px);
}
.nav-btn:active {
  transform: translateY(1px);
}
.nav-btn svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: #1a1a1a;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  z-index: 1;
}
.back-btn {
  position: fixed;
  top: 0;
  left: 24px;
  animation: fadeSlideDown 0.3s ease-out;
  transition:
    transform 0.3s ease,
    opacity 0.3s ease;
}
.back-btn.exiting {
  transform: translateY(-100%);
  opacity: 0;
  pointer-events: none;
}
@keyframes fadeSlideDown {
  0% {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.nav-controls {
  position: fixed;
  top: 0;
  right: 24px;
  display: flex;
  gap: 12px;
  transition:
    transform 0.3s ease,
    opacity 0.3s ease;
  animation: slideDownEntrance 0.4s ease-out;
}
@keyframes slideDownEntrance {
  0% {
    opacity: 0;
    transform: translateY(-100%);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.nav-controls.menu-open {
  transform: translateY(-100%);
  opacity: 0;
  pointer-events: none;
}
.nav-controls.ui-hidden {
  transform: translateY(-120%);
  opacity: 0;
  pointer-events: none;
  transition:
    transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
    opacity 0.3s ease;
}
.hamburger-btn .hamburger-icon {
  display: flex;
  flex-direction: column;
  gap: 5px;
  width: 20px;
}
.hamburger-btn .hamburger-icon span {
  display: block;
  height: 2px;
  width: 100%;
  background: #1a1a1a;
  border-radius: 2px;
}
.map-panel {
  position: fixed;
  top: 0;
  left: 50%;
  transform: translate(-50%) translateY(-100%);
  width: 90%;
  max-width: 500px;
  border: none;
  border-radius: 0;
  filter: drop-shadow(0 4px 20px rgba(0, 0, 0, 0.15));
  opacity: 0;
  pointer-events: none;
  transition:
    transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
    opacity 0.3s ease;
}
.map-panel.open {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%) translateY(0);
}
.map-panel .map-content-clipped {
  position: relative;
  width: 100%;
  height: 100%;
  padding: 20px 20px 30px;
  background: #fff;
}
.map-panel .map-content-clipped:before {
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: url(../textures/paper-texture.webp) center center;
  background-size: cover;
  transform: rotate(90deg);
  z-index: -1;
  pointer-events: none;
}
.map-panel .map-content-clipped {
  clip-path: polygon(
    0% 0%,
    100% 0%,
    100% 0%,
    99% 3%,
    100% 6%,
    98% 10%,
    100% 14%,
    99% 18%,
    100% 22%,
    98% 26%,
    100% 30%,
    99% 35%,
    100% 40%,
    98% 45%,
    100% 50%,
    99% 55%,
    100% 60%,
    98% 65%,
    100% 70%,
    99% 75%,
    100% 80%,
    98% 85%,
    100% 90%,
    99% 95%,
    100% 100%,
    96% 99%,
    92% 100%,
    88% 98%,
    84% 100%,
    80% 99%,
    76% 100%,
    72% 98%,
    68% 100%,
    64% 99%,
    60% 100%,
    56% 98%,
    52% 100%,
    48% 99%,
    44% 100%,
    40% 98%,
    36% 100%,
    32% 99%,
    28% 100%,
    24% 98%,
    20% 100%,
    16% 99%,
    12% 100%,
    8% 98%,
    4% 100%,
    0% 99%,
    0.5% 99.5%,
    1% 95%,
    0% 90%,
    2% 85%,
    0% 80%,
    1% 75%,
    0% 70%,
    2% 65%,
    0% 60%,
    1% 55%,
    0% 50%,
    2% 45%,
    0% 40%,
    1% 35%,
    0% 30%,
    2% 26%,
    0% 22%,
    1% 18%,
    0% 14%,
    2% 10%,
    0% 6%,
    1% 3%,
    0% 0%
  );
}
.map-panel .map-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 2px dashed #ccc;
}
.map-panel .map-header h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #1a1a1a;
  font-family:
    Patrick Hand,
    cursive,
    sans-serif;
}
.map-panel .map-header .close-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background: transparent;
  border: none;
  cursor: pointer;
  transition:
    transform 0.2s ease,
    opacity 0.2s ease;
  opacity: 0.6;
}
.map-panel .map-header .close-btn svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: #1a1a1a;
  stroke-width: 2.5;
  stroke-linecap: round;
}
.map-panel .map-header .close-btn:hover {
  opacity: 1;
  transform: scale(1.1);
}
.map-panel .map-header .close-btn:active {
  transform: scale(0.95);
}
.map-panel .map-container {
  position: relative;
  width: 100%;
  border-radius: 8px;
  overflow: hidden;
}
.map-panel .map-image {
  display: block;
  width: 100%;
  height: auto;
  pointer-events: none;
}
.map-panel .painted-map-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}
.map-panel .map-hover-zone {
  position: absolute;
  z-index: 2;
  cursor: pointer;
  background: transparent;
  border: none;
  padding: 0;
  margin: 0;
  outline: none;
  appearance: none;
  font: inherit;
  color: inherit;
}
.map-panel .zone-about {
  top: 0;
  left: 0;
  width: 30%;
  height: 35%;
  margin-top: 20%;
  margin-left: 10%;
}
.map-panel .zone-gallery {
  bottom: 0;
  left: 0;
  width: 30%;
  height: 35%;
  margin-bottom: 8%;
  margin-left: 10%;
}
.map-panel .zone-contact {
  top: 0;
  right: 0;
  width: 35%;
  height: 25%;
  margin-top: 10%;
  margin-right: 5%;
}
.map-panel .zone-studio {
  bottom: 0;
  right: 0;
  width: 25%;
  height: 40%;
  margin-bottom: 19%;
  margin-right: 15%;
}
.map-panel .map-room-label {
  position: absolute;
  font-family:
    Cabin Sketch,
    cursive,
    sans-serif;
  font-size: 1.2rem;
  font-weight: 700;
  color: #1a1a1a;
  pointer-events: none;
  z-index: 4;
  text-transform: uppercase;
  letter-spacing: 2px;
  transform: translate(-50%, -50%);
  text-align: center;
  text-shadow:
    -1px -1px 0 #fff,
    1px -1px 0 #fff,
    -1px 1px 0 #fff,
    1px 1px 0 #fff;
}
.map-panel .map-room-label.about {
  top: 28%;
  left: 26%;
}
.map-panel .map-room-label.gallery {
  top: 94%;
  left: 26%;
}
.map-panel .map-room-label.contact {
  top: 14%;
  left: 76%;
}
.map-panel .map-room-label.studio {
  top: 75%;
  left: 72%;
}
.map-panel .pin-slot {
  position: absolute;
  transform: translate(-50%, -50%);
  width: 35px;
  height: 35px;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
  transition: transform 0.2s ease;
  z-index: 2;
}
.map-panel .pin-slot .slot-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.map-panel .pin-slot:hover {
  transform: translate(-50%, -50%) scale(1.15);
}
.map-panel .pin-slot.active {
  filter: drop-shadow(0 0 4px rgba(200, 50, 50, 0.5));
}
.map-panel .pin-marker {
  position: absolute;
  transform: translate(-50%, -90%);
  width: 20px;
  height: auto;
  z-index: 3;
  pointer-events: none;
  transition:
    left 0.4s ease,
    top 0.4s ease;
}
.map-panel .pin-marker .pin-image {
  width: 100%;
  height: auto;
  filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, 0.3));
}
.audio-panel {
  position: fixed;
  top: 0;
  right: 24px;
  width: 220px;
  filter: drop-shadow(0 4px 15px rgba(0, 0, 0, 0.15));
  opacity: 0;
  pointer-events: none;
  transform: translateY(-100%);
  transition:
    transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
    opacity 0.3s ease;
  z-index: 95;
}
.audio-panel.open {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
.audio-panel .audio-card {
  position: relative;
  width: 100%;
  padding: 18px 16px 20px;
  background: #fff;
  overflow: hidden;
}
.audio-panel .audio-card:before {
  content: "";
  position: absolute;
  top: -20%;
  left: -20%;
  width: 140%;
  height: 140%;
  background: url(../textures/paper-texture.webp) center center;
  background-size: cover;
  z-index: -1;
  pointer-events: none;
}
.audio-panel .audio-card:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 10;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M0 0 L100 0 L98 10 L100 20 L97 35 L100 50 L98 65 L100 80 L97 90 L100 100 L90 97 L80 100 L70 96 L60 100 L50 97 L40 100 L30 96 L20 100 L10 97 L0 100 L2 90 L0 80 L3 65 L0 50 L2 35 L0 20 L3 10 L0 0 Z' fill='none' stroke='%231a1a1a' stroke-width='0.5'/%3E%3C/svg%3E");
  background-size: 100% 100%;
}
.audio-panel .audio-card {
  clip-path: polygon(
    0% 0%,
    100% 0%,
    100% 0%,
    98% 10%,
    100% 20%,
    97% 35%,
    100% 50%,
    98% 65%,
    100% 80%,
    97% 90%,
    100% 100%,
    90% 97%,
    80% 100%,
    70% 96%,
    60% 100%,
    50% 97%,
    40% 100%,
    30% 96%,
    20% 100%,
    10% 97%,
    0% 100%,
    0% 100%,
    2% 90%,
    0% 80%,
    3% 65%,
    0% 50%,
    2% 35%,
    0% 20%,
    3% 10%,
    0% 0%
  );
}
.audio-panel .audio-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 2px dashed #bbb;
  position: relative;
  z-index: 1;
}
.audio-panel .audio-header h3 {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 1.5px;
  color: #1a1a1a;
  font-family:
    Patrick Hand,
    cursive,
    sans-serif;
}
.audio-panel .audio-header .close-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  background: transparent;
  border: none;
  cursor: pointer;
  opacity: 0.6;
  transition:
    transform 0.2s,
    opacity 0.2s;
}
.audio-panel .audio-header .close-btn svg {
  width: 14px;
  height: 14px;
  stroke: #1a1a1a;
  stroke-width: 2.5;
  fill: none;
  stroke-linecap: round;
}
.audio-panel .audio-header .close-btn:hover {
  opacity: 1;
  transform: scale(1.1);
}
.audio-panel .audio-header .close-btn:active {
  transform: scale(0.95);
}
.audio-panel .audio-sliders-container {
  display: flex;
  flex-direction: column;
  gap: 16px;
  position: relative;
  z-index: 1;
}
.audio-panel .audio-sliders-container .slider-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.audio-panel .audio-sliders-container .slider-group .slider-label {
  display: flex;
  justify-content: space-between;
  font-family:
    Patrick Hand,
    cursive,
    sans-serif;
  font-size: 14px;
  color: #1a1a1a;
  font-weight: 600;
}
.audio-panel .audio-sliders-container .slider-group .paper-slider {
  appearance: none;
  width: 100%;
  height: 4px;
  background: #ccc;
  border-radius: 2px;
  outline: none;
  cursor: pointer;
}
.audio-panel
  .audio-sliders-container
  .slider-group
  .paper-slider::-webkit-slider-thumb {
  appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #1a1a1a;
  cursor: pointer;
  box-shadow: 1px 1px 2px #0000004d;
}
.audio-panel
  .audio-sliders-container
  .slider-group
  .paper-slider::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #1a1a1a;
  cursor: pointer;
  box-shadow: 1px 1px 2px #0000004d;
  border: none;
}
.menu-overlay {
  position: fixed;
  inset: 0;
  background: transparent;
  z-index: -1;
}
@keyframes hintFadeIn {
  0% {
    opacity: 0;
    transform: translate(-50%) translateY(20px);
  }
  to {
    opacity: 1;
    transform: translate(-50%) translateY(0);
  }
}
.entrance-hint {
  position: fixed;
  bottom: 32px;
  left: 50%;
  transform: translate(-50%);
  display: flex;
  gap: 24px;
  padding: 16px 24px;
  background: #ffffffe6;
  border: 2px solid #1a1a1a;
  border-radius: 12px;
  box-shadow: 3px 3px #1a1a1a;
  font-size: 14px;
  color: #1a1a1a;
  pointer-events: auto;
  animation: hintFadeIn 0.5s ease-out;
}
.entrance-hint span {
  display: flex;
  align-items: center;
  gap: 8px;
}
.corridor-hint {
  position: fixed;
  bottom: 32px;
  left: 50%;
  transform: translate(-50%);
  display: flex;
  gap: 24px;
  padding: 16px 24px;
  background: #ffffffe6;
  border: 2px solid #1a1a1a;
  border-radius: 12px;
  box-shadow: 3px 3px #1a1a1a;
  font-size: 14px;
  color: #1a1a1a;
  pointer-events: auto;
  animation:
    corridorHintFadeIn 0.5s ease-out,
    corridorHintFadeOut 0.5s ease-out 3.5s forwards;
}
.corridor-hint span {
  display: flex;
  align-items: center;
  gap: 8px;
}
@keyframes corridorHintFadeIn {
  0% {
    opacity: 0;
    transform: translate(-50%) translateY(20px);
  }
  to {
    opacity: 1;
    transform: translate(-50%) translateY(0);
  }
}
@keyframes corridorHintFadeOut {
  to {
    opacity: 0;
    transform: translate(-50%) translateY(10px);
  }
}
@media (max-width: 768px) {
  .nav-btn {
    width: 45px;
    height: 50px;
  }
  .back-btn {
    left: 16px;
  }
  .nav-controls {
    right: 16px;
    gap: 8px;
  }
  .audio-panel {
    right: 16px;
  }
  .map-panel {
    width: 95%;
    max-width: none;
  }
  .map-panel .map-header h3 {
    font-size: 14px;
  }
  .map-panel .close-btn {
    width: 28px;
    height: 28px;
  }
  .entrance-hint,
  .corridor-hint {
    gap: 8px;
    bottom: 24px;
    padding: 12px 20px;
    font-size: 13px;
  }
}
@media (max-width: 480px) {
  .map-panel {
    width: 100%;
  }
}
@font-face {
  font-family: Cabin Sketch;
  src: url(../fonts/CabinSketch-Bold.ttf) format("truetype");
  font-weight: 700;
  font-style: normal;
}
@font-face {
  font-family: Cabin Sketch;
  src: url(../fonts/CabinSketch-Regular.ttf) format("truetype");
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: Rubik Scribble;
  src: url(../fonts/RubikScribble-Regular.ttf) format("truetype");
  font-weight: 400;
  font-style: normal;
}
.studio-paper-card {
  position: relative;
  background: #fff;
}
.studio-paper-card:before {
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: url(../textures/paper-texture.webp) center center;
  background-size: cover;
  transform: rotate(90deg);
  z-index: -1;
  pointer-events: none;
}
.studio-paper-card {
  clip-path: polygon(
    0% 0%,
    4% 1%,
    8% 0%,
    12% 1%,
    16% 0%,
    20% 1%,
    24% 0%,
    28% 1%,
    32% 0%,
    36% 1%,
    40% 0%,
    44% 1%,
    48% 0%,
    52% 1%,
    56% 0%,
    60% 1%,
    64% 0%,
    68% 1%,
    72% 0%,
    76% 1%,
    80% 0%,
    84% 1%,
    88% 0%,
    92% 1%,
    96% 0%,
    100% 0%,
    100% 0%,
    99% 3%,
    100% 6%,
    98% 10%,
    100% 14%,
    99% 18%,
    100% 22%,
    98% 26%,
    100% 30%,
    99% 35%,
    100% 40%,
    98% 45%,
    100% 50%,
    99% 55%,
    100% 60%,
    98% 65%,
    100% 70%,
    99% 75%,
    100% 80%,
    98% 85%,
    100% 90%,
    99% 95%,
    100% 100%,
    96% 99%,
    92% 100%,
    88% 98%,
    84% 100%,
    80% 99%,
    76% 100%,
    72% 98%,
    68% 100%,
    64% 99%,
    60% 100%,
    56% 98%,
    52% 100%,
    48% 99%,
    44% 100%,
    40% 98%,
    36% 100%,
    32% 99%,
    28% 100%,
    24% 98%,
    20% 100%,
    16% 99%,
    12% 100%,
    8% 98%,
    4% 100%,
    0% 99%,
    0.5% 99.5%,
    1% 95%,
    0% 90%,
    2% 85%,
    0% 80%,
    1% 75%,
    0% 70%,
    2% 65%,
    0% 60%,
    1% 55%,
    0% 50%,
    2% 45%,
    0% 40%,
    1% 35%,
    0% 30%,
    2% 26%,
    0% 22%,
    1% 18%,
    0% 14%,
    2% 10%,
    0% 6%,
    1% 3%,
    0% 0%
  );
}
.studio-close-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: transparent;
  border: none;
  cursor: pointer;
  transition:
    transform 0.2s ease,
    opacity 0.2s ease;
  opacity: 0.7;
  flex-shrink: 0;
  margin-left: 1rem;
}
.studio-close-btn svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: #1a1a1a;
  stroke-width: 2.5;
  stroke-linecap: round;
}
.studio-close-btn:hover {
  opacity: 1;
  transform: scale(1.1);
}
.studio-close-btn:active {
  transform: scale(0.95);
}
.studio-media-container {
  width: 100%;
  margin-top: 10px;
  margin-bottom: 5px;
  border: 2px solid #1a1a1a;
  border-radius: 4px;
  overflow: hidden;
  background: #000;
  position: relative;
  padding-top: 56.25%;
}
.studio-media-container iframe,
.studio-media-container video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
}
.studio-media-container .thumbnail-placeholder {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #e0e0e0;
  color: #666;
  font-family:
    Rubik Scribble,
    cursive;
  font-weight: 700;
  font-size: 1.5rem;
}
.studio-action-button {
  display: block;
  width: 100%;
  padding: 0.8rem;
  background: transparent;
  border: 2px solid #1a1a1a;
  color: #1a1a1a;
  text-align: center;
  text-decoration: none;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-size: 1.2rem;
  font-family:
    Cabin Sketch,
    cursive;
  transition: all 0.2s;
  cursor: pointer;
  margin-top: auto;
  border-radius: 2px 255px 3px/255px 5px 225px 3px;
}
.studio-action-button:hover {
  background: #1a1a1a;
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 4px 4px #1a1a1a33;
}
.studio-action-button:active {
  transform: translateY(1px);
  box-shadow: 2px 2px #1a1a1a33;
}
.awards-scroll-container {
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.awards-scroll-container::-webkit-scrollbar {
  display: none;
}
.torn-scroll-track {
  position: absolute;
  right: 0;
  top: 0;
  width: 30px;
  height: 100%;
  pointer-events: none;
  z-index: 15;
  overflow: visible;
}
.torn-scroll-line {
  position: absolute;
  right: 8px;
  top: 5%;
  height: 90%;
  width: 2px;
  background: repeating-linear-gradient(
    to bottom,
    rgba(26, 26, 26, 0.2) 0px,
    rgba(26, 26, 26, 0.2) 4px,
    transparent 4px,
    transparent 8px
  );
}
.torn-scroll-thumb {
  position: absolute;
  right: 2px;
  width: 16px;
  height: 32px;
  pointer-events: auto;
  cursor: grab;
  transition: transform 0.08s ease-out;
}
.torn-scroll-thumb:before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 14px;
  height: 28px;
  background: #1a1a1a26;
  border: 1.5px solid rgba(26, 26, 26, 0.4);
  border-radius: 3px 255px 4px/255px 4px 225px 3px;
  transition:
    background 0.2s ease,
    border-color 0.2s ease;
}
.torn-scroll-thumb:after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 6px;
  height: 12px;
  background: repeating-linear-gradient(
    to bottom,
    rgba(26, 26, 26, 0.35) 0px,
    rgba(26, 26, 26, 0.35) 1px,
    transparent 1px,
    transparent 3px
  );
}
.torn-scroll-thumb:hover:before {
  background: #1a1a1a40;
  border-color: #1a1a1a8c;
}
.torn-scroll-thumb:active {
  cursor: grabbing;
}
.torn-scroll-thumb:active:before {
  background: #1a1a1a59;
  border-color: #1a1a1aa6;
}
.sr-overlay {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}
.sr-overlay button,
.sr-overlay a {
  pointer-events: auto;
}
.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}
.sr-focusable:focus {
  position: fixed !important;
  top: 8px;
  left: 8px;
  width: auto !important;
  height: auto !important;
  padding: 12px 20px !important;
  margin: 0 !important;
  overflow: visible !important;
  clip: auto !important;
  white-space: normal !important;
  z-index: 10000;
  background: #1a1a1a;
  color: #fff;
  font-size: 14px;
  font-family: Inter, sans-serif;
  font-weight: 600;
  border-radius: 8px;
  text-decoration: none;
  box-shadow: 0 4px 12px #0000004d;
}
*,
*:before,
*:after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
html {
  font-size: 16px;
}
@media (max-width: 767px) {
  html {
    font-size: 14px;
  }
}
body {
  font-family:
    Inter,
    -apple-system,
    BlinkMacSystemFont,
    sans-serif;
  background-color: #fafafa;
  color: #0a0a0a;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
body::-webkit-scrollbar {
  display: none;
}
.app {
  width: 100%;
  height: 100vh;
  height: 100dvh;
  position: relative;
  overflow: hidden;
}
.canvas-wrapper {
  position: absolute;
  inset: 0;
  z-index: 1;
}
.ui-overlay {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 50;
}
.scroll-hint {
  position: absolute;
  bottom: 2rem;
  left: 50%;
  transform: translate(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  animation: fadeIn 1s ease 0.5s both;
}
.scroll-hint__text {
  font-family: Caveat, cursive;
  font-size: 1rem;
  color: #666;
}
.scroll-hint__arrow {
  font-size: 1.5rem;
  color: #0a0a0a;
  animation: bounce 2s ease infinite;
}
.instructions {
  position: absolute;
  bottom: 1rem;
  right: 1rem;
}
.instructions p {
  font-family: Caveat, cursive;
  font-size: 0.9rem;
  color: #888;
  background: #ffffffe6;
  padding: 0.5rem 1rem;
  border-radius: 20px;
  border: 1px solid #eee;
}
@media (max-width: 767px) {
  .instructions {
    bottom: auto;
    top: 1rem;
    right: 1rem;
  }
  .instructions p {
    font-size: 0.75rem;
  }
}
@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes bounce {
  0%,
  20%,
  50%,
  80%,
  to {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-8px);
  }
  60% {
    transform: translateY(-4px);
  }
}
.ui-overlay,
.scroll-hint,
.instructions {
  -webkit-user-select: none;
  user-select: none;
}
a {
  color: inherit;
  text-decoration: none;
}
button {
  background: none;
  border: none;
  cursor: pointer;
  font: inherit;
  color: inherit;
}
.preloader {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 100;
  pointer-events: auto;
  cursor: auto;
}
.preloader__half {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  background-color: #fff;
  background-image: url(../textures/paper-texture.webp);
  background-size: cover;
  background-position: center;
  will-change: transform;
  filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.1));
}
.preloader__half--left {
  left: 0;
}
.preloader__half--right {
  right: 0;
}
.preloader__overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10;
  pointer-events: none;
}
.preloader__percentage {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: Caveat, cursive;
  font-size: 2rem;
  color: #0a0a0a;
  z-index: 20;
  mix-blend-mode: multiply;
}