:root{
    --canvas-max: 560px; /* 需要更宽可改 600/640 等 */

    --card-bg: rgba(55,55,55,.65);
    --border-soft: rgba(255,255,255,.08);
    --gold:#FFD200;
    --gold-1:#FFD966; --gold-2:#FFCC33;
    --btn-text:#5B3A29;

    color-scheme: dark; /* 提示 UA 使用深色界面元素 */
  }

  /* 两侧留纯黑边 */
  html,body{height:100%;margin:0;background:#000;}
  body{
    color:#fff;
    font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,"PingFang SC","Microsoft YaHei",sans-serif;
    overflow:hidden;
    -webkit-tap-highlight-color: transparent;
  }

  /* 中央“手机画布”，背景锚定底部→始终自底向上显示 */
  .phone{
    width: min(var(--canvas-max), 100%);
    min-width: 320px;
    margin: 0 auto;
    min-height: 100svh;
    position: relative;
    background: url('../img/beijing.jpg') no-repeat center bottom / cover;
    background-attachment: scroll; /* iOS 更稳定 */
    isolation: isolate;
  }

  /* 轻微黑金呼吸叠层（很淡） */
  .phone::after{
    content:"";
    position:absolute; inset:0;
    pointer-events:none;
    background:
      radial-gradient(1200px 800px at 50% 20%, rgba(255,215,0,.06), rgba(0,0,0,0) 60%),
      linear-gradient(180deg, rgba(0,0,0,.12), rgba(0,0,0,.30));
    animation: breath 5.2s ease-in-out infinite;
    z-index:0;
  }
  @keyframes breath{ 0%{opacity:.85} 50%{opacity:1} 100%{opacity:.85} }
  @media (prefers-reduced-motion: reduce){ .phone::after{ animation:none; } }

  /* 内容三行布局（中框在第2行） */
  .stage{
    position: relative; z-index:1;
    min-height: 100svh;
    display: grid;
    grid-template-rows: 0.6fr auto 1fr;
    padding-top: calc(env(safe-area-inset-top, 0px) + 8px);
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 8px);
    box-sizing:border-box;
  }

  /* 中框 */
  .card{
    grid-row: 2;
    width:min(480px, calc(100% - 24px));
    border-radius:14px;
    background:var(--card-bg);
    padding:16px 16px 18px;
    box-sizing:border-box;
    margin: 0 auto;
    box-shadow: 0 8px 24px rgba(0,0,0,.28);
    backdrop-filter: saturate(1.1);
  }

  /* LOGO 回到中框顶部，位于 2356 英语组域名之上 */
  .logo{
    width:300px; max-width:92%;
    display:block;
    transform-origin:center;
    will-change:transform;
    animation: logoBreath 3.2s ease-in-out infinite;
  }
  .logo.in-card{
    width:240px;          /* 中框内协调尺寸 */
    max-width:80%;
    margin: 2px auto 20px; /* ← 间距由 12px 提升到 20px（多一行） */
  }
  @keyframes logoBreath{ 0%{transform:scale(1)} 50%{transform:scale(1.04)} 100%{transform:scale(1)} }
  @media (prefers-reduced-motion: reduce){ .logo{ animation:none; } }

  /* 顶部轮巡行：左右图标 + 文本（不换行） */
  .domain-anim-wrap{
    text-align:center; font-size:22px; font-weight:800; line-height:1; margin-bottom:16px;
    white-space: nowrap;
  }
  .rotor{ display:inline-flex; align-items:center; justify-content:center; gap:8px; }
  .side-icon{
    width:26px; height:auto; display:inline-block;
    user-select:none; -webkit-user-drag:none;
    pointer-events:none;
  }
  #rotator{ display:inline-block; }
  .highlight{ color: var(--gold); }

  .subtitle{ text-align:center; font-size:15px; opacity:.92; margin-bottom:4px; }

  /* ↓↓↓ 之前缩小过的“副标题 ↔ 提示语”间距 */
  .blankline{ height:8px; }

  .notice{
    text-align:center;
    font-size:15px;
    font-weight:800;
    color: var(--gold);
    margin-top:4px;
    margin-bottom:12px;
  }

  .line-list{ display:flex; flex-direction:column; gap:10px; }
  .row{ display:flex; align-items:center; gap:8px; }
  .row.copyable{ cursor:pointer; outline:none; }

  .domain-box{
    flex:1; display:flex; align-items:center; justify-content:center;
    padding:8px 10px; border-radius:10px;
    background:rgba(255,255,255,.06);
    border:1px solid var(--border-soft);
    overflow:hidden;
    transition: box-shadow .15s ease, transform .15s ease, background .15s ease;
  }
  .domain-box:hover{ box-shadow:0 0 10px rgba(255,215,0,.28); }
  .domain-text{
    color:#fff; font-size:16px; font-weight:600; text-align:center;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  }
  .domain-box.pulse{
    transform: scale(0.99);
    background: rgba(255,255,255,.10);
    box-shadow:0 0 10px rgba(255,215,0,.45), 0 0 18px rgba(255,215,0,.22);
  }

  .copy-btn{
    background:linear-gradient(90deg, var(--gold-1), var(--gold-2));
    color:var(--btn-text);
    border:0; border-radius:8px; padding:8px 14px;
    font-weight:800; font-size:14px; cursor:pointer;
    box-shadow:0 1px 4px rgba(0,0,0,.28);
    transition:transform .16s ease, box-shadow .16s ease; outline:none;
  }
  .copy-btn:hover{ transform:scale(1.03); box-shadow:0 3px 8px rgba(0,0,0,.38); }
  .copy-btn.glow{ box-shadow:0 0 10px rgba(255,215,0,.9), 0 0 18px rgba(255,215,0,.55); }

  #copyAlert{
    position:fixed; top:50%; left:50%; transform:translate(-50%, -50%);
    min-width:180px; max-width:90%; padding:10px 16px; text-align:center;
    color:#111; background:rgba(255,255,255,.85);
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
    border-radius:10px; box-shadow:0 0 8px rgba(0,0,0,.22);
    opacity:0; pointer-events:none; transition:opacity .15s linear; z-index:9999;
  }
  #copyAlert.show{ opacity:1; pointer-events:auto; }
  #copyAlert .alert-text{ font-size:16px; font-weight:800; }

  /* iOS 兜底复制容器 */
  .copy-silent-node{
    position:fixed; left:0; bottom:0; width:1px; height:1px;
    opacity:0; color:transparent; background:transparent; pointer-events:none; z-index:-1;
    -webkit-user-select: all; user-select: all; contain: content;
  }

  @media (max-width:360px){ .side-icon{ width:22px; } }