:root{
    --ink:#0a1028;
    --paper:#f0e6d2;
    --accent:#e2603f;
    --accent-dim:#b34a30;
    --bamboo:#a8b06a;
    --serif:"Songti SC","Noto Serif SC","Noto Serif CJK SC","STSong","SimSun",serif;
  }
  *{ margin:0; padding:0; box-sizing:border-box; }
  html,body{
    height:100%; overflow:hidden; background:var(--ink);
    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; }
  /* 3D 小蝉渲染层：叠在 2D 画布上，输入事件穿透给 #cv */
  canvas#cv3d{
    position:fixed; inset:0; display:block;
    pointer-events:none;
  }

  /* —— 竖排标题 —— */
  .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:var(--paper); font-family:var(--serif);
  }
  .masthead h1{
    writing-mode:vertical-rl;
    font-size:clamp(30px, 5.4vh, 46px);
    font-weight:700; letter-spacing:.32em;
    text-shadow:0 0 24px rgba(255,170,100,.25);
  }
  .masthead .sub{
    writing-mode:vertical-rl;
    font-size:clamp(12px, 1.8vh, 15px);
    letter-spacing:.5em; opacity:.62; padding-top:10px;
  }
  .masthead .seal{
    writing-mode:vertical-rl;
    align-self:flex-start;
    font-size:11px; letter-spacing:.28em;
    color:var(--ink); background:var(--accent);
    padding:8px 3px; border-radius:3px; opacity:.92;
  }

  /* —— 底部提示 —— */
  .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:var(--paper); font-family:var(--serif);
    font-size:15px; letter-spacing:.22em; white-space:nowrap;
    background:rgba(14,20,44,.55);
    border:1px solid rgba(240,230,210,.18);
    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:.55; letter-spacing:.1em; }
  .hint svg{ flex:none; opacity:.85; 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:var(--paper);
  }
  .meter{ text-align:right; line-height:1.15; }
  .meter b{
    font-size:30px; font-weight:700; font-variant-numeric:tabular-nums;
    color:#ffcf9e; text-shadow:0 0 14px rgba(255,180,110,.35);
  }
  .meter label{ display:block; font-size:11px; letter-spacing:.32em; opacity:.55; }
  .panel button{
    font-family:var(--serif); font-size:14px; letter-spacing:.3em;
    padding:10px 18px 10px 22px; border-radius:999px;
    color:var(--paper); background:rgba(14,20,44,.55);
    border:1px solid rgba(226,96,63,.55);
    backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
    cursor:pointer; transition:all .25s ease;
    touch-action:manipulation;
  }
  .panel button:hover{ border-color:var(--accent); box-shadow:0 0 18px rgba(226,96,63,.25); }
  .panel button.on{
    background:var(--accent); border-color:var(--accent); color:#1b0f0a;
    box-shadow:0 0 26px rgba(226,96,63,.5);
  }

  /* —— 首次开声引导(仅触屏 & 音频未解锁时) —— */
  .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;
    color:#1b0f0a; background:var(--accent);
    box-shadow:0 0 30px rgba(226,96,63,.55);
    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:12px; letter-spacing:.26em;
    color:var(--paper); opacity:.5; text-decoration:none;
    border:1px solid rgba(240,230,210,.35); border-radius:999px;
    padding:6px 12px 6px 15px;
    transition:all .25s ease;
  }
  .ghlink:hover{ opacity:1; border-color:var(--accent); color:#ffcf9e; box-shadow:0 0 16px rgba(226,96,63,.25); }
  .ghlink.install{ cursor:pointer; }

  /* —— iOS 添加到主屏幕指引 —— */
  .installtip{
    position:fixed; left:50%; top:26%; transform:translateX(-50%);
    max-width:78vw; padding:14px 22px; border-radius:14px;
    font-family:var(--serif); font-size:14px; letter-spacing:.12em; line-height:2;
    color:var(--paper); background:rgba(14,20,44,.92);
    border:1px solid rgba(226,96,63,.55);
    box-shadow:0 0 30px rgba(0,0,0,.5);
    z-index:6; text-align:center; cursor:pointer;
    transition:opacity .4s ease;
  }
  .installtip.gone{ opacity:0; pointer-events:none; }

  /* —— 底部统计行 —— */
  .stats{
    position:fixed; left:50%; bottom:calc(8px + env(safe-area-inset-bottom));
    transform:translateX(-50%);
    font-family:var(--serif); font-size:11px; letter-spacing:.14em;
    color:rgba(240,230,210,.55); white-space:nowrap;
    pointer-events:none;
  }
  .stats b{ font-weight:700; color:rgba(255,207,158,.62); font-variant-numeric:tabular-nums; display:inline-block; }
  /* —— 「我 X 哇」整体动效：转动时三字齐亮齐放大，每哇弹跳一次 —— */
  .stats .mine{
    display:inline-block; transform-origin:center;
    transition:transform .35s ease, color .35s ease, text-shadow .35s ease;
  }
  .stats .mine b{ transition:color .35s ease, text-shadow .35s ease; }
  .stats .mine.hot{
    color:#ffb36b; transform:scale(1.22);
    text-shadow:0 0 10px rgba(255,150,80,.55);
  }
  .stats .mine.hot b{ color:#ffd08a; text-shadow:0 0 16px rgba(255,160,90,.95); }
  .stats .mine.minepop{ animation:minepop .5s cubic-bezier(.2,1.6,.4,1); }
  @keyframes minepop{
    0%{ transform:scale(1.22); }
    35%{ transform:scale(1.7); }
    100%{ transform:scale(1.22); }
  }

  /* —— 左下注脚 —— */
  .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:var(--paper); opacity:.42; line-height:2;
  }

  @media (max-width:640px){
    .lore{ display:none; }
    .ghlink{ font-size:10.5px; padding:5px 10px 5px 13px; }
    .stats{
      left:calc(12px + env(safe-area-inset-left));
      transform:none;
      bottom:calc(14px + env(safe-area-inset-bottom));
      max-width:56vw; white-space:normal; line-height:2; text-align:left;
    }
    .hint{
      font-size:13px; letter-spacing:.14em; padding:10px 18px;
      bottom:calc(132px + env(safe-area-inset-bottom));   /* 避开右下控制区 */
    }
    .hint .snd{ display:none; }
  }
  @media (prefers-reduced-motion:reduce){
    .hint, .hint svg{ animation:none; }
  }

/* 绳索拉力与断裂提示（独立于原有布局） */
.rope-meter{display:flex;flex-direction:column;gap:3px;min-width:100px;color:#e9d7b9;font-size:11px}
.rope-meter b{font-size:15px;font-variant-numeric:tabular-nums}
.rope-meter small{font-size:10px;opacity:.7}
.rope-meter-track{height:5px;border-radius:10px;background:rgba(255,255,255,.18);overflow:hidden}
#ropeForceBar{height:100%;width:0;background:linear-gradient(90deg,#71dba8,#e9b95c,#e96a68);transition:width .1s}
.rope-break-modal{position:fixed;left:50%;top:53%;transform:translate(-50%,-50%);z-index:90;width:min(340px,86vw);padding:25px;text-align:center;background:rgba(19,24,42,.94);color:#f0e6d2;border:1px solid rgba(239,126,110,.65);border-radius:18px;box-shadow:0 15px 65px rgba(0,0,0,.5)}
.rope-break-modal[hidden]{display:none!important}
.rope-break-modal h2{font-size:23px;color:#ff9c88;margin:0 0 12px}
.rope-break-modal p{font-size:13px;line-height:1.7;margin:0 0 20px}
.rope-break-modal button{padding:11px 20px;border:0;border-radius:10px;background:#e2c082;color:#282014;font-weight:bold;cursor:pointer}
@media(max-width:650px){.rope-meter{min-width:82px;font-size:10px}.rope-meter b{font-size:13px}}

/* === 更醒目的拉力仪表盘 === */
.rope-meter{
  min-width:176px; gap:8px; padding:14px 16px;
  border:1px solid rgba(255,202,125,.55);
  border-radius:15px; background:rgba(10,17,38,.88);
  box-shadow:0 0 25px rgba(255,156,77,.12),inset 0 1px rgba(255,255,255,.07);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
}
.rope-meter-title{display:flex;justify-content:space-between;align-items:center;font-size:13px;font-weight:700;letter-spacing:.08em}
.rope-meter-title em{font-size:12px;font-style:normal;color:#ffd08b}
.rope-meter b{font-size:30px!important;font-weight:800;color:#ffdc96;font-variant-numeric:tabular-nums;line-height:1.15;text-shadow:0 0 15px rgba(255,185,89,.38)}
.rope-meter small{font-size:11px;opacity:.85}
.rope-meter-track{height:10px;border-radius:999px;background:rgba(255,255,255,.13)}
#ropeForceBar{background:linear-gradient(90deg,#4cdb9a,#f9c65e 62%,#ff6666);height:100%;border-radius:999px}
.rope-meter.warning{border-color:#ffb457;box-shadow:0 0 26px rgba(255,177,76,.22)}
.rope-meter.danger{border-color:#ff6262;box-shadow:0 0 30px rgba(255,74,74,.32)}
.rope-meter.danger b{color:#ff7474;text-shadow:0 0 18px rgba(255,65,65,.48)}
@media(max-width:650px){.rope-meter{min-width:132px;padding:10px 12px;gap:5px}.rope-meter b{font-size:23px!important}.rope-meter-title{font-size:11px}}

/* 右上角个人头像卡片：按示例图的灰底头像与标题布局 */
.profile-card{position:fixed;right:clamp(12px,3vw,32px);top:clamp(12px,3vw,26px);z-index:15;width:clamp(108px,15vw,180px);padding:10px 10px 12px;text-align:center;background:rgba(12,17,32,.68);border:1px solid rgba(255,255,255,.10);border-radius:14px;box-shadow:0 10px 32px rgba(0,0,0,.28);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);pointer-events:none}
.profile-avatar{display:block;width:100%;aspect-ratio:1/1;object-fit:cover;background:#bfc1c0;border-radius:3px}
.profile-name{display:block;margin-top:9px;color:#d7cbb7;font-size:clamp(11px,1.3vw,17px);letter-spacing:.06em;white-space:nowrap}
@media(max-width:650px){.profile-card{top:10px;right:10px;width:92px;padding:6px 6px 8px}.profile-name{font-size:10px;margin-top:5px}.masthead{max-width:50vw}}