/* ===========================================================
 *  电力小镇 · 三维赛道入口  HUD / 反馈
 *  ----------------------------------------------------------
 *  设计约束：
 *   1. #world3d 默认 display:none —— WebGL 没跑起来之前，页面必须
 *      还是原来的横版 2D，不能闪一下黑屏。只有 html.w3d-on 才显示。
 *   2. #world3d 的 z-index 低于 .start-card(400) 和 .modal(500)，
 *      所以开场卡与知识板块弹层天然盖在 3D 场景之上，内容层零改动。
 *   3. HUD 全部 pointer-events:none，只有按钮/可点区域单独放开，
 *      否则会挡住鼠标拖动转视角。
 * =========================================================== */

:root{
  --w3d-glass: rgba(10, 21, 38, .74);
  --w3d-glass-2: rgba(14, 28, 48, .58);
  --w3d-line: rgba(168, 208, 255, .20);
  --w3d-ink: #eaf3ff;
  --w3d-ink-soft: #9fb6d0;
  --w3d-amber: #ffd45e;
  --w3d-teal: #4be0c0;
  --w3d-blue: #4aa3ff;
}

#world3d{
  display:none;
  position:fixed; inset:0; z-index:100;
  overflow:hidden;
  background:#8fd3ff;
  font-family:inherit;
  user-select:none; -webkit-user-select:none;
  touch-action:none;
}
html.w3d-on #world3d{ display:block; }
html.w3d-on #stage{ display:none !important; }
html.w3d-on .day-chip{ display:none; }
html.w3d-on .site-beian a{
  color:#dcecff;
  background:rgba(10,21,38,.55);
  border-radius:8px; padding:3px 9px;
  text-shadow:none;
}

#w3dCanvas{ position:absolute; inset:0; width:100%; height:100%; display:block; }
.w3d-vignette{
  position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(ellipse at 50% 46%, transparent 46%, rgba(6,16,32,.28) 100%);
}

/* ---------- HUD 通用 ---------- */
.w3d-top, .w3d-nav, .w3d-status, .w3d-mapbox,
.w3d-door, .w3d-toast, .w3d-compass, .w3d-touch{
  position:absolute; pointer-events:none; z-index:2;
}
.w3d-card{
  background:var(--w3d-glass);
  border:1px solid var(--w3d-line);
  border-radius:16px;
  box-shadow:0 10px 34px rgba(4,14,30,.32), inset 0 1px 0 rgba(255,255,255,.06);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
}

/* ---------- 顶栏 ---------- */
.w3d-top{
  top:0; left:0; right:0;
  display:flex; justify-content:space-between; align-items:flex-start;
  padding:18px 22px; gap:16px;
}
.w3d-brand{
  display:flex; align-items:center; gap:12px;
  padding:9px 16px 9px 9px;
  background:var(--w3d-glass);
  border:1px solid var(--w3d-line);
  border-radius:15px;
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
}
.w3d-brand-mark{
  background:var(--w3d-blue); color:#041224;
  font:900 13px/1 "Arial Black",Arial,sans-serif; letter-spacing:1px;
  padding:10px 10px; border-radius:10px;
}
.w3d-brand-text{ display:flex; flex-direction:column; gap:2px; }
.w3d-brand-text strong{ color:var(--w3d-ink); font-size:16px; letter-spacing:1.5px; }
.w3d-brand-text span{ color:var(--w3d-ink-soft); font-size:10.5px; letter-spacing:.6px; }

