/* shell.css —— 手机外壳：机框、状态栏、主屏（时间 / 音乐 / 图标 / 图片 / dock）、页面切换。 */

/* =========================================================================
   四、手机外壳
   ========================================================================= */
.trpb-stage{ height:100%; display:grid; place-items:center; padding:20px; }

.trpb-phone{
  position:relative; box-sizing:content-box;
  width:390px; height:844px;
  border:8px solid var(--trpb-frame); border-radius:44px;
  background:var(--trpb-wallpaper); overflow:hidden;
  box-shadow:var(--trpb-frame-shadow);
}

@media (min-width:561px) and (max-height:900px){ .trpb-phone{ transform:scale(.9); } }

@media (min-width:561px) and (max-height:800px){ .trpb-phone{ transform:scale(.78); } }

@media (min-width:561px) and (max-height:700px){ .trpb-phone{ transform:scale(.66); } }

/* 机内视口：内容在里面滚，页面本身不滚 */
.trpb-viewport{ position:relative; width:100%; height:100%; overflow:hidden; }

.trpb-screen{ position:absolute; inset:0; display:flex; flex-direction:column; }

.trpb-screen--desktop{ transition:transform var(--trpb-t) ease, opacity var(--trpb-t) ease; }

.trpb-viewport.trpb-is-page-open .trpb-screen--desktop{ transform:translateX(-9%); opacity:.26; }

/* =========================================================================
   五、状态栏（44px）
   以后「外观」页要加「显示状态栏」开关时，只要给 html 加
   data-trpb-statusbar="off"，下面这条就会把它收掉 —— 不用返工。
   ========================================================================= */
.trpb-statusbar{
  flex:0 0 auto; height:44px; padding:0 18px;
  display:flex; align-items:center; justify-content:space-between;
  color:var(--trpb-text);
}

html[data-trpb-statusbar="off"] .trpb-statusbar{ display:none; }

.trpb-status-clock{
  font-family:var(--trpb-mono); font-size:var(--trpb-font-mid); font-weight:600;
  letter-spacing:.02em; text-shadow:var(--trpb-textshadow);
}

.trpb-status-right{ display:flex; align-items:center; gap:6px; color:var(--trpb-text); }

.trpb-status-right .trpb-i{ width:15px; height:15px; stroke-width:1.7; }

.trpb-status-battery .trpb-i{ stroke:var(--trpb-text); }

.trpb-battery-fill{ fill:var(--trpb-accent); stroke:none; }

/* =========================================================================
   六、主屏 —— 7 行 × 4 列正方格（79.5px，间距 12px，左右内边距 18px）
   行：1-2 时间 / 3 纯留白 40px / 4-5 音乐 + 图标A / 6-7 图标B + 图片 /
       8 弹性留白（把 dock 顶到底）/ 9 Dock
   ========================================================================= */
.trpb-home{
  flex:1 1 auto; min-height:0;
  padding:6px 18px 26px;
  display:grid;
  grid-template-columns:repeat(4, 79.5px);
  grid-template-rows:79.5px 79.5px 40px 79.5px 79.5px 79.5px 79.5px 1fr 79.5px;
  gap:12px;
}

/* ① 时间大组件：无背景无描边，文字直接落在壁纸上 */
.trpb-time{
  grid-area:1 / 1 / 3 / 5;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  background:transparent; border:0;
}

.trpb-clock{
  font-family:var(--trpb-mono); font-size:96px; line-height:1; font-weight:200;
  letter-spacing:.01em; color:var(--trpb-text); text-shadow:var(--trpb-textshadow);
  white-space:nowrap;
}

.trpb-date{
  margin-top:12px; font-size:19px; line-height:1; font-weight:400;
  color:var(--trpb-text-dim); white-space:nowrap; text-shadow:var(--trpb-textshadow);
}

/* ② 音乐组件：上半 3/4 圆盘 + 歌名，下半 1/4 三个键 */
.trpb-music{
  grid-area:4 / 1 / 6 / 3;
  display:flex; flex-direction:column;
  background:var(--trpb-surface); border:1px solid var(--trpb-line);
  border-radius:var(--trpb-radius); box-shadow:var(--trpb-shadow-1); overflow:hidden;
}

.trpb-music-top{
  position:relative; flex:3 1 0; min-height:0;
  display:flex; align-items:center; justify-content:center;
  padding:10px 8px 18px;
}

.trpb-disc{
  width:70px; height:70px; border-radius:50%;
  border:1px solid var(--trpb-line-strong);
  background:var(--trpb-disc-idle);
  background-image:none;
}

.trpb-music.trpb-is-playing .trpb-disc{ background-image:var(--trpb-disc-playing); }

