/* ==========================================================================
   群岛 · 世界样式
   依赖 assets/css/style.css 里的设计令牌（--c-* / --sp-* / --fs-* / --r*）。
   放在 style.css 之后引入即可。
   ========================================================================== */

/* 方向配色：明暗两套各给一组，SVG 里用 var() 引用，跟着主题自动切换 */
:root {
  --isl-ai:     var(--c-form);
  --isl-psych:  var(--c-topic);
  --isl-art:    #5fb8c4;
  --isl-family: #68b97f;
  --isl-lit:    #d97b62;
  --isl-hist:   #8ba0d8;
  --isl-xr:     #d98bb5;
  --isl-fun:    #8a93a3;
}
[data-theme="light"] {
  --isl-ai:     #8a5a0b;
  --isl-psych:  #6242b5;
  --isl-art:    #0d6e7a;
  --isl-family: #2f7a45;
  --isl-lit:    #a4452f;
  --isl-hist:   #46609c;
  --isl-xr:     #a8457a;
  --isl-fun:    #5c6673;
}

/* ---------- 状态徽章：idea 是本站新增的状态，style.css 里没有对应类 ---------- */
.badge--idea {
  color: var(--c-text-faint);
  background: var(--c-bg-subtle);
  border: 1px solid var(--c-border-hi);
}

/* ---------- 容器 ---------- */
.world {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow);
}

.world__head {
  display: flex; align-items: center; gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-5);
  border-bottom: 1px solid var(--c-border);
  flex-wrap: wrap;
}
.world__title {
  margin: 0; font-size: var(--fs-h3); font-weight: 600; color: var(--c-text);
}
.world__title em {
  font-style: normal; font-family: var(--font-mono); font-size: var(--fs-micro);
  color: var(--c-text-faint); margin-left: .5rem; letter-spacing: var(--ls-mono);
}
.world__era {
  margin-left: auto; font-family: var(--font-mono); font-size: var(--fs-meta);
  color: var(--c-accent); letter-spacing: var(--ls-mono);
}

/* ---------- 视图切换 ---------- */
.world__views { display: flex; gap: 2px; border: 1px solid var(--c-border); border-radius: var(--r-pill); padding: 2px; }
.world__views button {
  background: transparent; border: 0; border-radius: var(--r-pill);
  padding: .2rem .7rem; font: inherit; font-size: var(--fs-meta);
  color: var(--c-text-dim); cursor: pointer; transition: var(--ease);
}
.world__views button:hover { color: var(--c-text); }
.world__views button[aria-pressed="true"] { background: var(--c-accent); color: #06231f; font-weight: 600; }
[data-theme="light"] .world__views button[aria-pressed="true"] { color: #fff; }

/* ---------- 画布 ---------- */
.world__stage {
  position: relative;
  background:
    radial-gradient(680px 380px at 50% 46%, var(--c-accent-soft), transparent 72%),
    var(--c-bg-subtle);
}
.world__svg { display: block; width: 100%; height: auto; }

/* 网格底纹：暗示「这是一块可丈量的地」 */
[data-theme="dark"] .world__stage::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 26px 26px;
}

.isl { cursor: pointer; }
.isl rect {
  /* 让 scale() 动画以自身中心为原点，而不是 SVG 用户坐标的 (0,0) */
  transform-box: fill-box;
  transform-origin: center;
  transition: opacity .35s ease, transform .5s cubic-bezier(.2,.7,.3,1);
}
.isl.is-dim { opacity: .14; }
.isl.is-active rect { stroke: var(--c-text); stroke-width: 1.6; }
.isl:focus { outline: none; }
.isl:focus-visible rect { stroke: var(--c-accent-hi); stroke-width: 2; }

.isl--drop rect { stroke-dasharray: 3 3; }

@keyframes world-pop {
  from { opacity: 0; transform: scale(.35); }
  to   { opacity: 1; transform: scale(1); }
}
.grow { animation: world-pop .5s cubic-bezier(.2,.85,.3,1) both; }

.sea { fill: none; stroke: var(--c-border-hi); stroke-width: 1; stroke-dasharray: 2 4; opacity: .7; }
.frontier {
  fill: none; stroke: var(--c-accent); stroke-width: 1; stroke-dasharray: 3 5; opacity: .3;
  transition: r .55s cubic-bezier(.2,.7,.3,1);
}

/* ---------- 控制条 ---------- */
.world__ctrl {
  padding: var(--sp-4) var(--sp-5) var(--sp-5);
  border-top: 1px solid var(--c-border);
  background: var(--c-bg-subtle);
}
.world__ctrlrow { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }

.btn {
  background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-pill);
  padding: .38rem .9rem; font: inherit; font-size: var(--fs-meta); color: var(--c-text);
  cursor: pointer; transition: var(--ease); flex: none;
}
.btn:hover { border-color: var(--c-border-hi); background: var(--c-surface-hi); }
.btn--on { background: var(--c-accent); border-color: var(--c-accent); color: #06231f; font-weight: 600; }
[data-theme="light"] .btn--on { color: #fff; }
.btn:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 2px; }

.world__range {
  -webkit-appearance: none; appearance: none;
  flex: 1; min-width: 10rem; height: 4px; border-radius: var(--r-pill);
  background: var(--c-border); outline: none; cursor: pointer;
}
.world__range::-webkit-slider-thumb {
  -webkit-appearance: none; width: 18px; height: 18px; border-radius: 50%;
  background: var(--c-accent); border: 3px solid var(--c-bg);
  box-shadow: 0 0 0 1px var(--c-accent); cursor: pointer;
}
.world__range::-moz-range-thumb {
  width: 14px; height: 14px; border-radius: 50%; background: var(--c-accent);
  border: 3px solid var(--c-bg); cursor: pointer;
}
.world__range:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 4px; }