.w3d-topright{ display:flex; align-items:center; gap:10px; }
.w3d-time{
  padding:9px 13px; border-radius:12px;
  background:var(--w3d-glass-2); border:1px solid var(--w3d-line);
  color:var(--w3d-ink-soft); font-size:12px; font-weight:700;
  white-space:nowrap;
}
.w3d-mode{
  display:flex; align-items:center; gap:8px;
  padding:9px 15px; border-radius:12px;
  background:var(--w3d-glass); border:1px solid var(--w3d-line);
  color:var(--w3d-ink); font-size:13px; font-weight:800; letter-spacing:1px;
  transition:box-shadow .28s, border-color .28s;
}
.w3d-mode i{
  width:9px; height:9px; border-radius:50%;
  background:var(--w3d-amber); box-shadow:0 0 12px var(--w3d-amber);
}
.w3d-mode.walk i{ background:var(--w3d-teal); box-shadow:0 0 12px var(--w3d-teal); }
.w3d-mode.flash{ box-shadow:0 0 0 3px rgba(255,212,94,.35); border-color:var(--w3d-amber); }
.w3d-2d{
  pointer-events:auto; cursor:pointer;
  padding:9px 13px; border-radius:12px;
  background:var(--w3d-glass-2); border:1px solid var(--w3d-line);
  color:var(--w3d-ink-soft); font-size:12px; font-weight:700;
  font-family:inherit; transition:color .2s, background .2s;
}
.w3d-2d:hover{ color:#fff; background:rgba(74,163,255,.28); }

/* ---------- 板块导航 ---------- */
.w3d-nav{
  top:92px; right:22px;
  display:flex; flex-direction:column; gap:6px;
  max-height:calc(100vh - 360px); overflow:hidden;
}
.w3d-nav-item{
  pointer-events:auto; cursor:pointer;
  display:flex; align-items:center; gap:9px;
  padding:7px 11px; border-radius:11px;
  /* 底色要够实：路灯杆/铁塔会从场景里穿过这一列，太透会压不住文字 */
  background:rgba(10, 21, 38, .82);
  border:1px solid rgba(168,208,255,.16);
  color:var(--w3d-ink-soft); font-size:11.5px; font-weight:700;
  white-space:nowrap; text-align:left; font-family:inherit;
  transition:transform .18s, color .18s, background .18s, border-color .18s;
}
.w3d-nav-item:hover{ transform:translateX(-4px); color:#fff; }
.w3d-nav-item .nd{
  width:9px; height:9px; border-radius:50%; flex:none;
  background:var(--nc); box-shadow:0 0 8px var(--nc);
}
.w3d-nav-item.done .nd{ box-shadow:0 0 0 2px rgba(255,255,255,.85), 0 0 10px var(--nc); }
.w3d-nav-item.target{
  color:#fff; background:rgba(74,163,255,.28);
  border-color:rgba(120,190,255,.6);
  transform:translateX(-6px);
}
.w3d-nav-item.near{ color:#fff; }

/* ---------- 门口提示 ---------- */
.w3d-door{
  left:50%; bottom:132px; transform:translate(-50%, 14px);
  min-width:220px; padding:13px 20px 14px;
  text-align:center; border-radius:16px;
  background:var(--w3d-glass); border:1px solid rgba(255,212,94,.42);
  box-shadow:0 12px 40px rgba(4,14,30,.4), 0 0 26px rgba(255,212,94,.14);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  opacity:0; visibility:hidden;
  transition:opacity .22s, transform .22s, visibility .22s;
}
.w3d-door.show{ opacity:1; visibility:visible; transform:translate(-50%, 0); }
.w3d-door-name{ color:var(--w3d-ink); font-size:17px; font-weight:800; letter-spacing:1.2px; }
.w3d-door-hint{
  margin-top:5px; color:var(--w3d-amber); font-size:12px; font-weight:700; letter-spacing:.5px;
}
.w3d-door-hint b{
  display:inline-block; min-width:20px; padding:1px 6px; margin-right:4px;
  border-radius:5px; background:rgba(255,212,94,.18);
  border:1px solid rgba(255,212,94,.45); color:#fff;
}

/* ---------- toast ---------- */
.w3d-toast{
  left:50%; top:23%; transform:translate(-50%, -8px);
  padding:11px 20px; border-radius:13px;
  background:rgba(8,18,34,.88); border:1px solid var(--w3d-line);
  color:var(--w3d-ink); font-size:13.5px; font-weight:700; letter-spacing:.6px;
  box-shadow:0 12px 34px rgba(4,14,30,.38);
  opacity:0; visibility:hidden; white-space:nowrap;
  transition:opacity .2s, transform .2s, visibility .2s;
}
.w3d-toast.show{ opacity:1; visibility:visible; transform:translate(-50%, 0); }
.w3d-toast.warn{ border-color:rgba(255,150,110,.6); color:#ffd9c8; }
.w3d-toast.ok{ border-color:rgba(75,224,192,.55); color:#c9fff1; }

/* ---------- 左下：速度 + 键位 ---------- */
.w3d-status{
  left:22px; bottom:22px; width:236px;
  padding:14px 16px 13px; border-radius:16px;
  background:var(--w3d-glass); border:1px solid var(--w3d-line);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
}
.w3d-speed{ display:flex; align-items:baseline; gap:6px; }
.w3d-speed span{
  color:var(--w3d-ink); font:800 34px/1 "DIN Alternate",Arial,sans-serif;
  letter-spacing:1px; font-variant-numeric:tabular-nums;
}
.w3d-speed small{ color:var(--w3d-ink-soft); font-size:11px; font-weight:700; }
.w3d-speedbar{
  margin:9px 0 11px; height:6px; border-radius:6px;
  background:rgba(255,255,255,.11); overflow:hidden;
}
.w3d-speedbar i{
  display:block; height:100%; width:0%; border-radius:6px;
  background:linear-gradient(90deg, var(--w3d-blue), var(--w3d-amber));
  transition:width .1s linear;
}
.w3d-keys{ display:flex; flex-wrap:wrap; gap:5px 7px; }
.w3d-keys span{
  color:var(--w3d-ink-soft); font-size:10.5px; font-weight:600; line-height:1.5;
}
.w3d-keys b{
  display:inline-block; padding:1px 5px; margin-right:3px;
  border-radius:4px; background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.17); color:#fff;
  font-size:10px; font-weight:800;
}

/* ---------- 右下：小地图 ---------- */
.w3d-mapbox{
  right:22px; bottom:22px;
  padding:10px; border-radius:18px;
  background:var(--w3d-glass); border:1px solid var(--w3d-line);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
}
#w3dMap{ display:block; width:196px; height:196px; border-radius:11px; }
.w3d-maplabel{
  margin-top:7px; text-align:center;
  color:var(--w3d-ink-soft); font-size:10.5px; font-weight:700; letter-spacing:.4px;
}

/* ---------- 导航方位 ---------- */
.w3d-compass{
  left:50%; top:88px; transform:translateX(-50%);
  display:flex; align-items:center; gap:9px;
  padding:8px 15px; border-radius:12px;
  background:var(--w3d-glass-2); border:1px solid var(--w3d-line);
  color:var(--w3d-ink-soft); font-size:12px; font-weight:700;
  opacity:0; visibility:hidden; transition:opacity .25s, visibility .25s;
}
.w3d-compass.show{ opacity:1; visibility:visible; }
.w3d-compass .c-arrow{ color:var(--w3d-amber); font-size:19px; line-height:1; }
.w3d-compass .c-name{ color:#fff; }
.w3d-compass .c-dist{ color:var(--w3d-ink-soft); font-variant-numeric:tabular-nums; }

/* ---------- 开场卡：3D 版换成深色玻璃 ---------- */
html.w3d-on .start-card{ background:rgba(6,16,32,.62); backdrop-filter:blur(9px); }
html.w3d-on .sc-inner{
  background:linear-gradient(160deg, rgba(20,38,62,.97), rgba(9,20,36,.97));
  border:1px solid rgba(168,208,255,.22);
  box-shadow:0 26px 70px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.08);
  color:var(--w3d-ink);
}
html.w3d-on .sc-badge{ background:var(--w3d-amber); color:#231a04; }
html.w3d-on .sc-inner h1{ color:#fff; }
html.w3d-on .sc-inner p{ color:#b9cee6; }
html.w3d-on .sc-inner p b{ color:var(--w3d-amber); }
html.w3d-on .sc-progress{
  background:rgba(74,163,255,.12); border-color:rgba(120,190,255,.35); color:#a9d2ff;
}
html.w3d-on .sc-btn{
  background:linear-gradient(180deg, #ffd45e, #f2b12e);
  color:#2a1d00; box-shadow:0 5px 0 #a9760f;
}
html.w3d-on .sc-btn:active{ box-shadow:0 1px 0 #a9760f; }

/* ---------- 触屏控制 ---------- */
.w3d-touch{ display:none; }
html.has-touch .w3d-touch{
  display:flex; left:0; right:0; bottom:16px;
  justify-content:space-between; align-items:flex-end;
  padding:0 16px; z-index:4;
}
.w3d-pad{
  display:grid; grid-template-columns:repeat(3, 50px); grid-template-rows:repeat(2, 50px);
  gap:5px; pointer-events:auto;
}
.w3d-pad button, .w3d-acts button{
  pointer-events:auto; cursor:pointer; font-family:inherit;
  background:rgba(10,21,38,.76); border:1px solid rgba(168,208,255,.3);
  color:#eaf3ff; border-radius:13px; font-size:17px; font-weight:800;
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  -webkit-tap-highlight-color:transparent;
}
.w3d-pad button:active, .w3d-acts button:active{ background:rgba(74,163,255,.55); }
.w3d-pad button:nth-child(1){ grid-column:2; grid-row:1; }
.w3d-pad button:nth-child(2){ grid-column:1; grid-row:2; }
.w3d-pad button:nth-child(3){ grid-column:2; grid-row:2; }
.w3d-pad button:nth-child(4){ grid-column:3; grid-row:2; }
.w3d-acts{ display:flex; flex-direction:column; gap:8px; pointer-events:auto; }
.w3d-acts button{ font-size:12.5px; padding:12px 14px; letter-spacing:1px; }
.w3d-acts button[data-act="brake"]{ background:rgba(255,120,90,.20); border-color:rgba(255,150,120,.55); color:#ffd9c8; }
.w3d-acts button[data-act="enter"]{ background:rgba(255,212,94,.22); border-color:rgba(255,212,94,.6); color:#fff3cd; }

/* 触屏时把状态卡 / 小地图让开，别压着虚拟按键 */
@media (pointer:coarse){
  html.has-touch .w3d-status{ bottom:132px; width:196px; padding:10px 13px; }
  html.has-touch .w3d-status .w3d-keys{ display:none; }
  html.has-touch .w3d-mapbox{ bottom:132px; right:14px; }
  html.has-touch #w3dMap{ width:120px; height:120px; }
  html.has-touch .w3d-maplabel{ display:none; }
  html.has-touch .w3d-nav{ display:none; }
}

/* ---------- 窄屏 ---------- */
@media (max-width: 760px){
  .w3d-top{ padding:12px; }
  .w3d-brand-text span{ display:none; }
  .w3d-time{ display:none; }
  .w3d-status{ left:12px; bottom:14px; width:180px; padding:11px 13px; }
  .w3d-mapbox{ right:12px; bottom:14px; padding:7px; }
  #w3dMap{ width:132px; height:132px; }
  .w3d-nav{ top:74px; right:12px; }
  .w3d-nav-item{ font-size:0; padding:7px; gap:0; }
  .w3d-nav-item .nd{ width:11px; height:11px; }
  .w3d-door{ bottom:110px; min-width:180px; padding:10px 15px; }
  .w3d-compass{ top:70px; font-size:11px; }
}