/* The active town keeps its original coordinate plane. Extra land continues
   north, so new neighborhoods can open without squeezing the current crew. */
.island-game .map-scroll { align-items:flex-start; }
.island-game .map-surface {
  width:calc(min(100%,(100dvh - var(--hud-height) - var(--dock-height) - env(safe-area-inset-bottom) - 52px) * 1.275524) * var(--map-scale));
  flex-basis:calc(min(100%,(100dvh - var(--hud-height) - var(--dock-height) - env(safe-area-inset-bottom) - 52px) * 1.275524) * var(--map-scale));
  height:auto;
  aspect-ratio:1600 / 1430;
}
.map-art-picture { display:contents; }
.island-game .world-art { object-fit:contain; }
.current-region {
  position:absolute;
  left:0;
  top:23.076923%;
  width:100%;
  height:76.923077%;
  pointer-events:none;
}
.current-region > button { pointer-events:auto; }
.future-map-pin {
  position:absolute;
  left:50%;
  top:17%;
  z-index:3;
  display:flex;
  align-items:center;
  gap:8px;
  width:max-content;
  min-height:46px;
  padding:10px 14px;
  border:2px solid var(--ink);
  border-radius:16px;
  color:var(--ink);
  background:var(--cream);
  box-shadow:0 4px 0 #10161630;
  transform:translate(-50%,-50%);
  font:800 14px/1.15 Arial,Helvetica,sans-serif;
  white-space:nowrap;
}
.future-map-pin > span { font-size:20px; }
.future-map-pin:hover { background:#e9daf3; }
.future-map-pin:active { transform:translate(-50%,-50%); }
.future-map-pin:focus-visible { outline:3px solid #2877f2; outline-offset:4px; }
.future-region-info { text-align:center; }
.future-region-info p { margin:12px auto 24px; max-width:25ch; font-size:19px; }
.future-region-lock { display:block; font-size:60px; line-height:1.2; }
.future-region-info .primary-button { width:100%; }
@media(max-width:740px) and (orientation:portrait) {
  .island-game .map-surface {
    width:calc(min(100%,(100dvh - var(--hud-height) - var(--dock-height) - env(safe-area-inset-bottom) - 52px) * .717483) * var(--map-scale));
    flex-basis:calc(min(100%,(100dvh - var(--hud-height) - var(--dock-height) - env(safe-area-inset-bottom) - 52px) * .717483) * var(--map-scale));
    height:auto;
    aspect-ratio:900 / 1430;
  }
  .island-game .district-pin.resident-pin { width:96px; min-height:100px; }
  .pin-characters { height:clamp(64px,calc((100dvh - var(--hud-height) - var(--dock-height) - env(safe-area-inset-bottom) - 52px) * .114),74px); }
  .pin-character { height:clamp(60px,calc((100dvh - var(--hud-height) - var(--dock-height) - env(safe-area-inset-bottom) - 52px) * .108),70px); max-width:84px; }
  .island-game .district-pin.resident-pin .pin-name { max-width:96px; font-size:11.5px; line-height:1.05; padding:3px 4px; }
  .pin-companions { bottom:16px; }
  .island-game .resident-pin[data-district=gothberry] { top:20%!important; }
  .island-game .resident-pin[data-district=razz] { top:19%!important; }
  .island-game .resident-pin[data-district=sour] { top:45%!important; }
  .island-game .resident-pin[data-district=grape] { top:70%!important; }
  .island-game .resident-pin[data-district=melon] { top:27%!important; }
  .island-game .resident-pin[data-district=citrus] { top:52%!important; }
  .island-game .resident-pin[data-district=peach] { top:77%!important; }
  .island-game .resident-pin[data-district=tropical] { top:84%!important; }
  .future-map-pin { min-height:44px; padding:9px 12px; font-size:13px; }
  .island-tools { flex-direction:column; }
}
@media(max-width:360px) and (orientation:portrait) {
  .island-game .district-pin.resident-pin { min-height:96px; }
  .pin-characters { height:64px; }
  .pin-character { height:60px; max-width:76px; }
  .pin-companions { bottom:13px; }
  .pin-companions .portrait { width:23px; height:23px; flex-basis:23px; }
}
@media(max-width:740px) and (max-height:620px) and (orientation:portrait) {
  .island-game .district-pin.resident-pin { width:80px; min-height:86px; }
  .pin-characters { height:52px; }
  .pin-character { height:48px; max-width:64px; }
  .pin-companions { bottom:10px; right:-1px; }
  .pin-companions .portrait { width:20px; height:20px; flex-basis:20px; }
  .island-game .district-pin.resident-pin .pin-name { max-width:80px; font-size:11px; padding-inline:3px; }
  .island-game .flavor-club-pin { width:82px; max-width:82px; min-height:70px; }
  .island-game .resident-pin[data-district=sour] { top:47%!important; }
  .island-game .resident-pin[data-district=grape] { top:74%!important; }
  .island-game .resident-pin[data-district=melon] { top:26%!important; }
  .island-game .resident-pin[data-district=citrus] { top:53%!important; }
  .island-game .resident-pin[data-district=peach] { top:80%!important; }
  .island-game .resident-pin[data-district=tropical] { top:85%!important; }
}
@media(min-width:741px) and (min-height:521px) {
  .island-game .district-pin.resident-pin { min-height:98px; width:104px; }
  .pin-characters { height:64px; }
  .pin-character { height:60px; max-width:82px; }
  .pin-companions { bottom:12px; }
  .pin-companions .portrait { width:24px; height:24px; flex-basis:24px; }
  .island-game .district-pin.resident-pin .pin-name { max-width:104px; }
  .island-game .flavor-club-pin { width:102px; max-width:102px; min-height:80px; }
}
@media(max-height:520px) and (orientation:landscape) {
  .island-game .map-surface {
    width:calc(min(100%,600px) * var(--map-scale));
    flex-basis:calc(min(100%,600px) * var(--map-scale));
    height:auto;
    aspect-ratio:1600 / 1430;
  }
  .future-map-pin { top:17%; min-height:38px; padding:6px 10px; font-size:12px; }
  .island-game .resident-pin[data-district=gothberry] { left:24%!important; top:20%!important; }
  .island-game .resident-pin[data-district=razz] { left:47%!important; top:21%!important; }
  .island-game .resident-pin[data-district=melon] { left:76%!important; top:29%!important; }
  .island-game .resident-pin[data-district=citrus] { left:77%!important; top:53%!important; }
  .island-game .resident-pin[data-district=sour] { left:26%!important; top:44%!important; }
  .island-game .resident-pin[data-district=grape] { left:24%!important; top:68%!important; }
  .island-game .resident-pin[data-district=tropical] { left:49%!important; top:80%!important; }
  .island-game .resident-pin[data-district=peach] { left:75%!important; top:77%!important; }
}