.world__stats {
  display: flex; gap: var(--sp-5); flex-wrap: wrap; margin-top: var(--sp-3);
  font-family: var(--font-mono); font-size: var(--fs-micro);
  color: var(--c-text-faint); letter-spacing: var(--ls-mono);
}
.world__stats b { color: var(--c-accent); font-weight: 600; }
.world__stats [data-k="drop"] b { color: var(--c-drop); font-weight: 600; }

/* ---------- 图例（可点击筛选） ---------- */
.world__legend {
  display: flex; gap: var(--sp-2); flex-wrap: wrap;
  padding: var(--sp-3) var(--sp-5);
  border-top: 1px solid var(--c-border);
  background: var(--c-bg-subtle);
}
.lg {
  display: inline-flex; align-items: center; gap: .45rem;
  font-family: var(--font-mono); font-size: var(--fs-micro);
  color: var(--c-text-dim); background: var(--c-surface);
  border: 1px solid var(--c-border); border-radius: var(--r-pill);
  padding: .2rem .65rem; cursor: pointer; transition: var(--ease);
}
.lg:hover { border-color: var(--c-border-hi); color: var(--c-text); }
.lg[aria-pressed="true"] { border-color: var(--c-accent); color: var(--c-text); }
.lg i { width: 9px; height: 9px; border-radius: 2px; display: block; flex: none; }
.lg span { opacity: .55; }

/* ---------- 详情面板 ---------- */
.world__detail {
  border-top: 1px solid var(--c-border);
  padding: var(--sp-5);
  background: var(--c-surface);
  min-height: 8rem;
}
.dt__head { display: flex; align-items: baseline; gap: var(--sp-3); flex-wrap: wrap; margin-bottom: .5rem; }
.dt__tag {
  font-family: var(--font-mono); font-size: var(--fs-micro); letter-spacing: var(--ls-mono);
  color: var(--c-text-faint);
}
.dt__name { margin: 0; font-size: var(--fs-h3); font-weight: 600; color: var(--c-text); }
.dt__q {
  margin: 0 0 .9rem; font-size: var(--fs-lead); color: var(--c-text);
  padding-left: .85rem; border-left: 2px solid var(--c-accent);
}
.dt__sig {
  margin: 0 0 1rem; font-family: var(--font-mono); font-size: var(--fs-micro);
  color: var(--c-text-faint); letter-spacing: var(--ls-mono);
}
.dt__sig b { color: var(--c-form); font-weight: 600; }

.dt__cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: var(--sp-4); }
.dt__block { min-width: 0; }
.dt__k {
  margin: 0 0 .45rem; font-family: var(--font-mono); font-size: var(--fs-micro);
  letter-spacing: var(--ls-mono); color: var(--c-text-faint); text-transform: uppercase;
}
.dt__block > p { margin: 0; font-size: var(--fs-sm); color: var(--c-text-dim); }
.dt__list { list-style: none; margin: 0; padding: 0; }
.dt__list li {
  font-size: var(--fs-sm); color: var(--c-text-dim);
  padding-left: .9rem; position: relative; margin-bottom: .4rem;
}
.dt__list li::before {
  content: ""; position: absolute; left: 0; top: .62em;
  width: 4px; height: 4px; border-radius: 50%; background: var(--c-accent); opacity: .6;
}
.dt__list b { color: var(--c-text); font-weight: 600; }
.dt__gap {
  padding: .7rem .9rem; border-radius: var(--r-sm);
  background: var(--c-bg-subtle); border: 1px dashed var(--c-border-hi);
}