.trpb-music-title{
  position:absolute; left:8px; right:8px; bottom:3px;
  font-size:var(--trpb-font-small); line-height:1.4; color:var(--trpb-text-dim); text-align:center;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

.trpb-music-ctl{
  flex:1 1 0; min-height:0; display:flex; align-items:center; justify-content:space-around;
  border-top:1px solid var(--trpb-line); padding:0 4px;
}

.trpb-key{
  appearance:none; background:none; border:0; padding:3px 8px; cursor:pointer;
  display:grid; place-items:center; border-radius:8px;
  transition:transform 120ms ease, background var(--trpb-t) ease;
}

.trpb-key:active{ transform:translateY(1px); background:var(--trpb-sunken); }

.trpb-key:focus-visible{ box-shadow:var(--trpb-ring); }

.trpb-key-icon{ width:18px; height:14px; display:block; }

.trpb-key-line{ fill:none; stroke:var(--trpb-text-dim); stroke-width:2; stroke-linecap:round; }

.trpb-key-fill{ fill:var(--trpb-text-dim); }

/* ③ App 图标：两组 2×2，图标块 42px，不带面板底板 */
.trpb-apps{
  display:grid; grid-template-columns:repeat(2, 1fr); grid-template-rows:repeat(2, 1fr);
  gap:8px;
}

.trpb-apps--a{ grid-area:4 / 3 / 6 / 5; }

.trpb-apps--b{ grid-area:6 / 1 / 8 / 3; }

.trpb-app{
  appearance:none; background:none; border:0; padding:0; cursor:pointer;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px;
  color:var(--trpb-text-dim);
}

.trpb-app-icon{
  width:42px; height:42px; border-radius:13px;
  background:var(--trpb-surface); border:1px solid var(--trpb-line);
  box-shadow:var(--trpb-shadow-1);
  display:grid; place-items:center; color:var(--trpb-icon);
  transition:transform 120ms ease, background var(--trpb-t) ease,
             border-color var(--trpb-t) ease, color var(--trpb-t) ease;
}

.trpb-app-icon .trpb-i{ width:20px; height:20px; }

.trpb-app-name{ font-size:var(--trpb-font-small); line-height:1.2; letter-spacing:.02em; }

.trpb-app:active .trpb-app-icon{
  transform:translateY(1px); background:var(--trpb-sunken);
  border-color:var(--trpb-accent-line); color:var(--trpb-accent);
}

.trpb-app:focus-visible .trpb-app-icon{ border-color:var(--trpb-accent); box-shadow:var(--trpb-ring); }

/* ④ 自定义图片组件：整块都是图，现在先占位 */
.trpb-pic{
  grid-area:6 / 3 / 8 / 5;
  display:flex; align-items:center; justify-content:center; text-align:center;
  border-radius:var(--trpb-radius);
  background:var(--trpb-surface-2);
  border:1px dashed var(--trpb-line-strong);
  box-shadow:var(--trpb-shadow-1);
  color:var(--trpb-text-dim); font-size:var(--trpb-font-small); line-height:1.6;
  overflow:hidden;
}

.trpb-pic-text{ padding:0 10px; }

/* ⑤ Dock：半透明 + 一点模糊，里面 4 个空槽位（这一期不响应点击） */
.trpb-dock{
  grid-area:9 / 1 / 10 / 5;
  display:flex; align-items:center; justify-content:space-around;
  padding:0 14px; border-radius:26px;
  background:var(--trpb-dock);
  border:1px solid var(--trpb-line);
  -webkit-backdrop-filter:var(--trpb-dock-blur);
  backdrop-filter:var(--trpb-dock-blur);
}

.trpb-dock-slot{
  width:46px; height:46px; border-radius:14px;
  border:1.5px dashed var(--trpb-line-strong);
  background:transparent;
}

/* =========================================================================
   八、页面（从右滑入 180ms）
   ========================================================================= */
.trpb-page{
  position:absolute; inset:0; display:flex; flex-direction:column;
  background:var(--trpb-wallpaper);
  transform:translateX(100%); opacity:0; pointer-events:none;
  transition:transform var(--trpb-t) ease, opacity var(--trpb-t) ease;
}

.trpb-page.trpb-is-open{ transform:translateX(0); opacity:1; pointer-events:auto; }

/* =========================================================================
   十四、手机上：铺满全屏
   ========================================================================= */
@media (max-width:560px){
  body{ display:block; }
  .trpb-stage{ display:block; padding:0; }
  .trpb-phone{
    width:100vw; height:100vh; height:100dvh;
    border:0; border-radius:0; box-shadow:none; transform:none;
  }
}