@charset "UTF-8";
/* =============================================================================
   模块：controlpad（玩法控制台）—— 右上角一体控制台 + 玩法下拉面板
   -----------------------------------------------------------------------------
   爷爷的要求：把底部那套「方向键 + 停止前往」搬进「玩法」下拉、放在右上角；
              把右上角原来的「声音开 / 暂时离开 / 横屏」三个散装胶囊合成一个控制台。
   载入顺序：index.html 里排在 /style.css、/mobile.css 之后（第三张样式表），
             同权重规则天然覆盖；跨权重的老规则用 .console-tools #id 这类组合选择器提权
             （例如 style.css 用 #rotate{display:none} 整段隐藏横屏按钮，必须 (1,1,0) 才放回来）。
   硬约束：零内联样式（站点 CSP = style-src 'self'）—— 样式标签、内联样式属性、JS 直接写样式，全都不许出现。
   单一真源：#play[aria-expanded] 决定面板显隐与箭头旋转，JS 只改这一个属性，CSS 不猜 class。
   动效：只用 opacity / transform；prefers-reduced-motion 时退化为纯淡入。
   ========================================================================== */

/* 01 控制台容器：在线胶囊 · 分隔线 · 图标按钮组 · 玩法按钮 --------------------- */
.console{
  position:relative;display:flex;align-items:center;gap:10px;
  min-width:0;max-width:100%;
  padding:5px 6px 5px 12px;border-radius:16px;
  background:#0e0b14c9;border:1px solid #b482ff24;
  box-shadow:0 10px 30px #00000059,inset 0 1px 0 #ffffff0a;
  -webkit-backdrop-filter:blur(14px) saturate(130%);
  backdrop-filter:blur(14px) saturate(130%);
}
.console .status{min-width:0;flex:0 1 auto;gap:8px}
.console .console-sep{flex:0 0 auto;width:1px;height:18px;background:#b482ff26}
.console .console-tools{display:flex;align-items:center;gap:6px;flex:0 0 auto}
/* 在线胶囊：桌面端也是小药丸（移动端规则在下面的 08 段整体重排） */
.console .status #online{
  display:inline-block;min-width:0;max-width:34vw;padding:5px 10px;border-radius:999px;
  background:#18112699;border:1px solid #b482ff1f;
  font-size:12px;line-height:1.35;color:#c8b9d6;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

/* 02 图标按钮（声音 / 横屏 / 离开）：36×36，圆角 11 --------------------------
   用 .console-tools #id 提权，压过 style.css 的 #sound{font-size:11px;padding:9px 11px}。 */
.console-tools #sound,.console-tools #rotate,.console-tools #leave{
  position:relative;display:inline-flex;align-items:center;justify-content:center;
  width:36px;height:36px;min-width:36px;min-height:36px;
  margin:0;padding:0;border-radius:11px;
  border:1px solid #b482ff26;background:#170f26b3;color:#cfc0dd;
  font-size:15px;line-height:1;letter-spacing:0;overflow:visible;max-width:none;
  transition:background .18s,border-color .18s,color .18s,transform .18s;
}
/* style.css 里 .dock,.app-status,.cam-pad,#rotate{display:none} 是 ID 权重，这里放回来 */
.console-tools #rotate{display:inline-flex}
.console .console-tools .cbtn:hover,.console-tools #sound:hover,.console-tools #rotate:hover,.console-tools #leave:hover{
  background:#241a36;border-color:#b482ff80;color:#ecdcff;
}
.console .console-tools .cbtn:active,.console .play-btn:active{transform:scale(.94)}
.console-tools #sound[aria-pressed="true"],.console-tools #rotate[aria-pressed="true"]{
  color:#ecdcff;border-color:#b482ff4d;
}
/* 静音：一朵斜杠盖在 ♪ 上（不换字形、不改按钮尺寸） */
.console-tools #sound.is-muted::after{
  content:"";position:absolute;left:50%;top:50%;width:22px;height:1.5px;border-radius:2px;
  background:#c3b0d8;transform:translate(-50%,-50%) rotate(-38deg);pointer-events:none;
}
.console button:focus-visible{outline-offset:2px}

