:root {
  --bg: #e7f5f0;
  --bg-deep: #c7e6dd;
  --surface: rgba(255, 255, 255, .83);
  --surface-strong: #ffffff;
  --ink: #19312e;
  --muted: #617774;
  --line: rgba(34, 93, 82, .16);
  --primary: #2a8a74;
  --primary-deep: #176655;
  --accent: #e46a5e;
  --gold: #e7b64f;
  --shadow: 0 20px 60px rgba(29, 85, 75, .16);
  --radius: 22px;
}
html[data-theme="paper"] {
  --bg: #f8f4ea; --bg-deep: #eee0c6; --surface: rgba(255,255,255,.86);
  --surface-strong: #fffdf7; --ink: #3b3128; --muted: #766b5e; --line: rgba(98,77,52,.16);
  --primary: #2f806d; --primary-deep: #225948; --shadow: 0 20px 60px rgba(103,78,42,.14);
}
html[data-theme="ink"] {
  --bg: #1e2426; --bg-deep: #273438; --surface: rgba(34, 45, 47, .90);
  --surface-strong: #263134; --ink: #f2f6f3; --muted: #b2c4bf; --line: rgba(231,245,240,.16);
  --primary: #6ccdb1; --primary-deep: #a4ecd5; --accent: #ff9c8f; --shadow: 0 20px 60px rgba(0,0,0,.26);
}
* { box-sizing: border-box; }
html, body { min-height: 100%; }
body {
  margin: 0; color: var(--ink); background: var(--bg);
  font-family: "Noto Sans TC", "Microsoft JhengHei", sans-serif;
  overflow-x: hidden; transition: background .45s ease, color .45s ease;
}
button, input { font: inherit; }
button { cursor: pointer; }
.app-shell { min-height: 100vh; background:
  radial-gradient(circle at 8% 8%, rgba(255,255,255,.68), transparent 28rem),
  radial-gradient(circle at 92% 0%, rgba(255,255,255,.38), transparent 24rem); }
