/* ══════════════════════════════════════════════════════════════
   GESTO98 · 版式 / Layout
   见 docs/DESIGN.md §5。**移动优先**：基础样式就是手机竖屏，
   桌面是 min-width 往上加的增强态，不是反过来。
   ══════════════════════════════════════════════════════════════ */

/* ─────────────── 桌面外壳 ─────────────── */
body{
  display:grid;
  grid-template-rows:minmax(0,1fr) auto;    /* 桌面 + 任务栏 */
  /* 列也要显式钳住：默认的 auto 列会被任务栏的 min-content 宽度撑开，
     360px 的机器上整页就横向溢出 21px。 */
  grid-template-columns:minmax(0,1fr);
}

#desktop{
  position:relative;min-height:0;overflow:hidden;
  /* 刘海机型：壁纸铺到状态栏底下，窗口从安全区开始 */
  padding:var(--safe-t) var(--safe-r) 0 var(--safe-l);
  display:grid;grid-template-columns:minmax(0,1fr);
}

/* 手机：窗口占满桌面，无外边距、无圆角 —— 就是一个最大化的 Win7 窗口 */
#mainWin{border-radius:0;min-height:0}
#mainWin::after{border-radius:0}

/* 次窗口（排行榜）盖在主窗口上 */
.win.overlay{
  position:absolute;z-index:600;
  inset:var(--safe-t) var(--safe-r) 0 var(--safe-l);
  border-radius:0;
}
.win.overlay::after{border-radius:0}

/* ─────────────── 桌面图标（P1，仅桌面尺寸可见） ─────────────── */
#deskIcons{display:none}
.desk-icon{
  width:82px;display:flex;flex-direction:column;align-items:center;gap:6px;
  padding:6px 4px;border:1px dotted transparent;border-radius:0;
  background:none;cursor:pointer;font:var(--fs-xs)/1.35 var(--font);color:#fff;
  text-align:center;
  text-shadow:1px 1px 0 #071421,0 0 3px #071421;
}
.desk-icon:hover,.desk-icon:focus-visible{
  background:rgba(12,45,74,.54);border-color:rgba(235,243,220,.86);outline:none;
}
.desk-icon.on{background:rgba(12,45,74,.68);border-color:rgba(235,243,220,.92)}
.desk-icon .glyph{
  width:42px;height:42px;display:grid;place-items:center;
  filter:drop-shadow(2px 2px 0 rgba(0,0,0,.48));
}
.desk-icon .glyph svg{width:40px;height:40px;display:block;image-rendering:pixelated}

/* ─────────────── 主窗口：上下分屏（核心版式） ─────────────── */
#wizardView,#splitView{display:none;min-height:0}
body[data-stage="welcome"] #wizardView,
body[data-stage="result"]  #wizardView{display:grid}
body[data-stage="warmup"]  #splitView,
body[data-stage="race"]    #splitView{display:grid}

#splitView{
  /* 边长由 square-layout.js 根据宿主实际可用区域计算。摄像头和梗图都保持
     1:1，不再随着宽窗口被拉成看不清内容的横条。240px 是 JS 首帧前的回退。 */
  --pane-size:240px;
  grid-template-columns:minmax(0,1fr);
  grid-template-rows:var(--pane-size) auto var(--pane-size);
  align-content:center;gap:var(--s2);padding:var(--s2);overflow:hidden;
  background:linear-gradient(#e9f2f9,#d8e8f4);
}
#splitView > #camPane,
#splitView > #memePane{
  width:var(--pane-size);height:var(--pane-size);justify-self:center;
}

/* 矮横屏若仍上下堆叠，两个正方形会小得无法使用。此时保持 1:1，改成
   摄像头 / 控制条 / 梗图三列，充分利用横向空间。 */
@media (orientation:landscape) and (max-height:560px){
  #splitView{
    grid-template-columns:var(--pane-size) minmax(200px,1fr) var(--pane-size);
    grid-template-rows:minmax(0,1fr);align-items:center;
  }
  #camPane{grid-column:1}
  #hud{grid-column:2}
  #memePane{grid-column:3}
}

/* ─────────────── 向导版式（welcome / result） ─────────────── */
#wizardView{grid-template-rows:auto minmax(0,1fr)}
.wizard-side{
  background:linear-gradient(160deg,#1a6fb5,#0a3e70);
  color:#fff;border-bottom:1px solid #0a3e70;
  padding:var(--s2) var(--s3);
  display:flex;align-items:center;gap:var(--s3);
}
.wizard-main{
  padding:var(--s4);overflow:auto;min-height:0;
  -webkit-overflow-scrolling:touch;
}
.wizard-main h2{font-size:var(--fs-lg);color:var(--text-title);text-wrap:balance}
.wizard-main .lead{font-size:var(--fs-sm);color:var(--text-soft)}

/* 步骤条：手机上横排在侧栏里，桌面上竖排在侧栏底部 */
#steps{display:flex;gap:var(--s2);margin-left:auto;font-size:var(--fs-xs);color:#cfe6f8}
#steps .step{display:flex;align-items:center;gap:5px;white-space:nowrap}
#steps .step span{display:none}
#steps .step i{
  width:17px;height:17px;border-radius:50%;flex:none;font-style:normal;
  display:grid;place-items:center;font-size:9px;font-weight:700;
  background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.4);color:#fff;
}
#steps .step.cur{color:#fff;font-weight:700}
#steps .step.cur span{display:inline}
#steps .step.cur i{background:#fff;color:var(--blue-900);border-color:#fff}
#steps .step.done i{background:var(--ok);border-color:var(--ok-2)}

