:root{
    --ink:#3a7bd5;
    --paper:#fffaf0;
    --accent:#ff8a3d;
    --accent-dim:#f56a1f;
    --bamboo:#8bc34a;
    --serif:"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans SC",sans-serif;
  }
  *{ margin:0; padding:0; box-sizing:border-box; }
  html,body{
    height:100%; overflow:hidden; background:#bfe9ff;
    overscroll-behavior:none;
    -webkit-user-select:none; user-select:none;
    -webkit-tap-highlight-color:transparent;
  }
  canvas#cv{
    position:fixed; inset:0; display:block;
    touch-action:none; cursor:grab;
  }
  canvas#cv.holding{ cursor:grabbing; }
  /* —— 竖排标题 —— */
  .masthead{
    position:fixed;
    top:calc(26px + env(safe-area-inset-top));
    left:calc(20px + env(safe-area-inset-left));
    display:flex; gap:14px; pointer-events:none;
    color:#2b4a6f; font-family:var(--serif);
  }
  .masthead h1{
    writing-mode:vertical-rl;
    font-size:clamp(42px, 7.5vh, 66px);
    font-weight:900; letter-spacing:.32em;
    color:#ff5e3a;
    text-shadow:2px 2px 0 #fff, 4px 4px 0 rgba(255,140,60,.25);
  }
  .masthead .sub{
    writing-mode:vertical-rl;
    font-size:clamp(12px, 1.8vh, 15px);
    letter-spacing:.5em; opacity:.85; padding-top:10px;
    color:#3a6ea5;
  }
  .masthead .seal{
    writing-mode:vertical-rl;
    align-self:flex-start;
    font-size:11px; letter-spacing:.28em;
    color:#fff; background:#ff8a3d;
    padding:8px 3px; border-radius:8px; opacity:.95;
    box-shadow:0 3px 0 rgba(245,106,31,.5);
  }
  /* —— 底部提示 —— */
  .hint{
    position:fixed; left:50%; bottom:calc(9vh + env(safe-area-inset-bottom));
    transform:translateX(-50%);
    display:flex; align-items:center; gap:12px;
    padding:11px 24px; border-radius:999px;
    color:#3a4a2a; font-family:var(--serif);
    font-size:15px; letter-spacing:.22em; white-space:nowrap;
    background:rgba(255,255,255,.82);
    border:2px solid rgba(255,138,61,.55);
    box-shadow:0 6px 18px rgba(120,170,220,.35);
    backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
    pointer-events:none;
    animation:bob 3.2s ease-in-out infinite;
    transition:opacity 1.2s ease;
  }
  .hint .snd{ font-size:12px; opacity:.7; letter-spacing:.1em; color:#ff7a2d; }
  .hint svg{ flex:none; opacity:.95; animation:spin 2.6s linear infinite; }
  .hint.gone{ opacity:0; }
  @keyframes bob{ 0%,100%{transform:translateX(-50%) translateY(0)} 50%{transform:translateX(-50%) translateY(-7px)} }
  @keyframes spin{ to{ transform:rotate(360deg);} }
  /* —— 右下控制 —— */
  .panel{
    position:fixed; right:calc(18px + env(safe-area-inset-right));
    bottom:calc(18px + env(safe-area-inset-bottom));
    display:flex; flex-direction:column; align-items:flex-end; gap:12px;
    font-family:var(--serif); color:#2b4a6f;
  }
  .meter{ text-align:right; line-height:1.15; }
  .meter b{
    font-size:30px; font-weight:900; font-variant-numeric:tabular-nums;
    color:#ff7a2d; text-shadow:1px 1px 0 #fff;
  }
  .meter label{ display:block; font-size:11px; letter-spacing:.32em; opacity:.7; }
  .panel button{
    font-family:var(--serif); font-size:14px; letter-spacing:.3em; font-weight:700;
    padding:10px 18px 10px 22px; border-radius:999px;
    color:#fff; background:#ff8a3d;
    border:2px solid #ffae6b;
    box-shadow:0 4px 0 #e86f22, 0 6px 14px rgba(255,138,61,.35);
    cursor:pointer; transition:all .25s ease;
    touch-action:manipulation;
  }
  .panel button:active{ transform:translateY(3px); box-shadow:0 1px 0 #e86f22; }
  .panel button:hover{ background:#ff9a55; }
  .panel button.on{
    background:#5fb85f; border-color:#8fd98f; color:#fff;
    box-shadow:0 4px 0 #3f9a3f, 0 6px 14px rgba(95,184,95,.35);
  }
  /* —— 首次开声引导(仅触屏 & 音频未解锁时) —— */
  .unlock{
    position:fixed; left:50%; top:26%; transform:translateX(-50%);
    padding:12px 26px; border-radius:999px;
    font-family:var(--serif); font-size:15px; letter-spacing:.2em; font-weight:700;
    color:#fff; background:#ff8a3d;
    border:2px solid #ffce9e;
    box-shadow:0 5px 0 #e86f22, 0 8px 22px rgba(255,138,61,.45);
    cursor:pointer; z-index:5; white-space:nowrap;
    animation:pulse 1.8s ease-in-out infinite;
    transition:opacity .5s ease;
  }
  .unlock.gone{ opacity:0; pointer-events:none; }
  @keyframes pulse{
    0%,100%{ transform:translateX(-50%) scale(1); }
    50%{ transform:translateX(-50%) scale(1.06); }
  }
  /* —— 关于 角标按钮 —— */
  .ghlink{
    position:fixed;
    top:calc(24px + env(safe-area-inset-top));
    right:calc(20px + env(safe-area-inset-right));
    font-family:var(--serif); font-size:13px; letter-spacing:.18em; font-weight:700;
    color:#fff; opacity:.95; text-decoration:none; cursor:pointer;
    border:2px solid #ffce9e; border-radius:999px;
    background:#ff8a3d;
    box-shadow:0 3px 0 #e86f22, 0 5px 12px rgba(255,138,61,.35);
    padding:6px 16px 6px 16px;
    transition:all .2s ease;
  }
  .ghlink:active{ transform:translateY(2px); box-shadow:0 1px 0 #e86f22; }
  .ghlink:hover{ background:#ff9a55; }
  /* —— 关于弹窗 —— */
  .modal-mask{
    position:fixed; inset:0; z-index:20;
    display:flex; align-items:center; justify-content:center;
    background:rgba(40,70,110,.45);
    backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px);
    opacity:0; pointer-events:none; transition:opacity .25s ease;
  }
  .modal-mask.show{ opacity:1; pointer-events:auto; }
  .about-modal{
    width:min(86vw, 360px);
    background:linear-gradient(180deg,#fffaf0,#fff);
    border:3px solid #ffce9e; border-radius:22px;
    box-shadow:0 12px 40px rgba(120,90,40,.3);
    padding:24px 22px 20px; text-align:center;
    font-family:var(--serif); color:#3a4a2a;
    transform:translateY(16px) scale(.96); transition:transform .25s ease;
    position:relative;
  }
  .modal-mask.show .about-modal{ transform:translateY(0) scale(1); }
  .about-modal h2{
    margin:0 0 6px; font-size:22px; font-weight:900; letter-spacing:.1em;
    color:#ff7a2d;
  }
  .about-modal .desc{ font-size:13px; opacity:.8; margin-bottom:16px; line-height:1.7; }
  .about-modal .qr{
    width:160px; height:160px; object-fit:cover; border-radius:14px;
    border:3px solid #ffd9a8; box-shadow:0 4px 14px rgba(255,138,61,.3);
    display:block; margin:0 auto 8px;
  }
  .about-modal .name{
    display:inline-flex; align-items:center; gap:8px;
    margin-top:6px; padding:8px 14px; border-radius:999px;
    background:#fff3e0; border:2px solid #ffce9e;
    font-size:15px; font-weight:700; color:#ff7a2d; letter-spacing:.06em;
    cursor:pointer; user-select:none; transition:all .2s ease;
  }
  .about-modal .name:active{ transform:scale(.96); }
  .about-modal .name .cp{ font-size:12px; opacity:.7; font-weight:700; }
  .about-modal .close{
    position:absolute; top:-14px; right:-14px;
    width:34px; height:34px; border-radius:50%;
    background:#ff8a3d; color:#fff; border:3px solid #fff;
    font-size:18px; line-height:1; cursor:pointer;
    box-shadow:0 3px 10px rgba(255,138,61,.45);
    display:flex; align-items:center; justify-content:center;
  }
  .about-modal .toast{
    font-size:12px; color:#3f9a3f; font-weight:700; height:16px; margin-top:6px;
    opacity:0; transition:opacity .2s ease;
  }
  /* 关于弹窗 - 样式1富文本 */
  .about-modal .about-richtext{ font-size:14px; line-height:1.8; text-align:left; padding:0 4px; }
  .about-modal .about-richtext img{ max-width:100%; border-radius:10px; margin:8px 0; }
  /* —— 皮肤选择弹窗 —— */
  .skin-modal{
    position:fixed; inset:0; z-index:22;
    display:flex; align-items:center; justify-content:center;
    background:rgba(40,70,110,.45);
    backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px);
    opacity:0; pointer-events:none; transition:opacity .25s ease;
  }
  .skin-modal.show{ opacity:1; pointer-events:auto; }
  .skin-box{
    width:min(90vw, 380px); position:relative;
    background:linear-gradient(180deg,#fffaf0,#fff);
    border:3px solid #ffce9e; border-radius:22px;
    box-shadow:0 12px 40px rgba(120,90,40,.3);
    padding:22px 18px 18px; text-align:center;
    font-family:var(--serif); color:#3a4a2a;
    transform:translateY(16px) scale(.96); transition:transform .25s ease;
  }
  .skin-modal.show .skin-box{ transform:translateY(0) scale(1); }
  .skin-box h3{ font-size:18px; font-weight:900; margin-bottom:14px; color:#ff7a2d; letter-spacing:.1em; }
  .skin-list{ display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin-bottom:12px; }
  .skin-card{
    width:90px; padding:10px 6px; border-radius:14px; cursor:pointer;
    border:2.5px solid transparent; background:#fdf8f0;
    transition:all .2s ease; font-size:12px; letter-spacing:.06em;
  }
  .skin-card:hover{ transform:translateY(-2px); box-shadow:0 4px 12px rgba(120,90,.2); }
  .skin-card.active{ border-color:#ff8a3d; background:#fff3e0; box-shadow:0 4px 12px rgba(255,138,61,.25); }
  .skin-card .swatch{ width:44px; height:44px; border-radius:10px; margin:0 auto 6px; display:flex; align-items:center; justify-content:center; font-size:22px; }
  .skin-card .sname{ font-weight:700; font-size:12px; color:#3a4a2a; }
  .skin-divider{ border:none; border-top:1px dashed #ffce9e; margin:14px 0 8px; }
  .scene-list{ display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin-bottom:12px; }
  .scene-card{
    width:86px; padding:10px 6px 8px; border-radius:14px;
    border:2px solid #f0e0c0; background:#fffbf0;
    cursor:pointer; transition:all .2s ease; text-align:center;
  }
  .scene-card:hover{ border-color:#ffce9e; background:#fff6e0; }
  .scene-card.active{ border-color:#ff8a3d; background:#fff2e0; box-shadow:0 2px 8px rgba(255,138,61,.25); }
  .scene-card .swatch{ width:38px; height:38px; border-radius:10px; margin:0 auto 5px; display:flex; align-items:center; justify-content:center; font-size:20px; }
  .scene-card .sname{ font-weight:700; font-size:11px; color:#3a4a2a; }
  .skin-reset{
    font-family:var(--serif); font-size:12px; letter-spacing:.16em; font-weight:700;
    padding:7px 16px; border-radius:999px; cursor:pointer;
    color:#ff8a3d; background:transparent; border:2px solid #ffce9e;
    transition:all .2s ease;
  }
  .skin-reset:hover{ background:#fff3e0; }
  .skin-reset:active{ transform:scale(.96); }
  .skin-close-btn{
    position:absolute; top:-14px; right:-14px;
    width:34px; height:34px; border-radius:50%;
    background:#ff8a3d; color:#fff; border:3px solid #fff;
    font-size:18px; line-height:1; cursor:pointer;
    box-shadow:0 3px 10px rgba(255,138,61,.45);
    display:flex; align-items:center; justify-content:center;
  }
  /* 皮肤设置按钮 */
  .skinbtn{
    font-family:var(--serif); font-size:13px; letter-spacing:.2em; font-weight:700;
    padding:8px 14px 8px 16px; border-radius:999px;
    color:#fff; background:#5fb85f;
    border:2px solid #8fd98f;
    box-shadow:0 3px 0 #3f9a3f, 0 5px 12px rgba(95,184,95,.35);
    cursor:pointer; transition:all .25s ease;
    touch-action:manipulation;
  }
  .skinbtn:active{ transform:translateY(2px); box-shadow:0 1px 0 #3f9a3f; }
  .skinbtn:hover{ background:#6cc46c; }

/* =====================核心修改：绿色按钮移到左侧中间区域===================== */
.sitelink-group {
  position: fixed !important;
  left: calc(16px + env(safe-area-inset-left)) !important;
  bottom: auto !important;
  top: 62% !important;
  z-index: 4 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
}
.sitelink-group .sitelink {
  position: static !important;
  left: auto !important;
  bottom: auto !important;
  font-family:var(--serif); font-size:13px; letter-spacing:.06em; font-weight:700;
  color:#fff; text-decoration:none;
  background:#5fb85f; border:2px solid #a8e0a8;
  padding:5px 14px; border-radius:999px;
  box-shadow:0 3px 0 #3f9a3f, 0 5px 14px rgba(95,184,95,.35);
  transition:all .2s ease;
}
.sitelink-group .sitelink:hover{ background:#6cc46c; transform:translateY(-1px); }
.sitelink-group .sitelink:active{ transform:translateY(2px); box-shadow:0 1px 0 #3f9a3f; }

/* —— 底部统计文字【恢复居中，底部完全空出来，永不被遮挡】 */
.stats{
  position:fixed;
  left:50% !important;
  transform:translateX(-50%) !important;
  right:auto !important;
  bottom:calc(8px + env(safe-area-inset-bottom));
  font-family:var(--serif); font-size:11px; letter-spacing:.14em;
  color:#3a5a7a; opacity:.8;
  pointer-events:none;
  line-height:1.5;
  text-align:center;
}
.stats b{ font-weight:900; color:#ff7a2d; font-variant-numeric:tabular-nums; }
/* —— 左下注脚 —— */
.lore{
  position:fixed;
  left:calc(22px + env(safe-area-inset-left));
  bottom:calc(22px + env(safe-area-inset-bottom));
  pointer-events:none;
  font-family:var(--serif); font-size:11.5px; letter-spacing:.24em;
  color:#3a5a7a; opacity:.7; line-height:2;
}
/* —— 底部免责声明 —— */
.disclaimer{
  display:block; text-align:center;
  font-family:var(--serif); font-size:10px; letter-spacing:.08em;
  color:#3a5a7a; opacity:.45;
  margin-top:4px;
}

/* =====移动端适配===== */
@media (max-width:640px){
  .lore{ display:none; }
  /* 标题改横排 */
  .masthead{
    top:calc(14px + env(safe-area-inset-top));
    left:calc(12px + env(safe-area-inset-left));
    gap:8px;
  }
  .masthead h1{
    writing-mode:horizontal-tb;
    font-size:clamp(26px, 7vw, 38px);
    letter-spacing:.12em;
    text-shadow:1.5px 1.5px 0 #fff, 3px 3px 0 rgba(255,140,60,.22);
  }
  .masthead .sub{
    writing-mode:horizontal-tb;
    font-size:11px; letter-spacing:.32em; padding-top:0;
    align-self:center;
  }
  .masthead .seal{ display:none; }
  .ghlink{ font-size:12px; padding:5px 13px; top:calc(14px + env(safe-area-inset-top)); right:calc(12px + env(safe-area-inset-right)); }

  /* 手机端绿色按钮位置微调 */
  .sitelink-group {
    left:calc(12px + env(safe-area-inset-left));
    top: 64% !important;
  }
  .sitelink-group .sitelink {
    font-size:11px; padding:4px 11px;
  }

  .stats{
    font-size:10px; letter-spacing:.06em;
    width:94vw;
  }

  .hint{
    font-size:12px; letter-spacing:.1em; padding:9px 16px;
    bottom:calc(104px + env(safe-area-inset-bottom));
    max-width:88vw;
  }
  .hint .snd{ display:none; }
  .panel{
    right:calc(10px + env(safe-area-inset-right));
    bottom:calc(10px + env(safe-area-inset-bottom));
    gap:6px;
  }
  .panel .meter b{ font-size:20px; }
  .panel .meter label{ font-size:8px; letter-spacing:.18em; }
  .panel button{ font-size:11px; padding:7px 12px; letter-spacing:.1em; }
}

@media (max-width:380px){
  .masthead .sub{ display:none; }

  /* 超小屏 */
  .sitelink-group {
    top: 66% !important;
  }
  .sitelink-group .sitelink {
    font-size:10px; padding:3px 9px;
  }

  .stats{
    font-size:9px;
  }
  .hint{ bottom:calc(96px + env(safe-area-inset-bottom)); }
  .panel button{ font-size:10px; padding:6px 10px; }
}

@media (prefers-reduced-motion:reduce){
  .hint, .hint svg{ animation:none; }
}