/* veil.css —— 镜帷全作样式。瓷白为底，赤陶/青白分两半，朱砂为印，金箔为赏。
   切屏不用 display:none；主动效不经 CSS transition（由 rAF 补间直接写样式）。 */

:root{
  --paper:#f4eee1; --paper-l:#f6f0e3; --paper-r:#edf2ef;
  --terra:#c25a3a; --terra-d:#9e462c;
  --teal:#2f7d86; --teal-d:#235e65;
  --cinnabar:#b7342a; --cinnabar-d:#8f271e;
  --gold:#c99a3d; --ink:#2a241c; --ink-soft:#6f6250; --ink-faint:#a99c84;
  --line:rgba(80,62,38,.22);
  /* 安全区：取系统 env 与 Telegram 宿主变量的大者 */
  --sat:max(env(safe-area-inset-top,0px), var(--tg-safe-area-inset-top,0px));
  --sar:max(env(safe-area-inset-right,0px), var(--tg-safe-area-inset-right,0px));
  --sab:max(env(safe-area-inset-bottom,0px), var(--tg-safe-area-inset-bottom,0px));
  --sal:max(env(safe-area-inset-left,0px), var(--tg-safe-area-inset-left,0px));
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{height:100%;overflow:hidden;background:var(--paper);
  font-family:"STKaiti","KaiTi","Songti SC","STSong","SimSun",serif;color:var(--ink);}
/* #app 为全部 fixed 后代的包含块；高度跟随 TG 折叠视口，无宿主变量时回落 100vh */
#app{position:fixed;left:0;right:0;top:0;transform:translateZ(0);
  height:100vh;height:var(--tg-viewport-height,100vh);}

/* ===== 屏注册表：常驻，仅可见性切换 ===== */
.screen{position:fixed;inset:0;visibility:hidden;opacity:0;pointer-events:none;
  background:var(--paper);overflow:hidden;}
.screen.on{visibility:visible;opacity:1;pointer-events:auto;}

/* ===== 折门转场 ===== */
#fold{position:fixed;inset:0;z-index:80;visibility:hidden;pointer-events:none;}
#fold.on{visibility:visible;}
.fold-half{position:absolute;top:0;bottom:0;width:50%;
  background:var(--paper);
  box-shadow:inset 0 0 60px rgba(90,72,45,.10);}
#fold-l{left:0;border-right:1px solid var(--line);
  background:linear-gradient(90deg,var(--paper-l),var(--paper));}
#fold-r{right:0;border-left:1px solid var(--line);
  background:linear-gradient(270deg,var(--paper-r),var(--paper));}
.fold-seam{position:absolute;top:0;bottom:0;left:50%;width:2px;
  transform:translateX(-1px);background:rgba(90,72,45,.25);}

/* ===== 通用：纸笺、墨字、印钮 ===== */
.vtitle{font-size:26px;letter-spacing:.5em;text-indent:.5em;color:var(--ink);}
.vertical{writing-mode:vertical-rl;letter-spacing:.4em;}
.btn{border:1.5px solid var(--ink);background:rgba(255,252,244,.6);color:var(--ink);
  font-family:inherit;font-size:16px;letter-spacing:.25em;padding:10px 18px;border-radius:2px;
  position:relative;cursor:pointer;}
.btn:active{transform:translateY(1px);}
.btn-seal{background:var(--cinnabar);border-color:var(--cinnabar-d);color:#fdf3e3;
  box-shadow:0 2px 0 var(--cinnabar-d);}
.btn-seal:disabled{background:var(--ink-faint);border-color:var(--ink-soft);
  box-shadow:none;color:rgba(253,243,227,.7);cursor:default;}
.btn-ghost{background:transparent;border-color:var(--ink-soft);color:var(--ink-soft);}
.btn:disabled{opacity:.45;cursor:default;}
.ink-note{font-size:12px;color:var(--ink-soft);line-height:1.9;letter-spacing:.08em;}

/* ===== 菜单：印谱长卷 ===== */
#screen-menu{display:flex;flex-direction:column;
  background:linear-gradient(180deg,var(--paper-l),var(--paper) 30%,var(--paper-r));}
.menu-head{position:relative;padding:max(18px,calc(var(--sat) + 6px)) max(20px,var(--sar)) 6px max(20px,var(--sal));
  text-align:center;flex:none;}