.topbar, .main-layout, .footer { width: min(1480px, calc(100% - 48px)); margin: 0 auto; }
.topbar { min-height: 92px; display:flex; align-items:center; justify-content:space-between; gap:20px; }
.brand { display:flex; align-items:center; gap:14px; }
.brand-mark { width:48px; height:48px; display:grid; place-items:center; border-radius:16px; color:#fff; font-weight:800; font-size:18px; background: linear-gradient(145deg, var(--primary), #6ecfb5); box-shadow:0 9px 18px rgba(42,138,116,.24); transform:rotate(-6deg); }
.eyebrow { margin:0 0 3px; color:var(--primary); font-size:11px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; }
h1,h2,h3,p { margin-top:0; }
h1 { margin-bottom:0; font-size:22px; letter-spacing:-.04em; }
h1 span { color:var(--accent); font-size:14px; font-weight:500; margin-left:7px; letter-spacing:0; }
.top-actions { display:flex; align-items:center; gap:10px; }
.clock { padding:9px 13px; border:1px solid var(--line); border-radius:999px; color:var(--muted); background:var(--surface); font-size:12px; font-weight:700; box-shadow:0 4px 14px rgba(0,0,0,.04); }
.icon-btn, .close-btn { border:0; width:42px; height:42px; border-radius:50%; background:var(--surface-strong); color:var(--primary-deep); font-weight:800; box-shadow:0 5px 15px rgba(0,0,0,.08); }
.main-layout { display:grid; grid-template-columns:minmax(0, 1.48fr) minmax(350px, .72fr); gap:20px; padding-bottom:18px; }
.world-column, .sidebar { min-width:0; }
.scene-wrap { position:relative; min-height:630px; overflow:hidden; border:1px solid var(--line); border-radius:30px; background:#b8dfe0; box-shadow:var(--shadow); }
.scene { position:absolute; inset:0; touch-action:none; }
.scene canvas { display:block; width:100%; height:100%; }
.scene-fallback { position:absolute; inset:0; display:grid; place-items:center; padding:24px; background:linear-gradient(145deg, #c8ebe4, #eaf6e6); }
.scene-fallback[hidden] { display:none; }
.fallback-card { max-width:360px; text-align:center; padding:30px; border-radius:24px; background:rgba(255,255,255,.76); box-shadow:0 14px 32px rgba(30,80,70,.13); }
.fallback-icon { font-size:50px; color:var(--primary); }
.fallback-card h2 { margin:12px 0 8px; }
.fallback-card p { margin:0; color:var(--muted); line-height:1.7; }
.scene-hud { position:absolute; top:18px; left:18px; right:18px; display:flex; justify-content:space-between; align-items:center; gap:10px; pointer-events:none; }
.hud-pills { display:flex; gap:7px; flex-wrap:wrap; }
.hud-pill { padding:7px 10px; border:1px solid rgba(255,255,255,.56); border-radius:999px; color:#173c3b; background:rgba(255,255,255,.56); backdrop-filter:blur(8px); font-size:11px; font-weight:700; }
.primary-btn { min-height:42px; border:0; padding:0 15px; border-radius:14px; color:#fff; background:var(--primary); font-weight:800; box-shadow:0 8px 18px rgba(42,138,116,.24); pointer-events:auto; }
.primary-btn:hover, .primary-btn:focus-visible { background:var(--primary-deep); }
.legend { position:absolute; left:18px; bottom:18px; display:flex; gap:12px; padding:9px 12px; border:1px solid rgba(255,255,255,.55); border-radius:13px; color:#183e3c; background:rgba(255,255,255,.54); backdrop-filter:blur(8px); font-size:11px; font-weight:700; }
.legend span { display:flex; align-items:center; gap:5px; }
.legend-dot { width:8px; height:8px; border-radius:50%; display:inline-block; }
.legend-dot.day { background:#ffd866; }.legend-dot.person { background:#e46a5e; }.legend-dot.shell { background:#fff; border:1px solid #9ebdb7; }
.quickbar { display:flex; gap:8px; flex-wrap:wrap; padding:12px 2px 0; }
.quick-btn, .filter-btn, .text-btn { min-height:42px; border:1px solid var(--line); border-radius:13px; padding:0 13px; color:var(--muted); background:var(--surface); font-size:12px; font-weight:800; }
.quick-btn:hover, .quick-btn:focus-visible, .filter-btn.active { color:var(--primary-deep); border-color:rgba(42,138,116,.45); background:rgba(42,138,116,.1); }
.quick-btn b { display:inline-grid; min-width:20px; height:20px; place-items:center; margin-left:4px; border-radius:999px; color:#fff; background:var(--accent); font-size:10px; }
.status-line { min-height:20px; margin:9px 5px 0; color:var(--muted); font-size:11px; }
.sidebar { padding:22px; border:1px solid var(--line); border-radius:30px; background:var(--surface); box-shadow:var(--shadow); backdrop-filter:blur(18px); }
.sidebar-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:18px; }
.sidebar-heading h2 { margin:0; font-size:22px; letter-spacing:-.05em; }
.mini-badge { flex:none; padding:7px 10px; border-radius:999px; color:var(--accent); background:rgba(228,106,94,.12); font-size:11px; font-weight:800; }
.search-box { display:flex; align-items:center; gap:8px; height:46px; padding:0 13px; border:1px solid var(--line); border-radius:14px; background:var(--surface-strong); color:var(--primary); }
.search-box input { min-width:0; width:100%; border:0; outline:0; color:var(--ink); background:transparent; font-size:13px; }
.filter-row { display:flex; gap:7px; margin:12px 0 14px; }
.filter-btn { min-height:34px; padding:0 11px; font-size:11px; }
.island-list { display:grid; gap:9px; max-height:548px; overflow:auto; padding-right:2px; }
.island-card { position:relative; display:grid; grid-template-columns:44px 1fr auto; gap:11px; align-items:center; min-height:76px; padding:11px; border:1px solid transparent; border-radius:18px; background:rgba(255,255,255,.38); transition:transform .2s, background .2s, border-color .2s; }
.island-card:hover, .island-card:focus-within { transform:translateX(3px); border-color:var(--line); background:var(--surface-strong); }
.island-card.center { background:linear-gradient(135deg, rgba(42,138,116,.13), rgba(228,106,94,.08)); }
.island-card .island-icon { width:44px; height:44px; display:grid; place-items:center; border-radius:14px; color:#fff; font-size:21px; box-shadow:inset 0 -5px 0 rgba(0,0,0,.09); }
.island-card:nth-child(2) .island-icon { background:#5c95c7; }.island-card:nth-child(3) .island-icon { background:#d98d55; }.island-card:nth-child(4) .island-icon { background:#d1819a; }.island-card:nth-child(5) .island-icon { background:#8a79bd; }
.island-card h3 { margin:0 0 3px; font-size:14px; }
.island-card p { margin:0; color:var(--muted); font-size:11px; line-height:1.45; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.card-meta { display:flex; align-items:center; gap:5px; margin-top:4px; color:var(--accent); font-size:10px; font-weight:800; }
.card-arrow { color:var(--primary); font-size:18px; }
.sidebar-note { display:flex; gap:10px; align-items:center; margin-top:17px; padding:12px; border:1px dashed var(--line); border-radius:16px; color:var(--muted); font-size:11px; line-height:1.55; }
.sidebar-note p { margin:0; }.sidebar-note strong { color:var(--primary-deep); }.note-mascot { display:grid; place-items:center; flex:none; width:36px; height:36px; border-radius:50%; color:#fff; background:var(--accent); font-size:22px; }
.footer { display:flex; justify-content:space-between; align-items:center; gap:10px; padding:10px 2px 28px; color:var(--muted); font-size:11px; }
.text-btn { min-height:auto; padding:4px 0; border:0; background:none; color:var(--primary); }
.modal-layer[hidden] { display:none; }
.modal-layer { position:fixed; inset:0; z-index:20; }
.modal-backdrop { position:absolute; inset:0; background:rgba(18,32,30,.44); backdrop-filter:blur(5px); }
.content-panel { position:absolute; top:20px; right:20px; bottom:20px; width:min(620px, calc(100% - 40px)); overflow:auto; padding:31px; border:1px solid var(--line); border-radius:28px; color:var(--ink); background:var(--surface-strong); box-shadow:0 24px 80px rgba(0,0,0,.2); animation:panel-in .24s ease-out; }
@keyframes panel-in { from { opacity:0; transform:translateX(22px); } to { opacity:1; transform:none; } }
.close-btn { position:absolute; top:16px; right:16px; z-index:2; color:var(--muted); background:var(--bg); }
.panel-kicker { display:flex; align-items:center; gap:8px; color:var(--primary); font-size:11px; font-weight:800; letter-spacing:.08em; }
.panel-title { margin:7px 48px 8px 0; font-size:30px; letter-spacing:-.06em; }
.panel-intro { color:var(--muted); line-height:1.8; }
.panel-tags { display:flex; flex-wrap:wrap; gap:6px; margin:13px 0 20px; }
.tag { padding:5px 8px; border-radius:999px; color:var(--primary-deep); background:rgba(42,138,116,.11); font-size:10px; font-weight:800; }
.tab-row { display:flex; gap:7px; margin:20px 0 16px; padding-bottom:9px; border-bottom:1px solid var(--line); }
.tab-btn { min-height:38px; border:0; border-radius:11px; padding:0 12px; color:var(--muted); background:transparent; font-size:12px; font-weight:800; }
.tab-btn.active { color:var(--primary-deep); background:rgba(42,138,116,.12); }
.content-section h3 { margin:0 0 10px; font-size:14px; }.content-section ul { margin:0; padding-left:20px; color:var(--muted); line-height:1.85; font-size:13px; }.content-section p { color:var(--muted); line-height:1.8; font-size:13px; }
.goal-box { margin-top:16px; padding:13px 15px; border-left:3px solid var(--accent); border-radius:0 14px 14px 0; background:rgba(228,106,94,.09); color:var(--muted); font-size:12px; line-height:1.7; }
.question-card { padding:14px; margin-bottom:10px; border:1px solid var(--line); border-radius:15px; background:var(--bg); }.question-card strong { display:block; margin-bottom:5px; font-size:13px; }.question-card textarea { width:100%; min-height:75px; resize:vertical; padding:9px; border:1px solid var(--line); border-radius:10px; outline:0; color:var(--ink); background:var(--surface-strong); font-size:12px; }
.quiz-card { padding:15px; margin-bottom:13px; border:1px solid var(--line); border-radius:16px; }.quiz-card h4 { margin:0 0 10px; font-size:13px; line-height:1.6; }.option { display:block; margin:7px 0; }.option input { accent-color:var(--primary); margin-right:7px; }.quiz-result { margin-top:9px; color:var(--primary-deep); font-size:11px; line-height:1.6; }.quiz-submit { width:100%; }
.resident-grid { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:10px; margin-top:14px; }.resident-card { padding:13px; border-radius:16px; background:var(--bg); }.resident-card h4 { margin:0 0 3px; font-size:13px; }.resident-card p { margin:0; color:var(--muted); font-size:11px; }.resident-card button { min-height:36px; width:100%; margin-top:9px; border:1px solid var(--line); border-radius:10px; color:var(--primary-deep); background:var(--surface-strong); font-size:11px; font-weight:800; }
.trade-box { margin-top:16px; padding:14px; border:1px solid var(--line); border-radius:16px; background:linear-gradient(135deg, rgba(42,138,116,.08), rgba(228,106,94,.06)); }.trade-box h4 { margin:0 0 8px; font-size:12px; }.trade-row { display:flex; justify-content:space-between; align-items:center; gap:8px; font-size:12px; }.trade-row button { min-height:38px; border:0; border-radius:10px; padding:0 11px; color:#fff; background:var(--primary); font-size:11px; font-weight:800; }.trade-row button:disabled { cursor:not-allowed; opacity:.45; }
.stats-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin:14px 0; }.stat { padding:12px; border-radius:14px; background:var(--bg); text-align:center; }.stat b { display:block; color:var(--primary); font-size:20px; }.stat span { color:var(--muted); font-size:10px; }
.setting-row { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:13px 0; border-bottom:1px solid var(--line); }.setting-row label { font-size:13px; font-weight:700; }.setting-row small { display:block; margin-top:3px; color:var(--muted); font-size:10px; font-weight:400; }.toggle { width:48px; height:28px; padding:3px; border:0; border-radius:20px; background:var(--line); }.toggle::after { content:""; display:block; width:22px; height:22px; border-radius:50%; background:#fff; transition:transform .2s; }.toggle.on { background:var(--primary); }.toggle.on::after { transform:translateX(20px); }
.time-row { display:flex; flex-wrap:wrap; gap:7px; margin-top:8px; }.time-btn { min-height:36px; border:1px solid var(--line); border-radius:10px; padding:0 9px; color:var(--muted); background:var(--surface-strong); font-size:11px; font-weight:800; }.time-btn.active { border-color:var(--primary); color:var(--primary-deep); background:rgba(42,138,116,.1); }
.source-list { padding-left:18px; color:var(--muted); font-size:12px; line-height:1.8; }
.toast { position:fixed; left:50%; bottom:24px; z-index:40; transform:translate(-50%, 120px); padding:11px 15px; border-radius:13px; color:#fff; background:#183d38; box-shadow:0 12px 30px rgba(0,0,0,.18); font-size:12px; transition:transform .25s; pointer-events:none; }.toast.show { transform:translate(-50%,0); }
.island-label { position:absolute; left:0; top:0; padding:7px 10px; border:1px solid rgba(255,255,255,.7); border-radius:999px; color:#143a35; background:rgba(255,255,255,.75); box-shadow:0 5px 14px rgba(0,0,0,.12); font-size:11px; font-weight:800; white-space:nowrap; transform:translate(-50%,-100%); pointer-events:auto; }
.island-label button { border:0; color:inherit; background:none; font:inherit; }
@media (max-width: 1050px) { .main-layout { grid-template-columns:1fr; }.sidebar { order:2; }.island-list { max-height:none; grid-template-columns:repeat(2,minmax(0,1fr)); }.scene-wrap { min-height:560px; } }
@media (max-width: 640px) {
  .topbar, .main-layout, .footer { width:min(100% - 24px, 1480px); }.topbar { min-height:76px; }.brand-mark { width:41px; height:41px; border-radius:13px; }.brand h1 { font-size:18px; }.brand h1 span { display:none; }.clock { padding:7px 9px; font-size:10px; }.icon-btn { width:38px; height:38px; }
  .main-layout { gap:10px; }.scene-wrap { min-height:470px; border-radius:23px; }.scene-hud { top:12px; left:12px; right:12px; align-items:flex-start; }.hud-pills { max-width:65%; }.hud-pill { padding:6px 8px; font-size:9px; }.primary-btn { min-height:40px; padding:0 10px; font-size:11px; }.legend { left:12px; bottom:12px; gap:8px; padding:7px 9px; font-size:9px; }.quickbar { gap:6px; overflow:auto; flex-wrap:nowrap; padding-left:1px; }.quick-btn { flex:none; min-height:44px; padding:0 11px; font-size:11px; }.sidebar { padding:16px; border-radius:23px; }.sidebar-heading h2 { font-size:20px; }.island-list { grid-template-columns:1fr; }.island-card { min-height:72px; }.footer { padding-bottom:18px; }
  .content-panel { top:auto; right:0; bottom:0; width:100%; max-height:min(82vh,720px); padding:25px 18px 22px; border-radius:24px 24px 0 0; animation:drawer-in .24s ease-out; }.panel-title { font-size:25px; }.resident-grid { grid-template-columns:1fr 1fr; }.tab-row { overflow:auto; }.tab-btn { flex:none; }.stats-grid { gap:5px; }
  @keyframes drawer-in { from { opacity:0; transform:translateY(22px); } to { opacity:1; transform:none; } }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration:.001ms !important; transition-duration:.001ms !important; scroll-behavior:auto !important; } }