/* Climb · Serene Peak — modular stylesheet */
  :root{
    --bg-deep:#1a3a5c;
    --bg-soft:#e8f4ff;
    --bg-panel:rgba(255,255,255,0.92);
    --bg-panel-solid:#f4f8fc;
    --accent-gold:#e8a317;
    --accent-mint:#1f9d7a;
    --accent-sky:#3d8fd1;
    --text-main:#1a2b3c;
    --text-dim:#5a6f82;
    --panel-border:rgba(61,143,209,0.28);
    --shadow:0 10px 30px rgba(26,58,92,0.12);
    --dock-h: 132px; /* thin control dock height (desktop) */
  }
  *{box-sizing:border-box; margin:0; padding:0;}
  html,body{
    height:100%;
    width:100%;
    overflow:hidden;
    overscroll-behavior:none;
  }
  html{
    -webkit-text-size-adjust:100%;
    text-size-adjust:100%;
    touch-action:manipulation;
  }
  body{
    font-family:"PingFang SC","Microsoft YaHei","Hiragino Sans","Noto Sans JP","Noto Sans KR","Segoe UI",Tahoma,-apple-system,BlinkMacSystemFont,sans-serif;
    color:var(--text-main);
    overflow:hidden;
    background:linear-gradient(180deg, #b9e0ff 0%, #eef7ff 45%, #dceefc 100%);
    touch-action:manipulation;
    -webkit-tap-highlight-color:transparent;
    position:fixed;
    inset:0;
    width:100%;
    height:100%;
  }
  html[dir="rtl"] body{
    font-family:"Segoe UI","Tahoma","Noto Naskh Arabic","Noto Sans Arabic",-apple-system,BlinkMacSystemFont,sans-serif;
  }
  #app{
    position:relative;
    width:100%;
    height:100vh;
    height:100dvh;
    display:flex;
    flex-direction:column;
    overflow:hidden;
  }

  /* ---------- SKY / SCENE (3D path climb) ---------- */
  #scene{
    position:relative;
    flex:1 1 auto;
    overflow:hidden;
    min-height:0;
    perspective:1100px;
    perspective-origin:50% 58%;
  }
  #scene-stage{
    position:absolute; inset:-4%;
    transform-style:preserve-3d;
    will-change:transform;
  }
  .depth-layer{
    position:absolute; inset:0;
    transform-style:preserve-3d;
    pointer-events:none;
  }
  #layer-bg{
    transform:translateZ(-140px) scale(1.14);
  }
  #layer-mid{
    transform:translateZ(-40px) scale(1.04);
  }
  #layer-trail{
    transform:translateZ(0);
  }
  #layer-actor{
    transform:translateZ(36px);
  }
  #layer-fg{
    transform:translateZ(90px) scale(1.02);
    pointer-events:none;
  }
  #scene-bg{
    position:absolute; inset:0;
    background-size:cover;
    background-position:center 42%;
    background-repeat:no-repeat;
    transition:background-image .6s ease, filter 1s ease, background-position 1s ease;
    filter:saturate(1.18) brightness(1.1) contrast(1.06);
  }
  #scene-bg::after{
    content:"";
    position:absolute; inset:0;
    background:
      radial-gradient(ellipse 90% 55% at 50% 100%, rgba(20,40,60,0.22), transparent 60%),
      linear-gradient(180deg, rgba(255,255,255,0.08), transparent 30%);
  }
  #scene-veil{
    position:absolute; inset:0;
    transition:background 1.2s ease, opacity 1.2s ease;
    background:
      linear-gradient(180deg, rgba(160,210,255,0.22) 0%, rgba(255,255,255,0.04) 35%, rgba(255,248,230,0.1) 70%, rgba(40,70,100,0.14) 100%);
  }
  #cloud-layer{
    position:absolute; inset:0;
    overflow:hidden;
    opacity:0.55;
  }
  .cloud{
    position:absolute;
    border-radius:50%;
    background:radial-gradient(circle, rgba(255,255,255,0.75), rgba(255,255,255,0));
    filter:blur(2px);
    animation:cloudDrift linear infinite;
  }
  .cloud.c1{ width:180px; height:70px; top:12%; left:-10%; animation-duration:48s; }
  .cloud.c2{ width:240px; height:90px; top:22%; left:40%; animation-duration:62s; opacity:0.7; }
  .cloud.c3{ width:160px; height:60px; top:8%; left:70%; animation-duration:55s; }
  @keyframes cloudDrift{
    from{ transform:translateX(0); }
    to{ transform:translateX(28vw); }
  }
  #scene-haze{
    position:absolute; left:0; right:0; bottom:0; height:42%;
    background:linear-gradient(180deg, transparent, rgba(255,255,255,0.28) 45%, rgba(232,244,255,0.5));
  }
  #fg-vines{
    position:absolute; inset:0;
    background:
      radial-gradient(ellipse 30% 55% at 0% 100%, rgba(30,80,50,0.28), transparent 70%),
      radial-gradient(ellipse 28% 50% at 100% 100%, rgba(40,70,40,0.22), transparent 70%);
    opacity:0.85;
  }
  .sun{
    position:absolute;
    width:120px; height:120px;
    border-radius:50%;
    background:radial-gradient(circle at 35% 35%, #fff7d1, #ffd666 55%, rgba(255,180,80,0.15) 72%, transparent 78%);
    box-shadow:0 0 80px 32px rgba(255,214,120,0.42);
    top:10%; left:74%;
    transform:translateX(-50%);
    transition:opacity 1.5s ease, top 1.5s ease, left 1.5s ease;
    opacity:0.95;
    z-index:2;
  }

  /* Trail SVG: actual climbing route on the mountain */
  #trail-svg{
    position:absolute; inset:0;
    width:100%; height:100%;
    overflow:visible;
    z-index:3;
  }
  #trail-shadow{
    fill:none;
    stroke:rgba(40,30,20,0.28);
    stroke-width:2.6;
    stroke-linecap:round;
    stroke-linejoin:round;
    filter:blur(0.4px);
  }
  #trail-base{
    fill:none;
    stroke:rgba(255,255,255,0.55);
    stroke-width:1.9;
    stroke-linecap:round;
    stroke-linejoin:round;
    stroke-dasharray:1.2 1.1;
  }
  #trail-done{
    fill:none;
    stroke:url(#trailGrad);
    stroke-width:2.15;
    stroke-linecap:round;
    stroke-linejoin:round;
    stroke-dasharray:0;
    transition:stroke-dashoffset 0.55s cubic-bezier(.22,.8,.28,1);
    filter:drop-shadow(0 0 2px rgba(255,200,80,0.55));
  }
  #trail-glow{
    fill:none;
    stroke:rgba(255,210,100,0.35);
    stroke-width:4.5;
    stroke-linecap:round;
    stroke-linejoin:round;
    transition:stroke-dashoffset 0.55s cubic-bezier(.22,.8,.28,1);
  }
  .trail-dot{
    fill:#fff8e0;
    stroke:#e8a317;
    stroke-width:0.35;
    filter:drop-shadow(0 0 1.5px rgba(255,200,80,0.7));
  }
  .trail-dot.passed{ fill:#1f9d7a; stroke:#0f6b52; }
  .trail-dot.peak-dot{ fill:#ffd166; stroke:#c4840a; }

  #climber{
    position:absolute;
    width:88px;
    height:128px;
    left:50%; top:90%;
    margin:0;
    transform:translate(-50%, -88%);
    transform-origin:50% 90%;
    transition:left 0.45s cubic-bezier(.22,.9,.28,1), top 0.45s cubic-bezier(.22,.9,.28,1), filter .3s ease;
    z-index:12;
    filter:drop-shadow(0 10px 14px rgba(20,40,60,0.55));
    pointer-events:none;
    will-change:left, top, transform;
  }
  #climber-inner{
    width:100%; height:100%;
    transform-origin:50% 90%;
    transition:transform 0.55s cubic-bezier(.22,.8,.28,1);
  }
  #climber img{
    width:100%;
    height:100%;
    object-fit:contain;
    object-position:center bottom;
    user-select:none;
    -webkit-user-drag:none;
    border-radius:8px;
  }
  #climber-shadow{
    position:absolute;
    left:50%;
    top:90%;
    width:4.5%;
    height:2.2%;
    transform:translate(-50%, -20%);
    background:radial-gradient(ellipse, rgba(20,30,40,0.5), transparent 70%);
    border-radius:50%;
    z-index:4;
    pointer-events:none;
    transition:left 0.55s cubic-bezier(.22,.8,.28,1), top 0.55s cubic-bezier(.22,.8,.28,1), width .4s ease, opacity .4s ease;
  }
  #climber.step-bob #climber-inner{
    animation:stepBob .38s ease;
  }
  @keyframes stepBob{
    0%{ transform:translateY(0) scale(var(--cscale,1), var(--cscale,1)); }
    35%{ transform:translateY(-10px) scale(calc(var(--cscale,1)*1.05), calc(var(--cscale,1)*1.02)); }
    100%{ transform:translateY(0) scale(var(--cscale,1), var(--cscale,1)); }
  }
  #flag{
    position:absolute;
    left:50%;
    top:10%;
    transform:translate(-50%, -100%) scale(0);
    font-size:36px;
    transition:transform .8s cubic-bezier(.34,1.56,.64,1), left .5s ease, top .5s ease;
    z-index:6;
    filter:drop-shadow(0 4px 8px rgba(0,0,0,0.35));
  }
  #peak-glow{
    position:absolute;
    left:50%; top:8%;
    width:140px; height:140px;
    transform:translate(-50%, -50%) scale(0);
    border-radius:50%;
    background:radial-gradient(circle, rgba(255,230,140,0.7), transparent 70%);
    transition:transform .9s ease, left .5s ease, top .5s ease;
    z-index:4;
    pointer-events:none;
  }
  #altitude-badge{
    position:absolute;
    z-index:7;
    transform:translate(-50%, 8px);
    background:rgba(12,28,44,0.28);
    border:1px solid rgba(255,220,120,0.45);
    color:#fff;
    font-size:11px;
    font-weight:800;
    padding:3px 8px;
    backdrop-filter:blur(8px);
    -webkit-backdrop-filter:blur(8px);
    text-shadow:0 1px 2px rgba(0,0,0,0.7);
    border-radius:999px;
    box-shadow:0 4px 12px rgba(20,40,60,0.18);
    pointer-events:none;
    white-space:nowrap;
    transition:left 0.55s cubic-bezier(.22,.8,.28,1), top 0.55s cubic-bezier(.22,.8,.28,1);
    font-family:"SF Mono",Consolas,monospace;
  }
  #route-hint{
    position:absolute;
    left:50%;
    bottom:10px;
    transform:translateX(-50%);
    z-index:8;
    background:rgba(12,28,44,0.28);
    border:1px solid var(--panel-border);
    border-radius:999px;
    padding:6px 14px;
    font-size:11px;
    font-weight:700;
    color:var(--text-dim);
    box-shadow:var(--shadow);
    pointer-events:none;
    max-width:92%;
    text-align:center;
    transition:opacity .5s ease;
  }


  /* 3D-only build: hide 2.5D stage permanently */
  #scene-stage{
    display:none !important;
    visibility:hidden !important;
    pointer-events:none !important;
  }
  #world3d{
    display:block !important;
  }
  #route-hint{ display:none !important; }
  #orbit-hint{ display:block !important; }
  #view3d-btn{ display:none !important; }

  /* ---------- TRUE 3D (WebGL) LAYER ---------- */
  #world3d{
    position:absolute; inset:0;
    z-index:1;
    display:none;
    background:radial-gradient(ellipse at 50% 20%, #9fd4ff 0%, #6eb0e8 45%, #dfefff 100%);
  }
  #world3d canvas{
    width:100% !important;
    height:100% !important;
    display:block;
    touch-action:none;
    /* top chrome owns the upper strip for reliable button hits */
  }
  /* Invisible top dead-zone over 3D so orbit gestures don't steal chrome taps */
  #touch-chrome-guard{
    display:none;
    position:absolute;
    top:0; left:0; right:0;
    height:calc(118px + env(safe-area-inset-top, 0px));
    z-index:95;
    pointer-events:none; /* buttons above still receive events; guard is layout only */
  }
  @media (max-width:720px){
    #touch-chrome-guard{ display:block; }
  }
  #scene.mode-3d #world3d{ display:block; }
  #scene.mode-3d #scene-stage{
    opacity:0;
    visibility:hidden;
    pointer-events:none;
  }
  #scene.mode-3d #route-hint{ bottom:calc(var(--dock-h) + 150px); }
  #view3d-btn.active{
    background:linear-gradient(180deg, #5ec8ff, #3d8fd1);
    color:#fff;
    border-color:transparent;
  }
  #orbit-hint{
    position:absolute;
    right:12px;
    bottom:12px;
    z-index:9;
    background:rgba(12,28,44,0.28);
    border:1px solid rgba(255,255,255,0.28);
    border-radius:10px;
    padding:7px 10px;
    font-size:11px;
    font-weight:700;
    color:#fff;
    text-shadow:0 1px 2px rgba(0,0,0,0.65);
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
    box-shadow:var(--shadow);
    display:none;
    max-width:200px;
    line-height:1.35;
    pointer-events:none;
  }
  #scene.mode-3d #orbit-hint{ display:block; }

  /* ---------- TOP BAR + CHROME CONTROLS ---------- */
  #topbar{
    position:absolute; top:0; left:0; right:0;
    display:flex; align-items:flex-start; justify-content:space-between;
    padding:calc(10px + env(safe-area-inset-top, 0px)) 16px 8px 16px;
    z-index:10000; /* above WebGL canvas so chrome always wins taps */
    background:linear-gradient(to bottom, rgba(255,255,255,0.35), rgba(255,255,255,0.06) 72%, transparent);
    gap:10px;
    flex-wrap:nowrap;
    pointer-events:none; /* empty chrome passes through; controls re-enable below */
  }
  #topbar #title{
    pointer-events:none;
    max-width:min(52vw, 280px);
  }
  #title{
    font-size:18px; font-weight:800; letter-spacing:1.5px;
    color:#16324f;
    text-shadow:0 1px 0 rgba(255,255,255,0.7);
  }
  #title small{
    display:block; font-weight:500; font-size:11px; letter-spacing:0.8px; color:var(--text-dim); margin-top:2px;
  }
  /* Desktop: controls stay in top-right of topbar */
  #top-right{
    display:flex;
    align-items:center;
    gap:8px;
    flex-wrap:wrap;
    justify-content:flex-end;
    pointer-events:auto;
    position:relative;
    z-index:25000;
  }
  /* 每个热区独立、不互相覆盖（消灭全屏压死外观） */
  #top-right > .top-hit,
  #top-right > #fx-settings,
  #top-right > #lang-select,
  #top-right > #cinema-fs-btn,
  #top-right > #customize-btn{
    flex:0 0 auto !important;
    position:relative !important;
    z-index:25001 !important;
    width:auto !important;
    max-width:none !important;
    min-width:44px;
    overflow:visible !important;
    pointer-events:auto !important;
    touch-action:manipulation !important;
  }
  #top-right > #stats{
    flex:0 1 auto;
    pointer-events:none;
  }
  .chrome-btn, #customize-btn, #view3d-btn, #share-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:5px;
    padding:8px 12px;
    border:1px solid rgba(255,255,255,0.45);
    background:rgba(255,255,255,0.55);
    color:var(--text-main);
    font-size:12px;
    font-weight:700;
    cursor:pointer;
    border-radius:12px;
    box-shadow:0 4px 14px rgba(20,40,60,0.1);
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
    touch-action:manipulation;
    -webkit-tap-highlight-color:rgba(31,157,122,0.22);
    -webkit-user-select:none;
    user-select:none;
    min-height:44px;
    min-width:44px;
    position:relative;
    z-index:10001;
  }
  #customize-btn:hover, #view3d-btn:hover, #share-btn:hover,
  .chrome-btn:hover{ background:rgba(255,255,255,0.82); border-color:var(--accent-sky); }
  #customize-btn:active, #view3d-btn:active, #share-btn:active,
  .chrome-btn:active{ transform:scale(0.96); filter:brightness(0.98); }
  .chrome-ico{ font-size:15px; line-height:1; pointer-events:none; }
  .chrome-lbl{ pointer-events:none; white-space:nowrap; }
  .chrome-lbl-short{ display:none; }
  #lang-select{
    appearance:none;
    -webkit-appearance:none;
    border:1px solid rgba(255,255,255,0.45);
    background-color:rgba(255,255,255,0.55);
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%235a6f82' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
    background-repeat:no-repeat;
    background-position:right 10px center;
    background-size:10px;
    color:var(--text-main);
    /* >=16px prevents iOS auto-zoom on focus */
    font-size:16px;
    font-weight:700;
    padding:8px 28px 8px 12px;
    border-radius:12px;
    cursor:pointer;
    box-shadow:0 4px 14px rgba(20,40,60,0.1);
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
    min-width:76px;
    max-width:130px;
    min-height:44px;
    touch-action:manipulation;
    position:relative;
    z-index:10001;
    -webkit-tap-highlight-color:rgba(61,143,209,0.2);
  }
  #lang-select:focus{ outline:2px solid rgba(61,143,209,0.35); outline-offset:1px; }

  /* Foldable FX settings (screen shake on/off) */
  #fx-settings{
    position:relative;
    z-index:101;
    pointer-events:auto;
  }
  #fx-settings > summary{
    list-style:none;
    cursor:pointer;
    user-select:none;
    -webkit-user-select:none;
    touch-action:manipulation;
    border:1px solid rgba(255,255,255,0.45);
    background:rgba(255,255,255,0.55);
    color:var(--text-main);
    font-size:12px;
    font-weight:700;
    padding:8px 12px;
    border-radius:12px;
    box-shadow:0 4px 14px rgba(20,40,60,0.1);
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
    min-height:44px;
    min-width:44px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:4px;
    white-space:nowrap;
    -webkit-tap-highlight-color:rgba(61,143,209,0.2);
  }
  #fx-settings > summary::-webkit-details-marker{ display:none; }
  #fx-settings > summary::after{
    content:'▾';
    font-size:10px;
    color:var(--text-dim);
    margin-left:2px;
  }
  #fx-settings[open] > summary::after{ content:'▴'; }
  #fx-panel{
    position:absolute;
    top:calc(100% + 6px);
    right:0;
    min-width:168px;
    background:rgba(255,255,255,0.98);
    border:1px solid var(--panel-border);
    border-radius:12px;
    box-shadow:0 10px 28px rgba(20,40,60,0.18);
    padding:10px 12px;
    z-index:90;
  }
  html[dir="rtl"] #fx-panel{ right:auto; left:0; }
  #fx-panel label{
    display:flex;
    align-items:center;
    gap:8px;
    font-size:13px;
    font-weight:700;
    color:var(--text-main);
    cursor:pointer;
    user-select:none;
  }
  #shake-toggle{
    width:18px;
    height:18px;
    accent-color:var(--accent-mint);
    cursor:pointer;
    flex-shrink:0;
  }
  #shake-state{
    margin-left:auto;
    font-size:11px;
    font-weight:800;
    color:var(--accent-mint);
  }
  #fx-settings.shake-off #shake-state{ color:#c0392b; }
  #stats{
    display:flex; gap:14px; font-family:"SF Mono",Consolas,monospace;
    font-size:13px;
    background:rgba(255,255,255,0.88);
    border:1px solid var(--panel-border);
    border-radius:12px;
    padding:8px 12px;
    box-shadow:var(--shadow);
  }
  #stats .stat b{
    display:block; font-size:16px; color:#c4840a; font-weight:800;
  }
  #stats .stat span{ color:var(--text-dim); font-size:11px; }

  /* ---------- MESSAGE TOAST ---------- */
  #msg-layer{
    position:absolute; top:76px; left:50%; transform:translateX(-50%);
    z-index:20;
    display:flex; flex-direction:column; align-items:center; gap:8px;
    pointer-events:none;
    max-width:min(92vw, 420px);
  }
  .toast{
    background:rgba(12, 28, 44, 0.28);
    border:1px solid rgba(255,255,255,0.28);
    border-left:3px solid rgba(255,209,102,0.9);
    padding:10px 18px;
    border-radius:12px;
    font-size:13px;
    font-weight:700;
    color:#fff;
    text-shadow:0 1px 3px rgba(0,0,0,0.75), 0 0 10px rgba(0,0,0,0.25);
    box-shadow:0 8px 24px rgba(0,0,0,0.12);
    backdrop-filter:blur(12px) saturate(1.15);
    -webkit-backdrop-filter:blur(12px) saturate(1.15);
    animation:toastIn .4s ease, toastOut .5s ease 3.2s forwards;
    text-align:center;
  }
  html[dir="rtl"] .toast{
    border-left:1px solid rgba(255,255,255,0.28);
    border-right:3px solid rgba(255,209,102,0.9);
  }
  .toast b{ color:#ffe08a; text-shadow:0 1px 3px rgba(0,0,0,0.8); }
  @keyframes toastIn{ from{opacity:0; transform:translateY(-10px);} to{opacity:1; transform:translateY(0);} }
  @keyframes toastOut{ to{opacity:0; transform:translateY(-6px);} }

  /* ---------- BOTTOM DOCK + FLOATING STEP (desktop + base) ---------- */
  /* Scene fills most of the screen; controls are a thin dock + floating FAB */
  #panel{
    display:flex;
    flex:0 0 auto;
    align-items:stretch;
    height:var(--dock-h);
    max-height:var(--dock-h);
    overflow:hidden;
    background:linear-gradient(180deg, rgba(248,251,255,0.97) 0%, #e8f1fa 100%);
    border-top:1px solid rgba(61,143,209,0.22);
    padding:10px 18px;
    gap:16px;
    z-index:10;
    box-shadow:0 -8px 24px rgba(26,58,92,0.1);
    position:static;
  }
  /*
   * Floating step control (desktop + base):
   * Sit on the RIGHT of the climb path so the 2.5D climber (center/bottom) stays visible.
   * Info pills sit BESIDE the button (left column), not stacked under it.
   */
  #action-col{
    position:fixed;
    left:auto;
    right:max(20px, 2.5vw);
    bottom:calc(var(--dock-h) + 20px);
    z-index:18;
    display:flex;
    flex-direction:row;
    align-items:center;
    justify-content:flex-end;
    gap:12px;
    padding:0;
    pointer-events:none;
    flex:none;
    width:auto;
    max-width:min(460px, 52vw);
  }
  #action-col > *{ pointer-events:auto; }
  #action-meta{
    display:flex;
    flex-direction:column;
    align-items:flex-end;
    justify-content:center;
    gap:6px;
    min-width:0;
  }
  #step-btn{
    width:118px; height:118px;
    border-radius:50%;
    border:none;
    background:radial-gradient(circle at 35% 30%, #5ee0b5, var(--accent-mint) 70%);
    color:#fff;
    font-size:14px; font-weight:800;
    cursor:pointer;
    box-shadow:0 8px 0 #157a5e, 0 16px 28px rgba(20,40,60,0.28);
    transition:transform .08s ease, box-shadow .08s ease;
    user-select:none;
    line-height:1.25;
    padding:8px;
    touch-action:manipulation;
    -webkit-user-select:none;
    flex-shrink:0;
    order:2; /* button on the right of meta pills */
  }
  #action-meta{ order:1; }
  #step-btn:active{
    transform:translateY(6px);
    box-shadow:0 2px 0 #157a5e, 0 8px 16px rgba(20,40,60,0.25);
  }
  /* Rewarded video CTA — must show video icon per CrazyGames ad UI rules */
  #ad-reward-btn{
    order:3;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:2px;
    min-width:72px;
    max-width:92px;
    padding:8px 8px;
    border-radius:14px;
    border:1px solid rgba(232,163,23,0.55);
    background:linear-gradient(160deg, #fff8e8 0%, #ffe7b0 55%, #f0c15a 100%);
    color:#5a3a08;
    font-size:10px;
    font-weight:800;
    line-height:1.2;
    cursor:pointer;
    box-shadow:0 4px 12px rgba(232,163,23,0.28);
    touch-action:manipulation;
    user-select:none;
    -webkit-user-select:none;
    flex-shrink:0;
    text-align:center;
  }
  #ad-reward-btn .ad-ico{
    font-size:18px;
    line-height:1;
  }
  #ad-reward-btn:active{ transform:translateY(2px); filter:brightness(0.96); }
  #ad-reward-btn:disabled{
    opacity:0.55;
    cursor:not-allowed;
    filter:grayscale(0.25);
  }
  #ad-buff-pill{
    order:0;
    font-size:11px;
    font-weight:800;
    color:#fff8e0;
    background:rgba(232,163,23,0.22);
    border:1px solid rgba(255,220,120,0.45);
    border-radius:999px;
    padding:4px 10px;
    box-shadow:0 2px 10px rgba(0,0,0,0.08);
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
    text-shadow:0 1px 2px rgba(0,0,0,0.65);
    white-space:nowrap;
    display:none;
  }
  #ad-buff-pill.show{ display:inline-block; }
  body.ad-paused #step-btn,
  body.ad-paused #ad-reward-btn,
  body.ad-paused #cliff-tap,
  body.ad-paused .item{
    pointer-events:none;
  }
  #combo{
    font-size:12px; color:#fff; font-weight:800; height:auto; min-height:0;
    background:rgba(255,255,255,0.12);
    border:1px solid rgba(255,255,255,0.28);
    border-radius:999px;
    padding:4px 12px;
    box-shadow:0 2px 10px rgba(0,0,0,0.06);
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
    text-shadow:0 1px 3px rgba(0,0,0,0.7);
    white-space:nowrap;
  }
  #combo:empty{ display:none; padding:0; border:0; box-shadow:none; background:transparent; }
  #per-click, #session-gain{
    font-size:12px; color:#fff; font-weight:700; text-align:center;
    background:rgba(255,255,255,0.12);
    border:1px solid rgba(255,255,255,0.28);
    border-radius:999px;
    padding:4px 12px;
    box-shadow:0 2px 10px rgba(0,0,0,0.06);
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
    text-shadow:0 1px 3px rgba(0,0,0,0.7);
    white-space:nowrap;
  }
  #session-gain b, #per-click #click-gain, #click-gain{
    color:#9ef0d0;
    font-family:"SF Mono",Consolas,monospace;
    text-shadow:0 1px 3px rgba(0,0,0,0.75);
  }
  /* RTL: float cluster to the left so path stays clear */
  html[dir="rtl"] #action-col{
    right:auto;
    left:max(20px, 2.5vw);
    flex-direction:row-reverse;
  }
  html[dir="rtl"] #action-meta{ align-items:flex-start; }

  #shop-col{ flex:1; display:flex; flex-direction:column; min-width:0; justify-content:center; }
  #shop-col h3, #achv-col h3{
    font-size:11px; letter-spacing:1.5px; color:var(--text-dim); font-weight:700; margin-bottom:6px;
  }
  #shop-items{ display:flex; gap:10px; overflow-x:auto; padding-bottom:2px; align-items:stretch; }
  .item{
    flex:0 0 176px;
    background:#fff;
    border:1px solid var(--panel-border);
    border-radius:12px;
    padding:10px 12px;
    cursor:pointer;
    transition:border-color .15s ease, transform .1s ease, box-shadow .15s ease;
    box-shadow:0 4px 12px rgba(26,58,92,0.06);
  }
  .item:hover{ border-color:var(--accent-mint); box-shadow:0 6px 16px rgba(31,157,122,0.12); }
  .item:active{ transform:scale(0.97); }
  .item.disabled{ opacity:0.45; cursor:not-allowed; }
  .item .name{ font-size:13px; font-weight:700; margin-bottom:3px; color:var(--text-main); }
  .item .desc{ font-size:11px; color:var(--text-dim); margin-bottom:6px; line-height:1.35; }
  .item .cost{ font-size:12px; color:#c4840a; font-family:"SF Mono",Consolas,monospace; }
  .item .owned{ font-size:11px; color:var(--accent-mint); float:right; }

  .shop-scene-label .name{ font-size:11px !important; letter-spacing:0.5px; color:#c4840a !important; }
  .gear-s_boots, .gear-s_pole, .gear-s_oxygen, .gear-s_crew{
    border-color: rgba(100, 180, 230, 0.45) !important;
    background: linear-gradient(160deg, rgba(230,245,255,0.92), rgba(200,230,250,0.88)) !important;
  }
  .gear-c_axes, .gear-c_gloves, .gear-c_suit, .gear-c_crew{
    border-color: rgba(230, 100, 40, 0.5) !important;
    background: linear-gradient(160deg, rgba(40,20,16,0.88), rgba(80,30,18,0.82)) !important;
    color: #ffe8d8 !important;
  }
  .gear-c_axes .name, .gear-c_gloves .name, .gear-c_suit .name, .gear-c_crew .name{ color:#ffd0b0 !important; }
  .gear-c_axes .desc, .gear-c_gloves .desc, .gear-c_suit .desc, .gear-c_crew .desc{ color:#e8c8b0 !important; }
  .gear-c_axes .cost, .gear-c_gloves .cost, .gear-c_suit .cost, .gear-c_crew .cost{ color:#ffb080 !important; }

  html[dir="rtl"] .item .owned{ float:left; }

  #achv-col{
    flex:0 0 160px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    min-width:0;
  }
  #achv-count{ font-size:22px; font-weight:800; color:#c4840a; line-height:1.15; }
  #achv-count span{ font-size:12px; color:var(--text-dim); font-weight:400; }
  #achv-hint{ font-size:11px; color:var(--text-dim); margin-top:4px; line-height:1.4;
    display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
  }

  /* Hints: keep clear of right-side FAB cluster */
  #route-hint{
    bottom:calc(var(--dock-h) + 24px);
    left:max(16px, 3vw);
    right:auto;
    transform:none;
    max-width:min(320px, 36vw);
    text-align:left;
  }
  html[dir="rtl"] #route-hint{
    left:auto;
    right:max(16px, 3vw);
    text-align:right;
  }
  #orbit-hint{
    bottom:calc(var(--dock-h) + 14px);
    left:max(16px, 3vw);
    right:auto;
    z-index:16;
  }
  html[dir="rtl"] #orbit-hint{
    left:auto;
    right:max(16px, 3vw);
  }

  ::-webkit-scrollbar{ height:6px; }
  ::-webkit-scrollbar-thumb{ background:rgba(61,143,209,0.35); border-radius:3px; }

  .spark{
    position:absolute;
    pointer-events:none;
    font-weight:800;
    color:#c4840a;
    text-shadow:0 0 8px rgba(255,209,102,0.8);
    z-index:25;
    transition:transform .7s cubic-bezier(.22,.61,.36,1), opacity .7s ease;
  }
  #flash{
    position:absolute; inset:0;
    background:#fff;
    opacity:0;
    pointer-events:none;
    z-index:24;
  }
  @keyframes flashPulse{ 0%{opacity:.35;} 100%{opacity:0;} }
  .flash-on{ animation:flashPulse .25s ease; }

  #cliff{
    position:absolute;
    top:50%; left:50%;
    transform:translate(-50%,-50%) scale(0.85);
    background:rgba(12, 28, 44, 0.38);
    border:1px solid rgba(255,255,255,0.28);
    border-radius:16px;
    padding:20px 28px;
    text-align:center;
    z-index:40;
    box-shadow:0 16px 40px rgba(0,0,0,0.2);
    backdrop-filter:blur(14px) saturate(1.15);
    -webkit-backdrop-filter:blur(14px) saturate(1.15);
    display:none;
    min-width:260px;
    max-width:min(92vw, 360px);
    color:#fff;
    text-shadow:0 1px 3px rgba(0,0,0,0.65);
  }
  #cliff.show{ display:block; animation:cliffIn .35s cubic-bezier(.34,1.56,.64,1) forwards; }
  @keyframes cliffIn{ from{ transform:translate(-50%,-50%) scale(0.7); opacity:0;} to{ transform:translate(-50%,-50%) scale(1); opacity:1;} }
  #cliff .cliff-title{ font-size:15px; font-weight:800; margin-bottom:4px; color:#ffe08a; text-shadow:0 1px 3px rgba(0,0,0,0.7); }
  #cliff .cliff-desc{ font-size:12px; color:rgba(255,255,255,0.88); margin-bottom:12px; text-shadow:0 1px 2px rgba(0,0,0,0.6); }
  #cliff-bar-track, #cliff-timer-track{
    width:100%; border-radius:5px; overflow:hidden; margin-bottom:14px;
    background:#e8f1f8;
    border:1px solid var(--panel-border);
  }
  #cliff-bar-track{ height:10px; }
  #cliff-timer-track{ height:4px; border-radius:2px; }
  #cliff-bar-fill{
    height:100%; width:0%;
    background:linear-gradient(90deg, var(--accent-mint), var(--accent-gold));
    transition:width .12s ease;
  }
  html[dir="rtl"] #cliff-bar-fill{
    background:linear-gradient(270deg, var(--accent-mint), var(--accent-gold));
  }
  #cliff-timer-fill{ height:100%; width:100%; background:#ff8a5c; }
  #cliff-tap{
    width:100%;
    padding:14px;
    border-radius:10px;
    border:none;
    background:linear-gradient(180deg, #ffd56a, var(--accent-gold));
    color:#3a2a00;
    font-size:15px;
    font-weight:800;
    cursor:pointer;
  }
  #cliff-tap:active{ transform:scale(.97); }

  .float-num{
    position:absolute;
    pointer-events:none;
    font-weight:800;
    font-family:"SF Mono",Consolas,monospace;
    color:#c4840a;
    text-shadow:0 0 10px rgba(255,209,102,0.9), 0 2px 4px rgba(0,0,0,0.25);
    z-index:26;
    transition:transform .9s cubic-bezier(.19,1,.22,1), opacity .9s ease;
    white-space:nowrap;
  }
  @keyframes pulseNum{ 0%{ transform:scale(1); } 35%{ transform:scale(1.35); color:#c4840a;} 100%{ transform:scale(1); } }
  .pulse{ display:inline-block; animation:pulseNum .35s ease; }
  /* Milestone screen shake — mild / medium / hard (hard is intentionally strong) */
  @keyframes shake-mild{
    0%,100%{ transform:translate3d(0,0,0); }
    25%{ transform:translate3d(-5px,3px,0); }
    50%{ transform:translate3d(6px,-3px,0); }
    75%{ transform:translate3d(-4px,2px,0); }
  }
  @keyframes shake-med{
    0%,100%{ transform:translate3d(0,0,0) rotate(0deg); }
    15%{ transform:translate3d(-12px,7px,0) rotate(-0.35deg); }
    30%{ transform:translate3d(14px,-9px,0) rotate(0.4deg); }
    45%{ transform:translate3d(-11px,-6px,0) rotate(-0.25deg); }
    60%{ transform:translate3d(12px,8px,0) rotate(0.3deg); }
    75%{ transform:translate3d(-7px,4px,0) rotate(-0.15deg); }
  }
  @keyframes shake-hard{
    0%,100%{ transform:translate3d(0,0,0) rotate(0deg) scale(1); }
    8%{ transform:translate3d(-22px,14px,0) rotate(-0.9deg) scale(1.012); }
    16%{ transform:translate3d(26px,-16px,0) rotate(1.05deg) scale(1.018); }
    24%{ transform:translate3d(-20px,-12px,0) rotate(-0.75deg) scale(1.01); }
    32%{ transform:translate3d(24px,15px,0) rotate(0.85deg) scale(1.02); }
    40%{ transform:translate3d(-18px,10px,0) rotate(-0.65deg) scale(1.012); }
    48%{ transform:translate3d(20px,-14px,0) rotate(0.7deg) scale(1.015); }
    56%{ transform:translate3d(-14px,-8px,0) rotate(-0.45deg) scale(1.008); }
    64%{ transform:translate3d(16px,11px,0) rotate(0.5deg) scale(1.01); }
    72%{ transform:translate3d(-10px,6px,0) rotate(-0.3deg); }
    80%{ transform:translate3d(10px,-5px,0) rotate(0.25deg); }
    90%{ transform:translate3d(-5px,3px,0) rotate(-0.1deg); }
  }
  .shake-mild-on{ animation:shake-mild .28s cubic-bezier(.36,.07,.19,.97) both; }
  .shake-med-on{ animation:shake-med .42s cubic-bezier(.36,.07,.19,.97) both; }
  .shake-hard-on{ animation:shake-hard .62s cubic-bezier(.36,.07,.19,.97) both; }
  /* Whole app shakes for desktop “impact” feel */
  #app.shake-mild-on, #app.shake-med-on, #app.shake-hard-on{
    will-change:transform;
  }

  /* ---------- SETUP / CUSTOMIZE MODAL (Role) ---------- */
  /* z-index 必须高于 body.pseudo-fullscreen #app (99990)，否则全屏下弹窗被主画面盖住 */
  #setup-overlay{
    position:fixed; inset:0;
    z-index:100050 !important;
    background:rgba(18,40,64,0.45);
    backdrop-filter:blur(8px);
    display:none;
    align-items:center;
    justify-content:center;
    padding:16px;
    touch-action:manipulation;
    pointer-events:auto !important;
  }
  #setup-overlay.show{ display:flex; }
  #setup-card{
    width:min(920px, 96vw);
    max-height:min(92vh, 820px);
    overflow:auto;
    -webkit-overflow-scrolling:touch;
    background:linear-gradient(180deg, #ffffff 0%, #f3f9ff 100%);
    border:1px solid rgba(255,255,255,0.8);
    border-radius:20px;
    box-shadow:0 30px 80px rgba(20,45,70,0.35);
    padding:22px 24px 20px;
    position:relative;
    z-index:100051 !important;
    touch-action:pan-y;
    pointer-events:auto !important;
  }
  /* 竖屏：整体下移，避免顶部 Role/FX/Lang/全屏 挡住「攀登 · 圣洁雪山」标题 */
  @media (orientation: portrait){
    #setup-overlay.show{
      align-items:flex-start !important;
      padding-top:calc(96px + env(safe-area-inset-top, 0px)) !important;
      padding-bottom:max(16px, env(safe-area-inset-bottom, 0px));
    }
    #setup-card{
      max-height:calc(100dvh - 110px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)) !important;
      margin-top:0 !important;
    }
  }
  #setup-card h2{
    font-size:22px;
    font-weight:800;
    color:#16324f;
    margin-bottom:4px;
  }
  #setup-sub{
    font-size:13px;
    color:var(--text-dim);
    margin-bottom:18px;
    line-height:1.5;
  }
  .setup-section-title{
    font-size:12px;
    letter-spacing:1.5px;
    font-weight:800;
    color:var(--text-dim);
    margin:14px 0 10px;
  }
  .choice-grid{
    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(140px, 1fr));
    gap:10px;
  }
  .choice-card{
    border:2px solid transparent;
    border-radius:14px;
    overflow:hidden;
    cursor:pointer;
    background:#fff;
    box-shadow:0 4px 14px rgba(26,58,92,0.08);
    transition:border-color .15s ease, box-shadow .15s ease;
    text-align:center;
    -webkit-tap-highlight-color:rgba(31,157,122,0.25);
    touch-action:manipulation;
    user-select:none;
    -webkit-user-select:none;
  }
  .choice-card .thumb, .choice-card .label{
    pointer-events:none; /* whole card is one clean tap target */
  }
  @media (hover:hover){
    .choice-card:hover{
      box-shadow:0 8px 20px rgba(26,58,92,0.14);
    }
  }
  .choice-card.selected{
    border-color:var(--accent-mint);
    box-shadow:0 0 0 3px rgba(31,157,122,0.18), 0 8px 20px rgba(31,157,122,0.16);
  }
  .choice-card .thumb{
    width:100%;
    height:92px;
    object-fit:cover;
    display:block;
    background:#d9ebf8;
  }
  .choice-card.climber .thumb{
    height:120px;
    object-fit:contain;
    object-position:center bottom;
    background:linear-gradient(180deg, #cfe9ff, #eef7ff);
    padding-top:6px;
  }
  .choice-card .label{
    font-size:12px;
    font-weight:700;
    padding:8px 6px 10px;
    color:var(--text-main);
    line-height:1.35;
  }
  .choice-card .label small{
    display:block;
    font-weight:500;
    color:var(--text-dim);
    font-size:10px;
    margin-top:2px;
  }
  #setup-actions{
    display:flex;
    justify-content:flex-end;
    gap:10px;
    margin-top:18px;
    flex-wrap:wrap;
  }
  .setup-btn{
    border:none;
    border-radius:12px;
    padding:12px 20px;
    font-size:14px;
    font-weight:800;
    cursor:pointer;
  }
  .setup-btn.primary{
    background:linear-gradient(180deg, #4fd6a8, var(--accent-mint));
    color:#fff;
    box-shadow:0 6px 0 #157a5e;
  }
  .setup-btn.primary:active{ transform:translateY(3px); box-shadow:0 3px 0 #157a5e; }
  .setup-btn.ghost{
    background:#fff;
    color:var(--text-main);
    border:1px solid var(--panel-border);
  }


  #mobile-stats{
    display:none;
    position:absolute;
    top:48px;
    left:50%;
    transform:translateX(-50%);
    z-index:12;
    background:rgba(12,28,44,0.28);
    border:1px solid rgba(255,255,255,0.28);
    border-radius:999px;
    padding:4px 10px;
    font-size:11px;
    font-weight:700;
    color:#fff;
    text-shadow:0 1px 2px rgba(0,0,0,0.7);
    box-shadow:0 2px 10px rgba(0,0,0,0.08);
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
    gap:6px;
    align-items:center;
    pointer-events:none;
    white-space:nowrap;
  }
  #mobile-stats b{ color:#ffe08a; font-family:"SF Mono",Consolas,monospace; text-shadow:0 1px 2px rgba(0,0,0,0.75); }
  #mobile-stats .dot{ color:rgba(255,255,255,0.75); }

  /* ========== MOBILE refinements (same FAB + dock model, denser) ========== */
  @media (max-width:720px){
    :root{ --dock-h: 128px; }
    #app{
      height:100vh;
      height:100dvh;
      max-height:100dvh;
    }
    #scene{
      flex:1 1 auto;
      min-height:0;
    }
    #panel{
      height:auto;
      max-height:var(--dock-h);
      padding:6px 8px calc(6px + env(safe-area-inset-bottom, 0px));
      gap:8px;
      display:flex;
      flex-direction:row;
      align-items:center;
      overflow-x:auto;
      overflow-y:hidden;
    }
    #action-col{
      left:auto;
      right:max(10px, 2vw);
      bottom:calc(var(--dock-h) + 12px + env(safe-area-inset-bottom, 0px));
      gap:8px;
      max-width:min(300px, 78vw);
      flex-direction:row;
      align-items:center;
    }
    #action-meta{
      gap:4px;
      align-items:flex-end;
    }
    #step-btn{
      width:76px;
      height:76px;
      font-size:11px;
      padding:6px;
      box-shadow:0 5px 0 #157a5e, 0 10px 22px rgba(20,40,60,0.35);
    }
    #step-btn:active{
      transform:translateY(3px);
      box-shadow:0 2px 0 #157a5e, 0 4px 10px rgba(20,40,60,0.3);
    }
    #ad-reward-btn{
      min-width:58px;
      max-width:68px;
      padding:6px 4px;
      font-size:9px;
      border-radius:12px;
    }
    #ad-reward-btn .ad-ico{ font-size:15px; }
    #ad-buff-pill{ font-size:9px; padding:3px 8px; }
    #per-click, #session-gain, #combo{ font-size:10px; padding:3px 8px; }

    #shop-col{ flex:1 1 auto; min-width:0; }
    #shop-col h3{
      font-size:10px;
      margin-bottom:3px;
      letter-spacing:1px;
    }
    #shop-items{ gap:6px; padding-bottom:0; }
    .item{
      flex:0 0 132px;
      padding:6px 8px;
      border-radius:9px;
    }
    .item .name{ font-size:11px; margin-bottom:1px; }
    .item .desc{ font-size:9px; margin-bottom:3px; line-height:1.25; }
    .item .cost{ font-size:10px; }

    #achv-col{
      flex:0 0 72px;
      max-width:72px;
      align-items:flex-end;
      padding-left:4px;
    }
    #achv-col h3{ font-size:9px; margin:0 0 2px; letter-spacing:0.5px; text-align:right; }
    #achv-count{ font-size:16px; }
    #achv-hint{ display:none; }

    /* Mobile top chrome: title row + FULL-WIDTH control dock (safe-area, large hit targets) */
    #topbar{
      padding:calc(10px + env(safe-area-inset-top, 0px)) 12px 4px 12px;
      gap:0;
      align-items:center;
      flex-wrap:nowrap;
      z-index:10000;
      pointer-events:none;
      background:linear-gradient(to bottom, rgba(10,24,40,0.18), transparent 88%);
    }
    #title{
      font-size:14px;
      letter-spacing:0.2px;
      flex:1 1 auto;
      min-width:0;
      max-width:100%;
      pointer-events:none;
    }
    #title small{ display:none; }
    /*
     * Top chrome (Role / FX / EN / Fullscreen):
     * - Parent #top-right is fully transparent (never a dark strip over the peak).
     * - Each chip uses dark glass like landscape quality chips.
     * - Icon + label always row (gear + FX horizontal).
     */
    #topbar{
      background:linear-gradient(to bottom, rgba(10,24,40,0.12), transparent 88%);
    }
    #title{
      color:#fff;
      text-shadow:0 1px 3px rgba(0,0,0,0.75), 0 0 12px rgba(0,0,0,0.35);
    }
    #top-right{
      position:absolute;
      top:calc(12px + env(safe-area-inset-top, 0px) + 32px);
      /* right-only: do NOT set left — avoids full-width dark band */
      left:auto !important;
      right:max(12px, env(safe-area-inset-right, 0px)) !important;
      width:auto !important;
      max-width:calc(100vw - 24px) !important;
      display:flex !important;
      flex-direction:row !important;
      flex-wrap:nowrap !important;
      justify-content:flex-end !important;
      align-items:center !important;
      gap:8px !important;
      padding:0 !important;
      margin:0 !important;
      background:transparent !important;
      border:none !important;
      border-radius:0 !important;
      box-shadow:none !important;
      backdrop-filter:none !important;
      -webkit-backdrop-filter:none !important;
      pointer-events:auto !important;
      z-index:25000 !important;
      isolation:isolate;
    }
    #top-right > *{
      pointer-events:auto !important;
      touch-action:manipulation !important;
    }
    #top-right > #customize-btn,
    #top-right > #fx-settings,
    #top-right > #lang-select,
    #top-right > #cinema-fs-btn{
      flex:0 0 auto !important;
      flex-grow:0 !important;
      flex-shrink:0 !important;
      min-width:0 !important;
      max-width:none !important;
      width:auto !important;
      position:relative !important;
      z-index:25001 !important;
      overflow:visible !important;
      background:transparent !important;
      border:none !important;
      box-shadow:none !important;
    }
    /* Shared chip look: dark glass, horizontal icon+text (matches landscape chips) */
    #top-right > #customize-btn,
    #top-right > #fx-settings > summary,
    #top-right > #lang-select,
    #top-right > #cinema-fs-btn,
    #customize-btn.chrome-btn,
    #fx-settings > summary.chrome-btn,
    .cinematic-ui-btn,
    .language-selector-dropdown{
      display:inline-flex !important;
      flex-direction:row !important;
      align-items:center !important;
      justify-content:center !important;
      gap:4px !important;
      width:auto !important;
      min-width:44px !important;
      min-height:42px !important;
      padding:0 14px !important;
      box-sizing:border-box !important;
      font-size:14px !important;
      font-weight:700 !important;
      color:#ffffff !important;
      white-space:nowrap !important;
      overflow:visible !important;
      text-overflow:clip !important;
      background:rgba(15,23,42,0.65) !important;
      backdrop-filter:blur(12px) !important;
      -webkit-backdrop-filter:blur(12px) !important;
      border:1px solid rgba(255,255,255,0.22) !important;
      border-radius:8px !important;
      box-shadow:none !important;
      text-shadow:0 1px 2px rgba(0,0,0,0.45);
      touch-action:manipulation !important;
      pointer-events:auto !important;
    }
    #top-right > #lang-select{
      appearance:none !important;
      -webkit-appearance:none !important;
      padding:0 22px 0 12px !important;
      text-align:center;
      text-align-last:center;
      background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='white' d='M1 1l5 5 5-5'/%3E%3C/svg%3E") !important;
      background-repeat:no-repeat !important;
      background-position:right 8px center !important;
      background-size:10px !important;
      background-color:rgba(15,23,42,0.65) !important;
    }
    #lang-select option{
      color:#1a2b3c;
      background:#fff;
      text-shadow:none;
    }
    #fx-settings{
      position:relative !important;
      display:inline-flex !important;
      flex:0 0 auto !important;
      background:transparent !important;
      border:none !important;
      box-shadow:none !important;
      padding:0 !important;
      margin:0 !important;
    }
    #fx-settings > summary{
      list-style:none !important;
      flex:0 0 auto !important;
      width:auto !important;
    }
    #fx-settings > summary::-webkit-details-marker{ display:none !important; }
    #fx-settings > summary::after{ display:none !important; content:none !important; }
    #fx-settings .chrome-lbl{ color:#fff !important; }
    #top-right .chrome-lbl-full{ display:none !important; }
    #top-right .chrome-lbl-short{
      display:inline !important;
      max-width:none !important;
      overflow:visible !important;
      text-overflow:clip !important;
      font-size:14px !important;
      line-height:1 !important;
      color:#fff !important;
      white-space:nowrap !important;
    }
    #top-right .chrome-ico{
      display:inline !important;
      font-size:15px !important;
      line-height:1 !important;
      filter:drop-shadow(0 1px 2px rgba(0,0,0,0.45));
    }
    #cinema-fs-btn .fs-lbl-full{ display:none !important; }
    #cinema-fs-btn .fs-lbl-short{
      display:inline !important;
      font-size:14px !important;
      font-weight:700 !important;
      color:#fff !important;
      white-space:nowrap !important;
    }
    #customize-btn:active, #view3d-btn:active, #share-btn:active, .chrome-btn:active,
    #fx-settings > summary:active, #cinema-fs-btn:active{
      background:rgba(30,41,59,0.82) !important;
      transform:scale(0.96);
    }
    #view3d-btn.active{
      background:rgba(61,143,209,0.42) !important;
      border-color:rgba(255,255,255,0.45) !important;
      color:#fff !important;
    }
    #fx-panel{
      min-width:min(200px, 70vw);
      padding:12px;
      right:0;
      left:auto;
      top:calc(100% + 8px);
      z-index:10020;
      background:rgba(20,36,52,0.55) !important;
      border:1px solid rgba(255,255,255,0.22) !important;
      color:#fff;
      backdrop-filter:blur(16px) saturate(1.15);
      -webkit-backdrop-filter:blur(16px) saturate(1.15);
      box-shadow:0 12px 32px rgba(0,0,0,0.22);
    }
    #fx-panel label{
      font-size:14px;
      min-height:44px;
      color:#fff !important;
      text-shadow:0 1px 2px rgba(0,0,0,0.5);
    }
    #fx-panel #shake-state{ color:#b8f0d8 !important; }
    #fx-settings.shake-off #shake-state{ color:#ffb4b4 !important; }
    #stats{ display:none; }

    #msg-layer{ top:calc(118px + env(safe-area-inset-top, 0px)); max-width:92vw; }
    #mobile-stats{
      top:calc(108px + env(safe-area-inset-top, 0px));
      left:50%;
      transform:translateX(-50%);
    }
    #touch-chrome-guard{
      display:block;
      height:calc(118px + env(safe-area-inset-top, 0px));
      z-index:9990;
    }
    .toast{ font-size:11px; padding:7px 10px; }

    #climber{ width:52px; height:78px; }
    #altitude-badge{ font-size:10px; padding:2px 6px; }
    #route-hint{
      bottom:calc(var(--dock-h) + 100px + env(safe-area-inset-bottom, 0px));
      font-size:10px;
      padding:4px 10px;
      max-width:90%;
    }
    #orbit-hint{
      left:8px;
      right:auto;
      bottom:calc(var(--dock-h) + 10px + env(safe-area-inset-bottom, 0px));
      font-size:10px;
      padding:5px 8px;
      max-width:46vw;
      z-index:16;
    }
    #scene.mode-3d #orbit-hint{ display:block; }
    #scene.mode-3d #route-hint{ bottom:calc(var(--dock-h) + 100px + env(safe-area-inset-bottom, 0px)); }

    #setup-card{
      padding:14px 12px 12px;
      max-height:min(90dvh, 90vh);
    }
    #setup-card h2{ font-size:18px; }
    .choice-card .thumb{ height:72px; }
    .choice-card.climber .thumb{ height:96px; }
    .choice-card .label{ font-size:11px; padding:6px 4px 8px; }

    /* compact stats chip over the scene */
    #mobile-stats{
      display:flex !important;
    }
  }

  /* Phone landscape: wider scene, ultra-thin dock */
  @media (max-width:920px) and (orientation:landscape) and (max-height:500px){
    :root{ --dock-h: 100px; }
    #app{ height:100vh; height:100dvh; max-height:100dvh; }
    #scene{ flex:1 1 auto; min-height:0; }
    #panel{
      height:auto;
      max-height:var(--dock-h);
      padding:4px 8px calc(4px + env(safe-area-inset-bottom, 0px));
      gap:8px;
    }
    #action-col{
      right:max(8px, 1.5vw);
      bottom:calc(var(--dock-h) + 8px + env(safe-area-inset-bottom, 0px));
      flex-direction:row;
      gap:8px;
      max-width:min(280px, 55vw);
    }
    #step-btn{ width:64px; height:64px; font-size:10px; }
    #shop-col{ flex:1; min-width:180px; }
    #achv-col{ flex:0 0 90px; max-width:90px; align-items:flex-end; }
    #achv-hint{ display:none; }
    #topbar{ padding:calc(6px + env(safe-area-inset-top, 0px)) 10px 2px; }
    #title{ font-size:12px; max-width:28vw; }
    #top-right{
      top:calc(20px + env(safe-area-inset-top, 0px));
      left:auto;
      right:max(12px, env(safe-area-inset-right, 0px));
      width:auto;
      max-width:min(420px, 62vw);
      gap:6px;
      padding:6px 8px;
    }
    #customize-btn, #view3d-btn, #share-btn, .chrome-btn, #fx-settings > summary, #lang-select{
      min-height:48px;
      flex-direction:row;
      gap:4px;
      padding:6px 8px;
    }
    .chrome-lbl-short{ font-size:11px; }
    #stats{ display:none; }
    #mobile-stats{
      display:flex !important;
      top:calc(12px + env(safe-area-inset-top, 0px));
      left:10px;
      transform:none;
    }
    #msg-layer{ top:calc(72px + env(safe-area-inset-top, 0px)); }
    #touch-chrome-guard{ height:calc(78px + env(safe-area-inset-top, 0px)); }
    #route-hint{ display:none; }
    #climber{ width:44px; height:66px; }
    #orbit-hint{
      bottom:calc(var(--dock-h) + 8px);
      max-width:40vw;
    }
  }

  @media (max-width:380px){
    :root{ --dock-h: 120px; }
    #step-btn{ width:70px; height:70px; font-size:10px; }
    .item{ flex:0 0 120px; }
    #customize-btn{ overflow:visible !important; text-overflow:clip; }
  }

  /* ─── Immersion narrative — cinematic fade (Auto-Fade & Click-to-Dismiss) ─── */
  #narrative-layer.narrative-container{
    position:absolute;
    left:10%;
    right:10%;
    bottom:calc(var(--dock-h) + 16px + env(safe-area-inset-bottom, 0px));
    width:auto;
    max-width:560px;
    margin:0 auto;
    transform:none;
    z-index:10000;
    display:flex;
    flex-direction:column;
    gap:8px;
    text-align:center;
    /* 默认隐形：不遮挡磐石雪山；0.8s 烟雾般淡入淡出 */
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    cursor:pointer;
    transition:
      opacity 0.8s cubic-bezier(0.25, 1, 0.5, 1),
      visibility 0.8s cubic-bezier(0.25, 1, 0.5, 1);
  }
  #narrative-layer.narrative-container.is-active,
  #narrative-layer.narrative-container.show{
    opacity:1;
    visibility:visible;
    pointer-events:auto; /* 仅显示时接收点击/触碰驱散 */
  }
  #narrative-narrator,
  #narrative-monologue{
    margin:0;
    padding:10px 16px;
    border-radius:12px;
    background:rgba(8,14,22,0.62);
    border:1px solid rgba(224,247,250,0.16);
    backdrop-filter:blur(12px);
    -webkit-backdrop-filter:blur(12px);
    box-shadow:0 8px 28px rgba(0,0,0,0.28);
    color:#e8f4f8;
    font-size:13.5px;
    line-height:1.55;
    letter-spacing:0.01em;
    text-shadow:0 2px 4px rgba(0,0,0,0.9);
    text-align:left;
  }
  #narrative-narrator{
    font-size:15px;
    font-weight:600;
    color:#e0f7fa;
    border-left:3px solid rgba(125,211,230,0.75);
  }
  #narrative-narrator.danger{
    color:#ff4d4d !important;
    border-left-color:#ff3333;
    font-weight:800;
  }
  #narrative-monologue{
    font-size:16px;
    font-weight:400;
    font-style:italic;
    color:#d1d5db;
    border-left:3px solid rgba(180,190,200,0.35);
    min-height:2.6em;
  }
  .narrative-tag{
    display:block;
    font-size:10px;
    font-weight:800;
    letter-spacing:0.06em;
    text-transform:uppercase;
    color:rgba(180,220,230,0.75);
    margin-bottom:4px;
    font-style:normal;
  }
  #narrative-layer .narrative-hint{
    font-size:10px;
    font-weight:600;
    color:rgba(200,220,230,0.55);
    text-align:center;
    text-shadow:0 1px 2px rgba(0,0,0,0.8);
    font-style:normal;
    pointer-events:none;
  }
  #step-btn.step-heavy{
    opacity:0.72 !important;
    filter:saturate(0.7);
    transition:opacity .15s ease, filter .15s ease;
  }
  @media (max-width:720px){
    #narrative-layer.narrative-container{
      left:4%;
      right:4%;
      bottom:calc(var(--dock-h) + 10px + env(safe-area-inset-bottom, 0px));
    }
    #narrative-narrator{ font-size:13px; padding:8px 12px; }
    #narrative-monologue{ font-size:14px; padding:8px 12px; }
  }

  /* ─── Cinema fullscreen + smart UI drawer ─── */
  #cinema-fs-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:6px;
    border:1px solid rgba(255,255,255,0.45);
    background:rgba(12,28,44,0.42);
    color:#fff;
    border-radius:12px;
    padding:8px 12px;
    font-size:12px;
    font-weight:800;
    cursor:pointer;
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
    box-shadow:0 4px 14px rgba(0,0,0,0.18);
    white-space:nowrap;
    max-width:min(220px, 42vw);
    min-height:44px;
    min-width:44px;
    touch-action:manipulation !important;
    -webkit-tap-highlight-color:rgba(61,143,209,0.25);
    -webkit-user-select:none;
    user-select:none;
    position:relative;
    z-index:25000 !important;
    pointer-events:auto !important;
  }
  #cinema-fs-btn:hover{ background:rgba(30,80,120,0.55); }
  #cinema-fs-btn:active{ transform:scale(0.96); }
  /* 全端：全屏文案始终可见（full + short 同步字） */
  #cinema-fs-btn .fs-lbl-short{ display:none; }
  #cinema-fs-btn .fs-lbl-full{ display:inline; }
  #cinema-fs-btn .chrome-ico{ pointer-events:none; }
  /* 顶部控件零死区霸权（移动端一触即发） */
  #topbar, #top-right, #lang-select, #cinema-fs-btn, .chrome-btn, #fx-settings, #fx-settings > summary{
    touch-action:manipulation !important;
  }
  #top-right, #lang-select, #cinema-fs-btn, .chrome-btn, #fx-settings{
    z-index:25000 !important;
    pointer-events:auto !important;
  }

  /*
   * Ultimate portrait chrome fix (all clients):
   * 1) Parent panel transparent — never covers the mountain
   * 2) Role / FX / EN / Fullscreen = dark glass chips, landscape style
   * 3) Gear + FX forced horizontal row (never column stack)
   */
  @media (max-width:720px) and (orientation: portrait){
    #top-right{
      position:absolute !important;
      top:calc(15px + env(safe-area-inset-top, 0px) + 28px) !important;
      right:15px !important;
      left:auto !important;
      width:auto !important;
      max-width:calc(100vw - 20px) !important;
      background:transparent !important;
      box-shadow:none !important;
      border:none !important;
      border-radius:0 !important;
      backdrop-filter:none !important;
      -webkit-backdrop-filter:none !important;
      padding:0 !important;
      margin:0 !important;
      display:flex !important;
      flex-direction:row !important;
      flex-wrap:nowrap !important;
      justify-content:flex-end !important;
      align-items:center !important;
      gap:8px !important;
      z-index:25000 !important;
    }
    #top-right > #fx-settings{
      display:inline-flex !important;
      flex-direction:row !important;
      flex:0 0 auto !important;
      background:transparent !important;
      border:none !important;
      box-shadow:none !important;
    }
    #top-right > #customize-btn,
    #top-right > #fx-settings > summary,
    #top-right > #lang-select,
    #top-right > #cinema-fs-btn,
    #top-right .cinematic-ui-btn,
    #top-right .language-selector-dropdown{
      display:inline-flex !important;
      flex-direction:row !important;
      align-items:center !important;
      justify-content:center !important;
      gap:4px !important;
      width:auto !important;
      min-height:42px !important;
      padding:0 14px !important;
      font-size:14px !important;
      font-weight:bold !important;
      color:#ffffff !important;
      white-space:nowrap !important;
      overflow:visible !important;
      background:rgba(15,23,42,0.65) !important;
      background-color:rgba(15,23,42,0.65) !important;
      backdrop-filter:blur(12px) !important;
      -webkit-backdrop-filter:blur(12px) !important;
      border:1px solid rgba(255,255,255,0.22) !important;
      border-radius:8px !important;
      box-shadow:none !important;
      touch-action:manipulation !important;
      pointer-events:auto !important;
    }
    #top-right > #lang-select{
      padding:0 22px 0 10px !important;
    }
    #top-right .chrome-lbl-full{ display:none !important; }
    #top-right .chrome-lbl-short,
    #top-right .chrome-ico,
    #cinema-fs-btn .fs-lbl-short{
      display:inline !important;
      font-size:14px !important;
      color:#fff !important;
      white-space:nowrap !important;
      overflow:visible !important;
    }
    #cinema-fs-btn .fs-lbl-full{ display:none !important; }
    #top-right .chrome-ico{ font-size:15px !important; }
  }
  @media (max-width:480px) and (orientation: portrait){
    #top-right{
      right:8px !important;
      left:auto !important;
      gap:5px !important;
      background:transparent !important;
      box-shadow:none !important;
    }
    #top-right > #customize-btn,
    #top-right > #fx-settings > summary,
    #top-right > #lang-select,
    #top-right > #cinema-fs-btn{
      font-size:12px !important;
      padding:0 8px !important;
      min-height:38px !important;
      flex-direction:row !important;
      gap:3px !important;
    }
    #top-right > #lang-select{ padding:0 18px 0 8px !important; }
    #top-right .chrome-lbl-short,
    #cinema-fs-btn .fs-lbl-short{ font-size:12px !important; }
  }
  /* iOS 伪全屏：原生 Fullscreen 不可用时填满视口 */
  html.pseudo-fullscreen, body.pseudo-fullscreen{
    overflow:hidden !important;
    width:100% !important;
    height:100% !important;
  }
  body.pseudo-fullscreen #app{
    position:fixed !important;
    inset:0 !important;
    width:100vw !important;
    height:100dvh !important;
    max-height:100dvh !important;
    /* 必须低于 #setup-overlay(100050)，否则 Role 弹窗被主画面盖住 */
    z-index:100 !important;
  }
  body.pseudo-fullscreen #scene,
  body.pseudo-fullscreen #world3d{
    width:100% !important;
    height:100% !important;
  }

  /* 装备/成就抽屉：全屏时滑出，右侧热区/点击立刻弹出（不降级现有商店逻辑） */
  #shop-col, #achv-col{
    transition: transform 0.45s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.3s ease;
    will-change: transform, opacity;
  }
  body.cinematic-fs #panel,
  body.pseudo-fullscreen #panel{
    background:linear-gradient(180deg, rgba(248,251,255,0.55) 0%, rgba(232,241,250,0.45) 100%);
    border-top-color:rgba(61,143,209,0.12);
    box-shadow:none;
    z-index:24000 !important;
    position:relative;
  }
  body.cinematic-fs #shop-col,
  body.cinematic-fs #achv-col,
  body.pseudo-fullscreen #shop-col,
  body.pseudo-fullscreen #achv-col{
    transform: translateX(120%);
    opacity: 0.08;
    pointer-events: none;
  }
  /* 弹出态：立刻可见可选装备 */
  body.cinematic-fs #panel.drawer-peek #shop-col,
  body.cinematic-fs #panel.drawer-peek #achv-col,
  body.cinematic-fs #panel.drawer-open #shop-col,
  body.cinematic-fs #panel.drawer-open #achv-col,
  body.cinematic-fs #shop-col.touch-active,
  body.cinematic-fs #achv-col.touch-active,
  body.pseudo-fullscreen #panel.drawer-peek #shop-col,
  body.pseudo-fullscreen #panel.drawer-peek #achv-col,
  body.pseudo-fullscreen #panel.drawer-open #shop-col,
  body.pseudo-fullscreen #panel.drawer-open #achv-col,
  body.pseudo-fullscreen #shop-col.touch-active,
  body.pseudo-fullscreen #achv-col.touch-active{
    transform: translateX(0) !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }
  body.cinematic-fs #orbit-hint,
  body.pseudo-fullscreen #orbit-hint{ display:none !important; }
  body.cinematic-fs #topbar,
  body.pseudo-fullscreen #topbar{
    opacity: 1;
    z-index:25000 !important;
  }
  body.cinematic-fs #action-col,
  body.pseudo-fullscreen #action-col{
    bottom: max(24px, env(safe-area-inset-bottom, 0px) + 16px);
    z-index:24010 !important;
  }
  body.cinematic-fs,
  body.pseudo-fullscreen{
    --dock-h: 72px;
  }
  body.cinematic-fs #panel,
  body.pseudo-fullscreen #panel{
    min-height: 56px;
  }
  /* 右侧热区加宽：全屏下易点中 */
  #cinema-drawer-hotzone{
    display:none;
    position:fixed;
    top:18%;
    right:0;
    width:min(22vw, 96px);
    height:55%;
    z-index:23990 !important;
    pointer-events:auto;
    background:linear-gradient(90deg, transparent, rgba(224,247,250,0.14));
    border-radius:12px 0 0 12px;
    touch-action:manipulation;
  }
  body.cinematic-fs #cinema-drawer-hotzone,
  body.pseudo-fullscreen #cinema-drawer-hotzone{ display:block; }