/* ---------- 列表视图（同时是 SEO / 无脚本回退） ---------- */
.world__list { padding: var(--sp-5); }

/* hidden 属性对带 display 的元素无效，必须显式覆盖 */
.world__stage[hidden],
.world__ctrl[hidden],
.world__legend[hidden],
.world__detail[hidden],
.world__list[hidden] { display: none; }
.wl { display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: var(--sp-3); }
.wl__item {
  border: 1px solid var(--c-border); border-radius: var(--r);
  background: var(--c-surface); padding: var(--sp-4);
  display: flex; flex-direction: column; gap: .4rem;
  transition: transform .18s cubic-bezier(.2,.7,.3,1), border-color .18s;
}
.wl__item:hover { transform: translateY(-2px); border-color: var(--c-border-hi); }
.wl__m {
  display: flex; gap: .5rem; flex-wrap: wrap; align-items: center;
  font-family: var(--font-mono); font-size: var(--fs-micro);
  color: var(--c-text-faint); letter-spacing: var(--ls-mono);
}
.wl__n { margin: 0; font-size: var(--fs-sm); font-weight: 600; color: var(--c-text); }
.wl__q { margin: 0; font-size: var(--fs-sm); color: var(--c-text-dim); flex: 1; }
.wl__s { margin: 0; font-family: var(--font-mono); font-size: var(--fs-micro); color: var(--c-text-faint); }
.wl__s b { color: var(--c-form); font-weight: 600; }
.wl__item a { color: inherit; text-decoration: none; border: 0; }
.wl__item a:hover .wl__n { color: var(--c-accent); }

/* ---------- 规则表 ---------- */
.world__rules {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: var(--sp-3); margin-top: var(--sp-4);
}
.rule {
  border: 1px solid var(--c-border); border-left: 3px solid var(--c-accent);
  border-radius: 0 var(--r) var(--r) 0; background: var(--c-surface);
  padding: var(--sp-4);
}
.rule__t { margin: 0 0 .3rem; font-size: var(--fs-sm); font-weight: 600; color: var(--c-text); }
.rule__d { margin: 0 0 .5rem; font-size: var(--fs-sm); color: var(--c-text-dim); }
.rule__w { margin: 0; font-size: var(--fs-meta); color: var(--c-text-faint); }

/* ---------- 世界的自我介绍 ---------- */
.wintro { max-width: 46rem; }
.wintro__k {
  margin: 0 0 var(--sp-3);
  font-family: var(--font-mono); font-size: var(--fs-meta);
  letter-spacing: var(--ls-mono); color: var(--c-accent);
}
.wintro__k::before { content: '$ '; color: var(--c-text-faint); }
.wintro__t {
  margin: 0 0 var(--sp-4);
  font-size: var(--fs-h1); line-height: var(--lh-heading);
  font-weight: 600; letter-spacing: var(--ls-cjk);
  text-wrap: balance;
}
.wintro__lead {
  margin: 0 0 var(--sp-5);
  font-size: var(--fs-lead); color: var(--c-text-dim);
  text-wrap: pretty;
}
.wintro__facts {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-5);
  font-family: var(--font-mono); font-size: var(--fs-micro);
  letter-spacing: var(--ls-mono); color: var(--c-text-faint);
  font-variant-numeric: tabular-nums;
}
.wintro__facts b { color: var(--c-accent); font-weight: 600; }

/* ---------- 空状态 ---------- */
.world__empty {
  padding: var(--sp-8) var(--sp-5); text-align: center;
  font-family: var(--font-mono); font-size: var(--fs-sm); color: var(--c-text-faint);
}

