/* Reframe the five illustrated chambers of the original guild map for touch screens. */
@media (max-width: 900px) {
  .masthead { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; }
  .masthead h1 { position: static; transform: none; margin: 0; }
  .masthead-logo { width: min(100%, 115px); }
  .masthead .quick-nav { gap: 8px; }
  .list-mode .dungeon-map {
    padding: 14px 0 24px;
    background-color: #151513;
    background-image: linear-gradient(#bba7870c 1px, transparent 1px),
                      linear-gradient(90deg, #bba7870c 1px, transparent 1px);
    background-size: 22px 22px;
  }
  .list-mode .rooms {
    width: min(100%, 620px);
    margin-inline: auto;
    display: grid;
    gap: clamp(16px, 5vw, 30px);
    isolation: isolate;
  }
  .list-mode .rooms::before {
    content: "";
    position: absolute;
    inset: 6% auto 6% 50%;
    width: 22px;
    transform: translateX(-50%);
    border-inline: 3px double #8e8067;
    background: repeating-linear-gradient(to bottom, #ac5b42 0 7px, transparent 7px 14px) center / 2px 100% no-repeat,
                repeating-linear-gradient(0deg, #292722 0 12px, #474238 13px 14px);
    z-index: -1;
  }
  .list-mode .rooms .room {
    min-width: 0;
    min-height: clamp(280px, 73vw, 405px);
    padding: clamp(36px, 9vw, 54px) 13%;
    gap: 9px;
    grid-template-rows: auto minmax(0, 1fr) auto;
    border: 0;
  }
  .list-mode .rooms .room::before {
    content: "";
    inset: 0;
    opacity: 1;
    transition: none;
    pointer-events: none;
    background: url('/assets/guild-map.webp') var(--chamber-position) / var(--chamber-size) no-repeat;
    clip-path: var(--chamber-outline);
  }
  .room-guild {
    --chamber-position: 0% 0%; --chamber-size: 233% 236%;
    --chamber-outline: polygon(0 0,100% 0,100% 60%,84% 66%,69% 94%,35% 100%,2% 89%);
  }
  .room-events {
    --chamber-position: 100% 0%; --chamber-size: 232% 216%;
    --chamber-outline: polygon(0 0,100% 0,100% 94%,73% 100%,38% 95%,0 71%);
  }
  .room-greyhawk {
    --chamber-position: 50% 52%; --chamber-size: 211% 190%;
    --chamber-outline: polygon(2% 25%,20% 9%,36% 4%,49% 9%,63% 2%,86% 11%,100% 40%,97% 74%,77% 88%,50% 100%,21% 88%,1% 70%);
  }
  .room-adventures {
    --chamber-position: 0% 100%; --chamber-size: 244% 237%;
    --chamber-outline: polygon(0 5%,37% 1%,55% 9%,83% 13%,99% 40%,96% 98%,0 100%);
  }
  .room-commissions {
    --chamber-position: 100% 100%; --chamber-size: 240% 237%;
    --chamber-outline: polygon(8% 18%,51% 4%,87% 1%,100% 19%,100% 100%,0 100%,0 61%);
  }
  .list-mode .rooms .room h2 { align-self: end; justify-self: start; padding: 2px 6px; background: #201c17db; font-size: clamp(18px, 4.8vw, 26px); text-shadow: 0 1px 5px #15120f; }
  .list-mode .rooms .room-guild h2 { height: auto; }
  .list-mode .rooms .guild-room-logo { height: 45px; width: 125px; }
  .list-mode .rooms .room .room-body { min-width: 0; height: auto; align-self: center; gap: 5%; }
  .list-mode .rooms .room .polaroid { width: 43%; height: auto; }
  .list-mode .rooms .room .room-note { font-size: clamp(13px, 3.7vw, 18px); }
  .list-mode .rooms .room .room-action { color: #f5e7c9; background: #201c17eb; padding: 3px 8px; }
  .list-mode .rooms .room-greyhawk { padding: clamp(55px, 14vw, 78px) 18%; }
  .list-mode .rooms .room-greyhawk h2 { color: #332519; background: #e8d4a7ed; text-shadow: none; }
  .list-mode .rooms .room-greyhawk .room-body { padding: 0; }
  .list-mode .rooms .territory-pair span { min-height: clamp(70px, 19vw, 115px); }
  .list-mode .rooms .room:focus-visible { outline: 3px solid #f1cf83; outline-offset: -4px; }
}

.room-greyhawk h2:has(.greyhawk-room-logo) {
  display: inline-flex; align-items: center; gap: .28em; max-width: 100%;
}
.room-greyhawk .greyhawk-room-logo {
  display: block; width: clamp(110px, 13vw, 202px); height: auto; min-width: 0;
}
 #room-navigation .room-greyhawk h2 { background: transparent; padding: 0; box-shadow: none; }
#room-navigation .room-greyhawk h2 .room-number { display: none; }
@media (max-width: 900px) {
  .list-mode .room-greyhawk .greyhawk-room-logo { width: clamp(110px, 34vw, 165px); }
  body:not(.list-mode) .room-greyhawk h2:has(.greyhawk-room-logo) { flex-direction: column; gap: 1px; }
  body:not(.list-mode) .room-greyhawk .greyhawk-room-logo { width: clamp(72px, 19vw, 145px); }
}

/* On the Wild Coast road, they kept the map case under the driest cloak. */
html { -webkit-touch-callout: none; }
img, svg, canvas { -webkit-user-drag: none; }