/* 《余温》样式：布局、明度变量、冰刻控件。
   画面全部由 canvas 绘制（js/1-ice.js 与各页），这里只管文字、排布与「冰上刻的槽」。 */

:root{
  /* 亮底高调：最亮 #F8FBFC ↔ 最暗 #0A1E26 */
  --ice-0:#F8FBFC; --ice-1:#E4EDF0; --ice-2:#CFDFE6; --ice-3:#B4CBD7;
  --ice-4:#8FAEC1; --ice-5:#5C7E92;
  --deep-0:#2A4E5C; --deep-1:#14313D; --deep-2:#0A1E26;
  --cold:#2FA6B8;      /* 世界：冰与水，唯一的冷饱和 */
  --warm-1:#D8362A;    /* 你：心跳 */
  --warm-2:#FF6A4A;    /* 新的热痕 */
  --lamp-1:#F0A03C; --lamp-2:#FFE0A8;
  --ink:#23343C; --ink-2:#4C6673; --ink-3:#77909C;
  --seep:0;            /* 冰槽渗出的青：由补间层写入 */
  --slotH:48px;
  --r:2px;
  --safe-t:8px; --safe-b:8px;
}
@supports (padding:env(safe-area-inset-top)){
  :root{ --safe-t:calc(env(safe-area-inset-top,0px) + 6px); --safe-b:calc(env(safe-area-inset-bottom,0px) + 6px); }
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%;margin:0;overflow:hidden;background:var(--ice-1);color:var(--ink);
  font:400 15px/1.5 -apple-system,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,sans-serif;
  font-variant-numeric:tabular-nums;letter-spacing:.01em;
  -webkit-user-select:none;user-select:none;overscroll-behavior:none;touch-action:manipulation}

#app{position:fixed;inset:0;overflow:hidden}
canvas{display:block}
#bg{position:absolute;inset:0;z-index:0}
#ui{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;
  padding:var(--safe-t) 0 var(--safe-b);pointer-events:none}
/* 只有「活着的那一页」里的东西能接事件：别的页面都还叠在下面（切页不用 display:none），
   但它们绝不能抢走点击 */
.screen.live .lakeList,.screen.live .codexList,.screen.live .setRows,
.screen.live button,.screen.live .cxHead{pointer-events:auto}
#mask{position:absolute;inset:0;z-index:3;pointer-events:none}
#ovl{position:absolute;inset:0;z-index:4;pointer-events:none}
#ovl>*{pointer-events:auto}

/* ── 顶栏：跨页保留的全局元素，切页只做形变 ── */
#bar{flex:0 0 auto;height:40px;display:flex;align-items:center;gap:8px;padding:0 20px;
  opacity:var(--bo,0)}
#crumb{flex:1 1 auto;min-width:0;font-size:13px;color:var(--ink-2);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#crumb #segName{opacity:.9}

