/* ============================================================================
   共用基础样式：设计变量 / 重置 / 天空渐变 / 云层 / 落雪
   （登录页与主页都会引用）
   ========================================================================== */

  /* =========================================================
     设计语言参考 thatskygame.com：
     整页是一次垂直旅程 —— 从云端的明亮，逐层下沉到幽暗深处。
     浅色区（云上）用深墨字，深色区（深处）用冷白字，
     由 --tc-* 变量按区段 data-tone 自动切换。
     ========================================================= */

  :root{
    /* 云上（浅） */
    --mist-0:#f8fafd; --mist-1:#e9eff8; --mist-2:#d3e0f2; --mist-3:#bccde8;
    --ink-0:#161d33; --ink-1:#333d59; --ink-mute:#68738e;
    --cool:#5d6fbe; --cool-2:#8a7fe0;
    /* 深处（深） */
    --deep-0:#0a0f22; --deep-1:#060a16; --deep-2:#131c3a;
    --ice:#e8eefa; --ice-2:#b8c7e3; --mute:#8595b5;
    --violet:#a08aff; --blue:#7fb0e8; --candle:#e9b672;
    --line:rgba(190,210,255,.14);
    --line-strong:rgba(200,215,255,.30);
    --glass-dark:linear-gradient(158deg, rgba(255,255,255,.075), rgba(255,255,255,.018));
    --glass-light:linear-gradient(158deg, rgba(255,255,255,.80), rgba(255,255,255,.46));
    --shadow-dark:0 24px 60px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.08);
    --shadow-light:0 22px 54px rgba(31,45,80,.16), inset 0 1px 0 rgba(255,255,255,.75);
    --serif: Georgia, "Times New Roman", "Songti SC", "STSong", "SimSun", "Noto Serif SC", "Source Han Serif SC", "Yu Mincho", "Hiragino Mincho ProN", "Noto Serif JP", serif;
    --sans: "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
    --ease: cubic-bezier(.22,.61,.36,1);
    --sy: 0;        /* 滚动量，由脚本写入 */
    --journey: 0;   /* 全页行程 0→1，由脚本写入 */
  }

  /* 区段基调：浅色区 / 深色区 */
  [data-tone="light"]{
    --tc-head:var(--ink-0); --tc-body:var(--ink-1); --tc-mute:var(--ink-mute);
    --tc-line:rgba(28,40,72,.13); --tc-line2:rgba(28,40,72,.26);
    --tc-glass:var(--glass-light); --tc-shadow:var(--shadow-light);
    --tc-accent:var(--cool); --tc-board:rgba(28,40,72,.07); --tc-glow:rgba(120,140,220,.20);
  }
  [data-tone="dark"]{
    --tc-head:#fff; --tc-body:var(--ice-2); --tc-mute:var(--mute);
    --tc-line:var(--line); --tc-line2:var(--line-strong);
    --tc-glass:var(--glass-dark); --tc-shadow:var(--shadow-dark);
    --tc-accent:var(--violet); --tc-board:rgba(255,255,255,.10); --tc-glow:rgba(150,128,245,.22);
  }

  *{box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{
    margin:0;background:var(--deep-1);color:var(--ink-1);
    font-family:var(--serif);line-height:1.85;letter-spacing:.02em;
    -webkit-font-smoothing:antialiased;overflow-x:hidden;
  }

  /* ---------- 天空：随滚动下沉的固定渐变层 ---------- */
  .sky{
    position:fixed;inset:0;z-index:-4;
    background:linear-gradient(180deg,
      #faf5ee 0%, var(--mist-0) 6%, var(--mist-1) 14%, var(--mist-2) 22%,
      var(--mist-3) 28%, #93a6d6 34%, #6170b4 40%, #38407e 46%,
      #212a5e 52%, var(--deep-0) 60%, var(--deep-1) 74%, #04060d 100%);
    background-size:100% 420%;
    background-repeat:no-repeat;
    background-position:0 calc(var(--journey) * 100%);
  }
  /* 云层：两层不同速度的视差 */
  .clouds{position:fixed;left:0;right:0;top:-30%;height:170%;z-index:-3;pointer-events:none}
  .clouds span{position:absolute;border-radius:50%;filter:blur(38px);display:block}
  .clouds-a{
    opacity:calc(1 - var(--journey) * 2.1);
    transform:translate3d(0, calc(var(--sy) * 0.055px), 0);
  }
  .clouds-b{
    opacity:calc(1 - var(--journey) * 1.7);
    transform:translate3d(0, calc(var(--sy) * 0.115px), 0);
  }
  .clouds-a span{background:radial-gradient(circle, rgba(255,255,255,.95), rgba(255,255,255,0) 70%)}
  .clouds-b span{background:radial-gradient(circle, rgba(255,255,255,.75), rgba(255,255,255,0) 72%)}

  /* 落雪：自上方飘下、带横向摇摆与缓慢自转；深处渐显 */
  .particles{
    position:fixed;inset:0;z-index:-2;pointer-events:none;overflow:hidden;
    opacity:calc(var(--journey) * 2.8 - .68);
  }
  .particles i{
    position:absolute;display:block;top:-14vh;opacity:0;
    width:var(--sz,8px);height:var(--sz,8px);
    background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23eaf2ff' stroke-width='1.7' stroke-linecap='round'%3E%3Cpath d='M12 12V2M12 5l-2.1-2.1M12 5l2.1-2.1' transform='rotate(0 12 12)'/%3E%3Cpath d='M12 12V2M12 5l-2.1-2.1M12 5l2.1-2.1' transform='rotate(60 12 12)'/%3E%3Cpath d='M12 12V2M12 5l-2.1-2.1M12 5l2.1-2.1' transform='rotate(120 12 12)'/%3E%3Cpath d='M12 12V2M12 5l-2.1-2.1M12 5l2.1-2.1' transform='rotate(180 12 12)'/%3E%3Cpath d='M12 12V2M12 5l-2.1-2.1M12 5l2.1-2.1' transform='rotate(240 12 12)'/%3E%3Cpath d='M12 12V2M12 5l-2.1-2.1M12 5l2.1-2.1' transform='rotate(300 12 12)'/%3E%3C/g%3E%3C/svg%3E") center/contain no-repeat;
    filter:drop-shadow(0 0 4px rgba(190,215,255,.5));
    animation:snowfall var(--dur,18s) linear infinite;
  }
  /* 纵向严格单调递增（0 → 46vh → 88vh → 130vh），横向只做单向缓漂。
     注意：这里不能再用独立的 rotate 属性做自转 —— 合成顺序是
     translate·rotate·scale·transform，位移会先算出来再被旋转，
     下落就会变成圆周运动（转到上半圈即表现为「向上飘」）。 */
  @keyframes snowfall{
    0%{transform:translate3d(0,0,0);opacity:0}
    8%{opacity:var(--op,.75)}
    35%{transform:translate3d(calc(var(--dx,18px) * .42),46vh,0)}
    68%{transform:translate3d(calc(var(--dx,18px) * .78),88vh,0)}
    92%{opacity:var(--op,.75)}
    100%{transform:translate3d(var(--dx,18px),130vh,0);opacity:0}
  }

/* ============================================================================
   共用组件：品牌标识（棋子）/ 站点名 / 语言切换
   主页与登录页都会用到，所以放在基础样式里。
   ========================================================================== */
  .brand{display:flex;align-items:center;gap:12px;min-width:0;color:inherit}
  /* 模拟品牌标识：极简锐利的骑士剪影 —— 纯色、无渐变、无容器 */
  .pc-sprite{position:absolute;width:0;height:0;overflow:hidden}
  .mark{
    width:36px;height:36px;flex:0 0 36px;display:grid;place-items:center;
  }
  .mark svg{
    width:33px;height:33px;display:block;
    fill:url(#pcGlass);stroke:rgba(255,255,255,.55);stroke-width:1.4;
    filter:drop-shadow(0 0 6px rgba(150,190,255,.45));
  }
  .brand b{font-weight:400;font-size:1rem;letter-spacing:.18em;white-space:nowrap;color:inherit}
  .brand small{display:block;font-family:var(--sans);font-size:.56rem;letter-spacing:.32em;
    color:currentColor;opacity:.55;text-transform:uppercase;white-space:nowrap}
  .langsw{display:flex;gap:4px;padding:4px;border-radius:999px;border:1px solid var(--tc-line, rgba(28,40,72,.16));
    background:rgba(255,255,255,.4);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
  .langsw button{
    font-family:var(--sans);font-size:.72rem;letter-spacing:.06em;
    color:inherit;opacity:.72;background:transparent;border:0;cursor:pointer;
    padding:6px 10px;border-radius:999px;transition:.28s var(--ease);white-space:nowrap;
  }
  .langsw button:hover{opacity:1;background:rgba(255,255,255,.35)}
  body.phase-dark .langsw button:hover{background:rgba(255,255,255,.08)}
  .langsw button[aria-pressed="true"]{
    color:#0b0f1e;opacity:1;background:linear-gradient(140deg,#eef2fc,#b9a7ff);
    box-shadow:0 6px 18px rgba(150,128,245,.36);
  }

/* ============================================================================
   共用组件：页脚（备案 / 联系方式 / 鸣谢）
   只用基础变量，不依赖 [data-tone]，所以登录页也能直接用。
   ========================================================================== */
  /* ---------- 页脚 ---------- */
  footer{padding:52px clamp(16px,4vw,46px) 74px;text-align:center;color:var(--mute);
    font-family:var(--sans);font-size:.72rem;letter-spacing:.14em;border-top:1px solid var(--line)}
  footer .fline{font-size:.62rem;letter-spacing:.42em;text-transform:uppercase;
    color:var(--violet);opacity:.8;margin-bottom:12px}
  /* 页脚底部：备案号 + 联系方式 */
  .footer-meta{
    margin-top:22px;padding-top:16px;border-top:1px solid rgba(190,210,255,.10);
    display:flex;align-items:center;justify-content:center;gap:11px;flex-wrap:wrap;
    text-align:center;font-size:.7rem;letter-spacing:.06em;color:var(--mute);
  }
  .footer-meta .ft-beian{color:var(--ice-2);text-decoration:none;transition:.3s var(--ease)}
  .footer-meta .ft-beian:hover{color:#fff;text-decoration:underline;text-underline-offset:3px}
  .footer-meta .ft-dot{opacity:.4}
  .footer-meta .ft-contact em{font-style:normal;color:var(--mute);opacity:.85}
  /* 页脚最后一行纯文本占位：整体居中，多行也逐行居中 */
  .footer-line{
    margin:18px auto 0;max-width:min(760px,100%);
    text-align:center;text-wrap:balance;
    font-size:.72rem;line-height:1.95;letter-spacing:.08em;
    color:var(--mute);opacity:.88;
  }