.panel{display:none}
body[data-stage="welcome"] .panel[data-panel="welcome"],
body[data-stage="result"]  .panel[data-panel="result"]{
  display:flex;flex-direction:column;gap:var(--s3);
}

/* ─────────────── 分阶段的 chrome ───────────────
   工具条（模式 / 缩放 / 存图）只在有摄像头的两步出现；
   命令条按阶段换按钮；比赛时整条收起 —— 跳过键在 HUD 里。 */
body[data-stage="welcome"] #mainToolbar,
body[data-stage="result"]  #mainToolbar,
body[data-stage="race"]    #cmdbar{display:none}

/* 手机工具条里已经在 HUD 提供了更好点按的存图球。顶栏再放一个 Save 会把
   390px 宽度撑出视口，用户必须横向滚动才看得到；窄屏只保留模式和缩放。 */
@media (max-width:480px){
  #mainToolbar{padding-inline:var(--s1)}
  #mainToolbar #saveBtn{display:none}
}

#cmdbar [data-only]{display:none}
body[data-stage="welcome"] #cmdbar [data-only~="welcome"],
body[data-stage="warmup"]  #cmdbar [data-only~="warmup"],
body[data-stage="result"]  #cmdbar [data-only~="result"]{display:inline-flex}

/* 窄屏上命令条那句隐私提示会把按钮挤到第二行。
   同一句话在状态栏和向导页里都已经有了，这里直接省掉。 */
#cmdbar .hint{display:none}
@media (min-width:560px){
  body[data-stage="welcome"] #cmdbar .hint[data-only~="welcome"],
  body[data-stage="warmup"]  #cmdbar .hint[data-only~="warmup"]{display:inline-flex}
}

/* ─────────────── 断点：≥720px 起变回「桌面上的窗口」 ─────────────── */
@media (min-width:720px){
  #wizardView{grid-template-rows:minmax(0,1fr);grid-template-columns:158px minmax(0,1fr)}
  .wizard-side{
    flex-direction:column;align-items:stretch;gap:var(--s3);
    padding:var(--s4) var(--s3);
    border-bottom:0;border-right:1px solid #0a3e70;
  }
  #steps{flex-direction:column;gap:6px;margin-left:0;margin-top:auto}
  #steps .step span{display:inline}
  .wizard-main{padding:var(--s5)}
}

@media (min-width:900px){
  #desktop{
    display:flex;align-items:center;justify-content:center;
    padding:calc(var(--safe-t) + 40px) var(--s5) var(--s5);
  }
  #mainWin{
    width:min(1080px,92vw);height:min(860px,100%);
    border-radius:var(--radius-win);
  }
  #mainWin::after{border-radius:var(--radius-win)}
  .win.overlay{
    inset:auto;position:absolute;
    width:min(620px,88vw);max-height:min(620px,80%);
    top:calc(var(--safe-t) + 72px);right:6vw;
    border-radius:var(--radius-win);
  }
  .win.overlay::after{border-radius:var(--radius-win)}

  #deskIcons{
    display:flex;flex-direction:column;gap:var(--s2);flex-wrap:wrap;
    position:absolute;top:calc(var(--safe-t) + var(--s4));left:var(--s4);
    max-height:calc(100% - var(--s6));z-index:1;
  }
}

/* ─────────────── 最大化 / 大屏模式（body.tv） ─────────────── */
body.tv .taskbar,
body.tv #deskIcons,
body.tv #boardWin{display:none}
body.tv #desktop{
  padding:var(--safe-t) 0 0;
  /* place-items 必须显式改回 stretch：≥900px 那条规则把 align-items 设成了 center，
     grid 也认这个属性，窗口会变成内容高度并且上下溢出（标题栏顶到视口外面去） */
  display:grid;place-items:stretch;
}
body.tv #mainWin{width:auto;height:auto;border-radius:0}
body.tv #mainWin::after{border-radius:0}
body.tv .win-status{display:none}
/* 只有比赛题目放到投影级字号（1920 上 ≥ 48px）。
   这里不能写 `#hud .vb-target` —— 那条选择器也会命中热身态的 #label，
   把「No face — come closer」也撑到 88px。 */
body.tv #targetName{font-size:clamp(40px,6vw,88px)}
body.tv #label,body.tv #raceLabel{font-size:clamp(22px,3.2vw,40px)}
/* 投影上玻璃 + 中文字容易发糊：大屏强制不透明标题栏 */
body.tv .win-title{backdrop-filter:none;-webkit-backdrop-filter:none;background:var(--glass-flat)}

/* ─────────────── 3-2-1 倒计时（屏幕中央的无边框系统提示） ─────────────── */
#count{
  position:fixed;inset:0;z-index:1050;display:none;place-items:center;pointer-events:none;
}
#count.on{display:grid}
#count span{
  min-width:132px;padding:var(--s4) var(--s6);
  display:grid;place-items:center;
  font:700 clamp(64px,18vw,112px)/1 var(--font-num);color:var(--text-title);
  background:rgba(226,240,252,.92);
  border:1px solid var(--glass-edge-in);border-radius:var(--radius-panel);
  box-shadow:0 0 0 1px var(--glass-edge-out),0 14px 38px rgba(0,0,0,.5);
  text-shadow:0 2px 0 #fff;
}
@media (prefers-reduced-motion:no-preference){
  #count span{animation:countPop 320ms var(--ease)}
}
@keyframes countPop{from{opacity:0;transform:scale(.86)}to{opacity:1;transform:none}}