/* The island is the colour behind the glass. All controls retain an opaque
   fallback, visible focus and a comfortably sized touch target. */
:root{--glass-ink:#17382f;--glass-muted:#36554a;--glass-edge:rgba(255,255,248,.64);--glass-fill:rgba(249,253,246,.32)}
.island-glass{background:var(--glass-fill);border:1px solid var(--glass-edge);box-shadow:inset 0 1px 0 rgba(255,255,250,.95),inset 0 -1px 0 rgba(63,104,93,.1),0 12px 40px rgba(20,61,56,.12);color:var(--glass-ink)}
@supports(backdrop-filter:blur(16px)){
  .island-glass{background:linear-gradient(135deg,rgba(255,255,250,.32),rgba(236,247,238,.12));backdrop-filter:blur(10px) saturate(1.35);-webkit-backdrop-filter:blur(10px) saturate(1.35)}
}
.island-ui{position:fixed;inset:0;z-index:10;pointer-events:none;color:var(--glass-ink)}
.island-ui a,.island-ui button{pointer-events:auto}
.island-title{position:absolute;top:128px;left:28px;max-width:300px;padding:18px 22px;border-radius:24px}
.island-title small{display:block;font-weight:800;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--glass-muted)}
.island-title h1{font-size:30px;line-height:1.07;letter-spacing:-.025em;margin:7px 0}
.island-title p{font-size:13px;line-height:1.5;margin:0;color:var(--glass-muted)}
.island-back{display:inline-flex;gap:8px;align-items:center;min-height:44px;font-size:13px;font-weight:800;text-decoration:underline;text-underline-offset:4px;margin-top:6px}
.island-toolbar{position:absolute;right:28px;top:128px;display:flex;align-items:center;padding:5px;border-radius:100px;gap:2px}
.island-control{min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center;border:0;border-radius:50%;background:transparent;color:var(--glass-ink);font:800 20px Nunito,system-ui;cursor:pointer;transition:background .2s,transform .2s}
.island-control:hover{background:rgba(245,253,242,.32);transform:translateY(-2px)}
.island-control svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.island-control:disabled{opacity:.4;cursor:default;transform:none}
.island-dock{position:absolute;bottom:28px;left:50%;transform:translateX(-50%);display:flex;gap:4px;padding:9px;border-radius:26px;width:max-content;max-width:calc(100% - 32px);overflow-x:auto;scrollbar-width:thin;pointer-events:auto}
.island-destination{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;min-width:94px;min-height:80px;padding:10px 13px;border-radius:18px;text-decoration:none;font-size:12px;font-weight:900;white-space:nowrap;color:var(--glass-ink);transition:background .2s,transform .25s;position:relative}
.island-destination:hover,.island-destination[data-active]{background:rgba(252,255,248,.3);transform:translateY(-3px)}
.island-destination .district-icon{width:31px;height:31px;display:grid;place-items:center;border-radius:10px;background:color-mix(in srgb,var(--district-tint,#d9e7d5) 40%,transparent);color:var(--district-ink,#315249);box-shadow:inset 0 1px 0 rgba(255,255,250,.6),0 3px 6px rgba(42,75,63,.08)}
.district-icon svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.65;stroke-linejoin:round;stroke-linecap:round}
.island-destination[data-district=mall]{--district-tint:#f8d4cd;--district-ink:#9d3527}
.island-destination[data-district=market]{--district-tint:#f6e3b0;--district-ink:#735018}
.island-destination[data-district=petshop]{--district-tint:#d5e8cb;--district-ink:#416b38}
.island-destination[data-district=workshop]{--district-tint:#f0d8bd;--district-ink:#875630}
.island-destination[data-district=taverns]{--district-tint:#e4daf1;--district-ink:#634786}
.island-destination[data-district=wharf]{--district-tint:#c9e6ed;--district-ink:#2c6578}
.island-hint{position:absolute;bottom:138px;left:50%;transform:translateX(-50%);text-align:center;padding:7px 14px;border-radius:100px;font-size:12px;font-weight:800;white-space:nowrap}
.island-journey{position:absolute;left:50%;bottom:28px;transform:translateX(-50%);min-width:240px;max-width:90%;text-align:center;padding:18px 28px;border-radius:26px;pointer-events:auto}
.island-journey[hidden]{display:none}
.island-journey strong{display:block;font-family:Fredoka,Nunito,system-ui;font-size:25px;margin:6px 0}
.island-journey p{font-size:13px;margin:0 0 12px;color:var(--glass-muted)}
.island-journey button{border:1px solid #a8bfb0;border-radius:100px;padding:9px 18px;background:#f7faf22b;color:var(--glass-ink);min-height:44px;cursor:pointer;font-weight:800}
/* The peek card: a tapped building's name and what is inside, above the dock.
   (world3d.js openPeek; touch only, a mouse goes straight in.) */
.island-peek{position:absolute;left:50%;bottom:150px;transform:translateX(-50%);width:min(440px,calc(100% - 28px));
  display:flex;align-items:center;gap:12px;padding:12px 12px 12px 18px;border-radius:22px;pointer-events:auto;
  animation:peek-in .32s cubic-bezier(.22,1,.36,1)}
.island-peek[hidden]{display:none}
.island-peek-text{flex:1;min-width:0}
.island-peek strong{display:block;font:700 19px/1.15 Fredoka,Nunito,system-ui;color:var(--glass-ink)}
.island-peek-text span{display:block;margin-top:3px;font-size:12.5px;line-height:1.4;font-weight:700;color:var(--glass-muted)}
.island-peek-actions{display:flex;align-items:center;gap:6px;flex:none}
.island-peek-go{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 16px;border-radius:100px;
  background:#244834;color:#f4f9f1;font-weight:800;font-size:13.5px;text-decoration:none;white-space:nowrap}
.island-peek-close{width:44px;height:44px;border-radius:50%;border:1px solid #ffffff9c;background:#ffffff40;
  color:var(--glass-ink);font-size:22px;line-height:1;cursor:pointer}
html.is-peeking .island-hint{opacity:0}
.town3d-sign.is-selected{animation:peek-in .32s cubic-bezier(.22,1,.36,1)}
@keyframes peek-in{from{opacity:0;translate:0 8px}to{opacity:1;translate:0 0}}
/* Live blur over a moving WebGL canvas is redone every frame, and on a phone
   that cost lands on the same GPU that draws the island. Touch screens get a
   firmer frosted fill instead, and night (dark scene, dark text) firms it up
   everywhere so the labels stay readable. */
@media (hover:none),(pointer:coarse){
  body:has(.island-ui) :is(.island-glass,.town3d-sign){backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(246,251,242,.86)}
  body:has(.island-ui) .town3d-sign.crown{background:rgba(141,38,25,.9)}
}
html:is([data-phase=night],[data-phase=dusk]) body:has(.island-ui) .db-head{background:#f9f5e9e6!important}
@media (hover:none),(pointer:coarse){body:has(.island-ui) .db-head{backdrop-filter:none!important;-webkit-backdrop-filter:none!important;background:#f9f5e9e6!important}}
html[data-phase=night] body:has(.island-ui) .island-glass,html[data-phase=night] .town3d-sign:not(.crown){background:rgba(246,251,242,.84)}
html[data-phase=dusk] body:has(.island-ui) .island-glass{background:rgba(246,251,242,.66)}
/* Bazzy's welcome tour: a game-style dialogue over the dock, not a modal;
   the map stays usable behind it. The face is his own sprite sheet (8
   cells: walk, idle, wave), waving while a line is being typed. */
.island-tour{position:absolute;left:50%;bottom:24px;transform:translateX(-50%);width:min(620px,calc(100% - 28px));
  display:flex;gap:14px;align-items:flex-end;padding:14px 16px 14px 10px;border-radius:26px;pointer-events:auto;z-index:4;
  animation:peek-in .4s cubic-bezier(.22,1,.36,1)}
.island-tour[hidden]{display:none}
.tour-face{flex:none;width:92px;height:92px;margin:-34px 0 -6px;background:url(/static/town3d/doodles/bazzy.png) 85.714% 0/800% 100% no-repeat;
  filter:drop-shadow(0 4px 6px rgba(16,45,37,.18))}
.tour-face.is-talking{animation:tour-wave .9s steps(1) infinite}
@keyframes tour-wave{0%{background-position:85.714% 0}50%{background-position:100% 0}}
.tour-body{flex:1;min-width:0}
.tour-head{display:flex;align-items:baseline;gap:8px;font-size:12px;font-weight:700;color:var(--glass-muted)}
.tour-head b{font:700 17px Fredoka,Nunito,system-ui;color:var(--glass-ink)}
.tour-step{margin-left:auto;font-size:11px;font-weight:800;letter-spacing:.04em}
.tour-line{min-height:4.5em;margin:5px 0 10px;font-size:15px;line-height:1.5;font-weight:700;color:var(--glass-ink);cursor:default}
.tour-actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.tour-next,.tour-cta{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 18px;border-radius:100px;border:0;
  background:#244834;color:#f4f9f1;font:800 14px Nunito,system-ui;cursor:pointer;text-decoration:none}
.tour-cta{order:-1}
.tour-cta[hidden]{display:none}
.tour-next.is-quiet{background:#ffffff40;color:var(--glass-ink);border:1px solid #ffffff9c}
.tour-skip{min-height:44px;padding:0 12px;border:0;background:none;color:var(--glass-muted);font:800 13px Nunito,system-ui;
  text-decoration:underline;text-underline-offset:3px;cursor:pointer}
html.is-touring .island-dock,html.is-touring .island-hint,html.is-touring .island-peek{opacity:0;pointer-events:none}
.island-ask{font:800 19px Fredoka,Nunito,system-ui}
@media(max-width:700px){
  .island-tour{bottom:14px;gap:8px;padding:12px 12px 12px 6px;border-radius:22px}
  .tour-face{width:70px;height:70px;margin-top:-30px}
  .tour-line{font-size:14px;min-height:6em}
}
@media(prefers-reduced-motion:reduce){.tour-face.is-talking{animation:none}}
.island-ui :is(a,button):focus-visible,.town3d-sign:focus-visible{outline:3px solid #254f46;outline-offset:4px}
.island-ui .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.island-extra{position:absolute;right:28px;bottom:146px;border-radius:18px;min-width:150px;pointer-events:auto;font-size:13px;font-weight:800}
.island-extra summary{min-height:44px;padding:12px 16px;cursor:pointer}
.island-extra nav{display:flex;flex-direction:column;padding:0 8px 8px;max-height:220px;overflow-y:auto}
.island-extra-link{min-height:44px;padding:12px;border-radius:10px}
.island-extra-link:hover{background:#fff}
.island-extra summary:focus-visible{outline:3px solid #254f46;outline-offset:3px}
html.is-entering .island-dock{opacity:.35;pointer-events:none}
html.is-entering .island-destination{pointer-events:none}
html.is-entering .island-title,html.is-entering .island-hint{opacity:0}
html.world-ready .island-title,html.world-ready .island-dock{transition:opacity .3s}
.town3d-sign{background:rgba(249,253,246,.3);backdrop-filter:blur(8px) saturate(1.2);-webkit-backdrop-filter:blur(8px) saturate(1.2);border:1px solid var(--glass-edge);border-radius:13px;padding:8px 12px;box-shadow:0 4px 18px rgba(16,45,37,.15);color:var(--glass-ink)}
.town3d-sign .sign-name{font-size:13px;color:var(--glass-ink)}
.town3d-sign .sign-sub{color:var(--glass-muted);font-size:11px}
.town3d-sign.crown{background:rgba(162,47,36,.38);border-color:rgba(255,228,210,.8)}
.town3d-sign.is-pinned{border-width:1px;box-shadow:0 4px 14px rgba(16,45,37,.12);padding:7px 10px}
/* A soft edge reflection sits around the world, not over its information. */
.island-ui:before{content:'';position:absolute;inset:112px 14px 14px;border:1px solid rgba(250,255,248,.55);border-radius:30px;box-shadow:inset 0 1px 0 rgba(255,255,250,.5);pointer-events:none}
html.embed .island-title,html.embed .island-toolbar{top:128px}
html.poster .island-ui,html.poster .db-head,html.poster .db-drawer,html.poster #label-overlay{display:none}
@media(max-width:700px){
  .island-title,html.embed .island-title{top:124px;left:14px;padding:12px 16px;max-width:240px;border-radius:20px}
  .island-title h1{font-size:24px;margin:4px 0}.island-title p,.island-title small{display:none}
  .island-back{margin:0;min-height:34px;font-size:12px}
  .island-toolbar,html.embed .island-toolbar{top:124px;right:14px;flex-direction:column;border-radius:24px}
  .island-dock{bottom:16px;width:calc(100% - 24px);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));padding:7px;border-radius:22px;overflow:visible}
  .island-destination{min-width:0;min-height:64px;padding:6px;font-size:11px;gap:4px}
  .island-hint{bottom:169px;font-size:11px;width:max-content;max-width:calc(100% - 32px);white-space:normal}
  .island-ui:before{inset:112px 7px 7px;border-radius:24px}
  .town3d-sign:not(.crown):not(.is-selected){display:none}
  .island-peek{bottom:182px}
  .island-extra{right:14px;top:378px;bottom:auto;min-width:110px;max-width:220px;z-index:12}
}
@media(prefers-reduced-motion:reduce){
  .island-ui *, .town3d-sign{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .island-destination:hover,.island-control:hover{transform:none}
}
@media(prefers-contrast:more){.island-glass,.town3d-sign{background:#f8fcf2;border:2px solid #17382f;backdrop-filter:none}}
@media(forced-colors:active){.island-glass,.island-control,.island-destination,.town3d-sign{background:Canvas;color:CanvasText;border:1px solid ButtonText;box-shadow:none}.district-icon{background:Canvas!important;color:CanvasText!important}}

/* A server-rendered still of the same island makes the landing page useful
   before any JavaScript loads. This styling stays inside the town page. */
.town-front{background:#f4f5e9;background-image:none;color:#213b32}
.town-front :is(a,button):focus-visible{outline:3px solid #254f46;outline-offset:4px}
.town-front .home-shelf{max-width:1360px;padding:26px 28px 34px}
.town-front .lanes{max-width:1360px;padding:0 28px}
.town-front .lane{border:1px solid #d6dfcf;box-shadow:0 3px 10px #27443108;border-radius:20px;background:#fcfdf7}
.town-front .lane .ic{border:1px solid #d3decb;border-radius:13px;background:#e8efdf}
.town-front .lane.flag .ic{background:#f4d6ca}
.town-front .lane.flag .ic svg{stroke:#97372b}

/* Transparent play controls retain the existing rounded silhouettes. */
.island-play,.game-action,.island-game-tabs button,.trail-choices button{min-height:44px;border:1px solid #ffffff9c;background:#ffffff26;border-radius:16px;color:var(--glass-ink);font:800 13px Nunito,system-ui;cursor:pointer;box-shadow:inset 0 1px 0 #ffffff7a}
.island-play{display:flex;align-items:center;gap:10px;padding:9px 16px;margin-top:6px;width:100%}.island-play span{font-size:20px}
.island-play:disabled{opacity:.45;cursor:default}
.island-games{position:fixed;inset:140px 24px auto auto;margin:0;width:min(350px,calc(100vw - 28px));max-height:calc(100dvh - 168px);padding:22px;border-radius:26px;color:var(--glass-ink);overflow-y:auto;box-sizing:border-box;box-shadow:inset 0 1px 0 #ffffffb3,0 16px 60px #143a2e2b;background:#f7fcf0b8;backdrop-filter:blur(20px) saturate(1.3)}
.island-games::backdrop{background:#1f48320c}.island-games[open]{display:block}
.island-games-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px}.island-games-head small{font-size:11px;color:var(--glass-muted)}
.island-games h2{font:700 29px Fredoka,system-ui;margin:4px 0 17px;letter-spacing:-.03em}
.island-games-head button{width:44px;height:44px;flex-shrink:0;border:1px solid #ffffff80;border-radius:50%;background:#ffffff26;font-size:24px;color:inherit;cursor:pointer}
.island-game-tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:5px}.island-game-tabs button{padding:7px 3px;font-size:12px}
.island-game-tabs button[aria-pressed=true]{background:#ffffff5e;border-color:#5a807066}
.game-caption{font-size:13px;line-height:1.6;margin:17px 0;color:#315346}.island-games p[role=status]{font-size:13px;line-height:1.5;min-height:39px;margin:15px 0}
.game-action{width:100%;padding:10px 16px}.game-action:hover,.island-play:hover,.trail-choices button:hover{background:#ffffff52}
.game-relaxed{font-size:12px;display:flex;align-items:center;gap:8px;min-height:44px;margin-top:5px}.game-relaxed input{width:18px;height:18px;accent-color:#416756}.game-score{font-size:11px;color:#426354;margin:5px 0}
.fishing-water{height:112px;position:relative;overflow:hidden;border-radius:18px;border:1px solid #ffffff8c;background:linear-gradient(#71adb150,#417f9063);box-shadow:inset 0 -16px 30px #0b536320}
.fishing-water:after{content:'';position:absolute;width:75%;height:22px;border:1px solid #ffffff70;border-radius:50%;bottom:20px;left:12%}
.fishing-float{position:absolute;left:calc(50% - 5px);top:32px;width:10px;height:27px;background:linear-gradient(#c45848 0 48%,#fff5dd 48%);border-radius:6px;box-shadow:0 6px 12px #24556430;transform:rotate(-8deg);animation:float-bob 2.4s ease-in-out infinite}
.fishing-water[data-state=bite] .fishing-float{animation:float-bite .5s ease-in-out infinite}.fishing-water[data-state=caught] .fishing-float{opacity:0}
.fishing-message{position:absolute;bottom:8px;left:0;right:0;text-align:center;font-weight:800;font-size:11px;color:#17382f}
@keyframes float-bob{50%{transform:translateY(4px) rotate(8deg)}}@keyframes float-bite{50%{transform:translateY(18px) rotate(24deg)}}
.shell-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:7px}.shell-card{aspect-ratio:1;min-height:50px;background:#fff6;border:1px solid #ffffffb3;border-radius:15px;cursor:pointer;color:#496255;display:grid;place-items:center;position:relative}.shell-card svg{width:75%;height:75%;fill:var(--shell-color);stroke:#fff6;stroke-width:2;display:none}.shell-back{font:700 24px Fredoka,system-ui}.shell-card[data-open=true] svg{display:block}.shell-card[data-open=true] .shell-back{display:none}.shell-card[data-matched]{background:#fff2;border-color:#547d6c80;opacity:.65}
.trail-clue{font:600 21px Fredoka,system-ui;line-height:1.3}.trail-choices{display:grid;gap:7px}.trail-choices button{padding:10px;text-align:left}
.island-games :is(button,input):focus-visible,.island-play:focus-visible{outline:3px solid #254f46;outline-offset:3px}
@media(max-width:700px){.island-play{font-size:11px;margin-top:4px;padding:6px 10px;min-height:38px}.island-games{inset:auto 14px 14px;margin:0;width:calc(100% - 28px);max-height:calc(100dvh - 128px);padding:18px}.island-games h2{font-size:25px;margin-bottom:12px}}
@media(prefers-reduced-motion:reduce){.fishing-float{animation:none!important}.fishing-water[data-state=bite] .fishing-float{transform:translateY(14px)}}
@media(prefers-contrast:more){.island-games,.island-game-tabs button,.island-play,.game-action,.trail-choices button{background:#f8fcf2;border-color:#17382f}}
@media(forced-colors:active){.island-games,.island-games button,.island-play{background:Canvas;color:CanvasText;border:1px solid ButtonText}.shell-card svg{fill:CanvasText;stroke:Canvas}}

.island-credits{display:inline-block;font-size:10px;line-height:1.5;min-height:24px;padding-top:8px;text-underline-offset:3px;color:var(--glass-muted)}

:is(body:has(.island-ui),body.town-front) .db-head{background:#f9f5e92b!important;backdrop-filter:blur(12px) saturate(1.2);-webkit-backdrop-filter:blur(12px) saturate(1.2)}
:is(body:has(.island-ui),body.town-front) .db-head :is(.db-pill,.db-search input){background:#fff5!important}
body:has(.island-ui) .island-destination{color:#17382f;text-shadow:0 1px 4px #f8fff1a8}
@supports not (backdrop-filter:blur(10px)){.island-glass,.town3d-sign{background:#f8fcf0e8}}
body:has(.island-games[open]) .island-title{opacity:0;pointer-events:none}