/* ── 冰上刻的槽（唯一的控件形态） ── */
.slot{
  position:relative;appearance:none;border:0;margin:0;cursor:pointer;
  height:var(--slotH);padding:0 18px;border-radius:var(--r);
  font:inherit;font-size:15px;letter-spacing:.06em;color:var(--ink);
  background:linear-gradient(180deg,#D9E5EA 0%,#EDF4F6 62%,#DFEAEE 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),      /* 槽上缘受光 */
    inset 0 -1px 0 rgba(92,126,146,.30),      /* 槽底阴面 */
    inset 0 2px 6px rgba(35,52,60,.10),       /* 槽的深度 */
    0 1px 0 rgba(255,255,255,.55);
  transition:none;
}
.slot::after{ /* 按下时槽里渗出的青：由 --seep 驱动 */
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:radial-gradient(120% 150% at 50% 120%,rgba(47,166,184,.42),rgba(47,166,184,0) 62%);
  opacity:calc(var(--seep) * .9);
}
.slot>span,.slot>b{position:relative;z-index:1}
.slot b{font-weight:600;font-size:13px;margin-left:8px;color:var(--warm-1);
  border-left:1px solid rgba(35,52,60,.18);padding-left:8px}
.slot:disabled{color:var(--ink-3);box-shadow:inset 0 1px 0 rgba(255,255,255,.6),inset 0 -1px 0 rgba(92,126,146,.18)}
.slot.primary{height:56px;font-size:19px;letter-spacing:.22em;text-indent:.22em;
  background:linear-gradient(180deg,#D2E1E7 0%,#EAF3F5 58%,#D6E5EA 100%)}
.slot.ghost{height:34px;padding:0 12px;font-size:13px;color:var(--ink-2)}
.slot.act{height:46px;min-width:96px;padding:0 14px;font-size:15px}

/* ── 页面：全部叠着，切页由结霜遮罩做，不用 display:none ── */
#screens{position:relative;flex:1 1 auto;min-height:0}
.screen{position:absolute;inset:0;display:flex;flex-direction:column;pointer-events:none;
  will-change:opacity}
/* 转场期间两页同时在场；转场一结束，离场的那一页不再参与合成（省掉整屏的合成开销）。
   切页本身仍然是结霜转场，不是靠这个属性切屏。 */
.screen.idle{visibility:hidden}
.screen .cvs{position:absolute;inset:0;width:100%;height:100%}
.screen>*{position:relative;z-index:1}

/* ── 启程 ── */
#scr-boot .bootText{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px}
.title{font-size:44px;font-weight:600;letter-spacing:.34em;text-indent:.34em;margin:0;
  color:var(--ink);text-shadow:0 1px 0 rgba(255,255,255,.75),0 -1px 0 rgba(92,126,146,.16)}
.tag{margin:6px 0 0;font-size:13px;letter-spacing:.3em;color:var(--ink-3)}
.bootNote{position:absolute;bottom:56px;left:0;right:0;text-align:center;margin:0;
  font-size:12px;letter-spacing:.24em;color:var(--ink-3)}

/* ── 菜单 ── */
.menuText{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;
  gap:10px;padding:0 20px 26px}
.menuText .title{margin-bottom:2px}
.menuStat{margin:0 0 14px;font-size:13px;color:var(--ink-2);display:flex;align-items:baseline;gap:6px}
.menuStat b{font-size:21px;font-weight:600;color:var(--ink)}
.menuStat i{color:var(--ink-3);font-style:normal;padding:0 2px}
.menuText .primary{width:100%;max-width:320px}
.row3{display:flex;gap:10px;width:100%;max-width:320px}
.row3 .slot{flex:1;padding:0}

/* ── 冰湖图 ── */
.lakeText{padding:4px 20px 10px}
.h2{margin:0 0 6px;font-size:20px;font-weight:600;letter-spacing:.2em}
.note{margin:0;font-size:12.5px;line-height:1.7;color:var(--ink-2);max-width:34em}
.lakeList{flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;
  padding:2px 20px 20px;pointer-events:none;scrollbar-width:none}
.lakeList::-webkit-scrollbar{display:none}
.lakeRow{position:relative;display:flex;align-items:center;gap:14px;padding:9px 12px;margin-bottom:6px;
  border-radius:var(--r);background:linear-gradient(180deg,rgba(255,255,255,.42),rgba(255,255,255,.14));
  box-shadow:inset 0 0 0 1px rgba(146,178,193,.34)}
.lakeRow .thumb{width:66px;height:46px;flex:0 0 auto;border-radius:1px;overflow:hidden}
.lakeRow .rt{flex:1 1 auto;min-width:0}
.lakeRow .rn{font-size:14.5px}
.lakeRow .rs{font-size:11.5px;color:var(--ink-2);margin-top:2px}
.lakeRow .rv{font-size:19px;font-weight:600;letter-spacing:.02em;color:var(--ink)}
.lakeRow.locked .rn,.lakeRow.locked .rs{color:var(--ink-3)}
.lakeRow.done .rv{color:var(--warm-1)}
.lakeRow .go{margin-top:6px}
.lakeRow.sel{box-shadow:inset 0 0 0 1px rgba(47,166,184,.55),0 2px 10px rgba(35,52,60,.08)}

/* ── 图鉴 ── */
.codexText{padding:4px 20px 10px}
.codexList{flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;
  padding:2px 20px 20px;pointer-events:none;scrollbar-width:none}
.codexList::-webkit-scrollbar{display:none}
.cx{border-radius:var(--r);margin-bottom:8px;overflow:hidden;
  background:linear-gradient(180deg,rgba(255,255,255,.40),rgba(255,255,255,.12));
  box-shadow:inset 0 0 0 1px rgba(146,178,193,.34)}
.cxHead{display:flex;align-items:center;gap:10px;padding:11px 12px;cursor:pointer}
.cxHead .dot{width:14px;height:14px;flex:0 0 auto;border-radius:50%;
  box-shadow:inset 0 0 0 1px rgba(35,52,60,.18)}
.cxHead .nm{flex:1;font-size:15px}
.cxHead .ar{font-size:12px;color:var(--ink-3)}
.cxBody{overflow:hidden;height:0}
.cxBody .box{padding:0 12px 12px}
.cxBody canvas{width:100%;height:150px;display:block;border-radius:1px;
  box-shadow:inset 0 0 0 1px rgba(146,178,193,.4)}
.cxBody .cap{margin:9px 0 0;font-size:12.5px;line-height:1.72;color:var(--ink-2)}
.cxBody .ledger{margin:9px 0 0;font-size:12.5px;line-height:1.9;color:var(--ink);
  border-left:2px solid rgba(47,166,184,.4);padding-left:10px}
.cxBody .ledger b{font-weight:600;color:var(--warm-1)}
.cxBody .ctr{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}

/* ── 设置 ── */
.setText{padding:4px 20px 16px;display:flex;flex-direction:column;gap:10px;min-height:0}
.setRows{display:flex;flex-direction:column;gap:8px;overflow-y:auto;pointer-events:none;
  scrollbar-width:none;-webkit-overflow-scrolling:touch}
/* 行不许被压缩：内容比一屏高时要能滚，而不是把说明文字裁掉 */
.setRows>*{flex:0 0 auto}
.setRows::-webkit-scrollbar{display:none}
.sRow{border-radius:var(--r);padding:10px 12px;
  background:linear-gradient(180deg,rgba(255,255,255,.40),rgba(255,255,255,.12));
  box-shadow:inset 0 0 0 1px rgba(146,178,193,.34)}
.sRow .lb{font-size:14.5px;display:flex;align-items:baseline;gap:8px}
.sRow .lb i{font-style:normal;font-size:11.5px;color:var(--ink-3)}
.sRow .opts{display:flex;gap:7px;margin-top:9px}
.sRow .opts .slot{height:40px;flex:1;padding:0;font-size:14px;letter-spacing:0}
.sRow .opts .slot[aria-pressed="true"]{color:var(--ink);
  box-shadow:inset 0 2px 7px rgba(35,52,60,.20),inset 0 -1px 0 rgba(255,255,255,.5),
    inset 0 0 0 1px rgba(47,166,184,.42)}
.sRow .dsc{margin:8px 0 0;font-size:11.5px;line-height:1.7;color:var(--ink-3);min-height:2.6em}
.fine{margin:auto 0 0;font-size:11px;line-height:1.7;color:var(--ink-3)}

/* ── 广告相关的界面文字（位点的说明、借过跳的 ★、未发放的原因） ── */
.adwarn{color:var(--warm-1);font-weight:600}
.cmp.adstar{color:var(--ink-3)}
.adstar{font-style:normal;color:var(--lamp-1);margin-left:3px}

/* 抠字图（取证用）：把这一屏的文字全部抠掉，只剩下画面 */
body.masked .screen *,body.masked #bar *,body.masked #warm *,body.masked #acts *{
  color:transparent !important;text-shadow:none !important;
}
body.masked #ovl *{color:transparent !important;text-shadow:none !important}
body.masked .slot::after{opacity:0}

/* ── 行路的动作区 ── */
#acts{flex:0 0 auto;height:76px;display:flex;align-items:center;gap:10px;padding:10px 20px 4px;
  opacity:var(--ao,0)}
#acts.off,#acts.off *{pointer-events:none !important}
#hint{flex:1 1 auto;min-width:0;font-size:12.5px;line-height:1.5;color:var(--ink-2);
  text-align:center;padding:0 4px}
