/* hallmark: custom atmospheric; 可探索的个人数字空间。 */
/* critique: 内容入口保持真实、可访问，场景只承载视觉与导航。 */
:root { --bg:#090a11; --text:#f8f1e8; --muted:#c0b4ae; --gold:#ffd095; --coral:#ff835c; --panel:rgba(14,13,18,.83); --border:rgba(255,211,177,.25); }
* { box-sizing:border-box; }
html,body { width:100%; height:100%; margin:0; overflow:hidden; }
body { background:var(--bg); color:var(--text); font:14px/1.5 -apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; }
button,a { font:inherit; color:inherit; } a { text-decoration:none; } button { cursor:pointer; }
button:focus-visible,a:focus-visible { outline:2px solid var(--gold); outline-offset:4px; }
.world { position:relative; width:100%; height:100%; isolation:isolate; overflow:hidden; }
#world-canvas,.world-screen { position:absolute; inset:0; width:100%; height:100%; }
#world-canvas { touch-action:none; }
.world-screen { pointer-events:none; background:linear-gradient(180deg,rgba(7,7,13,.62),transparent 32%,transparent 68%,rgba(7,7,13,.8)); }
.world-bar { position:absolute; top:0; left:0; right:0; display:flex; align-items:center; justify-content:space-between; gap:20px; padding:22px 4%; z-index:5; }
.brand { font-size:1.15rem; font-weight:800; letter-spacing:-.04em; }.brand span { color:var(--muted); font-size:.65rem; font-weight:500; letter-spacing:.1em; }
.bar-actions { display:flex; align-items:center; gap:12px; }.bar-actions button,.exit,.control-buttons button { border:1px solid var(--border); background:var(--panel); border-radius:999px; padding:10px 18px; backdrop-filter:blur(14px); }
.exit:hover,.bar-actions button:hover,.control-buttons button:hover { border-color:var(--gold); }
.world-heading { position:absolute; top:102px; left:4%; max-width:340px; pointer-events:none; text-shadow:0 2px 18px var(--bg); }.world-heading p { margin:0; color:var(--gold); }.world-heading p:first-child { font-size:.65rem; letter-spacing:.15em; }.world-heading h1 { margin:7px 0; font-size:clamp(1.65rem,3vw,2.8rem); line-height:1.1; }.world-heading p:last-child { color:var(--muted); }
.destinations { position:absolute; top:100px; right:4%; z-index:4; display:flex; gap:7px; }.destinations button { display:flex; flex-direction:column; align-items:flex-start; gap:3px; border:1px solid var(--border); border-radius:10px; padding:10px 16px; min-width:115px; background:var(--panel); backdrop-filter:blur(14px); }.destinations button span { font-size:.65rem; color:var(--gold); }.destinations button:hover,.destinations button.active { border-color:var(--coral); background:rgba(77,33,31,.85); }
.marker-layer { position:absolute; inset:0; pointer-events:none; z-index:2; }.marker { position:absolute; transform:translate(-50%,-50%); pointer-events:auto; padding:8px 15px; border:1px solid var(--border); border-radius:999px; color:var(--text); background:var(--panel); box-shadow:0 0 28px rgba(255,107,72,.2); white-space:nowrap; }.marker::before { content:'✦'; color:var(--coral); margin-right:8px; }.marker:hover { border-color:var(--gold); }
.world-panel { position:absolute; top:180px; right:4%; width:min(370px,90vw); max-height:calc(100% - 290px); overflow:auto; z-index:6; background:var(--panel); border:1px solid var(--border); border-radius:16px; padding:26px; backdrop-filter:blur(18px); box-shadow:0 20px 80px rgba(0,0,0,.4); }.world-panel[hidden],.world-error[hidden] { display:none; }.panel-close { float:right; border:0; background:transparent; font-size:1.6rem; line-height:1; }.panel-index { color:var(--gold); font-size:.7rem; letter-spacing:.12em; }.world-panel h2 { font-size:1.7rem; margin:8px 0 18px; }.world-panel h3 { font-size:1rem; margin:16px 0 3px; }.world-panel p { color:var(--muted); }.world-panel a { color:var(--gold); }.world-panel .content-link { display:block; padding:10px 0; border-top:1px solid var(--border); }.world-panel .content-link strong { display:block; color:var(--text); }.world-panel .content-link span { display:block; color:var(--muted); font-size:.85rem; } #panel-more { display:inline-block; margin-top:18px; }
.controls { position:absolute; bottom:max(26px,env(safe-area-inset-bottom)); left:4%; right:4%; display:flex; justify-content:space-between; align-items:end; gap:16px; z-index:4; }.control-copy { display:flex; flex-direction:column; color:var(--muted); gap:3px; font-size:.76rem; }.control-buttons { display:flex; gap:8px; }.control-buttons #tour { border-color:var(--gold); color:var(--gold); }
.touch-controls { display:none; position:absolute; left:4%; bottom:85px; z-index:5; text-align:center; touch-action:none; }.touch-controls button { width:46px; height:46px; border-radius:50%; border:1px solid var(--border); background:var(--panel); font-size:1.2rem; touch-action:none; }.touch-controls div { display:flex; gap:5px; margin-top:4px; }
.world-error { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; background:var(--bg); z-index:10; text-align:center; }.world-error a { color:var(--gold); border:1px solid var(--border); padding:12px 24px; border-radius:999px; }
@media (pointer:coarse) { .touch-controls { display:block; }.control-copy { display:none; } .controls { justify-content:flex-end; } }
@media (max-width:700px) { .brand span { display:none; }.world-bar { padding:16px 4%; }.world-heading { top:80px; }.world-heading h1 { font-size:1.7rem; }.world-heading p:last-child { font-size:.8rem; }.destinations { top:165px; left:4%; right:4%; }.destinations button { flex:1; min-width:0; padding:8px; font-size:.78rem; }.world-panel { top:230px; right:4%; max-height:calc(100% - 335px); width:min(360px,92vw); padding:18px; }.world-panel h2 { margin:4px 0 8px; font-size:1.3rem; }.world-panel h3 { margin:8px 0 2px; }.controls { bottom:max(15px,env(safe-area-inset-bottom)); }.control-buttons button { padding:9px 13px; }.touch-controls { bottom:80px; }.marker { font-size:.75rem; } }
@media (prefers-reduced-motion:reduce) { * { scroll-behavior:auto!important; } }

@media (max-width:700px) { .marker-layer { display:none; } }
@media (prefers-reduced-motion:reduce) { #tour { display:none; } }
/* 用途：在不改变操作布局的前提下强化界面层次与反馈。 */
.world-screen { background:linear-gradient(180deg,rgba(7,7,13,.42),transparent 30%,transparent 68%,rgba(7,7,13,.72)); }
.destinations button { transition:background .25s ease,border-color .25s ease,transform .25s ease,box-shadow .25s ease; }
.destinations button:hover,.destinations button.active { transform:translateY(-3px);box-shadow:0 8px 30px rgba(255,131,92,.12); }
.world-panel { border-color:rgba(255,208,149,.38);box-shadow:0 20px 80px rgba(0,0,0,.45),0 0 35px rgba(255,131,92,.08); }
.world-panel .content-link { transition:transform .2s ease,color .2s ease; }
.world-panel .content-link:hover { transform:translateX(6px);color:var(--gold); }
.marker { transition:border-color .2s ease,box-shadow .2s ease; }
.marker:hover { box-shadow:0 0 35px rgba(255,160,108,.38); }
@media (prefers-reduced-motion:reduce) { .destinations button,.world-panel .content-link,.marker { transition:none; } .destinations button:hover,.destinations button.active,.world-panel .content-link:hover { transform:none; } }
/* 用途：窄屏保留完整操作标签，避免控制按钮折行。 */
@media (max-width:380px) {
  .world-bar { gap:6px; }
  .brand { font-size:.95rem; white-space:nowrap; }
  .bar-actions { gap:6px; }
  .bar-actions button,.bar-actions .exit,.control-buttons button { padding:9px 10px; font-size:.78rem; white-space:nowrap; }
}
/* 用途：显示可访问的导览状态，并保留移动端场景操作空间。 */
.tour-status { position:absolute; right:4%; bottom:82px; z-index:4; max-width:min(340px,80vw); padding:9px 15px; border:1px solid var(--border); border-radius:999px; background:var(--panel); color:var(--gold); font-size:.8rem; pointer-events:none; }
.tour-status[hidden],#next-stop[hidden] { display:none; }
@media (max-width:700px) { .tour-status { bottom:72px; right:4%; font-size:.72rem; } }
/* 用途：小屏面板不遮挡方向键，导览提示留在方向键右侧。 */
@media (max-width:700px) and (pointer:coarse) {
  .world-panel { max-height:calc(100% - 430px); }
  .tour-status { left:calc(4% + 155px); right:4%; bottom:78px; max-width:none; text-align:right; padding:7px 9px; }
}