/* ==========================================================================
   天空浮岛 · 首页样式
   独立于前台主题（style.css），因为它是全屏沉浸式布局
   配色由 body[data-daylight] + .night 类驱动，与 Canvas 内的 themeMix 同步
   ========================================================================== */

:root{
  --isl-ink:#3d3730;
  --isl-ink-2:rgba(61,55,48,.68);
  --isl-ink-3:rgba(61,55,48,.45);
  --isl-panel:rgba(255,255,255,.62);
  --isl-panel-hi:rgba(255,255,255,.86);
  --isl-line:rgba(120,105,90,.22);
  --isl-line-hi:rgba(120,105,90,.34);
  --isl-accent:#a8703c;
  --isl-shadow:0 6px 26px rgba(72,60,48,.14);
  --isl-shadow-hi:0 12px 38px rgba(72,60,48,.22);
  --isl-r:16px;
  --safe-t:env(safe-area-inset-top,0px);
  --safe-b:env(safe-area-inset-bottom,0px);
}

/* 夜间：整体转为冷调深色，文字提亮 */
body.night{
  --isl-ink:#eef2fb;
  --isl-ink-2:rgba(238,242,251,.76);
  --isl-ink-3:rgba(238,242,251,.5);
  --isl-panel:rgba(30,36,60,.55);
  --isl-panel-hi:rgba(38,46,74,.82);
  --isl-line:rgba(180,196,232,.20);
  --isl-line-hi:rgba(180,196,232,.34);
  --isl-accent:#f0c98a;
  --isl-shadow:0 6px 26px rgba(0,0,0,.34);
  --isl-shadow-hi:0 12px 38px rgba(0,0,0,.46);
}

*{box-sizing:border-box}
html{ -webkit-text-size-adjust:100%; }

body.island-body{
  margin:0;
  position:fixed;              /* 全屏启动页：禁止整页滚动，只在菜单里滚 */
  inset:0;
  overflow:hidden;
  background:#cfe4f7;          /* 兜底色，Canvas 一起就盖住 */
  color:var(--isl-ink);
  font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Source Han Sans SC",sans-serif;
  font-size:16px;
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
  transition:color .6s ease;
  overscroll-behavior:none;
}
html.is-night body.island-body{ background:#141a33; }

#island-canvas{
  position:absolute; inset:0;
  width:100%; height:100%;
  display:block;
  touch-action:none;           /* 自己接管手势 */
  cursor:grab;
}
body.is-dragging #island-canvas{ cursor:grabbing; }

/* 氛围遮罩：底部压暗一点，保证控制条与菜单上的文字可读 */
.island-scrim{
  position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(to bottom, rgba(255,255,255,.34) 0%, rgba(255,255,255,0) 26%),
    linear-gradient(to top, rgba(255,255,255,.42) 0%, rgba(255,255,255,0) 24%);
  transition:background .6s ease;
}
body.night .island-scrim{
  background:
    linear-gradient(to bottom, rgba(10,14,28,.42) 0%, rgba(10,14,28,0) 28%),
    linear-gradient(to top, rgba(10,14,28,.52) 0%, rgba(10,14,28,0) 26%);
}

/* ==========================================================================
   顶部身份区
   ========================================================================== */
.island-identity{
  position:absolute;
  top:calc(var(--safe-t) + clamp(18px, 5vh, 52px));
  left:0; right:0;
  margin:0 auto;
  width:min(92vw, 760px);
  text-align:center;
  pointer-events:none;
  opacity:0; transform:translateY(-10px);
  transition:opacity 1s ease .15s, transform 1s cubic-bezier(.2,.7,.3,1) .15s;
}
body.ready .island-identity{ opacity:1; transform:none; }

.ident-kicker{
  margin:0 0 10px;
  font-size:12.5px; letter-spacing:.32em; text-indent:.32em;
  color:var(--isl-ink-3);
  text-transform:uppercase;
}
.ident-title{
  margin:0;
  font-size:clamp(30px, 7.4vw, 60px);
  font-weight:700;
  letter-spacing:.1em; text-indent:.1em;
  line-height:1.16;
  color:var(--isl-ink);
  text-shadow:0 2px 18px rgba(255,255,255,.55);
}
body.night .ident-title{ text-shadow:0 2px 22px rgba(0,0,0,.6); }

