/* 未來語法 II 三場域小島（fsg/island.html）：粉彩天空上的卡通小島＋白色面板。只有亮色（3D 場景本身就是粉彩色）。 */
:root{
  --ink:#2b2541; --dim:#5f5879; --line:#ebe4f6; --soft:#f6f2ff; --top:#050509;
  --en:'Space Grotesk',ui-sans-serif,system-ui,sans-serif;
  --zh:'Noto Sans TC',-apple-system,'PingFang TC','Microsoft JhengHei',sans-serif;
  --panel-w:400px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--top);color:var(--ink);font-family:var(--zh);font-size:15px;line-height:1.6;
  -webkit-font-smoothing:antialiased;overscroll-behavior:none}
button{font:inherit;color:inherit}
img{display:block;max-width:100%}

.top{height:56px;display:flex;align-items:center;gap:10px;padding:0 18px;background:var(--top);color:#f4f2fa}
.brand{display:flex;align-items:center;gap:8px;margin-right:auto;text-decoration:none}
.brand img{height:16px;width:auto} .brand svg{height:22px;width:17px;flex:none}
.back{font-size:13px;color:#d6d2e6;text-decoration:none;padding:6px 12px;border:1px solid rgba(255,255,255,.18);border-radius:99px}

.isl{position:relative;height:calc(100vh - 56px);height:calc(100dvh - 56px);overflow:hidden;
  background:radial-gradient(120% 80% at 70% 0%,#fff6fb 0%,transparent 55%),linear-gradient(180deg,#cdbcff 0%,#f4d2ee 52%,#ffe5c8 100%)}
.stage{position:absolute;inset:0}
.stage canvas{display:block;touch-action:none;outline:none}
.loading{position:absolute;inset:0;display:grid;place-items:center;margin:0;color:#5b4f93;font-weight:700;letter-spacing:.1em}
.ready .loading{display:none}

/* 3D 標籤 */
.pins{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.pin{position:absolute;left:0;top:0;padding:0;border:0;background:none;cursor:pointer;pointer-events:auto;will-change:transform}
.pin-in{position:relative;display:grid;grid-template-columns:auto auto;align-items:center;column-gap:6px;row-gap:0;
  transform:translate(-50%,calc(-100% - 10px));background:#fff;border-radius:16px;padding:7px 13px 7px 11px;white-space:nowrap;
  box-shadow:0 8px 22px rgba(70,40,140,.2);animation:bob 2.8s ease-in-out infinite;transition:background .25s,transform .2s}
.pin-in::after{content:'';position:absolute;left:50%;bottom:-6px;width:12px;height:12px;background:inherit;transform:translateX(-50%) rotate(45deg);border-radius:0 0 3px 0}
.pin i{width:11px;height:11px;border-radius:50%;background:var(--c);box-shadow:0 0 0 3px color-mix(in srgb,var(--c) 22%,transparent)}
.pin b{font-size:16px;font-weight:900;line-height:1.2}
.pin small{grid-column:1/-1;font-family:var(--en);font-size:10.5px;letter-spacing:.16em;color:var(--c);font-weight:700;line-height:1.3}
.pin em{grid-column:1/-1;font-style:normal;font-size:12px;color:var(--dim);font-weight:700;line-height:1.3}
.pin small{order:3} .pin em{order:4}
.pin:hover .pin-in,.pin:focus-visible .pin-in{transform:translate(-50%,calc(-100% - 14px)) scale(1.06)}
.pin:focus-visible{outline:none} .pin:focus-visible .pin-in{box-shadow:0 0 0 3px var(--c),0 8px 22px rgba(70,40,140,.2)}
.pin.on{opacity:0;pointer-events:none}          /* 打開的那個場域：面板已經寫了名字 */
.pin.closed .pin-in{opacity:.72}
.pin.closed em{color:#8a3a3a}
.mark{position:absolute;left:0;top:0;font-size:11.5px;color:#4b4568;background:rgba(255,255,255,.75);padding:1px 9px;border-radius:99px;
  white-space:nowrap;margin:-11px 0 0 0;translate:-50% 0}
@keyframes bob{50%{margin-top:-4px}}

/* 左上介紹 */
.intro{position:absolute;left:18px;top:18px;width:272px;background:rgba(255,255,255,.86);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border-radius:24px;padding:18px 18px 14px;box-shadow:0 10px 30px rgba(70,40,140,.14)}
.kick{font-family:var(--en);font-size:11px;letter-spacing:.2em;color:#5b2fc0;margin:0 0 4px;font-weight:700}
.intro h1{font-size:26px;line-height:1.25;margin:0;font-weight:900}
.sub{margin:4px 0 12px;color:var(--dim);font-size:14px}
.vlist{display:grid;gap:8px}
.vbtn{display:flex;align-items:baseline;gap:8px;width:100%;text-align:left;background:#fff;border:2px solid transparent;border-radius:14px;
  padding:9px 12px;cursor:pointer;box-shadow:0 2px 8px rgba(70,40,140,.08);transition:transform .15s,border-color .2s}
.vbtn:hover{transform:translateY(-1px)}
.vbtn i{width:11px;height:11px;border-radius:50%;background:var(--c);flex:none;align-self:center}
.vbtn b{font-size:16px;font-weight:900}
.vbtn span{font-family:var(--en);font-size:11px;letter-spacing:.14em;color:var(--dim);font-weight:700}
.vbtn[aria-pressed=true]{border-color:var(--c)}
.hint{margin:10px 0 0;font-size:12px;color:var(--dim)}
.pv{position:absolute;top:18px;left:50%;transform:translateX(-50%);margin:0;background:#2b2541;color:#fff;font-size:12.5px;padding:5px 14px;border-radius:99px}

.home{position:absolute;right:18px;bottom:86px;border:0;background:#fff;border-radius:99px;padding:8px 14px;font-size:13.5px;font-weight:700;
  cursor:pointer;box-shadow:0 6px 18px rgba(70,40,140,.16)}

/* 日期列 */
.daybar{position:absolute;bottom:16px;left:50%;transform:translateX(-50%);display:flex;gap:2px;max-width:calc(100% - 24px);overflow-x:auto;
  background:rgba(255,255,255,.88);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-radius:18px;padding:5px;
  box-shadow:0 8px 24px rgba(70,40,140,.16);scrollbar-width:none;transition:left .45s}
.daybar button{flex:none;border:0;background:transparent;border-radius:13px;padding:5px 11px;cursor:pointer;font-size:14px;font-weight:700;line-height:1.25;text-align:center}
.daybar small{display:block;font-size:11px;font-weight:400;color:var(--dim)}
.daybar button[aria-pressed=true]{background:var(--ink);color:#fff}
.daybar button[aria-pressed=true] small{color:#ddd6f3}

/* 場域面板 */
.panel{position:absolute;top:16px;right:16px;bottom:16px;width:var(--panel-w);max-width:calc(100% - 32px);background:#fff;border-radius:26px;
  box-shadow:0 18px 50px rgba(50,30,110,.22);overflow-y:auto;overscroll-behavior:contain;
  transform:translateX(calc(100% + 30px));visibility:hidden;transition:transform .45s cubic-bezier(.2,.8,.2,1),visibility 0s .45s}
.panel.on{transform:none;visibility:visible;transition:transform .45s cubic-bezier(.2,.8,.2,1)}
.vp[hidden]{display:none}
.vp-head{position:sticky;top:0;z-index:2;display:flex;align-items:flex-start;gap:10px;padding:20px 20px 16px;color:#fff;background-color:var(--c);
  background-image:radial-gradient(circle at 86% 28%,rgba(255,255,255,.35) 0 2px,transparent 3px),radial-gradient(circle at 72% 72%,rgba(255,255,255,.28) 0 1.5px,transparent 2.5px),
    radial-gradient(circle at 93% 64%,rgba(255,255,255,.3) 0 1.5px,transparent 2.5px),linear-gradient(135deg,var(--c),color-mix(in srgb,var(--c) 72%,#160c2e))}
.vp-head>div{flex:1}
.vp-en{margin:0;font-family:var(--en);font-size:12px;letter-spacing:.3em;font-weight:700;opacity:.9}
.vp-head h2{margin:2px 0 2px;font-size:32px;line-height:1.15;font-weight:900;outline:none}
.vp-hall{margin:0;font-size:13.5px;opacity:.95}
.vp-x{flex:none;width:38px;height:38px;border-radius:50%;border:0;background:rgba(255,255,255,.22);color:#fff;font-size:24px;line-height:1;cursor:pointer}
.vp-x:hover{background:rgba(255,255,255,.34)}
.vp-body{padding:6px 20px 26px}
.vp-hist{margin:12px 0 0;color:var(--dim);font-size:13.5px}
.vp h3{margin:22px 0 8px;font-size:13px;letter-spacing:.14em;color:var(--c);font-weight:900;display:flex;align-items:center;gap:6px}
.vp h3::before{content:'✦';font-size:11px}
.list,.people{list-style:none;margin:0;padding:0}
.hrs li{display:flex;justify-content:space-between;gap:10px;padding:8px 12px;background:var(--soft);border-radius:11px;margin-bottom:6px;font-size:14px}
.hrs span{font-family:var(--en);font-weight:700}
.prog{margin:10px 0 0;font-size:14px}
.prog a,.vp a.more{color:var(--c);font-weight:700}
.pg{border:1.5px solid var(--line);border-radius:16px;padding:11px 13px;margin-bottom:8px}
.pg.has-img{display:grid;grid-template-columns:64px 1fr;gap:12px;align-items:start}
.pg img{width:64px;height:64px;object-fit:cover;border-radius:12px}
.pg-top{margin:0 0 3px;display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px}
.tag{font-size:11.5px;font-weight:700;color:#fff;background:var(--c);border-radius:99px;padding:1px 9px}
.tag.off{background:#7c7690}
.when{font-size:12.5px;color:var(--dim);font-weight:700}
.pg b{display:block;font-size:15px;line-height:1.45}
.pg small{display:block;font-size:12.5px;color:var(--dim);margin-top:2px}
.vp a.more{display:inline-block;margin-top:5px;font-size:13px;text-decoration:none}
.empty{margin:0 0 6px;padding:9px 12px;border-radius:11px;background:var(--soft);color:var(--dim);font-size:13.5px}
.empty[hidden],.list li[hidden]{display:none}
.note{margin:6px 0 0;font-size:12.5px;color:var(--dim)}
.people{display:grid;gap:6px}
.who{display:flex;gap:12px;align-items:center;text-decoration:none;color:var(--ink);padding:8px 10px;border-radius:14px;background:#faf8ff}
a.who:hover{background:var(--soft)}
.who img,.who i{width:46px;height:46px;border-radius:50%;flex:none;object-fit:cover}
.who i{display:grid;place-items:center;background:var(--c);color:#fff;font-style:normal;font-weight:900;font-size:18px}
.who b{display:block;font-size:14.5px;line-height:1.35}
.who small{display:block;font-size:12px;color:var(--dim);line-height:1.45}
.who small.cr{font-size:11px}
.photos{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:18px}
.photos img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:10px}
.links{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0 0}
.links a{border:1.5px solid var(--c);color:var(--c);border-radius:99px;padding:5px 14px;font-size:13px;font-weight:700;text-decoration:none}

@media (min-width:900px){
  .isl:has(.panel.on) .daybar{left:calc(50% - (var(--panel-w) + 16px) / 2)}
  .isl:has(.panel.on) .home{right:calc(var(--panel-w) + 34px)}
}
@media (max-width:899px){
  .intro{left:10px;right:10px;top:10px;width:auto;padding:10px 12px 10px;border-radius:18px}
  .intro .kick,.intro .hint{display:none}
  .intro h1{font-size:18px}
  .sub{display:none}
  .vlist{grid-template-columns:repeat(3,1fr);gap:6px;margin-top:8px}
  .isl:has(.panel.on) .intro{display:none}
  .vbtn{flex-direction:column;align-items:center;gap:0;padding:6px 4px;text-align:center}
  .vbtn i{display:none}
  .vbtn b{font-size:15px;color:var(--c)}
  .vbtn span{font-size:9.5px;letter-spacing:.08em}
  .daybar{bottom:10px;transition:bottom .45s cubic-bezier(.2,.8,.2,1)}
  .daybar button{padding:4px 7px;font-size:13.5px}
  .home{right:10px;bottom:72px}
  .panel{top:auto;left:0;right:0;bottom:0;width:auto;max-width:none;height:52%;border-radius:24px 24px 0 0;transform:translateY(100%)}
  .isl:has(.panel.on) .daybar{bottom:calc(52% + 8px)}
  .isl:has(.panel.on) .home{display:none}
  .vp-head{padding:18px 16px 14px}
  .vp-head::before{content:'';position:absolute;top:7px;left:50%;width:40px;height:4px;border-radius:2px;background:rgba(255,255,255,.55);transform:translateX(-50%)}
  .vp-head h2{font-size:26px}
  .vp-body{padding:4px 16px calc(24px + env(safe-area-inset-bottom))}
  .pin b{font-size:14px} .pin-in{padding:5px 10px 5px 9px}
  .mark{display:none}
}

/* 沒有 JavaScript／WebGL：三個場域依序列成一般頁面 */
html:not(.js) .isl,.flat .isl{height:auto;overflow:visible;padding:16px 12px 40px}
html:not(.js) :is(.stage,.pins,.home,.hint,.daybar,.vlist),.flat :is(.stage,.pins,.home,.hint,.vlist){display:none}
html:not(.js) .intro,.flat .intro{position:static;width:auto;max-width:760px;margin:0 auto 14px}
html:not(.js) .panel,.flat .panel{position:static;width:auto;max-width:760px;margin:0 auto;transform:none;visibility:visible;background:none;box-shadow:none;overflow:visible;height:auto}
html:not(.js) .vp,.flat .vp{display:block!important;background:#fff;border-radius:22px;overflow:hidden;margin-bottom:16px}
html:not(.js) .vp-x,.flat .vp-x{display:none}
.flat .daybar{position:static;transform:none;margin:0 auto 14px;width:max-content}