/* V1 前台骨架 —— 双适应：桌面=开发台三段布局；手机=铺满+工具栏让位 */
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; background: #111; color: #ccc;
  font: 13px/1.5 system-ui, sans-serif; overflow: hidden; }

body { display: flex; flex-direction: column; }

/* ── 顶栏（桌面开发台）── */
#sizebar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 8px 12px; background: #1b1b1f; border-bottom: 1px solid #333; }
#sizebar .label { color: #888; }
.size-btn { background: #26262c; color: #ddd; border: 1px solid #444;
  border-radius: 4px; padding: 4px 10px; cursor: pointer; font-size: 12px; }
.size-btn.active { background: #0a5; color: #fff; border-color: #0a5; }
#size-readout { margin-left: auto; color: #0ff; font-family: monospace; }

/* ── 舞台与视窗框 ── */
#stage { flex: 1; display: flex; align-items: center; justify-content: center;
  min-height: 0; overflow: auto; padding: 12px; }

#frame { position: relative; background: #000; touch-action: none;
  border: 1px solid #3a3a44; resize: both; overflow: hidden;
  min-width: 240px; min-height: 240px; flex: none; }

#frac { display: block; width: 100%; height: 100%; background: #000; }

#status { position: absolute; top: 6px; left: 8px; color: #0ff;
  font: 11px/1.5 monospace; text-shadow: 0 0 3px #000; pointer-events: none;
  white-space: pre-line; max-width: calc(100% - 16px);
  background: rgba(0,0,0,0.42); padding: 3px 8px; border-radius: 4px; }

/* ── 底栏 ── */
#actionbar { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap;
  padding: 8px 12px; background: #1b1b1f; border-top: 1px solid #333; }
#actionbar button { background: #26262c; color: #ddd; border: 1px solid #444;
  border-radius: 4px; padding: 5px 16px; cursor: pointer; font-size: 12px;
  touch-action: manipulation; }
#actionbar button:hover { background: #333; }

/* ── 手机全屏钮（底栏；桌面走顶栏）+ 全屏退出把手 ── */
#btn-fsmobile { display: none; }
body.mobile #btn-fsmobile { display: block; }
#fs-handle { position: fixed; bottom: 58px; left: 50%; transform: translateX(-50%);
  width: 150px; height: 22px; border-radius: 11px; z-index: 6; display: none;
  background: rgba(20,20,24,0.72); border: 1px solid #444;
  color: #aaa; font-size: 11px; text-align: center; line-height: 20px;
  touch-action: none; cursor: pointer; }
body.mobile.fsm #fs-handle { display: block; }

/* ── 信息面板 ── */
#info-panel { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);
  background: rgba(18,18,22,0.96); border: 1px solid #444; border-radius: 8px;
  padding: 16px 20px; min-width: 260px; z-index: 10; }
.info-row { display: flex; justify-content: space-between; gap: 24px;
  padding: 4px 0; border-bottom: 1px dashed #333; }
.info-row span { color: #888; }
.info-row b { color: #fff; font-family: monospace; font-weight: normal; }
#btn-info-close { margin-top: 12px; width: 100%; background: #26262c;
  color: #ddd; border: 1px solid #444; border-radius: 4px; padding: 5px; cursor: pointer; }

/* ── 沉浸形态（.mobile 设备自动 / .filled 全屏手动——同一套布局规则）── */
body.filled #sizebar, body.mobile #sizebar { display: none; }  /* 档位是桌面开发工具 */
body.filled #stage, body.mobile #stage { padding: 0; }
body.filled #frame, body.mobile #frame { border: none; resize: none;
  width: 100% !important; height: 100% !important; min-width: 0; min-height: 0; }
body.filled #actionbar, body.mobile #actionbar { position: fixed; left: 0; right: 0; bottom: 0;
  flex-wrap: nowrap; gap: 4px;
  background: rgba(20,20,24,0.82); backdrop-filter: blur(4px);
  padding: 6px 8px; padding-bottom: calc(6px + env(safe-area-inset-bottom)); }
body.filled #actionbar button, body.mobile #actionbar button {
  flex: 1 1 auto; padding: 8px 2px; font-size: 11px; }
body.filled #status, body.mobile #status { font-size: 11px; }

/* ── 参数滑块面板（桌面右侧；手机底部抽屉）── */
#param-panel { position: fixed; top: 52px; right: 0; bottom: 52px; width: 260px;
  overflow-y: auto; background: rgba(18,18,22,0.95); border-left: 1px solid #444;
  padding: 10px 14px; z-index: 5; }
.pgroup-title { color: #8cf; font-weight: bold; font-size: 12px;
  margin: 10px 0 4px; border-bottom: 1px solid #333; padding-bottom: 3px; }
.phead { display: flex; justify-content: space-between; align-items: center;
  padding-bottom: 6px; border-bottom: 1px solid #333; }
.phead span { color: #8cf; font-weight: bold; font-size: 12px; }
.phead button { background: #26262c; color: #ddd; border: 1px solid #444;
  border-radius: 4px; padding: 4px 12px; cursor: pointer; font-size: 12px;
  touch-action: manipulation; }
.prow { display: grid; grid-template-columns: 58px 1fr 34px; align-items: center;
  gap: 6px; padding: 3px 0; font-size: 12px; }
.prow span { color: #999; }
.prow b { color: #0f0; font-family: monospace; font-weight: normal; text-align: right; }
.prow input[type=range] { width: 100%; cursor: pointer; touch-action: manipulation; }

body.mobile #param-panel { top: auto; left: 0; right: 0; bottom: 0;
  width: 100%; max-height: 46vh; border-left: none; border-top: 1px solid #444;
  padding-bottom: 60px; }  /* 避开悬浮底栏 */

/* ── 坐标跳转对话框 ── */
#goto-panel { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);
  background: rgba(18,18,22,0.96); border: 1px solid #444; border-radius: 8px;
  padding: 14px 18px; min-width: 300px; z-index: 11; }
.gp-row { display: grid; grid-template-columns: 64px 1fr; gap: 8px; padding: 4px 0; align-items: center; }
.gp-row span { color: #888; font-size: 12px; }
.gp-row input { background: #111; color: #0f0; border: 1px solid #444; border-radius: 4px;
  padding: 5px 8px; font: 12px monospace; width: 100%; }
.gp-btns { display: flex; gap: 8px; margin-top: 10px; }
.gp-btns button { flex: 1; background: #26262c; color: #ddd; border: 1px solid #444;
  border-radius: 4px; padding: 6px; cursor: pointer; }
#gp-go { background: #aa0; color: #000; font-weight: bold; }