.ident-sub{
  margin:14px 0 0;
  font-size:clamp(13px,3.3vw,15.5px);
  letter-spacing:.12em;
  color:var(--isl-ink-2);
}
.ident-dot{ margin:0 .7em; color:var(--isl-ink-3); }

/* ==========================================================================
   舞台 & 建筑热点
   ========================================================================== */
.island-stage{
  position:absolute; inset:0;
  pointer-events:none;          /* 只有热点自己可点 */
}

.building-marker{
  position:absolute; top:0; left:0;
  width:0; height:0;            /* 用 transform 定位中心点 */
  text-decoration:none;
  pointer-events:auto;
  will-change:transform;
  opacity:0;
  transition:opacity .7s ease;
}
body.ready .building-marker{ opacity:1; }

.bm-ring{
  position:absolute; left:50%; top:50%;
  width:46px; height:46px; margin:-23px 0 0 -23px;
  border-radius:50%;
  border:1.5px solid rgba(255,255,255,.9);
  background:rgba(255,255,255,.26);
  box-shadow:0 2px 12px rgba(60,50,40,.18);
  backdrop-filter:blur(2px);
  animation:bm-breathe 3.4s ease-in-out infinite;
}
body.night .bm-ring{
  border-color:rgba(200,215,255,.72);
  background:rgba(120,150,220,.20);
  box-shadow:0 2px 16px rgba(0,0,0,.5);
}
.building-marker:nth-child(2) .bm-ring{ animation-delay:.42s }
.building-marker:nth-child(3) .bm-ring{ animation-delay:.84s }
.building-marker:nth-child(4) .bm-ring{ animation-delay:1.26s }
.building-marker:nth-child(5) .bm-ring{ animation-delay:1.68s }
.building-marker:nth-child(6) .bm-ring{ animation-delay:2.1s }

@keyframes bm-breathe{
  0%,100%{ transform:scale(1);    opacity:.85 }
  50%    { transform:scale(1.16); opacity:1 }
}

.bm-dot{
  position:absolute; left:50%; top:50%;
  width:9px; height:9px; margin:-4.5px 0 0 -4.5px;
  border-radius:50%;
  background:#fff;
  box-shadow:0 0 0 3px rgba(255,255,255,.35);
}

.bm-label{
  position:absolute;
  left:50%; top:50%;
  transform:translate(-50%, -100%) translateY(-26px);
  white-space:nowrap;
  padding:7px 13px;
  border-radius:11px;
  background:var(--isl-panel-hi);
  border:1px solid var(--isl-line);
  box-shadow:var(--isl-shadow);
  backdrop-filter:blur(10px) saturate(1.2);
  opacity:0; pointer-events:none;
  transition:opacity .22s ease, transform .22s cubic-bezier(.2,.8,.3,1);
}
.bm-label b{
  display:block;
  font-size:14px; font-weight:600; letter-spacing:.04em;
  color:var(--isl-ink); line-height:1.4;
}
.bm-label i{
  display:block; font-style:normal;
  font-size:11.5px; letter-spacing:.03em;
  color:var(--isl-ink-3); line-height:1.4;
}

.building-marker:hover .bm-label,
.building-marker.is-hover .bm-label,
.building-marker:focus-visible .bm-label{
  opacity:1;
  transform:translate(-50%, -100%) translateY(-32px);
}
.building-marker:hover .bm-ring,
.building-marker.is-hover .bm-ring,
.building-marker:focus-visible .bm-ring{
  border-color:var(--isl-accent);
  background:rgba(255,255,255,.5);
}
.building-marker:focus-visible{ outline:none }
.building-marker:focus-visible .bm-ring{
  box-shadow:0 0 0 3px var(--isl-accent), 0 2px 12px rgba(60,50,40,.2);
}

/* 当前所在页 */
.building-marker.is-active .bm-dot{ background:var(--isl-accent) }

/* 触屏：没有 hover，标签常驻显示 */
@media (hover:none){
  .bm-label{ opacity:1; transform:translate(-50%, -100%) translateY(-26px) }
  .bm-ring{ width:40px; height:40px; margin:-20px 0 0 -20px }
}