#bUndo[hidden],#bPin[hidden]{display:none}

/* ── 余温数字与心电迹（跨页保留，切页做形变） ──
   两条横带都占固定高度：它们的出现或消失绝不推动棋盘（布局必须稳） */
#warm{flex:0 0 auto;height:118px;padding:2px 20px 0;opacity:var(--wo,0);pointer-events:none;overflow:hidden}
#warmTop{display:flex;align-items:flex-end;gap:12px}
#beatsBox{display:flex;align-items:baseline;gap:6px;flex:0 0 auto}
#beats{font-size:64px;line-height:.92;font-weight:600;color:var(--ink);letter-spacing:.01em;
  text-shadow:0 1px 0 rgba(255,255,255,.8);min-width:2.1ch;text-align:right;
  transform:scale(calc(1 + var(--nb,0) * .04));transform-origin:50% 70%}
#beats.low{color:#A8341F}
#beatsLabel{font-size:12px;letter-spacing:.22em;color:var(--ink-2)}
#beatsUnit{font-size:11px;font-style:normal;color:var(--ink-3)}
#lamps{flex:1 1 auto;display:flex;justify-content:flex-end;align-items:center;gap:7px;
  padding-bottom:9px;min-width:0;flex-wrap:wrap-reverse}
.lampDot{width:15px;height:15px;flex:0 0 auto;border-radius:50%;
  background:radial-gradient(60% 60% at 40% 34%,#C3D5DE,#9FB6C2);
  box-shadow:inset 0 0 0 1px rgba(35,52,60,.16);
  transform:scale(calc(1 + var(--pop,0)))}
.lampDot.on{background:radial-gradient(58% 58% at 38% 32%,#FFF0CE,#F0A03C 62%,#C97C22);
  box-shadow:inset 0 0 0 1px rgba(150,96,30,.5),0 0 7px rgba(240,160,60,.42)}
#ecg{width:100%;height:46px;display:block;margin-top:2px}

/* ── 浮层 ── */
.veil{position:absolute;inset:0;background:rgba(20,49,61,0);backdrop-filter:blur(0px);
  display:flex;align-items:center;justify-content:center;padding:22px}
.card{width:100%;max-width:340px;border-radius:3px;padding:20px 18px;
  background:linear-gradient(180deg,rgba(248,251,252,.96),rgba(226,238,242,.96));
  box-shadow:0 1px 0 rgba(255,255,255,.9) inset,0 6px 16px rgba(20,49,61,.16),
    0 0 0 1px rgba(92,126,146,.22);transform-origin:50% 60%;
  /* 卡片不透明度不动：让遮罩负责暗，卡片只做位移与缩放（避免每帧重栅格化大阴影） */
  will-change:transform}
.card h3{margin:0 0 4px;font-size:17px;font-weight:600;letter-spacing:.14em}
.card .sub{margin:0 0 14px;font-size:12.5px;color:var(--ink-2)}
.card .big{font-size:56px;line-height:1;font-weight:600;letter-spacing:.01em}
.card .big small{font-size:12px;letter-spacing:.2em;color:var(--ink-2);margin-left:6px}
.card .cmp{margin:10px 0 0;font-size:12px;color:var(--ink-2)}
.card .cmp b{color:var(--warm-1);font-weight:600}
.card canvas.rep{width:100%;height:74px;display:block;margin:14px 0 2px;border-radius:2px;
  background:rgba(255,255,255,.5);box-shadow:inset 0 0 0 1px rgba(146,178,193,.4)}
.card .btns{display:flex;flex-direction:column;gap:8px;margin-top:16px}
.card .row2{display:flex;gap:8px}
.card .row2 .slot{flex:1}
.tip{position:absolute;left:50%;transform:translateX(-50%);max-width:264px;
  padding:7px 11px;border-radius:2px;font-size:12px;line-height:1.55;color:var(--ink);
  background:linear-gradient(180deg,rgba(248,251,252,.94),rgba(228,240,244,.92));
  box-shadow:0 6px 18px rgba(20,49,61,.14),0 0 0 1px rgba(92,126,146,.20)}
.tip b{color:var(--warm-1);font-weight:600}
.tip.frost{background:linear-gradient(180deg,rgba(248,251,252,.9),rgba(214,232,238,.88))}