:root { color-scheme: dark; --white:#edf3fb; --muted:#aab5c5; --line:rgba(213,229,247,.24); --blue:#a9caee; }
  * { box-sizing:border-box; }
  html,body { margin:0; min-height:100%; background:#030a14; }
  body { font-family:"Noto Sans SC",system-ui,sans-serif; color:var(--white); }
  a { color:inherit; }
  .landing { min-height:100svh; position:relative; isolation:isolate; display:grid; overflow:hidden; background:#06101f url("../bg-castle-user.jpg") center/cover no-repeat; }
  .landing::before { content:""; position:absolute; inset:0; z-index:-1; background:rgba(2,9,18,.18); }
  .landing::after { content:""; position:absolute; inset:0; z-index:-1; box-shadow:inset 0 0 110px 30px rgba(1,6,13,.76); pointer-events:none; }
  .frame { margin:18px; min-height:calc(100svh - 36px); border-radius:15px; border:1px solid rgba(215,231,249,.06); display:grid; grid-template-rows:auto 1fr auto; gap:18px; padding:22px 28px 32px; box-shadow:inset 0 0 0 1px rgba(0,0,0,.12); }
  .topbar { display:flex; align-items:flex-start; justify-content:space-between; }
  .brand { font:400 12px/1.45 "Cinzel",serif; letter-spacing:.32em; text-transform:uppercase; text-shadow:0 1px 12px #000; }
  .language { appearance:none; border:1px solid var(--line); color:#d6deea; background:rgba(3,12,24,.38); border-radius:999px; min-width:132px; padding:8px 34px 8px 39px; font:300 12px "Noto Sans SC",sans-serif; backdrop-filter:blur(10px); cursor:pointer; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='none' stroke='%23ccd9e7' stroke-width='1.4' d='m6 8 4 4 4-4'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 11px center; background-size:16px; }
  .language-wrap { position:relative; }
  .language-wrap::before { content:"◎"; position:absolute; left:14px; top:7px; color:#cbd8e7; font-size:15px; pointer-events:none; }
  .hero { align-self:center; text-align:center; padding-top:11vh; text-shadow:0 2px 24px rgba(0,0,0,.85); }
  .hero h1 { margin:0; font:400 clamp(40px,6vw,70px)/1.05 "Cinzel",serif; letter-spacing:.14em; text-indent:.14em; color:#f0f3f7; }
  .rule-title { display:flex; align-items:center; justify-content:center; gap:13px; margin-top:18px; color:#e4eaf2; font:400 clamp(12px,1.55vw,17px)/1.2 "Cinzel",serif; letter-spacing:.36em; text-indent:.36em; }
  .rule-title::before,.rule-title::after { content:""; width:min(13vw,150px); height:1px; background:linear-gradient(90deg,transparent,rgba(222,236,250,.5)); }
  .rule-title::after { transform:scaleX(-1); }
  .diamond { font-size:10px; letter-spacing:0; text-indent:0; }
  .entry { text-align:center; width:min(360px,86vw); justify-self:center; }
  .entry p { margin:0 auto 18px; max-width:320px; color:#d4dce7; font-size:13px; font-weight:300; line-height:1.75; text-shadow:0 2px 15px #000; }
  .login { display:flex; align-items:center; justify-content:center; position:relative; height:44px; border:1px solid rgba(172,207,242,.58); border-radius:999px; color:#f2f5fa; text-decoration:none; font:400 14px "Cinzel",serif; letter-spacing:.16em; background:rgba(4,13,27,.3); box-shadow:0 0 25px rgba(109,169,225,.11),inset 0 0 18px rgba(114,172,225,.05); transition:.25s ease; }
  .login span { position:absolute; right:18px; font:300 20px/1 sans-serif; color:#dbe8f6; transition:transform .25s ease; }
  .login:hover,.login:focus-visible { background:rgba(22,47,74,.48); border-color:#cae4fb; box-shadow:0 0 30px rgba(109,169,225,.22); outline:none; }
  .login:hover span { transform:translateX(4px); }
  .signup { margin-top:15px; color:#c7d0dc; font-size:11px; font-weight:300; }
  .signup a { color:var(--blue); text-decoration:none; margin-left:3px; }
  .signup a:hover { text-decoration:underline; }
  @media (max-width:680px) {
    .frame { margin:0; min-height:100svh; border:0; border-radius:0; padding:22px 20px 34px; }
    .brand { font-size:10px; padding-left:82px; }
    .language { min-width:108px; padding-left:34px; }
    .hero { padding-top:17vh; }
    .hero h1 { font-size:clamp(34px,10vw,48px); line-height:1.18; letter-spacing:.08em; text-indent:.08em; }
    .rule-title { letter-spacing:.2em; text-indent:.2em; gap:8px; }
    .rule-title::before,.rule-title::after { width:34px; }
    .landing { background-position:52% center; }
    .frame { grid-template-rows:auto minmax(210px,1fr) auto; gap:14px; padding-bottom:22px; }
    .hero { padding-top:9vh; }
  }
  @media (prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto!important; transition:none!important; } }

  /* ===== 开机动画：校徽微光 → 校名逐字浮现 → 分割线展开 → 淡入首页 ===== */
  #boot { position:fixed; inset:0; z-index:10000; display:grid; place-items:center; background:#030a14; overflow:hidden; }
  #boot::before { content:""; position:absolute; inset:0; background:radial-gradient(ellipse at 50% 44%, rgba(120,150,220,.16), transparent 62%); }
  #boot::after { content:""; position:absolute; inset:0; box-shadow:inset 0 0 130px 40px rgba(1,6,13,.7); pointer-events:none; }
  #boot.boot-done { animation:bootOut .8s ease forwards; }
  @keyframes bootOut { to { opacity:0; visibility:hidden; } }
  .boot-inner { position:relative; text-align:center; padding:0 20px; }
  /* 校徽旋转开场：缩放+自转入场 → 缓慢余转；双光环反向旋转；金属光泽扫过 */
  .boot-crest { position:relative; width:230px; height:230px; margin:0 auto 34px; display:grid; place-items:center; }
  .boot-crest img { position:relative; z-index:2; width:82%; height:82%; object-fit:contain; border-radius:50%;
    -webkit-mask:radial-gradient(circle, #000 88%, transparent 97%); mask:radial-gradient(circle, #000 88%, transparent 97%);
    opacity:0; transform:scale(.35) rotate(-220deg);
    animation:crestSpinIn 1.5s cubic-bezier(.16,.84,.28,1) .15s forwards, crestDrift 26s linear 1.7s infinite; }
  @keyframes crestSpinIn { to { opacity:1; transform:scale(1) rotate(0deg); } }
  @keyframes crestDrift { from { transform:scale(1) rotate(0deg); } to { transform:scale(1) rotate(360deg); } }
  .boot-crest .halo { position:absolute; z-index:0; width:150%; height:150%; border-radius:50%;
    background:radial-gradient(circle, rgba(150,182,232,.32), rgba(120,160,220,.06) 55%, transparent 72%);
    opacity:0; animation:haloPulse 2.6s ease .5s forwards, haloBreathe 5s ease-in-out 2.8s infinite; }
  @keyframes haloPulse { 0%{opacity:0; transform:scale(.6);} 60%{opacity:1;} 100%{opacity:.8; transform:scale(1);} }
  @keyframes haloBreathe { 0%,100%{opacity:.5;} 50%{opacity:.9;} }
  .boot-crest .ring { position:absolute; z-index:1; border-radius:50%; border:1px solid rgba(180,208,246,.28); opacity:0; }
  .boot-crest .ring-a { width:112%; height:112%; border-style:solid; border-top-color:rgba(206,226,252,.75); animation:ringIn .8s ease .3s forwards, spinCW 9s linear 1.1s infinite; }
  .boot-crest .ring-b { width:132%; height:132%; border-color:rgba(150,182,232,.16); border-right-color:rgba(190,216,250,.55); animation:ringIn .8s ease .45s forwards, spinCCW 14s linear 1.2s infinite; }
  @keyframes ringIn { to { opacity:1; } }
  @keyframes spinCW { to { transform:rotate(360deg); } }
  @keyframes spinCCW { to { transform:rotate(-360deg); } }
  .boot-crest .sheen { position:absolute; z-index:3; width:82%; height:82%; border-radius:50%; pointer-events:none; opacity:0;
    background:linear-gradient(100deg, transparent 38%, rgba(255,255,255,.5) 50%, transparent 62%);
    mix-blend-mode:screen; -webkit-mask:radial-gradient(circle, #000 84%, transparent 92%); mask:radial-gradient(circle, #000 84%, transparent 92%);
    animation:sheenSweep 1.1s ease 1.55s 1; }
  @keyframes sheenSweep { 0%{opacity:0; transform:translateX(-120%) skewX(-12deg);} 25%{opacity:1;} 100%{opacity:0; transform:translateX(120%) skewX(-12deg);} }
  .boot-title { margin:0; font:400 clamp(38px,6.4vw,68px)/1.05 "Cinzel",serif; letter-spacing:.14em; text-indent:.14em; color:#f0f3f7; text-shadow:0 2px 24px rgba(0,0,0,.85); }
  .boot-title span { display:inline-block; opacity:0; transform:translateY(12px); animation:letterIn .55s ease forwards; animation-delay:calc(1.5s + var(--i) * .06s); }
  .boot-title span.sp { width:.34em; }
  @keyframes letterIn { to { opacity:1; transform:none; } }
  .boot-rule { display:flex; align-items:center; justify-content:center; gap:13px; margin-top:20px; color:#e4eaf2; font:400 clamp(12px,1.6vw,17px)/1.2 "Noto Serif SC","Cinzel",serif; letter-spacing:.3em; text-indent:.3em; opacity:0; animation:ruleFade .8s ease 2.5s forwards; }
  .boot-rule .d { font-size:10px; letter-spacing:0; text-indent:0; color:#bcd0ec; }
  .boot-rule::before,.boot-rule::after { content:""; width:0; height:1px; background:linear-gradient(90deg,transparent,rgba(222,236,250,.5)); animation:lineGrow .85s cubic-bezier(.2,.7,.2,1) 2.6s forwards; }
  .boot-rule::after { transform:scaleX(-1); }
  @keyframes ruleFade { to { opacity:1; } }
  @keyframes lineGrow { to { width:min(12vw,120px); } }
  .boot-enter { margin-top:40px; display:inline-flex; align-items:center; gap:12px; padding:14px 38px;
    border:1px solid rgba(172,207,242,.5); border-radius:999px; background:rgba(6,15,30,.42); color:#eef4fc;
    font:400 15px/1 "Noto Serif SC","Cinzel",serif; letter-spacing:.24em; text-indent:.24em; cursor:pointer;
    -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
    opacity:0; transform:translateY(12px);
    animation:enterIn .9s cubic-bezier(.2,.7,.2,1) 3.3s forwards, enterGlow 3.4s ease-in-out 4.3s infinite;
    transition:background .25s, border-color .25s, transform .18s; }
  .boot-enter span { font:300 20px/1 sans-serif; color:#dbe8f6; text-indent:0; transition:transform .25s ease; }
  .boot-enter:hover, .boot-enter:focus-visible { background:rgba(22,47,74,.55); border-color:#cae4fb; outline:none; }
  .boot-enter:hover span, .boot-enter:focus-visible span { transform:translateX(4px); }
  .boot-enter:active { transform:scale(.98); }
  @keyframes enterIn { to { opacity:1; transform:translateY(0); } }
  @keyframes enterGlow { 0%,100%{ box-shadow:0 0 22px rgba(109,169,225,.12), inset 0 0 18px rgba(114,172,225,.05);} 50%{ box-shadow:0 0 36px rgba(140,190,240,.3), inset 0 0 20px rgba(140,190,240,.1);} }
  @media (max-width:680px) {
    #boot {
      padding:max(18px,env(safe-area-inset-top)) max(20px,env(safe-area-inset-right)) max(18px,env(safe-area-inset-bottom)) max(20px,env(safe-area-inset-left));
    }
    .boot-inner {
      width:min(100%,390px);
      max-width:100%;
      padding:0;
      display:flex;
      flex-direction:column;
      align-items:center;
    }
    .boot-crest { width:156px; height:156px; margin-bottom:24px; flex:0 0 auto; }
    .boot-title {
      width:100%;
      display:flex;
      align-items:center;
      justify-content:center;
      margin-inline:auto;
      font-size:clamp(20px,7.15vw,28px);
      line-height:1.08;
      letter-spacing:.018em;
      text-indent:0;
      white-space:nowrap;
    }
    .boot-title span { flex:0 0 auto; }
    .boot-title span.sp { width:.3em; }
    .boot-rule {
      width:100%;
      margin:18px auto 0;
      gap:8px;
      font-size:clamp(11px,3.1vw,12px);
      letter-spacing:.1em;
      text-indent:.1em;
      white-space:nowrap;
    }
    .boot-rule::before,.boot-rule::after { width:min(10vw,38px); flex:0 1 38px; }
    .boot-enter {
      width:min(82vw,320px);
      min-height:48px;
      margin-top:30px;
      padding:13px 22px;
      justify-content:center;
      font-size:13px;
      letter-spacing:.12em;
      text-indent:.12em;
    }
  }
  @media (max-width:680px) and (max-height:560px) {
    .boot-crest { width:112px; height:112px; margin-bottom:14px; }
    .boot-title { font-size:clamp(18px,6.4vw,24px); }
    .boot-rule { margin-top:12px; }
    .boot-enter { min-height:44px; margin-top:18px; }
  }
  @media (prefers-reduced-motion:reduce) {
    .boot-crest img,.boot-crest .halo,.boot-crest .ring,.boot-title span,.boot-rule,.boot-rule::before,.boot-rule::after,.boot-enter { animation:none!important; opacity:1!important; transform:none!important; width:auto; }
    .boot-crest img { width:74%; height:74%; }
    .boot-crest .halo { width:150%; height:150%; opacity:.6!important; }
    .boot-crest .ring-a { width:112%; height:112%; } .boot-crest .ring-b { width:132%; height:132%; }
    .boot-crest .sheen { display:none; }
    .boot-rule::before,.boot-rule::after { width:min(12vw,120px); }
  }

  /* ===== 夜空氛围：视差城堡 · 月光呼吸 · 星尘 · 流星 · 薄雾 ===== */
  .sky { position:absolute; inset:0; z-index:-1; overflow:hidden; pointer-events:none; }
  .parallax { position:absolute; inset:-4%; z-index:-2; background:url("../bg-castle-user.jpg") center/cover no-repeat; transform:scale(1.06); transition:transform .5s cubic-bezier(.2,.7,.2,1); will-change:transform; }
  .moonglow { position:absolute; left:14%; top:11%; width:min(30vw,320px); aspect-ratio:1; border-radius:50%;
    background:radial-gradient(circle, rgba(196,220,252,.30), rgba(150,182,232,.08) 52%, transparent 70%);
    filter:blur(7px); animation:moonBreathe 7.5s ease-in-out infinite; }
  @keyframes moonBreathe { 0%,100%{opacity:.5; transform:scale(1);} 50%{opacity:.92; transform:scale(1.07);} }
  .fog { position:absolute; left:-20%; right:-20%; bottom:-6%; height:46%; pointer-events:none;
    background:radial-gradient(ellipse at 50% 100%, rgba(150,178,224,.12), transparent 62%);
    filter:blur(14px); animation:fogDrift 26s ease-in-out infinite alternate; }
  @keyframes fogDrift { from{transform:translateX(-3%);} to{transform:translateX(3%);} }
  .mote { position:absolute; border-radius:50%; background:rgba(222,236,255,.9);
    box-shadow:0 0 6px 1px rgba(182,212,250,.6); opacity:0; animation:moteFloat linear infinite; }
  @keyframes moteFloat { 0%{opacity:0; transform:translateY(10px);} 12%{opacity:.85;} 88%{opacity:.5;} 100%{opacity:0; transform:translateY(-130px);} }
  .shoot { position:absolute; width:130px; height:2px; border-radius:2px;
    background:linear-gradient(90deg, rgba(224,238,255,.95), rgba(190,215,250,.35) 40%, transparent);
    filter:drop-shadow(0 0 6px rgba(190,215,250,.8)); opacity:0; transform:rotate(20deg); }
  .shoot.run { animation:shootMove 1.15s ease-in forwards; }
  @keyframes shootMove { 0%{opacity:0;} 10%{opacity:1;} 100%{opacity:0; transform:translate(460px,168px) rotate(20deg);} }
  @media (prefers-reduced-motion:reduce) {
    .parallax,.moonglow,.fog,.mote,.shoot { animation:none!important; transition:none!important; }
    .moonglow{opacity:.7;} .mote{display:none;} .shoot{display:none;}
  }