/* ==========================================================================
   底部控制条
   ========================================================================== */
.island-controls{
  position:absolute;
  left:50%; bottom:calc(var(--safe-b) + 20px);
  transform:translateX(-50%);
  display:flex; align-items:center; gap:6px;
  padding:6px;
  border-radius:999px;
  background:var(--isl-panel);
  border:1px solid var(--isl-line);
  box-shadow:var(--isl-shadow);
  backdrop-filter:blur(14px) saturate(1.3);
  z-index:20;
  opacity:0; transform:translateX(-50%) translateY(12px);
  transition:opacity .9s ease .3s, transform .9s cubic-bezier(.2,.7,.3,1) .3s, background .6s, border-color .6s;
}
body.ready .island-controls{ opacity:1; transform:translateX(-50%) }

.ctl{
  appearance:none;
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  min-width:38px; height:38px; padding:0 11px;
  border:0; border-radius:999px;
  background:transparent;
  color:var(--isl-ink-2);
  font:inherit; font-size:14.5px; letter-spacing:.02em;
  cursor:pointer;
  transition:background .18s ease, color .18s ease, transform .12s ease;
  -webkit-tap-highlight-color:transparent;
}
.ctl:hover{ background:var(--isl-panel-hi); color:var(--isl-ink) }
.ctl:active{ transform:scale(.94) }
.ctl:focus-visible{ outline:2px solid var(--isl-accent); outline-offset:1px }
.ctl-ico{ font-size:15px; line-height:1 }
.ctl-txt{ font-size:13px }
.ctl-wide{ padding:0 14px }

.ctl-sep{
  width:1px; height:20px; margin:0 3px;
  background:var(--isl-line-hi);
}

/* ==========================================================================
   岛上去处 · 可展开菜单
   ========================================================================== */
.destinations{
  position:absolute;
  right:calc(var(--safe-b) + 0px);
  right:20px;
  top:calc(var(--safe-t) + 20px);
  width:min(300px, calc(100vw - 40px));
  z-index:30;
  border-radius:var(--isl-r);
  background:var(--isl-panel);
  border:1px solid var(--isl-line);
  box-shadow:var(--isl-shadow);
  backdrop-filter:blur(14px) saturate(1.3);
  overflow:hidden;
  opacity:0; transform:translateY(-8px);
  transition:opacity .9s ease .38s, transform .9s cubic-bezier(.2,.7,.3,1) .38s,
             background .6s, border-color .6s, box-shadow .3s;
}
body.ready .destinations{ opacity:1; transform:none }
.destinations[open]{ box-shadow:var(--isl-shadow-hi) }

.destinations > summary{
  display:flex; align-items:center; gap:9px;
  padding:12px 16px;
  cursor:pointer;
  list-style:none;
  user-select:none;
  color:var(--isl-ink);
  font-size:14px; font-weight:600; letter-spacing:.08em;
  transition:background .18s ease;
}
.destinations > summary::-webkit-details-marker{ display:none }
.destinations > summary:hover{ background:var(--isl-panel-hi) }
.destinations > summary:focus-visible{ outline:2px solid var(--isl-accent); outline-offset:-2px }

.dt-label{ flex:1 }
.dt-count{
  min-width:20px; height:20px; padding:0 6px;
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:999px;
  background:var(--isl-line);
  color:var(--isl-ink-2);
  font-size:11.5px; font-weight:600; letter-spacing:0;
}
.dt-caret{
  width:0; height:0;
  border-left:4.5px solid transparent;
  border-right:4.5px solid transparent;
  border-top:5px solid var(--isl-ink-3);
  transition:transform .24s ease;
}
.destinations[open] .dt-caret{ transform:rotate(180deg) }

.destination-grid{
  max-height:min(56vh, 420px);
  overflow-y:auto;
  overscroll-behavior:contain;
  padding:6px 8px 8px;
  border-top:1px solid var(--isl-line);
  -webkit-overflow-scrolling:touch;
}

