/* [project]/src/app/guilds/_hall/modular-hall.css [app-client] (css) */
.mh-page {
  color: #f6e1af;
  background: #25211c;
  width: 100%;
  height: 100svh;
  min-height: 320px;
  font-family: Special Elite, serif;
  position: relative;
  overflow: hidden;
}

.mh-viewport {
  touch-action: none;
  cursor: grab;
  outline: none;
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.mh-viewport:active {
  cursor: grabbing;
}

.mh-world {
  transform-origin: 0 0;
  isolation: isolate;
  position: absolute;
  top: 0;
  left: 0;
  container-type: inline-size;
}

.mh-room {
  pointer-events: none;
  -webkit-user-select: none;
  user-select: none;
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
}

.mh-activity {
  pointer-events: none;
  margin: 0;
  position: absolute;
}

.mh-activity img {
  -webkit-user-select: none;
  user-select: none;
  width: 100%;
  max-width: none;
  height: auto;
  display: block;
}

.mh-sign {
  z-index: 30;
  color: #fff1bd;
  white-space: nowrap;
  text-shadow: 0 2px 1px #26190e, 1px 0 #26190e, -1px 0 #26190e;
  cursor: pointer;
  background: none;
  border: 0;
  justify-content: center;
  align-items: center;
  gap: .3em;
  padding: 0;
  font-family: Metal Mania, serif;
  font-size: 1.5cqw;
  line-height: 1;
  text-decoration: none;
  display: flex;
  position: absolute;
}

.mh-sign span {
  font-family: Special Elite, serif;
  font-size: .66em;
}

.mh-sign:hover, .mh-sign:focus-visible {
  color: #fff8d8;
  text-shadow: 0 0 7px #f4c965, 0 2px 2px #1a120b;
}

.mh-sign:focus-visible {
  outline-offset: 3px;
  outline: 2px solid #ffe2a0;
}

.mh-sign[data-destination="recruitment"], .mh-sign[data-destination="training"] {
  font-size: 1.35cqw;
}

.mh-banner {
  clip-path: polygon(0 0, 100% 0, 100% 80%, 50% 100%, 0 80%);
  z-index: 1;
  justify-content: center;
  align-items: center;
  width: 6.6%;
  height: 18%;
  display: flex;
  position: absolute;
  top: 9%;
  left: 47.2%;
  box-shadow: inset 10px 0 12px #0004, inset -10px 0 12px #0003;
}

.mh-banner img {
  object-fit: contain;
  max-width: 75%;
  max-height: 65%;
}

.mh-banner span {
  font-family: Metal Mania, serif;
  font-size: 3cqw;
}

.mh-guild-name {
  text-align: center;
  text-shadow: 0 2px 3px #000;
  pointer-events: none;
  max-width: 50%;
  position: absolute;
  top: 18px;
  left: 50%;
  transform: translateX(-50%);
}

.mh-guild-name strong {
  font-family: Metal Mania, serif;
  font-size: clamp(20px, 3vw, 35px);
  display: block;
}

.mh-guild-name span {
  text-transform: uppercase;
  letter-spacing: .2em;
  font-size: 14px;
}

.mh-menu {
  z-index: 50;
  font-family: Metal Mania, serif;
  position: absolute;
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%);
}

.mh-menu summary {
  cursor: pointer;
  background: #271c12e8;
  border: 1px solid #a98a4d;
  border-radius: 4px;
  padding: 10px 18px;
  list-style: none;
  box-shadow: 0 3px 12px #0005;
}

.mh-menu summary::-webkit-details-marker {
  display: none;
}

.mh-menu nav {
  background: #251b12f5;
  border: 1px solid #9d7f48;
  border-radius: 5px;
  width: 220px;
  margin-bottom: 8px;
  padding: 10px;
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
}

.mh-menu a {
  color: #f4ddb0;
  padding: 10px;
  text-decoration: none;
  display: block;
}

.mh-menu a:hover {
  background: #735a323f;
}

.mh-controls {
  z-index: 40;
  gap: 5px;
  display: flex;
  position: absolute;
  bottom: 18px;
  right: 18px;
}

.mh-controls button {
  color: #f7deaa;
  cursor: pointer;
  background: #231b12d9;
  border: 1px solid #a58c60;
  border-radius: 50%;
  width: 44px;
  height: 44px;
  font: 400 23px Special Elite, serif;
}

.mh-controls button:disabled {
  opacity: .5;
  cursor: default;
}

.mh-hint {
  text-shadow: 0 2px 3px #000;
  pointer-events: none;
  margin: 0;
  font-size: 14px;
  position: absolute;
  bottom: 22px;
  left: 18px;
}

.mh-guild-guide {
  color: #f4ddb0;
  text-shadow: 0 2px 3px #000;
  font-size: 16px;
  position: absolute;
  bottom: 75px;
  left: 18px;
}

