:root {
  color-scheme: light;
  font-family: Georgia, "Times New Roman", serif;
  background: #dceff0;
  color: #2f2a21;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 18px;
  background: linear-gradient(#82ccdf, #f2d394);
}

button, summary { font: inherit; }

.next-step-card { display: grid; width: 100%; margin: 12px 0; padding: 13px 15px; border: 3px solid #d29a37; border-radius: 16px; color: #3f3427; background: linear-gradient(135deg,#fff2b5,#fff9df); box-shadow: 0 8px 18px rgba(89,67,30,.16); text-align: left; cursor: pointer; }
.next-step-card:hover { transform: translateY(-2px); box-shadow: 0 11px 22px rgba(89,67,30,.22); }
.next-step-card:focus-visible { outline: 4px solid #287b68; outline-offset: 3px; }
.next-step-kicker { color: #94641b; font: 900 10px Arial,sans-serif; letter-spacing: .12em; }
.next-step-card strong { margin-top: 3px; font-size: 18px; }
.next-step-card small { margin-top: 3px; line-height: 1.35; }
.next-step-card b { justify-self: start; margin-top: 8px; padding: 5px 9px; border-radius: 999px; color: white; background: #287b68; font: 800 11px Arial,sans-serif; }
.next-step-pulse { animation: nextStepPulse .55s ease-in-out 3 !important; }
@keyframes nextStepPulse { 50% { filter: drop-shadow(0 0 13px #ffe75c) brightness(1.15); transform: scale(1.05); } }

.route-preview { display: grid; grid-template-columns: repeat(3,1fr); gap: 6px; margin-top: 9px; }
.route-preview div { padding: 7px; border: 2px solid #d8cfb8; border-radius: 10px; background: rgba(255,255,255,.62); }
.route-preview strong, .route-preview small { display: block; }
.route-preview strong { font: 900 11px Arial,sans-serif; }
.route-preview small { margin-top: 2px; font: 600 9px/1.25 Arial,sans-serif; }
.route-preview div.available { border-color: #d9a73a; background: #fff3bd; }
.route-preview div.chosen { border-color: #287b68; color: white; background: #287b68; }

.scene {
  position: relative;
  width: min(1180px, 97vw);
  height: min(760px, 95vh);
  min-height: 650px;
  overflow: hidden;
  border-radius: 28px;
  background: linear-gradient(#78cae2 0 47%, #2b9bbd 47% 100%);
  box-shadow: 0 30px 80px rgba(35, 48, 46, .3);
  transition: filter .8s ease, background 1s ease;
}

.scene.condition-pressured { filter: saturate(.86); }
.scene.condition-critical { filter: saturate(.68) sepia(.12); }
.scene.condition-collapsed { filter: saturate(.42) sepia(.22); }

.storm-overlay { position: absolute; inset: 0; z-index: 90; overflow: hidden; opacity: 0; pointer-events: none; background: rgba(20,35,50,.38); }
.storm-overlay.active { opacity: 1; animation: stormDarken 2.3s ease-in-out; }
.storm-clouds { position: absolute; left: -15%; top: 6%; width: 130%; color: #42505c; font-size: 150px; letter-spacing: 80px; filter: grayscale(1) brightness(.7); opacity: .95; }
.storm-overlay.active .storm-clouds { animation: stormClouds 2.3s ease-out; }
.storm-lightning { position: absolute; left: 46%; top: 21%; font-size: 150px; opacity: 0; }
.storm-overlay.active .storm-lightning { animation: lightningFlash 2.3s steps(1); }
.storm-rain { position: absolute; inset: -30%; background: repeating-linear-gradient(105deg, transparent 0 14px, rgba(220,240,255,.72) 15px 17px, transparent 18px 31px); transform: translateY(-20%); }
.storm-overlay.active .storm-rain { animation: drivingRain .45s linear infinite; }
.repair-payment { position: absolute; left: 50%; bottom: 20%; padding: 12px 18px; border-radius: 18px; color: #4d351a; background: #fff2b7; font: 800 20px Arial, sans-serif; opacity: 0; transform: translateX(-50%); }
.storm-overlay.active .repair-payment.visible { animation: repairPayment 2.3s ease-in-out; }
.storm-overlay.active ~ .island, .storm-overlay.active ~ .forest, .storm-overlay.active ~ .starter-camp, .storm-overlay.active ~ .new-house, .storm-overlay.active ~ .personal-home, .storm-overlay.active ~ .fishing-hut { animation: islandShake .18s ease-in-out 6; }

.sun {
  position: absolute;
  right: 92px;
  top: 68px;
  width: 92px;
  height: 92px;
  border-radius: 50%;
  background: #ffd66b;
  box-shadow: 0 0 60px #ffe49d;
}

.rival-island { position: absolute; left: 535px; top: 76px; z-index: 7; display: grid; justify-items: center; padding: 0; border: 0; color: #31515c; background: transparent; cursor: pointer; transform: scale(.82); transition: transform .7s, filter .2s; }
.rival-island:hover { filter: brightness(1.08); }
.rival-land { width: 104px; height: 44px; border-radius: 50%; background: radial-gradient(ellipse at 62% 35%, #f2dc8c 0 21%, transparent 22%), linear-gradient(155deg, transparent 0 42%, #4c9a65 43% 63%, #e5bd6d 64%); box-shadow: 0 8px 0 rgba(54,151,110,.72), 0 12px 18px rgba(29,85,99,.22); white-space: nowrap; }
.rival-island strong { margin-top: 8px; font: 800 11px Arial, sans-serif; text-transform: uppercase; letter-spacing: .06em; }
.rival-island small { margin-top: 2px; padding: 2px 7px; border-radius: 999px; background: rgba(255,255,255,.78); font: 700 9px Arial, sans-serif; }
.rival-island.level-2 { transform: scale(.94); }
.rival-island.level-2 .rival-land::after { content: ""; display: block; width: 29px; height: 21px; margin: 6px auto; border: 4px solid #81502e; background: repeating-linear-gradient(90deg,#f3d777 0 7px,#c85d50 7px 14px); }
.rival-island.level-3 { transform: scale(1.06); filter: drop-shadow(0 0 9px #ffe77c); }
.rival-island.level-3 .rival-land::after { content: ""; display: block; width: 34px; height: 28px; margin: 3px auto; border-radius: 50% 50% 15% 15%; background: radial-gradient(circle at 30% 25%,#5b9b55 0 24%,transparent 25%), radial-gradient(circle at 70% 25%,#5b9b55 0 24%,transparent 25%), linear-gradient(90deg,transparent 44%,#7b5536 45% 55%,transparent 56%); }

.island {
  position: absolute;
  left: 120px;
  bottom: 78px;
  width: 760px;
  height: 340px;
  border-radius: 50% 50% 42% 42%;
  background: radial-gradient(circle at 50% 30%, #73b957 0 42%, #4f9b48 43% 62%, #e9c274 63% 100%);
  transition: filter .8s ease;
}

.harbour-illustration {
  position: absolute;
  left: 185px;
  bottom: 80px;
  z-index: 3;
  width: 445px;
  height: 205px;
  border: 4px solid rgba(255,244,204,.76);
  border-radius: 48% 42% 18% 24% / 35% 34% 16% 20%;
  background: url("../assets/harbour/harbour-base-v1.png") center / cover no-repeat;
  box-shadow: 0 12px 24px rgba(28,81,80,.28), inset 0 0 18px rgba(255,255,255,.18);
  pointer-events: none;
}

.island-zone { position: absolute; z-index: 8; padding: 0; border: 2px dashed rgba(255,255,255,.56); background: rgba(255,255,255,.09); cursor: pointer; pointer-events: auto; }
.island-zone:hover { border-color: rgba(255,241,157,.95); background: rgba(255,255,255,.16); }
.island-zone span { position: absolute; z-index: 15; padding: 6px 10px; border-radius: 999px; color: #315340; background: rgba(255,255,255,.9); box-shadow: 0 3px 9px rgba(41,74,50,.12); white-space: nowrap; font: 800 10px Arial, sans-serif; letter-spacing: .04em; text-transform: uppercase; pointer-events: auto; cursor: pointer; }
.forest-zone { left: 245px; bottom: 275px; width: 370px; height: 205px; border-radius: 48% 52% 40% 44%; touch-action: manipulation; }
.forest-zone span { left: 105px; top: -18px; }
.harbour-zone { left: 205px; bottom: 105px; z-index: 4; width: 405px; height: 165px; border-color: rgba(255,255,255,.3); border-radius: 35% 42% 22% 28%; background: transparent; }
.harbour-zone span { left: 135px; bottom: -5px; }
.homes-zone { left: 555px; bottom: 220px; width: 215px; height: 270px; border-radius: 45% 50% 48% 42%; background: rgba(255,238,177,.13); }
.homes-zone span { right: 20px; top: -14px; }
.community-zone { left: 95px; bottom: 200px; width: 250px; height: 265px; border-radius: 48% 42% 46% 50%; background: rgba(255,232,137,.1); transition: background .6s, border-color .6s; }
.community-zone span { left: 20px; top: -16px; }
.community-open .community-zone { border-color: rgba(255,231,128,.9); background: rgba(255,232,137,.16); box-shadow: inset 0 0 30px rgba(255,227,116,.18); }
.island-path { position: absolute; z-index: 2; height: 20px; border-radius: 50%; border-top: 8px solid rgba(229,199,135,.78); transform-origin: left center; pointer-events: none; }
.path-harbour { left: 300px; bottom: 255px; width: 310px; transform: rotate(-13deg); }
.path-homes { left: 500px; bottom: 280px; width: 175px; transform: rotate(25deg); }
.community-gate { position: absolute; left: 105px; bottom: 390px; z-index: 7; display: grid; grid-template-columns: 50px 1fr; width: 205px; padding: 10px 12px; border: 3px solid #92683d; border-radius: 15px; color: #543d28; background: rgba(255,247,215,.96); box-shadow: 0 7px 18px rgba(45,58,41,.2); font-family: Arial, sans-serif; text-align: left; cursor: pointer; transition: opacity .55s, transform .55s, background .55s; }
.community-gate:hover { transform: translateY(-3px); box-shadow: 0 10px 20px rgba(45,58,41,.26); }
.community-gate:focus-visible, .island-building:focus-visible, .admiral-feathers:focus-visible { outline: 4px solid #ffe581; outline-offset: 3px; }
.community-gate .waiting-admiral { position: relative; grid-row: 1 / 3; align-self: center; min-height: 38px; font-size: 29px; }
.gate-lock { position: absolute; left: 0; top: 3px; z-index: 2; font-size: 31px; }
.admiral-preview { position: absolute; left: 20px; top: 5px; filter: grayscale(1); opacity: .45; white-space: nowrap; }
.community-gate strong { align-self: end; font-size: 11px; }
.community-gate small { margin-top: 2px; font-size: 9px; line-height: 1.3; }
.community-gate.waiting { border-color: #d19a35; background: rgba(255,240,177,.96); animation: opportunityGlow 1.8s ease-in-out infinite; }
.community-gate.waiting .admiral-preview { filter: none; opacity: 1; }
.community-gate.waiting .gate-lock { animation: unlockWiggle .65s ease-in-out; }
.community-gate.open { border-color: #4f825f; background: rgba(232,249,218,.96); transform: scale(.86); transform-origin: left center; }
.community-gate.open .gate-lock { display: none; }
.community-gate.open .admiral-preview { left: 2px; filter: none; opacity: 1; }

.condition-critical .island,
.condition-collapsed .island { filter: hue-rotate(-16deg) brightness(.9); }

.forest {
  position: absolute;
  left: 245px;
  bottom: 280px;
  width: 370px;
  height: 190px;
  z-index: 9;
  pointer-events: none;
}

.tree {
  position: absolute;
  width: 82px;
  height: 104px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  pointer-events: auto;
  touch-action: manipulation;
  transform-origin: bottom center;
  animation: sway 3.5s ease-in-out infinite;
  transition: opacity .55s ease, transform .55s ease;
}
.tree:disabled { opacity: 1; }
.tree:hover { filter: brightness(1.12) drop-shadow(0 0 9px #ffe77c); }
.tree:focus-visible { outline: 4px solid #ffe581; outline-offset: 2px; border-radius: 45%; }

.palm-trunk {
  position: absolute;
  left: 29px;
  bottom: 2px;
  width: 15px;
  height: 64px;
  border: 2px solid #713f24;
  border-radius: 55% 45% 24% 30%;
  background: repeating-linear-gradient(170deg, #9a5e32 0 8px, #c18346 8px 13px);
  clip-path: polygon(30% 0, 78% 0, 100% 100%, 0 100%);
  transform: rotate(4deg);
  box-shadow: inset 4px 0 rgba(255,225,158,.25);
  transition: height .55s ease, width .55s ease, left .55s ease;
}
.palm-crown { position: absolute; left: 34px; top: 27px; transition: opacity .35s ease, transform .55s ease; }
.palm-crown i {
  position: absolute;
  left: -3px;
  bottom: 0;
  width: 40px;
  height: 14px;
  border: 2px solid #24632c;
  border-radius: 100% 12% 100% 12%;
  background: linear-gradient(180deg, #58ad45, #277437);
  transform-origin: 3px 8px;
  box-shadow: inset 0 4px rgba(181,225,102,.28);
}
.palm-crown i:nth-child(1) { transform: rotate(-150deg); }
.palm-crown i:nth-child(2) { transform: rotate(-92deg) scale(.95); }
.palm-crown i:nth-child(3) { transform: rotate(-35deg); }
.palm-crown i:nth-child(4) { transform: rotate(18deg) scale(.92); }
.palm-crown i:nth-child(5) { transform: rotate(72deg); }

.tree:nth-child(3n) { animation-delay: .7s; }
.tree:nth-child(4n) { animation-delay: 1.2s; }
.tree.removed { pointer-events: none; animation: none; transform: none; }
.tree.removed .palm-crown { opacity: 0; transform: scale(.15) rotate(20deg); }
.tree.removed .palm-trunk { left: 24px; width: 24px; height: 20px; transform: rotate(-2deg); }

.saplings, .logs, .starter-camp, .new-house, .personal-home, .home-garden, .home-furniture, .home-colour, .family, .fishing-hut, .cold-storage, .market-stall, .repair-workshop, .cooperative-boat, .cooperative-family, .admiral-feathers, .community-kitchen, .kitchen-gathering, .tree-nursery, .nursery-helpers, .learning-room, .learning-group, .shared-fish, .workshop-activity, .trade-bonus, .maya-visitor, .exchange-delivery, .level-landmark, .fish-catch, .production-label, .fish-delivery, .smoke, .boat {
  position: absolute;
  z-index: 5;
}

.saplings { left: 330px; bottom: 280px; display: flex; gap: 7px; align-items: end; opacity: 0; transition: opacity .5s; }
.saplings.visible { opacity: 1; }
.saplings span { position: relative; width: 19px; height: 31px; border-bottom: 3px solid #704729; }
.saplings span::before { content: ""; position: absolute; left: 8px; bottom: 1px; width: 4px; height: 23px; border-radius: 4px; background: #6d8c3b; }
.saplings span::after { content: ""; position: absolute; left: 0; top: 0; width: 19px; height: 17px; border-radius: 90% 12% 90% 12%; background: linear-gradient(135deg, #8acb55 0 48%, #3e8b42 50%); transform: rotate(-8deg); }
.saplings span:nth-child(2) { transform: scale(.82); }
.saplings span:nth-child(3) { transform: scale(.68); }
.logs { left: 540px; bottom: 232px; display: flex; gap: 4px; align-items: end; opacity: 0; transition: opacity .5s; }
.logs.visible { opacity: 1; }
.logs span { position: relative; width: 45px; height: 17px; border: 2px solid #714326; border-radius: 11px 5px 5px 11px; background: repeating-linear-gradient(0deg, #9f6336 0 5px, #bd7f45 5px 9px); transform: rotate(-7deg); }
.logs span::after { content: ""; position: absolute; right: -3px; top: -2px; width: 15px; height: 17px; border: 2px solid #714326; border-radius: 50%; background: radial-gradient(circle, #86502e 0 18%, #c99657 20% 42%, #86502e 45% 51%, #d3a567 54%); }
.logs span:nth-child(2) { margin-left: -28px; transform: translateY(-13px) rotate(5deg); }
.logs span:nth-child(3) { margin-left: -27px; transform: translateY(8px) rotate(2deg); }
.starter-camp { left: 590px; bottom: 276px; font-size: 60px; }
.island-building { padding: 0; border: 0; background-color: transparent; background-position: center; background-repeat: no-repeat; background-size: contain; cursor: pointer; filter: drop-shadow(0 7px 5px rgba(39,56,43,.28)); }
.island-building:hover { filter: drop-shadow(0 9px 6px rgba(39,56,43,.32)) brightness(1.07); }
.new-house { left: 570px; bottom: 245px; width: 235px; height: 170px; background-image: url("../assets/homes/community-home.png"); opacity: 0; transform: scale(.2); transition: opacity .55s, transform .55s; }
.new-house.visible { opacity: 1; transform: scale(1); }
.new-house.customised { filter: drop-shadow(0 0 9px #ffe168); }
.new-house.damaged, .personal-home.damaged, .fishing-hut.damaged { filter: grayscale(.7) sepia(.7) drop-shadow(5px 6px 2px #5c3626); transform: rotate(-7deg) scale(.92); }
.new-house.damaged::after, .personal-home.damaged::after, .fishing-hut.damaged::after { content: "💥"; position: absolute; left: 45%; top: 15%; font-size: 28px; filter: none; }
.damage-reveal .new-house.damaged, .damage-reveal .personal-home.damaged, .damage-reveal .fishing-hut.damaged { animation: damageReveal .55s ease-in-out 3; outline: 5px solid rgba(176,52,36,.75); outline-offset: 5px; }
.new-house.storm-hit, .personal-home.storm-hit, .fishing-hut.storm-hit { filter: grayscale(.8) sepia(.8); transform: rotate(-9deg) scale(.9); }
.personal-home { left: 650px; bottom: 380px; z-index: 7; width: 145px; height: 125px; background-image: url("../assets/homes/personal-home.png"); opacity: 0; transform: scale(.2); transition: opacity .6s, transform .6s; }
.personal-home.visible { opacity: 1; transform: scale(1); }
.personal-home.customised { filter: drop-shadow(0 0 12px #ffd85e); }
.home-garden { left: 625px; bottom: 354px; z-index: 6; width: 190px; height: 105px; background: url("../assets/homes/garden.png") center/contain no-repeat; opacity: 0; transition: opacity .5s, transform .5s; transform: scale(.7); pointer-events: none; }
.home-furniture { left: 695px; bottom: 420px; z-index: 8; width: 42px; height: 29px; border-radius: 8px; background: radial-gradient(circle at 48% 45%, #fff4a5 0 24%, #e78d36 42%, rgba(231,141,54,0) 70%); box-shadow: 0 0 12px #ffd45e; opacity: 0; transition: opacity .5s; pointer-events: none; }
.home-colour { left: 660px; bottom: 474px; z-index: 8; width: 110px; height: 18px; background: repeating-linear-gradient(125deg,#ec5d55 0 13px,#ffd45c 13px 26px,#54a9c0 26px 39px); clip-path: polygon(0 0,100% 0,92% 100%,84% 0,76% 100%,68% 0,60% 100%,52% 0,44% 100%,36% 0,28% 100%,20% 0,12% 100%,4% 0); opacity: 0; transition: opacity .5s; pointer-events: none; }
.home-garden.visible, .home-furniture.visible, .home-colour.visible { opacity: 1; }
.home-garden.visible { transform: scale(1); }
.family { left: 610px; bottom: 258px; display: flex; gap: 0; align-items: end; font-size: 25px; opacity: 0; transition: opacity .55s .25s; filter: drop-shadow(0 3px 2px rgba(30,45,35,.25)); pointer-events: none; }
.family span:nth-child(2) { transform: translateY(2px); }
.family span:nth-child(3) { font-size: 21px; transform: translate(-3px,3px); }
.family.visible { opacity: 1; }
.harbour-building { padding: 0; border: 0; background-color: transparent; background-position: center; background-repeat: no-repeat; background-size: contain; cursor: pointer; filter: drop-shadow(0 7px 5px rgba(39,56,43,.28)); }
.harbour-building:hover { filter: drop-shadow(0 7px 5px rgba(39,56,43,.28)) brightness(1.08); }
.harbour-building:focus-visible { outline: 4px solid #ffe581; outline-offset: 3px; border-radius: 12px; }
.fishing-hut { left: 445px; bottom: 150px; width: 175px; height: 145px; background-image: url("../assets/harbour/fishing-hut-v1.png"); font-size: 0; opacity: 0; transform: translateY(18px) scale(.7); transition: opacity .55s, transform .55s; }
.fishing-hut.visible { opacity: 1; transform: translateY(0) scale(1); }
.fishing-hut:not(.visible), .cold-storage:not(.visible), .market-stall:not(.visible) { visibility: hidden; pointer-events: none; }
.fishing-hut.producing { animation: productivePulse .75s ease-out; }
.cold-storage { left: 385px; bottom: 195px; width: 120px; height: 100px; background-image: url("../assets/harbour/cold-storage-v1.png"); font-size: 0; opacity: 0; transform: scale(.4); transition: opacity .5s, transform .5s; filter: drop-shadow(0 0 7px white); }
.cold-storage.visible { opacity: 1; transform: scale(1); }
.market-stall { left: 265px; bottom: 150px; display: block; width: 155px; height: 125px; background-image: url("../assets/harbour/fish-market-v1.png"); box-shadow: none; font-size: 0; opacity: 0; transform: scale(.35); transition: opacity .55s, transform .55s; }
.market-stall::after { content: "Fish market"; position: absolute; left: 38px; top: 112px; padding: 3px 7px; border-radius: 999px; color: #62441f; background: rgba(255,255,255,.9); white-space: nowrap; font: 800 10px Arial, sans-serif; }
.market-stall.visible { opacity: 1; transform: scale(1); }
.repair-workshop { left: 565px; bottom: 200px; width: 155px; height: 145px; border: 0; background: url("../assets/workshop/repair-workshop-v2.png") center/contain no-repeat; font-size: 0; opacity: 0; transform: scale(.35); transition: opacity .55s, transform .55s; filter: drop-shadow(0 7px 5px rgba(39,56,43,.28)); }
.repair-workshop.visible { opacity: 1; transform: scale(1); }
.cooperative-boat { left: 390px; bottom: 130px; font-size: 38px; opacity: 0; transform: translateX(-30px); transition: opacity .55s, transform .55s; animation: bob 2.7s ease-in-out infinite; }
.cooperative-boat.visible { opacity: 1; transform: translateX(0); }
.cooperative-boat::after { content: "Co-op fleet"; position: absolute; left: 18px; top: 46px; padding: 3px 7px; border-radius: 999px; color: #225263; background: rgba(255,255,255,.9); white-space: nowrap; font: 800 10px Arial, sans-serif; }
.cooperative-family { left: 405px; bottom: 205px; font-size: 34px; opacity: 0; transform: scale(.4); transition: opacity .55s, transform .55s; }
.cooperative-family.visible { opacity: 1; transform: scale(1); }
.admiral-feathers { left: 278px; bottom: 365px; display: grid; justify-items: center; padding: 5px 8px 6px; border: 2px solid rgba(255,244,199,.85); border-radius: 45% 45% 14px 14px; color: #513a24; background: rgba(255,247,214,.92); font-size: 38px; opacity: 0; transform: translateY(12px); cursor: pointer; transition: opacity .55s, transform .55s; filter: drop-shadow(0 3px 2px rgba(29,52,70,.3)); }
.admiral-feathers small { font: 900 8px/1.05 Arial,sans-serif; text-transform: uppercase; }
.admiral-feathers.visible { opacity: 1; transform: translateY(0); animation: bob 3s ease-in-out infinite; }
.community-kitchen { left: 115px; bottom: 255px; font-size: 52px; opacity: 0; transform: scale(.35); transition: opacity .55s, transform .55s; filter: drop-shadow(0 0 8px #fff1a2); }
.community-kitchen.visible { opacity: 1; transform: scale(1); }
.kitchen-gathering { left: 150px; bottom: 220px; font-size: 29px; opacity: 0; transition: opacity .55s; }
.kitchen-gathering.visible { opacity: 1; animation: sharedMeal 3.2s ease-in-out infinite; }
.tree-nursery { left: 275px; bottom: 265px; font-size: 46px; opacity: 0; transform: scale(.35); transition: opacity .55s, transform .55s; }
.tree-nursery.visible { opacity: 1; transform: scale(1); }
.nursery-helpers { left: 295px; bottom: 235px; font-size: 22px; opacity: 0; transition: opacity .55s; }
.nursery-helpers.visible { opacity: 1; animation: tendSaplings 3.2s ease-in-out infinite; }
.learning-room { left: 115px; bottom: 355px; font-size: 53px; opacity: 0; transform: scale(.35); transition: opacity .55s, transform .55s; }
.learning-room.visible { opacity: 1; transform: scale(1); }
.learning-group { left: 175px; bottom: 355px; font-size: 21px; opacity: 0; transition: opacity .55s; }
.learning-group.visible { opacity: 1; animation: learningTogether 3s ease-in-out infinite; }
.shared-fish { left: 420px; bottom: 170px; opacity: 0; pointer-events: none; }
.shared-fish.sharing { animation: shareFish 1.4s ease-in-out; }
.workshop-activity { left: 530px; bottom: 245px; padding: 5px 8px; border-radius: 10px; color: #65401e; background: rgba(255,248,207,.92); font: 700 11px Arial, sans-serif; opacity: 0; pointer-events: none; }
.workshop-activity.active { animation: workshopProtect 1.6s ease-in-out; }
.trade-bonus { left: 300px; bottom: 225px; z-index: 12; padding: 7px 11px; border: 2px solid #d4a12b; border-radius: 12px; color: #5c411d; background: #fff0a9; font: 800 12px Arial, sans-serif; opacity: 0; pointer-events: none; }
.trade-bonus.active { animation: bonusRise 1.8s ease-out; }
.maya-visitor { left: 250px; bottom: 205px; z-index: 8; font-size: 38px; opacity: 0; transform: translateX(-25px); transition: opacity .6s, transform .6s; }
.maya-visitor.visible { opacity: 1; transform: translateX(0); animation: communityGather 3s ease-in-out infinite; }
.exchange-delivery { left: 175px; bottom: 150px; z-index: 11; font-size: 38px; opacity: 0; pointer-events: none; }
.exchange-delivery.active { animation: exchangeArrival 2.2s ease-out; }
.level-landmark { left: 575px; bottom: 315px; z-index: 6; font-size: 52px; opacity: 0; transform: scale(.25); transition: opacity .8s, transform .8s; filter: drop-shadow(0 0 10px #ffe17b); }
.legacy-harbour .level-landmark { left: 505px; bottom: 105px; }
.level-landmark.visible { opacity: 1; transform: scale(1); }
.player-level-3 .level-landmark { font-size: 64px; filter: drop-shadow(0 0 18px #ffd95a); }
.fish-catch { left: 520px; bottom: 165px; display: flex; gap: 5px; align-items: center; opacity: 0; transition: opacity .55s; }
.fish-catch.visible { opacity: 1; animation: bob 2.5s ease-in-out infinite; }
.fish-catch[data-stock="low"] .drawn-fish:nth-child(n+2), .fish-catch[data-stock="some"] .drawn-fish:nth-child(3) { display: none; }
.drawn-fish { position: relative; display: block; width: 28px; height: 16px; border: 2px solid #174f65; border-radius: 65% 48% 48% 65%; background: linear-gradient(165deg, #76d5d8 0 48%, #2d91aa 50%); filter: drop-shadow(0 2px 1px rgba(25,62,69,.28)); }
.drawn-fish::before { content: ""; position: absolute; left: -11px; top: 1px; width: 13px; height: 14px; background: #e7854e; clip-path: polygon(100% 50%, 0 0, 18% 50%, 0 100%); }
.drawn-fish::after { content: ""; position: absolute; right: 4px; top: 4px; width: 4px; height: 4px; border-radius: 50%; background: #173542; box-shadow: 1px 0 #fff; }
.fish-catch .drawn-fish:nth-child(2) { transform: translateY(6px) scale(.9); }
.fish-catch .drawn-fish:nth-child(3) { transform: translateY(-4px) scale(.82); }
.production-label { left: 445px; bottom: 145px; padding: 5px 8px; border-radius: 10px; color: #164f62; background: rgba(255,255,255,.88); font: 700 12px Arial, sans-serif; opacity: 0; transform: translateY(8px); transition: opacity .3s, transform .3s; }
.production-label.visible { opacity: 1; transform: translateY(0); }
.fish-delivery { left: 520px; bottom: 180px; opacity: 0; pointer-events: none; }
.fish-delivery.delivering { animation: deliverFish 1.1s ease-in-out; }
.smoke { left: 638px; bottom: 355px; font-size: 31px; opacity: .72; animation: rise 4s ease-in-out infinite; }
.boat { left: 500px; bottom: 80px; width: 145px; height: 105px; background-image: url("../assets/harbour/fishing-boat-v1.png"); font-size: 0; animation: bob 3s ease-in-out infinite; }
.boat.upgraded { width: 170px; height: 125px; background-image: url("../assets/harbour/fishing-boat-upgraded-v1.png"); }
.boat.upgraded::after { content: "Upgraded boat"; position: absolute; left: 45px; top: 108px; padding: 3px 7px; border-radius: 999px; color: #254e59; background: rgba(255,255,255,.92); white-space: nowrap; font: 800 10px Arial, sans-serif; }
.bird { position: absolute; top: 140px; left: -80px; font-size: 32px; animation: fly 16s linear infinite; }

.title {
  position: absolute;
  left: 38px;
  top: 32px;
  z-index: 8;
  max-width: 480px;
  padding: 16px 20px;
  border-radius: 18px;
  color: #24424a;
  background: rgba(255, 255, 255, .6);
  backdrop-filter: blur(5px);
}

.title h1 { margin: 2px 0 7px; font-size: 34px; }
.title p { margin: 0; line-height: 1.35; }
.title .eyebrow { text-transform: uppercase; letter-spacing: .09em; font: 700 12px Arial, sans-serif; }

.stats {
  position: absolute;
  left: 36px;
  bottom: 28px;
  z-index: 9;
  width: 240px;
  padding: 13px 17px;
  border-radius: 17px;
  color: #24424a;
  background: rgba(255, 255, 255, .76);
  font-family: Arial, sans-serif;
}

.stats div { display: flex; justify-content: space-between; gap: 18px; padding: 3px 0; }
.stats .resource-bars { display: grid; width: 100%; box-sizing: border-box; justify-content: stretch; gap: 6px; margin-top: 7px; padding-top: 8px; border-top: 1px solid rgba(61,91,88,.28); }
.stats .resource-bar { display: grid; width: 100%; grid-template-columns: 80px minmax(70px,1fr); align-items: center; justify-content: stretch; gap: 7px; padding: 0; font: 700 10px/1 Arial, sans-serif; }
.resource-bar i { height: 7px; overflow: hidden; border-radius: 999px; background: rgba(59,76,71,.18); }
.resource-bar b { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg,#e0b442,#3f8158); transition: width .35s ease; }

.panel {
  position: absolute;
  right: 28px;
  bottom: 28px;
  z-index: 10;
  width: 370px;
  max-height: calc(100% - 56px);
  overflow-y: auto;
  padding: 22px;
  border: 3px solid rgba(83, 54, 28, .18);
  border-radius: 22px;
  color: #3c2b1d;
  background: rgba(255, 249, 225, .95);
  box-shadow: 0 12px 32px rgba(0, 0, 0, .2);
}

.chapter { margin: 0 0 5px; color: #7a603c; text-transform: uppercase; letter-spacing: .08em; font: 700 11px Arial, sans-serif; }
.panel h2 { margin: 0 0 9px; font-size: 25px; }
.panel p { line-height: 1.45; }
.actions { display: grid; gap: 13px; margin-top: 16px; }
.action-group { display: grid; gap: 8px; padding: 10px; border: 1px solid #dfd0aa; border-radius: 14px; background: rgba(255,255,255,.38); }
.action-group h3 { margin: 0 3px 2px; color: #6d5638; font: 800 12px Arial, sans-serif; letter-spacing: .06em; text-transform: uppercase; }
.action.productive-action { outline: 2px solid #4f8260; outline-offset: -2px; }
.action.productive-action small::before { content: "⚙ Productive investment · "; }
.action.new-opportunity { outline: 4px solid #e2ad35; box-shadow: 0 0 0 5px rgba(255,220,117,.5), 0 4px 0 #49301d; animation: opportunityGlow 1.5s ease-in-out infinite; }

.objective {
  margin: 13px 0;
  padding: 11px 13px;
  border: 1px solid #d7c695;
  border-radius: 13px;
  background: rgba(255, 255, 255, .54);
  font: 13px/1.45 Arial, sans-serif;
}

.objective strong { display: block; margin-bottom: 5px; }
.objective small { display: block; margin-bottom: 7px; color: #47634f; line-height: 1.35; }
.objective.secure { border-color: #68a273; background: rgba(233,250,229,.78); }
.goal { display: flex; gap: 7px; color: #765f47; }
.goal.complete { color: #2c6a42; font-weight: bold; }
.reserve-meter { margin: 12px 0; padding: 11px 13px; border: 2px solid #d09b3e; border-radius: 13px; background: #fff4cd; font: 12px/1.4 Arial, sans-serif; }
.reserve-meter > div:first-child { display: flex; justify-content: space-between; gap: 12px; }
.reserve-track { height: 9px; margin: 7px 0; overflow: hidden; border-radius: 999px; background: #e1d3ab; }
.reserve-track span { display: block; height: 100%; width: 0; background: #3e8b58; transition: width .4s; }
.reserve-meter.secure { border-color: #3e8b58; background: #e9f5e7; }
.market-board { margin: 12px 0; padding: 11px 13px; border: 2px solid #7592a0; border-radius: 13px; background: #edf6f8; font: 12px/1.4 Arial, sans-serif; transition: background .4s, border-color .4s; }
.market-board > div { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 4px; }
.market-board > div span { font-weight: 800; }
.market-cause { display: block; margin: 5px 0 2px; }
.market-facts { margin-top: 8px; padding-top: 7px; border-top: 1px solid rgba(70,90,100,.22); font-size: 11px; }
.market-storage { margin-top: 5px; color: #425d68; font-size: 11px; }
.market-board.demand-high { border-color: #3e8b58; background: #e9f5e7; }
.market-board.demand-high > div span { color: #28653e; }
.market-board.demand-low { border-color: #b87a40; background: #fff0d6; }
.market-board.demand-low > div span { color: #8a4c25; }
.market-board.demand-abundant, .market-board.demand-delivery { border-color: #b87a40; background: #fff0d6; }
.market-board.demand-rough, .market-board.demand-festival { border-color: #3e8b58; background: #e9f5e7; }
.progress-board { margin: 12px 0; padding: 11px 13px; border: 2px solid #8a72ad; border-radius: 13px; background: #f6efff; font: 11px/1.35 Arial, sans-serif; }
.progress-board > strong { display: block; margin-bottom: 7px; color: #503f70; text-transform: uppercase; letter-spacing: .05em; }
.island-progress { display: flex; justify-content: space-between; gap: 8px; margin-top: 5px; }
.island-progress b { text-align: right; }
.level-track { height: 8px; margin: 4px 0; overflow: hidden; border-radius: 999px; background: #ded4ea; }
.level-track span { display: block; width: 33.333%; height: 100%; border-radius: inherit; background: linear-gradient(90deg,#479c69,#78c68c); transition: width .7s; }
.level-track.rival span { background: linear-gradient(90deg,#b36e9c,#e3a3c7); }
.progress-board small { display: block; margin-top: 7px; color: #5e5268; }
.path-badge { margin-top: 9px; padding: 8px 10px; border: 2px solid #d6a638; border-radius: 11px; background: #fff1b8; box-shadow: 0 0 0 3px rgba(255,221,102,.22); }
.path-badge strong, .path-badge small { display: block; }
.path-badge small { margin-top: 2px; color: #5b4727; }
.player-level-2 .homes-zone, .player-level-2 .community-zone { box-shadow: inset 0 0 28px rgba(255,226,107,.18); }
.player-level-3 .island { filter: saturate(1.18) brightness(1.04); box-shadow: 0 0 35px rgba(255,226,99,.5); }
.player-level-3 .homes-zone, .player-level-3 .community-zone, .player-level-3 .harbour-zone { border-color: rgba(255,231,128,.92); }

.action, .restart {
  width: 100%;
  padding: 11px 15px;
  border: 0;
  border-radius: 999px;
  color: white;
  background: #76502e;
  box-shadow: 0 4px 0 #49301d;
  cursor: pointer;
}

.action:hover:not(:disabled), .restart:hover { background: #8a6038; }
.action.world-action-focus { outline: 5px solid #f0b93d; outline-offset: 3px; box-shadow: 0 0 0 8px rgba(255,226,122,.5), 0 4px 0 #49301d; animation: worldActionFocus 1.2s ease-in-out 2; }
.action:active:not(:disabled), .restart:active { transform: translateY(2px); box-shadow: 0 2px 0 #49301d; }
.action:disabled { opacity: .45; cursor: not-allowed; }
.action small { display: block; margin-top: 4px; font: 700 11px/1.3 Arial, sans-serif; letter-spacing: .02em; }
.action-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-weight: bold; }
.cost-badge { flex: none; padding: 4px 8px; border-radius: 999px; color: #4b2f19; background: #ffe4a8; font: 800 12px Arial, sans-serif; }
.action-tabs { position: sticky; top: 0; z-index: 5; display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; margin: 0 0 8px; padding: 5px; border-radius: 15px; background: rgba(255,248,220,.96); box-shadow: 0 4px 12px rgba(64,45,28,.12); }
.action-tabs button { padding: 9px 5px; border: 0; border-radius: 10px; color: #594029; background: #ead9b8; cursor: pointer; font: 900 12px Arial, sans-serif; }
.action-tabs button.active { color: white; background: #456d50; box-shadow: inset 0 -3px rgba(0,0,0,.16); }
.action-tab-introduction { margin: 3px 2px 10px; color: #6d583f; font: 700 12px/1.35 Arial, sans-serif; }
.right-now { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; margin: 0 0 9px; padding: 11px 13px; border: 2px solid #78917c; border-radius: 14px; color: #294a35; background: #eef5e9; cursor: pointer; text-align: left; }
.right-now span { display: grid; gap: 2px; }
.right-now b { font: 900 10px Arial, sans-serif; letter-spacing: .1em; }
.right-now small { font: 800 13px/1.3 Arial, sans-serif; }
.right-now strong { flex: none; font: 900 12px Arial, sans-serif; }
.right-now.urgent { border-color: #d18a27; background: #fff0bd; box-shadow: 0 0 0 4px rgba(232,161,48,.15); }
.activity-board { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin-bottom: 9px; }
.activity-card { display: grid; gap: 5px; min-height: 70px; padding: 10px; border: 2px solid #cfbd98; border-radius: 14px; color: #543d28; background: #fffaf0; cursor: pointer; text-align: left; }
.activity-card-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 5px; }
.activity-card-heading strong { font: 900 14px Arial, sans-serif; }
.activity-card-heading b { padding: 3px 5px; border-radius: 999px; color: #5f4b2c; background: #eadfbd; font: 900 8px Arial, sans-serif; letter-spacing: .03em; }
.activity-card small { color: #735f48; font: 700 11px/1.3 Arial, sans-serif; }
.activity-card.active { border-color: #477453; background: #e9f3e4; box-shadow: inset 0 0 0 2px rgba(71,116,83,.12); }
.activity-card.attention { border-color: #d18a27; background: #fff3c9; }
.activity-card.attention .activity-card-heading b { color: white; background: #c86c2f; }

.fruit-spot { position: absolute; z-index: 8; width: 52px; height: 52px; padding: 0; border: 3px solid rgba(255,255,255,.82); border-radius: 50%; background: rgba(255,255,255,.72); font-size: 28px; cursor: pointer; box-shadow: 0 5px 14px rgba(0,0,0,.18); animation: bob 3s ease-in-out infinite; }
.fruit-spot:hover { transform: scale(1.12); background: white; }
.coconut-spot { left: 265px; bottom: 390px; }
.banana-spot { left: 390px; bottom: 425px; animation-delay: .5s; }
.mango-spot { left: 530px; bottom: 380px; animation-delay: 1s; }

.guide-modal { position: fixed; inset: 0; z-index: 100; display: none; place-items: center; padding: 20px; background: rgba(22,38,40,.62); backdrop-filter: blur(5px); }
.guide-modal.visible { display: grid; }
.guide-card { display: grid; grid-template-columns: 130px 1fr; gap: 20px; width: min(620px, 94vw); padding: 26px; border: 5px solid #d6ad62; border-radius: 28px; background: #fff8dc; box-shadow: 0 24px 70px rgba(0,0,0,.32); }
.admiral-guide { align-self: center; width: 130px; font-size: 86px; white-space: nowrap; animation: lettuceBounce 1.8s ease-in-out infinite; filter: drop-shadow(0 5px 3px rgba(30,64,77,.25)); }
.admiral-guide img { display: block; width: 126px; height: 150px; border: 4px solid #fff4cb; border-radius: 46% 46% 42% 42% / 38% 38% 30% 30%; object-fit: cover; object-position: 50% 28%; box-shadow: 0 8px 0 #9b713c, 0 13px 22px rgba(40,45,36,.28); }
.admiral-guide span { display: none; }
.admiral-guide.emoji-speaker img { display: none; }
.admiral-guide.emoji-speaker span { display: inline; }
.guide-card h2 { margin: 3px 0 9px; font-size: 28px; }
.guide-card p { line-height: 1.5; }
.guide-card button { padding: 11px 18px; border: 0; border-radius: 999px; color: white; background: #76502e; cursor: pointer; }
.guide-buttons { display: flex; justify-content: flex-end; gap: 9px; }
.guide-card button.secondary { color: #5b3d25; background: #ead9b8; }
@keyframes lettuceBounce { 0%,100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-9px) rotate(3deg); } }

.warning {
  padding: 11px 13px;
  border-left: 5px solid #bd5a31;
  border-radius: 8px;
  background: #fff0d6;
  color: #783a25;
  font-weight: bold;
  line-height: 1.4;
}

.summary {
  margin-top: 14px;
  padding: 12px;
  border-radius: 13px;
  background: rgba(255, 255, 255, .72);
  font: 14px/1.45 Arial, sans-serif;
}

.change { display: flex; justify-content: space-between; padding: 2px 0; }
.prosperity-breakdown { display: grid; gap: 3px; margin-top: 10px; padding-top: 10px; border-top: 1px solid #d4c49c; }
.details { margin-top: 15px; padding-top: 12px; border-top: 1px solid #d9cba9; font: 13px/1.45 Arial, sans-serif; }
.details summary { cursor: pointer; font-weight: bold; }
.details ul { padding-left: 19px; }
.restart { margin-top: 16px; background: #446a4a; box-shadow-color: #29432d; }
.end-actions {
  display: grid;
  gap: 9px;
  margin-top: 18px;
  text-align: center;
}
.end-actions[hidden] { display: none; }
.end-actions small { color: #66543e; font-weight: 700; }
.feedback-link {
  display: block;
  padding: 15px 18px;
  border-radius: 999px;
  color: #2f2418;
  background: #f4c84a;
  box-shadow: 0 6px 0 #8b6423;
  font-weight: 900;
  text-decoration: none;
}
.feedback-link:hover { background: #ffda68; }
.feedback-link:active { transform: translateY(2px); box-shadow: 0 3px 0 #8b6423; }
.end-actions .restart { margin-top: 5px; }

.trader-modal { position: fixed; inset: 0; z-index: 110; display: none; place-items: center; padding: 20px; background: rgba(22,38,40,.7); backdrop-filter: blur(6px); }
.trader-modal.visible { display: grid; }
.trader-card { display: grid; grid-template-columns: 140px 1fr; gap: 22px; width: min(700px, 95vw); max-height: 92vh; overflow-y: auto; padding: 28px; border: 5px solid #5c8b9c; border-radius: 28px; background: #fff8dc; box-shadow: 0 24px 70px rgba(0,0,0,.36); }
.trader-portrait { align-self: start; padding-top: 35px; font-size: 76px; }
.trader-card h2 { margin: 3px 0 9px; font-size: 29px; }
.trader-card p { line-height: 1.5; }
.trader-offer { display: flex; justify-content: space-between; margin: 12px 0; padding: 10px 13px; border-radius: 12px; background: #e8f2f3; font: 800 14px Arial, sans-serif; }
.trader-risk { display: grid; gap: 3px; margin: 10px 0 13px; padding: 10px 13px; border: 2px solid #c56b45; border-radius: 12px; color: #713b28; background: #fff0da; font: 12px/1.35 Arial, sans-serif; }
.trader-questions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
.trader-card button { padding: 10px 12px; border: 0; border-radius: 12px; color: white; background: #76502e; cursor: pointer; font: 700 13px Arial, sans-serif; }
.trader-card button:disabled { opacity: .42; cursor: not-allowed; }
.trader-card button.secondary { color: #5b3d25; background: #ead9b8; }
.trader-answer { min-height: 70px; padding: 12px; border-left: 5px solid #5c8b9c; border-radius: 8px; background: white; }
.trader-decisions { display: flex; justify-content: flex-end; gap: 9px; }

.trade-dialogue-modal { position: fixed; inset: 0; z-index: 125; display: none; place-items: end center; padding: 24px; background: linear-gradient(transparent 15%, rgba(7,27,38,.82)); backdrop-filter: blur(2px); }
.trade-dialogue-modal.visible { display: grid; }
.trade-dialogue-scene { display: grid; grid-template-columns: 105px minmax(260px, 1fr) 80px; gap: 14px; width: min(860px, 96vw); max-height: 92vh; overflow-y: auto; padding: 20px; border: 4px solid #e9c876; border-radius: 24px; background: linear-gradient(#fff8dc, #e8f4e6); box-shadow: 0 18px 60px rgba(0,0,0,.42); }
.dialogue-character { align-self: end; font-size: 68px; filter: drop-shadow(0 4px 2px rgba(0,0,0,.2)); }
.dialogue-admiral { align-self: end; font-size: 54px; filter: drop-shadow(0 4px 2px rgba(0,0,0,.2)); }
.dialogue-speech { position: relative; padding: 14px 17px; border: 3px solid #54768a; border-radius: 18px; background: white; }
.dialogue-speech::before { content: ""; position: absolute; left: -18px; bottom: 24px; border: 9px solid transparent; border-right-color: #54768a; }
.dialogue-speech h2 { margin: 3px 0 8px; font-size: 22px; }
.dialogue-speech p { margin: 5px 0; line-height: 1.4; }
.dialogue-trust { display: inline-block; margin-top: 7px; padding: 5px 9px; border-radius: 999px; color: #365845; background: #e8f3df; font: 900 12px Arial, sans-serif; }
.dialogue-numbers { margin-top: 10px; padding: 9px 11px; border-radius: 10px; background: #edf4e7; font: 800 13px/1.5 Arial, sans-serif; }
.dialogue-choices { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.dialogue-choices button { padding: 11px; border: 2px solid #b39765; border-radius: 12px; color: #3d2c1d; background: #fffdf3; cursor: pointer; font: 800 13px/1.25 Arial, sans-serif; }
.dialogue-choices button:hover { background: #fff0ba; }
.dialogue-choices button.accept { color: white; border-color: #35684a; background: #3f7757; }
.dialogue-choices button.decline { color: #5c3923; border-color: #a66e49; background: #f2d8c2; }
@media (max-width: 700px) {
  .trade-dialogue-scene { grid-template-columns: 62px 1fr 48px; padding: 13px; }
  .dialogue-character { font-size: 43px; }
  .dialogue-admiral { font-size: 36px; }
  .dialogue-choices { grid-template-columns: 1fr; }
}

.path-modal { position: fixed; inset: 0; z-index: 120; display: none; place-items: center; padding: 20px; background: rgba(22,38,40,.72); backdrop-filter: blur(7px); }
.path-modal.visible { display: grid; }
.path-card { width: min(820px, 96vw); padding: 30px; border: 6px solid #e0b442; border-radius: 30px; text-align: center; background: #fff8d9; box-shadow: 0 26px 80px rgba(0,0,0,.4), 0 0 50px rgba(255,221,89,.28); }
.path-card h2 { margin: 4px 0 8px; font-size: 34px; }
.path-card > p { margin-inline: auto; max-width: 610px; line-height: 1.45; }
.path-conversation { display: grid; grid-template-columns: 82px 1fr; gap: 15px; align-items: center; max-width: 700px; margin: 0 auto; text-align: left; }
.path-admiral { font-size: 62px; }
.path-speaker { margin: 0; color: #7b5c24; font-size: 12px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.path-conversation p:last-child { margin: 5px 0 0; line-height: 1.45; }
.fork-road { display: grid; grid-template-columns: 1fr auto 1fr; align-items: end; gap: 18px; margin: 16px auto 8px; max-width: 560px; color: #d19b27; font: 900 74px/1 Arial, sans-serif; }
.fork-road b { align-self: center; padding: 8px 14px; border-radius: 999px; color: #59401f; background: #ffe27a; font: 900 12px Arial, sans-serif; }
.fork-road span:nth-of-type(2) { grid-column: 2; grid-row: 1; }
.fork-road span:nth-of-type(3) { grid-column: 3; grid-row: 1; }
.path-choices { display: grid; grid-template-columns: repeat(3,1fr); gap: 13px; }
.path-choices button { min-height: 170px; padding: 18px 14px; border: 3px solid #b88a34; border-radius: 18px; color: #4f3821; background: #fffdf0; cursor: pointer; box-shadow: 0 5px 0 #8a6229; text-align: left; }
.path-choices button:hover { transform: translateY(-3px); background: #fff1b3; box-shadow: 0 8px 0 #8a6229; }
.path-choices strong, .path-choices span, .path-choices small { display: block; }
.path-choices strong { margin-bottom: 8px; font-size: 19px; }
.path-choices span, .path-choices small { line-height: 1.35; }
.path-choices small { margin-top: 8px; color: #6a583e; }
.path-reassurance { margin-bottom: 0; font-weight: 900; }

@keyframes sway { 0%, 100% { transform: rotate(-2deg); } 50% { transform: rotate(3deg); } }
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes rise { 0% { transform: translateY(14px); opacity: .1; } 40% { opacity: .72; } 100% { transform: translateY(-34px); opacity: 0; } }
@keyframes fly { from { transform: translateX(0); } to { transform: translateX(1300px); } }
@keyframes productivePulse { 0% { filter: brightness(1); } 45% { filter: brightness(1.45); transform: scale(1.12); } 100% { filter: brightness(1); } }
@keyframes deliverFish { 0% { opacity: 0; transform: translate(0, 0) scale(.6); } 18% { opacity: 1; } 72% { opacity: 1; } 100% { opacity: 0; transform: translate(-330px, 145px) scale(1.25); } }
@keyframes stormDarken { 0%,100% { opacity: 0; } 16%,82% { opacity: 1; } }
@keyframes stormClouds { from { transform: translateX(-18%); } to { transform: translateX(12%); } }
@keyframes drivingRain { to { transform: translate(6%, 22%); } }
@keyframes lightningFlash { 0%,34%,40%,64%,70%,100% { opacity: 0; } 35%,65% { opacity: 1; } 36%,66% { opacity: .25; } }
@keyframes islandShake { 0%,100% { transform: translateX(0); } 50% { transform: translateX(5px); } }
@keyframes repairPayment { 0%,55%,100% { opacity: 0; transform: translate(-50%, 20px); } 65%,88% { opacity: 1; transform: translate(-50%, 0); } }
@keyframes damageReveal { 0%,100% { filter: grayscale(.7) sepia(.7) drop-shadow(5px 6px 2px #5c3626); } 50% { filter: grayscale(.2) sepia(1) drop-shadow(0 0 18px #ff5b3d); } }
@keyframes opportunityGlow { 0%,100% { filter: brightness(1); } 50% { filter: brightness(1.2); } }
@keyframes communityGather { 0%,100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-4px) scale(1.04); } }
@keyframes sharedMeal { 0%,100% { transform: translateX(0) scale(1); } 35% { transform: translateX(4px) scale(1.05); } 70% { transform: translateX(-3px) scale(1.02); } }
@keyframes tendSaplings { 0%,100% { transform: rotate(0); } 45% { transform: rotate(-5deg) translateY(3px); } 70% { transform: rotate(3deg); } }
@keyframes learningTogether { 0%,100% { transform: translateY(0); } 40% { transform: translateY(-3px); } 55% { transform: translateY(1px); } }
@keyframes unlockWiggle { 0%,100% { transform: rotate(0); } 30% { transform: rotate(-12deg); } 65% { transform: rotate(12deg); } }
@keyframes bonusRise { 0% { opacity: 0; transform: translateY(12px) scale(.8); } 18%,72% { opacity: 1; transform: translateY(0) scale(1.08); } 100% { opacity: 0; transform: translateY(-34px) scale(1); } }
@keyframes exchangeArrival { 0% { opacity: 0; transform: translate(-90px,22px) scale(.7); } 22%,75% { opacity: 1; } 100% { opacity: 0; transform: translate(105px,-40px) scale(1.15); } }
@keyframes shareFish { 0% { opacity: 0; transform: translate(0,0) scale(.6); } 15%,75% { opacity: 1; } 100% { opacity: 0; transform: translate(-50px,-52px) scale(1.2); } }
@keyframes workshopProtect { 0%,100% { opacity: 0; transform: translateY(8px); } 18%,80% { opacity: 1; transform: translateY(0); } }
@keyframes worldActionFocus { 0%,100% { filter: brightness(1); } 50% { filter: brightness(1.28); transform: scale(1.025); } }

@media (max-width: 820px) {
  body { padding: 0; place-items: stretch; }
  .scene { width: 100%; height: auto; min-height: 100vh; border-radius: 0; overflow-y: auto; }
  .title { position: relative; left: 16px; top: 16px; width: calc(100% - 32px); max-width: none; }
  .panel { position: relative; right: auto; bottom: auto; width: calc(100% - 32px); max-height: none; margin: 340px 16px 130px; }
  .stats { left: 16px; bottom: 18px; }
  .island { left: 2%; bottom: 180px; transform: scale(.75); transform-origin: left bottom; }
  .harbour-illustration { left: 8%; bottom: 190px; width: 56%; height: 170px; }
  .forest { left: 12%; bottom: 375px; transform: scale(.75); transform-origin: left bottom; }
  .island-path, .community-gate { display: none; }
  .island-zone { display: block; }
  .forest-zone { left: 12%; bottom: 370px; transform: scale(.78); transform-origin: left bottom; }
  .harbour-zone { left: 8%; bottom: 190px; width: 56%; height: 170px; }
  .homes-zone { left: 55%; bottom: 330px; width: 200px; height: 210px; transform: scale(.8); transform-origin: left bottom; }
  .community-zone { left: 2%; bottom: 315px; width: 205px; height: 190px; transform: scale(.8); transform-origin: left bottom; }
  .starter-camp { left: 48%; bottom: 353px; }
  .new-house { left: 56%; bottom: 335px; width: 190px; height: 138px; }
  .personal-home { left: 67%; bottom: 430px; width: 120px; height: 105px; }
  .home-garden { left: 62%; bottom: 410px; width: 155px; height: 90px; }
  .home-furniture { left: 72%; bottom: 462px; }
  .home-colour { left: 68%; bottom: 505px; width: 90px; }
  .family { left: 61%; bottom: 338px; }
  .fishing-hut { left: 43%; bottom: 255px; width: 125px; height: 105px; }
  .cold-storage { left: 34%; bottom: 292px; width: 88px; height: 74px; }
  .market-stall { left: 20%; bottom: 250px; width: 115px; height: 95px; }
  .boat { left: 10%; bottom: 205px; width: 125px; height: 92px; }
  .sun { right: 30px; top: 180px; }
  .rival-island { display: none; }
  .trader-card { grid-template-columns: 1fr; }
  .trader-portrait { display: none; }
  .trader-questions { grid-template-columns: 1fr; }
  .path-choices { grid-template-columns: 1fr; }
  .path-card { max-height: 92vh; overflow-y: auto; }
  .path-conversation { grid-template-columns: 56px 1fr; }
  .path-admiral { font-size: 44px; }
  .fork-road { font-size: 52px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}
.season-board {
  margin: 0 0 1rem;
  padding: .85rem 1rem;
  border: 2px solid #b88a43;
  border-radius: 18px;
  background: linear-gradient(135deg, #fff9dc, #e8f5dc);
  display: grid;
  gap: .2rem;
}
.season-board span { color: #76552f; font-size: .7rem; font-weight: 900; letter-spacing: .08em; }
.season-board strong { color: #264f3d; font-size: 1.05rem; }
.season-board small { line-height: 1.35; }
.season-board hr { border: 0; border-top: 1px solid #cfb98b; margin: .45rem 0; width: 100%; }
.trade-contract-board {
  margin: 0 0 1rem;
  padding: .9rem 1rem;
  border: 2px solid #718a92;
  border-radius: 18px;
  background: #f4f8f5;
  display: grid;
  gap: .35rem;
}
.trade-contract-board > div { display: flex; justify-content: space-between; gap: .5rem; }
.trade-contract-board span { font-size: .7rem; font-weight: 900; letter-spacing: .08em; color: #526970; }
.trade-contract-board b { font-size: .78rem; color: #315b47; }
.trade-contract-board strong { font-size: 1.05rem; }
.trade-contract-board small { line-height: 1.35; }
.trade-contract-board em { font-size: .78rem; color: #6a563c; font-style: normal; font-weight: 700; }
.trade-contract-board.offer { border-color: #d28b24; background: #fff5d7; box-shadow: 0 0 0 5px rgba(255, 190, 66, .18); }
.trade-contract-board.active { border-color: #3678a0; background: #e8f4fb; }
.trade-contract-decisions { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; margin-top: .35rem; }
.trade-contract-decisions[hidden] { display: none; }
.trade-contract-decisions button { border: 0; border-radius: 12px; padding: .65rem .5rem; font-weight: 900; cursor: pointer; }
#tradeAccept { background: #34704e; color: white; }
#tradeDecline { background: #f1dfca; color: #52391f; outline: 2px solid #a97b4d; }
.legacy-modal { position: fixed; inset: 0; z-index: 126; display: none; place-items: center; padding: 20px; background: rgba(15,38,36,.76); backdrop-filter: blur(7px); }
.legacy-modal.visible { display: grid; }
.legacy-card { display: grid; grid-template-columns: 105px 1fr; gap: 18px; width: min(760px, 96vw); max-height: 92vh; overflow-y: auto; padding: 25px; border: 5px solid #d5b45d; border-radius: 28px; background: #fff8dc; box-shadow: 0 24px 70px rgba(0,0,0,.38); }
.legacy-admiral { align-self: center; font-size: 72px; }
.legacy-card h2 { margin: 4px 0 8px; font-size: 27px; }
.legacy-choices { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; margin: 15px 0; }
.legacy-choices button { padding: 14px 11px; border: 3px solid #aa8c50; border-radius: 16px; color: #4e3a24; background: white; cursor: pointer; text-align: left; }
.legacy-choices button:disabled { opacity: .45; cursor: not-allowed; }
.legacy-choices strong, .legacy-choices small { display: block; }
.legacy-choices small { margin-top: 7px; font-weight: 700; line-height: 1.3; }
.legacy-cost { padding: 8px 10px; border-radius: 10px; background: #ecf2df; font-weight: 800; }
.legacy-close { float: right; padding: 10px 15px; border: 0; border-radius: 999px; color: #553b26; background: #ead9b8; cursor: pointer; font-weight: 800; }
@media (max-width: 700px) {
  .legacy-card { grid-template-columns: 58px 1fr; padding: 15px; }
  .legacy-admiral { font-size: 43px; }
  .legacy-choices { grid-template-columns: 1fr; }
}

/* v0.19: conversations live beside the island instead of blocking it. */
.guide-modal,
.trader-modal,
.trade-dialogue-modal {
  inset: auto auto 18px 22px;
  width: min(800px, 62vw);
  padding: 0;
  background: transparent;
  backdrop-filter: none;
  pointer-events: none;
}
.guide-modal.visible,
.trader-modal.visible,
.trade-dialogue-modal.visible { display: block; }
.guide-card,
.trader-card,
.trade-dialogue-scene {
  width: 100%;
  min-height: min(360px, 58vh);
  max-height: 72vh;
  box-sizing: border-box;
  overflow-y: auto;
  pointer-events: auto;
  box-shadow: 0 16px 45px rgba(20,35,35,.34);
}
.guide-card {
  grid-template-columns: 145px minmax(0, 1fr);
  gap: 20px;
  padding: 24px;
  border-width: 4px;
  border-radius: 22px;
}
.admiral-guide {
  align-self: center;
  width: 100%;
  max-width: 145px;
  overflow-wrap: anywhere;
  white-space: normal;
  text-align: center;
  font-size: 54px;
  line-height: 1.1;
}
.admiral-guide img { width: 132px; height: 156px; margin: 0 auto; }
.guide-card h2 { font-size: 28px; }
.guide-card p { margin: 5px 0 10px; }
.conversation-history {
  display: grid;
  gap: 5px;
  margin-bottom: 10px;
  padding: 8px 10px;
  border-bottom: 1px solid #d9c9a2;
  border-radius: 10px;
  background: rgba(255,255,255,.48);
  color: #6e624d;
  font: 12px/1.4 Arial, sans-serif;
}
.conversation-history[hidden] { display: none; }
.conversation-history div { display: grid; grid-template-columns: minmax(90px, 125px) minmax(0, 1fr); gap: 6px; align-items: start; }
.conversation-history b { overflow-wrap: anywhere; }
.conversation-history span { min-width: 0; overflow-wrap: anywhere; white-space: normal; }
.trader-card {
  grid-template-columns: 112px 1fr;
  gap: 20px;
  padding: 22px;
  border-width: 4px;
  border-radius: 22px;
}
.trader-portrait { align-self: center; padding-top: 0; font-size: 72px; }
.trader-card h2 { font-size: 27px; }
.trader-answer { min-height: 0; }
.trade-dialogue-scene {
  grid-template-columns: 92px minmax(260px,1fr) 70px;
  padding: 22px;
  border-radius: 22px;
}
.dialogue-character { font-size: 64px; }
.dialogue-admiral { font-size: 50px; }
.dialogue-choices { grid-template-columns: repeat(3,1fr); }

@media (max-width: 1180px) {
  .guide-modal,
  .trader-modal,
  .trade-dialogue-modal {
    position: fixed;
    inset: auto 10px 10px;
    width: auto;
  }
  .guide-card,
  .trader-card,
  .trade-dialogue-scene {
    min-height: min(330px, 52vh);
    max-height: 58vh;
  }
}

@media (max-width: 760px) {
  .guide-card,
  .trader-card { grid-template-columns: 1fr; gap: 8px; padding: 15px; }
  .admiral-guide {
    justify-self: start;
    max-width: none;
    text-align: left;
    font-size: 38px;
    line-height: 1;
    width: 78px;
  }
  .admiral-guide img { width: 74px; height: 88px; margin: 0; border-width: 3px; box-shadow: 0 5px 0 #9b713c, 0 8px 14px rgba(40,45,36,.24); }
  .trader-portrait { font-size: 42px; }
  .guide-card h2, .trader-card h2 { font-size: 22px; }
  .conversation-history div { grid-template-columns: 1fr; gap: 1px; }
  .trade-dialogue-scene { grid-template-columns: 54px 1fr 42px; padding: 13px; }
  .dialogue-character { font-size: 40px; }
  .dialogue-admiral { font-size: 32px; }
  .dialogue-choices { grid-template-columns: 1fr; }
}

/* v0.24 character-led locations and illustrated world objects */
.island-zone { z-index: 8; }
.location-control:focus-visible { outline: 4px solid #ffe581; outline-offset: 3px; }
.island-building, .harbour-building, .community-gate, .admiral-feathers, .fruit-spot, .repair-workshop, .cooperative-boat, .community-kitchen, .tree-nursery, .learning-room { z-index: 12; }
.repair-workshop { left: 710px; bottom: 95px; width: 132px; height: 122px; padding: 0; border: 0; border-radius: 0; background: url("../assets/workshop/repair-workshop-v2.png") center/contain no-repeat; cursor: pointer; }
.repair-workshop::before { content: none; }
.repair-workshop::after { content: "Workshop"; position: absolute; left: 35px; top: 112px; padding: 3px 7px; border-radius: 999px; color: #604322; background: rgba(255,255,255,.94); white-space: nowrap; font: 800 10px Arial,sans-serif; }
.cooperative-boat { width: 118px; height: 54px; padding: 0; border: 0; background: linear-gradient(170deg,transparent 0 52%,#49788a 53% 72%,#2f5361 73%); cursor: pointer; }
.cooperative-boat::before { content: ""; position: absolute; left: 28px; bottom: 19px; width: 54px; height: 42px; border-left: 4px solid #5e432d; background: linear-gradient(145deg,transparent 0 50%,#f0db9a 51%); }
.cooperative-family { width: 42px; height: 36px; background: radial-gradient(circle at 30% 24%,#84553d 0 16%,transparent 17%),radial-gradient(circle at 70% 29%,#6c4637 0 14%,transparent 15%),radial-gradient(ellipse at 30% 85%,#e8a15b 0 31%,transparent 32%),radial-gradient(ellipse at 70% 87%,#4f8790 0 29%,transparent 30%); }
.community-kitchen { width: 78px; height: 64px; padding: 0; border: 3px solid #7c5234; border-radius: 16px 16px 5px 5px; background: linear-gradient(#e7a957 0 18%,#f2d39b 19% 100%); cursor: pointer; }
.community-kitchen::before { content: ""; position: absolute; left: 17px; top: 25px; width: 42px; height: 22px; border-radius: 5px 5px 18px 18px; background: #b85e43; box-shadow: 0 -8px 0 -6px #fff4d3,10px -13px 0 -9px #fff4d3,-10px -13px 0 -9px #fff4d3; }
.kitchen-gathering { width: 72px; height: 31px; background: radial-gradient(circle at 15% 22%,#704835 0 10%,transparent 11%),radial-gradient(circle at 40% 20%,#99664b 0 10%,transparent 11%),radial-gradient(circle at 65% 20%,#5e4034 0 10%,transparent 11%),radial-gradient(circle at 88% 24%,#805441 0 9%,transparent 10%),linear-gradient(transparent 35%,#e2a85b 36% 58%,transparent 59%); }
.tree-nursery { width: 76px; height: 54px; padding: 0; border: 3px solid #755039; border-radius: 8px; background: repeating-linear-gradient(90deg,#875d3c 0 7px,#b27b4e 7px 14px); cursor: pointer; }
.tree-nursery::before { content: ""; position: absolute; inset: -28px 4px 25px; background: radial-gradient(circle at 18% 70%,#57954f 0 15%,transparent 16%),radial-gradient(circle at 48% 45%,#6aaa5c 0 19%,transparent 20%),radial-gradient(circle at 78% 70%,#4f8b48 0 15%,transparent 16%); }
.nursery-helpers { width: 48px; height: 28px; background: radial-gradient(circle at 20% 22%,#8b5b40 0 13%,transparent 14%),radial-gradient(circle at 76% 22%,#644336 0 13%,transparent 14%),radial-gradient(ellipse at 20% 85%,#e6a55c 0 26%,transparent 27%),radial-gradient(ellipse at 76% 85%,#5e8bb1 0 26%,transparent 27%); }
.learning-room { width: 85px; height: 64px; padding: 0; border: 3px solid #65472f; border-radius: 5px; background: linear-gradient(90deg,#f2d291 0 43%,#60a5aa 44% 57%,#f2d291 58%); cursor: pointer; }
.learning-room::before { content: ""; position: absolute; left: -5px; top: -27px; width: 89px; height: 33px; background: #c5684b; clip-path: polygon(50% 0,100% 82%,91% 100%,9% 100%,0 82%); }
.repair-workshop:not(.visible), .cooperative-boat:not(.visible), .community-kitchen:not(.visible), .tree-nursery:not(.visible), .learning-room:not(.visible) { visibility: hidden; pointer-events: none; }
.learning-group { width: 54px; height: 31px; background: radial-gradient(circle at 16% 22%,#65504a 0 11%,transparent 12%),radial-gradient(circle at 48% 19%,#93604b 0 12%,transparent 13%),radial-gradient(circle at 82% 22%,#6e4739 0 11%,transparent 12%),linear-gradient(transparent 38%,#547f9a 39% 75%,transparent 76%); }
.maya-visitor { width: 48px; height: 58px; border: 3px solid #fff2cd; border-radius: 50% 50% 18px 18px; background: url("../assets/characters/maya-v1.png") center 18%/cover no-repeat; box-shadow: 0 5px 12px rgba(34,64,55,.3); }
.exchange-delivery { width: 90px; height: 50px; background: linear-gradient(165deg,transparent 0 56%,#3d7284 57% 76%,transparent 77%); }
.exchange-delivery::after { content: ""; position: absolute; right: 3px; bottom: 2px; width: 27px; height: 25px; border: 3px solid #745238; background: #d5a759; box-shadow: 0 0 12px #ffe783; }
.trader-portrait img, .dialogue-character img { width: 100%; height: 100%; object-fit: cover; border-radius: 18px; }
.trader-portrait { width: 116px; height: 145px; overflow: hidden; border: 4px solid #f5dfaa; border-radius: 18px; }
.dialogue-character { width: 92px; height: 116px; overflow: hidden; border: 4px solid #f5dfaa; border-radius: 18px; }
.location-tray { position: absolute; left: 44px; bottom: 22px; z-index: 45; width: min(540px,calc(100% - 88px)); padding: 15px 50px 15px 17px; border: 3px solid #8b653b; border-radius: 17px; color: #3d3328; background: rgba(255,250,225,.97); box-shadow: 0 14px 30px rgba(38,54,48,.3); font-family: Arial,sans-serif; }
.location-tray[hidden] { display: none; }
.location-tray p { margin: 2px 0 8px; font-size: 13px; line-height: 1.35; }
.location-tray > p:first-of-type { color: #846032; font-size: 10px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.location-tray h2 { margin: 0 0 5px; font: 700 22px Georgia,serif; }
.location-tray-close { position: absolute; right: 10px; top: 8px; width: 32px; height: 32px; border: 0; border-radius: 50%; color: #624b34; background: #ead5aa; font-size: 23px; cursor: pointer; }
#locationTrayActions { display: flex; flex-wrap: wrap; gap: 7px; }
#locationTrayActions button { padding: 8px 10px; border: 0; border-radius: 10px; color: white; background: #287b68; font-weight: 800; cursor: pointer; }
#locationTrayActions button:disabled { color: #786f60; background: #ded6c4; cursor: not-allowed; }
#locationTrayActions button.recommended-action { outline: 4px solid #efbc37; outline-offset: 2px; box-shadow: 0 0 0 7px rgba(255,239,145,.55); }
#locationTrayActions button small { display: block; margin-top: 2px; font-size: 10px; font-weight: 500; }
.world-consequence { position: absolute; left: 370px; bottom: 250px; z-index: 30; max-width: 210px; padding: 8px 11px; border: 2px solid #8a6534; border-radius: 12px; color: #49391f; background: #fff3b8; box-shadow: 0 8px 18px rgba(45,61,48,.25); font: 800 12px/1.25 Arial,sans-serif; opacity: 0; pointer-events: none; }
.world-consequence.visible { animation: consequenceRise 2.5s ease-out; }
.world-consequence.market { left: 270px; bottom: 255px; }
.world-consequence.homes { left: 620px; bottom: 430px; }
.world-consequence.community { left: 130px; bottom: 330px; }
@keyframes consequenceRise { 0% { opacity: 0; transform: translateY(12px) scale(.92); } 16%,75% { opacity: 1; transform: translateY(0) scale(1); } 100% { opacity: 0; transform: translateY(-18px); } }
@media (max-width: 760px) {
  .location-tray { position: fixed; left: 10px; right: 10px; bottom: 10px; width: auto; }
  .trader-portrait { width: 82px; height: 100px; }
  .dialogue-character { width: 54px; height: 72px; }
}

.home-interior-modal { position: fixed; inset: 0; z-index: 110; display: none; place-items: center; padding: 18px; background: rgba(24,40,43,.76); backdrop-filter: blur(5px); }
.home-interior-modal.visible { display: grid; }
.home-interior-card { width: min(940px,96vw); max-height: 94vh; overflow: auto; padding: 17px; border: 4px solid #9b713c; border-radius: 22px; color: #403124; background: #fff7dc; box-shadow: 0 28px 70px rgba(18,27,27,.42); }
.home-interior-card header { display: flex; justify-content: space-between; gap: 18px; align-items: start; margin-bottom: 12px; }
.home-interior-card header h2 { margin: 2px 0 4px; font-size: 29px; }
.home-interior-card header p { margin: 0; }
#homeInteriorClose { flex: 0 0 auto; width: 40px; height: 40px; border: 0; border-radius: 50%; color: #5c452e; background: #ead5aa; font-size: 28px; cursor: pointer; }
.home-interior-scene { position: relative; overflow: hidden; aspect-ratio: 16/9; border: 4px solid #704a2d; border-radius: 16px; background: #c78d4d; box-shadow: inset 0 0 20px rgba(56,31,16,.28); }
.home-interior-scene > img { display: block; width: 100%; height: 100%; object-fit: cover; }
.interior-colour, .interior-furniture, .interior-garden, .interior-rug, .interior-keepsakes, .interior-music { position: absolute; inset: 0; opacity: 0; transition: opacity .45s ease, transform .45s ease; pointer-events: none; }
.interior-colour.visible, .interior-furniture.visible, .interior-garden.visible, .interior-rug.visible, .interior-keepsakes.visible, .interior-music.visible { opacity: 1; }
.interior-rug { z-index: 1; }
.interior-colour { z-index: 2; }
.interior-furniture, .interior-garden, .interior-keepsakes, .interior-music { z-index: 3; }
.interior-colour, .interior-furniture, .interior-garden, .interior-rug, .interior-keepsakes, .interior-music { background-repeat: no-repeat; background-size: contain; }
.interior-furniture { background-image: url("../assets/homes/decorations/furniture-v2.png"); background-position: 44% 82%; background-size: 38%; }
.interior-garden { background-image: url("../assets/homes/decorations/garden-v2.png"); background-position: 9% 73%; background-size: 22%; }
.interior-rug { background-image: url("../assets/homes/decorations/rug-v2.png"); background-position: 45% 98%; background-size: 36%; }
.interior-keepsakes { background-image: url("../assets/homes/decorations/keepsakes-v2.png"); background-position: 76% 35%; background-size: 20%; }
.interior-music { background-image: url("../assets/homes/decorations/music-v2.png"); background-position: 92% 84%; background-size: 20%; }
.interior-colour { background-image: url("../assets/homes/decorations/colour-v2.png"); background-position: 52% 22%; background-size: 30%; }
.interior-colour > *, .interior-furniture > *, .interior-garden > *, .interior-rug > *, .interior-keepsakes > *, .interior-music > * { display: none; }
.interior-colour { background-image: url("../assets/homes/decorations/colour-v2.png"),linear-gradient(90deg,rgba(41,135,139,.12),rgba(238,92,87,.07) 50%,rgba(246,194,71,.09)); background-position: 52% 22%,center; background-size: 30%,cover; }
.interior-bunting { position: absolute; left: 31%; top: 11%; width: 45%; height: 10%; background: repeating-linear-gradient(125deg,#e75f57 0 20px,#f5c44e 20px 40px,#3c9ba3 40px 60px); clip-path: polygon(0 0,100% 0,96% 100%,90% 0,84% 100%,78% 0,72% 100%,66% 0,60% 100%,54% 0,48% 100%,42% 0,36% 100%,30% 0,24% 100%,18% 0,12% 100%,6% 0); filter: drop-shadow(0 3px 2px rgba(67,38,22,.28)); }
.interior-wall-art { position: absolute; left: 46%; top: 31%; width: 13%; height: 21%; border: 8px solid #7d4d2e; background: linear-gradient(#72c8dc 0 45%,#f0d180 46% 62%,#3e9270 63%); box-shadow: 0 5px 9px rgba(59,32,17,.3); }
.interior-sofa { position: absolute; left: 31%; bottom: 13%; width: 36%; height: 22%; border: 7px solid #70442d; border-radius: 30px 30px 12px 12px; background: linear-gradient(#2e8a8f 0 52%,#226c73 53%); box-shadow: inset 0 8px 0 rgba(255,255,255,.18),0 12px 12px rgba(67,38,22,.28); }
.interior-sofa::before, .interior-sofa::after { content: ""; position: absolute; top: 16%; width: 30%; height: 48%; border-radius: 11px; background: #efa64f; box-shadow: inset 0 0 0 4px rgba(255,239,181,.38); }
.interior-sofa::before { left: 14%; transform: rotate(-4deg); }
.interior-sofa::after { right: 14%; background: #d85f58; transform: rotate(4deg); }
.interior-table { position: absolute; left: 65%; bottom: 10%; width: 17%; height: 9%; border: 6px solid #70472d; border-radius: 50%; background: #bc7942; box-shadow: 0 12px 0 -7px #70472d; }
.interior-lamp { position: absolute; left: 73%; bottom: 21%; width: 5%; height: 23%; border-left: 7px solid #765039; }
.interior-lamp::before { content: ""; position: absolute; left: -22px; top: -6px; width: 43px; height: 35px; background: #f3c658; clip-path: polygon(20% 0,80% 0,100% 100%,0 100%); filter: drop-shadow(0 0 10px #ffe99d); }
.interior-books { position: absolute; right: 18%; top: 38%; width: 16%; height: 8%; background: repeating-linear-gradient(90deg,#b94e49 0 9px,#e7b64b 9px 18px,#377b85 18px 27px); transform: rotate(-2deg); }
.interior-garden span { position: absolute; left: 12%; bottom: 27%; width: 5%; height: 13%; border-radius: 50% 50% 10px 10px; background: radial-gradient(circle at 28% 20%,#f0c84d 0 11%,transparent 12%),radial-gradient(circle at 70% 31%,#e85e61 0 13%,transparent 14%),linear-gradient(90deg,transparent 42%,#3e8a52 43% 57%,transparent 58%); filter: drop-shadow(0 5px 1px #75462e); }
.interior-garden span:nth-child(2) { left: 18%; bottom: 25%; transform: scale(1.2); }
.interior-garden span:nth-child(3) { left: 23%; bottom: 27%; transform: scale(.88); }
.interior-rug span { position: absolute; left: 38%; bottom: 5%; width: 36%; height: 18%; border: 6px solid #724934; border-radius: 50%; background: repeating-radial-gradient(ellipse at center,#f1c34f 0 8px,#d65d55 9px 16px,#3f9294 17px 24px); box-shadow: 0 8px 10px rgba(67,38,22,.24); transform: skewX(-8deg); }
.keepsake-shelf { position: absolute; left: 63%; top: 34%; width: 17%; height: 4%; border: 5px solid #70472d; background: #bd7a43; box-shadow: 0 5px 7px rgba(52,29,16,.3); }
.keepsake-photo { position: absolute; left: 66%; top: 26%; width: 5%; height: 9%; border: 5px solid #775039; background: linear-gradient(#80c6d3 0 50%,#d4ad65 51%); }
.keepsake-shell { position: absolute; left: 75%; top: 28%; width: 5%; height: 7%; border-radius: 70% 20% 60% 30%; background: repeating-radial-gradient(circle at 20% 80%,#fff0d0 0 4px,#d98e7c 5px 7px); transform: rotate(-18deg); }
.music-drum { position: absolute; right: 8%; bottom: 11%; width: 9%; height: 17%; border: 5px solid #714831; border-radius: 42% 42% 24% 24%; background: repeating-linear-gradient(75deg,#e2a64e 0 10px,#b85d48 11px 20px); }
.music-uke { position: absolute; right: 17%; bottom: 12%; width: 5%; height: 24%; border-radius: 50% 50% 42% 42%; background: radial-gradient(circle at 50% 68%,#4d3125 0 12%,#c88343 13% 48%,#75462c 49%); transform: rotate(-17deg); }
.music-uke::before { content: ""; position: absolute; left: 38%; bottom: 82%; width: 24%; height: 95%; border-radius: 5px; background: #75462c; }
.interior-empty-note { position: absolute; left: 50%; bottom: 7%; transform: translateX(-50%); padding: 8px 12px; border-radius: 999px; color: #654d34; background: rgba(255,248,218,.9); font: 800 12px Arial,sans-serif; white-space: nowrap; transition: opacity .3s; }
.interior-empty-note.hidden { opacity: 0; }
.home-interior-legend { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 11px; font: 700 12px Arial,sans-serif; }
.home-interior-legend span { padding: 6px 9px; border-radius: 999px; background: #eadfc1; }
.home-interior-legend span.owned { color: #fff; background: #287b68; }
.homewares-open { display: block; margin: 13px auto 0; padding: 10px 16px; border: 0; border-radius: 999px; color: #fff; background: #287b68; font-weight: 800; cursor: pointer; }
.homewares-modal { position: fixed; inset: 0; z-index: 135; display: none; place-items: center; padding: 18px; background: rgba(24,40,43,.78); backdrop-filter: blur(6px); }
.homewares-modal.visible { display: grid; }
.homewares-card { width: min(980px,96vw); max-height: 94vh; overflow: auto; padding: 18px; border: 4px solid #7f5633; border-radius: 22px; color: #403124; background: #fff7dc; box-shadow: 0 28px 70px rgba(18,27,27,.46); }
.homewares-card header { display: grid; grid-template-columns: 84px 1fr 42px; gap: 14px; align-items: center; }
.homewares-card h2, .homewares-card h3, .homewares-card p { margin-top: 0; }
.homewares-portrait { width: 78px; height: 92px; overflow: hidden; border: 3px solid #d6a755; border-radius: 42% 42% 16px 16px; background: #dff2e6; }
.homewares-portrait img { width: 100%; height: 100%; object-fit: cover; }
#homewaresClose { align-self: start; width: 40px; height: 40px; border: 0; border-radius: 50%; color: #5c452e; background: #ead5aa; font-size: 28px; cursor: pointer; }
.homewares-balance { margin: 12px 0; padding: 9px 13px; border-radius: 12px; color: #fff; background: #287b68; font-weight: 900; }
.homewares-preview { display: grid; place-items: center; min-height: 170px; margin-bottom: 10px; padding: 8px; overflow: hidden; border: 3px solid #b88a54; border-radius: 15px; color: #685039; background: #eadbb7; }
.homeware-room-preview { width: min(470px,100%); }
.homewares-buy { display: block; width: min(360px,100%); margin: 0 auto 13px; padding: 11px 16px; border: 0; border-radius: 999px; color: #fff; background: #287b68; font-weight: 900; cursor: pointer; }
.homewares-buy:disabled { color: #796c59; background: #d9ccb1; cursor: not-allowed; }
.homewares-catalogue { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
.homewares-catalogue > section { padding: 12px; border: 2px solid #dec999; border-radius: 15px; background: #fffdf2; }
.homewares-catalogue h3 { margin-bottom: 2px; }
.homeware-designs { display: grid; grid-template-columns: repeat(3,1fr); gap: 7px; margin-top: 9px; }
.homeware-designs button { display: grid; gap: 4px; justify-items: center; padding: 8px 5px; border: 2px solid #bc9461; border-radius: 11px; color: #493826; background: #fff8df; cursor: pointer; }
.homeware-designs button:disabled { cursor: not-allowed; opacity: .48; }
.homeware-designs strong, .homeware-designs small { text-align: center; }
.homeware-swatch { width: 48px; height: 30px; border: 2px solid #765037; border-radius: 8px; background: linear-gradient(135deg,#3c9ba3 0 33%,#efc451 34% 66%,#dc6558 67%); }
[data-design="productive"] .homeware-swatch, [data-design="forest"] .homeware-swatch { background: linear-gradient(135deg,#376f43,#92b951,#d5c466); }
[data-design="flower"] .homeware-swatch, [data-design="floral"] .homeware-swatch { background: radial-gradient(circle,#f5c750 0 18%,#d85d75 20% 42%,#6ca655 44%); }
[data-design="woven"] .homeware-swatch, [data-design="geometric"] .homeware-swatch { background: repeating-linear-gradient(45deg,#b87943 0 8px,#efd28c 8px 16px,#4a8e8d 16px 24px); }
[data-design="painted"] .homeware-swatch, [data-design="coastal"] .homeware-swatch, [data-design="nautical"] .homeware-swatch { background: repeating-linear-gradient(90deg,#f7edcf 0 10px,#4e9eae 10px 20px,#315b72 20px 27px); }
[data-design="carved"] .homeware-swatch, [data-design="history"] .homeware-swatch { background: repeating-radial-gradient(circle,#d29b59 0 5px,#70472d 6px 9px); }
[data-design="sunset"] .homeware-swatch { background: linear-gradient(#ef7460,#f1ae54,#69477c); }
[data-design="family"] .homeware-swatch { background: radial-gradient(circle at 32% 50%,#f5c86b 0 15%,transparent 16%),radial-gradient(circle at 68% 50%,#ce6d55 0 15%,transparent 16%),#84b0a1; }
[data-design="exploration"] .homeware-swatch { background: linear-gradient(145deg,#55a4b4 0 45%,#e6c46f 46% 62%,#5b8756 63%); }
[data-design="drums"] .homeware-swatch { background: repeating-linear-gradient(70deg,#b95f48 0 8px,#e5b34f 8px 16px); }
[data-design="strings"] .homeware-swatch { background: linear-gradient(90deg,#71472d 0 18%,#c98448 19% 75%,#71472d 76%); }
[data-design="records"] .homeware-swatch { background: radial-gradient(circle,#e9ad4e 0 10%,#263945 11% 38%,#111 39% 56%,#d55f58 57%); }
.homewares-note { margin: 12px 0 0; font-weight: 700; }
.home-interior-scene[data-colour="coastal"] .interior-colour { background: linear-gradient(90deg,rgba(72,167,188,.25),rgba(246,239,205,.16)); }
.home-interior-scene[data-colour="forest"] .interior-colour { background: linear-gradient(90deg,rgba(48,115,67,.28),rgba(181,166,83,.18)); }
.home-interior-scene[data-colour="sunset"] .interior-colour { background: linear-gradient(90deg,rgba(233,91,78,.24),rgba(242,173,70,.22),rgba(103,68,126,.18)); }
.home-interior-scene[data-furniture="painted"] .interior-sofa { background: linear-gradient(#d75f57 0 52%,#a94448 53%); }
.home-interior-scene[data-furniture="carved"] .interior-sofa { background: repeating-linear-gradient(90deg,#9a6038 0 18px,#bd824a 18px 36px); }
.home-interior-scene[data-rug="floral"] .interior-rug span { background: repeating-radial-gradient(circle,#f2c94f 0 7px,#d85d75 8px 14px,#6ca655 15px 22px); }
.home-interior-scene[data-rug="nautical"] .interior-rug span { background: repeating-linear-gradient(90deg,#f8eccb 0 15px,#397c91 15px 30px,#cf5e53 30px 37px); }
.home-interior-scene[data-garden="productive"] .interior-garden span { background: radial-gradient(circle at 30% 20%,#df5e45 0 13%,transparent 14%),linear-gradient(90deg,transparent 42%,#438452 43% 57%,transparent 58%); }
.home-interior-scene[data-garden="flower"] .interior-garden span { background: radial-gradient(circle at 45% 22%,#e96f9b 0 20%,#f1c750 21% 29%,transparent 30%),linear-gradient(90deg,transparent 42%,#438452 43% 57%,transparent 58%); }
.home-interior-scene[data-colour="forest"] .interior-colour, .home-interior-scene[data-furniture="carved"] .interior-furniture, .home-interior-scene[data-rug="floral"] .interior-rug { filter: hue-rotate(55deg) saturate(.85); }
.home-interior-scene[data-colour="sunset"] .interior-colour, .home-interior-scene[data-furniture="painted"] .interior-furniture, .home-interior-scene[data-rug="nautical"] .interior-rug { filter: hue-rotate(305deg) saturate(1.15); }
.home-interior-scene[data-garden="productive"] .interior-garden, .home-interior-scene[data-keepsakes="history"] .interior-keepsakes, .home-interior-scene[data-music="strings"] .interior-music { filter: sepia(.22) saturate(.9); }
.home-interior-scene[data-garden="flower"] .interior-garden, .home-interior-scene[data-keepsakes="exploration"] .interior-keepsakes, .home-interior-scene[data-music="records"] .interior-music { filter: hue-rotate(320deg) saturate(1.2); }
.island-only-note { display: grid; gap: 5px; padding: 13px; border: 2px solid #7bb4aa; border-radius: 14px; color: #244d4c; background: #e9f6ef; }
.island-only-note strong { font-size: 16px; }
.island-only-note small { color: #5c6c63; }
.island-message { display: grid; gap: 3px; margin: 10px 0; padding: 11px 13px; border-left: 5px solid #d3a536; border-radius: 10px; color: #453b2d; background: #fff3bd; }
.island-message strong { color: #755622; font-size: 11px; text-transform: uppercase; letter-spacing: .05em; }
.island-message span { font-weight: 900; }
.island-message.fresh { animation: productivePulse .7s ease-out; }
@media (max-width: 700px) {
  .home-interior-modal { padding: 8px; }
  .home-interior-card { padding: 11px; }
  .home-interior-card header h2 { font-size: 22px; }
  .home-interior-card header p:not(.chapter) { font-size: 13px; }
  .interior-empty-note { max-width: 84%; white-space: normal; text-align: center; }
  .homewares-catalogue { grid-template-columns: 1fr; }
}
@media (max-width: 820px) {
  .repair-workshop { left: 73%; bottom: 225px; width: 104px; height: 96px; }
  .repair-workshop::after { left: 24px; top: 88px; }
}