.dest-card{
  position:relative;
  display:block;
  padding:11px 34px 11px 13px;
  border-radius:11px;
  text-decoration:none;
  color:inherit;
  transition:background .18s ease, transform .14s ease;
}
.dest-card:hover,
.dest-card:focus-visible{
  background:var(--isl-panel-hi);
  transform:translateX(2px);
}
.dest-card:focus-visible{ outline:2px solid var(--isl-accent); outline-offset:-2px }
.dest-card.is-active{ background:var(--isl-line) }

.dc-name{
  display:block;
  font-size:14.5px; font-weight:600; letter-spacing:.03em;
  color:var(--isl-ink); line-height:1.5;
}
.dc-detail{
  display:block;
  font-size:12.5px; letter-spacing:.02em;
  color:var(--isl-ink-3); line-height:1.5;
}
.dc-go{
  position:absolute; right:14px; top:50%;
  transform:translateY(-50%);
  font-size:15px;
  color:var(--isl-ink-3);
  opacity:0;
  transition:opacity .18s ease, transform .18s ease;
}
.dest-card:hover .dc-go,
.dest-card:focus-visible .dc-go{ opacity:1; transform:translateY(-50%) translateX(2px) }

.dest-hint{
  margin:0;
  padding:10px 16px 13px;
  border-top:1px solid var(--isl-line);
  font-size:11.5px; line-height:1.7;
  color:var(--isl-ink-3);
  letter-spacing:.02em;
}

/* ==========================================================================
   首次到访引导
   ========================================================================== */
.island-tip{
  position:absolute;
  left:50%; bottom:calc(var(--safe-b) + 84px);
  transform:translateX(-50%);
  display:flex; align-items:center; gap:8px;
  padding:9px 16px;
  border-radius:999px;
  background:var(--isl-panel-hi);
  border:1px solid var(--isl-line);
  box-shadow:var(--isl-shadow);
  backdrop-filter:blur(12px);
  font-size:13px; letter-spacing:.06em;
  color:var(--isl-ink-2);
  z-index:19;
  pointer-events:none;
  animation:tip-float 2.6s ease-in-out infinite;
  transition:opacity .9s ease, transform .9s ease;
}
.island-tip.is-out{ opacity:0; transform:translateX(-50%) translateY(10px) }
.tip-hand{ font-size:15px }

@keyframes tip-float{
  0%,100%{ transform:translateX(-50%) translateY(0) }
  50%    { transform:translateX(-50%) translateY(-5px) }
}

/* ==========================================================================
   响应式：手机端精细适配
   ========================================================================== */
@media (max-width: 720px){
  .island-identity{ top:calc(var(--safe-t) + 22px); width:94vw }
  .ident-kicker{ font-size:11px; letter-spacing:.24em; margin-bottom:8px }
  .ident-sub{ margin-top:10px; font-size:12.5px }

  .destinations{
    right:14px; left:14px;
    top:auto;
    bottom:calc(var(--safe-b) + 76px);
    width:auto;
    transform:translateY(8px);
  }
  body.ready .destinations{ transform:none }
  .destination-grid{ max-height:min(46vh, 320px) }

  .island-controls{ bottom:calc(var(--safe-b) + 14px); gap:4px; padding:5px }
  .ctl{ min-width:36px; height:36px; padding:0 9px }
  .ctl-txt{ display:none }                 /* 手机上只留图标，省地方 */
  .ctl-wide .ctl-txt{ display:inline }     /* 天气保留文字，因为图标会变 */
  .ctl-wide{ padding:0 11px }

  .bm-label{ padding:6px 10px }
  .bm-label b{ font-size:12.5px }
  .bm-label i{ font-size:10.5px }

  .island-tip{ bottom:calc(var(--safe-b) + 72px); font-size:12px }
}

/* 超小屏（iPhone SE 之类） */
@media (max-width: 380px){
  .ident-kicker{ display:none }
  .ctl-wide .ctl-txt{ display:none }
  .ctl-wide{ padding:0 9px }
}