.mh-preview {
  z-index: 50;
  background: #251b12f5;
  border: 1px solid #a58c60;
  border-radius: 5px;
  width: min(350px, 100% - 36px);
  padding: 16px 18px;
  position: absolute;
  bottom: 78px;
  left: 18px;
  box-shadow: 0 5px 20px #0006;
}

.mh-preview h2 {
  margin: 0 22px 8px 0;
  font-family: Metal Mania, serif;
  font-size: 23px;
}

.mh-preview p {
  margin: 0 0 12px;
  font-size: 16px;
  line-height: 1.5;
}

.mh-enter {
  color: #ffe7ae;
  border-bottom: 1px solid #b89a65;
  font-family: Metal Mania, serif;
  font-size: 22px;
  text-decoration: none;
  display: inline-block;
}

.mh-close {
  color: #f7deaa;
  cursor: pointer;
  background: none;
  border: 0;
  min-width: 44px;
  min-height: 44px;
  font-size: 24px;
  position: absolute;
  top: 6px;
  right: 6px;
}

.mh-loading, .mh-error {
  z-index: 50;
  background: #241b13f5;
  border: 1px solid #9d7f48;
  padding: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.mh-error {
  width: min(380px, 90%);
}

.mh-error button {
  color: #251b12;
  cursor: pointer;
  background: #e6c88c;
  border: 0;
  padding: 10px;
}

.mh-sr {
  clip-path: inset(50%);
  width: 1px;
  height: 1px;
  position: absolute;
  overflow: hidden;
}

.mh-page button:focus-visible, .mh-menu summary:focus-visible, .mh-page a:focus-visible {
  outline-offset: 3px;
  outline: 2px solid #ffe2a0;
}

@media (max-width: 640px) {
  .mh-hint {
    max-width: 250px;
    font-size: 14px;
    bottom: 75px;
  }

  .mh-menu {
    bottom: 16px;
    left: 16px;
    transform: none;
  }

  .mh-menu nav {
    left: 0;
    transform: none;
  }

  .mh-controls {
    bottom: 16px;
    right: 12px;
  }

  .mh-controls button {
    width: 44px;
    height: 44px;
  }

  .mh-preview {
    bottom: 116px;
  }

  .mh-guild-name {
    width: 90%;
    max-width: 90%;
    top: 80px;
  }

  .mh-guild-guide {
    bottom: 100px;
  }

  .mh-sign {
    min-height: 44px;
  }
}

.mh-motion {
  pointer-events: none;
  z-index: 20;
  opacity: 0;
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
}

.mh-page[data-rig-ready="true"] .mh-motion {
  opacity: 1;
}

.mh-page[data-rig-ready="true"] .mh-activity {
  visibility: hidden;
}

.mh-rug {
  pointer-events: none;
  opacity: .88;
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
}

.mh-embroidery {
  pointer-events: none;
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
}

.mh-banner img, .mh-banner span {
  margin-bottom: 30%;
  position: relative;
}

.mh-ground-shadows {
  pointer-events: none;
  z-index: 1;
  position: absolute;
  inset: 0;
}

.mh-ground-shadows i {
  filter: blur(.35cqw);
  background: radial-gradient(#17130ee6 0%, #18130e9c 35%, #17130e00 72%);
  border-radius: 50%;
  position: absolute;
  transform: skewX(-24deg);
}

.mh-room-light {
  z-index: 25;
  pointer-events: none;
  mix-blend-mode: multiply;
  background: radial-gradient(at 17% 84%, #ffe3b0 0%, #fff0d3 16%, #0000 42%), radial-gradient(at 82% 81%, #ffe5bb 0%, #0000 35%), linear-gradient(108deg, #c7c1b62b 0%, #0000 34%, #27212422 65%, #362d2520 100%), linear-gradient(#27201d48 0%, #0000 46% 83%, #1c17283d 100%);
  position: absolute;
  inset: 0;
}

.mh-window-light {
  z-index: 26;
  pointer-events: none;
  mix-blend-mode: screen;
  opacity: .12;
  background: radial-gradient(at 17% 42%, #9bb9ce 0%, #0000 32%), radial-gradient(at 24% 85%, #f1ab45 0%, #0000 27%), radial-gradient(at 85% 83%, #d5a45f 0%, #0000 23%);
  position: absolute;
  inset: 0;
}

.mh-gathering-light {
  z-index: 27;
  pointer-events: none;
  mix-blend-mode: soft-light;
  background: radial-gradient(at 24% 80%, #ffc46ca6 0%, #e6a35145 14%, #0000 33%), radial-gradient(at 76% 79%, #ffd18a90 0%, #e5b16f38 15%, #0000 32%), radial-gradient(at 44% 45%, #ffd58c90 0%, #0000 18%), radial-gradient(at 58% 46%, #ffd58c80 0%, #0000 19%);
  position: absolute;
  inset: 0;
}

.mh-common-rug {
  opacity: .82;
  clip-path: polygon(45.8% 60.7%, 54.7% 60.5%, 55.4% 63%, 58.2% 69%, 60.4% 75%, 64.2% 84%, 68.7% 94%, 70.2% 100%, 30.3% 100%, 32.3% 94%, 35.8% 85%, 39.7% 75%, 42.4% 68%, 44.8% 63%);
}

.mh-room {
  filter: brightness(.94) saturate(.86);
}

.mh-room-light {
  background: linear-gradient(#231b191c, #0000 45% 88%, #231b191c);
}

.mh-window-light {
  opacity: .055;
}

.mh-gathering-light {
  opacity: .42;
}

.mh-banner {
  width: 6.4%;
  height: 11.8%;
  top: 19%;
  left: 46.8%;
}

.mh-candlelights {
  z-index: 2;
  pointer-events: none;
  position: absolute;
  inset: 0;
}

.mh-wick {
  width: 0;
  height: 0;
  position: absolute;
}

.mh-flame {
  transform-origin: 50% 100%;
  width: .3cqw;
  height: .95cqw;
  animation: mh-wick-dance var(--flame-time) ease-in-out var(--phase) infinite;
  background: linear-gradient(0deg, #ffb338, #fff2a9 55%, #fff9dc);
  border-radius: 65% 38% 48% 45%;
  position: absolute;
  bottom: 0;
  left: -.15cqw;
  box-shadow: 0 0 .45cqw .13cqw #ffca6255;
}

.mh-candle-halo {
  mix-blend-mode: screen;
  width: 7cqw;
  height: 8cqw;
  animation: mh-local-light var(--light-time) ease-in-out var(--phase) infinite;
  background: radial-gradient(#ffc46838, #ffbb4510 35%, #0000 70%);
  position: absolute;
  top: -4cqw;
  left: -3.5cqw;
}

@keyframes mh-wick-dance {
  0%, 100% {
    opacity: .82;
    transform: rotate(-4deg)scale(.9, 1);
  }

  17% {
    opacity: .98;
    transform: rotate(5deg)scale(1.08, .85);
  }

  37% {
    opacity: .74;
    transform: rotate(-7deg)scale(.84, 1.13);
  }

  56% {
    opacity: .92;
    transform: rotate(3deg)scale(1, .94);
  }

  79% {
    opacity: .85;
    transform: rotate(-2deg)scale(.91, 1.07);
  }
}

@keyframes mh-local-light {
  0%, 100% {
    opacity: .55;
    transform: scale(.94);
  }

  23% {
    opacity: .82;
    transform: scale(1.05);
  }

  51% {
    opacity: .46;
    transform: scale(.9);
  }

  73% {
    opacity: .7;
    transform: scale(1);
  }
}

.mh-page[data-motion="paused"] .mh-flame, .mh-page[data-motion="paused"] .mh-candle-halo {
  animation-play-state: paused;
}

@media (prefers-reduced-motion: reduce) {
  .mh-flame, .mh-candle-halo {
    animation: none !important;
  }
}

.mh-sign[aria-disabled="true"] {
  cursor: default;
  color: #d6c6a0;
}

.mh-soon {
  color: #e0cfaa;
  font-family: Special Elite, serif;
  font-size: .6em;
  line-height: 1.4;
  position: absolute;
  top: 100%;
}

.mh-menu nav > span[aria-disabled] {
  color: #b4a58d;
  padding: 10px 12px;
}

.mh-enter[aria-disabled] {
  color: #b4a58d;
  border: 0;
}

.mh-page {
  font-synthesis: none;
  font-size: 16px;
  font-weight: 400;
}

.mh-page :is(h1, h2, h3, strong, b) {
  font-weight: 400;
}

.mh-menu nav {
  font-family: Special Elite, serif;
  font-size: 16px;
}

.mh-menu summary {
  box-sizing: border-box;
  min-height: 44px;
}

.mh-controls button, .mh-preview, .mh-error {
  box-sizing: border-box;
}

.mh-viewport {
  container-type: size;
}

.mh-world {
  width: max(100cqw, 177.683cqh);
  height: max(100cqh, 56.2799cqw);
  transform: translate(min(0px, 50cqw - 88.8417cqh), min(0px, 50cqh - 28.14cqw));
}

.mh-navigation-status {
  color: #ffe4a8;
  white-space: nowrap;
  background: #241b13;
  border-radius: 4px;
  margin-inline-start: .5em;
  padding: 3px 7px;
  font-size: 12px;
  line-height: 1.4;
  display: inline-block;
}