/* 03 玩法按钮：主按钮 + chevron（展开时旋转 180°） ------------------------- */
.console .play-btn{
  position:relative;flex:0 0 auto;
  display:inline-flex;align-items:center;gap:7px;
  height:36px;padding:0 11px;margin:0;border-radius:11px;
  border:1px solid #b482ff3d;background:linear-gradient(115deg,#2a1c3d,#1b1229);
  color:#e6d8f6;font-size:12.5px;letter-spacing:.06em;line-height:1;
  transition:background .18s,border-color .18s,color .18s,transform .18s;
}
.console .play-btn:hover{border-color:#b482ff8c;background:linear-gradient(115deg,#3a2753,#241832)}
.console .play-btn[aria-expanded="true"]{border-color:#b482ff99;background:linear-gradient(115deg,#412c5e,#241832);color:#f4ecff}
.console .play-chev{
  font-size:9px;line-height:1;color:#b79ad6;transform-origin:50% 50%;
  transition:transform .22s cubic-bezier(.22,1,.36,1);
}
.console .play-btn[aria-expanded="true"] .play-chev{transform:rotate(180deg)}
/* 面板里有「停止前往」可点（= 正在自动行走）时，主按钮亮一颗小点（:has 不支持的浏览器静默忽略） */
body:has(#stop:not([hidden])) .console .play-btn::after{
  content:"";position:absolute;top:6px;right:6px;width:5px;height:5px;border-radius:50%;
  background:#c79bff;box-shadow:0 0 8px #b482ff99;
}

/* 04 玩法下拉面板：从「玩法」下方弹出，transform-origin: top right ------------- */
.console .play-menu{
  position:absolute;top:calc(100% + 8px);right:0;z-index:9;
  width:216px;min-width:0;padding:12px;
  display:flex;flex-direction:column;gap:10px;
  border-radius:16px;border:1px solid #b482ff2b;
  background:linear-gradient(180deg,#150f22f2,#0d0915f7);
  box-shadow:0 22px 50px #000000a6,inset 0 1px 0 #ffffff0d;
  -webkit-backdrop-filter:blur(18px) saturate(130%);
  backdrop-filter:blur(18px) saturate(130%);
  transform-origin:top right;
  opacity:0;visibility:hidden;pointer-events:none;transform:translateY(-6px) scale(.96);
  transition:opacity .18s ease,transform .22s cubic-bezier(.22,1,.36,1),visibility 0s linear .24s;
}
.console #play[aria-expanded="true"]~#play-menu{
  opacity:1;visibility:visible;pointer-events:auto;transform:none;
  transition:opacity .18s ease,transform .22s cubic-bezier(.22,1,.36,1),visibility 0s linear 0s;
}

/* 05 D-pad：↑ 独立一行居中，← ↓ → 第二行 ----------------------------------- */
.console .dpad{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.console .dpad-btn{
  display:inline-flex;align-items:center;justify-content:center;
  height:52px;padding:0;margin:0;border-radius:14px;
  border:1px solid #b482ff26;background:#1b132bb3;color:#d6c3ec;
  font-size:19px;line-height:1;
  transition:background .16s,border-color .16s,color .16s,transform .12s;
}
.console .dpad-btn:hover{background:#241a36;border-color:#b482ff6b;color:#f0e4ff}
.console .dpad-btn.pressed,.console .dpad-btn:active{
  background:#3a2753;border-color:#b482ff8c;color:#fff;transform:scale(.96);
}
.console .dpad-btn[data-y="-1"]{grid-column:2;grid-row:1}
.console .dpad-btn[data-x="-1"]{grid-column:1;grid-row:2}
.console .dpad-btn[data-y="1"]{grid-column:2;grid-row:2}
.console .dpad-btn[data-x="1"]{grid-column:3;grid-row:2}

/* 06 停止前往 / 行走文案 / 键盘提示 ---------------------------------------- */
.console .play-menu #stop{
  width:100%;height:40px;min-height:40px;margin:0;padding:0;border-radius:12px;
  font-size:12.5px;letter-spacing:.04em;
  border:1px solid #b482ff40;background:#241736e6;color:#d8c9e8;
}
.console .play-menu #stop:hover{background:#2f1d47;border-color:#b482ff80;color:#f2e8ff}
.console .play-menu .play-title{font-size:10px;letter-spacing:.2em;color:#8b789e}
.console .play-menu .play-hint{font-size:11px;line-height:1.5;color:#a294b4}
.console .play-menu small{display:block;font-size:9.5px;letter-spacing:.14em;color:#6f6280}
.console .play-menu .play-keys-touch{display:none}

/* The current trip remains readable while the controls are closed. */
.trip-summary{
  display:flex;align-items:center;gap:9px;width:max-content;max-width:100%;
  margin-top:14px;padding:9px 12px;border-radius:12px;
  border:1px solid #b482ff35;background:#100b1be8;
  box-shadow:0 6px 20px #0003;backdrop-filter:blur(12px);
  color:#d8c7ed;font-size:12px;line-height:1.5;font-variant-numeric:tabular-nums;
}
.trip-summary[hidden],body:not(.in-world) .trip-summary{display:none}
.trip-summary .trip-glyph{color:#bd8fee;font-size:16px;flex:none}
.trip-summary #trip-distance{font-weight:500;white-space:nowrap}
.trip-summary #trip-eta{color:#b09ac6;white-space:nowrap}

/* 07 降低动效：只淡入、不位移 ---------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  .console .play-menu{transform:none;transition:opacity .12s linear}
  .console #play[aria-expanded="true"]~#play-menu{transform:none;transition:opacity .12s linear}
  .console .play-chev,.console .console-tools .cbtn,.console .play-btn,.console .dpad-btn{transition:none}
}

/* 08 触屏 / 窄屏（竖屏）：控制台整体收紧，按钮 38px，键盘提示换成摇杆提示 ------ */
@media (max-width:700px), (pointer:coarse) and (hover:none) and (max-width:1024px){
  .console{gap:6px;padding:3px 5px 3px 9px;border-radius:14px}
  .console .console-sep{display:none}
  .console .console-tools{gap:5px}
  .console-tools #sound,.console-tools #rotate,.console-tools #leave{
    width:38px;height:38px;min-width:38px;min-height:38px;border-radius:12px;font-size:15px;
  }
  .console .play-btn{height:38px;padding:0 10px;font-size:11.5px;gap:5px;border-radius:12px}
  .console .status{gap:6px}
  .console .status #online{max-width:24vw;padding:6px 9px;font-size:11px}
  .console .play-menu{width:min(232px,calc(100vw - 24px));padding:10px;gap:8px}
  .console .dpad-btn{height:50px}
  .console .play-menu .play-keys{display:none}
  .console .play-menu .play-keys-touch{display:block}
}
@media (max-width:340px){
  .console-tools #sound,.console-tools #rotate,.console-tools #leave{width:34px;height:34px;min-width:34px;min-height:34px}
  .console .play-btn{height:34px;padding:0 8px}
  .console .console-tools{gap:4px}
  .console .status #online{max-width:20vw;padding:6px 8px}
}

/* 09 横屏双摇杆机型（触屏 且 高度 <=560px）：下拉永远落在 FAB 列的左边，
      避开右上 2×2 工具栈、右下视角摇杆与左上信息列（13 段那套布局）。 ------ */
@media (orientation:landscape) and (pointer:coarse) and (max-height:560px){
  .console{padding:2px 4px 2px 8px;gap:6px;border-radius:12px}
  .console-tools #sound,.console-tools #rotate,.console-tools #leave{
    width:38px;height:38px;min-width:38px;min-height:38px;border-radius:11px;
  }
  .console .play-btn{height:38px;padding:0 9px;border-radius:11px}
  .console .status #online{max-width:18vw;min-width:44px;padding:6px 9px}
  /* 104px = 2×fab(44) + gap(6) + 边距(12) + 间隙(10)：面板右缘正好贴住 FAB 列左边 */
  .console .play-menu{
    width:198px;padding:9px;gap:7px;
    top:calc(100% + 8px);right:calc(var(--fab-size,44px)*2 + var(--fab-gap,6px) + 22px);
  }
  .console .dpad{gap:6px}
  .console .dpad-btn{height:46px;border-radius:12px;font-size:18px}
  .console .play-menu #stop{height:36px;min-height:36px}
  .console .play-menu .play-hint{font-size:10.5px}
}
/* 10 桌面矮屏（<=820px 高）保护档：右侧工具列（▦ ＋ − ⌖）是垂直居中的，
      视口不够高时它的上半截会伸到下拉面板底下（实测 1280x720：面板 90~301，工具列 261~460）。
      这里把下拉整体让到工具列左边 —— 与横屏档同一手法，绝不让两个可点区域叠在一起。
      55px = 工具列宽 53 + 工具列右边距 36 + 间隙 8 − header 右边距 42。 */
@media (min-width:701px) and (pointer:fine) and (max-height:820px){
  .console .play-menu{right:55px}
}
.console .play-menu #stop:disabled{opacity:.55;cursor:wait}

/* 14.3 沉浸模式（W17）：手机 / 粗指针把两枚控件放大到好点，避开安全区 */
@media (pointer:coarse){
  #dv-zen-toggle{min-height:36px;font-size:13px}
  #dv-zen-exit{
    min-height:38px;padding:0 15px;font-size:13px;
    top:calc(env(safe-area-inset-top,0px) + 10px);
    right:calc(env(safe-area-inset-right,0px) + 10px);
  }
}