.menu-head .vtitle{position:relative;display:inline-block;}
.menu-head .vtitle::after{content:"";position:absolute;left:8%;right:8%;bottom:-7px;height:1px;
  background:linear-gradient(90deg,transparent,var(--terra) 30%,var(--teal) 70%,transparent);}
.menu-sub{margin-top:12px;font-size:12px;letter-spacing:.6em;color:var(--ink-faint);text-indent:.6em;}
.menu-howto{margin-top:8px;font-size:12px;line-height:1.7;letter-spacing:.05em;color:var(--ink-soft);
  padding:0 max(20px,var(--sar)) 0 max(20px,var(--sal));}
.move-hint{position:absolute;left:0;right:0;top:calc(46px + var(--sat));text-align:center;
  font-size:12px;letter-spacing:.08em;color:var(--ink-soft);z-index:4;pointer-events:none;
  opacity:0;visibility:hidden;}
.move-hint.on{opacity:1;visibility:visible;}
.menu-tools{position:absolute;right:max(14px,var(--sar));top:calc(14px + var(--sat));display:flex;gap:8px;}
.icon-btn{width:34px;height:34px;border:1px solid var(--line);border-radius:2px;background:rgba(255,252,244,.5);
  color:var(--ink-soft);font-size:15px;line-height:32px;text-align:center;cursor:pointer;}
.icon-btn.muted{color:var(--cinnabar);border-color:var(--cinnabar);}
.scroll-scroll{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;touch-action:pan-y;
  padding:6px max(18px,var(--sar)) calc(28px + var(--sab)) max(18px,var(--sal));}
.juan{margin:14px auto 4px;max-width:520px;border:1px solid var(--line);border-radius:3px;
  background:rgba(255,252,244,.42);padding:12px 14px 16px;position:relative;}
.juan-name{display:flex;align-items:baseline;gap:10px;margin-bottom:10px;}
.juan-name b{font-size:18px;letter-spacing:.4em;color:var(--terra-d);}
.juan-name .juan-sub{font-size:11px;color:var(--ink-faint);letter-spacing:.2em;}
.juan-name .juan-line{flex:1;height:1px;background:var(--line);}
.juan-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;}
.seal-cell{aspect-ratio:1;border:1.5px dashed var(--ink-faint);border-radius:3px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  color:var(--ink-faint);cursor:default;background:transparent;position:relative;}
.seal-cell .sc-no{font-size:13px;}
.seal-cell.open{border-style:solid;border-color:var(--cinnabar);background:rgba(183,52,42,.08);
  color:var(--cinnabar);cursor:pointer;box-shadow:inset 0 0 0 1px rgba(183,52,42,.25);}
.seal-cell.open .sc-no{font-size:20px;}
.seal-cell.done{border-style:solid;border-color:var(--terra-d);background:rgba(194,90,58,.12);
  color:var(--terra-d);cursor:pointer;}
