/* The approved WaterBreak crew lives on the map. The island expands to the
   phone's play area instead of sitting in a short, centered image strip. */
.island-game {
  min-height:0;
}
.island-game .map-scroll {
  height:calc(100% - 52px);
  min-height:0;
  align-items:safe center;
  overflow:auto;
}
.island-game .map-surface {
  width:calc(min(100%,(100dvh - var(--hud-height) - var(--dock-height) - env(safe-area-inset-bottom) - 52px)*1.454545) * var(--map-scale));
  flex-basis:calc(min(100%,(100dvh - var(--hud-height) - var(--dock-height) - env(safe-area-inset-bottom) - 52px)*1.454545) * var(--map-scale));
  flex-shrink:0;
}
.island-game .district-pin.resident-pin {
  display:flex;
  align-items:center;
  justify-content:flex-end;
  flex-direction:column;
  gap:0;
  width:112px;
  min-width:0!important;
  min-height:116px;
  padding:0;
  border:0;
  border-radius:18px;
  background:transparent;
  box-shadow:none;
  overflow:visible;
  isolation:isolate;
}
.island-game .district-pin.resident-pin:after {
  display:none;
}
.island-game .district-pin.resident-pin:hover,
.island-game .district-pin.resident-pin.crop-ready,
.island-game .district-pin.resident-pin.needs-water {
  background:transparent;
  filter:none;
}
.island-game .district-pin.resident-pin:focus-visible {
  outline:3px solid var(--ink);
  outline-offset:5px;
  background:#fffdf54d;
}
.pin-characters {
  position:relative;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  width:100%;
  height:82px;
  margin-bottom:1px;
  transform-origin:50% 100%;
  animation:oh-resident-bob 3.8s ease-in-out infinite;
}
.pin-character {
  display:block;
  width:auto;
  height:78px;
  max-width:94px;
  object-fit:contain;
  object-position:center bottom;
  filter:drop-shadow(0 3px 0 #10161640) drop-shadow(0 0 1px #fffdf5);
  pointer-events:none;
  user-select:none;
  -webkit-user-drag:none;
}
.pin-companions {
  position:absolute;
  right:-1px;
  bottom:18px;
  z-index:2;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  pointer-events:none;
}
.pin-companions .portrait {
  width:29px;
  height:29px;
  flex:0 0 29px;
  margin-left:-7px;
  border:2px solid var(--cream);
  box-shadow:0 0 0 1.5px var(--ink),0 3px 0 #10161635;
  background-color:var(--district,var(--cream));
}
.island-game .district-pin.resident-pin .pin-name {
  display:flex;
  align-items:center;
  justify-content:center;
  width:max-content;
  max-width:112px;
  min-height:32px;
  padding:4px 8px;
  border:1.5px solid var(--ink);
  border-bottom:3px solid var(--ink);
  border-radius:10px;
  background:var(--cream);
  color:var(--ink);
  font:800 13px/1.1 Arial,Helvetica,sans-serif;
  letter-spacing:-.2px;
  text-align:center;
  white-space:normal;
  text-wrap:balance;
  box-shadow:0 2px 0 #10161625;
}
.resident-pin .pin-residents {
  padding:2px 4px;
  font-size:11px;
  font-weight:800;
  color:var(--ink);
  background:var(--cream);
  border-radius:6px;
}
.island-game .resident-pin .pin-alert {
  top:18px;
  right:0;
  z-index:4;
  min-width:25px;
  height:25px;
  font-size:13px;
}
.island-game .resident-pin .pin-alert.water {
  left:0;
  right:auto;
}
.resident-pin[data-district=gothberry] .pin-characters { animation-delay:-.6s; }
.resident-pin[data-district=razz] .pin-characters { animation-delay:-1.3s; }
.resident-pin[data-district=melon] .pin-characters { animation-delay:-2.1s; }
.resident-pin[data-district=citrus] .pin-characters { animation-delay:-.9s; }
.resident-pin[data-district=tropical] .pin-characters { animation-delay:-2.9s; }
.resident-pin[data-district=grape] .pin-characters { animation-delay:-1.8s; }
.resident-pin[data-district=sour] .pin-characters { animation-delay:-3.3s; }
@keyframes oh-resident-bob {
  0%,100% { transform:translateY(0) rotate(-.35deg); }
  50% { transform:translateY(-3px) rotate(.35deg); }
}
@media(max-width:740px) and (orientation:portrait) {
  .island-game .map-scroll {
    height:calc(100% - 52px);
    align-items:flex-start;
  }
  .island-game .map-surface {
    width:calc(100% * var(--map-scale));
    flex-basis:calc(100% * var(--map-scale));
    height:calc((100dvh - var(--hud-height) - var(--dock-height) - env(safe-area-inset-bottom) - 52px) * var(--map-scale));
    min-height:0;
    aspect-ratio:auto;
    margin-block:0;
  }
  .island-game .world-art { width:100%; height:100%; object-fit:fill; }
  .island-game .district-pin.resident-pin {
    width:102px;
    min-height:126px;
  }
  .pin-characters { height:91px; }
  .pin-character { height:87px; max-width:92px; }
  .pin-companions { right:0; bottom:20px; }
  .pin-companions .portrait { width:27px; height:27px; flex-basis:27px; }
  .island-game .district-pin.resident-pin .pin-name {
    max-width:102px;
    min-height:32px;
    padding:4px 6px;
    font-size:12px;
    line-height:1.12;
  }
  .island-game .resident-pin[data-district=gothberry],
  .island-game .resident-pin[data-district=sour],
  .island-game .resident-pin[data-district=grape] { left:20%!important; }
  .island-game .resident-pin[data-district=razz],
  .island-game .resident-pin[data-district=tropical] { left:50%!important; }
  .island-game .resident-pin[data-district=melon],
  .island-game .resident-pin[data-district=citrus],
  .island-game .resident-pin[data-district=peach] { left:80%!important; }
  .island-game .resident-pin[data-district=gothberry] { top:24%!important; }
  .island-game .resident-pin[data-district=razz] { top:20%!important; }
  .island-game .resident-pin[data-district=melon] { top:27%!important; }
  .island-game .resident-pin[data-district=citrus] { top:51%!important; }
  .island-game .resident-pin[data-district=peach] { top:76%!important; }
  .island-game .resident-pin[data-district=tropical] { top:84%!important; }
  .island-game .resident-pin[data-district=grape] { top:67%!important; }
  .island-game .factory-map-pin { width:86px; max-width:86px; min-height:62px; }
  .island-tools { flex-direction:row; top:9px; right:9px; gap:6px; }
  .island-tools button { width:44px; height:44px; min-height:44px; }
  .island-statusbar { bottom:9px; }
}
@media(max-width:360px) and (orientation:portrait) {
  .island-game .district-pin.resident-pin { width:92px; min-height:116px; }
  .pin-characters { height:82px; }
  .pin-character { height:79px; max-width:82px; }
  .island-game .district-pin.resident-pin .pin-name { max-width:92px; padding-inline:4px; font-size:12px; }
  .pin-companions { right:-1px; bottom:16px; }
  .pin-companions .portrait { width:24px; height:24px; flex-basis:24px; }
  .island-game .factory-map-pin { width:80px; max-width:80px; }
}
@media(max-width:740px) and (max-height:740px) and (orientation:portrait) {
  .island-tools { display:none; }
  .island-game .district-pin.resident-pin { min-height:100px; }
  .pin-characters { height:67px; }
  .pin-character { height:64px; max-width:78px; }
  .pin-companions { bottom:12px; }
  .pin-companions .portrait { width:24px; height:24px; flex-basis:24px; }
  .island-game .resident-pin[data-district=gothberry] { top:18%!important; }
  .island-game .resident-pin[data-district=razz] { top:15%!important; }
  .island-game .resident-pin[data-district=melon] { top:17%!important; }
  .island-game .resident-pin[data-district=sour],
  .island-game .resident-pin[data-district=citrus] { top:45%!important; }
  .island-game .resident-pin[data-district=grape] { top:72%!important; }
  .island-game .resident-pin[data-district=peach] { top:73%!important; }
  .island-game .resident-pin[data-district=tropical] { top:85%!important; }
}
/* A short landscape phone keeps two clear character rows around the facility. */
@media(max-height:520px) and (min-width:560px) and (orientation:landscape) {
  .map-first-shell { --hud-height:56px; --dock-height:64px; }
  .map-first-shell .game-hud { padding-block:5px; }
  .hud-brand img { height:34px; }
  .island-game .map-scroll { height:calc(100% - 44px); align-items:flex-start; }
  .island-game .map-surface {
    width:calc(100% * var(--map-scale));
    flex-basis:calc(100% * var(--map-scale));
    height:calc((100dvh - var(--hud-height) - var(--dock-height) - env(safe-area-inset-bottom) - 44px) * var(--map-scale));
    aspect-ratio:auto;
    margin-block:0;
  }
  .island-game .district-pin.resident-pin { width:104px; min-height:75px; }
  .pin-characters { height:49px; }
  .pin-character { height:48px; max-width:64px; }
  .pin-companions { right:10px; bottom:6px; }
  .pin-companions .portrait { width:22px; height:22px; flex-basis:22px; border-width:1.5px; }
  .island-game .district-pin.resident-pin .pin-name { max-width:104px; min-height:26px; padding:3px 6px; font-size:12px; }
  .island-game .resident-pin .pin-alert { top:1px; right:10px; height:22px; min-width:22px; font-size:12px; }
  .island-game .resident-pin .pin-alert.water { left:10px; }
  .island-game .resident-pin[data-district=gothberry] { left:11%!important; top:25%!important; }
  .island-game .resident-pin[data-district=razz] { left:32%!important; top:25%!important; }
  .island-game .resident-pin[data-district=melon] { left:68%!important; top:25%!important; }
  .island-game .resident-pin[data-district=citrus] { left:89%!important; top:25%!important; }
  .island-game .resident-pin[data-district=sour] { left:11%!important; top:77%!important; }
  .island-game .resident-pin[data-district=grape] { left:32%!important; top:77%!important; }
  .island-game .resident-pin[data-district=tropical] { left:68%!important; top:77%!important; }
  .island-game .resident-pin[data-district=peach] { left:89%!important; top:77%!important; }
  .island-game .factory-map-pin { left:50%!important; top:51%!important; width:84px; min-height:55px; padding:5px; }
  .island-game .factory-map-pin>span { font-size:23px; }
  .island-game .factory-map-pin strong { font-size:12px; }
  .island-tools { flex-direction:row; top:4px; right:5px; gap:5px; }
  .island-tools button { width:36px; height:36px; min-height:36px; }
  .island-statusbar { bottom:5px; gap:6px; }
  .island-statusbar button { min-height:34px; padding:6px 12px; font-size:12px; }
}
@media(prefers-reduced-motion:reduce) {
  .pin-characters { animation:none; }
}
/* Keep full character figures clear of the next place's label on wide maps. */
@media(min-width:741px) and (min-height:521px) {
  .island-game .resident-pin[data-district=gothberry] { top:20%!important; }
  .island-game .resident-pin[data-district=sour] { top:44%!important; }
  .island-game .resident-pin[data-district=grape] { top:68%!important; }
  .island-game .resident-pin[data-district=razz] { top:21%!important; }
  .island-game .resident-pin[data-district=melon] { top:29%!important; }
  .island-game .resident-pin[data-district=citrus] { top:53%!important; }
  .island-game .resident-pin[data-district=peach] { top:77%!important; }
  .island-game .resident-pin[data-district=tropical] { top:80%!important; }
}