/* ==========================================================================
   悬浮入口 · 启航继续探险（回首页）
   --------------------------------------------------------------------------
   贴在视口右边缘、垂直居中；position: fixed ⇒ 页面怎么滚它都不动。
   这一页是「上岛查看」的落点，进来之后要能一眼找到回首页的路 ——
   所以不放页脚（页脚要滚到底才看得见，那正是用户抱怨的那种麻烦）。
   竖排文字：贴边时不横向占地方；小船朝右上，就是「启航」的方向。

   ⚠️ --sail-w 是「这个浮块占掉多少横向宽度」，下面两处都读它：
      ① .sail 自己的宽度  ② 正文让出来的右内边距（见文件后半那条 .wrap）。
      写死成两个数的话，改窄了会盖住正文、改宽了会莫名多一道空白。
   ========================================================================== */
:root { --sail-w: 2.5rem; }

.sail {
  position: fixed;
  right: 0;
  top: 50%;
  /* 用 translateY 而不是 top: calc(50% - 高度/2)：高度跟着字号和行数变，
     写死一个数迟早对不上，居中就歪了 */
  transform: translateY(-50%);
  /* 低于 .topbar(50) 与 .tabbar(60)：站点框架永远压在浮动元件上面。
     实际它在垂直正中、那两条在上下两端，正常视口下根本碰不到 */
  z-index: 45;

  display: flex; flex-direction: column; align-items: center;
  gap: .55rem;
  /* 定宽：图标才居中得整齐，也让「该给正文留多宽」算得准 */
  box-sizing: border-box;
  width: var(--sail-w);
  padding-block: .85rem;

  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-right: 0;                    /* 贴边那一侧不画线，才像「从边上长出来」的 */
  border-radius: var(--r-lg) 0 0 var(--r-lg);
  box-shadow: var(--shadow);

  color: var(--c-text-dim);
  text-decoration: none;
  transition: color .2s, background .2s, border-color .2s,
              transform .24s cubic-bezier(.2,.7,.3,1);
}
.sail__ico {
  display: block; flex: none;
  width: 22px; height: 22px;
  color: var(--c-accent);
  transition: color .2s;
}
.sail__t {
  /* 竖排。writing-mode 之后 letter-spacing 走的是竖直方向，配一点才有呼吸感 */
  writing-mode: vertical-rl;
  font-family: var(--font-mono);
  font-size: var(--fs-meta);
  font-weight: 500;
  letter-spacing: .18em;
  white-space: nowrap;
}

.sail:hover, .sail:focus-visible {
  color: var(--c-text);
  background: var(--c-surface-hi);
  border-color: var(--c-border-hi);
  /* 往左挪 3px：露出一点缝，像从边上探出来 */
  transform: translateY(-50%) translateX(-3px);
}
.sail:hover .sail__ico, .sail:focus-visible .sail__ico { color: var(--c-accent-hi); }
.sail:focus-visible { outline: 2px solid var(--c-accent); outline-offset: -3px; }

/* 视口比内容还宽的时候，浮块落在页边距里，完全碰不到正文。
   只有视口窄到 .wrap 顶满（< --maxw 68.75rem + 两侧 --gutter 1.5rem）时，
   才需要从正文里给它让出那一条 —— 那个断点就是 71.75rem。
   ⚠️ 媒体查询里不能用 var()，所以这里只能写死；改了 --maxw / --gutter 要回来改。
      ⚠️ 不让位的话，浮块会压在卡片右边框和正文上 —— 不报错，但很难看 */
@media (max-width: 71.75rem) {
  .wrap { padding-right: calc(var(--gutter) + var(--sail-w)); }
}

/* ---------- 减少动效 ---------- */
@media (prefers-reduced-motion: reduce) {
  .grow { animation: none; }
  .frontier { transition: none; }
  .wl__item:hover { transform: none; }
  /* 悬停不再滑动，只换颜色 —— 位置变化对前庭敏感的人不友好 */
  .sail { transition: color .15s, background .15s, border-color .15s; }
  .sail:hover, .sail:focus-visible { transform: translateY(-50%); }
}

@media (max-width: 640px) {
  .world__detail, .world__ctrl, .world__list { padding: var(--sp-4); }
  .world__head { padding: var(--sp-3) var(--sp-4); }
  .dt__q { font-size: var(--fs-body); }
  /* 窄屏上浮块要更小，否则会让正文少掉太宽一条 */
  :root { --sail-w: 2.15rem; }
  .sail { gap: .4rem; padding-block: .6rem; }
  .sail__ico { width: 18px; height: 18px; }
  .sail__t { font-size: var(--fs-micro); letter-spacing: .12em; }
}

/* 打印时藏掉：纸上没有「滚不动」这回事，它只会压住正文 */
@media print {
  .sail { display: none; }
}