.seal-cell.done.rk-甲{border-color:var(--gold);background:rgba(201,154,61,.16);color:#8a6a24;}
.seal-cell .sc-rank{font-size:13px;letter-spacing:0;}
.seal-cell .sc-gold{position:absolute;right:2px;top:1px;font-size:9px;color:var(--gold);}
.menu-foot{flex:none;text-align:center;padding:6px 0 12px;}

/* ===== 玩法屏 ===== */
#screen-play{background:var(--paper);}
#board{position:absolute;inset:0;touch-action:none;}
.hud-top{position:absolute;left:0;right:0;top:var(--sat);height:42px;display:flex;align-items:center;
  justify-content:space-between;padding:8px max(12px,var(--sar)) 8px max(12px,var(--sal));
  pointer-events:none;z-index:5;}
.hud-juan{font-size:13px;letter-spacing:.3em;color:var(--ink-soft);}
.hud-power{font-size:12px;color:var(--ink-soft);letter-spacing:.15em;}
.hud-power b{color:var(--ink);font-size:15px;font-weight:normal;}
.hud-power.low b{color:var(--cinnabar);}
.hud-side{position:absolute;right:max(6px,var(--sar));top:calc(52px + var(--sat));
  bottom:calc(190px + var(--sab));display:flex;flex-direction:column;
  align-items:center;justify-content:space-between;z-index:5;pointer-events:none;}
.hud-side .hs-name{font-size:13px;color:var(--ink-soft);}
.hud-side .hs-shard{font-size:11px;color:var(--gold);letter-spacing:.2em;}
.play-tools{position:absolute;left:0;right:0;bottom:calc(142px + var(--sab));display:flex;flex-direction:row;
  justify-content:center;gap:16px;z-index:6;}
.tool-thing{position:relative;width:42px;height:42px;border:1.5px solid var(--ink-soft);border-radius:3px;
  background:rgba(255,252,244,.7);color:var(--ink-soft);font-size:11px;line-height:1.25;
  display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer;
  text-align:center;padding:2px;}
.tool-thing b{font-size:14px;font-weight:normal;color:inherit;}
.tool-thing.on{border-color:var(--gold);color:#8a6a24;background:rgba(201,154,61,.14);}
.tool-thing:disabled{opacity:.4;cursor:default;}
.tool-thing .tt-left{position:absolute;bottom:-7px;right:-4px;font-size:9px;color:var(--cinnabar);
  background:var(--paper);border:1px solid var(--line);border-radius:8px;padding:0 4px;line-height:13px;}
/* 方向印钮：十字 */
.pad{position:absolute;left:0;right:0;bottom:calc(14px + var(--sab));display:flex;justify-content:center;z-index:6;}
.pad-grid{display:grid;grid-template-columns:repeat(3,58px);grid-template-rows:repeat(2,58px);gap:8px;}
.dpad{border:1.5px solid var(--ink);border-radius:4px;background:rgba(255,252,244,.75);
  color:var(--ink);font-size:22px;cursor:pointer;display:flex;align-items:center;justify-content:center;
  box-shadow:0 2px 0 rgba(42,36,28,.35);user-select:none;touch-action:none;}
.dpad:active{background:var(--cinnabar);color:#fdf3e3;box-shadow:0 0 0 rgba(0,0,0,0);
  transform:translateY(2px);}
.dpad.up{grid-column:2;grid-row:1;}
.dpad.left{grid-column:1;grid-row:2;}
.dpad.down{grid-column:2;grid-row:2;}
.dpad.right{grid-column:3;grid-row:2;}

/* ===== 浮层（折纸笺） ===== */
#pop-layer{position:fixed;inset:0;z-index:40;pointer-events:none;}
.veil-pop{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  visibility:hidden;pointer-events:none;
  padding:max(26px,calc(var(--sat) + 14px)) max(26px,calc(var(--sar) + 12px))
          max(26px,calc(var(--sab) + 14px)) max(26px,calc(var(--sal) + 12px));
  background:rgba(74,58,34,.22);}
.veil-pop.on{visibility:visible;pointer-events:auto;}
.pop-card{width:100%;max-width:380px;
  max-height:min(86vh, calc(var(--tg-viewport-height,100vh) - var(--sat) - var(--sab) - 52px));
  overflow-y:auto;touch-action:pan-y;
  background:var(--paper);border:1px solid var(--line);border-radius:4px;
  box-shadow:0 10px 40px rgba(42,36,28,.28);padding:22px 22px 18px;position:relative;}
.pop-card::before{content:"";position:absolute;left:50%;top:0;bottom:0;width:1px;
  background:rgba(120,100,70,.12);}
.pop-title{text-align:center;font-size:21px;letter-spacing:.4em;text-indent:.4em;margin:2px 0 4px;}
.pop-sub{text-align:center;font-size:12px;color:var(--ink-faint);letter-spacing:.25em;margin-bottom:14px;}
.pop-body{font-size:14px;line-height:2;color:var(--ink);letter-spacing:.06em;}
.pop-actions{margin-top:18px;display:flex;flex-direction:column;gap:10px;}
.pop-actions .row{display:flex;gap:10px;}
.pop-actions .btn{flex:1;}
.rank-seal{width:86px;height:86px;margin:4px auto 8px;border-radius:6px;display:flex;
  align-items:center;justify-content:center;font-size:44px;color:#fdf3e3;position:relative;}
.rank-seal.rk-甲{background:var(--gold);box-shadow:0 3px 0 #8a6a24;}
.rank-seal.rk-乙{background:var(--cinnabar);box-shadow:0 3px 0 var(--cinnabar-d);}
.rank-seal.rk-丙{background:var(--terra);box-shadow:0 3px 0 var(--terra-d);}
.rank-goldnote{text-align:center;color:#8a6a24;font-size:12px;letter-spacing:.3em;margin-bottom:6px;}
.thing-line{display:flex;gap:8px;align-items:flex-start;padding:8px 0;border-bottom:1px dashed var(--line);}
.thing-line:last-child{border-bottom:none;}
.thing-seal{flex:none;width:38px;height:38px;border:1.5px solid var(--ink-soft);border-radius:3px;
  display:flex;align-items:center;justify-content:center;font-size:17px;color:var(--ink-soft);}
.thing-line .tl-main b{letter-spacing:.2em;}
.thing-line .tl-main{font-size:13px;line-height:1.85;color:var(--ink-soft);}
.ad-health{margin-top:12px;padding:8px 10px;border:1px solid var(--line);border-radius:3px;
  font-size:11px;line-height:1.7;color:var(--ink-soft);letter-spacing:.05em;word-break:break-all;}
.ad-health.bad{border-color:var(--cinnabar);color:var(--cinnabar);background:rgba(183,52,42,.06);}
.ad-health .ah-mode{font-weight:bold;}
/* 演示广告红框（全局唯一） */
.veil-demo-ad{position:fixed;inset:0;z-index:120;background:rgba(42,36,28,.55);
  display:flex;align-items:center;justify-content:center;}
.veil-demo-box{width:min(82vw,320px);border:3px solid var(--cinnabar);background:var(--paper);
  border-radius:4px;padding:30px 20px;text-align:center;}
.veil-demo-tag{color:var(--cinnabar);font-size:13px;letter-spacing:.15em;font-weight:bold;margin-bottom:18px;}
.veil-demo-seal{width:72px;height:72px;margin:0 auto 16px;background:var(--cinnabar);color:#fdf3e3;
  font-size:34px;line-height:72px;border-radius:4px;}
.veil-demo-note{font-size:12px;color:var(--ink-soft);line-height:1.8;}
.veil-demo-ad.veil-demo-out{opacity:0;}

/* toast 小纸条 */
#toast{position:fixed;left:50%;bottom:calc(170px + var(--sab));z-index:90;visibility:hidden;pointer-events:none;
  transform:translateX(-50%);background:rgba(42,36,28,.92);color:#f4eee1;font-size:13px;
  letter-spacing:.1em;padding:8px 16px;border-radius:2px;max-width:80vw;text-align:center;line-height:1.7;}

/* ===== 规制页 ===== */
#screen-codex{background:var(--paper);overflow-y:auto;touch-action:pan-y;}
.codex-wrap{max-width:560px;margin:0 auto;
  padding:calc(20px + var(--sat)) max(22px,var(--sar)) calc(40px + var(--sab)) max(22px,var(--sal));}
.codex-wrap h3{font-size:16px;letter-spacing:.3em;color:var(--terra-d);margin:20px 0 6px;
  border-left:4px solid var(--cinnabar);padding-left:10px;}
.codex-wrap p,.codex-wrap li{font-size:14px;line-height:2.1;color:var(--ink);letter-spacing:.05em;}
.codex-wrap ul{padding-left:22px;margin:6px 0;}
.codex-back{margin:22px auto 0;display:block;}

/* ===== 终局：两半合笺 ===== */
#screen-finale{background:var(--paper);}
.finale-stage{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;}
.f-half{position:absolute;top:0;bottom:0;width:50%;}
.f-half.l{left:0;background:linear-gradient(90deg,var(--paper-l),var(--paper));
  border-right:1px solid var(--line);}
.f-half.r{right:0;background:linear-gradient(270deg,var(--paper-r),var(--paper));
  border-left:1px solid var(--line);}
.finale-center{position:relative;z-index:2;text-align:center;visibility:hidden;}
.finale-seal{width:104px;height:104px;margin:0 auto 18px;border-radius:8px;background:var(--cinnabar);
  color:#fdf3e3;font-size:46px;display:flex;align-items:center;justify-content:center;
  box-shadow:0 4px 0 var(--cinnabar-d);transform:scale(0);}
.finale-line{font-size:18px;letter-spacing:.5em;text-indent:.5em;color:var(--ink);}
.finale-sub{margin-top:10px;font-size:12px;letter-spacing:.3em;color:var(--ink-faint);}
.finale-actions{margin-top:30px;display:none;gap:12px;justify-content:center;}
.finale-actions.on{display:flex;}