/* 手机地图 MVP · 治愈海岛。竖屏 360×800 优先。 */
:root {
  --is-paper: #f4f1e8;
  --is-ink: #2a3a3c;
  --is-sea: #7fa7ab;
  --is-deep: #3d5c61;
  --is-sand: #d8c39a;
  --is-moss: #6f8f6a;
  --is-dusk: #c9846a;
  --is-sky: #d8ebe8;
  --is-line: rgba(61, 92, 97, 0.16);
}

html, body.island-app {
  margin: 0;
  min-height: 100%;
  background: var(--is-sky);
  color: var(--is-ink);
  overflow-x: hidden;
  -webkit-tap-highlight-color: transparent;
}

body.island-app {
  font-family: "Songti SC", "STSong", "Source Han Serif SC", "Noto Serif SC", serif;
}

.island-skip { display: none; }

.island-root {
  position: relative;
  width: min(480px, 100%);
  margin: 0 auto;
  min-height: 100dvh;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background:
    radial-gradient(120% 70% at 50% -10%, #fff8e8 0%, transparent 50%),
    linear-gradient(180deg, #d8ebe8 0%, #e7f0ea 38%, #f4f1e8 100%);
  box-sizing: border-box;
  padding: env(safe-area-inset-top) 0 calc(68px + env(safe-area-inset-bottom));
}

body.island-app.is-playing {
  width: 100%;
  height: 100dvh;
  height: 100vh;
  overflow: hidden;
  background: #b0b7a7;
}

body.island-app.is-playing .island-root {
  width: min(480px, 100%);
  max-width: 480px;
  height: 100dvh;
  height: 100vh;
  min-height: 100dvh;
  padding: 0;
  overflow: hidden;
  background: #b0b7a7;
}

.island-hud {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 14px 8px;
  min-height: 56px;
  box-sizing: border-box;
}

.island-hud-who {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.island-hud-name {
  font-size: 16px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 46vw;
}

.island-hud-lv {
  font-size: 11px;
  letter-spacing: .08em;
  color: var(--is-deep);
}

.island-hud-meters {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

.island-meter {
  min-width: 64px;
  min-height: 44px;
  padding: 6px 10px;
  border-radius: 12px;
  background: rgba(255,255,255,.62);
  border: 1px solid var(--is-line);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.island-meter i {
  font-style: normal;
  font-size: 10px;
  color: var(--is-deep);
}

.island-meter b {
  font-size: 15px;
}

.island-gate, .island-stage {
  flex: 1;
  min-height: 0;
  padding: 8px 16px 12px;
  box-sizing: border-box;
}

.island-gate h1 {
  font-size: 28px;
  font-weight: 500;
  margin: 6px 0 10px;
}

.island-kicker {
  font-size: 10px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #6b8589;
  margin: 0;
}

.island-field {
  display: block;
  margin: 14px 0;
}

.island-field span {
  display: block;
  font-size: 12px;
  color: var(--is-deep);
  margin-bottom: 6px;
}

.island-field textarea {
  width: 100%;
  box-sizing: border-box;
  min-height: 120px;
  border: 1px solid var(--is-line);
  border-radius: 14px;
  padding: 10px 12px;
  font: inherit;
  background: #fffdf8;
  resize: vertical;
}

.island-field [data-pitch].is-on {
  background: #d8ebe8;
}

.island-field input,
.island-composer input,
.island-composer textarea {
  width: 100%;
  box-sizing: border-box;
  min-height: 48px;
  border: 1px solid var(--is-line);
  border-radius: 14px;
  padding: 10px 12px;
  font: inherit;
  background: #fffdf8;
}

.island-row {
  display: flex;
  gap: 10px;
}

.island-btn {
  min-height: 48px;
  min-width: 72px;
  padding: 10px 14px;
  border-radius: 14px;
  border: 1px solid var(--is-line);
  background: #fffdf8;
  color: var(--is-ink);
  font: inherit;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

.island-btn.primary {
  background: var(--is-deep);
  color: #f7f3ea;
  border-color: var(--is-deep);
}

.island-btn.wide { width: 100%; }
.island-btn:disabled { opacity: .45; }

.island-fine {
  font-size: 12px;
  color: #5b7377;
}

.island-gate-hint {
  min-height: 1.4em;
  margin: 10px 0 0;
  font-size: 13px;
  color: #8a4b3a;
}

.island-fallback {
  position: absolute;
  inset: 18% 16px auto;
  padding: 16px;
  border-radius: 16px;
  background: rgba(255, 253, 248, .92);
  text-align: center;
  z-index: 3;
}

.island-fallback b { display: block; font-size: 16px; margin-bottom: 8px; }
.island-fallback p { margin: 0 0 12px; font-size: 13px; color: #3d5c61; }

.island-hidden, [hidden] { display: none !important; }

.island-scene {
  height: calc(100dvh - 210px);
  height: calc(100vh - 210px);
  min-height: 420px;
  border-radius: 22px;
  overflow: hidden;
  position: relative;
  background: #c9ddd8;
  box-shadow: inset 0 0 0 1px var(--is-line);
}

body.island-app.is-playing .island-hud,
body.island-app.is-playing .island-dock {
  display: none !important;
}

body.island-app.is-playing .island-ribbon {
  position: absolute;
  top: calc(52px + env(safe-area-inset-top));
  left: 8px;
  right: 8px;
  z-index: 8;
  padding: 0;
}

body.island-app.is-playing .island-stage {
  position: relative;
  flex: 1;
  min-height: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

body.island-app.is-playing .island-scene {
  flex: 1;
  height: auto;
  min-height: 0;
  border-radius: 0;
  box-shadow: none;
  background: #b0b7a7;
}

body.island-app.is-playing .island-actionbar {
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 8px;
  z-index: 5;
  margin: 0;
  padding: 8px 10px;
  border-radius: 14px;
  background: rgba(255, 253, 248, .9);
  box-sizing: border-box;
}

body.island-app.is-playing.is-yards .island-root {
  padding-bottom: env(safe-area-inset-bottom);
  background: #4aa3d8;
}

body.island-app.is-playing.is-yards .island-scene {
  background: #4aa3d8;
}

body.island-app.is-playing.is-yards .island-actionbar {
  display: none !important;
}

.island-ribbon {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 0 16px 6px;
}

.island-ribbon[hidden] { display: none !important; }

.island-ribbon button {
  border: 0;
  border-radius: 999px;
  background: #c9846a;
  color: #fffdf8;
  min-height: 36px;
  padding: 6px 12px;
  font: inherit;
  font-size: 12px;
}

.island-actionbar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(88px, 1fr));
  gap: 8px;
  margin-top: 10px;
}

.island-actionbar .island-btn { width: 100%; }

.island-dock {
  position: fixed;
  top: auto;
  left: 50%;
  right: auto;
  bottom: 0;
  height: auto;
  width: min(480px, 100%);
  transform: translateX(-50%);
  z-index: 8;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 6px 8px calc(8px + env(safe-area-inset-bottom));
  background: rgba(244, 241, 232, .94);
  border: 0;
  border-top: 1px solid var(--is-line);
  box-sizing: border-box;
  backdrop-filter: none;
}

.island-dock button {
  min-height: 52px;
  max-height: 56px;
  min-width: 140px;
  border: 0;
  background: transparent;
  font: inherit;
  color: #5b7377;
  border-radius: 12px;
}

.island-dock button.is-on {
  background: rgba(61, 92, 97, .12);
  color: var(--is-ink);
  font-weight: 600;
}

/* 插图位：有 scenes/{id}.png 就铺上，没有就显示空位 */
.island-slot {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 65% 28%, rgba(255, 255, 255, .25), transparent 32%),
    linear-gradient(145deg, #c7dad4, #9ebbb6);
  pointer-events: none;
  z-index: 0;
}

.island-slot-picture {
  display: block;
  width: 100%;
  height: 100%;
}

.island-slot-pic {
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

.island-slot-mark {
  display: none;
}

.island-slot.is-empty {
  background:
    repeating-linear-gradient(
      -12deg,
      rgba(255, 253, 248, .42) 0 10px,
      rgba(201, 221, 216, .9) 10px 20px
    );
}

.island-slot.is-empty .island-slot-pic { display: none; }

.island-slot.is-empty .island-slot-mark {
  position: absolute;
  left: 50%;
  top: 18%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 10px 14px;
  border-radius: 16px;
  background: rgba(255, 253, 248, .88);
  color: var(--is-deep);
  pointer-events: none;
}

.island-slot-mark b { font-size: 14px; }
.island-slot-mark small { font-size: 11px; color: #5b7377; }

/* 总览地图：铺满一屏，底下不漏色。太高就滚。小屋到井下仍看得见。 */
.island-map {
  position: absolute;
  inset: 0;
  overflow-x: hidden;
  overflow-y: auto;
  background: #b0b7a7;
  -webkit-overflow-scrolling: touch;
}

.island-map-board {
  position: relative;
  width: 100%;
  aspect-ratio: 972 / 1619;
  line-height: 0;
}

.island-map-board .island-slot {
  position: absolute;
  inset: 0;
}

.island-map-board .island-slot-pic {
  object-fit: fill;
}

.island-map-sea,
.island-land {
  display: none;
}

.island-map-hot {
  position: absolute;
  border: 0;
  background: transparent;
  color: var(--is-ink);
  font: inherit;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  padding: 8px 10px;
  box-sizing: border-box;
}

.island-map-hot.is-garden {
  left: 4%;
  top: 14%;
  width: 38%;
  height: 26%;
  border-radius: 18px;
}

.island-map-hot small,
.island-pin small { font-size: 11px; color: #5b7377; }
.island-map-hot b,
.island-pin b { font-size: 15px; }

.island-map-hot small,
.island-map-hot b {
  background: rgba(255,253,248,.88);
  padding: 1px 8px;
  border-radius: 999px;
}

.island-pin,
.island-hot {
  position: absolute;
  z-index: 2;
  pointer-events: auto;
  border: 0;
  padding: 0;
  margin: 0;
  background: transparent;
  color: transparent;
  font: inherit;
}

.island-hot {
  min-width: 44px;
  min-height: 44px;
  border-radius: 18px;
}

.island-hot span {
  position: absolute;
  left: 50%;
  bottom: 2px;
  transform: translateX(-50%);
  white-space: nowrap;
  color: var(--is-ink);
  background: rgba(255, 253, 248, .9);
  font-size: 11px;
  line-height: 1.3;
  padding: 1px 7px;
  border-radius: 999px;
  pointer-events: none;
}

.island-hot:focus-visible {
  outline: 2px solid #f7f3ea;
  outline-offset: 2px;
}

.island-hot.is-hui,
.island-hot.is-theater,
.island-hot.is-lili { z-index: 2; }
.island-hot.is-clinic { z-index: 2; }

.island-pin {
  min-width: 88px;
  min-height: 64px;
  padding: 8px 10px;
  border-radius: 16px;
  background: rgba(255,253,248,.9);
  color: var(--is-ink);
  box-shadow: 0 4px 0 rgba(42, 58, 60, .12);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}

/* 家园院子插图位（份地点进直接是格子页） */
.island-home {
  position: absolute;
  inset: 0;
  background: #c9ddd8;
}

.island-home-sky { display: none; }
.island-plots { display: none; }
.island-beds { display: none; }

.island-garden-hot {
  position: absolute;
  left: 28%;
  top: 38%;
  width: 44%;
  height: 46%;
  border: 0;
  border-radius: 22px;
  background: transparent;
  z-index: 2;
}

/* 份地：铺海边草地底图，不再铺一块纯绿。先进份地景，点一下看地才出格子。 */
.island-yards {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  background: #4aa3d8;
  padding-top: 44px;
  padding-bottom: env(safe-area-inset-bottom);
  box-sizing: border-box;
  overflow: hidden;
}

.island-yards-board {
  position: absolute;
  inset: 0;
  z-index: 0;
  line-height: 0;
  cursor: pointer;
}

.island-yards-board .island-slot {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: #4aa3d8;
}

.island-yards-board .island-slot-pic {
  object-fit: fill;
}

.island-yards > :not(.island-yards-board) {
  position: relative;
  z-index: 1;
}

.island-yards .island-scene-tap {
  position: absolute;
  z-index: 3;
}

.island-yards.is-peek .island-yard-tabs,
.island-yards.is-peek .island-grow-status,
.island-yards.is-peek .island-plot-grid,
.island-yards.is-peek .island-plot-pager,
.island-yards.is-peek .island-care-fabs,
.island-yards.is-peek .island-harvest-fab {
  display: none;
}

.island-yards.is-peek .island-scene-tap {
  z-index: 3;
}

.island-yards:not(.is-peek) .island-scene-tap {
  display: none;
}

.island-yards:not(.is-peek) .island-yards-board {
  cursor: default;
}

.island-yards .island-yard-choices {
  position: absolute;
  z-index: 3;
  left: 10px;
  right: 10px;
  bottom: 10px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.island-yards .island-yard-choices[hidden],
.island-yards .island-scene-tap[hidden] { display: none; }

.island-yard-choices button,
.island-farm-events button {
  min-height: 48px;
  padding: 10px 14px;
  border: 1px solid rgba(236, 214, 160, .55);
  border-radius: 8px;
  background: rgba(16, 22, 30, .92);
  color: #f6f0e4;
  font: inherit;
}

.island-yards .island-farm-events {
  position: absolute;
  inset: 90px 10px 10px;
  z-index: 4;
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: 14px;
  border: 1px solid #c8af78;
  border-radius: 12px;
  background: rgba(16, 22, 30, .97);
  color: #f6f0e4;
  font-size: 14px;
}

.island-farm-events header,
.island-farm-event-tools { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.island-farm-events h3, .island-farm-events h4 { margin: 8px 0; }
.island-farm-events p { white-space: pre-wrap; overflow-wrap: anywhere; margin: 8px 0; line-height: 1.6; }
.island-farm-event-note, .island-farm-events small { color: #d1c8b5; font-size: 12px; }
.island-farm-event-list { overflow-y: auto; min-height: 0; overscroll-behavior: contain; }
.island-farm-event-list article { padding: 10px 0; border-bottom: 1px solid #655c49; }
.island-farm-event-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.island-farm-events button:disabled { opacity: .5; }

.island-yard-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  padding: 10px 10px 8px;
  background: transparent;
  flex-shrink: 0;
}

.island-yard-tabs button {
  min-height: 48px;
  border: 1px solid var(--is-line);
  border-radius: 14px;
  background: rgba(255, 253, 248, .78);
  color: var(--is-deep);
  font: inherit;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  line-height: 1.15;
}

.island-yard-tabs button small {
  font-size: 11px;
  color: #5b7377;
}

.island-yard-tabs button.is-on {
  background: #3d5c61;
  border-color: #3d5c61;
  color: #f7f3ea;
}

.island-yard-tabs button.is-on small {
  color: #d8ebe8;
}

.island-plot-overview {
  margin: 8px 10px 0;
  padding: 8px 10px 10px;
  border-radius: 16px;
  background: rgba(255, 253, 248, .9);
  border: 1px solid var(--is-line);
  color: var(--is-deep);
  box-sizing: border-box;
  flex-shrink: 0;
}

.island-yards.is-peek .island-plot-overview {
  background: rgba(16, 22, 30, .84);
  border-color: rgba(236, 214, 160, .55);
  color: #f6f0e4;
  box-shadow: 0 10px 28px rgba(10, 16, 22, .28);
}

.island-plot-overview-kicker {
  margin: 0 0 6px;
  font-size: 11px;
  letter-spacing: .04em;
  text-align: center;
  color: #5b7377;
}

.island-yards.is-peek .island-plot-overview-kicker {
  color: #d1c8b5;
}

.island-plot-overview-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

.island-plot-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  min-height: 48px;
  padding: 6px 4px;
  border-radius: 12px;
  background: rgba(255, 255, 255, .45);
  font-size: 12px;
  line-height: 1.2;
}

.island-yards.is-peek .island-plot-stat {
  background: rgba(255, 253, 248, .12);
  color: #f6f0e4;
}

.island-plot-stat small {
  font-size: 11px;
}

.island-plot-stat b {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.15;
}

.island-plot-stat.is-on.is-ripe { background: #95b98a; color: #f7f3ea; }
.island-plot-stat.is-on.is-tend { background: #8aa56e; color: #f7f3ea; }
.island-plot-stat.is-on.is-water { background: #6e9aa8; color: #f7f3ea; }

.island-plot-overview-note {
  display: none;
  margin: 6px 0 0;
  font-size: 11px;
  text-align: center;
  color: #5b7377;
}

.island-yards:not(.is-peek) .island-plot-overview-note {
  display: block;
}

.island-grow-status {
  margin: 8px 10px 0;
  min-height: 44px;
  padding: 10px 12px;
  border-radius: 16px;
  background: rgba(255, 253, 248, .9);
  border: 1px solid var(--is-line);
  font-size: 13px;
  line-height: 1.4;
  text-align: center;
  box-sizing: border-box;
  flex-shrink: 0;
}

.island-plot-grid {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: repeat(3, minmax(0, 1fr));
  align-content: stretch;
  gap: 0;
  padding: 4px;
  touch-action: none;
}

.island-plot-grid:has(.island-plot-empty) {
  grid-template-rows: none;
  align-content: start;
}

.island-plot-empty {
  grid-column: 1 / -1;
  margin: 8px 6px;
  padding: 18px 14px;
  border-radius: 16px;
  background: rgba(255, 253, 248, .92);
  text-align: center;
  color: var(--is-deep);
  font-size: 14px;
}

.island-plot-tile {
  position: relative;
  aspect-ratio: 1;
  min-height: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--is-ink);
  font: inherit;
}

.island-plot-grass,
.island-plot-bed {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
}

.island-plot-soil {
  position: absolute;
  left: 22%;
  right: 22%;
  top: 18%;
  bottom: 30%;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  pointer-events: none;
}

.island-plot-tile .island-crop-pic {
  width: 100%;
  height: 100%;
}

.island-plot-meta {
  position: absolute;
  left: 10%;
  right: 10%;
  bottom: 12%;
  min-height: 28px;
  padding: 2px 6px;
  border-radius: 999px;
  background: rgba(255, 253, 248, .9);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  line-height: 1.15;
  pointer-events: none;
}

.island-plot-tile b {
  font-size: 12px;
  font-weight: 600;
}

.island-plot-tile small {
  font-size: 10px;
  color: #5b7377;
}

.island-plot-tile.is-pad {
  pointer-events: auto;
  cursor: pointer;
}

.island-plot-tile.is-ripe .island-plot-bed {
  filter: drop-shadow(0 0 8px #e7c14a);
}

.island-plot-tile.is-ripe .island-plot-meta {
  background: #f4e3b0;
}

.island-plot-pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 4px 10px 8px;
  flex-shrink: 0;
}

.island-plot-pager:empty {
  display: none;
}

.island-plot-pager span {
  min-width: 7em;
  text-align: center;
  font-size: 13px;
  color: #2a3a3c;
  background: rgba(255, 253, 248, .88);
  border-radius: 999px;
  padding: 6px 10px;
}

.island-plot-pager .island-btn {
  min-width: 88px;
}

.island-float-chip {
  position: absolute;
  z-index: 9;
  padding: 0;
  border: 0;
  background: transparent;
  line-height: 0;
  width: min(132px, 36%);
  cursor: pointer;
}

.island-float-chip.is-climate {
  top: calc(8px + env(safe-area-inset-top, 0px));
  left: 8px;
  right: auto;
  width: auto;
  height: auto;
  min-width: 72px;
  padding: 7px 12px 8px;
  border-radius: 16px;
  background: rgba(255, 248, 232, .88);
  box-shadow:
    inset 0 0 0 1px rgba(120, 92, 62, .22),
    0 2px 8px rgba(42, 58, 60, .14);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  color: #3d4a42;
  font: inherit;
  line-height: 1.15;
}

.island-float-chip.is-climate small {
  font-size: 10px;
  letter-spacing: .12em;
  color: #6b7a6e;
}

.island-float-chip.is-climate b {
  font-size: 15px;
  font-weight: 600;
}

.island-float-chip.is-bag,
.island-float-chip.is-date,
.island-float-chip.is-back,
.island-float-chip.is-bgm,
.island-bgm-chip {
  top: env(safe-area-inset-top, 0px);
  height: 66px;
  display: flex;
  align-items: center;
}

.island-float-chip.is-bag {
  /* 再往左一点，右边留给一半大的贝壳音乐钮 */
  right: min(58px, 16%);
  left: auto;
  width: min(88px, 24%);
}

.island-float-chip.is-bgm,
.island-bgm-chip {
  appearance: none;
  -webkit-appearance: none;
  z-index: 10;
  right: 0;
  left: auto;
  bottom: auto;
  width: min(46px, 13%);
  margin: 0;
  background: transparent;
  border: 0;
  padding: 0;
}

.island-float-chip.is-back {
  /* chip-back 左右透明约 1/4，可见只约占一半；数值牌几乎贴边。
     按两张图的可见左缘和可见宽度对齐，竖着成一列。 */
  left: calc(4px - min(124px, 34%) * 0.461);
  right: auto;
  width: calc(min(124px, 34%) * 1.946);
  transform: none;
}

.island-float-chip.is-stats,
.island-float-chip.is-status {
  height: auto;
  pointer-events: none;
  background: transparent center / 100% 100% no-repeat;
}

/* 左侧保留原六项木牌；右侧是独立的工分票、等级、岛缘面板。 */
.island-float-chip.is-stats {
  top: calc(62px + env(safe-area-inset-top, 0px));
  left: 4px;
  right: auto;
  width: min(124px, 34%);
  aspect-ratio: 1024 / 1536;
  background-image: url("/static/island/assets/stats-frame.png");
}

.island-float-chip.is-status {
  top: calc(72px + env(safe-area-inset-top, 0px));
  left: auto;
  right: 4px;
  width: min(150px, 40%);
  aspect-ratio: 1004 / 1118;
  background-image: url("/static/island/assets/status-frame.webp?v=status-frame1");
}

.island-stats-val,
.island-status-val {
  position: absolute;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translate(-50%, -50%);
  font-size: clamp(9px, 2.6vw, 13px);
  font-weight: 700;
  letter-spacing: .02em;
  line-height: 1;
  color: #5a4a3a;
}

.island-stats-val {
  left: 72%;
  width: 16%;
  height: 5.2%;
}

.island-status-val {
  left: 71%;
  width: 24%;
  height: 10%;
}

.island-stats-val[data-k="shadow"] { top: 24.7%; }
.island-stats-val[data-k="satiety"] { top: 36.7%; }
.island-stats-val[data-k="mist"] { top: 48.5%; }
.island-stats-val[data-k="standing"] { top: 59.9%; }
.island-stats-val[data-k="health"] { top: 72.2%; }
.island-stats-val[data-k="energy"] { top: 83.0%; }
.island-status-val[data-k="tickets"] { top: 31.6%; }
.island-status-val[data-k="level"] { top: 53.9%; }
.island-status-val[data-k="bond"] { top: 76.0%; }

.island-float-chip img {
  width: 100%;
  height: auto;
  max-height: 100%;
  object-fit: contain;
  display: block;
  pointer-events: none;
}

.island-care-acts {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0 0 10px;
}

.island-care-fabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 16px 12px;
  z-index: 2;
  flex-shrink: 0;
}

.island-care-fabs[hidden] {
  display: none !important;
}

.island-harvest-fab {
  position: relative;
  left: auto;
  right: auto;
  bottom: auto;
  margin: 0;
  min-height: 52px;
  flex: 1 1 calc(50% - 8px);
  border: 0;
  border-radius: 999px;
  background: #95b98a;
  color: #f7f3ea;
  font: inherit;
  font-weight: 600;
  z-index: 2;
  flex-shrink: 0;
}

.island-harvest-fab[data-act="water"] { background: #6e9aa8; }
.island-harvest-fab[data-act="tend"] { background: #8aa56e; }
.island-harvest-fab[data-act="fertilize"] { background: #b08958; }
.island-harvest-fab[data-act="harvest"] { background: #95b98a; }

.island-harvest-fab[hidden] {
  display: none !important;
}

.island-qty-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0 0 10px;
}

.island-qty-row [data-qty-val] {
  min-width: 1.6em;
  text-align: center;
  font-size: 18px;
}

.island-qty-row .island-btn {
  min-width: 44px;
  min-height: 44px;
}

.island-plot {
  min-height: 132px;
  border: 0;
  border-radius: 16px;
  background: #8b6a45;
  color: #fffdf8;
  font: inherit;
  position: relative;
  overflow: hidden;
  box-shadow: inset 0 0 0 3px rgba(255,255,255,.08);
}

.island-plot.is-on { outline: 3px solid #f4e3b0; }
.island-plot .crop {
  position: absolute;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  width: 36px;
  height: 48px;
}
.island-plot .crop.empty { background: #6d5336; width: 70%; height: 18px; border-radius: 6px; }
.island-plot .crop.seedling {
  width: 10px; height: 22px; border-radius: 8px 8px 2px 2px;
  background: #8fbf72;
}
.island-plot .crop.growing {
  width: 22px; height: 40px; border-radius: 12px 12px 4px 4px;
  background: linear-gradient(#6f8f6a, #8fbf72);
}
.island-plot .crop.ripe {
  width: 28px; height: 46px; border-radius: 14px;
  background: radial-gradient(circle at 50% 30%, #e7c14a, #6f8f6a 70%);
}
.island-plot .meta {
  position: absolute;
  left: 8px; right: 8px; top: 8px;
  font-size: 12px;
  text-align: left;
}
.island-farmer {
  position: absolute;
  left: 18px;
  bottom: 22px;
  width: 28px;
  height: 46px;
}
.island-farmer .head {
  width: 16px; height: 16px; border-radius: 50%;
  background: #f0d2b0; margin: 0 auto;
}
.island-farmer .body {
  width: 20px; height: 22px; border-radius: 8px;
  background: #3d5c61; margin: 2px auto 0;
}

/* 地点卡：只显示地名，不放洗碗、交税这些按钮。 */
.island-place {
  position: absolute;
  inset: 0;
  background: #c9ddd8;
}

.island-place-card {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 14px;
  padding: 10px 14px;
  border-radius: 16px;
  background: rgba(255,253,248,.9);
  z-index: 1;
}

.island-place-card b { display: block; font-size: 18px; }
.island-place-card p { display: none; }

.island-place.is-locked {
  background:
    repeating-linear-gradient(
      -12deg,
      rgba(255, 253, 248, .42) 0 10px,
      rgba(201, 221, 216, .9) 10px 20px
    );
}
.island-place-card.is-lock p {
  display: block;
  margin: 8px 0 12px;
  font-size: 13px;
  color: #3d5c61;
  line-height: 1.45;
}

/* 海边 */
.island-shore {
  position: absolute;
  inset: 0;
  background: #9ec4d0;
}
.island-shore-card {
  margin: 18px 14px;
  padding: 14px;
  border-radius: 16px;
  background: rgba(255,253,248,.88);
}
.island-shore-card b { display: block; font-size: 18px; margin-bottom: 6px; }
.island-shore-card p { margin: 0; font-size: 13px; color: #3d5c61; }

/* 广场：整图可见，热区对上杂货铺 / 灯塔 / 乔乔诊所 / 潮汐公告 / 栗栗摊。铺满一屏，底下不漏色，太高就滚。 */
.island-plaza {
  position: absolute;
  inset: 0;
  overflow-x: hidden;
  overflow-y: auto;
  background: #efe4c8;
  -webkit-overflow-scrolling: touch;
}

.island-plaza-board {
  position: relative;
  width: 100%;
  aspect-ratio: 941 / 1672;
  line-height: 0;
}

.island-plaza-board .island-slot {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.island-plaza-board .island-slot-pic {
  object-fit: fill;
}

.island-plaza .island-hot span {
  font-size: 13px;
  padding: 3px 10px;
}

/* 剧场院景：图上点编剧社 / 衣泊坊 / 剧场看台。铺满一屏，底下不漏色。 */
.island-theater-board {
  aspect-ratio: 1080 / 1920;
}

.island-theater .island-hot span {
  font-size: 13px;
  padding: 3px 10px;
}

/* 海边滩景：图上点港口 / 海边。铺满一屏，底下不漏色。 */
.island-shore-yard {
  background: #9ec4d0;
}

.island-shore-board {
  aspect-ratio: 1080 / 1920;
}

.island-shore-yard .island-hot span {
  font-size: 13px;
  padding: 3px 10px;
}

.island-port .island-shop-board,
.island-port-hub .island-shop-board {
  aspect-ratio: 941 / 1672;
}

.island-beach .island-shop-board,
.island-beach-hub .island-shop-board {
  aspect-ratio: 1086 / 1448;
}

.island-lili .island-shop-board {
  aspect-ratio: 1086 / 1448;
}

.island-shop {
  position: absolute;
  inset: 0;
  display: block;
  background: #c9ddd8;
  overflow: hidden;
}

/* 列表和灯塔选项一个样子，底下深色金边框。进店先进店景，点一下只出列表，店景不换裁切。 */
.island-shop.is-peek {
  overflow: hidden;
}

.island-shop-board {
  position: relative;
  width: 100%;
  aspect-ratio: 941 / 1672;
  line-height: 0;
  cursor: pointer;
}

.island-shop.is-peek .island-shop-board .island-slot {
  position: absolute;
  inset: 0;
  flex: none;
  min-height: 0;
  z-index: 0;
}

.island-shop.is-peek .island-shop-board .island-slot-pic {
  object-fit: fill;
  object-position: center;
}

.island-scene-tap {
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 10px;
  z-index: 2;
  min-height: 56px;
  padding: 14px 14px;
  border: 1px solid rgba(236, 214, 160, .55);
  border-radius: 8px;
  background: rgba(16, 22, 30, .84);
  color: #f6f0e4;
  font: inherit;
  font-size: 15px;
  line-height: 1.45;
  appearance: none;
  -webkit-appearance: none;
  box-shadow: 0 10px 28px rgba(10, 16, 22, .28);
}

.island-scene-fold {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 42%;
  z-index: 1;
  border: 0;
  padding: 0;
  background: transparent;
}

.island-shop.is-peek .island-shop-shelf,
.island-shop.is-peek .island-scene-fold {
  display: none;
}

.island-shop:not(.is-peek) .island-scene-tap {
  display: none;
}

/* 杂货铺点店景后，Tt酱和货架一起出现；立绘在货架后，只露上半身。 */
.island-tt-stand {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 30%;
  /* 保留立绘显示区域自身高度的一半下移，锚点上调24px。 */
  transform: translateY(50%);
  z-index: 1;
  height: 58%;
  overflow: hidden;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(180deg, #000 76%, rgba(0, 0, 0, .45) 90%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 76%, rgba(0, 0, 0, .45) 90%, transparent 100%);
}

.island-shop.is-peek .island-tt-stand {
  display: none;
}

.island-tt-sprite {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 10px 18px rgba(12, 20, 28, .4));
}

.island-shop-shelf {
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 10px;
  z-index: 2;
  max-height: 52%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: transparent;
  border-radius: 0;
  box-shadow: none;
  overflow: hidden;
  line-height: 1.4;
}

.island-shop-meta {
  flex-shrink: 0;
  padding: 0 2px 8px;
}

.island-shop-meta b {
  display: inline-flex;
  align-items: center;
  height: 26px;
  padding: 0 12px;
  background: #2a3544;
  border: 1px solid rgba(236, 214, 160, .7);
  border-radius: 4px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  color: #f4e6c2;
}

.island-shop-meta small {
  display: block;
  margin-top: 6px;
  color: rgba(246, 240, 228, .72);
  font-size: 12px;
  line-height: 1.4;
}

.island-shop-hint {
  padding: 8px 10px;
  margin-bottom: 8px;
  background: rgba(42, 53, 68, .55);
  border: 1px solid rgba(236, 214, 160, .35);
  border-radius: 6px;
  font-size: 12px;
  color: rgba(246, 240, 228, .85);
  line-height: 1.45;
}

.island-shop-hint p {
  margin: 0 0 4px;
}

.island-shop-hint p:last-child {
  margin-bottom: 0;
}

.island-shop-sku.is-combo .island-shop-name b {
  color: #ffe8a8;
}

.island-shop-tabs {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
  padding: 0 0 8px;
  overflow-x: auto;
}

.island-shop-tabs:empty {
  display: none;
}

.island-shop-tabs button {
  appearance: none;
  -webkit-appearance: none;
  flex: 0 0 auto;
  min-height: 32px;
  padding: 0 12px;
  border: 1px solid rgba(236, 214, 160, .45);
  border-radius: 6px;
  background: rgba(16, 22, 30, .78);
  color: #f6f0e4;
  font: inherit;
  line-height: 1.2;
}

.island-shop-tabs button.is-on {
  background: #2a3544;
  border-color: rgba(236, 214, 160, .75);
  color: #f4e6c2;
}

.island-shop-tabs button i {
  margin-left: 4px;
  font-style: normal;
  font-size: 10px;
  padding: 1px 6px;
  border-radius: 999px;
  background: rgba(236, 214, 160, .22);
  color: #f4e6c2;
}

.island-shop-tabs button.is-on i {
  background: rgba(236, 214, 160, .35);
  color: #f4e6c2;
}

.island-shop-sku.is-ready {
  box-shadow: inset 0 0 0 1px rgba(236, 214, 160, .85);
}

.island-shop-list {
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  align-content: start;
}

.island-shop-sku {
  appearance: none;
  -webkit-appearance: none;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 2px;
  width: 100%;
  min-height: 48px;
  padding: 8px 10px;
  border: 1px solid rgba(236, 214, 160, .5);
  border-radius: 6px;
  background: rgba(16, 22, 30, .78);
  color: #f6f0e4;
  font: inherit;
  line-height: 1.3;
  text-align: left;
  box-sizing: border-box;
  box-shadow: 0 6px 14px rgba(10, 16, 22, .22);
}

.island-shop-sku.is-off {
  opacity: .55;
}

.island-shop-sku.is-picked {
  box-shadow: inset 0 0 0 1px rgba(236, 214, 160, .9);
  background: rgba(42, 52, 40, .88);
}

.island-shop-sku.is-span {
  grid-column: 1 / -1;
}

.island-shop-emoji { display: none; }
.island-shop-name { min-width: 0; max-width: 100%; }
.island-shop-name b,
.island-shop-name small,
.island-shop-price {
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1.3;
}
.island-shop-name b { font-size: 14px; font-weight: 600; }
.island-shop-name small { color: rgba(246, 240, 228, .72); font-size: 11px; }
.island-shop-price { font-size: 11px; color: rgba(236, 214, 160, .88); }
.island-shop-empty {
  grid-column: 1 / -1;
  margin: 8px 4px;
  color: rgba(246, 240, 228, .72);
  font-size: 13px;
}

#island-port-list.is-chat {
  display: flex;
  flex-direction: column;
  grid-template-columns: none;
  gap: 8px;
  overflow: hidden;
}

.island-port-msgs {
  flex: 1;
  min-height: 0;
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.island-port-msg {
  padding: 8px 10px;
  border: 1px solid rgba(236, 214, 160, .4);
  border-radius: 6px;
  background: rgba(16, 22, 30, .78);
  color: #f6f0e4;
}

.island-port-msg b {
  display: block;
  font-size: 12px;
  color: rgba(236, 214, 160, .88);
}

.island-port-msg p {
  margin: 4px 0 0;
  font-size: 14px;
  line-height: 1.4;
  white-space: pre-wrap;
  word-break: break-word;
}

.island-port-say {
  display: flex;
  gap: 6px;
  flex: none;
}

.island-port-say input {
  flex: 1;
  min-width: 0;
  height: 40px;
  padding: 0 10px;
  border: 1px solid rgba(236, 214, 160, .5);
  border-radius: 6px;
  background: rgba(16, 22, 30, .86);
  color: #f6f0e4;
  font: inherit;
}

.island-port-say button {
  appearance: none;
  -webkit-appearance: none;
  flex: none;
  height: 40px;
  padding: 0 12px;
  border: 1px solid rgba(236, 214, 160, .55);
  border-radius: 6px;
  background: rgba(16, 22, 30, .84);
  color: #f6f0e4;
  font: inherit;
}

@media (max-height: 560px) {
  .island-shop-shelf {
    max-height: 58%;
  }
}

.island-plaza .island-board,
.island-plaza .island-msgs,
.island-plaza .island-composer { position: relative; z-index: 1; }
.island-board {
  margin: 10px 12px 6px;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(255,253,248,.9);
  min-height: 56px;
}
.island-board small { color: #5b7377; font-size: 11px; }
.island-msgs {
  flex: 1;
  overflow: auto;
  padding: 0 12px 8px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.island-msg {
  background: rgba(255,253,248,.92);
  border-radius: 12px;
  padding: 8px 10px;
}
.island-msg b { font-size: 12px; color: #3d5c61; }
.island-msg p { margin: 4px 0 0; font-size: 14px; word-break: break-word; }

.island-sheet {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(68px + env(safe-area-inset-bottom));
  width: min(480px, 100%);
  max-height: 58vh;
  overflow: auto;
  background: #fbfaf6;
  border-radius: 18px 18px 0 0;
  box-shadow: 0 -8px 24px rgba(42,58,60,.12);
  padding: 14px 14px 18px;
  box-sizing: border-box;
  z-index: 6;
}

/* 背包：居中叠素材框，不再是底栏白卡。 */
.island-sheet.is-bag {
  inset: 0;
  left: 0;
  transform: none;
  width: 100%;
  max-height: none;
  bottom: 0;
  background: rgba(35, 48, 56, .42);
  border-radius: 0;
  box-shadow: none;
  padding: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 8;
}

body.island-app.is-bag-open .island-float-chip,
body.island-app.is-climate-open .island-float-chip {
  visibility: hidden;
  pointer-events: none;
}

.island-bag {
  position: relative;
  width: min(420px, 92vw, calc(94dvh * 941 / 1672));
  aspect-ratio: 941 / 1672;
  max-height: 94dvh;
  background: none center / 100% 100% no-repeat;
  background-color: transparent;
}

.island-bag-x {
  position: absolute;
  left: 82%;
  top: 16.5%;
  width: 12%;
  height: 6%;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.island-bag-grid {
  position: absolute;
  left: 10.4%;
  top: 24.9%;
  width: 79.1%;
  height: 57%;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(5, 1fr);
  gap: 2.6% 3.2%;
}

.island-bag-slot {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 12%;
  background: transparent;
  color: #5f7a58;
  font: inherit;
  cursor: pointer;
}

.island-bag-slot.is-empty {
  pointer-events: none;
  cursor: default;
}

.island-bag-slot .island-crop-pic,
.island-bag-slot .island-crop-fallback,
.island-bag-glyph {
  width: 58%;
  height: 58%;
  object-fit: contain;
  font-size: clamp(16px, 5.2vw, 26px);
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.island-bag-qty {
  position: absolute;
  right: 6%;
  bottom: 6%;
  min-width: 1.2em;
  padding: 0 3px;
  border-radius: 8px;
  background: rgba(254, 244, 223, .92);
  color: #6a8a68;
  font-size: clamp(9px, 2.4vw, 12px);
  line-height: 1.3;
  text-align: center;
}

.island-bag-pager {
  position: absolute;
  left: 18%;
  top: 83.8%;
  width: 64%;
  height: 3.6%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.island-bag-count {
  margin: 0;
  min-width: 28%;
  padding: 0 8px;
  border-radius: 8px;
  background: #fef4df;
  color: #6d8f6a;
  font-size: clamp(13px, 3.4vw, 18px);
  font-weight: 600;
  text-align: center;
  line-height: 1.2;
}

.island-bag-turn {
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #8fb38d;
  color: #fff;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}

.island-bag-turn:disabled {
  opacity: 0;
  pointer-events: none;
}

.island-bag-done {
  position: absolute;
  left: 24%;
  top: 88.2%;
  width: 52%;
  height: 6.4%;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.island-bag-pop {
  position: absolute;
  left: 12%;
  right: 12%;
  top: 28%;
  max-height: 52%;
  overflow: auto;
  padding: 14px 14px 12px;
  border-radius: 16px;
  background: rgba(254, 244, 223, .96);
  box-shadow: 0 8px 22px rgba(42, 58, 60, .16);
  text-align: center;
  z-index: 2;
}

.island-bag-pop p {
  margin: 0 0 10px;
  color: #5f7a58;
  font-size: 15px;
}

.island-bag-story {
  margin: 0 0 6px !important;
  color: #7a6a4e;
  font-size: 12px;
  line-height: 1.45;
  text-align: left;
}

.island-bag-pop-acts {
  display: flex;
  gap: 8px;
}

.island-bag-pop-acts .island-btn {
  flex: 1;
  min-height: 40px;
}

.island-sheet h2 { font-size: 18px; margin: 0 0 10px; }
.island-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding: 10px 0;
  border-bottom: 1px solid var(--is-line);
  font-size: 14px;
}

.island-item-acts {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}

.island-item .island-btn {
  min-width: 56px;
  min-height: 40px;
  padding: 6px 12px;
}

.island-modal {
  position: fixed;
  inset: 0;
  background: rgba(35, 48, 56, .42);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px 8px;
  box-sizing: border-box;
  z-index: 9;
}

/* 海贝金边提示框：字和按钮落在中间奶油格里，别压到贝壳珍珠。 */
.island-card {
  width: min(400px, calc(100% - 8px));
  max-height: min(86dvh, 560px);
  aspect-ratio: 1;
  background: none center / 100% 100% no-repeat;
  background-color: transparent;
  border-radius: 0;
  padding: 0;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}

.island-card-inner {
  flex: 1;
  min-height: 0;
  margin: 24% 12% 22%;
  display: flex;
  flex-direction: column;
  overflow: auto;
}

.island-card h3 { margin: 0 0 8px; font-size: 18px; flex-shrink: 0; }
.island-card p { margin: 0 0 12px; line-height: 1.55; word-break: break-word; white-space: pre-wrap; }
.island-card .island-btn { min-height: 44px; }
.island-card .island-care-acts { flex-shrink: 0; }

.island-toast {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: 92px;
  max-width: min(420px, calc(100% - 24px));
  background: #2a3a3c;
  color: #f7f3ea;
  padding: 10px 14px;
  border-radius: 12px;
  z-index: 10;
  font-size: 13px;
}

.island-composer {
  display: flex;
  gap: 8px;
  padding: 8px 12px 10px;
}

.island-composer input { flex: 1; min-width: 0; }

.island-plant {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(68px + env(safe-area-inset-bottom));
  width: min(480px, 100%);
  z-index: 7;
}

.island-plant-card {
  background: #faf9f0;
  border-radius: 22px 22px 0 0;
  padding: 16px 16px 18px;
  box-shadow: 0 -10px 28px rgba(42, 58, 60, .14);
}

.island-plant-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 12px;
}

.island-plant-head h2 {
  margin: 0;
  font-size: 22px;
  color: #5f7a58;
}

.island-plant-head p {
  margin: 6px 0 0;
  font-size: 13px;
  color: #7a8b7e;
}

.island-plant-x {
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #7a8b7e;
  font-size: 28px;
  line-height: 1;
}

.island-plant-pick {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) 52px;
  align-items: center;
  gap: 8px;
  min-height: 148px;
}

.island-plant-arrow {
  width: 52px;
  height: 52px;
  border: 1px solid #e4e0d4;
  border-radius: 50%;
  background: #fffdf8;
  color: #5f7a58;
  font-size: 32px;
  line-height: 1;
}

.island-plant-hero {
  min-height: 140px;
  border: 1px solid #e4e0d4;
  border-radius: 18px;
  background: #fffdf8;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 10px 8px;
}

.island-crop-art {
  width: 96px;
  height: 96px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.island-crop-art.is-lg {
  width: 128px;
  height: 128px;
}

.island-crop-pic {
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
}

.island-crop-pic.is-seed { transform: scale(.42); transform-origin: bottom center; }
.island-crop-pic.is-grow { transform: scale(.72); transform-origin: bottom center; }
.island-crop-pic.is-ripe { transform: scale(1); transform-origin: bottom center; }

.island-bed .island-crop-pic { width: 100%; height: 100%; }

.island-plant-index {
  margin: 8px 0 0;
  text-align: center;
  font-size: 12px;
  color: #7a8b7e;
}

.island-plant-hero b { font-size: 18px; color: #5f7a58; }
.island-plant-hero small { font-size: 12px; color: #7a8b7e; }

.island-plant-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin: 10px 0 0;
}

.island-plant-dots i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #d5d2c6;
}

.island-plant-dots i.is-on { background: #95b98a; }

.island-plant-meta {
  margin: 12px 0;
  min-height: 40px;
  border-radius: 999px;
  background: rgba(149, 185, 138, .16);
  color: #5f7a58;
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 14px;
  font-size: 12px;
}

.island-plant-empty {
  margin: 0 0 10px;
  font-size: 13px;
  line-height: 1.45;
  color: #5f7a58;
  text-align: center;
}

.island-plant-go {
  width: 100%;
  min-height: 52px;
  border: 0;
  border-radius: 999px;
  background: #95b98a;
  color: #f7f3ea;
  font: inherit;
  font-weight: 600;
}

.island-plant-buy {
  width: 100%;
  min-height: 44px;
  margin-top: 8px;
  border: 1px solid #e4e0d4;
  border-radius: 999px;
  background: #fffdf8;
  color: #5f7a58;
  font: inherit;
}

.island-crop-fallback {
  font-size: 28px;
  line-height: 1;
}

@media (max-width: 360px) {
  .island-hud { padding-left: 10px; padding-right: 10px; }
  .island-meter { min-width: 56px; padding: 6px 8px; }
  .island-pin { min-width: 80px; }
  .island-root, .island-dock, .island-sheet { width: 100%; }
}

@media (min-width: 720px) {
  .island-root { min-height: 100vh; }
}

/* 进岛缓冲：只等总览图；点进地点再等那一张底图。其余后台备。 */
.island-boot-veil {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  background: #d8ebe8;
  color: var(--is-deep);
}
.island-boot-veil[hidden] { display: none; }
.island-boot-veil p {
  margin: 0;
  font-size: 15px;
}
.island-boot-veil progress {
  width: min(240px, 68vw);
  height: 8px;
  accent-color: #3d5c61;
}
.island-boot-veil small {
  color: rgba(61, 92, 97, .78);
  font-size: 12px;
}
.island-boot-spin {
  width: 42px;
  height: 42px;
  box-sizing: border-box;
  border: 3px solid rgba(61, 92, 97, .18);
  border-top-color: #3d5c61;
  border-radius: 50%;
  animation: island-boot-spin .8s linear infinite;
}
@keyframes island-boot-spin {
  to { transform: rotate(360deg); }
}

/* 地点先立即出现渐变底，高清图到位后由浏览器异步解码，不再用转圈挡住操作。 */

/* 灯塔 / 看台 / 诊所：橙光那种立绘对话。先进场景图，点一下才出人。 */
.island-vn {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: #1c2a33;
}

.island-vn.is-peek .island-vn-stand {
  visibility: hidden;
}

.island-vn.is-peek .island-vn-talk {
  display: none;
}

.island-vn:not(.is-peek) .island-scene-tap {
  display: none;
}

.island-vn.is-peek .island-vn-board {
  cursor: pointer;
}

.island-vn-board {
  position: absolute;
  inset: 0;
  line-height: 0;
}

.island-vn .island-slot {
  position: absolute;
  inset: 0;
  flex: none;
  min-height: 0;
}

.island-vn .island-slot-pic {
  object-fit: cover;
  object-position: center 42%;
}

/* 橙光那种半身：只要头和胸，比原先矮一半，人靠左下移，下头让对话框挡住。下沿渐变淡出。 */
.island-vn-stand {
  position: absolute;
  left: 0;
  top: auto;
  bottom: 16%;
  width: 58%;
  height: 36%;
  overflow: hidden;
  z-index: 2;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(180deg, #000 72%, rgba(0, 0, 0, .35) 88%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 72%, rgba(0, 0, 0, .35) 88%, transparent 100%);
}

.island-vn-sprite {
  position: absolute;
  left: 0;
  top: 0;
  height: 255%;
  width: auto;
  max-width: none;
  object-fit: contain;
  object-position: top left;
  filter: drop-shadow(0 10px 18px rgba(12, 20, 28, .38));
}

/* 小橘 / 桥桥：半身进去，只取全身的二分之一（腰以上），靠左。 */
.island-vn-stand.is-half {
  width: 88%;
  height: 50%;
  bottom: 14%;
}

.island-vn-stand.is-half .island-vn-sprite {
  height: 200%;
  left: 0;
  object-position: top left;
}

/* 潮下两位 NPC 同样使用橙光半身与对话框，人物略低，交给对话框收边。 */
.island-undertide-vn .island-vn-stand.is-half {
  width: 100%;
  bottom: 11%;
  height: 53%;
  overflow: visible;
  -webkit-mask-image: none;
  mask-image: none;
}

/* 韶年原图人比桥桥靠中，半身再往左一点。 */
.island-shaonian .island-vn-stand.is-half .island-vn-sprite {
  left: -12%;
}

/* 栗栗立绘带摊车。半身框铺满，立绘按原图宽度完整露出；不要给 sprite 加正 left，overflow:hidden 会切掉右边头发和摊柱。 */
.island-lili .island-vn-stand.is-half {
  left: 0;
  width: 100%;
}

.island-lili .island-vn-stand.is-half .island-vn-sprite {
  left: 0;
  width: 100%;
  height: auto;
  max-width: 100%;
  object-fit: contain;
  object-position: top left;
}

/* 小橘同样：88% 框会切掉右边头发和袖子。半身框铺满，立绘按原图宽度完整露出。 */
.island-hall .island-vn-stand.is-half {
  left: 0;
  width: 100%;
}

.island-hall .island-vn-stand.is-half .island-vn-sprite {
  left: 0;
  width: 100%;
  height: auto;
  max-width: 100%;
  object-fit: contain;
  object-position: top left;
}

/* 橙光：先进场景图，点一下才出人；再点一下对话框才变成选项。字和框自己对齐，不吃底图 line-height:0。 */
.island-vn-talk {
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 10px;
  z-index: 3;
  max-height: none;
  overflow: visible;
  line-height: 1.4;
  font-size: 15px;
}

.island-vn-talk button {
  appearance: none;
  -webkit-appearance: none;
  margin: 0;
  box-sizing: border-box;
}

.island-vn-box {
  display: block;
  position: relative;
  width: 100%;
  min-height: 88px;
  box-sizing: border-box;
  background: rgba(16, 22, 30, .84);
  border: 1px solid rgba(236, 214, 160, .55);
  border-radius: 8px;
  padding: 22px 14px 20px;
  color: #f6f0e4;
  box-shadow: 0 10px 28px rgba(10, 16, 22, .28);
  line-height: 1.5;
  text-align: left;
}

.island-vn-talk.is-picks .island-vn-box {
  display: none;
}

.island-vn-talk.is-line .island-vn-choices {
  display: none;
}

.island-vn-name {
  position: absolute;
  left: 12px;
  top: -13px;
  display: inline-flex;
  align-items: center;
  height: 26px;
  padding: 0 12px;
  background: #2a3544;
  border: 1px solid rgba(236, 214, 160, .7);
  border-radius: 4px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  color: #f4e6c2;
  white-space: nowrap;
}

.island-bgm-chip[hidden] {
  display: none !important;
}

.island-vn-line {
  margin: 0;
  max-height: none;
  overflow: visible;
  white-space: pre-wrap;
  font-size: 15px;
  line-height: 1.5;
}

.island-vn-more {
  position: absolute;
  right: 12px;
  bottom: 8px;
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 7px solid rgba(236, 214, 160, .85);
  animation: island-vn-more 1s ease-in-out infinite;
}

@keyframes island-vn-more {
  0%, 100% { transform: translateY(0); opacity: .7; }
  50% { transform: translateY(3px); opacity: 1; }
}

.island-vn-choices {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  overflow-y: auto;
  min-height: 0;
  max-height: 46vh;
  line-height: 1.3;
}

.island-vn-choice {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 2px;
  min-height: 48px;
  padding: 8px 10px;
  border: 1px solid rgba(236, 214, 160, .5);
  border-radius: 6px;
  background: rgba(16, 22, 30, .78);
  color: #f6f0e4;
  font: inherit;
  line-height: 1.3;
  text-align: left;
  box-shadow: 0 6px 14px rgba(10, 16, 22, .22);
}

.island-vn-choice b,
.island-vn-choice small {
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1.3;
}

.island-vn-choice b {
  font-size: 14px;
  font-weight: 600;
}

.island-vn-choice small {
  color: rgba(246, 240, 228, .72);
  font-size: 11px;
}

.island-vn-choice.is-off {
  opacity: .55;
}

/* 橙光那种点按：落点星闪 + 能点的瘪一下。 */
.island-spark {
  position: fixed;
  left: 0;
  top: 0;
  width: 0;
  height: 0;
  z-index: 40;
  pointer-events: none;
  transform: translate(-50%, -50%);
}

.island-spark em {
  position: absolute;
  left: -10px;
  top: -10px;
  width: 20px;
  height: 20px;
  border: 2px solid rgba(255, 236, 180, .95);
  border-radius: 50%;
  box-shadow: 0 0 12px 3px rgba(255, 230, 150, .55);
  animation: island-spark-ring .42s ease-out forwards;
}

.island-spark i {
  position: absolute;
  left: -5px;
  top: -5px;
  width: 10px;
  height: 10px;
  background: #fff6d0;
  clip-path: polygon(50% 0, 61% 35%, 100% 50%, 61% 65%, 50% 100%, 39% 65%, 0 50%, 39% 35%);
  box-shadow: 0 0 8px 2px rgba(255, 230, 150, .85);
  animation: island-spark-fly .42s ease-out forwards;
}

@keyframes island-spark-ring {
  0% { transform: scale(.35); opacity: 1; }
  100% { transform: scale(2.4); opacity: 0; }
}

@keyframes island-spark-fly {
  0% {
    transform: rotate(calc(var(--a) * 1deg)) translateY(0) scale(1);
    opacity: 1;
  }
  100% {
    transform: rotate(calc(var(--a) * 1deg)) translateY(-30px) scale(.35);
    opacity: 0;
  }
}

.is-tap {
  filter: brightness(1.18) saturate(1.06);
}

button.is-tap,
.island-btn.is-tap,
.island-bag-slot.is-tap,
.island-bag-turn.is-tap,
.island-bag-x.is-tap,
.island-bag-done.is-tap,
.island-hot.is-tap,
.island-vn-choice.is-tap,
.island-scene-tap.is-tap,
.island-slot.is-tap,
.island-plot-tile.is-tap,
.island-plant-arrow.is-tap,
.island-plant-x.is-tap,
.island-plant-go.is-tap,
.island-plant-buy.is-tap,
.island-float-chip.is-bag.is-tap,
.island-float-chip.is-bgm.is-tap,
.island-float-chip.is-climate.is-tap,
.island-bgm-chip.is-tap {
  transform: scale(0.94);
}

.island-float-chip.is-back.is-tap {
  transform: scale(0.94);
}

.island-btn,
.island-bag-slot,
.island-bag-turn,
.island-bag-x,
.island-bag-done,
.island-hot,
.island-scene-tap,
.island-float-chip,
.island-bgm-chip,
.island-plant-arrow,
.island-plant-x,
.island-plant-go,
.island-plant-buy {
  transition: transform 90ms ease-out, filter 90ms ease-out;
}

@keyframes island-veil-in {
  from { background-color: rgba(35, 48, 56, 0); }
  to { background-color: rgba(35, 48, 56, .42); }
}

@keyframes island-veil-out {
  from { background-color: rgba(35, 48, 56, .42); }
  to { background-color: rgba(35, 48, 56, 0); }
}

@keyframes island-pop-in {
  0% { opacity: 0; transform: scale(.82); }
  70% { opacity: 1; transform: scale(1.06); }
  100% { opacity: 1; transform: scale(1); }
}

@keyframes island-pop-out {
  from { opacity: 1; transform: scale(1); }
  to { opacity: 0; transform: scale(.88); }
}

@keyframes island-toast-in {
  from { opacity: 0; transform: translateX(-50%) translateY(10px) scale(.94); }
  to { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
}

.island-modal.is-pop {
  animation: island-veil-in .28s ease-out both;
}
.island-modal.is-pop .island-card {
  animation: island-pop-in .36s cubic-bezier(.2, 1.2, .32, 1) both;
}
.island-modal.is-out {
  animation: island-veil-out .22s ease-in both;
}
.island-modal.is-out .island-card {
  animation: island-pop-out .22s ease-in both;
}

.island-sheet.is-bag.is-pop {
  animation: island-veil-in .28s ease-out both;
}
.island-sheet.is-bag.is-pop .island-bag {
  animation: island-pop-in .36s cubic-bezier(.2, 1.2, .32, 1) both;
}
.island-sheet.is-bag.is-out {
  animation: island-veil-out .22s ease-in both;
}
.island-sheet.is-bag.is-out .island-bag {
  animation: island-pop-out .22s ease-in both;
}

.island-plant.is-pop .island-plant-card {
  animation: island-pop-in .36s cubic-bezier(.2, 1.2, .32, 1) both;
}
.island-plant.is-out .island-plant-card {
  animation: island-pop-out .22s ease-in both;
}

.island-bag-pop.is-pop {
  animation: island-pop-in .28s cubic-bezier(.2, 1.2, .32, 1) both;
}
.island-bag-pop.is-out {
  animation: island-pop-out .2s ease-in both;
}

.island-toast.is-pop {
  animation: island-toast-in .28s cubic-bezier(.2, 1.1, .32, 1) both;
}

@media (prefers-reduced-motion: reduce) {
  .island-modal.is-pop,
  .island-modal.is-out,
  .island-modal.is-pop .island-card,
  .island-modal.is-out .island-card,
  .island-sheet.is-bag.is-pop,
  .island-sheet.is-bag.is-out,
  .island-sheet.is-bag.is-pop .island-bag,
  .island-sheet.is-bag.is-out .island-bag,
  .island-sheet.is-climate.is-pop,
  .island-sheet.is-climate.is-out,
  .island-sheet.is-climate.is-pop .island-climate,
  .island-sheet.is-climate.is-out .island-climate,
  .island-plant.is-pop .island-plant-card,
  .island-plant.is-out .island-plant-card,
  .island-bag-pop.is-pop,
  .island-bag-pop.is-out,
  .island-toast.is-pop {
    animation: none;
  }
}

/* 潮汐木牌弹窗：叠在广场上，框透明底。数值叠在下划线上，略低于标签。 */
.island-sheet.is-climate {
  inset: 0;
  left: 0;
  transform: none;
  width: 100%;
  max-height: none;
  bottom: 0;
  background: rgba(35, 48, 56, .28);
  border-radius: 0;
  box-shadow: none;
  padding: 12px 8px;
  overflow: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 8;
}

.island-climate-stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  max-width: min(360px, 86vw);
}

.island-gazette {
  width: 100%;
  background: rgba(248, 243, 230, .92);
  color: #3f463c;
  border: 1px solid rgba(90, 78, 54, .28);
  border-radius: 10px;
  padding: 10px 12px 12px;
  font-size: 13px;
  line-height: 1.45;
}

.island-gazette b {
  display: block;
  font-size: 12px;
  letter-spacing: .12em;
}

.island-gazette em {
  display: block;
  font-style: normal;
  font-weight: 600;
  margin: 4px 0 6px;
}

.island-gazette p {
  margin: 0 0 4px;
}

.island-climate {
  position: relative;
  width: min(360px, 78vw, calc(40dvh * 1536 / 1024));
  aspect-ratio: 1536 / 1024;
  max-height: 40dvh;
  background: none center / 100% 100% no-repeat;
  background-color: transparent;
  color: #4e584c;
}

.island-climate-lab,
.island-climate-val {
  position: absolute;
  width: 18%;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translate(-50%, -50%);
  line-height: 1;
}

.island-climate-lab {
  height: 6%;
  font-size: clamp(12px, 3vw, 16px);
  font-weight: 500;
  letter-spacing: .18em;
  color: #b07846;
}

.island-climate-val {
  height: 7.2%;
  font-size: clamp(14px, 3.8vw, 20px);
  font-weight: 600;
  letter-spacing: .08em;
  color: #4a5348;
}

.island-climate-lab[data-k="weather"] { left: 36%; top: 42%; }
.island-climate-lab[data-k="tide"] { left: 64%; top: 42%; }
.island-climate-lab[data-k="phase"] { left: 36%; top: 58%; }
.island-climate-lab[data-k="season"] { left: 64%; top: 58%; }
.island-climate-val[data-k="weather"] { left: 36%; top: 50%; }
.island-climate-val[data-k="tide"] { left: 64%; top: 50%; }
.island-climate-val[data-k="phase"] { left: 36%; top: 66%; }
.island-climate-val[data-k="season"] { left: 64%; top: 66%; }

.island-climate-x {
  position: absolute;
  left: 86%;
  top: 4%;
  width: 10%;
  height: 10%;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.island-sheet.is-climate.is-pop .island-climate {
  animation: island-pop-in .28s cubic-bezier(.2, 1.2, .32, 1) both;
}
.island-sheet.is-climate.is-out .island-climate {
  animation: island-pop-out .2s ease-in both;
}