/* 横屏手机：竖向空间少，把身份区压扁 */
@media (max-height: 500px) and (orientation: landscape){
  .island-identity{ top:calc(var(--safe-t) + 12px) }
  .ident-title{ font-size:clamp(22px, 5vw, 34px) }
  .ident-kicker{ display:none }
  .ident-sub{ margin-top:6px; font-size:12px }
  .destinations{ width:min(260px, 46vw) }
  .destination-grid{ max-height:44vh }
}

/* 大屏：给身份区多点呼吸 */
@media (min-width: 1200px){
  .island-identity{ top:calc(var(--safe-t) + clamp(40px, 8vh, 88px)) }
  .destinations{ right:34px; top:calc(var(--safe-t) + 30px); width:310px }
}

/* 无障碍：尊重系统减弱动效设置 */
@media (prefers-reduced-motion: reduce){
  .bm-ring{ animation:none }
  .island-tip{ animation:none }
  body.island-body *{ transition-duration:.01ms !important }
}

/* 降级：Canvas 不支持 / JS 关闭时，热点仍能点 */
body.no-canvas #island-canvas{ display:none }
body.no-canvas .island-scrim{
  background:linear-gradient(160deg,#dfeafadb 0%,#f7f2e8 100%);
}
body.no-canvas .building-marker{ opacity:1 }

/* 修复：控制条按钮文字在窄屏下竖排换行 */
.ctl-txt{white-space:nowrap}

/* ==========================================================================
   3D 版：画布 / 加载态 / WebGL 兜底 / 季节按钮
   ========================================================================== */
#utopia-canvas{
  position:absolute; inset:0;
  width:100%; height:100%;
  display:block;
  touch-action:none;            /* 自己接管手势 */
  cursor:grab;
}
body.is-dragging #utopia-canvas{ cursor:grabbing }
body.has-hover #utopia-canvas{ cursor:pointer }

/* --- 加载进度：世界建好前盖住画面 --- */
.island-loader{
  position:absolute; inset:0;
  z-index:60;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:18px;
  background:linear-gradient(180deg,#d9e8f7 0%, #cfe4f7 55%, #eae2d2 100%);
  color:#4a4436;
  transition:opacity .7s ease, visibility .7s ease;
}
.island-loader.is-done{ opacity:0; visibility:hidden }

.loader-mark{
  width:46px; height:46px;
  border-radius:50%;
  border:2px solid rgba(120,105,90,.22);
  border-top-color:#a8703c;
  animation:loader-spin 1s linear infinite;
}
@keyframes loader-spin{ to{ transform:rotate(360deg) } }

.loader-title{
  margin:0;
  font-size:15px; letter-spacing:.3em; text-indent:.3em;
  color:#4a4436;
}
.loader-sub{
  margin:0;
  font-size:12.5px; letter-spacing:.14em;
  color:rgba(74,68,54,.6);
}
.loader-bar{
  width:min(200px, 46vw); height:3px;
  border-radius:999px;
  background:rgba(120,105,90,.16);
  overflow:hidden;
}
.loader-bar > i{
  display:block; height:100%; width:0%;
  border-radius:999px;
  background:linear-gradient(90deg,#c99a63,#a8703c);
  transition:width .45s ease;
}

/* --- WebGL 不可用：回退成静态卡片墙 --- */
.no-webgl .island-loader{ display:none }
.no-webgl #utopia-canvas{ display:none }
.no-webgl .island-scrim{ background:linear-gradient(160deg,#dfeafadb 0%,#f7f2e8 100%) }
.no-webgl .island-stage{ display:none }
.no-webgl .island-tip{ display:none }
.no-webgl .island-controls{ display:none }
.no-webgl .destinations{ position:static; margin:auto; opacity:1; transform:none }
.no-webgl body{ overflow:auto }

/* --- 季节按钮：图标随季节换 --- */
#ctl-season .ctl-ico{ font-size:14px }
body[data-season="spring"] #ctl-season .ctl-ico{ color:#e08fb0 }
body[data-season="summer"] #ctl-season .ctl-ico{ color:#5c9e4a }
body[data-season="autumn"] #ctl-season .ctl-ico{ color:#c9722c }
body[data-season="winter"] #ctl-season .ctl-ico{ color:#6f9bc4 }

/* 天气图标夜间提亮一点 */
body.night #ctl-weather .ctl-ico{ color:#cfe0ff }